Files
lucent-laravel/front/sass/_button.scss
T
2024-08-17 19:23:19 +03:00

90 lines
1.3 KiB
SCSS

.button{
border-radius: 12px;
background: var(--p20);
padding: 3px 10px;
cursor: pointer;
border: 0px solid var(--p30);
font-size: 14px;
min-height: 27px;
display: flex;
align-items: center;
gap: 4px;
color: var(--text);
&:focus {
}
&:hover {
background: var(--p30);
}
&:active {
background: var(--p50)!important;
box-shadow: none;
}
&.active {
background: var(--p30);
}
&.secondary{
background: red;
}
&.primary{
background: var(--p70);
color: var(--p10);
&:hover {
background: var(--p90);
}
}
&[disabled] {
pointer-events: none;
opacity: .7;
color: var(--text);
}
}
.upload-button{
padding: 0;
border: none;
label{
font-size: 14px;
line-height: 14px;
font-weight: normal;
background: var(--p80)!important;
color: var(--p10);
}
}
.button-text{
border: none;
padding: 0;
background: transparent;
cursor: pointer;
}
.spinner-border {
width: 12px;
height: 12px;
border: 2px solid var(--p10);
border-bottom-color: var(--p30);
border-radius: 50%;
display: inline-block;
box-sizing: border-box;
animation: rotation 1s linear infinite;
}
@keyframes rotation {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(360deg);
}
}