ui: Use base fonts throughout the app (#6881)
We've had a set of %placeholders in our base styles for quite a while but not butten the bullet to use them. This begins to use them. We had to make a small amount of tweaks to base whilst doing this, but its as we'd prefer there to be as few font placeholders as possible. We might/should be able to reduce these further at somepoint, or potentially rename them. We currently have six header fonts (or 4 header fonts/2 strong body fonts) and 3 body fonts. We also noticed an empty CSS file and deleted that while we were here. We also noticed that the bottom border of structure tabs was a pixel larger than ours so we tweaked that here also.
This commit is contained in:
parent
572e3891fe
commit
1b5658d5ac
|
@ -1,7 +1,7 @@
|
|||
@charset 'utf-8';
|
||||
|
||||
@import 'base/index';
|
||||
@import 'base/reset/index';
|
||||
@import 'base/index';
|
||||
@import 'variables/index';
|
||||
|
||||
/*TODO: Move this to its own local component*/
|
||||
|
@ -23,4 +23,3 @@
|
|||
@import 'routes/dc/kv/index';
|
||||
@import 'routes/dc/acls/index';
|
||||
@import 'routes/dc/acls/tokens/index';
|
||||
@import 'routes/dc/acls/policies/index';
|
||||
|
|
|
@ -24,19 +24,15 @@
|
|||
text-align: center;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
padding: calc(0.375em - 1px) calc(2.2em - 1px);
|
||||
height: 2.55em;
|
||||
padding: calc(0.5em - 1px) calc(2.2em - 1px);
|
||||
min-width: 100px;
|
||||
}
|
||||
%button:not(:last-child) {
|
||||
margin-right: 8px;
|
||||
}
|
||||
%button-compact {
|
||||
/* @extend %button;*/
|
||||
padding-left: calc(1.6em - 1px) !important;
|
||||
padding-right: calc(1.6em - 1px) !important;
|
||||
padding-top: calc(0.35em - 1px) !important;
|
||||
height: 2.3em !important;
|
||||
padding-top: calc(0.4em - 1px) !important;
|
||||
padding-bottom: calc(0.4em - 1px) !important;
|
||||
}
|
||||
%internal-button {
|
||||
padding: 0.75rem 1rem;
|
||||
|
|
|
@ -6,7 +6,8 @@
|
|||
}
|
||||
%pill button {
|
||||
padding: 0;
|
||||
height: 10px;
|
||||
margin-right: 3px;
|
||||
width: 9px;
|
||||
height: 9px;
|
||||
margin-right: 4px;
|
||||
font-size: 0;
|
||||
}
|
||||
|
|
|
@ -1,6 +1,7 @@
|
|||
%tab-nav {
|
||||
/* %frame-gray-something */
|
||||
border-bottom: $decor-border-100;
|
||||
/* TODO: structure tabs don't actually have a top border */
|
||||
border-top: $decor-border-200;
|
||||
}
|
||||
%tab-nav {
|
||||
|
@ -18,7 +19,7 @@
|
|||
text-decoration: none;
|
||||
}
|
||||
%tab-button {
|
||||
border-bottom: $decor-border-200;
|
||||
border-bottom: $decor-border-300;
|
||||
}
|
||||
%tab-button {
|
||||
border-color: $color-transparent;
|
||||
|
|
|
@ -15,9 +15,6 @@
|
|||
white-space: nowrap;
|
||||
content: attr(data-tooltip);
|
||||
text-indent: 0;
|
||||
/* TODO: should this be hardcoded here ? */
|
||||
font-size: 14px;
|
||||
/* structure */
|
||||
min-width: 192px;
|
||||
}
|
||||
%tooltip-bubble {
|
||||
|
|
|
@ -19,7 +19,6 @@
|
|||
border-bottom: 18px solid $gray-500;
|
||||
}
|
||||
%tooltip-bubble {
|
||||
font-weight: normal;
|
||||
border-radius: $decor-radius-200;
|
||||
/* this isn't quite like the values in structure */
|
||||
/* but this looks closer visually */
|
||||
|
|
|
@ -1,3 +1,6 @@
|
|||
@import './base-variables';
|
||||
@import '../color/base-variables';
|
||||
@import '../color/semantic-variables';
|
||||
@import '../typography/base-variables';
|
||||
@import './system';
|
||||
@import './minireset';
|
||||
|
|
|
@ -18,9 +18,14 @@
|
|||
font-weight: $typo-weight-bold;
|
||||
}
|
||||
%h2,
|
||||
%h3 {
|
||||
%h3,
|
||||
%h4 {
|
||||
font-weight: $typo-weight-semibold;
|
||||
}
|
||||
%h5,
|
||||
%h6 {
|
||||
font-weight: $typo-weight-medium;
|
||||
}
|
||||
%h1 {
|
||||
font-size: $typo-size-100;
|
||||
}
|
||||
|
@ -30,6 +35,15 @@
|
|||
%h3 {
|
||||
font-size: $typo-size-300;
|
||||
}
|
||||
/*p1 strong, differing weights */
|
||||
%h4,
|
||||
%h5 {
|
||||
font-size: $typo-size-600;
|
||||
}
|
||||
/*p2 strong */
|
||||
%h6 {
|
||||
font-size: $typo-size-700;
|
||||
}
|
||||
%typo-p {
|
||||
line-height: inherit;
|
||||
font-size: inherit;
|
||||
|
|
|
@ -19,6 +19,9 @@ main {
|
|||
}
|
||||
}
|
||||
// TODO: This should be its own component
|
||||
%app-view h1 {
|
||||
padding-bottom: 0.2em;
|
||||
}
|
||||
%app-view h1 span[data-tooltip] {
|
||||
@extend %with-external-source-icon;
|
||||
margin-top: 13px;
|
||||
|
|
|
@ -29,7 +29,7 @@
|
|||
}
|
||||
%app-view h2 {
|
||||
padding-bottom: 0.2em;
|
||||
margin-bottom: 0.2em;
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
%app-view-header .actions > *:not(:last-child) {
|
||||
margin-right: 12px;
|
||||
|
|
|
@ -4,12 +4,9 @@
|
|||
%confirmation-dialog-inline p {
|
||||
margin-right: 12px;
|
||||
padding-left: 12px;
|
||||
padding-top: 5px;
|
||||
padding-bottom: 5px;
|
||||
margin-bottom: 0;
|
||||
margin-bottom: 0 !important;
|
||||
}
|
||||
%confirmation-dialog-inline {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
line-height: 1;
|
||||
}
|
||||
|
|
|
@ -40,7 +40,10 @@ html.template-edit main {
|
|||
padding: 0;
|
||||
}
|
||||
}
|
||||
/* TODO: keep margin below forms, move elsewhere */
|
||||
%main-content p:not(:last-child) {
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
/* TODO: keep margin below forms, move elsewhere? */
|
||||
%main-content form,
|
||||
%main-content form + div .with-confirmation {
|
||||
margin-bottom: 2em;
|
||||
|
|
|
@ -1,131 +1,95 @@
|
|||
%button {
|
||||
font-family: $typo-family-sans;
|
||||
body,
|
||||
%form-element-textarea {
|
||||
@extend %typo-body;
|
||||
}
|
||||
main p:not(:last-child),
|
||||
%modal-window p:not(:last-child) {
|
||||
margin-bottom: 1em;
|
||||
h1 {
|
||||
@extend %h1;
|
||||
font-size: $typo-header-100;
|
||||
}
|
||||
h2 {
|
||||
@extend %h2;
|
||||
font-size: $typo-header-200;
|
||||
}
|
||||
h3 {
|
||||
@extend %h3;
|
||||
font-size: $typo-header-300;
|
||||
}
|
||||
fieldset > header,
|
||||
%header-nav,
|
||||
%app-view-content div > dl > dt,
|
||||
%table caption,
|
||||
%tbody-th,
|
||||
%form-element > span {
|
||||
@extend %h4;
|
||||
}
|
||||
%internal-button,
|
||||
%breadcrumbs li > *,
|
||||
%tab-nav {
|
||||
@extend %h5;
|
||||
}
|
||||
%healthcheck-output dt,
|
||||
%table th,
|
||||
%table td strong,
|
||||
%tooltip-bubble,
|
||||
%sliding-toggle label span {
|
||||
@extend %h6;
|
||||
}
|
||||
|
||||
pre code,
|
||||
%notice,
|
||||
%notice p,
|
||||
%filter-bar input,
|
||||
%phrase-editor input {
|
||||
@extend %p1;
|
||||
}
|
||||
.type-dialog,
|
||||
%table td p,
|
||||
%table td,
|
||||
%healthcheck-output dl > dd,
|
||||
%form-element-label,
|
||||
%stats-card header a span,
|
||||
%footer,
|
||||
%app-view h1 span.kind-proxy {
|
||||
@extend %p2;
|
||||
}
|
||||
.template-error > div,
|
||||
%button,
|
||||
%form-element textarea,
|
||||
%form-element [type='text'],
|
||||
%form-element [type='password'] {
|
||||
line-height: 1.5;
|
||||
%main-content p,
|
||||
%app-view > div.disabled > div,
|
||||
%form-element-note,
|
||||
%form-element-error > strong {
|
||||
@extend %p3;
|
||||
}
|
||||
h3,
|
||||
|
||||
%button {
|
||||
font-weight: $typo-weight-semibold;
|
||||
}
|
||||
|
||||
%radio-group label {
|
||||
line-height: 1.25;
|
||||
}
|
||||
%filter-bar [role='radiogroup'] label {
|
||||
line-height: 1.7;
|
||||
line-height: $typo-lead-200;
|
||||
}
|
||||
%header-nav,
|
||||
%tab-nav {
|
||||
letter-spacing: 0.03em;
|
||||
}
|
||||
%footer {
|
||||
letter-spacing: -0.05em;
|
||||
}
|
||||
|
||||
%button,
|
||||
%internal-button {
|
||||
font-family: $typo-family-sans;
|
||||
}
|
||||
/* Weighting */
|
||||
h1,
|
||||
%app-view-content div > dt,
|
||||
%header-drop-nav .is-active {
|
||||
font-weight: $typo-weight-bold;
|
||||
}
|
||||
h2,
|
||||
h3,
|
||||
fieldset > header,
|
||||
caption,
|
||||
%header-nav,
|
||||
%healthcheck-output dt,
|
||||
%copy-button,
|
||||
%app-view-content div > dl > dt,
|
||||
%tbody-th,
|
||||
%form-element > span,
|
||||
%toggle label span {
|
||||
font-weight: $typo-weight-semibold;
|
||||
}
|
||||
%button {
|
||||
font-weight: $typo-weight-semibold !important;
|
||||
}
|
||||
main label a[rel*='help'],
|
||||
%main-content label a[rel*='help'],
|
||||
%pill,
|
||||
%tbody-th em,
|
||||
%form-element > strong,
|
||||
%tbody-th em,
|
||||
%app-view h1 em {
|
||||
font-weight: $typo-weight-normal;
|
||||
}
|
||||
th,
|
||||
td strong,
|
||||
%breadcrumbs li > *,
|
||||
%action-group-action,
|
||||
%tab-nav,
|
||||
%tooltip-bubble {
|
||||
font-weight: $typo-weight-medium;
|
||||
}
|
||||
|
||||
/* Styling */
|
||||
%form-element > em,
|
||||
%tbody-th em,
|
||||
%app-view h1 em {
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
/* Sizing */
|
||||
%footer > * {
|
||||
font-size: inherit;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: $typo-header-100;
|
||||
}
|
||||
h2 {
|
||||
font-size: $typo-header-200;
|
||||
}
|
||||
h3 {
|
||||
font-size: $typo-header-300;
|
||||
}
|
||||
%header-drop-nav .is-active,
|
||||
%app-view h1 em {
|
||||
font-size: $typo-size-500;
|
||||
}
|
||||
body,
|
||||
pre code,
|
||||
input,
|
||||
textarea,
|
||||
%internal-button,
|
||||
%action-group-action,
|
||||
%tbody-th {
|
||||
font-size: $typo-size-600;
|
||||
}
|
||||
th,
|
||||
td,
|
||||
caption,
|
||||
.type-dialog,
|
||||
%healthcheck-output dl > *,
|
||||
%form-element > span,
|
||||
%tooltip-bubble,
|
||||
%stats-card header a span,
|
||||
%footer,
|
||||
%app-view h1 span.kind-proxy {
|
||||
font-size: $typo-size-700;
|
||||
}
|
||||
%toggle label span {
|
||||
font-size: $typo-size-700 !important;
|
||||
}
|
||||
fieldset > p,
|
||||
.template-error > div,
|
||||
[role='tabpanel'] > p:only-child,
|
||||
.with-confirmation p,
|
||||
%app-view-content > p:only-child,
|
||||
%app-view > div.disabled > div,
|
||||
%button,
|
||||
%form-element > em,
|
||||
%form-element > strong,
|
||||
%feedback-dialog-inline p {
|
||||
font-size: $typo-size-800;
|
||||
}
|
||||
|
|
|
@ -10,7 +10,7 @@ td a.is-management::after {
|
|||
.template-policy.template-list main header .actions,
|
||||
.template-token.template-list main header .actions {
|
||||
position: relative;
|
||||
top: 45px;
|
||||
top: 42px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
Loading…
Reference in New Issue