codecheck

1
// core
2
.p-divider-horizontal {
3
    display: flex;
4
    width: 100%;
5
    position: relative;
6
    align-items: center;
7
}
8

9
.p-divider-horizontal:before {
10
    position: absolute;
11
    display: block;
12
    top: 50%;
13
    left: 0;
14
    width: 100%;
15
    content: '';
16
}
17

18
.p-divider-content {
19
    z-index: 1;
20
}
21

22
.p-divider-vertical {
23
    min-height: 100%;
24
    margin: 0 1rem;
25
    display: flex;
26
    position: relative;
27
    justify-content: center;
28
}
29

30
.p-divider-vertical:before {
31
    position: absolute;
32
    display: block;
33
    top: 0;
34
    left: 50%;
35
    height: 100%;
36
    content: '';
37
}
38

39
.p-divider {
40
    &.p-divider-solid.p-divider-horizontal:before {
41
        border-top-style: solid;
42
    }
43
    
44
    &.p-divider-solid.p-divider-vertical:before {
45
        border-left-style: solid;
46
    }
47
    
48
    &.p-divider-dashed.p-divider-horizontal:before {
49
        border-top-style: dashed;
50
    }
51
    
52
    &.p-divider-dashed.p-divider-vertical:before {
53
        border-left-style: dashed;
54
    }
55
    
56
    &.p-divider-dotted.p-divider-horizontal:before {
57
        border-top-style: dotted;
58
    }
59
    
60
    &.p-divider-dotted.p-divider-vertical:before {
61
        border-left-style: dotted;
62
    }
63
}
64

65
// theme
66
.p-divider {
67
    .p-divider-content {
68
        background-color: $panelContentBg;
69
    }
70

71
    &.p-divider-horizontal {
72
        margin: $dividerHorizontalMargin;
73
        padding: $dividerHorizontalPadding;
74

75
        &:before {
76
            border-top: $dividerSize solid $dividerColor;
77
        }
78

79
        .p-divider-content {
80
            padding: 0 $inlineSpacing;
81
        }
82
    }
83

84
    &.p-divider-vertical {
85
        margin: $dividerVerticalMargin;
86
        padding: $dividerVerticalPadding;
87

88
        &:before {
89
            border-left: $dividerSize solid $dividerColor;
90
        }
91

92
        .p-divider-content {
93
            padding: $inlineSpacing 0;
94
        }
95
    }
96
}