105 lines
2.0 KiB
SCSS
105 lines
2.0 KiB
SCSS
.Button {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: rem(8px) rem(10px);
|
|
border-radius: rem(16px);
|
|
min-height: rem(40px);
|
|
|
|
font-family: $font-roboto;
|
|
font-weight: $font-regular;
|
|
font-size: rem(16px);
|
|
line-height: 100%;
|
|
|
|
transition: all 0.15s linear;
|
|
white-space: nowrap;
|
|
width: max-content;
|
|
|
|
@include ifdesktop{
|
|
font-size: rem(20px);
|
|
border-radius: rem(16px);
|
|
padding: rem(4px) rem(24px);
|
|
min-height: rem(48px);
|
|
}
|
|
|
|
&_fullWidth {
|
|
width: 100%;
|
|
}
|
|
|
|
svg {
|
|
width: rem(18px);
|
|
height: rem(18px);
|
|
//fill: var(--text-primary);
|
|
|
|
margin-right: rem(18px);
|
|
}
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
box-shadow: 1px 1px 1px 0px $color-darkgray;
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: inset 1px 1px 2px 0px $color-darkgray;
|
|
}
|
|
|
|
&:hover svg {
|
|
fill: var(--white);
|
|
}
|
|
|
|
&_default {
|
|
background: $color-green;
|
|
color: $color-white;
|
|
}
|
|
|
|
&_green {
|
|
background: $color-green;
|
|
color: $color-white;
|
|
}
|
|
|
|
&_ghost {
|
|
background: transparent;
|
|
color: $color-white;
|
|
border: 1px solid $color-white;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
box-shadow: 0 0 0 0.2rem rgb(76 175 80 / 50%);
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 0 0 0.2rem rgb(76 175 80 / 50%);
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
&:hover svg {
|
|
fill: var(--white);
|
|
}
|
|
}
|
|
|
|
&_white {
|
|
background: $color-white;
|
|
color: $color-green;
|
|
border: 1px solid $color-green;
|
|
|
|
&:hover {
|
|
cursor: pointer;
|
|
box-shadow: 0 0 0 0.2rem rgb(76 175 80 / 50%);
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
&:active {
|
|
box-shadow: 0 0 0 0.2rem rgb(76 175 80 / 50%);
|
|
transition: border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
|
|
}
|
|
|
|
&:hover svg {
|
|
fill: var(--white);
|
|
}
|
|
}
|
|
|
|
&_disabled {
|
|
cursor: not-allowed;
|
|
}
|
|
} |