From 371d50d771a698dbe2f2275593293aacab685717 Mon Sep 17 00:00:00 2001 From: Norbert Guasch Date: Thu, 12 Sep 2019 16:16:38 +0200 Subject: [PATCH 1/2] fix indentation --- styles/elements/_buttons.scss | 1221 ++++++++++++++++----------------- 1 file changed, 610 insertions(+), 611 deletions(-) diff --git a/styles/elements/_buttons.scss b/styles/elements/_buttons.scss index a1341f56..368755b8 100644 --- a/styles/elements/_buttons.scss +++ b/styles/elements/_buttons.scss @@ -7,681 +7,680 @@ Styleguide #{$sgi-buttons} */ /*------------------------------------*\ - $BUTTONS +$BUTTONS \*------------------------------------*/ button::-moz-focus-inner { - border: 0; - padding: 0; + border: 0; + padding: 0; +} + +@mixin btn { + /*@include transition;*/ + @include semi-bold; + display: inline-block; + width: auto; + border-radius: 2px; + cursor: pointer; + font-weight: normal; + overflow: visible; + text-decoration: none; + text-align: center; + white-space: nowrap; + text-shadow: none; + text-transform: uppercase; + -webkit-appearance: none; + outline: none; + @include transition-button; + + img { + width: 16px; + height: 16px; + margin-top: -4px; + margin-right: 12px; + vertical-align: middle; } - @mixin btn { - /*@include transition;*/ - @include semi-bold; - display: inline-block; - width: auto; - border-radius: 2px; - cursor: pointer; - font-weight: normal; - overflow: visible; - text-decoration: none; - text-align: center; - white-space: nowrap; - text-shadow: none; - text-transform: uppercase; - -webkit-appearance: none; - outline: none; - @include transition-button; - - img { - width: 16px; - height: 16px; - margin-top: -4px; - margin-right: 12px; - vertical-align: middle; - } - - @at-root #{&}[class*="iconfont-"]::before { //TODO: fix top position and margin-right to text - font-size: $medium-font-size; - } - - p > & { - margin-left: $gap; - - @media only screen and (max-width: $mobile-start) { - display: block; - margin: $gap 0 0; - } - } - - + [class*="btn"]:not(.btn-group-justified):not(.btn-full-width--small-device) { - margin-left: $gap / 2; - } - - + .btn-group-justified { - margin-top: $gap; - - &:first-of-type { - margin-bottom: 0; - } - } - + @at-root #{&}[class*="iconfont-"]::before { //TODO: fix top position and margin-right to text + font-size: $medium-font-size; } - /* - Buttons type - - Use class `.btn` to create a button using `` (outside forms) or ` - - - Highlight - Link - - - - Styleguide #{$sgi-buttons-type} - */ - - .btn-primary { - @include btn; - color: $shiro; - border: 1px solid $day-blue; - background-color: $day-blue; - box-shadow: 0px 2px 4px rgba(0,0,0,0.15); - - &:hover, - &:focus, - &:active { - color: $shiro; - background-color: shade($day-blue,20%); - border-color: shade($day-blue,20%); - } - - &-alternative { - @include btn; - border: 1px solid shade($day-blue,40%); - color: $shiro; - background-color: shade($day-blue,40%); - box-shadow: 0px 2px 4px rgba(0,0,0,0.15); - - &:hover, - &:focus, - &:active { - background-color: shade($day-blue,60%); - border-color: shade($day-blue,60%); - } - } - } - - .btn-default { - @include btn; - color: $day-blue; - border: 1px solid $day-blue; - background-color: $button-secondary; - - &:hover, - &:focus, - &:active { - color: $shiro; - background-color: shade($day-blue,20%); - } - - &-contrast { - @include btn; - color: $shiro; - border: 1px solid $shiro; - background-color: transparent; - - &:hover, - &:focus, - &:active { - color: shade($day-blue,20%); - background-color: $shiro; - } - } - - &-overlay { - @include btn; - color: $shiro; - border: 1px solid $shiro; - background-color: rgba($shiro, 0.2); - - &:hover, - &:focus, - &:active { - color: shade($day-blue,20%); - background-color: $shiro; - } - } - - &-alternative { - @include btn; - border: 0 none; - color: $day-blue; - background-color: $shiro; - - &:hover, - &:focus, - &:active { - color: shade($day-blue,20%); - background-color: $dark-shiro; - } - } + p > & { + margin-left: $gap; + + @media only screen and (max-width: $mobile-start) { + display: block; + margin: $gap 0 0; + } } - .btn-tertiary { - @include btn; - border: 1px solid transparent; - color: $day-blue; - background-color: transparent; - - &:hover, - &:focus, - &:active { - color: $day-blue; - background-color: $dark-shiro; - border-color: $dark-shiro; - } + + [class*="btn"]:not(.btn-group-justified):not(.btn-full-width--small-device) { + margin-left: $gap / 2; } - .btn-highlight { - @include btn; - color: $dark-silk; - border: 1px solid $sun; - background-color: $sun; - - &:hover, - &:focus, - &:active { - color: $dark-silk; - background-color: darken( $sun, 10% ); - border-color: darken( $sun, 10% ); - } + + .btn-group-justified { + margin-top: $gap; + + &:first-of-type { + margin-bottom: 0; + } } - .btn-cta { - @include btn; - color: $shiro; - border: 1px solid $button-cta; - background-color: $button-cta; - box-shadow: 0px 2px 4px rgba(0,0,0,0.15); - - &:hover, - &:focus, - &:active { - color: $shiro; - background-color: darken( $button-cta, 5% ); - border-color: darken( $button-cta, 5% ); - } +} + +/* +Buttons type + +Use class `.btn` to create a button using `` (outside forms) or ` + + +Highlight +Link + + + +Styleguide #{$sgi-buttons-type} +*/ + +.btn-primary { + @include btn; + color: $shiro; + border: 1px solid $day-blue; + background-color: $day-blue; + box-shadow: 0px 2px 4px rgba(0,0,0,0.15); + + &:hover, + &:focus, + &:active { + color: $shiro; + background-color: shade($day-blue,20%); + border-color: shade($day-blue,20%); } - //new design: idem that btn-primary -> to be deleted and refactor on "empleo" - .btn-primary-contrast { - @include btn; - color: $shiro; - border: 1px solid $late-blue; - background-color: $late-blue; - box-shadow: 0px 2px 4px rgba(0,0,0,0.15); + &-alternative { + @include btn; + border: 1px solid shade($day-blue,40%); + color: $shiro; + background-color: shade($day-blue,40%); + box-shadow: 0px 2px 4px rgba(0,0,0,0.15); + + &:hover, + &:focus, + &:active { + background-color: shade($day-blue,60%); + border-color: shade($day-blue,60%); + } } - - .btn-primary-contrast:hover, - .btn-primary-contrast:focus { - color: $shiro; - background-color: $night-blue; - border-color: $night-blue; +} + +.btn-default { + @include btn; + color: $day-blue; + border: 1px solid $day-blue; + background-color: $button-secondary; + + &:hover, + &:focus, + &:active { + color: $shiro; + background-color: shade($day-blue,20%); } - .btn-primary-contrast:active { - background-color: $midnight-blue; - border-color: $midnight-blue; + &-contrast { + @include btn; + color: $shiro; + border: 1px solid $shiro; + background-color: transparent; + + &:hover, + &:focus, + &:active { + color: shade($day-blue,20%); + background-color: $shiro; + } } - - /* - Buttons size - - Use class `.btn-small` or `.btn-large` to change buttons size.
- The base button size is class `.btn` - - Markup: - Small size Button - Base size Button - Large size Button - - Styleguide #{$sgi-buttons-size} - */ - - .btn-small { - font-size: $xsmall-font-size; - padding: 9px $gap 7px $gap; - line-height: 1; - - img { - width: 12px; - height: 12px; - margin-right: $gap / 2; - } + &-overlay { + @include btn; + color: $shiro; + border: 1px solid $shiro; + background-color: rgba($shiro, 0.2); + + &:hover, + &:focus, + &:active { + color: shade($day-blue,20%); + background-color: $shiro; + } } - .btn { - font-size: $small-font-size; - padding: 13px $gap * 2 11px $gap * 2; - line-height: 1; - - @at-root #{&}[class*="iconfont-"]::before { ////DEPRECATED - font-size: $medium-font-size; - } + &-alternative { + @include btn; + border: 0 none; + color: $day-blue; + background-color: $shiro; + + &:hover, + &:focus, + &:active { + color: shade($day-blue,20%); + background-color: $dark-shiro; } - - .btn-large { - font-size: $base-font-size; - padding: 17px $gap * 3 15px $gap * 3; - line-height: 1; - - @at-root #{&}[class*="iconfont-"]::before { //DEPRECATED - font-size: 22px; - } } - - /* - Buttons with text and icon - - Use class `.iconfont-[name]` to display an icon inside the button. - - Markup: - Crear alerta - Crear alerta - Crear alerta - - Styleguide #{$sgi-buttons-text-icon} - */ - - /* - Buttons status - - Use class `.btn-disabled` to show button as disabled. - - Markup: - - - Styleguide #{$sgi-buttons-status} - */ - - button[disabled], - button:hover[disabled], - button:active[disabled], - button:focus[disabled], - .btn-disabled, - .btn-disabled:hover, - .btn-disabled:active, - .btn-disabled:focus { - text-decoration: none; - color: $shiro; - border: 1px solid #dcdcdc; - box-shadow: none; - background: #dfdfdf; //add to vars (pending to be defined for companies) - cursor: default; +} + +.btn-tertiary { + @include btn; + border: 1px solid transparent; + color: $day-blue; + background-color: transparent; + + &:hover, + &:focus, + &:active { + color: $day-blue; + background-color: $dark-shiro; + border-color: $dark-shiro; } - - /* - Buttons display - - Add class `.btn-full-width` to display a full width button. - - Markup: - - - Styleguide #{$sgi-buttons-display} - */ - - .btn-full-width { - width: 100%; - - &--small-device { - width: 100%; - - @include mediaquery ($bp-desktop) { - width: auto; - } - } +} + +.btn-highlight { + @include btn; + color: $dark-silk; + border: 1px solid $sun; + background-color: $sun; + + &:hover, + &:focus, + &:active { + color: $dark-silk; + background-color: darken( $sun, 10% ); + border-color: darken( $sun, 10% ); } - - .btn-form-inline { //used on search-bar, filters and edit-cv(datos-personales) - width: 100%; - - @at-root button#{&} { - width: 100%; - height: auto; - } - - &.text-left { //already defined in tools.scss, but overwritten by btn{...text-align: center;...} - text-align: left; - } +} + +.btn-cta { + @include btn; + color: $shiro; + border: 1px solid $button-cta; + background-color: $button-cta; + box-shadow: 0px 2px 4px rgba(0,0,0,0.15); + + &:hover, + &:focus, + &:active { + color: $shiro; + background-color: darken( $button-cta, 5% ); + border-color: darken( $button-cta, 5% ); } - - /* - Button file - - Use class `.btn-file` to display an input type file. - - Markup: -
- Subir foto - -
- - Styleguide #{$sgi-buttons-file} - */ - - .btn-file { - position: relative; - - span { - position: absolute; - left: 0; - width: 100%; - } - - input { - height: $small-font-size; - opacity: 0; - cursor: pointer; - } +} + +//new design: idem that btn-primary -> to be deleted and refactor on "empleo" +.btn-primary-contrast { + @include btn; + color: $shiro; + border: 1px solid $late-blue; + background-color: $late-blue; + box-shadow: 0px 2px 4px rgba(0,0,0,0.15); +} + +.btn-primary-contrast:hover, +.btn-primary-contrast:focus { + color: $shiro; + background-color: $night-blue; + border-color: $night-blue; +} + +.btn-primary-contrast:active { + background-color: $midnight-blue; + border-color: $midnight-blue; +} + + +/* +Buttons size + +Use class `.btn-small` or `.btn-large` to change buttons size.
+The base button size is class `.btn` + +Markup: +Small size Button +Base size Button +Large size Button + +Styleguide #{$sgi-buttons-size} +*/ + +.btn-small { + font-size: $xsmall-font-size; + padding: 9px $gap 7px $gap; + line-height: 1; + + img { + width: 12px; + height: 12px; + margin-right: $gap / 2; } +} + +.btn { + font-size: $small-font-size; + padding: 13px $gap * 2 11px $gap * 2; + line-height: 1; - /* - Buttons variants - - Lorem ipsum... - - Markup: -
- - - - -
- - Styleguide #{$sgi-buttons-variants} - */ - - ///*DEPRECATED: .btn-link-primary only used in 'ver_oferta.html'*/ - .btn-link-primary { - @include btn; - color: $day-blue; - - &:hover, - &:focus { - text-decoration: underline; - color: $late-blue; - } + @at-root #{&}[class*="iconfont-"]::before { ////DEPRECATED + font-size: $medium-font-size; } +} + +.btn-large { + font-size: $base-font-size; + padding: 17px $gap * 3 15px $gap * 3; + line-height: 1; - - .btn-link-primary + .btn-link-primary, - .btn-link-secondary + .btn-link-secondary { - padding-left: 0; + @at-root #{&}[class*="iconfont-"]::before { //DEPRECATED + font-size: 22px; } +} + +/* +Buttons with text and icon + +Use class `.iconfont-[name]` to display an icon inside the button. + +Markup: +Crear alerta +Crear alerta +Crear alerta + +Styleguide #{$sgi-buttons-text-icon} +*/ + +/* +Buttons status + +Use class `.btn-disabled` to show button as disabled. + +Markup: + + +Styleguide #{$sgi-buttons-status} +*/ + +button[disabled], +button:hover[disabled], +button:active[disabled], +button:focus[disabled], +.btn-disabled, +.btn-disabled:hover, +.btn-disabled:active, +.btn-disabled:focus { + text-decoration: none; + color: $shiro; + border: 1px solid #dcdcdc; + box-shadow: none; + background: #dfdfdf; //add to vars (pending to be defined for companies) + cursor: default; +} + +/* +Buttons display + +Add class `.btn-full-width` to display a full width button. + +Markup: + + +Styleguide #{$sgi-buttons-display} +*/ + +.btn-full-width { + width: 100%; - ///*DEPRECATED: .btn-link-secondary only used in header*/ - .btn-link-secondary { - @include btn; - color: $mid-script; - - &:hover { - text-decoration: underline; - color: $dark-silk; - } + &--small-device { + width: 100%; + + @include mediaquery ($bp-desktop) { + width: auto; + } } +} + +.btn-form-inline { //used on search-bar, filters and edit-cv(datos-personales) + width: 100%; + @at-root button#{&} { + width: 100%; + height: auto; + } - ///*DEPRECATED: .btn-link-company only used in header*/ - .btn-link-company { - @include btn; - color: $soft-script; + &.text-left { //already defined in tools.scss, but overwritten by btn{...text-align: center;...} + text-align: left; +} +} + +/* +Button file + +Use class `.btn-file` to display an input type file. + +Markup: +
+Subir foto + +
+ +Styleguide #{$sgi-buttons-file} +*/ + +.btn-file { + position: relative; - &:hover { - @extend .btn-link-secondary:hover; - color: $shiro; - } + span { + position: absolute; + left: 0; + width: 100%; } - .btn-justify { - @include display-flex; - @include flex-flow(wrap); - @include align-items(center); - padding: 0; + input { + height: $small-font-size; + opacity: 0; + cursor: pointer; + } +} + +/* +Buttons variants + +Lorem ipsum... + +Markup: +
+ + + + +
+ +Styleguide #{$sgi-buttons-variants} +*/ + +///*DEPRECATED: .btn-link-primary only used in 'ver_oferta.html'*/ +.btn-link-primary { + @include btn; + color: $day-blue; + + &:hover, + &:focus { + text-decoration: underline; + color: $late-blue; + } +} + + +.btn-link-primary + .btn-link-primary, +.btn-link-secondary + .btn-link-secondary { + padding-left: 0; +} + +///*DEPRECATED: .btn-link-secondary only used in header*/ +.btn-link-secondary { + @include btn; + color: $mid-script; + + &:hover { + text-decoration: underline; + color: $dark-silk; + } +} + + +///*DEPRECATED: .btn-link-company only used in header*/ +.btn-link-company { + @include btn; + color: $soft-script; + + &:hover { + @extend .btn-link-secondary:hover; + color: $shiro; + } +} + +.btn-justify { + @include display-flex; + @include flex-flow(wrap); + @include align-items(center); + padding: 0; + + li { + @include flex(1 1 0); + padding-right: $gap; + + &:not(:only-of-type) { + margin-bottom: $gap; + } + + &:last-of-type { + padding: 0; + } + } + &.btn-justify-icon-end { + li { - @include flex(1 1 0); - padding-right: $gap; - - &:not(:only-of-type) { - margin-bottom: $gap; - } - + @include flex(1 1 auto); + &:last-of-type { - padding: 0; + @include flex(0 1 auto); } } + + } - &.btn-justify-icon-end { + [class^="btn-"], + [class*="btn-"] { + width: 100%; + } - li { - @include flex(1 1 auto); + &--tablet li { + + padding-right: 0; + + @include mediaquery ($bp-tablet) { + padding-right: $gap; + } + } - &:last-of-type { - @include flex(0 1 auto); - } - } +} + +/* +Button group + +Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra ante enim, cursus fringilla metus hendrerit non. + +Styleguide #{$sgi-button-group} + +*/ + +/* +Button group structure + +Use class `.btn-group` to create a button group structure.
+Use class `.btn-default` for buttons inside buttons group.
+Use class `.active` to highlight the selected button.
+ +Markup: +
+
+ +
+
+ +
+
+ +
+
+ +Styleguide #{$sgi-button-group-structure} +*/ + +.btn-group { //TODO: Add hide text for empty buttons + display: table; + & > div { + display: table-cell; + + &:first-child > [class*="btn"] { + border-radius: 3px 0 0 3px; } - - [class^="btn-"], - [class*="btn-"] { - width: 100%; + + &:last-child > [class*="btn"] { + border-radius: 0 3px 3px 0; } - &--tablet li { - - padding-right: 0; - - @include mediaquery ($bp-tablet) { - padding-right: $gap; - } + & > [class*="btn"] { + border-radius: 0; } - } - /* - Button group - - Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur viverra ante enim, cursus fringilla metus hendrerit non. - - Styleguide #{$sgi-button-group} - - */ - - /* - Button group structure - - Use class `.btn-group` to create a button group structure.
- Use class `.btn-default` for buttons inside buttons group.
- Use class `.active` to highlight the selected button.
- - Markup: -
-
- -
-
- -
-
- -
-
- - Styleguide #{$sgi-button-group-structure} - */ - - .btn-group { //TODO: Add hide text for empty buttons - display: table; - - & > div { - display: table-cell; - - &:first-child > [class*="btn"] { - border-radius: 3px 0 0 3px; - } - - &:last-child > [class*="btn"] { - border-radius: 0 3px 3px 0; - } - - & > [class*="btn"] { - border-radius: 0; - } - } - - [class*="btn"] { - border-color: $day-blue; - border-width: 1px; - border-style: solid; - } - - button { /* fix iOS buttons separation */ - margin: 0; - } - - [class*="btn"] , - [class*="btn"] :hover { - border-right-width: 0; - width: 100%; - } - - div:last-of-type [class*="btn"] { - border-right-width: 1px; - border-top-right-radius: 2px; - border-bottom-right-radius: 2px; - } - - .active [class*="btn"], - .active [class*="btn"].btn-disabled { - cursor: default; - color: $shiro; - background-color: shade($day-blue,20%); - } - - &.btn-group-expanded { - div { - padding-left: $gap; - - [class*="btn"] { - border-right-width: 1px; - - &.disabled:hover { - border-right-width: 1px; - color: $shiro; - background-color: $day-blue; - cursor: default; - } - } - } - } + [class*="btn"] { + border-color: $day-blue; + border-width: 1px; + border-style: solid; } - /* - Button group justified - - Use class `.btn-group-justified` to display `.btn-group` full width buttons. - - - Markup: -
-
- -
-
- -
-
- -
-
- - Styleguide #{$sgi-button-group-justified} - */ - - /* - Button group with icon - - Use class `.iconfont-[name]` to display an icon inside the button. - - Markup: -
-
- Comparte esta oferta en Facebook -
-
- Tweetea esta oferta -
-
- - Styleguide #{$sgi-button-group-icon} - */ - - .btn-group-justified { //TODO: same properties than .btn-form-inline class - width: 100%; - - [class*="btn"] { - width: 100%; - } + button { /* fix iOS buttons separation */ + margin: 0; } - .btn-group-centered { - margin-left: auto; - margin-right: auto; + [class*="btn"] , + [class*="btn"] :hover { + border-right-width: 0; + width: 100%; } - ///*DEPRECATED: .btn-divider and .btn-divider-company only used on header*/ - .btn-divider { - border-right: 1px solid $darkest-shiro; + div:last-of-type [class*="btn"] { + border-right-width: 1px; + border-top-right-radius: 2px; + border-bottom-right-radius: 2px; } - ///*DEPRECATED: .btn-divider and .btn-divider-company only used on header*/ - .btn-divider-company { - border-right: 1px solid $mid-script; + .active [class*="btn"], + .active [class*="btn"].btn-disabled { + cursor: default; + color: $shiro; + background-color: shade($day-blue,20%); } - .btn-menu-more { - @include btn; - @include iconfont-Menumore; - padding: 0; - font-size: 24px; - background: transparent; - border-color: transparent; - height: 24px; - width: 24px; + &.btn-group-expanded { + div { + padding-left: $gap; + + [class*="btn"] { + border-right-width: 1px; + + &.disabled:hover { + border-right-width: 1px; + color: $shiro; + background-color: $day-blue; + cursor: default; + } + } + } } +} + +/* +Button group justified + +Use class `.btn-group-justified` to display `.btn-group` full width buttons. + + +Markup: +
+
+ +
+
+ +
+
+ +
+
+ +Styleguide #{$sgi-button-group-justified} +*/ + +/* +Button group with icon + +Use class `.iconfont-[name]` to display an icon inside the button. + +Markup: +
+
+Comparte esta oferta en Facebook +
+
+Tweetea esta oferta +
+
+ +Styleguide #{$sgi-button-group-icon} +*/ + +.btn-group-justified { //TODO: same properties than .btn-form-inline class + width: 100%; - .btn-rounded { - @include btn; - padding: 13px 11px 13px 15px; - border-radius: 50%; + [class*="btn"] { + width: 100%; + } +} + +.btn-group-centered { + margin-left: auto; + margin-right: auto; +} + +///*DEPRECATED: .btn-divider and .btn-divider-company only used on header*/ +.btn-divider { + border-right: 1px solid $darkest-shiro; +} + +///*DEPRECATED: .btn-divider and .btn-divider-company only used on header*/ +.btn-divider-company { + border-right: 1px solid $mid-script; +} + +.btn-menu-more { + @include btn; + @include iconfont-Menumore; + padding: 0; + font-size: 24px; + background: transparent; + border-color: transparent; + height: 24px; + width: 24px; +} + +.btn-rounded { + @include btn; + padding: 13px 11px 13px 15px; + border-radius: 50%; - img { - margin: 0; - } + img { + margin: 0; } - \ No newline at end of file +} From 5add58ba95ab0bf1d60a082202e2124f6dd7f841 Mon Sep 17 00:00:00 2001 From: Norbert Guasch Date: Fri, 13 Sep 2019 10:22:24 +0200 Subject: [PATCH 2/2] delete focus style --- styles/elements/_buttons.scss | 19 +++---------------- 1 file changed, 3 insertions(+), 16 deletions(-) diff --git a/styles/elements/_buttons.scss b/styles/elements/_buttons.scss index 368755b8..41b27b23 100644 --- a/styles/elements/_buttons.scss +++ b/styles/elements/_buttons.scss @@ -100,7 +100,6 @@ Styleguide #{$sgi-buttons-type} box-shadow: 0px 2px 4px rgba(0,0,0,0.15); &:hover, - &:focus, &:active { color: $shiro; background-color: shade($day-blue,20%); @@ -115,7 +114,6 @@ Styleguide #{$sgi-buttons-type} box-shadow: 0px 2px 4px rgba(0,0,0,0.15); &:hover, - &:focus, &:active { background-color: shade($day-blue,60%); border-color: shade($day-blue,60%); @@ -130,7 +128,6 @@ Styleguide #{$sgi-buttons-type} background-color: $button-secondary; &:hover, - &:focus, &:active { color: $shiro; background-color: shade($day-blue,20%); @@ -143,7 +140,6 @@ Styleguide #{$sgi-buttons-type} background-color: transparent; &:hover, - &:focus, &:active { color: shade($day-blue,20%); background-color: $shiro; @@ -157,7 +153,6 @@ Styleguide #{$sgi-buttons-type} background-color: rgba($shiro, 0.2); &:hover, - &:focus, &:active { color: shade($day-blue,20%); background-color: $shiro; @@ -171,7 +166,6 @@ Styleguide #{$sgi-buttons-type} background-color: $shiro; &:hover, - &:focus, &:active { color: shade($day-blue,20%); background-color: $dark-shiro; @@ -186,7 +180,6 @@ Styleguide #{$sgi-buttons-type} background-color: transparent; &:hover, - &:focus, &:active { color: $day-blue; background-color: $dark-shiro; @@ -201,7 +194,6 @@ Styleguide #{$sgi-buttons-type} background-color: $sun; &:hover, - &:focus, &:active { color: $dark-silk; background-color: darken( $sun, 10% ); @@ -217,7 +209,6 @@ Styleguide #{$sgi-buttons-type} box-shadow: 0px 2px 4px rgba(0,0,0,0.15); &:hover, - &:focus, &:active { color: $shiro; background-color: darken( $button-cta, 5% ); @@ -234,8 +225,7 @@ Styleguide #{$sgi-buttons-type} box-shadow: 0px 2px 4px rgba(0,0,0,0.15); } -.btn-primary-contrast:hover, -.btn-primary-contrast:focus { +.btn-primary-contrast:hover { color: $shiro; background-color: $night-blue; border-color: $night-blue; @@ -320,11 +310,9 @@ Styleguide #{$sgi-buttons-status} button[disabled], button:hover[disabled], button:active[disabled], -button:focus[disabled], .btn-disabled, .btn-disabled:hover, -.btn-disabled:active, -.btn-disabled:focus { +.btn-disabled:active { text-decoration: none; color: $shiro; border: 1px solid #dcdcdc; @@ -420,8 +408,7 @@ Styleguide #{$sgi-buttons-variants} @include btn; color: $day-blue; - &:hover, - &:focus { + &:hover { text-decoration: underline; color: $late-blue; }