// // Buttons // —————————————- .dark {
.btn { &.hover, &:hover { text-decoration: none; } &.disabled, &[disabled], &.disabled:hover, &[disabled]:hover, { cursor: not-allowed; background: hsv-darken($color-element-background, 5%, true); border-color: hsv-darken($color-element-border, 14%, true); color: hsv-darken($font-color-regular, 50%, true); } } %btn-default, .btn-default { @include button-variant($font-color-regular, $color-element-background, $color-element-border); } .btn-brand { @include button-variant($color-bright, $color-brand, $button-border-color-brand, #f4067d, #f4c8df, #ff0683, #ffd0e8); &.disabled, &[disabled] { &, &.focus, &:focus, &.hover, &:hover { color: $color-bright; background: $color-brand; border-color: $button-border-color-brand; opacity: .3; } } } .btn-positive { @include button-variant($color-bright, $color-positive, $button-border-color-positive); } .btn-negative { @include button-variant($color-bright, $color-negative, $button-border-color-negative); } .btn-clean { @extend %btn-default; color: $color-bright; background-color: transparent; &, &.focus, &:focus, &.hover, &:hover, &.active, &:active { border-color: transparent; } &.hover, &:hover { background: hsv-lighten($color-element-background, 0%, true); } &.active, &:active { background: hsv-lighten($color-element-background, 15%, true); } &.focus, &:focus { background: hsv-lighten($color-element-background, 21%, true); } }
}