@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); }
}