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

chore: rename the common shape mixins

Browse source
This commit is contained in:
Kazhnuz 2021-07-28 18:05:39 +02:00
parent 5a49b025e4
commit 15d58223f3
4 changed files with 21 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

15
src/scss/_definitions.scss
View file

@ -108,15 +108,16 @@ $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 button-style($size) { @mixin shape-style($size) {
position: relative;
z-index:1;
overflow: visible;
@include borders(); @include borders();
@include border-radius($btn-radius); @include border-radius($btn-radius);
background-color:transparent; background-color:transparent;
// Biseau
position: relative;
z-index:1;
overflow: visible;
&:before { &:before {
content: " "; content: " ";
position: absolute; position: absolute;
@ -128,3 +129,9 @@ $screen-xxl-min: 1600px;
transform: skewX(-15deg); transform: skewX(-15deg);
} }
} }
@mixin colorize-shape($background-color) {
&:before {
background-color: $background-color;
}
}

16
src/scss/components/_buttons.scss
View file

@ -12,7 +12,7 @@ $button_small: $lineheight_quarter;
@mixin button($size) { @mixin button($size) {
@include button-layout($size); @include button-layout($size);
@include button-style($size); @include shape-style($size);
@include button-hover(); @include button-hover();
font-weight: $fontweight_base; font-weight: $fontweight_base;
} }
@ -50,22 +50,16 @@ $button_small: $lineheight_quarter;
} }
} }
@mixin colorize-button($background-color) {
&:before {
background-color: $background-color;
}
}
@mixin button-fullcontrol($background-color, $hover-color, $text-color) { @mixin button-fullcontrol($background-color, $hover-color, $text-color) {
@include colorize-button($background-color); @include colorize-shape($background-color);
color:$text-color; color:$text-color;
&:visited { &:visited {
@include colorize-button($background-color); @include colorize-shape($background-color);
color:$text-color; color:$text-color;
} }
&, &:visited, &:not(.disabled):not(:disabled) { &, &:visited, &:not(.disabled):not(:disabled) {
&:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & { &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & {
@include colorize-button($hover-color); @include colorize-shape($hover-color);
color:lighten($text-color, 5%); color:lighten($text-color, 5%);
} }
} }
@ -101,7 +95,7 @@ $button_small: $lineheight_quarter;
} }
.menu-label { .menu-label {
@include button-style($button_small); @include shape-style($button_small);
@include button-hover(); @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

@ -50,7 +50,7 @@ $card-smallpad: $lineheight_half;
width:85%; width:85%;
@include button-style($size); @include shape-style($size);
border-radius:0; border-radius:0;
&:first-child { &:first-child {
border-top-left-radius: $card-radius; border-top-left-radius: $card-radius;
@ -74,7 +74,7 @@ $card-smallpad: $lineheight_half;
@mixin card-color($background-color) { @mixin card-color($background-color) {
& .card-header, & .menu-header { & .card-header, & .menu-header {
@include colorize-button($background-color); @include colorize-shape($background-color);
color:getTextColorFromBackground($background-color); color:getTextColorFromBackground($background-color);
} }
} }
@ -125,7 +125,7 @@ $card-smallpad: $lineheight_half;
text-overflow: ellipsis; text-overflow: ellipsis;
overflow:hidden; overflow:hidden;
@include button-style($lineheight_half); @include shape-style($lineheight_half);
@include button-hover(); @include button-hover();
strong { strong {
@ -143,7 +143,7 @@ $card-smallpad: $lineheight_half;
} }
a, a:visited { a, a:visited {
@include button-style($lineheight_half); @include shape-style($lineheight_half);
@include button-hover(); @include button-hover();
@include button-fullcontrol(transparent, darken($color-background-alt, 7.5%), $color-primary); @include button-fullcontrol(transparent, darken($color-background-alt, 7.5%), $color-primary);
} }

2
src/scss/components/_previews.scss
View file

@ -92,7 +92,7 @@ $preview-height: 8*$lineheight;
font-family: $basefont; font-family: $basefont;
font-size: 1rem; font-size: 1rem;
@include card-header($lineheight_half); @include card-header($lineheight_half);
@include colorize-button($color-primary); @include colorize-shape($color-primary);
color:getTextColorFromBackground($color-primary); color:getTextColorFromBackground($color-primary);
font-weight: $fontweight_big; font-weight: $fontweight_big;
margin-top:0px; margin-top:0px;