70 lines
1.2 KiB
SCSS
70 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-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;
|
|
}
|
|
}
|
|
|
|
$button_sizes: (
|
|
"btn",
|
|
"btn-sm",
|
|
);
|
|
|
|
@each $s in $button_sizes {
|
|
.#{$s}.invert {
|
|
color: var(--#{$prefix}-base) !important;
|
|
}
|
|
.#{$s}.invert:hover {
|
|
color: var(--#{$prefix}-text) !important;
|
|
}
|
|
}
|
|
|
|
|
|
.borderless-btn {
|
|
@include btn;
|
|
color: var(--#{$prefix}-text);
|
|
background-color: var(--#{$prefix}-surface1);
|
|
}
|
|
.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);
|
|
}
|
|
|