diff options
Diffstat (limited to 'templates/@theme-base/pm-styles/_pm-buttons.scss')
| -rw-r--r-- | templates/@theme-base/pm-styles/_pm-buttons.scss | 188 |
1 files changed, 130 insertions, 58 deletions
diff --git a/templates/@theme-base/pm-styles/_pm-buttons.scss b/templates/@theme-base/pm-styles/_pm-buttons.scss index d206cf9..5b053a0 100644 --- a/templates/@theme-base/pm-styles/_pm-buttons.scss +++ b/templates/@theme-base/pm-styles/_pm-buttons.scss @@ -1,4 +1,4 @@ - + /* * Buttons */ @@ -11,6 +11,7 @@ border-style: solid; border-width: 1px; text-decoration: none; + transition: .15s easing(easeOutQuint), background-position 0s; & > button { // this is for drop down buttons color: inherit; } @@ -24,27 +25,26 @@ .pm-button { border-color: $pm-global-border; - background: $white; + background-color: $white; color: $pm-global-grey; + &:hover, &:focus, &:focus-within, - &.is-hover { + &.is-hover { color: $pm-global-grey; box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2); } &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns &.is-active { //background-color: $pm-global-border; - background: radial-gradient(closest-side, $white, $pm-global-border 90%); + background-image: radial-gradient(closest-side, transparent, rgba(black, .1)); box-shadow: none; } &[disabled], &.is-disabled { - background-color: $pm-global-muted; - color: rgba( $pm-global-grey, .3 ); - pointer-events: none; + @include button-disabled-state; } /* just to cancel examples */ &.is-active:hover { @@ -57,6 +57,22 @@ &.p0 { padding: 0; } + + &[aria-expanded="true"] .caret-like { + @extend .rotateX-180; + } + + &.pm-select { + padding-right: .6rem; + .mauto { + display: flex; + width: 100%; + } + .mr0-5 { + flex: 1 1 0px; + @extend .ellipsis; + } + } } @@ -77,20 +93,17 @@ &.is-hover { color: $white; box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2); - background: $pm-primary-dark; + background-color: $pm-primary-dark; } &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns &.is-active { - background: $pm-primary-dark; + background-color: $pm-primary-dark; text-shadow: 1px 1px 10px rgba( $white, .3 ),-1px -1px 10px rgba( $white, .3 ); box-shadow: none; } &[disabled], &.is-disabled { - background-color: $pm-global-muted; - color: rgba( $pm-global-grey, .3 ); - border-color: $pm-global-border; - pointer-events: none; + @include button-disabled-state($pm-primary); } /* just to cancel examples */ &.is-hover:hover { @@ -115,15 +128,12 @@ &.is-active { border-color: $pm-primary-dark; color: $pm-primary-dark; - background: radial-gradient(closest-side, $white, $pm-global-border 90%); + background-image: radial-gradient(closest-side, transparent, rgba(black, .1)); box-shadow: none; } &[disabled], &.is-disabled { - background-color: $pm-global-muted; - color: rgba( $pm-global-grey, .3 ); - border-color: $pm-global-border; - pointer-events: none; + @include button-disabled-state; } } @@ -144,20 +154,17 @@ &.is-hover { color: $white; box-shadow: 0 0 em(5) 0 rgba(0, 0, 0, 0.2); - background: $pv-green-dark; + background-color: $pv-green-dark; } &:not(div):active, // not(div) prevents active state in case of button groups with dropdowns &.is-active { - background: $pv-green-dark; + background-color: $pv-green-dark; text-shadow: 1px 1px 10px rgba( $white, .3 ),-1px -1px 10px rgba( $white, .3 ); box-shadow: none; } &[disabled], &.is-disabled { - background-color: $pm-global-muted; - color: rgba( $pm-global-grey, .3 ); - border-color: $pm-global-border; - pointer-events: none; + @include button-disabled-state($pv-green); } /* just to cancel examples */ &.is-hover:hover { @@ -182,15 +189,12 @@ &.is-active { border-color: $pv-green-dark; color: $pv-green-dark; - background: radial-gradient(closest-side, $white, $pm-global-border 90%); + background-image: radial-gradient(closest-side, transparent, rgba(black, .1)); box-shadow: none; } &[disabled], &.is-disabled { - background-color: $pm-global-muted; - color: rgba( $pm-global-grey, .3 ); - border: 1px solid $pm-global-border; - pointer-events: none; + @include button-disabled-state; } } @@ -203,10 +207,10 @@ /* modifiers */ .pm-button--large { - padding: em(10) em(20) em(9); // design want 42px height + padding: em(10) em(20) em(9); // design want 42px height } .pm-button--small { - padding: em(1) em(12) em(2); // design want 26px height + padding: em(1) em(12) em(2); // design want 26px height } .pm-button--for-icon { @@ -236,6 +240,7 @@ .pm-group-button:active { position: relative; } + .pm-group-buttons > .pm-group-button:first-child { border-radius: $global-border-radius 0 0 $global-border-radius; border-left-width: 1px; @@ -258,13 +263,43 @@ } } +/* special case for group button with primary colors */ +.pm-group-buttons > .pm-group-button.pm-button--primary { + border-color: $pm-primary; + border-left-width: 0; + &:first-child { + border-left-width: 1px; + } + &:not(:last-child) { + border-right-color: var(--bgcolor-main-area, $white); + } +} + +/* exception for group buttons, disabled state should keep the border */ +.pm-group-button { + &[disabled], + &.is-disabled { + &.pm-button { + border-color: $pm-global-border; + } + &.pm-button-blueborder { + border-color: $pm-primary; + } + &.pv-button-greenborder { + border-color: $pv-green; + } + } +} + + /* aliases for buttons => different per project */ /* primary/link/error/warning/info */ @if ($pm-primary == $pm-blue) { .pm-button--primary { @extend .pm-button-blue; } - .pm-button--primaryborder { + .pm-button--primaryborder, + .pm-button--primaryborderEvenInDarkMode { @extend .pm-button-blueborder; } .pm-button--primaryborder-dark { @@ -275,7 +310,8 @@ .pm-button--primary { @extend .pv-button-green; } - .pm-button--primaryborder { + .pm-button--primaryborder, + .pm-button--primaryborderEvenInDarkMode { @extend .pv-button-greenborder; } .pm-button--primaryborder-dark { @@ -307,41 +343,64 @@ text-decoration: none; background-color: transparent; // to avoid heriting from other classes } + &.nodecoration { + text-decoration: none; + } + &.pm-button--currentColor { + color: currentColor; + } } -.pm-button--error { +.pm-button--error, +.pm-button.pm-button--error { @extend .pm-button-blue; background-color: $pm-global-warning; - border-color: $pm-global-warning; -} -.pm-button--error:focus, -.pm-button--error:hover, -.pm-button--error:not(div):active { // not div is here for a specificity issue for another fix - background-color: $pm-global-warning; - border-color: $pm-global-warning; + border-color: $pm-global-warning; + &:focus, + &:hover, + &:not(div):active { // not div is here for a specificity issue for another fix + background-color: $pm-global-warning; + border-color: $pm-global-warning; + } + &[disabled], + &.is-disabled { + @include button-disabled-state($pm-global-warning); + } } -.pm-button--warning { +.pm-button--warning, +.pm-button.pm-button--warning { @extend .pm-button-blue; background-color: $pm-global-attention; - border-color: $pm-global-attention; -} -.pm-button--warning:focus, -.pm-button--warning:hover, -.pm-button--warning:not(div):active { // not div is here for a specificity issue for another fix - background-color: $pm-global-attention; - border-color: $pm-global-attention; + border-color: $pm-global-attention; + &:focus, + &:hover, + &:not(div):active { // not div is here for a specificity issue for another fix + background-color: $pm-global-attention; + border-color: $pm-global-attention; + } + &[disabled], + &.is-disabled { + @include button-disabled-state($pm-global-attention); + } } .pm-button--info { @extend .pm-button; } /* other aliases requested */ -.pm-button--redborder.pm-button--redborder { // for darkmode... again - @extend .pm-button; - border-color: $pm-global-warning; - color: $pm-global-warning; +.pm-button--redborder, +.pm-button.pm-button--redborder { + @extend .pm-button; + border-color: $pm-global-warning; + color: $pm-global-warning; + &:focus, + &:hover, + &:not(div):active, + &:active { + color: $pm-global-warning; + } } - -.pm-button--whiteborder { +.pm-button--whiteborder, +.pm-button--primary.pm-button.pm-button--whiteborder { border: 1px solid $white; } @@ -349,8 +408,21 @@ .pm-button--noborder { border: 0; } - - .pm-button--currentColor { color: currentColor; -}
\ No newline at end of file +} +.pm-button--pill { + border-radius: 2em; +} +.pm-button--transparent { + /* When using currentColor, you need to set the color you want on a container */ + border: 1px solid currentColor; + color: currentColor; + &:focus, + &:hover, + &:not(div):active, + &:active { + background-color: rgba(black, .2); + color: currentColor; + } +} |