summaryrefslogtreecommitdiff
path: root/_sass/common/components/_button.scss
diff options
context:
space:
mode:
Diffstat (limited to '_sass/common/components/_button.scss')
-rw-r--r--_sass/common/components/_button.scss163
1 files changed, 0 insertions, 163 deletions
diff --git a/_sass/common/components/_button.scss b/_sass/common/components/_button.scss
deleted file mode 100644
index 08ce7a9..0000000
--- a/_sass/common/components/_button.scss
+++ /dev/null
@@ -1,163 +0,0 @@
-@mixin button() {
- display: inline-block;
- font-weight: map-get($button, font-weight);
- line-height: 1 !important;
- text-decoration: none !important;
- cursor: pointer;
- outline: none;
- @include user-select(none);
- svg {
- width: 1rem;
- height: 1rem;
- }
- @include disabled() {
- cursor: not-allowed;
- }
-}
-
-.button {
- @include button();
-}
-
-.button--primary {
- @include clickable($text-color-1, $main-color-1);
-}
-
-.button--secondary {
- @include clickable($text-color-3, $main-color-3);
-}
-
-.button--success {
- @include clickable($text-color-function, $green);
-}
-
-.button--info {
- @include clickable($text-color-function, $blue);
-}
-
-.button--warning {
- @include clickable($text-color-function, $yellow);
-}
-
-.button--error {
- @include clickable($text-color-function, $red);
-}
-
-.button--theme-light {
- @include clickable($text-color-theme-dark, $main-color-theme-light);
-}
-
-.button--theme-dark {
- @include clickable($text-color-theme-light, $main-color-theme-dark);
-}
-
-.button--outline-primary {
- color: $main-color-1;
- border: 1px solid $main-color-1;
- @include clickable($main-color-1, transparent, $text-color-1, $main-color-1);
-}
-
-.button--outline-secondary {
- color: $main-color-3;
- border: 1px solid $main-color-3;
- @include clickable($main-color-3, transparent, $text-color-3, $main-color-3);
-}
-
-.button--outline-success {
- color: $green;
- border: 1px solid $green;
- @include clickable($green, transparent, $text-color-function, $green);
-}
-
-.button--outline-info {
- color: $blue;
- border: 1px solid $blue;
- @include clickable($blue, transparent, $text-color-function, $blue);
-}
-
-.button--outline-warning {
- color: $yellow;
- border: 1px solid $yellow;
- @include clickable($yellow, transparent, $text-color-function, $yellow);
-}
-
-.button--outline-error {
- color: $red;
- border: 1px solid $red;
- @include clickable($red, transparent, $text-color-function, $red);
-}
-
-.button--outline-theme-light {
- color: $main-color-theme-light;
- border: 1px solid $main-color-theme-light;
- @include clickable($main-color-theme-light, transparent, $text-color-theme-dark, $main-color-theme-light);
-}
-
-.button--outline-theme-dark {
- color: $main-color-theme-dark;
- border: 1px solid $main-color-theme-dark;
- @include clickable($main-color-theme-dark, transparent, $text-color-theme-light, $main-color-theme-dark);
-}
-
-.button--pill {
- border-radius: map-get($button, pill-radius);
- @extend .button--md;
-}
-
-.button--rounded {
- border-radius: map-get($base, border-radius);
- @extend .button--md;
-}
-
-.button--circle {
- @include inline-flex();
- @include justify-content(center);
- @include align-items(center);
- border-radius: 50%;
- @extend .button--md;
-}
-
-.button--md {
- padding: map-get($button, padding-y) map-get($button, padding-x);
- font-size: map-get($base, font-size);
- &.button--circle {
- width: map-get($button, circle-diameter);
- height: map-get($button, circle-diameter);
- }
-}
-
-.button--xs {
- padding: map-get($button, padding-y-xs) map-get($button, padding-x-xs);
- font-size: map-get($base, font-size-xs);
- &.button--circle {
- width: map-get($button, circle-diameter-xs);
- height: map-get($button, circle-diameter-xs);
- }
-}
-
-.button--sm {
- padding: map-get($button, padding-y-sm) map-get($button, padding-x-sm);
- font-size: map-get($base, font-size-sm);
- &.button--circle {
- width: map-get($button, circle-diameter-sm);
- height: map-get($button, circle-diameter-sm);
- }
-}
-
-.button--lg {
- padding: map-get($button, padding-y-lg) map-get($button, padding-x-lg);
- font-size: map-get($base, font-size-lg);
- &.button--circle {
- width: map-get($button, circle-diameter-lg);
- height: map-get($button, circle-diameter-lg);
- }
-}
-
-.button--xl {
- padding: map-get($button, padding-y-xl) map-get($button, padding-x-xl);
- font-size: map-get($base, font-size-xl);
- &.button--circle {
- width: map-get($button, circle-diameter-xl);
- height: map-get($button, circle-diameter-xl);
- }
-}