158 lines
3.3 KiB
CSS
158 lines
3.3 KiB
CSS
/*
|
|
* Separator
|
|
*/
|
|
|
|
.w-separator {
|
|
clear: both;
|
|
overflow: hidden;
|
|
line-height: 0;
|
|
height: 1.5rem; /* fallback value */
|
|
}
|
|
.w-separator-h {
|
|
display: inline-flex;
|
|
align-items: center;
|
|
height: inherit;
|
|
border-color: inherit !important;
|
|
color: inherit;
|
|
}
|
|
.w-separator-h:before,
|
|
.w-separator-h:after {
|
|
content: '';
|
|
position: absolute;
|
|
top: 50%;
|
|
height: 0;
|
|
width: 200rem;
|
|
border-top-width: 1px;
|
|
border-top-style: solid;
|
|
border-color: inherit;
|
|
}
|
|
.w-separator-h:before {
|
|
right: 100%;
|
|
margin-right: 0.6em;
|
|
}
|
|
.w-separator-h:after {
|
|
left: 100%;
|
|
margin-left: 0.6em;
|
|
}
|
|
.w-separator a,
|
|
.color_alternate .w-separator a {
|
|
color: inherit;
|
|
}
|
|
.w-separator-text {
|
|
line-height: inherit;
|
|
padding: 0.3em 0 !important;
|
|
margin: 0;
|
|
}
|
|
.w-separator[style*="font"] .w-separator-text {
|
|
font-size: inherit;
|
|
}
|
|
.w-separator-text i {
|
|
margin-right: 0.4em;
|
|
}
|
|
|
|
/* LINE WIDTH */
|
|
.w-separator.width_30 {
|
|
width: 30%;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
}
|
|
.w-separator.width_50 {
|
|
width: 50%;
|
|
margin-left: auto !important;
|
|
margin-right: auto !important;
|
|
}
|
|
.w-separator.width_screen {
|
|
overflow: visible;
|
|
}
|
|
|
|
/* LINE STYLE */
|
|
.w-separator.style_dashed .w-separator-h:before,
|
|
.w-separator.style_dashed .w-separator-h:after {
|
|
border-top-style: dashed;
|
|
}
|
|
.w-separator.style_dotted .w-separator-h:before,
|
|
.w-separator.style_dotted .w-separator-h:after {
|
|
border-top-style: dotted;
|
|
}
|
|
.w-separator.style_double .w-separator-h:before,
|
|
.w-separator.style_double .w-separator-h:after {
|
|
border-top-style: double;
|
|
}
|
|
|
|
/* LINE THICKNESS */
|
|
.w-separator.thick_2 .w-separator-h:before,
|
|
.w-separator.thick_2 .w-separator-h:after {
|
|
margin-top: -1px;
|
|
border-top-width: 2px;
|
|
}
|
|
.w-separator.thick_3 .w-separator-h:before,
|
|
.w-separator.thick_3 .w-separator-h:after {
|
|
margin-top: -1px;
|
|
border-top-width: 3px;
|
|
}
|
|
.w-separator.thick_4 .w-separator-h:before,
|
|
.w-separator.thick_4 .w-separator-h:after {
|
|
margin-top: -2px;
|
|
border-top-width: 4px;
|
|
}
|
|
.w-separator.thick_5 .w-separator-h:before,
|
|
.w-separator.thick_5 .w-separator-h:after {
|
|
margin-top: -2px;
|
|
border-top-width: 5px;
|
|
}
|
|
|
|
/* WITH content */
|
|
.w-separator.with_content {
|
|
line-height: 1.3;
|
|
}
|
|
.w-separator:not(.with_content),
|
|
.w-separator.with_content .w-separator-h {
|
|
position: relative;
|
|
}
|
|
.w-separator:not(.with_content) .w-separator-h:before {
|
|
left: -50%;
|
|
right: auto;
|
|
}
|
|
.w-separator:not(.with_content) .w-separator-h:after {
|
|
display: none;
|
|
}
|
|
|
|
/* SIZE small */
|
|
.w-separator.size_small:empty {
|
|
height: 1.5rem;
|
|
}
|
|
.w-separator.size_small.with_line {
|
|
height: 4rem;
|
|
}
|
|
|
|
/* SIZE medium */
|
|
.w-separator.size_medium:empty {
|
|
height: 3rem;
|
|
}
|
|
.w-separator.size_medium.with_line {
|
|
height: 6rem;
|
|
}
|
|
|
|
/* SIZE large */
|
|
.w-separator.size_large:empty {
|
|
height: 4rem;
|
|
}
|
|
.w-separator.size_large.with_line {
|
|
height: 7rem;
|
|
}
|
|
|
|
/* SIZE huge */
|
|
.w-separator.size_huge:empty {
|
|
height: 6rem;
|
|
}
|
|
.w-separator.size_huge.with_line {
|
|
height: 9rem;
|
|
}
|
|
|
|
/* Improvements for color sections */
|
|
.l-section.color_primary .w-separator.color_border,
|
|
.l-section.color_secondary .w-separator.color_border {
|
|
border-color: rgba(255,255,255,0.33);
|
|
color: rgba(255,255,255,0.33);
|
|
}
|