philomena/assets/css/elements/_separator.scss
2023-11-23 17:07:49 +01:00

39 lines
861 B
SCSS

@mixin separator-type($type) {
.separator--#{$type} {
border-color: var(--#{$type}-border-color);
&.separator--vertical {
background: var(--#{$type}-border-color);
}
}
.button__group--standalone .separator--#{$type},
.button__group .separator--#{$type} {
&.separator--vertical {
background: var(--#{$type}-color) !important;
}
}
}
.separator {
margin: var(--padding-normal) 0;
}
.separator--thin {
margin: var(--padding-small) 0;
}
.separator--vertical {
width: 1px;
height: inherit;
margin: 0 var(--padding-small);
background: var(--primary-border-color);
}
@include separator-type(primary);
@include separator-type(secondary);
@include separator-type(success);
@include separator-type(warning);
@include separator-type(danger);
@include separator-type(information);
@include separator-type(purple);