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

feat: prepare breadcrumb

Browse source
This commit is contained in:
Kazhnuz 2021-07-28 19:45:35 +02:00
parent a5f67de09b
commit 2580d191ad
1 changed files with 34 additions and 12 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

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

@ -9,6 +9,7 @@ $color-button-dark: get-color("dark");
$button_large: $lineheight; $button_large: $lineheight;
$button_small: $lineheight_quarter; $button_small: $lineheight_quarter;
$breadcrumb_margin: $button-large/2.5;
@mixin button($size) { @mixin button($size) {
@include button-layout($size); @include button-layout($size);
@ -124,13 +125,24 @@ $grouped-test: $button-large/1.5 - 0.05rem ;
} }
.btn-group { .btn-group {
padding: 0px; & > .btn {
background-color:transparent; @include border-radius($btn-radius);
margin-bottom: 1.33em; margin:0 $breadcrumb_margin 0 $breadcrumb_margin!important;
} }
.btn-group .btn { &:not(:first-child) > .btn {
margin:0 $grouped-test 0 $grouped-test!important; border-top-left-radius: 0;
border-bottom-left-radius:0;
&:before {
content: " "!important;
border-left:1px solid rgba(0,0,0,0.2);
}
}
&:not(:last-child) > .btn {
border-top-right-radius: 0;
border-bottom-right-radius:0;
}
} }
/* ------------------ BREADCRUMB ------------------- */ /* ------------------ BREADCRUMB ------------------- */
@ -144,6 +156,7 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
.breadcrumb li.breadcrumb-item { .breadcrumb li.breadcrumb-item {
padding:0; padding:0;
margin:0!important;
&:before { &:before {
display:none; display:none;
} }
@ -152,18 +165,27 @@ ul.breadcrumb, ol.breadcrumb, .breadcrumb {
display:inline-block; display:inline-block;
@include button($button-large); @include button($button-large);
@include button-fullcontrol($color-background-alt, accentuate($color-background-alt), get-color("dark2")); @include button-fullcontrol($color-background-alt, accentuate($color-background-alt), get-color("dark2"));
margin:0 $button-large/2.5 0 $button-large/2.5; margin:0 $breadcrumb_margin 0 $breadcrumb_margin;
&:before {
content: " "!important;
border-right:1px solid rgba(0,0,0,0.2);
}
&.active { &.active {
@include button-fullcontrol($color-primary, $color-primary, $color-font-light); @include button-fullcontrol($color-primary, $color-primary, $color-font-light);
} }
} }
&:not(:first-child) a, &:not(:first-child) > span {
border-top-left-radius: 0;
border-bottom-left-radius:0;
&:before {
content: " "!important;
border-left:1px solid rgba(0,0,0,0.2);
}
}
&:not(:last-child) a, &:not(:last-child) > span {
border-top-right-radius: 0;
border-bottom-right-radius:0;
}
} }
// COLORIZE BUTTONS // COLORIZE BUTTONS