luxolus
/
open-consul
2
0
Fork 0
Code Issues 1 Pull Requests Packages Releases Wiki Activity

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:
John Cowen 2019-12-12 09:25:39 +00:00 committed by John Cowen
parent 572e3891fe
commit 1b5658d5ac
15 changed files with 103 additions and 126 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

3
ui-v2/app/styles/app.scss
View File

@ -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';

10
ui-v2/app/styles/base/components/buttons/layout.scss
View File

@ -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;

5
ui-v2/app/styles/base/components/pill/layout.scss
View File

@ -6,7 +6,8 @@
}
%pill button {
padding: 0;
height: 10px;
margin-right: 3px;
width: 9px;
height: 9px;
margin-right: 4px;
font-size: 0;
}

3
ui-v2/app/styles/base/components/tabs/skin.scss
View File

@ -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;

3
ui-v2/app/styles/base/components/tooltip/layout.scss
View File

@ -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 {

1
ui-v2/app/styles/base/components/tooltip/skin.scss
View File

@ -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 */

3
ui-v2/app/styles/base/reset/index.scss
View File

@ -1,3 +1,6 @@
@import './base-variables';
@import '../color/base-variables';
@import '../color/semantic-variables';
@import '../typography/base-variables';
@import './system';
@import './minireset';

16
ui-v2/app/styles/base/typography/base-placeholders.scss
View File

@ -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;

3
ui-v2/app/styles/components/app-view.scss
View File

@ -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;

2
ui-v2/app/styles/components/app-view/layout.scss
View File

@ -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;

5
ui-v2/app/styles/components/confirmation-dialog/layout.scss
View File

@ -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;
}

5
ui-v2/app/styles/core/layout.scss
View File

@ -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;

168
ui-v2/app/styles/core/typography.scss
View File

@ -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;
}

2
ui-v2/app/styles/routes/dc/acls/index.scss
View File

@ -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;
}
}

0
ui-v2/app/styles/routes/dc/acls/policies/index.scss
View File