1 | @charset "UTF-8";
|
2 |
|
3 | @import "../core/index-noreset.scss";
|
4 |
|
5 | @import "scss/mixin";
|
6 | @import "scss/variable";
|
7 |
|
8 |
|
9 |
|
10 | #{$divider-prefix} {
|
11 | @include box-sizing;
|
12 | margin: 0;
|
13 | padding: 0;
|
14 | font-size: 14px;
|
15 | line-height: 1.5;
|
16 | list-style: none;
|
17 | font-variant: tabular-nums;
|
18 | font-feature-settings: 'tnum';
|
19 | background: $divider-hoz-color;
|
20 | border-collapse: separate;
|
21 |
|
22 | &-dashed {
|
23 | background: none;
|
24 | border-color: $divider-hoz-color;
|
25 | border-style: dashed;
|
26 | border-width: $divider-hoz-size 0 0;
|
27 | }
|
28 |
|
29 | &-hoz {
|
30 | display: block;
|
31 | clear: both;
|
32 | width: 100%;
|
33 | min-width: 100%;
|
34 | height: $divider-hoz-size;
|
35 | margin: $divider-hoz-marginTop 0;
|
36 | }
|
37 |
|
38 | &-ver {
|
39 | position: relative;
|
40 | top: -.06em;
|
41 | display: inline-block;
|
42 | width: $divider-ver-size;
|
43 | background: $divider-ver-color;
|
44 | height: .9em;
|
45 | margin: 0 $divider-ver-marginLeft;
|
46 | vertical-align: middle;
|
47 | }
|
48 |
|
49 |
|
50 | &-hoz#{$divider-prefix}-with-text-center,
|
51 | &-hoz#{$divider-prefix}-with-text-left,
|
52 | &-hoz#{$divider-prefix}-with-text-right {
|
53 | display: table;
|
54 | margin: $divider-hoz-text-marginTop 0;
|
55 | color: $divider-hoz-text-color;
|
56 | font-weight: $divider-hoz-text-weight;
|
57 | font-size: $divider-hoz-text-size;
|
58 | white-space: nowrap;
|
59 | text-align: center;
|
60 | background: transparent;
|
61 | &::before,
|
62 | &::after {
|
63 | top: 50%;
|
64 | display: table-cell;
|
65 | width: 50%;
|
66 | border-top: $divider-hoz-size solid $divider-hoz-color;
|
67 | transform: translateY(50%);
|
68 | content: '';
|
69 | }
|
70 |
|
71 | &#{$divider-prefix}-dashed {
|
72 | border-top: 0;
|
73 | &::before,
|
74 | &::after {
|
75 | border-style: dashed none none;
|
76 | }
|
77 | }
|
78 | }
|
79 |
|
80 | &-hoz#{$divider-prefix}-with-text-left,
|
81 | &-hoz#{$divider-prefix}-with-text-right {
|
82 | #{$divider-prefix}-inner-text {
|
83 | display: inline-block;
|
84 | padding: 0 $divider-hoz-text-left-paddingLeft;
|
85 | }
|
86 | }
|
87 |
|
88 | &-hoz#{$divider-prefix}-with-text-left {
|
89 | &::before {
|
90 | top: 50%;
|
91 | width: 5%;
|
92 | }
|
93 | &::after {
|
94 | top: 50%;
|
95 | width: 95%;
|
96 | }
|
97 | }
|
98 |
|
99 | &-hoz#{$divider-prefix}-with-text-right {
|
100 | &::before {
|
101 | top: 50%;
|
102 | width: 95%;
|
103 | }
|
104 | &::after {
|
105 | top: 50%;
|
106 | width: 5%;
|
107 | }
|
108 | }
|
109 |
|
110 | &-inner-text {
|
111 | display: inline-block;
|
112 | padding: 0 $divider-hoz-text-center-paddingLeft;
|
113 | }
|
114 |
|
115 | &-dashed {
|
116 | background: none;
|
117 | border-color: $divider-hoz-color;
|
118 | border-style: dashed;
|
119 | border-width: $divider-hoz-size 0 0;
|
120 | &#{$divider-prefix}-ver {
|
121 | border-width: 0 0 0 $divider-ver-size;
|
122 | }
|
123 | }
|
124 | }
|