Diff: STRATO-apps/wordpress_03/app/wp-content/themes/blocksy/static/sass/backend/options/ct-layers.scss
Keine Baseline-Datei – Diff nur gegen leer.
1
-
1
+
.ct-layers {
2
+
margin: 0;
3
+
padding: 0;
4
+
list-style: none;
5
+
6
+
&:not(:empty) + button {
7
+
margin-top: 20px;
8
+
}
9
+
}
10
+
11
+
.ct-layer {
12
+
list-style: none;
13
+
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04);
14
+
z-index: 9999999;
15
+
margin-bottom: 8px;
16
+
17
+
18
+
// disabled state
19
+
&:not(.ct-disabled) {
20
+
21
+
> .ct-layer-controls {
22
+
23
+
.ct-unseen {
24
+
display: none;
25
+
}
26
+
}
27
+
}
28
+
29
+
&.ct-disabled {
30
+
opacity: 0.6;
31
+
32
+
> .ct-layer-controls {
33
+
34
+
.ct-seen {
35
+
display: none;
36
+
}
37
+
38
+
.ct-clone,
39
+
.ct-toggle {
40
+
pointer-events: none;
41
+
}
42
+
}
43
+
44
+
> .ct-layer-content {
45
+
display: none;
46
+
}
47
+
}
48
+
49
+
// active state
50
+
&:not(.ct-active) {
51
+
52
+
> .ct-layer-controls {
53
+
border-radius: var(--ui-border-radius, 2px);
54
+
55
+
.ct-arrow-up {
56
+
display: none;
57
+
}
58
+
}
59
+
}
60
+
61
+
&.ct-active {
62
+
63
+
> .ct-layer-controls {
64
+
border-radius: var(--ui-border-radius, 2px) var(--ui-border-radius, 2px) 0 0;
65
+
66
+
.ct-arrow-down {
67
+
display: none;
68
+
}
69
+
}
70
+
71
+
> .ct-layer-content {
72
+
border-radius: 0 0 var(--ui-border-radius, 2px) var(--ui-border-radius, 2px);
73
+
}
74
+
}
75
+
76
+
// hidden state
77
+
&.ct-hidden {
78
+
margin: 0;
79
+
height: 0;
80
+
visibility: hidden;
81
+
}
82
+
}
83
+
84
+
.ct-layer-controls {
85
+
display: flex;
86
+
height: var(--layer-height, 36px);
87
+
background: #fff;
88
+
border: 1px solid var(--optionBorderColor);
89
+
user-select: none;
90
+
box-sizing: border-box;
91
+
92
+
button {
93
+
display: flex;
94
+
align-items: center;
95
+
justify-content: center;
96
+
flex: 0 0 var(--layer-height, 36px);
97
+
width: var(--layer-height, 36px);
98
+
height: 100%;
99
+
border: none;
100
+
background: transparent;
101
+
box-shadow: none;
102
+
padding: 0;
103
+
cursor: pointer;
104
+
color: #72777c;
105
+
106
+
&:focus {
107
+
outline: none;
108
+
}
109
+
110
+
&.ct-remove {
111
+
112
+
&:hover {
113
+
color: #dd4b39;
114
+
}
115
+
}
116
+
}
117
+
118
+
> * {
119
+
&:not(:last-child) {
120
+
border-inline-end: 1px solid var(--optionBorderColor);
121
+
}
122
+
}
123
+
}
124
+
125
+
.ct-layer-label {
126
+
display: flex;
127
+
align-items: center;
128
+
flex: 1;
129
+
font-size: 12px;
130
+
font-weight: 500;
131
+
min-width: 0;
132
+
padding-inline-end: 5px;
133
+
padding-inline-start: 10px;
134
+
135
+
span {
136
+
overflow: hidden;
137
+
white-space: nowrap;
138
+
text-overflow: ellipsis;
139
+
}
140
+
}
141
+
142
+
.ct-layer-content {
143
+
display: flex;
144
+
flex-direction: column;
145
+
background: #fff;
146
+
border-top: none !important;
147
+
148
+
&:not(:empty) {
149
+
border: 1px solid var(--optionBorderColor);
150
+
}
151
+
152
+
> * {
153
+
--options-vertical-spacing: 18px;
154
+
--options-horizontal-spacing: 0 20px 18px 20px;
155
+
156
+
&:not(:last-child) {
157
+
border-bottom: 1px solid var(--optionBorderColor);
158
+
}
159
+
}
160
+
}
161
+
162
+
163
+
// add layer
164
+
.ct-add-layer-controls {
165
+
display: flex;
166
+
align-items: center;
167
+
gap: 7px;
168
+
padding-bottom: 10px;
169
+
170
+
.ct-select-input {
171
+
max-width: 100%;
172
+
}
173
+
174
+
button.button {
175
+
display: flex;
176
+
align-items: center;
177
+
justify-content: center;
178
+
flex: 0 0 38px;
179
+
padding: 0;
180
+
181
+
svg {
182
+
fill: currentColor;
183
+
}
184
+
}
185
+
}
186
+
187
+
.ct-layers-split-layout {
188
+
min-height: 50px;
189
+
}