-
-
Notifications
You must be signed in to change notification settings - Fork 1.6k
/
containers.scss
113 lines (97 loc) · 1.78 KB
/
containers.scss
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
.container {
position: relative;
padding: 1.5rem 2rem;
> :last-child {
margin-bottom: 0;
}
&::before,
&::after {
position: absolute;
z-index: -1;
content: "";
}
&::before {
top: 0;
right: 0;
bottom: 0;
left: 0;
}
&::after {
top: 2px;
right: 2px;
bottom: 2px;
left: 2px;
border-color: $base-color;
border-style: solid;
border-width: 4px;
border-radius: 4px;
}
@mixin rounded($base, $background) {
border: none;
border-radius: 0;
// prettier-ignore
box-shadow:
0 -4px $background,
0 -8px $base,
4px 0 $background,
4px -4px $base,
8px 0 $base,
0 4px $background,
0 8px $base,
-4px 0 $background,
-4px 4px $base,
-8px 0 $base,
-4px -4px $base,
4px 4px $base;
}
&.is-rounded {
padding: 1rem 1.5rem;
margin: 14px 8px;
&::after {
@include rounded($base-color, $background-color);
}
&.is-dark {
&::after {
@include rounded($background-color, $base-color);
}
&::before {
top: -8px;
right: -8px;
bottom: -8px;
left: -8px;
}
}
}
&.with-title {
display: flex;
flex-direction: column;
justify-content: flex-start;
padding-top: 2rem;
> .title {
position: absolute;
top: 0;
padding: 0 0.5rem;
margin: 0;
font-size: 1rem;
background-color: $background-color;
}
&.is-center {
align-items: center;
}
&.is-right {
align-items: right;
}
}
&.is-dark {
&::before {
background-color: $base-color;
}
&::after {
border-color: #fff;
}
> .title {
color: $background-color;
background-color: $base-color;
}
}
}