From 4e3c14fb5d46984eb8f9ff1f4a7e7c4f3cf463eb Mon Sep 17 00:00:00 2001
From: m26lebla <m26lebla@uwaterloo.ca>
Date: Thu, 6 Aug 2020 13:13:10 -0400
Subject: [PATCH] Additional css font sizing
---
css/styles.css | 53 ++++++++++++++-----
.../02-html-elements/25-forms/_forms.scss | 2 +-
.../02-html-elements/27-input/_input.scss | 8 +--
.../layout-builder/_layout-builder.scss | 27 +++++++++-
.../04-components/form-item/_form-item.scss | 5 +-
5 files changed, 73 insertions(+), 22 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index f8232ad0..ebb23cb9 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -991,7 +991,7 @@ input {
label {
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
- font-size: 20.256px;
+ font-size: 16px;
font-weight: 400;
margin-bottom: 1rem; }
label abbr {
@@ -1157,8 +1157,9 @@ img {
svg:not(:root) {
overflow: hidden; }
-.uw-input {
- background-color: #fff;
+.uw-input,
+.form-text {
+ background-color: #fafafa;
border: 1px solid #ccc;
border-radius: 3px;
box-shadow: inset 0 1px 3px #ccc;
@@ -1166,14 +1167,17 @@ svg:not(:root) {
color: #4e4e4e;
font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
font-size: 16px;
- padding: 0.5rem;
+ max-width: inherit;
+ padding: 0.5rem !important;
transition: border-color;
width: auto; }
- .uw-input:focus {
+ .uw-input:focus,
+ .form-text:focus {
border: 1px solid #757575;
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06), 0 0 5px rgba(104, 104, 104, 0.7);
outline: #757575; }
- .uw-input--submit {
+ .uw-input--submit,
+ .form-text--submit {
background-color: #757575;
background-image: none;
border: 0;
@@ -1198,9 +1202,12 @@ svg:not(:root) {
vertical-align: top;
white-space: normal;
width: 100%; }
- .uw-input--submit:visited {
+ .uw-input--submit:visited,
+ .form-text--submit:visited {
color: #fff; }
- .uw-input--submit:hover, .uw-input--submit:focus {
+ .uw-input--submit:hover, .uw-input--submit:focus,
+ .form-text--submit:hover,
+ .form-text--submit:focus {
background-color: #eee;
background-image: none;
border: 0;
@@ -1208,12 +1215,14 @@ svg:not(:root) {
color: #4e4e4e;
outline: none !important;
text-decoration: none; }
- .uw-input--submit:active {
+ .uw-input--submit:active,
+ .form-text--submit:active {
background-color: #757575;
background-image: none;
color: #fff;
outline: none !important; }
- .uw-input--submit[disabled] {
+ .uw-input--submit[disabled],
+ .form-text--submit[disabled] {
background-color: #eee;
background-image: none;
color: #A2A2A2;
@@ -1798,7 +1807,6 @@ svg:not(:root) {
.block-local-tasks-block,
.layout-builder-form,
.node-form,
-.contextual-region,
.admin-list,
.js-media-library-view,
.messages,
@@ -1814,7 +1822,6 @@ form {
.block-local-tasks-block,
.layout-builder-form,
.node-form,
- .contextual-region,
.admin-list,
.js-media-library-view,
.messages,
@@ -1841,6 +1848,24 @@ form {
.ui-dialog-buttonpane {
box-shadow: 0 0 10px rgba(0, 0, 0, 0.3) ,0 0 0 rgba(0, 0, 0, 0.3); }
+.ui-dialog label {
+ font-size: 18px; }
+
+.ui-dialog .fieldset-wrapper {
+ display: flex; }
+ .ui-dialog .fieldset-wrapper .form-type-select {
+ flex: 1; }
+
+.ui-dialog .media-library-widget .fieldset-wrapper {
+ display: block; }
+
+.ui-dialog .description {
+ font-size: 12.64px;
+ font-style: italic; }
+
+.ui-dialog .views-display-link {
+ font-family: Typ1451-Medium,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif; }
+
/* stylelint-disable-next-line selector-no-qualifying-type */
ul.toolbar-menu {
font-size: 0.79rem; }
@@ -2797,7 +2822,7 @@ fieldset,
position: relative; }
.form-item {
- margin: 0 0 1.5rem; }
+ margin: 0 0 1rem; }
.form-item__label {
display: block; }
@@ -2811,7 +2836,7 @@ fieldset,
.form-item__description {
color: #4e4e4e;
- font-size: 1.125rem; }
+ font-size: 0.88889rem; }
.form-item__description > :last-child {
margin-bottom: 0; }
diff --git a/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss b/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss
index 361eeb84..7c040f45 100644
--- a/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss
+++ b/source/_patterns/02-base/02-html-elements/25-forms/_forms.scss
@@ -65,7 +65,7 @@ input {
label {
font-family: $form-label-font-family;
- font-size: gesso-font-size(2);
+ font-size: gesso-font-size(0);
font-weight: gesso-font-weight(regular);
margin-bottom: rem(gesso-spacing(sm));
abbr {
diff --git a/source/_patterns/02-base/02-html-elements/27-input/_input.scss b/source/_patterns/02-base/02-html-elements/27-input/_input.scss
index ab7e70b8..74ba7f18 100644
--- a/source/_patterns/02-base/02-html-elements/27-input/_input.scss
+++ b/source/_patterns/02-base/02-html-elements/27-input/_input.scss
@@ -1,4 +1,4 @@
-$uw-input-background-color: gesso-grayscale(white) !default;
+$uw-input-background-color: gesso-color(form, background) !default;
$uw-input-background-color-focus: gesso-color(ui, generic, text-light) !default;
$uw-input-border-color: gesso-color(form, input, input-border) !default;
$uw-input-border-color-focus: gesso-color(form, input, input-border-focus) !default;
@@ -12,7 +12,8 @@ $uw-input-padding: rem(gesso-spacing(xs));
-.uw-input {
+.uw-input,
+.form-text{
background-color:$uw-input-background-color;
border: 1px solid $uw-input-border-color;
border-radius: 3px;
@@ -21,7 +22,8 @@ $uw-input-padding: rem(gesso-spacing(xs));
color: $uw-input-text-color;
font-family: $uw-input-font-family;
font-size: $uw-input-font-size;
- padding: $uw-input-padding;
+ max-width:inherit;
+ padding: $uw-input-padding !important;
transition: border-color;
width: auto;
&:focus {
diff --git a/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss b/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
index 53736b55..5168611a 100644
--- a/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
+++ b/source/_patterns/04-components/00-cms-styles/layout-builder/_layout-builder.scss
@@ -8,7 +8,6 @@
.block-local-tasks-block,
.layout-builder-form,
.node-form,
-.contextual-region,
.admin-list,
.js-media-library-view,
.messages,
@@ -47,4 +46,28 @@ form {
// button in popup
.ui-dialog-buttonpane{
box-shadow: gesso-box-shadow(6);
-}
\ No newline at end of file
+}
+
+.ui-dialog{
+ label {
+ font-size: gesso-font-size(1);
+ }
+ .fieldset-wrapper{
+ display:flex;
+ .form-type-select{
+ flex:1;
+ }
+ }
+ .media-library-widget{
+ .fieldset-wrapper{
+ display:block;
+ }
+ }
+ .description{
+ font-size: gesso-font-size(-2);
+ font-style:italic;
+ }
+ .views-display-link{
+ font-family: $uw-input-font-family;
+ }
+}
diff --git a/source/_patterns/04-components/form-item/_form-item.scss b/source/_patterns/04-components/form-item/_form-item.scss
index 831fbf1b..47697dc5 100644
--- a/source/_patterns/04-components/form-item/_form-item.scss
+++ b/source/_patterns/04-components/form-item/_form-item.scss
@@ -10,7 +10,8 @@ $form-disabled-opacity: 0.35 !default;
$form-text-size: gesso-base-font-size() !default;
.form-item {
- margin: 0 0 rem(gesso-spacing(md));
+ margin: 0 0 rem(gesso-spacing(sm));
+
}
.form-item__label {
@@ -31,7 +32,7 @@ $form-text-size: gesso-base-font-size() !default;
.form-item__description {
color: gesso-color(text, secondary);
- font-size: rem(gesso-font-size(1));
+ font-size: rem(gesso-font-size(-1));
> :last-child {
margin-bottom: 0;
--
GitLab