mirror of
https://github.com/kremalicious/portfolio.git
synced 2025-02-14 21:10:41 +01:00
55 lines
1.3 KiB
SCSS
55 lines
1.3 KiB
SCSS
@import 'variables';
|
|
|
|
.button {
|
|
display: block;
|
|
width: 100%;
|
|
color: $brand-cyan;
|
|
text-align: center;
|
|
border-radius: $border-radius;
|
|
padding: $spacer / 4 $spacer / 2;
|
|
transition-property: all;
|
|
background: rgba(#fff, 0.15);
|
|
border: 0.05rem solid rgba($brand-cyan, 0.75);
|
|
font-size: $font-size-small;
|
|
text-transform: uppercase;
|
|
cursor: pointer;
|
|
|
|
@media (min-width: 30rem) {
|
|
display: inline-block;
|
|
width: auto;
|
|
}
|
|
|
|
svg {
|
|
fill: $brand-grey-light;
|
|
margin-right: $spacer / 3;
|
|
transition: 0.2s ease-out;
|
|
margin-bottom: -0.1rem;
|
|
width: $font-size-small;
|
|
height: $font-size-small;
|
|
}
|
|
|
|
&:hover,
|
|
&:focus {
|
|
color: lighten($brand-cyan, 10%);
|
|
border-color: rgba(lighten($brand-cyan, 10%), 0.75);
|
|
transform: translate3d(0, -0.1rem, 0);
|
|
box-shadow: 0 6px 10px rgba($brand-main, 0.1),
|
|
0 10px 25px rgba($brand-main, 0.05);
|
|
}
|
|
|
|
&:active {
|
|
transition: none;
|
|
background: rgba(#fff, 0.15);
|
|
}
|
|
|
|
:global(.dark) & {
|
|
background: darken($body-background-color--dark, 1%);
|
|
|
|
&:hover,
|
|
&:focus {
|
|
box-shadow: 0 6px 10px rgba(darken($brand-main, 20%), 0.1),
|
|
0 10px 25px rgba(darken($brand-main, 20%), 0.2);
|
|
}
|
|
}
|
|
}
|