73 lines
1.4 KiB
SCSS
73 lines
1.4 KiB
SCSS
@import '~payload/scss/styles';
|
|
|
|
.btn {
|
|
@extend %uppercase-label;
|
|
background-color: $primary;
|
|
border: 1px solid $primary;
|
|
padding: rem(.5) rem(.75);
|
|
line-height: rem(.5);
|
|
border-radius: $radius-sm;
|
|
margin-top: rem(1);
|
|
margin-bottom: rem(1);
|
|
cursor: pointer;
|
|
|
|
&.btn-icon {
|
|
width: rem(1.5);
|
|
height: rem(1.5);
|
|
|
|
svg {
|
|
width: rem(.75);
|
|
height: rem(.75);
|
|
}
|
|
}
|
|
|
|
&.btn-secondary {
|
|
border: $stroke-width solid $primary;
|
|
color: $primary;
|
|
background: none;
|
|
|
|
&.btn-icon {
|
|
@include color-svg($primary);
|
|
padding: 0;
|
|
}
|
|
|
|
&:hover {
|
|
background: $primary;
|
|
border: $stroke-width solid $primary;
|
|
color: $black;
|
|
|
|
&.btn-icon {
|
|
@include color-svg($black);
|
|
}
|
|
}
|
|
}
|
|
|
|
&.btn-small {
|
|
padding: rem(0) rem(.25) rem(.04);
|
|
border-radius: 3px;
|
|
font-size: rem(.3);
|
|
}
|
|
|
|
&.btn-text {
|
|
background: none;
|
|
padding: 0;
|
|
border-radius: 0;
|
|
border-bottom: 1px solid $black;
|
|
|
|
&:hover {
|
|
color: $primary;
|
|
border-bottom-color: $primary;
|
|
}
|
|
}
|
|
|
|
&:hover {
|
|
border: 1px solid $primary;
|
|
background: $primary;
|
|
color: $black;
|
|
}
|
|
|
|
&:focus, &:active {
|
|
outline: none;
|
|
}
|
|
}
|