summaryrefslogtreecommitdiffstats
path: root/assets/_primer/support/mixins/buttons.scss
diff options
context:
space:
mode:
Diffstat (limited to 'assets/_primer/support/mixins/buttons.scss')
-rw-r--r--assets/_primer/support/mixins/buttons.scss167
1 files changed, 0 insertions, 167 deletions
diff --git a/assets/_primer/support/mixins/buttons.scss b/assets/_primer/support/mixins/buttons.scss
deleted file mode 100644
index 4b6cbb3..0000000
--- a/assets/_primer/support/mixins/buttons.scss
+++ /dev/null
@@ -1,167 +0,0 @@
-// Button color generator for primary and themed buttons
-
-// New button hotness
-@mixin btn-solid($color, $bg, $bg2) {
- color: $color;
- background-color: $bg2;
- background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
-
- @if $bg == $gray-000 {
- &:focus,
- &.focus {
- box-shadow: $btn-input-focus-shadow;
- }
-
- &:hover,
- &.hover {
- background-color: darken($bg2, 3%);
- background-image: linear-gradient(-180deg, darken($bg, 3%) 0%, darken($bg2, 3%) 90%);
- background-position: 0 -$em-spacer-5;
- border-color: rgba($black, 0.35);
- }
-
- &:active,
- &.selected,
- &[aria-selected=true],
- [open] > & {
- background-color: darken(desaturate($bg, 10%), 6%);
- background-image: none;
- border-color: rgba($black, 0.35); // repeat to avoid shift on click-drag off of button
- box-shadow: $btn-active-shadow;
- }
-
- &:disabled,
- &.disabled,
- &[aria-disabled=true] {
- color: rgba($color, 0.4);
- background-color: $bg2;
- background-image: none;
- border-color: $border-color-button;
- box-shadow: none;
- }
-
- }
- @else {
- &:focus,
- &.focus {
- box-shadow: 0 0 0 0.2em rgba($bg, 0.4);
- }
-
- &:hover,
- &.hover {
- background-color: darken($bg2, 2%);
- background-image: linear-gradient(-180deg, darken($bg, 2%) 0%, darken($bg2, 2%) 90%);
- background-position: 0 -$em-spacer-5;
- border-color: $black-fade-50;
- }
-
- &:active,
- &.selected,
- &[aria-selected=true],
- [open] > & {
- background-color: darken(mix($bg, $bg2, 50%), 7%);
- background-image: none;
- border-color: $black-fade-50; // repeat to avoid shift on click-drag off of button
- box-shadow: $btn-active-shadow;
- }
-
- &:disabled,
- &.disabled,
- &[aria-disabled=true] {
- color: rgba($color, 0.75);
- background-color: mix($bg2, $white, 50%);
- background-image: none;
- border-color: $border-color-button;
- box-shadow: none;
- }
-
- .Counter {
- color: darken($bg, 8%);
- background-color: $white;
- }
- }
-}
-
-// Inverse button hover style
-@mixin btn-inverse($color, $bg, $bg2) {
- color: $color;
- background-color: $bg;
- background-image: linear-gradient(-180deg, $bg 0%, $bg2 90%);
-
- &:focus {
- box-shadow: 0 0 0 0.2em rgba($color, 0.4);
- }
-
- &:hover {
- color: $text-white;
- background-color: $color;
- background-image: linear-gradient(-180deg, lighten($color, 10%) 0%, $color 90%);
- border-color: $black-fade-50;
-
- .Counter {
- color: $text-white;
- }
- }
-
- &:active,
- &.selected,
- &[aria-selected=true],
- [open] > & {
- color: $text-white;
- background-color: darken($color, 5%);
- background-image: none;
- border-color: $black-fade-50;
- box-shadow: $btn-active-shadow;
- }
-
- &:disabled,
- &.disabled,
- &[aria-disabled=true] {
- color: rgba($color, 0.4);
- background-color: $bg2;
- background-image: none;
- border-color: $border-color-button;
- box-shadow: none;
- }
-}
-
-// Outline color generator for btn-outline to make the hover state inverse the text and bg colors.
-@mixin btn-outline($text-color: $text-blue, $bg-color: $bg-white) {
- color: $text-color;
- background-color: $bg-color;
- background-image: none;
-
- .Counter {
- background-color: rgba($black, 0.07);
- }
-
- &:hover,
- &:active,
- &.selected,
- &[aria-selected=true],
- [open] > & {
- color: $bg-color;
- background-color: $text-color;
- background-image: none;
- border-color: $text-color;
-
- .Counter {
- color: $text-color;
- background-color: $bg-color;
- }
- }
-
- &:focus {
- border-color: $text-color;
- box-shadow: 0 0 0 0.2em rgba($text-color, 0.4);
- }
-
- &:disabled,
- &.disabled,
- &[aria-disabled=true] {
- color: $black-fade-30;
- background-color: $bg-white;
- border-color: $black-fade-15;
- box-shadow: none;
- }
-}