diff --git a/src/scss/_definitions.scss b/src/scss/_definitions.scss index 79741c4..bd678c2 100644 --- a/src/scss/_definitions.scss +++ b/src/scss/_definitions.scss @@ -108,15 +108,16 @@ $screen-xxl-min: 1600px; border-radius: $border-radius $border-radius $border-radius $border-radius; } -@mixin button-style($size) { - position: relative; - z-index:1; - overflow: visible; +@mixin shape-style($size) { @include borders(); @include border-radius($btn-radius); background-color:transparent; + // Biseau + position: relative; + z-index:1; + overflow: visible; &:before { content: " "; position: absolute; @@ -128,3 +129,9 @@ $screen-xxl-min: 1600px; transform: skewX(-15deg); } } + +@mixin colorize-shape($background-color) { + &:before { + background-color: $background-color; + } +} diff --git a/src/scss/components/_buttons.scss b/src/scss/components/_buttons.scss index 42beab5..eb23074 100644 --- a/src/scss/components/_buttons.scss +++ b/src/scss/components/_buttons.scss @@ -12,7 +12,7 @@ $button_small: $lineheight_quarter; @mixin button($size) { @include button-layout($size); - @include button-style($size); + @include shape-style($size); @include button-hover(); 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) { - @include colorize-button($background-color); + @include colorize-shape($background-color); color:$text-color; &:visited { - @include colorize-button($background-color); + @include colorize-shape($background-color); color:$text-color; } &, &:visited, &:not(.disabled):not(:disabled) { &:hover, &:active, &:focus, a:hover > &, a:active > &, a:focus > & { - @include colorize-button($hover-color); + @include colorize-shape($hover-color); color:lighten($text-color, 5%); } } @@ -101,7 +95,7 @@ $button_small: $lineheight_quarter; } .menu-label { - @include button-style($button_small); + @include shape-style($button_small); @include button-hover(); padding-left: $button_small; padding-right: $button_small; diff --git a/src/scss/components/_cards.scss b/src/scss/components/_cards.scss index e054ffe..efe87c6 100644 --- a/src/scss/components/_cards.scss +++ b/src/scss/components/_cards.scss @@ -50,7 +50,7 @@ $card-smallpad: $lineheight_half; width:85%; - @include button-style($size); + @include shape-style($size); border-radius:0; &:first-child { border-top-left-radius: $card-radius; @@ -74,7 +74,7 @@ $card-smallpad: $lineheight_half; @mixin card-color($background-color) { & .card-header, & .menu-header { - @include colorize-button($background-color); + @include colorize-shape($background-color); color:getTextColorFromBackground($background-color); } } @@ -125,7 +125,7 @@ $card-smallpad: $lineheight_half; text-overflow: ellipsis; overflow:hidden; - @include button-style($lineheight_half); + @include shape-style($lineheight_half); @include button-hover(); strong { @@ -143,7 +143,7 @@ $card-smallpad: $lineheight_half; } a, a:visited { - @include button-style($lineheight_half); + @include shape-style($lineheight_half); @include button-hover(); @include button-fullcontrol(transparent, darken($color-background-alt, 7.5%), $color-primary); } diff --git a/src/scss/components/_previews.scss b/src/scss/components/_previews.scss index 9d4259d..10c49bd 100644 --- a/src/scss/components/_previews.scss +++ b/src/scss/components/_previews.scss @@ -92,7 +92,7 @@ $preview-height: 8*$lineheight; font-family: $basefont; font-size: 1rem; @include card-header($lineheight_half); - @include colorize-button($color-primary); + @include colorize-shape($color-primary); color:getTextColorFromBackground($color-primary); font-weight: $fontweight_big; margin-top:0px;