ui: Re-organize our %h* placeholders (#9584)
We've always had this idea of being able to markup up information
semantically without thinking about what it should look like, then
applying our %h* placeholder styles to control what the information
should look like.
Back when we originally made our set of %h* placeholders, we tried to
follow Structure as much as possible, which defined the largest header
(which we thought would have been the h1 style) as a super large 3.5rem.
Therefore we made our set of %h* placeholders the same as Structure
beginning at a huge 3.5 size. We then re-overwrote those sizes only in
Consul specific CSS files thinking that this was due to us existing
before Structure did.
Lately we saw an extra clue in Structure - the extra large 3.5 header was
called 'h0'.
This commit moves all our headers to use a zero based scale, and
additionally uses our 3 digit scale as opposed to 1 digit (h1 vs h100),
similar to our color scales (note we don't use a hypen, which we can
alter later if need be), which means we can insert additional h150 etc
if need be.
Additional we stop styling our headers globally (h1 { @extend %h100; }
). This means there is no reason not to use headers for marking up
content depending on what it is rather than what it should look like,
and as a consequence means we can be more purposeful in ordering h*
tags.
Lastly, we use the new scale over the entire codebase and update a
couple of places where we were using using header tags due to what the
styleing for them looked like rather than what the meaning/order was.
This commit is contained in:
John Cowen
GitHub
parent
68f65fd4a9
commit
cf63afaddb
|
|
@ -49,9 +49,7 @@
|
|||
}
|
||||
%chain-group > header > * {
|
||||
text-transform: uppercase;
|
||||
border: 0;
|
||||
font-size: 12px;
|
||||
font-weight: normal;
|
||||
@extend %p3;
|
||||
}
|
||||
%chain-group > header span::after {
|
||||
@extend %with-info-circle-outline-icon, %as-pseudo;
|
||||
|
|
|
|||
|
|
@ -1,3 +1,3 @@
|
|||
.consul-external-source {
|
||||
@extend %pill-200, %frame-gray-600;
|
||||
@extend %pill-200, %frame-gray-600, %p1;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -15,8 +15,7 @@
|
|||
}
|
||||
}
|
||||
%healthcheck-output header > * {
|
||||
@extend %h3;
|
||||
font-size: $typo-header-300;
|
||||
@extend %h300;
|
||||
}
|
||||
%healthcheck-output dd em {
|
||||
@extend %pill;
|
||||
|
|
|
|||
|
|
@ -1,6 +1,7 @@
|
|||
.consul-intention-permission-form {
|
||||
h2 {
|
||||
border-top: 1px solid $blue-500;
|
||||
@extend %h200;
|
||||
}
|
||||
button.type-submit {
|
||||
@extend %frame-blue-300;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.consul-kind {
|
||||
@extend %pill-200, %frame-gray-600;
|
||||
@extend %pill-200, %frame-gray-600, %p1;
|
||||
}
|
||||
.consul-kind::before {
|
||||
@extend %with-gateway-mask, %as-pseudo;
|
||||
|
|
|
|||
|
|
@ -1,5 +1,6 @@
|
|||
.consul-lock-session-form {
|
||||
h2 {
|
||||
@extend %h200;
|
||||
border-bottom: $decor-border-200;
|
||||
border-color: $gray-200;
|
||||
padding-bottom: .2em;
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
cursor: default;
|
||||
}
|
||||
header {
|
||||
@extend %h4;
|
||||
@extend %h400;
|
||||
}
|
||||
header > * {
|
||||
@extend %typo-inherit;
|
||||
|
|
|
|||
|
|
@ -28,6 +28,9 @@
|
|||
%modal-window > header {
|
||||
@extend %frame-gray-800;
|
||||
}
|
||||
%modal-window > header > * {
|
||||
@extend %h200;
|
||||
}
|
||||
|
||||
.modal-dialog-body,
|
||||
%modal-window > footer,
|
||||
|
|
|
|||
|
|
@ -7,8 +7,7 @@
|
|||
@extend %as-pseudo;
|
||||
}
|
||||
%notice header > * {
|
||||
@extend %h3;
|
||||
font-size: $typo-header-300;
|
||||
@extend %h300;
|
||||
}
|
||||
%notice footer * {
|
||||
@extend %p3;
|
||||
|
|
|
|||
|
|
@ -6,6 +6,9 @@
|
|||
border: $decor-border-100;
|
||||
outline: none;
|
||||
}
|
||||
%form h2 {
|
||||
@extend %h200;
|
||||
}
|
||||
%form fieldset > p,
|
||||
%form-element-note,
|
||||
%form-element-text-input::placeholder {
|
||||
|
|
|
|||
|
|
@ -12,42 +12,49 @@
|
|||
%typo-header {
|
||||
line-height: $typo-lead-200;
|
||||
}
|
||||
%h1,
|
||||
%h2,
|
||||
%h3,
|
||||
%h4,
|
||||
%h5,
|
||||
%h6 {
|
||||
%h000,
|
||||
%h100,
|
||||
%h200,
|
||||
%h300,
|
||||
%h400,
|
||||
%h500,
|
||||
%h600,
|
||||
%h400,
|
||||
%h500,
|
||||
%h600 {
|
||||
@extend %typo-header;
|
||||
}
|
||||
%h1 {
|
||||
%h100 {
|
||||
font-weight: $typo-weight-bold;
|
||||
}
|
||||
%h2,
|
||||
%h3,
|
||||
%h4 {
|
||||
%h200,
|
||||
%h300,
|
||||
%h400 {
|
||||
font-weight: $typo-weight-semibold;
|
||||
}
|
||||
%h5,
|
||||
%h6 {
|
||||
%h500,
|
||||
%h600 {
|
||||
font-weight: $typo-weight-medium;
|
||||
}
|
||||
%h1 {
|
||||
%h000 {
|
||||
font-size: $typo-size-100;
|
||||
}
|
||||
%h2 {
|
||||
%h100 {
|
||||
font-size: $typo-size-200;
|
||||
}
|
||||
%h3 {
|
||||
%h200 {
|
||||
font-size: $typo-size-300;
|
||||
}
|
||||
%h300 {
|
||||
font-size: $typo-size-500;
|
||||
}
|
||||
/*p1 strong, differing weights */
|
||||
%h4,
|
||||
%h5 {
|
||||
%h400,
|
||||
%h500 {
|
||||
font-size: $typo-size-600;
|
||||
}
|
||||
/*p2 strong */
|
||||
%h6 {
|
||||
%h600 {
|
||||
font-size: $typo-size-700;
|
||||
}
|
||||
%typo-p {
|
||||
|
|
|
|||
|
|
@ -1,3 +1,2 @@
|
|||
@import './base-variables';
|
||||
@import './semantic-variables';
|
||||
@import './base-placeholders';
|
||||
|
|
|
|||
|
|
@ -1,3 +0,0 @@
|
|||
$typo-header-100: $typo-size-200;
|
||||
$typo-header-200: $typo-size-300;
|
||||
$typo-header-300: $typo-size-500;
|
||||
|
|
@ -4,6 +4,9 @@
|
|||
%app-view-title {
|
||||
border-bottom: $decor-border-100;
|
||||
}
|
||||
%app-view-title > *:first-child {
|
||||
@extend %h100;
|
||||
}
|
||||
%app-view-content form:not(.filter-bar) fieldset {
|
||||
border-bottom: $decor-border-200;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -8,6 +8,9 @@
|
|||
%empty-state-header {
|
||||
border-bottom: none;
|
||||
}
|
||||
%empty-state-header {
|
||||
@extend %h200;
|
||||
}
|
||||
/* Icons */
|
||||
%empty-state header::before {
|
||||
font-size: 2.6em;
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@ html[data-route^='dc.services.instance'] .tab-section section:not(:last-child) {
|
|||
padding-bottom: 24px;
|
||||
border-bottom: 1px solid $gray-200;
|
||||
}
|
||||
html[data-route^='dc.services.instance.metadata'] .tab-section section h3,
|
||||
html[data-route^='dc.services.instance.proxy'] .tab-section section h3 {
|
||||
html[data-route^='dc.services.instance.metadata'] .tab-section section h2 {
|
||||
@extend %h300;
|
||||
margin: 24px 0 12px 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -2,18 +2,6 @@ body,
|
|||
%form-element-text-input {
|
||||
@extend %typo-body;
|
||||
}
|
||||
h1 {
|
||||
@extend %h1;
|
||||
font-size: $typo-header-100;
|
||||
}
|
||||
h2 {
|
||||
@extend %h2;
|
||||
font-size: $typo-header-200;
|
||||
}
|
||||
h3 {
|
||||
@extend %h3;
|
||||
font-size: $typo-header-300;
|
||||
}
|
||||
%radio-card header,
|
||||
fieldset > header,
|
||||
%main-nav-horizontal-action,
|
||||
|
|
@ -21,18 +9,18 @@ fieldset > header,
|
|||
%table caption,
|
||||
%tbody-th,
|
||||
%form-element > span {
|
||||
@extend %h4;
|
||||
@extend %h400;
|
||||
}
|
||||
%internal-button,
|
||||
%breadcrumbs li > *,
|
||||
%tab-nav {
|
||||
@extend %h5;
|
||||
@extend %h500;
|
||||
}
|
||||
%healthcheck-output dt,
|
||||
%table th,
|
||||
%table td strong,
|
||||
%sliding-toggle label span {
|
||||
@extend %h6;
|
||||
@extend %h600;
|
||||
}
|
||||
|
||||
pre code,
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
<div class="tab-section">
|
||||
<section class="tags">
|
||||
<h3>Tags</h3>
|
||||
<h2>Tags</h2>
|
||||
{{#if (gt item.Tags.length 0) }}
|
||||
<TagList @item={{item}} />
|
||||
{{else}}
|
||||
|
|
@ -14,7 +14,7 @@
|
|||
{{/if}}
|
||||
</section>
|
||||
<section class="metadata">
|
||||
<h3>Meta</h3>
|
||||
<h2>Meta</h2>
|
||||
{{#if item.Meta}}
|
||||
<Consul::Metadata::List @items={{entries item.Meta}} />
|
||||
{{else}}
|
||||
|
|
|
|||
Loading…
Reference in New Issue