164 lines
3.9 KiB
SCSS
164 lines
3.9 KiB
SCSS
@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);
|
|
}
|
|
}
|