fix: make sure that transparent stuff can't have borders

This commit is contained in:
Kazhnuz Klappsthul 2021-07-28 18:23:14 +02:00
parent 67ab9029ed
commit c3018645a8
3 changed files with 13 additions and 1 deletions

View File

@ -104,6 +104,12 @@ $screen-xxl-min: 1600px;
border: $border-size solid rgba(0, 0, 0, 0.3) border: $border-size solid rgba(0, 0, 0, 0.3)
} }
@mixin prefer-no-borders() {
&:not(:hover) {
border-color:transparent;
}
}
@mixin border-radius($border-radius) { @mixin border-radius($border-radius) {
border-radius: $border-radius $border-radius $border-radius $border-radius; border-radius: $border-radius $border-radius $border-radius $border-radius;
} }

View File

@ -105,12 +105,14 @@ $button_small: $lineheight_quarter;
.btn-navbar { .btn-navbar {
@include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-font-light); @include button-fullcontrol(transparent, rgba(0,0,0,0.1), $color-font-light);
@include prefer-no-borders();
padding-left: $button_small; padding-left: $button_small;
padding-right: $button_small; padding-right: $button_small;
} }
.btn-readmore { .btn-readmore {
@include button-fullcontrol(transparent, darken($color-background-alt, 7.5%), $color-primary); @include button-fullcontrol(transparent, darken($color-background-alt, 7.5%), $color-primary);
@include prefer-no-borders();
} }
// BUTTONS GROUPS // BUTTONS GROUPS
@ -168,7 +170,10 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
.btn, a.btn, .btn.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label { .btn, a.btn, .btn.btn, .badge, .chip, a.chip, a.badge, .label, a.label, label.label {
@each $name, $color in list-colors() { @each $name, $color in list-colors() {
&-#{$name} { @include button-color(get-color($name)); } &-#{$name} {
@include button-color(get-color($name));
@include borders();
}
} }
&-link { &-link {
@include button-color(transparent); @include button-color(transparent);

View File

@ -127,6 +127,7 @@ $card-smallpad: $lineheight_half;
@include shape-style($lineheight_half); @include shape-style($lineheight_half);
@include button-hover(); @include button-hover();
@include prefer-no-borders();
strong { strong {
font-weight: 900; font-weight: 900;