121 lines
2.2 KiB
SCSS
121 lines
2.2 KiB
SCSS
// Divider
|
|
// *******************************************************************************
|
|
|
|
@import '../../scss/_custom-variables/libs';
|
|
|
|
.divider {
|
|
display: block;
|
|
text-align: center;
|
|
margin: $divider-margin-y $divider-margin-x;
|
|
overflow: hidden;
|
|
white-space: nowrap;
|
|
|
|
.divider-text {
|
|
position: relative;
|
|
display: inline-block;
|
|
font-size: $divider-font-size;
|
|
color: $divider-text-color;
|
|
padding: $divider-text-padding-y $divider-text-padding-x;
|
|
|
|
i {
|
|
font-size: $divider-icon-size;
|
|
}
|
|
|
|
&:before,
|
|
&:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
width: 100vw;
|
|
border-top: 1px solid $divider-color;
|
|
}
|
|
|
|
&:before {
|
|
right: 100%;
|
|
}
|
|
|
|
&:after {
|
|
left: 100%;
|
|
}
|
|
}
|
|
&.text-start {
|
|
.divider-text {
|
|
padding-left: 0;
|
|
}
|
|
}
|
|
&.text-end {
|
|
.divider-text {
|
|
padding-right: 0;
|
|
}
|
|
}
|
|
&.text-start-center {
|
|
.divider-text {
|
|
left: -25%;
|
|
}
|
|
}
|
|
&.text-end-center {
|
|
.divider-text {
|
|
right: -25%;
|
|
}
|
|
}
|
|
// Dotted Bordered Divider
|
|
&.divider-dotted {
|
|
.divider-text {
|
|
&:before,
|
|
&:after {
|
|
border-style: dotted;
|
|
border-width: 0 1px 1px;
|
|
border-color: $divider-color;
|
|
}
|
|
}
|
|
}
|
|
// Dashed Bordered Divider
|
|
&.divider-dashed {
|
|
.divider-text {
|
|
&:before,
|
|
&:after {
|
|
border-style: dashed;
|
|
border-width: 0 1px 1px;
|
|
border-color: $divider-color;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// RTL
|
|
@include rtl-only {
|
|
.divider {
|
|
&.text-start-center {
|
|
.divider-text {
|
|
right: -25%;
|
|
left: auto;
|
|
}
|
|
}
|
|
&.text-end-center {
|
|
.divider-text {
|
|
left: -25%;
|
|
right: auto;
|
|
}
|
|
}
|
|
&.text-start {
|
|
.divider-text {
|
|
padding-right: 0;
|
|
padding-left: $divider-text-padding-x;
|
|
}
|
|
}
|
|
&.text-end {
|
|
.divider-text {
|
|
padding-left: 0;
|
|
padding-right: $divider-text-padding-x;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// For Contextual Colors
|
|
@each $color, $value in $theme-colors {
|
|
@if $color !=primary and $color !=light {
|
|
@include template-text-divider-variant('.divider.divider-#{$color}', $value);
|
|
}
|
|
}
|