@codecademy/gamut
72.0.172.0.2-alpha.58e071.0
dist/AccordionButtonDeprecated/ButtonDeprecated/styles/mixins.scss−
dist/AccordionButtonDeprecated/ButtonDeprecated/styles/mixins.scssDeleted−109
Index: package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/mixins.scss
===================================================================
--- package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/mixins.scss
+++ package/dist/AccordionButtonDeprecated/ButtonDeprecated/styles/mixins.scss
@@ -1,109 +0,0 @@
-@use "sass:color";
-@use "variables";
-
-// Button variants
-//
-// Easily pump out default styles, as well as :hover, :focus, :active,
-// and disabled options for all buttons
-
-@mixin button-variant($color, $background, $border: transparent) {
- $active-background: color.mix(variables.$color-black, $background);
-
- @if $border == transparent {
- $active-border: transparent;
- $active-border-hover: transparent;
- }
-
- color: $color;
- background-color: $background;
- border-color: $border;
-
- &:hover {
- box-shadow: 0 2px 4px variables.$btn-box-shadow-color;
- }
-
- &:focus-visible {
- box-shadow: 0 0 0 2px variables.$color-white, 0 0 0 4px $background;
- }
-
- &:focus-visible,
- &:hover {
- text-decoration: none;
- color: $color;
-
- &:active {
- box-shadow: 0 2px 4px variables.$btn-box-shadow-color;
- }
- }
-
- &:active {
- background-color: $active-background;
- }
-
- &:disabled {
- background-color: variables.$btn-disabled-color;
-
- &:hover {
- box-shadow: none;
- }
- }
-}
-
-@mixin button-flat-variant($color) {
- color: $color;
- background-color: transparent;
-
- &:hover,
- &:active {
- box-shadow: none;
- }
-
- &:focus-visible {
- box-shadow: 0 0 0 2px variables.$color-white, 0 0 0 4px $color;
- }
-
- &:disabled {
- color: variables.$btn-disabled-color;
- background-color: transparent;
- }
-}
-
-// Button sizes
-@mixin button-size(
- $padding-y,
- $padding-x,
- $font-size,
- $line-height,
- $min-width
-) {
- padding: $padding-y $padding-x;
- font-size: $font-size;
- line-height: $line-height;
- min-width: $min-width;
-
- &.fit-text {
- min-width: 0;
- min-height: 0;
- }
-}
-
-@mixin button-variants($name, $color, $background, $border: transparent) {
- .btn-#{$name} {
- @include button-variant($color, $background, $border);
- &.flat {
- @include button-flat-variant($background);
- }
- @content;
- }
- .link-#{$name} {
- font-weight: bold;
- -webkit-font-smoothing: antialiased;
- -moz-osx-font-smoothing: grayscale;
- color: $background;
- text-decoration: underline;
-
- &:disabled {
- color: variables.$btn-disabled-color;
- }
- }
-}