74 lines
1.2 KiB
SCSS
74 lines
1.2 KiB
SCSS
|
|
||
|
|
@mixin btn() {
|
||
|
|
display: flex;
|
||
|
|
font-size: 1em;
|
||
|
|
border: none;
|
||
|
|
padding: 10px 15px 10px 15px;
|
||
|
|
border-radius: 20px;
|
||
|
|
transition: all 0.1s linear;
|
||
|
|
cursor: pointer;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn {
|
||
|
|
@include btn;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn.invert {
|
||
|
|
color: var(--#{$prefix}-base) !important;
|
||
|
|
}
|
||
|
|
.btn.invert:hover {
|
||
|
|
color: var(--#{$prefix}-text) !important;
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn-sm {
|
||
|
|
@include btn;
|
||
|
|
padding: 4px 8px 4px 8px;
|
||
|
|
svg {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.btn.btn-sm {
|
||
|
|
padding: 4px 8px 4px 8px;
|
||
|
|
svg {
|
||
|
|
width: 20px;
|
||
|
|
height: 20px;
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|
||
|
|
.borderless-btn {
|
||
|
|
@include btn;
|
||
|
|
color: var(--#{$prefix}-text);
|
||
|
|
background-color: var(--#{$prefix}-surface2);
|
||
|
|
}
|
||
|
|
.borderless-btn:hover {
|
||
|
|
background-color: var(--#{$prefix}-overlay1);
|
||
|
|
color: var(--#{$prefix}-nav-active-color);
|
||
|
|
}
|
||
|
|
|
||
|
|
.exit-btn {
|
||
|
|
@include btn;
|
||
|
|
color: var(--#{$prefix}-text);
|
||
|
|
padding: 11px 11px 11px 11px;
|
||
|
|
border-radius: $border-radius;
|
||
|
|
background-color: var(--#{$prefix}-crust);
|
||
|
|
height: fit-content;
|
||
|
|
width: fit-content;
|
||
|
|
}
|
||
|
|
.exit-btn:hover {
|
||
|
|
background-color: var(--#{$prefix}-surface0);
|
||
|
|
}
|
||
|
|
|
||
|
|
|
||
|
|
$colors: (
|
||
|
|
"green",
|
||
|
|
);
|
||
|
|
|
||
|
|
@each $color in $colors {
|
||
|
|
.btn.#{$color} {
|
||
|
|
background-color: var(--#{$prefix}-#{$color});
|
||
|
|
}
|
||
|
|
}
|
||
|
|
|