Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

ui: Use base fonts throughout the app #6881

Merged
merged 1 commit into from
Dec 12, 2019
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 1 addition & 2 deletions ui-v2/app/styles/app.scss
Original file line number Diff line number Diff line change
@@ -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*/
Expand All @@ -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 changes: 3 additions & 7 deletions ui-v2/app/styles/base/components/buttons/layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 3 additions & 2 deletions ui-v2/app/styles/base/components/pill/layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -6,7 +6,8 @@
}
%pill button {
padding: 0;
height: 10px;
margin-right: 3px;
width: 9px;
height: 9px;
margin-right: 4px;
font-size: 0;
}
3 changes: 2 additions & 1 deletion ui-v2/app/styles/base/components/tabs/skin.scss
Original file line number Diff line number Diff line change
@@ -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 {
Expand All @@ -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;
Expand Down
3 changes: 0 additions & 3 deletions ui-v2/app/styles/base/components/tooltip/layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 {
Expand Down
1 change: 0 additions & 1 deletion ui-v2/app/styles/base/components/tooltip/skin.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 */
Expand Down
3 changes: 3 additions & 0 deletions ui-v2/app/styles/base/reset/index.scss
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
@import './base-variables';
@import '../color/base-variables';
@import '../color/semantic-variables';
@import '../typography/base-variables';
@import './system';
@import './minireset';
16 changes: 15 additions & 1 deletion ui-v2/app/styles/base/typography/base-placeholders.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
Expand All @@ -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;
Expand Down
3 changes: 3 additions & 0 deletions ui-v2/app/styles/components/app-view.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
2 changes: 1 addition & 1 deletion ui-v2/app/styles/components/app-view/layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
5 changes: 1 addition & 4 deletions ui-v2/app/styles/components/confirmation-dialog/layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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 changes: 4 additions & 1 deletion ui-v2/app/styles/core/layout.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand Down
164 changes: 64 additions & 100 deletions ui-v2/app/styles/core/typography.scss
Original file line number Diff line number Diff line change
@@ -1,131 +1,95 @@
%button {
font-family: $typo-family-sans;
}
main p:not(:last-child),
%modal-window p:not(:last-child) {
margin-bottom: 1em;
body,
%form-element-textarea {
@extend %typo-body;
}
%button,
%form-element textarea,
%form-element [type='text'],
%form-element [type='password'] {
line-height: 1.5;
h1 {
@extend %h1;
font-size: $typo-header-100;
}
h3,
%radio-group label {
line-height: 1.25;
h2 {
@extend %h2;
font-size: $typo-header-200;
}
%filter-bar [role='radiogroup'] label {
line-height: 1.7;
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 {
letter-spacing: 0.03em;
@extend %h5;
}
%footer {
letter-spacing: -0.05em;
%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,
%internal-button {
font-family: $typo-family-sans;
%main-content p,
%app-view > div.disabled > div,
%form-element-note,
%form-element-error > strong {
@extend %p3;
}
/* Weighting */
h1,
%app-view-content div > dt,
%header-drop-nav .is-active {
font-weight: $typo-weight-bold;

%button {
font-weight: $typo-weight-semibold;
}

%radio-group label {
line-height: $typo-lead-200;
}
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;
%tab-nav {
letter-spacing: 0.03em;
}
%button {
font-weight: $typo-weight-semibold !important;
%header-drop-nav .is-active {
font-weight: $typo-weight-bold;
}
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 changes: 1 addition & 1 deletion ui-v2/app/styles/routes/dc/acls/index.scss
Original file line number Diff line number Diff line change
Expand Up @@ -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;
}
}

Expand Down
Empty file.