mirror of
https://github.com/neocities/neocities.git
synced 2025-04-24 17:22:35 +02:00
116 lines
2.6 KiB
SCSS
116 lines
2.6 KiB
SCSS
// ----------------------------------------------------------------
|
|
// Basic Styling for Buttons
|
|
// ----------------------------------------------------------------
|
|
.btn, %btn{
|
|
background:$c-Dark;
|
|
@include border-radius($radius*6);
|
|
@include box-shadow($bs-1);
|
|
color:$c-Lighter!important;
|
|
cursor:pointer;
|
|
display:inline-block;
|
|
font:{family:$arial; size:$base}
|
|
line-height:1;
|
|
padding:$spacing*2 $spacing*5;
|
|
text-align:center;
|
|
text-decoration:none!important; // set to !important so that if used inside of a .nav, no decoration doesn't get overridden
|
|
text-shadow:0 1px 1px rgba(0,0,0,.4);
|
|
@include vendor(transition, all .25s ease-in-out 0s);
|
|
vertical-align:middle;
|
|
-webkit-appearance:none;
|
|
|
|
&.btn-Pad{
|
|
padding:$spacing*2 $spacing*4
|
|
}
|
|
|
|
&:hover, &:active{
|
|
background:$c-Darker;
|
|
color:$c-Lighter
|
|
}
|
|
|
|
&:visited{color:$c-Lighter;}
|
|
}
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// Sizing
|
|
// ----------------------------------------------------------------
|
|
.btn-Small{
|
|
@extend %btn;
|
|
font-size:$tiny;
|
|
padding:$spacing $spacing*2;
|
|
|
|
&.btn-Pad{
|
|
padding:$spacing $spacing*3
|
|
}
|
|
|
|
}
|
|
.btn-Large{
|
|
@extend %btn;
|
|
font-size:$gamma;
|
|
padding:$spacing*3;
|
|
|
|
&.btn-Pad{
|
|
padding:$spacing*3 $spacing*5
|
|
}
|
|
|
|
}
|
|
.btn-XLarge{
|
|
@extend %btn;
|
|
font-size:$beta;
|
|
padding:$spacing*3 $spacing*4;
|
|
|
|
&.btn-Pad{
|
|
padding:$spacing*4 $spacing*6
|
|
}
|
|
|
|
}
|
|
|
|
.btn-Wide{@extend %btn; display:block}
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// Coloring
|
|
// ----------------------------------------------------------------
|
|
.btn-Action{@extend %btn;
|
|
background:$c-Btn-1;
|
|
@include linear-gradient(top, #e93250, #b11f36);
|
|
|
|
&:hover{
|
|
@include linear-gradient(top, #d51c3a, #841526);
|
|
}
|
|
|
|
.fa {
|
|
margin-right:5px;
|
|
}
|
|
}
|
|
|
|
.btn-Action-2{@extend %btn; background:$c-Btn-2;
|
|
&:hover{background:darken($c-Btn-2, 15%)}
|
|
}
|
|
|
|
.btn-Action-3{@extend %btn; background:$c-Btn-3;
|
|
&:hover{background:darken($c-Btn-3, 15%)}
|
|
}
|
|
|
|
.btn-Neg,
|
|
.btn-Neg:hover{
|
|
@extend %btn;
|
|
background:$c-Btn-Neg;
|
|
color:$c-Lighter;
|
|
}
|
|
|
|
.btn-Disable{
|
|
@extend %btn;
|
|
background:$c-Disabled;
|
|
border:1px solid #eee;
|
|
color:$c-Dark;
|
|
cursor:default;
|
|
&:hover, &:visited{@extend .btn-Disable}
|
|
}
|
|
|
|
|
|
// ----------------------------------------------------------------
|
|
// Additional Styling
|
|
// ----------------------------------------------------------------
|
|
.btn-Square{@extend %btn; @include border-radius(0)}
|
|
.btn-Round{@extend %btn; @include border-radius($radius*4)}
|