diff --git a/css/styles.css b/css/styles.css index 70c74ef7dce68502fb2866e210e0f5e62ae76333..f8232ad0f1806316e1c2e13f82a81d6511f3d07d 100644 --- a/css/styles.css +++ b/css/styles.css @@ -1185,6 +1185,7 @@ svg:not(:root) { font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif; font-size: 18px; font-weight: 600; + height: auto; letter-spacing: 0.055rem; line-height: 1.45; max-width: 18.125rem; @@ -1973,6 +1974,7 @@ ul.toolbar-menu { font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif; font-size: 18px; font-weight: 600; + height: auto; letter-spacing: 0.055rem; line-height: 1.45; max-width: 18.125rem; @@ -2026,6 +2028,52 @@ ul.toolbar-menu { padding: 0.25rem 0.25rem; } .ui-dialog-buttonset.form-actions .button { max-width: 10rem; } + .user-login-form .form-actions .button { + background-color: #757575; + background-image: none; + border: 0; + border-radius: 0; + box-shadow: none; + 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; + height: auto; + 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%; } + .user-login-form .form-actions .button:visited { + color: #fff; } + .user-login-form .form-actions .button:hover, .user-login-form .form-actions .button:focus { + background-color: #eee; + background-image: none; + border: 0; + box-shadow: none !important; + color: #4e4e4e; + outline: none !important; + text-decoration: none; } + .user-login-form .form-actions .button:active { + background-color: #757575; + background-image: none; + color: #fff; + outline: none !important; } + .user-login-form .form-actions .button[disabled] { + background-color: #eee; + background-image: none; + color: #A2A2A2; + cursor: default; + pointer-events: none; } .button--danger { background-color: #e31c3d; @@ -4486,6 +4534,7 @@ picture { font-family: "BureauGrotCond Book", impact, "avenir next condensed heavy", "Droid Sans", sans-serif; font-size: 18px; font-weight: 600; + height: auto; letter-spacing: 0.055rem; line-height: 1.45; max-width: 18.125rem; diff --git a/source/_patterns/00-config/01-mixins/_mixins.button.scss b/source/_patterns/00-config/01-mixins/_mixins.button.scss index b7ba1917eb121e8c981cb996ad44acf1a7fe3333..eb438378a2f3994cf15564b75bfea54b271a833f 100644 --- a/source/_patterns/00-config/01-mixins/_mixins.button.scss +++ b/source/_patterns/00-config/01-mixins/_mixins.button.scss @@ -92,3 +92,71 @@ $button-font-size: gesso-font-size(1) !default; pointer-events: none; } } + +@mixin button( + $color-background: $button-background-color, + $color-text: $button-text-color, + $color-background-hover: $button-background-color-hover, + $color-text-hover: $button-text-color-hover, + $color-background-active: $button-background-color-active, + $color-text-active: $button-text-color-active, + $color-background-disabled: $button-background-color-disabled, + $color-text-disabled: $button-text-color-disabled, + $border-radius: $button-border-radius, + $font-size: $button-font-size +) { + background-color: $color-background; + background-image:$button-background-image; + border: 0; + border-radius: $border-radius; + box-shadow:none; + color: $color-text; + cursor: pointer; + display: inline-block; + font-family: gesso-font-family(condensedbook); + font-size: gesso-font-size(1); + font-weight: gesso-font-weight(bold); + height:auto; + letter-spacing: 0.055rem; + line-height: gesso-line-height(base); + 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; + } + + &:hover, + &: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] { + background-color: $color-background-disabled; + background-image:$button-background-image; + color: $color-text-disabled; + cursor: default; + pointer-events: none; + } +} \ 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 2554cd01690d38f752ba89b3ca0e69dafa111af6..e51798d8cd88437f18505f48b979fadd7d1b44f1 100644 --- a/source/_patterns/04-components/button/_button.scss +++ b/source/_patterns/04-components/button/_button.scss @@ -34,6 +34,10 @@ .ui-dialog-buttonset.form-actions &{ max-width: 10rem; } + .user-login-form .form-actions &{ + @include button(); + } + } // Drupal outputs this class on buttons that can delete content.