diff --git a/css/styles.css b/css/styles.css
index 8553e35453dc26a5f061cc943d2c661b7cb089b0..3038e35f8ce3075e5433bad81b3275fc432a5268 100644
--- a/css/styles.css
+++ b/css/styles.css
@@ -845,7 +845,7 @@ abbr:hover {
content: " (" attr(title) ")"; } }
cite {
- color: #787878;
+ color: #4e4e4e;
font-family: georgia, "droid serif", "Times New Roman", Times, serif;
font-size: 1rem;
font-style: normal;
@@ -930,7 +930,7 @@ table {
td {
background-color: #fff;
- border: 1px solid #787878;
+ border: 1px solid #757575;
padding: 1rem; }
tfoot td,
@@ -939,7 +939,7 @@ tfoot th {
th {
background-color: #fff;
- border: 1px solid #787878;
+ border: 1px solid #757575;
padding: 1rem;
text-align: left; }
@@ -1019,19 +1019,56 @@ svg:not(:root) {
padding: .46667rem;
transition: border-color;
width: auto; }
-
-.uw-input--grey {
- background-color: #ccc;
- border: 0;
- color: #fff;
- font-family: "BureauGrotCond Book",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
- padding: 1rem 2rem;
- text-decoration: none;
- text-transform: uppercase;
- width: 100%; }
- .uw-input--grey:hover {
- background-color: #fafafa;
- color: #000; }
+ .uw-input--submit {
+ 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%; }
+ .uw-input--submit:visited {
+ color: #fff; }
+ .uw-input--submit:hover, .uw-input--submit:focus {
+ background-color: #eee;
+ background-image: none;
+ color: #4e4e4e;
+ text-decoration: none; }
+ .uw-input--submit:active {
+ background-color: #757575;
+ background-image: none;
+ color: #fff; }
+ .uw-input--submit[disabled] {
+ background-color: #eee;
+ background-image: none;
+ color: #A2A2A2;
+ cursor: default;
+ pointer-events: none; }
+ .uw-input--medium {
+ font-size: 14.22224px;
+ max-width: 12rem;
+ padding: 0.5rem; }
+ .uw-input--small {
+ font-size: 0.79rem;
+ max-width: 9rem;
+ padding: 0.5rem; }
+ .uw-input--small:hover, .uw-input--small:focus {
+ padding: 0.5rem; }
.breadcrumb__title, .readmore-link__accessibility-description {
clip: rect(1px, 1px, 1px, 1px);
@@ -1714,94 +1751,76 @@ ul.toolbar-menu {
color: #fff; }
.button {
- background-color: #0071BC;
+ 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: 1rem;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
+ font-size: 18px;
font-weight: 600;
+ letter-spacing: 0.055rem;
line-height: 1.45;
- padding: 0.5rem 1rem;
+ 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%;
margin: 0 0 0.5rem; }
.button:visited {
color: #fff; }
.button:hover, .button:focus {
- background-color: #205493;
- color: #fff; }
+ background-color: #eee;
+ background-image: none;
+ color: #4e4e4e;
+ text-decoration: none; }
.button:active {
- background-color: #112E51;
+ background-color: #757575;
+ background-image: none;
color: #fff; }
.button[disabled] {
background-color: #eee;
+ background-image: none;
color: #A2A2A2;
cursor: default;
pointer-events: none; }
- .button + .button {
- margin-left: 0.5rem; }
- [dir='rtl'] .button + .button {
- margin-left: 0;
- margin-right: 0.5rem; }
+ @media (min-width: 48.06rem) {
+ .button + .button {
+ margin-left: 0.5rem; }
+ [dir='rtl'] .button + .button {
+ margin-left: 0;
+ margin-right: 0.5rem; } }
.button--danger {
background-color: #e31c3d;
- color: #fff; }
+ color: #fff;
+ padding: 1rem 2.5rem; }
.button--danger:hover, .button--danger:focus {
background-color: #cd2026;
- color: #fff; }
+ color: #fff;
+ padding: 1rem 2.5rem; }
.button--danger:active {
background-color: #981b1e;
color: #fff; }
-.button--secondary {
- background-color: #02bfe7;
- 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: 1rem;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
- font-weight: 600;
- line-height: 1.45;
- padding: 0.5rem 1rem;
- text-align: center;
- text-decoration: none;
- transition: background 200ms cubic-bezier(0.4, 0, 1, 1);
- vertical-align: top;
- white-space: normal; }
- .button--secondary:visited {
- color: #fff; }
- .button--secondary:hover, .button--secondary:focus {
- background-color: #00a6d2;
- color: #fff; }
- .button--secondary:active {
- background-color: #046b99;
- color: #fff; }
- .button--secondary[disabled] {
- background-color: #eee;
- color: #A2A2A2;
- cursor: default;
- pointer-events: none; }
-
-.button--large {
- font-size: 1.266rem;
- padding: 1rem 2.5rem; }
+.button--medium {
+ font-size: 14.22224px;
+ max-width: 12rem;
+ padding: 0.5rem; }
.button--small {
- font-size: 1rem;
- padding: 0.25rem 0.5rem; }
+ font-size: 0.79rem;
+ max-width: 9rem;
+ padding: 0.5rem; }
+ .button--small:hover, .button--small:focus {
+ padding: 0.5rem; }
.uw-cta .neutral .uw-cta__text--big {
color: #787878; }
@@ -1975,9 +1994,9 @@ ul.toolbar-menu {
.card__title a:visited {
color: #000; }
.card__title a:hover, .card__title a:focus {
- color: #787878; }
+ color: #757575; }
.card__title a:active {
- color: #787878; }
+ color: #757575; }
.card__body {
display: flex;
@@ -1988,7 +2007,7 @@ ul.toolbar-menu {
margin-bottom: 0; }
.card__date {
- color: #787878;
+ color: #757575;
margin-bottom: 1rem; }
.card__content {
@@ -2469,7 +2488,7 @@ details.details {
display: block; }
.fieldset__description {
- color: #787878;
+ color: #4e4e4e;
font-size: 1.125rem; }
.fieldset__description > :last-child {
margin-bottom: 0; }
@@ -2513,7 +2532,7 @@ details.details {
padding: 0; }
.form-item__description {
- color: #787878;
+ color: #4e4e4e;
font-size: 1.125rem; }
.form-item__description > :last-child {
margin-bottom: 0; }
@@ -2615,7 +2634,7 @@ details.details {
.form-item__week:hover,
.form-item__week:focus {
background-color: #fff;
- border: 1px solid #787878; }
+ border: 1px solid #757575; }
.form-item__color:disabled,
.form-item__date:disabled,
@@ -2701,7 +2720,7 @@ details.details {
outline: 2px solid transparent;
outline-offset: 2px;
background: #fff;
- border: 1px solid #787878;
+ border: 1px solid #757575;
content: '\a0';
display: inline-block;
height: 1.25rem;
@@ -2741,7 +2760,7 @@ details.details {
-moz-appearance: none;
appearance: none;
background-color: #fff;
- border: 1px solid #787878;
+ border: 1px solid #757575;
border-radius: 50%;
box-shadow: 0 0 0 2px transparent;
cursor: pointer;
@@ -2799,7 +2818,7 @@ details.details {
.form-item--range .form-item__range::-moz-range-thumb {
outline: 2px solid transparent;
outline-offset: 2px;
- background: #787878;
+ background: #757575;
border: 1px solid #fafafa;
border-radius: 0;
cursor: pointer;
@@ -2811,7 +2830,7 @@ details.details {
outline-color: #4773aa; }
.form-item--range .form-item__range::-moz-range-track {
background: #A2A2A2;
- border: 1px solid #787878;
+ border: 1px solid #757575;
cursor: pointer;
display: block;
height: 0.625rem;
@@ -2821,7 +2840,7 @@ details.details {
.form-item--range .form-item__range::-ms-thumb {
outline: 2px solid transparent;
outline-offset: 2px;
- background: #787878;
+ background: #757575;
border: 1px solid #fafafa;
border-radius: 0;
cursor: pointer;
@@ -2834,7 +2853,7 @@ details.details {
outline-color: #4773aa; }
.form-item--range .form-item__range::-ms-track {
background: #A2A2A2;
- border: 1px solid #787878;
+ border: 1px solid #757575;
cursor: pointer;
display: block;
height: 0.625rem;
@@ -2846,11 +2865,11 @@ details.details {
color: transparent; }
.form-item--range .form-item__range::-ms-fill-lower, .form-item--range .form-item__range::-ms-fill-upper {
background: #A2A2A2;
- border: 1px solid #787878; }
+ border: 1px solid #757575; }
.form-item--range .form-item__range::-webkit-slider-thumb {
outline: 2px solid transparent;
outline-offset: 2px;
- background: #787878;
+ background: #757575;
border: 1px solid #fafafa;
border-radius: 0;
cursor: pointer;
@@ -2864,7 +2883,7 @@ details.details {
outline-color: #4773aa; }
.form-item--range .form-item__range::-webkit-slider-runnable-track {
background: #A2A2A2;
- border: 1px solid #787878;
+ border: 1px solid #757575;
cursor: pointer;
display: block;
height: 0.625rem;
@@ -3154,9 +3173,6 @@ details.details {
font-weight: 400; }
.uw-mailman__servername {
text-align: center; }
- .uw-mailman .uw-input--grey {
- display: inline-block;
- max-width: 18.125rem; }
.menu {
list-style-type: none;
@@ -3772,7 +3788,7 @@ details.details {
.message::before {
display: none !important; } }
.message a {
- color: #787878;
+ color: #4e4e4e;
font-weight: 600;
text-decoration: underline; }
@@ -3870,7 +3886,7 @@ details.details {
.mobile-menu__link {
background-color: transparent;
border: 0;
- color: #787878;
+ color: #757575;
display: block;
font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
font-size: 1.266rem;
@@ -3931,7 +3947,7 @@ details.details {
margin: 0;
padding: 0; }
.mobile-menu__subnav .mobile-menu__link {
- color: #787878;
+ color: #757575;
padding-left: 24px; }
.mobile-menu__subnav .mobile-menu__link:hover, .mobile-menu__subnav .mobile-menu__link:focus, .mobile-menu__subnav .mobile-menu__link:active {
color: #000; }
@@ -4209,23 +4225,27 @@ picture {
.tabs__link {
background-color: #eee;
+ background-image: none;
border: 0;
border-radius: 0;
color: #000;
cursor: pointer;
display: inline-block;
font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif;
- font-size: 1rem;
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
+ font-size: 18px;
font-weight: 600;
+ letter-spacing: 0.055rem;
line-height: 1.45;
- padding: 0.5rem 1rem;
+ 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%;
border-left: 1px solid #A2A2A2;
display: block;
font-family: Typ1451-Regular,-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Oxygen-Sans", Ubuntu, Cantarell, "Fira Sans", Droid Sans, sans-serif;
@@ -4237,12 +4257,16 @@ picture {
color: #000; }
.tabs__link:hover, .tabs__link:focus {
background-color: #A2A2A2;
- color: #000; }
+ background-image: none;
+ color: #000;
+ text-decoration: none; }
.tabs__link:active {
background-color: #4e4e4e;
+ background-image: none;
color: #fff; }
.tabs__link[disabled] {
background-color: #eee;
+ background-image: none;
color: #A2A2A2;
cursor: default;
pointer-events: none; }
diff --git a/source/_data/design-tokens.artifact.yml b/source/_data/design-tokens.artifact.yml
index 0016b9cc235790ffa333ed530e520a87034e2290..d57363470e6c3c9865d48fe46dc20d20e9ede23d 100644
--- a/source/_data/design-tokens.artifact.yml
+++ b/source/_data/design-tokens.artifact.yml
@@ -92,7 +92,7 @@ gesso:
gray-2: "#eee"
gray-3: "#ccc"
gray-4: "#A2A2A2"
- gray-5: "#787878"
+ gray-5: "#757575"
gray-6: "#4e4e4e"
gray-7: "#333"
black: "#000"
@@ -134,7 +134,7 @@ gesso:
colors:
text:
primary: "#000"
- secondary: "#787878"
+ secondary: "#4e4e4e"
on-light: "#000"
on-dark: "#fff"
link: "#0071BC"
@@ -145,11 +145,11 @@ gesso:
site: "#fff"
button:
primary:
- background: "#0071BC"
- background-hover: "#205493"
- background-active: "#112E51"
+ background: "#757575"
+ background-hover: "#eee"
+ background-active: "#757575"
text: "#fff"
- text-hover: "#fff"
+ text-hover: "#4e4e4e"
text-active: "#fff"
secondary:
background: "#02bfe7"
@@ -174,9 +174,9 @@ gesso:
background-checked: "#0071BC"
background-unchecked: "#fff"
border: "#ccc"
- border-dark: "#787878"
+ border-dark: "#757575"
border-light: "#fafafa"
- thumb: "#787878"
+ thumb: "#757575"
track: "#A2A2A2"
mark:
background: "#ff0"
@@ -185,7 +185,7 @@ gesso:
background: "#0071BC"
text: "#fff"
table:
- border: "#787878"
+ border: "#757575"
background: "#fff"
background-head: "#eee"
background-foot: "#eee"
@@ -201,7 +201,7 @@ gesso:
border-light: "#eee"
text-lighter: "#fff"
text-light: "#A2A2A2"
- text-dark: "#787878"
+ text-dark: "#757575"
text-darker: "#000"
accent: "#0071BC"
accent-dark: "#112E51"
@@ -360,7 +360,7 @@ gesso:
font-weight: 400
line-height: 1.45
cite:
- color: "#787878"
+ color: "#4e4e4e"
font-family: georgia, "droid serif", "Times New Roman", Times, serif
font-size: 16px
font-style: normal
diff --git a/source/_patterns/00-config/01-mixins/_mixins.button.scss b/source/_patterns/00-config/01-mixins/_mixins.button.scss
index eac74aa34231dff8c9bb9b638b9e61f1b0879eac..f6894f934cd5467ff7345654d05ac81025f11aba 100644
--- a/source/_patterns/00-config/01-mixins/_mixins.button.scss
+++ b/source/_patterns/00-config/01-mixins/_mixins.button.scss
@@ -18,11 +18,13 @@ $button-background-color-hover: gesso-color(
primary,
background-hover
) !default;
+$button-background-image: none !default;
$button-text-color: gesso-color(button, primary, text) !default;
$button-text-color-active: gesso-color(button, primary, text-active) !default;
$button-text-color-disabled: gesso-color(button, disabled, text) !default;
$button-text-color-hover: gesso-color(button, primary, text-hover) !default;
-$button-font-size: gesso-base-font-size() !default;
+$button-text-shadow: none !default;
+$button-font-size: gesso-font-size(1) !default;
@mixin button(
$color-background: $button-background-color,
@@ -37,24 +39,27 @@ $button-font-size: gesso-base-font-size() !default;
$font-size: $button-font-size
) {
background-color: $color-background;
+ background-image:$button-background-image;
border: 0;
border-radius: $border-radius;
color: $color-text;
cursor: pointer;
display: inline-block;
font-family: gesso-font-family(condensedbook);
- font-size: rem($font-size);
- -moz-osx-font-smoothing: grayscale;
- -webkit-font-smoothing: antialiased;
+ font-size: gesso-font-size(1);
font-weight: gesso-font-weight(bold);
+ letter-spacing: 0.055rem;
line-height: gesso-line-height(base);
- padding: rem(gesso-spacing(xs)) rem(gesso-spacing(sm));
+ max-width:18.125rem;
+ padding: rem(gesso-spacing(sm)) rem(gesso-spacing(md));
text-align: center;
text-decoration: none;
+ text-shadow:$button-text-shadow;
+ text-transform:uppercase;
transition: background gesso-duration(short) gesso-easing(ease-in);
vertical-align: top;
white-space: normal;
-
+ width:100%;
&:visited {
color: $color-text;
}
@@ -62,16 +67,20 @@ $button-font-size: gesso-base-font-size() !default;
&:hover,
&:focus {
background-color: $color-background-hover;
+ background-image:$button-background-image;
color: $color-text-hover;
+ text-decoration: none;
}
&:active {
background-color: $color-background-active;
+ background-image:$button-background-image;
color: $color-text-active;
}
&[disabled] {
background-color: $color-background-disabled;
+ background-image:$button-background-image;
color: $color-text-disabled;
cursor: default;
pointer-events: none;
diff --git a/source/_patterns/00-config/_design-tokens.artifact.scss b/source/_patterns/00-config/_design-tokens.artifact.scss
index 464a8cce124696a0cff5aefd976201217d383b23..4d0531f35ccb533dd0303303954b87402ebfd30c 100644
--- a/source/_patterns/00-config/_design-tokens.artifact.scss
+++ b/source/_patterns/00-config/_design-tokens.artifact.scss
@@ -110,7 +110,7 @@ $gesso: (
gray-2: #eee,
gray-3: #ccc,
gray-4: #A2A2A2,
- gray-5: #787878,
+ gray-5: #757575,
gray-6: #4e4e4e,
gray-7: #333,
black: #000,
@@ -162,7 +162,7 @@ $gesso: (
colors: (
text: (
primary: #000,
- secondary: #787878,
+ secondary: #4e4e4e,
on-light: #000,
on-dark: #fff,
link: #0071BC,
@@ -175,11 +175,11 @@ $gesso: (
),
button: (
primary: (
- background: #0071BC,
- background-hover: #205493,
- background-active: #112E51,
+ background: #757575,
+ background-hover: #eee,
+ background-active: #757575,
text: #fff,
- text-hover: #fff,
+ text-hover: #4e4e4e,
text-active: #fff,
),
secondary: (
@@ -209,9 +209,9 @@ $gesso: (
background-checked: #0071BC,
background-unchecked: #fff,
border: #ccc,
- border-dark: #787878,
+ border-dark: #757575,
border-light: #fafafa,
- thumb: #787878,
+ thumb: #757575,
track: #A2A2A2,
),
mark: (
@@ -223,7 +223,7 @@ $gesso: (
text: #fff,
),
table: (
- border: #787878,
+ border: #757575,
background: #fff,
background-head: #eee,
background-foot: #eee,
@@ -240,7 +240,7 @@ $gesso: (
border-light: #eee,
text-lighter: #fff,
text-light: #A2A2A2,
- text-dark: #787878,
+ text-dark: #757575,
text-darker: #000,
accent: #0071BC,
accent-dark: #112E51,
@@ -415,7 +415,7 @@ $gesso: (
line-height: 1.45,
),
cite: (
- color: #787878,
+ color: #4e4e4e,
font-family: 'georgia, "droid serif", "Times New Roman", Times, serif',
font-size: 16px,
font-style: normal,
diff --git a/source/_patterns/00-config/config.design-tokens.yml b/source/_patterns/00-config/config.design-tokens.yml
index 2ec9f0703e14a4524560f087180a8a8303e9fc24..7046cb509f1345fbe406cabfeea2a38fead61e88 100644
--- a/source/_patterns/00-config/config.design-tokens.yml
+++ b/source/_patterns/00-config/config.design-tokens.yml
@@ -92,7 +92,7 @@ gesso:
gray-2: '#eee'
gray-3: '#ccc'
gray-4: '#A2A2A2'
- gray-5: '#787878'
+ gray-5: '#757575'
gray-6: '#4e4e4e'
gray-7: '#333'
black: '#000'
@@ -134,7 +134,7 @@ gesso:
colors:
text:
primary: grayscale.black
- secondary: grayscale.gray-5
+ secondary: grayscale.gray-6
on-light: grayscale.black
on-dark: grayscale.white
link: brand.blue.base
@@ -145,11 +145,11 @@ gesso:
site: grayscale.white
button:
primary:
- background: brand.blue.base
- background-hover: brand.blue.dark
- background-active: brand.blue.dark-1
+ background: grayscale.gray-5
+ background-hover: grayscale.gray-2
+ background-active: grayscale.gray-5
text: grayscale.white
- text-hover: grayscale.white
+ text-hover: grayscale.gray-6
text-active: grayscale.white
secondary:
background: brand.ocean-blue.base
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 ea9894e01251d2f0335c43fdc6cef1712c064a9e..41bd5d1d18249d137b5205e60af2bafa67baabfe 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
@@ -11,4 +11,26 @@
padding: .46667rem;
transition: border-color;
width: auto;
+ &--submit {
+ @include button();
+
+ }
+ // This custom button class, included as an example, is not output by Drupal by default.
+ &--medium {
+ 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 {
+ 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
diff --git a/source/_patterns/02-base/02-html-elements/27-input/input--grey/_input--grey.scss b/source/_patterns/02-base/02-html-elements/27-input/input--grey/_input--grey.scss
deleted file mode 100644
index 4449d2658fbcfde3323b29c12d5ab526a292ffc4..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/02-html-elements/27-input/input--grey/_input--grey.scss
+++ /dev/null
@@ -1,17 +0,0 @@
-.uw-input {
- &--grey {
- background-color: gesso_grayscale('gray-3');
- border: 0;
- color: $uw-white;
- font-family: "BureauGrotCond Book",impact,"avenir next condensed heavy","Droid Sans",sans-serif;
- padding: 1rem 2rem;
- text-decoration: none;
- text-transform: uppercase;
- width: 100%;
-
- &:hover {
- background-color: gesso_grayscale('gray-1');
- color: $uw-black;
- }
- }
-}
\ No newline at end of file
diff --git a/source/_patterns/02-base/02-html-elements/27-input/input--grey/input--grey.yml b/source/_patterns/02-base/02-html-elements/27-input/input--grey/input--grey.yml
deleted file mode 100644
index 9c84242bd47f2e12e9b4e871aaadd30d11059040..0000000000000000000000000000000000000000
--- a/source/_patterns/02-base/02-html-elements/27-input/input--grey/input--grey.yml
+++ /dev/null
@@ -1,2 +0,0 @@
-type: 'submit'
-value: 'Subscribe'
\ No newline at end of file
diff --git a/source/_patterns/02-base/02-html-elements/27-input/input--submit.md b/source/_patterns/02-base/02-html-elements/27-input/input--submit.md
new file mode 100644
index 0000000000000000000000000000000000000000..d088d02a4deb85d6f3e3bd6e6b242d3d37c01af4
--- /dev/null
+++ b/source/_patterns/02-base/02-html-elements/27-input/input--submit.md
@@ -0,0 +1,3 @@
+---
+Input type Submit
+---
diff --git a/source/_patterns/02-base/02-html-elements/27-input/input--grey/input--grey.twig b/source/_patterns/02-base/02-html-elements/27-input/input--submit.twig
similarity index 60%
rename from source/_patterns/02-base/02-html-elements/27-input/input--grey/input--grey.twig
rename to source/_patterns/02-base/02-html-elements/27-input/input--submit.twig
index fb616bedaf3e428ad67c11b16740cc09cc157930..ba3e9146e6c812b1fc531cb214320481daf99d7f 100644
--- a/source/_patterns/02-base/02-html-elements/27-input/input--grey/input--grey.twig
+++ b/source/_patterns/02-base/02-html-elements/27-input/input--submit.twig
@@ -1,5 +1,4 @@
-{% include '@base/02-html-elements/27-input/input.twig' with {
- 'type': type,
- 'value': value,
- 'classes': 'uw-input--grey'
+{% include '@base/02-html-elements/27-input/input.twig' with {
+ 'type': type,
+ 'value': value
} %}
\ No newline at end of file
diff --git a/source/_patterns/02-base/02-html-elements/27-input/input--submit.yml b/source/_patterns/02-base/02-html-elements/27-input/input--submit.yml
new file mode 100644
index 0000000000000000000000000000000000000000..152037b53411e6bb8ae2a192cc7b94d92b5e4085
--- /dev/null
+++ b/source/_patterns/02-base/02-html-elements/27-input/input--submit.yml
@@ -0,0 +1,3 @@
+type: 'submit'
+value: 'submit'
+classes': 'uw-input--submit'
\ No newline at end of file
diff --git a/source/_patterns/02-base/02-html-elements/27-input/input.md b/source/_patterns/02-base/02-html-elements/27-input/input.md
new file mode 100644
index 0000000000000000000000000000000000000000..b756cb2e0596475e1afa078f3be87c04c63e38ae
--- /dev/null
+++ b/source/_patterns/02-base/02-html-elements/27-input/input.md
@@ -0,0 +1,3 @@
+---
+UW Input
+---
\ No newline at end of file
diff --git a/source/_patterns/02-base/02-html-elements/27-input/input.yml b/source/_patterns/02-base/02-html-elements/27-input/input.yml
index 559e9e9a6528fc24d0e72337c03b18688a5a8717..8361e08c7170f4ffd34fdd972e1113ee64ad07be 100644
--- a/source/_patterns/02-base/02-html-elements/27-input/input.yml
+++ b/source/_patterns/02-base/02-html-elements/27-input/input.yml
@@ -1,2 +1,3 @@
type: 'email'
-value: ''
\ No newline at end of file
+value: ''
+classes: modifier_classes
\ No newline at end of file
diff --git a/source/_patterns/04-components/button/_button.scss b/source/_patterns/04-components/button/_button.scss
index 7dd4137123c6a38a64dc0b520f43d2914c2b942f..66b2558c467a576ee4abda652a902c96abd74cd0 100644
--- a/source/_patterns/04-components/button/_button.scss
+++ b/source/_patterns/04-components/button/_button.scss
@@ -5,27 +5,31 @@
@include button();
margin: 0 0 rem(gesso-spacing(xs));
- & + & {
- margin-left: rem(gesso-spacing(xs)); // LTR
+ @include medium {
+ & + & {
+ margin-left: rem(gesso-spacing(xs)); // LTR
- @if $support-for-rtl {
- [dir='rtl'] & {
- margin-left: 0;
- margin-right: rem(gesso-spacing(xs));
+ @if $support-for-rtl {
+ [dir='rtl'] & {
+ margin-left: 0;
+ margin-right: rem(gesso-spacing(xs));
+ }
}
}
}
+
}
// Drupal outputs this class on buttons that can delete content.
.button--danger {
background-color: gesso-color(button, danger, background);
color: gesso-color(button,danger,text);
-
+ padding: rem(gesso-spacing(sm)) rem(gesso-spacing(lg));
&:hover,
&:focus {
background-color: gesso-color(button, danger, background-hover);
color: gesso-color(button,danger,text-hover);
+ padding: rem(gesso-spacing(sm)) rem(gesso-spacing(lg));
}
&:active {
@@ -35,25 +39,340 @@
}
// This custom button class, included as an example, is not output by Drupal by default.
-.button--secondary {
- @include button(
- gesso-color(button, secondary, background),
- gesso-color(button, secondary, text),
- gesso-color(button, secondary, background-hover),
- gesso-color(button, secondary, text-hover),
- gesso-color(button, secondary, background-active),
- gesso-color(button, secondary, text-active)
- );
-}
-
-// This custom button class, included as an example, is not output by Drupal by default.
-.button--large {
- font-size: rem(gesso-font-size(2));
- padding: rem(gesso-spacing(sm)) rem(gesso-spacing(lg));
+.button--medium {
+ 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.
.button--small {
- font-size: rem(gesso-font-size(0));
- padding: rem(gesso-spacing(xxs)) rem(gesso-spacing(xs));
+ font-size: rem(gesso-font-size(-2));
+ max-width: 9rem;
+ padding:rem(gesso-spacing(xs));
+ &:hover,
+ &:focus {
+ padding: rem(gesso-spacing(xs));
+ }
}
+
+//
+//%button, .expandable h2:first-child div[role="button"] {
+// @include appearance(none);
+//
+// -webkit-font-smoothing: antialiased;
+// background-color: $gray;
+// border-radius: none;
+// border: none;
+// cursor: pointer;
+// font-family: $font-bg-cond-book;
+// letter-spacing: 0.055rem;
+// text-transform: uppercase;
+// padding: 1rem 2rem;
+// display: inline-block;
+// text-decoration: none;
+// user-select: none;
+// vertical-align: middle;
+// white-space: nowrap;
+// width: 100%;
+// max-width: 18.125rem;
+// margin: 0 auto;
+// color: $white;
+// font-size: modular-scale(1);
+//
+// // padding: 0.7rem 1.5rem;
+// @include media($small-screen) {
+// // font-size: modular-scale(2);
+// // padding: 0.8rem 1.85rem;
+// }
+//
+//
+// @include media($medium-screen) {
+// // font-size: modular-scale(3);
+// // padding: 1rem 2rem;
+// }
+//
+//
+// &:hover,
+// &:focus {
+// @include uw-transition($delay: 0s, $duration: 200ms, $timing: "linear", $property: (color, background-color, border-color, opacity));
+//
+// background-color: $lighter-gray;
+// color: $dark-gray;
+// outline: none;
+// }
+//
+// &:focus {
+// outline: inherit;
+// }
+//
+// &:active {
+// background-color: $lighter-gray;
+// color: $dark-gray;
+// }
+//
+// .views-submit-button & {
+// &:disabled {
+// cursor: not-allowed;
+// opacity: 1;
+// display: inline-block;
+// }
+// }
+//
+// &:disabled {
+// cursor: not-allowed;
+// display: block;
+// opacity: 0.5;
+// }
+//}
+//
+//.small-button {
+// padding: 0.3rem;
+// font-size: modular-scale(-2);
+// max-width: 50%;
+//}
+//
+//.medium-button {
+// padding: 0.5rem;
+// font-size: modular-scale(-1);
+// max-width: 70%;
+//}
+
+//#{$all-button-inputs},
+//button,
+//a.button, .expandable h2:first-child div[role="button"],
+//.button,
+//.read-more-link a {
+// @extend %button;
+//
+// #block-uw-ct-person-profile-person .views-row & {
+// @extend .medium-button;
+//
+// text-align: center;
+// }
+//
+// .owl-pagination & {
+// padding: inherit;
+// display: inline-block;
+// text-decoration: none;
+// user-select: none;
+// vertical-align: middle;
+// white-space: nowrap;
+// width: auto;
+// max-width: inherit;
+// margin: 0 auto;
+// color: $base-button-color;
+// font-size: modular-scale(1);
+//
+// &:hover {
+// background-color: transparent;
+// }
+// }
+//
+// .owl-buttons & {
+// padding: inherit;
+// display: inline-block;
+// text-decoration: none;
+// user-select: none;
+// vertical-align: middle;
+// white-space: nowrap;
+// width: auto;
+// max-width: inherit;
+// margin: 0 auto;
+// color: $base-button-color;
+// font-size: modular-scale(1);
+// }
+//
+// .uw-site-footer1--contact & {
+// background: transparent;
+// border-top: 1px solid lighten($gray, 10%);
+// border-bottom: 1px solid lighten($gray, 10%);
+// color: $white;
+// position: relative;
+//
+// &:after {
+// position: absolute;
+// top: 40%;
+// left: 75%;
+// z-index: 2;
+// display: block;
+// content: $fdsu-arrow;
+// font-family: $fdsu-icon-font;
+// color: $white;
+// font-size: modular-scale(-2);
+// text-rendering: auto;
+// -webkit-font-smoothing: antialiased;
+// -moz-osx-font-smoothing: grayscale;
+// transform-origin: 50% 50%;
+// -webkit-transform: scale(1, 1) rotate(90deg);
+// -ms-transform: scale(1, 1) rotate(90deg);
+// transform: scale(1, 1) rotate(90deg);
+// text-align: center;
+//
+// @include uw-transition($delay: 0s, $duration: 200ms, $timing: "linear", $property: (color, background-color, border-color, opacity, transform));
+// }
+//
+// &:active {
+// &:after {
+// color: #666;
+//
+// @include uw-transition($delay: 0s, $duration: 200ms, $timing: "linear", $property: (color, background-color, border-color, opacity, transform));
+// }
+// }
+//
+// &:hover {
+// &:after {
+// color: #666;
+//
+// @include uw-transition($delay: 0s, $duration: 200ms, $timing: "linear", $property: (color, background-color, border-color, opacity, transform));
+// }
+// }
+//
+// .site-footer-toggle & {
+// &:after {
+// -webkit-font-smoothing: antialiased;
+// -webkit-transform: scale(1, -1) rotate(90deg);
+// -ms-transform: scale(1, -1) rotate(90deg);
+// transform: scale(1, -1) rotate(90deg);
+//
+// @include uw-transition($delay: 0s, $duration: 200ms, $timing: "linear", $property: (color, background-color, border-color, opacity, transform));
+// }
+// }
+//
+// &:hover {
+// color: #666;
+// outline: none;
+// background-color: $neutral;
+// border-top: 1px solid darken($gray, 5%);
+// border-bottom: 1px solid darken($gray, 5%);
+//
+// @include uw-transition($delay: 0s, $duration: 200ms, $timing: "linear", $property: (color, background-color, border-color, opacity));
+// }
+//
+// &:focus {
+// outline: none;
+// }
+// }
+//
+// &.ct-filters {
+// &--filter {
+// max-width: 100%;
+// height: 3.563rem;
+// padding: 1rem 0rem;
+//
+// @include media($medium-screen) {
+// padding: 1rem 2rem;
+// }
+//
+//
+// // color:$uw-black;
+// &:hover {
+// color: $dark-gray;
+// background-color: $lighter-gray;
+// }
+// }
+//
+// &--close {
+// color: $white;
+// text-decoration: none;
+// position: absolute;
+// flex: none;
+// background-color: transparent;
+// right: 0;
+// top: 0;
+// width: auto;
+// max-width: inherit;
+// padding: 0.5rem 0;
+//
+// @include media($small-screen) {}
+//
+//
+// @include media($large-screen) {}
+//
+//
+// &:before {
+// font-family: $fdsu-icon-font;
+// content: $fdsu-close;
+// font-size: modular-scale(4);
+// padding: 0.5rem;
+// }
+//
+// &:hover {
+// &:before {
+// text-decoration: none;
+// color: $black;
+// background-color: $yellow-dark;
+// padding: 0.5rem;
+// }
+// }
+// }
+// }
+//
+// .uw-site-sidebar--wrapper & {
+// max-width: 100%;
+// }
+//
+// .expandable & {
+// white-space: normal;
+// padding: 0.75rem 3rem 0.75rem 0.75rem;
+// height: auto;
+// min-height: 3.563rem;
+// user-select: text;
+// }
+//
+// .views-summary-unformatted & {
+// font-size: modular-scale(0);
+// font-weight: $weight-bold;
+// font-family: $condensed-font-family;
+// padding: 0.25rem 0.5rem;
+// margin: 0;
+// background: $tab-bg-color;
+// text-decoration: none;
+// margin-bottom: 0.5rem;
+// display: inline-block;
+//
+// &:hover {
+// // color:$white;
+// background: $tab-bg-active;
+// }
+// }
+//
+// .owl-pagination & {
+// padding: inherit;
+// display: inline-block;
+// text-decoration: none;
+// user-select: none;
+// vertical-align: middle;
+// white-space: nowrap;
+// width: auto;
+// max-width: inherit;
+// margin: 0 auto;
+// color: $white;
+// font-size: modular-scale(1);
+// background: transparent;
+//
+// &:hover {
+// background-color: transparent;
+// }
+// }
+//
+// .owl-buttons & {
+// padding: 0.75rem;
+// display: inline-block;
+// text-decoration: none;
+// user-select: none;
+// vertical-align: middle;
+// white-space: nowrap;
+// width: auto;
+// max-width: inherit;
+// margin: 0 auto;
+// color: $white;
+// font-size: modular-scale(1);
+// margin: 0 0.5rem;
+//
+// &:hover,
+// &:focus {
+// color: $dark-gray;
+// }
+// }
+//}
diff --git a/source/_patterns/04-components/button/button--danger/button--danger.yml b/source/_patterns/04-components/button/button--danger/button--danger.yml
index 173aa52882a4e7834853acc1ea42b0eb794c93ec..51477bd36f6829c80f9484c21f20917f1da4e9fc 100644
--- a/source/_patterns/04-components/button/button--danger/button--danger.yml
+++ b/source/_patterns/04-components/button/button--danger/button--danger.yml
@@ -2,5 +2,5 @@
is_button_tag: true
is_demo: true
url: '#'
-text: 'Danger Button'
-text_demo: 'Danger Link Button'
+text: 'Delete'
+text_demo: 'Delete (Link)'
diff --git a/source/_patterns/04-components/button/button--large/button--large.yml b/source/_patterns/04-components/button/button--large/button--large.yml
index 957e4a2ae81cdd86a4fe5f94fb54e8543e7f18a4..ef414b9452b097109d5ce6b00dfb1ed543392df4 100644
--- a/source/_patterns/04-components/button/button--large/button--large.yml
+++ b/source/_patterns/04-components/button/button--large/button--large.yml
@@ -2,5 +2,6 @@
is_button_tag: true
is_demo: true
url: '#'
-text: 'Large Button'
-text_demo: 'Large Link Button'
+text: 'Submit'
+text_demo: 'Link'
+
diff --git a/source/_patterns/04-components/button/button--secondary/button--secondary.md b/source/_patterns/04-components/button/button--medium/button--medium.md
similarity index 88%
rename from source/_patterns/04-components/button/button--secondary/button--secondary.md
rename to source/_patterns/04-components/button/button--medium/button--medium.md
index a423e1d6f6dd82e492e73c93e775ff7009c2c871..6123ac5a27e826c2bd68488096a677ab158b4062 100644
--- a/source/_patterns/04-components/button/button--secondary/button--secondary.md
+++ b/source/_patterns/04-components/button/button--medium/button--medium.md
@@ -1,6 +1,6 @@
---
-el: .button--secondary
-title: Secondary Button
+el: .button--medium
+title: Medium Button
---
__Variables:__
diff --git a/source/_patterns/04-components/button/button--secondary/button--secondary.twig b/source/_patterns/04-components/button/button--medium/button--medium.twig
similarity index 80%
rename from source/_patterns/04-components/button/button--secondary/button--secondary.twig
rename to source/_patterns/04-components/button/button--medium/button--medium.twig
index 0accd1a2b7bc37e52e36f5633f39c55f362b2bec..8a3419dab0e072baa45462adccc49cb817f70bb7 100644
--- a/source/_patterns/04-components/button/button--secondary/button--secondary.twig
+++ b/source/_patterns/04-components/button/button--medium/button--medium.twig
@@ -1,5 +1,5 @@
{% set button_modifier_classes -%}
- button--secondary {{ modifier_classes }}
+ button--medium {{ modifier_classes }}
{%- endset %}
{% include '@components/button/button.twig' with {
diff --git a/source/_patterns/04-components/button/button--medium/button--medium.yml b/source/_patterns/04-components/button/button--medium/button--medium.yml
new file mode 100644
index 0000000000000000000000000000000000000000..7e1cb4ffa7f98b1d91a8823e62099c9ec2204bea
--- /dev/null
+++ b/source/_patterns/04-components/button/button--medium/button--medium.yml
@@ -0,0 +1,6 @@
+---
+is_button_tag: true
+is_demo: true
+url: '#'
+text: 'Button'
+text_demo: 'Link Button'
diff --git a/source/_patterns/04-components/button/button--secondary/button--secondary.yml b/source/_patterns/04-components/button/button--secondary/button--secondary.yml
deleted file mode 100644
index f9839078b47ef7c8d01b8b71480d1c606f3adc82..0000000000000000000000000000000000000000
--- a/source/_patterns/04-components/button/button--secondary/button--secondary.yml
+++ /dev/null
@@ -1,6 +0,0 @@
----
-is_button_tag: true
-is_demo: true
-url: '#'
-text: 'Secondary Button'
-text_demo: 'Secondary Link Button'
diff --git a/source/_patterns/04-components/button/button--small/button--small.twig b/source/_patterns/04-components/button/button--small/button--small.twig
index 0cd4804ca601f0e38725b5848d0b5e3026ad38f4..bb01b13dfcb1363e4591edfb4dd0e29297d2f8ae 100644
--- a/source/_patterns/04-components/button/button--small/button--small.twig
+++ b/source/_patterns/04-components/button/button--small/button--small.twig
@@ -1,5 +1,5 @@
{% set button_modifier_classes -%}
- button--small {{ modifier_classes }}
+ button--small {{ modifier_classes }}
{%- endset %}
{% include '@components/button/button.twig' with {
diff --git a/source/_patterns/04-components/button/button--small/button--small.yml b/source/_patterns/04-components/button/button--small/button--small.yml
index 7f7393036ff54d2cb5eb6bbdc32bd0d1938e2e7e..7e1cb4ffa7f98b1d91a8823e62099c9ec2204bea 100644
--- a/source/_patterns/04-components/button/button--small/button--small.yml
+++ b/source/_patterns/04-components/button/button--small/button--small.yml
@@ -2,5 +2,5 @@
is_button_tag: true
is_demo: true
url: '#'
-text: 'Small Button'
-text_demo: 'Small Link Button'
+text: 'Button'
+text_demo: 'Link Button'
diff --git a/source/_patterns/04-components/button/button.twig b/source/_patterns/04-components/button/button.twig
index 963e7f339c85579a66a65de36d57b74167bd3e8f..195125e23646c4a316bb8a825baeb6947e03c674 100644
--- a/source/_patterns/04-components/button/button.twig
+++ b/source/_patterns/04-components/button/button.twig
@@ -5,6 +5,9 @@
{% endif %}
{% if is_demo %}
+ <br>
+
<a href="{{ url }}" class="button {{ modifier_classes }}">{{ text_demo }}</a>
+ <br>
<button class="button {{ modifier_classes }}" disabled>Disabled {{ text }}</button>
{% endif %}
diff --git a/source/_patterns/04-components/mailman-subscription/_mailman-subscription.scss b/source/_patterns/04-components/mailman-subscription/_mailman-subscription.scss
index 7372c16058c3da9df7a902296404da996b7a01e5..5ef31da07125954612ad774e7d5110de4313b498 100644
--- a/source/_patterns/04-components/mailman-subscription/_mailman-subscription.scss
+++ b/source/_patterns/04-components/mailman-subscription/_mailman-subscription.scss
@@ -16,9 +16,4 @@
&__servername {
text-align: center;
}
-
- .uw-input--grey {
- display: inline-block;
- max-width: 18.125rem;
- }
}
diff --git a/source/_patterns/04-components/mailman-subscription/mailman-subscription.twig b/source/_patterns/04-components/mailman-subscription/mailman-subscription.twig
index c0b87d39ec17fb3d665d75e7944c4fef0b76b2ae..e6db1d69565ff7512380e4eb19255aae75ab6039 100644
--- a/source/_patterns/04-components/mailman-subscription/mailman-subscription.twig
+++ b/source/_patterns/04-components/mailman-subscription/mailman-subscription.twig
@@ -9,9 +9,10 @@
'name': 'uw-mailmain-email',
'id': 'uw-mailmain__input-' ~ mailman.uniqueid
} %}
- {% include '@base/02-html-elements/27-input/input--grey/input--grey.twig' with {
+ {% include '@base/02-html-elements/27-input/input--submit.twig' with {
'type': 'submit',
- 'value': 'Subscribe'
+ 'value': 'Subscribe',
+ 'classes': 'uw-input--submit uw-input--medium'
} %}
</div>
</form>