kazhnuz
/
kazhnuz.css
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

improvement: refactor buttons 

Now buttons is divided into three mixins, the layout, the style and the 
hover
This commit is contained in:
Kazhnuz Klappsthul 2021-07-26 09:10:43 +02:00
parent 9c42bf8321
commit 61e67c8b1f
3 changed files with 35 additions and 25 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
src/scss/_definitions.scss
View File

@ -105,10 +105,14 @@ $screen-xxl-min: 1600px;
border-radius: $border-radius $border-radius $border-radius $border-radius; border-radius: $border-radius $border-radius $border-radius $border-radius;
} }
@mixin biseau($size) { @mixin button-style($size) {
position: relative; position: relative;
z-index:1; z-index:1;
overflow: visible; overflow: visible;
@include borders();
@include border-radius();
background-color:transparent;
&:before { &:before {
content: " "; content: " ";
@ -119,6 +123,5 @@ $screen-xxl-min: 1600px;
bottom:0; bottom:0;
z-index:-1; z-index:-1;
transform: skewX(-15deg); transform: skewX(-15deg);
transition: background-color 0.3s;
} }
} }

45
src/scss/components/_buttons.scss
View File

@ -11,11 +11,13 @@ $button_large: $lineheight;
$button_small: $lineheight_quarter; $button_small: $lineheight_quarter;
@mixin button($size) { @mixin button($size) {
@include button-nobiseau($size); @include button-layout($size);
@include biseau($size); @include button-style($size);
@include button-hover();
font-weight: $fontweight_base;
} }
@mixin button-nobiseau($size) { @mixin button-layout($size) {
padding: $size; padding: $size;
padding-top: $size/3; padding-top: $size/3;
padding-bottom: $size/3; padding-bottom: $size/3;
@ -25,25 +27,27 @@ $button_small: $lineheight_quarter;
//font-size: 4.75mm; //font-size: 4.75mm;
line-height:$lineheight; line-height:$lineheight;
height:auto; height:auto;
@include borders(); }
@include border-radius();
font-weight: $fontweight_base;
background-color:transparent; @mixin button-hover() {
transition: background 0.3s, border .3s, box-shadow .3s, color .3s;
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
text-decoration:none;
background-color:transparent;
}
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & { &:focus {
text-decoration:none; outline: none;
background-color:transparent; box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0);
} &:before {
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none;
}
}
&:focus { &:before {
outline: none; transition: background-color 0.3s;
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0); }
&:before {
box-shadow: $narrow-shadow, $inset-shadow, 0px 0px 0px 2px rgba(0, 0, 0, 0.3);
outline: none;
}
}
} }
@mixin colorize-button($background-color) { @mixin colorize-button($background-color) {
@ -97,7 +101,8 @@ $button_small: $lineheight_quarter;
} }
.menu-label { .menu-label {
@include biseau($button_small); @include button-style($button_small);
@include button-hover();
padding-left: $button_small; padding-left: $button_small;
padding-right: $button_small; padding-right: $button_small;
} }

8
src/scss/components/_cards.scss
View File

@ -35,7 +35,7 @@ $card-smallpad: $lineheight_half;
width:95%; width:95%;
@include biseau($size); @include button-style($size);
h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 { h1, h2, h3, h4, h5, h6, h7, h8, h9, h10 {
font-family:$basefont; font-family:$basefont;
@ -104,7 +104,8 @@ $card-smallpad: $lineheight_half;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow:hidden; overflow:hidden;
@include biseau($lineheight_half); @include button-style($lineheight_half);
@include button-hover();
strong { strong {
font-weight: 900; font-weight: 900;
@ -128,7 +129,8 @@ $card-smallpad: $lineheight_half;
text-decoration:none; text-decoration:none;
color: $color-primary; color: $color-primary;
@include biseau($lineheight_half); @include button-style($lineheight_half);
@include button-hover();
&:before { &:before {
background-color: darken($color-background-alt, 7.5%) background-color: darken($color-background-alt, 7.5%)