158 lines
3.4 KiB
SCSS
158 lines
3.4 KiB
SCSS
.funkwhale {
|
|
&.button {
|
|
background-color: var(--fw-bg-color);
|
|
color: var(--fw-text-color);
|
|
border: 1px solid var(--fw-bg-color);
|
|
|
|
@include light-theme {
|
|
&.is-secondary.is-outline {
|
|
--fw-bg-color: var(--fw-gray-600);
|
|
--fw-text-color: var(--fw-gray-700);
|
|
|
|
&[disabled] {
|
|
--fw-bg-color: var(--fw-gray-600) !important;
|
|
--fw-text-color: var(--fw-gray-600) !important;
|
|
}
|
|
|
|
&.is-hovered,
|
|
&:hover {
|
|
--fw-bg-color: var(--fw-gray-700) !important;
|
|
--fw-text-color: var(--fw-gray-800) !important;
|
|
}
|
|
|
|
&.is-active,
|
|
&:active {
|
|
--fw-text-color: var(--fw-red-010) !important;
|
|
border: 1px solid var(--fw-gray-600) !important;
|
|
}
|
|
}
|
|
|
|
&.is-outline {
|
|
&:not(:active):not(.is-active) {
|
|
background-color: transparent !important;
|
|
--fw-text-color:--fw-gray-400;
|
|
}
|
|
}
|
|
|
|
&.is-ghost {
|
|
&:not(:active):not(.is-active):not(:hover):not(.is-hovered) {
|
|
background-color: transparent !important;
|
|
border-color: transparent !important;
|
|
--fw-text-color:--fw-gray-400;
|
|
}
|
|
}
|
|
}
|
|
|
|
@include dark-theme {
|
|
&.is-secondary.is-outline {
|
|
--fw-bg-color: var(--fw-gray-500);
|
|
--fw-text-color: var(--fw-gray-400);
|
|
|
|
&[disabled] {
|
|
--fw-bg-color: var(--fw-gray-600) !important;
|
|
--fw-text-color: var(--fw-gray-700) !important;
|
|
}
|
|
|
|
&.is-hovered,
|
|
&:hover {
|
|
--fw-bg-color: var(--fw-gray-600) !important;
|
|
--fw-text-color: var(--fw-gray-500) !important;
|
|
}
|
|
|
|
&.is-active,
|
|
&:active {
|
|
--fw-text-color: var(--fw-red-010) !important;
|
|
--fw-bg-color: var(--fw-gray-700) !important;
|
|
border: 1px solid var(--fw-gray-600) !important;
|
|
}
|
|
}
|
|
|
|
&.is-outline {
|
|
&:not(:active):not(.is-active) {
|
|
background-color: transparent !important;
|
|
}
|
|
}
|
|
|
|
&.is-ghost {
|
|
&:not(:active):not(.is-active):not(:hover):not(.is-hovered) {
|
|
background-color: transparent !important;
|
|
border-color: transparent !important;
|
|
}
|
|
}
|
|
}
|
|
|
|
@if $docs {
|
|
color: var(--fw-text-color) !important;
|
|
}
|
|
|
|
position: relative;
|
|
display: inline-flex;
|
|
align-items: center;
|
|
white-space: nowrap;
|
|
|
|
font-family: $font-main;
|
|
font-weight: 900;
|
|
font-size: 0.875em;
|
|
|
|
line-height: 1em;
|
|
|
|
padding: 0.642857142857em;
|
|
|
|
border-radius: var(--fw-border-radius);
|
|
margin: 0 0.5ch;
|
|
|
|
transform: translateX(var(--fw-translate-x)) translateY(var(--fw-translate-y)) scale(var(--fw-scale));
|
|
transition: all .2s ease;
|
|
|
|
|
|
&.is-aligned-center {
|
|
justify-content: center;
|
|
}
|
|
|
|
&.is-aligned-left {
|
|
justify-content: flex-start;
|
|
}
|
|
|
|
&.is-aligned-right {
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
&.is-shadow {
|
|
box-shadow: 0px 2px 4px 0px rgba(0, 0, 0, 0.2);
|
|
}
|
|
|
|
&:not(.icon-only):not(.is-auto) {
|
|
min-width: 8.5rem;
|
|
}
|
|
|
|
&.is-full {
|
|
display: block;
|
|
}
|
|
|
|
&.is-round {
|
|
border-radius: 100vh;
|
|
}
|
|
|
|
&[disabled] {
|
|
font-weight: normal;
|
|
pointer-events: none;
|
|
}
|
|
|
|
&.is-loading {
|
|
@extend .is-active;
|
|
|
|
> span {
|
|
opacity: 0;
|
|
}
|
|
}
|
|
|
|
i.bi {
|
|
font-size: 1.2rem;
|
|
}
|
|
|
|
i.bi + span:not(:empty) {
|
|
margin-left: 1ch;
|
|
}
|
|
}
|
|
}
|