From e992568ecf7cb0925530acd526a436eac948ca90 Mon Sep 17 00:00:00 2001
From: m26lebla <m26lebla@uwaterloo.ca>
Date: Tue, 21 Jul 2020 10:49:22 -0400
Subject: [PATCH] additional css for button
---
css/styles.css | 124 ++++--------------
source/_data/design-tokens.artifact.yml | 16 +++
.../00-config/01-mixins/_mixins.button.scss | 6 +
.../00-config/_design-tokens.artifact.scss | 17 +++
.../00-config/config.design-tokens.yml | 16 +++
.../02-html-elements/27-input/_input.scss | 55 ++++----
6 files changed, 108 insertions(+), 126 deletions(-)
diff --git a/css/styles.css b/css/styles.css
index 3c39599e..923a9bd5 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -1008,22 +1008,26 @@ svg:not(:root) {
.uw-input {
background-color: #fff;
- border: 1px solid #dfdfdf;
- border-color: #c6c6c6;
+ border: 1px solid #ccc;
border-radius: 3px;
- box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.06);
+ box-shadow: inset 0 1px 3px #ccc;
box-sizing: border-box;
color: #4e4e4e;
- font-family: Typ1451-Medium, verdana, sans-serif;
- font-size: 1rem;
- padding: .46667rem;
+ 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;
transition: border-color;
width: auto; }
+ .uw-input: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 {
background-color: #757575;
background-image: none;
border: 0;
border-radius: 0;
+ box-shadow: none;
color: #fff;
cursor: pointer;
display: inline-block;
@@ -1047,106 +1051,22 @@ svg:not(:root) {
.uw-input--submit:hover, .uw-input--submit:focus {
background-color: #eee;
background-image: none;
+ border: 0;
+ box-shadow: none !important;
color: #4e4e4e;
+ outline: none !important;
text-decoration: none; }
.uw-input--submit:active {
background-color: #757575;
background-image: none;
- color: #fff; }
+ color: #fff;
+ outline: none !important; }
.uw-input--submit[disabled] {
background-color: #eee;
background-image: none;
color: #A2A2A2;
cursor: default;
pointer-events: none; }
- .uw-input--medium {
- background-color: #757575;
- background-image: none;
- border: 0;
- border-radius: 0;
- color: #fff;
- cursor: pointer;
- display: inline-block;
- font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
- font-size: 18px;
- font-weight: 600;
- letter-spacing: 0.055rem;
- line-height: 1.45;
- max-width: 18.125rem;
- padding: 1rem 1.5rem;
- text-align: center;
- text-decoration: none;
- text-shadow: none;
- text-transform: uppercase;
- transition: background 200ms cubic-bezier(0.4, 0, 1, 1);
- vertical-align: top;
- white-space: normal;
- width: 100%;
- font-size: 14.22224px;
- max-width: 12rem;
- padding: 0.5rem; }
- .uw-input--medium:visited {
- color: #fff; }
- .uw-input--medium:hover, .uw-input--medium:focus {
- background-color: #eee;
- background-image: none;
- color: #4e4e4e;
- text-decoration: none; }
- .uw-input--medium:active {
- background-color: #757575;
- background-image: none;
- color: #fff; }
- .uw-input--medium[disabled] {
- background-color: #eee;
- background-image: none;
- color: #A2A2A2;
- cursor: default;
- pointer-events: none; }
- .uw-input--small {
- background-color: #757575;
- background-image: none;
- border: 0;
- border-radius: 0;
- color: #fff;
- cursor: pointer;
- display: inline-block;
- font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
- font-size: 18px;
- font-weight: 600;
- letter-spacing: 0.055rem;
- line-height: 1.45;
- max-width: 18.125rem;
- padding: 1rem 1.5rem;
- text-align: center;
- text-decoration: none;
- text-shadow: none;
- text-transform: uppercase;
- transition: background 200ms cubic-bezier(0.4, 0, 1, 1);
- vertical-align: top;
- white-space: normal;
- width: 100%;
- font-size: 0.79rem;
- max-width: 9rem;
- padding: 0.5rem; }
- .uw-input--small:visited {
- color: #fff; }
- .uw-input--small:hover, .uw-input--small:focus {
- background-color: #eee;
- background-image: none;
- color: #4e4e4e;
- text-decoration: none; }
- .uw-input--small:active {
- background-color: #757575;
- background-image: none;
- color: #fff; }
- .uw-input--small[disabled] {
- background-color: #eee;
- background-image: none;
- color: #A2A2A2;
- cursor: default;
- pointer-events: none; }
- .uw-input--small:hover, .uw-input--small:focus {
- padding: 0.5rem; }
.breadcrumb__title, .readmore-link__accessibility-description {
clip: rect(1px, 1px, 1px, 1px);
@@ -1833,6 +1753,7 @@ ul.toolbar-menu {
background-image: none;
border: 0;
border-radius: 0;
+ box-shadow: none;
color: #fff;
cursor: pointer;
display: inline-block;
@@ -1857,12 +1778,16 @@ ul.toolbar-menu {
.button:hover, .button:focus {
background-color: #eee;
background-image: none;
+ border: 0;
+ box-shadow: none !important;
color: #4e4e4e;
+ outline: none !important;
text-decoration: none; }
.button:active {
background-color: #757575;
background-image: none;
- color: #fff; }
+ color: #fff;
+ outline: none !important; }
.button[disabled] {
background-color: #eee;
background-image: none;
@@ -4306,6 +4231,7 @@ picture {
background-image: none;
border: 0;
border-radius: 0;
+ box-shadow: none;
color: #000;
cursor: pointer;
display: inline-block;
@@ -4336,12 +4262,16 @@ picture {
.tabs__link:hover, .tabs__link:focus {
background-color: #A2A2A2;
background-image: none;
+ border: 0;
+ box-shadow: none !important;
color: #000;
+ outline: none !important;
text-decoration: none; }
.tabs__link:active {
background-color: #4e4e4e;
background-image: none;
- color: #fff; }
+ color: #fff;
+ outline: none !important; }
.tabs__link[disabled] {
background-color: #eee;
background-image: none;
diff --git a/source/_data/design-tokens.artifact.yml b/source/_data/design-tokens.artifact.yml
index d5736347..dbb9cad5 100644
--- a/source/_data/design-tokens.artifact.yml
+++ b/source/_data/design-tokens.artifact.yml
@@ -176,6 +176,13 @@ gesso:
border: "#ccc"
border-dark: "#757575"
border-light: "#fafafa"
+ input:
+ input-background: "#fff"
+ input-border: "#ccc"
+ input-border-focus: "#757575"
+ input-color: "#4e4e4e"
+ input-outline: "#eee"
+ input-focus: "#757575"
thumb: "#757575"
track: "#A2A2A2"
mark:
@@ -367,6 +374,15 @@ gesso:
font-weight: 600
letter-spacing: .02rem
line-height: 1.1
+ input:
+ 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
+ font-style: normal
+ font-weight: 600
+ letter-spacing: .02rem
+ line-height: 1.1
transitions:
ease:
ease-in-out: cubic-bezier(0.4, 0, 0.2, 1)
diff --git a/source/_patterns/00-config/01-mixins/_mixins.button.scss b/source/_patterns/00-config/01-mixins/_mixins.button.scss
index f6894f93..a2231102 100644
--- a/source/_patterns/00-config/01-mixins/_mixins.button.scss
+++ b/source/_patterns/00-config/01-mixins/_mixins.button.scss
@@ -42,6 +42,7 @@ $button-font-size: gesso-font-size(1) !default;
background-image:$button-background-image;
border: 0;
border-radius: $border-radius;
+ box-shadow:none;
color: $color-text;
cursor: pointer;
display: inline-block;
@@ -68,14 +69,19 @@ $button-font-size: gesso-font-size(1) !default;
&:focus {
background-color: $color-background-hover;
background-image:$button-background-image;
+ border: 0;
+ box-shadow: none !important;
color: $color-text-hover;
+ outline: none !important;
text-decoration: none;
+
}
&:active {
background-color: $color-background-active;
background-image:$button-background-image;
color: $color-text-active;
+ outline: none !important;
}
&[disabled] {
diff --git a/source/_patterns/00-config/_design-tokens.artifact.scss b/source/_patterns/00-config/_design-tokens.artifact.scss
index 4d0531f3..a2bae51f 100644
--- a/source/_patterns/00-config/_design-tokens.artifact.scss
+++ b/source/_patterns/00-config/_design-tokens.artifact.scss
@@ -211,6 +211,14 @@ $gesso: (
border: #ccc,
border-dark: #757575,
border-light: #fafafa,
+ input: (
+ input-background: #fff,
+ input-border: #ccc,
+ input-border-focus: #757575,
+ input-color: #4e4e4e,
+ input-outline: #eee,
+ input-focus: #757575,
+ ),
thumb: #757575,
track: #A2A2A2,
),
@@ -423,6 +431,15 @@ $gesso: (
letter-spacing: .02rem,
line-height: 1.1,
),
+ input: (
+ 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,
+ font-style: normal,
+ font-weight: 600,
+ letter-spacing: .02rem,
+ line-height: 1.1,
+ ),
),
),
transitions: (
diff --git a/source/_patterns/00-config/config.design-tokens.yml b/source/_patterns/00-config/config.design-tokens.yml
index 7046cb50..bb537d82 100644
--- a/source/_patterns/00-config/config.design-tokens.yml
+++ b/source/_patterns/00-config/config.design-tokens.yml
@@ -176,6 +176,13 @@ gesso:
border: grayscale.gray-3
border-dark: grayscale.gray-5
border-light: grayscale.gray-1
+ input:
+ input-background: grayscale.white
+ input-border: grayscale.gray-3
+ input-border-focus: grayscale.gray-5
+ input-color: grayscale.gray-6
+ input-outline: grayscale.gray-2
+ input-focus: grayscale.gray-5
thumb: grayscale.gray-5
track: grayscale.gray-4
mark:
@@ -353,6 +360,15 @@ gesso:
font-weight: semibold
letter-spacing: .02rem
line-height: tight
+ input:
+ color: text.secondary
+ font-family: systemmedium.stack
+ font-size: 0
+ font-style: normal
+ font-weight: semibold
+ letter-spacing: .02rem
+ line-height: tight
+
transitions:
ease:
ease-in-out: 'cubic-bezier(0.4, 0, 0.2, 1)'
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 5ff1f65a..1afd07d1 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,38 +1,35 @@
+$uw-input-background-color: gesso-grayscale(white) !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;
+$uw-input-box-shadow: gesso-color(form, input, input-border) !default;
+$uw-input-box-shadow-focus: gesso-color(form, input, input-border) !default;
+$uw-input-font-family: gesso-font-family(systemmedium) !default;
+$uw-input-font-size: gesso-font-size(0) !default;
+$uw-input-text-color: gesso-color(form, input, input-color) !default;
+$uw-input-padding: rem(gesso-spacing(xs));
+
+
+
+
.uw-input {
- background-color: #fff;
- border: 1px solid #dfdfdf;
- border-color: #c6c6c6;
+ background-color:$uw-input-background-color;
+ border: 1px solid $uw-input-border-color;
border-radius: 3px;
- box-shadow: inset 0 1px 3px rgba(0,0,0,.06);
+ box-shadow: inset 0 1px 3px $uw-input-border-color;
box-sizing: border-box;
- color: #4e4e4e;
- font-family: Typ1451-Medium, verdana, sans-serif;
- font-size: 1rem;
- padding: .46667rem;
+ color: $uw-input-text-color;
+ font-family: $uw-input-font-family;
+ font-size: $uw-input-font-size;
+ padding: $uw-input-padding;
transition: border-color;
width: auto;
- &--submit {
- @include button();
-
+ &:focus {
+ border: 1px solid $uw-input-border-color-focus;
+ box-shadow: inset 0 1px 3px rgba(0,0,0,.06), 0 0 5px rgba(104,104,104,.7);
+ outline:$uw-input-border-color-focus;
}
- // This custom button class, included as an example, is not output by Drupal by default.
- &--medium {
- @include button();
- font-size: gesso-font-size(-1);
- max-width: 12rem;
- padding:rem(gesso-spacing(xs));
- }
-
- // This custom button class, included as an example, is not output by Drupal by default.
- &--small {
+ &--submit {
@include button();
- font-size: rem(gesso-font-size(-2));
- max-width: 9rem;
- padding:rem(gesso-spacing(xs));
- &:hover,
- &:focus {
- padding: rem(gesso-spacing(xs));
- }
}
-
}
\ No newline at end of file
--
GitLab