UNPKG

2.47 kBSCSSView Raw
1// Foundation for Sites by ZURB
2// foundation.zurb.com
3// Licensed under MIT Open Source
4
5////
6/// @group prototype-separator
7////
8
9/// Responsive breakpoints for separator.
10/// @type Boolean
11$prototype-separator-breakpoints: $global-prototype-breakpoints !default;
12
13/// Default alignment of a separator.
14/// @type String
15$prototype-separator-align: center !default;
16
17/// Height of a separator.
18/// @type Number
19$prototype-separator-height: rem-calc(2) !default;
20
21/// Width of a separator.
22/// @type Number
23$prototype-separator-width: 3rem !default;
24
25/// Default color of a separator.
26/// @type Color
27$prototype-separator-background: $primary-color !default;
28
29/// Top Margin of a separator.
30/// @type Number
31$prototype-separator-margin-top: $global-margin !default;
32
33/// Title separator Utility, mostly used to style the main heading of a section
34/// @param {String} $align [$prototype-separator-align] - separator Alignment
35/// @param {Number} $height [$prototype-separator-height] - Width
36/// @param {Number} $width [$prototype-separator-width] - Height
37/// @param {Color} $background [$prototype-separator-background] - Background
38/// @param {Number} $top [$prototype-separator-margin-top] - Margin Top
39@mixin separator (
40 $align: $prototype-separator-align,
41 $height: $prototype-separator-height,
42 $width: $prototype-separator-width,
43 $background: $prototype-separator-background,
44 $top: $prototype-separator-margin-top
45) {
46 text-align: $align !important;
47 @include clearfix;
48
49 &::after {
50 @include position(relative);
51 width: $width;
52 border-bottom: $height solid $background;
53 margin: $top auto 0;
54
55 @if $align == left {
56 margin-left: 0 !important;
57 }
58
59 @if $align == right {
60 margin-right: 0 !important;
61 }
62 }
63}
64
65@mixin foundation-prototype-separator {
66 .separator-center {
67 @include separator(center);
68 }
69
70 .separator-left {
71 @include separator(left);
72 }
73
74 .separator-right {
75 @include separator(right);
76 }
77
78 @if ($prototype-separator-breakpoints) {
79 // Loop through Responsive Breakpoints
80 @each $size in $breakpoint-classes {
81 @include breakpoint($size) {
82 @if $size != $-zf-zero-breakpoint {
83 .#{$size}-separator-center {
84 @include separator(center);
85 }
86 .#{$size}-separator-left {
87 @include separator(left);
88 }
89 .#{$size}-separator-right {
90 @include separator(right);
91 }
92 }
93 }
94 }
95 }
96}