Skip to content

Commit 0b2336b

Browse files
jamesejjamesej
committed
add default skin
1 parent e7847e5 commit 0b2336b

File tree

1 file changed

+346
-0
lines changed

1 file changed

+346
-0
lines changed

‎src/scss/default-skin.scss‎

Lines changed: 346 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,346 @@
1+
.fieldset {
2+
border: none;
3+
border-left: 1px solid #333;
4+
margin: 0 0 8px 0;
5+
}
6+
7+
.sf-form {
8+
padding: 1rem;
9+
}
10+
11+
.sf-form > div > .fieldset {
12+
padding-left: 0;
13+
border-left: none;
14+
margin-left: 8px;
15+
}
16+
17+
.sf-title {
18+
border-bottom: 1px solid rgb(7, 6, 6);
19+
display: inline-block;
20+
padding-right: 2rem;
21+
}
22+
23+
.sf-row > label.sf-caption {
24+
max-width: 10rem;
25+
}
26+
27+
.sf-row {
28+
padding: 0.25rem 0;
29+
}
30+
31+
.sf-row > label.sf-required:after {
32+
content: '*';
33+
color: #a03c3c;
34+
}
35+
36+
.sf-object {
37+
padding: 0;
38+
margin: 10px 0;
39+
}
40+
41+
.sf-form input.sf-control {
42+
border: none;
43+
border-bottom: 1px solid #333;
44+
}
45+
46+
.sf-form input.sf-control:focus {
47+
outline: none;
48+
background-color: #ddd;
49+
}
50+
51+
.sf-add-button {
52+
width:22px;
53+
height: 22px;
54+
color: rgba(0,0,0,0);
55+
border-radius: 13px;
56+
cursor: pointer;
57+
margin: 0 4px 2px 4px;
58+
display: inline-block;
59+
background-image: url(./images/plus.svg);
60+
background-size: contain;
61+
background-repeat: no-repeat;
62+
}
63+
64+
.sf-delete-button, .sf-duplication-button, .sf-down-button, .sf-up-button, .sf-edit-button, .sf-save-button, .sf-control-button {
65+
display: inline-block;
66+
width: 22px;
67+
height: 22px;
68+
margin-top: 15px;
69+
border-radius: 12px;
70+
color: rgba(0,0,0,0);
71+
background-size: contain;
72+
background-repeat: no-repeat;
73+
flex: 0 0;
74+
flex-basis: 22px;
75+
margin-left: 2px;
76+
cursor: pointer;
77+
}
78+
79+
.sf-delete-button {
80+
background-image: url(./images/ex.svg);
81+
}
82+
83+
.sf-save-button {
84+
background-image: url(./images/save.svg);
85+
border-radius: 0;
86+
}
87+
88+
.sf-duplication-button {
89+
background-image: url(./images/plus.svg);
90+
}
91+
92+
.sf-up-button {
93+
background-image: url(./images/up.svg);
94+
}
95+
96+
.sf-down-button {
97+
background-image: url(./images/up.svg);
98+
transform: rotate(180deg);
99+
}
100+
101+
.sf-control-button:hover {
102+
background-color: #ddd;
103+
}
104+
105+
.sf-array-fieldset > .sf-element {
106+
display: flex;
107+
flex-wrap: wrap;
108+
}
109+
110+
.sf-array-fieldset > .sf-element > div {
111+
flex-grow: 1;
112+
}
113+
114+
.sf-array-fieldset > .sf-element > .sf-schema-selector {
115+
width: 100%;
116+
}
117+
118+
.sf-array-fieldset > .sf-element > .sf-array-buttons {
119+
flex-grow: unset;
120+
padding-left: 0.3rem;
121+
}
122+
123+
.sf-collapser {
124+
display: inline-block;
125+
width: 16px;
126+
height: 11px;
127+
cursor: pointer;
128+
background-image: url(./images/right-arrow-black.svg);
129+
background-size: contain;
130+
background-repeat: no-repeat;
131+
}
132+
133+
.sf-collapser.sf-open {
134+
transform: rotate(90deg);
135+
position: relative;
136+
top: 5px;
137+
left: -3px;
138+
}
139+
140+
141+
.sf-progress {
142+
margin: .5em;
143+
height: 1.5em;
144+
position: relative;
145+
background-color: #eee;
146+
padding: 0 !important;
147+
}
148+
149+
.sf-progress-indicator {
150+
height: 100%;
151+
background-color: #8794c5;
152+
}
153+
154+
.sf-progress-name {
155+
position: absolute;
156+
display: block;
157+
top: 0.05em;
158+
left: 0.6em;
159+
}
160+
161+
.sf-row .sf-upload {
162+
padding: 0 0.5em;
163+
}
164+
165+
/* Custom checkbox/radio */
166+
167+
.checkbox input[type="checkbox"] {
168+
display: none;
169+
}
170+
171+
.sf-radio, .sf-multi-check {
172+
padding-bottom: 3px;
173+
}
174+
175+
.sf-radio input[type="radio"],
176+
.sf-multi-check input[type="checkbox"] {
177+
display: none;
178+
}
179+
180+
.checkbox label,
181+
.sf-radio label,
182+
.sf-multi-check label {
183+
position: relative;
184+
display: inline-block;
185+
186+
/*16px width of fake checkbox + 6px distance between fake checkbox and text*/
187+
padding-left: 22px;
188+
line-height: 20px;
189+
margin-right: 6px;
190+
}
191+
192+
.checkbox label::before,
193+
.checkbox label::after,
194+
.sf-radio label::before,
195+
.sf-radio label::after,
196+
.sf-multi-check label::before,
197+
.sf-multi-check label::after {
198+
position: absolute;
199+
content: "";
200+
201+
/*Needed for the line-height to take effect*/
202+
display: inline-block;
203+
}
204+
205+
/*Outer box of the fake checkbox*/
206+
.checkbox label::before,
207+
.sf-radio label::before,
208+
.sf-multi-check label::before {
209+
height: 16px;
210+
width: 16px;
211+
212+
border: 1px solid;
213+
left: 0px;
214+
215+
/*(24px line-height - 16px height of fake checkbox) / 2 - 1px for the border
216+
*to vertically center it.
217+
*/
218+
top: 3px;
219+
}
220+
221+
/*Checkmark of the fake checkbox*/
222+
.checkbox label::after,
223+
.sf-radio label::after,
224+
.sf-multi-check label::after {
225+
height: 5px;
226+
width: 9px;
227+
border-left: 2px solid;
228+
border-bottom: 2px solid;
229+
230+
transform: rotate(-45deg);
231+
232+
left: 4px;
233+
top: 7px;
234+
}
235+
236+
.sf-radio label::after {
237+
height: 3px;
238+
width: 8px;
239+
left: 2px;
240+
top: 3px;
241+
}
242+
243+
.sf-radio-buttons, .sf-check-buttons {
244+
display: flex;
245+
flex-wrap: wrap;
246+
align-items: center;
247+
}
248+
249+
/*Hide the checkmark by default*/
250+
.checkbox input[type="checkbox"] + label::after,
251+
.sf-radio input[type="radio"] + label::after,
252+
.sf-multi-check input[type="checkbox"] + label::after {
253+
content: none;
254+
}
255+
256+
/*Unhide on the checked state*/
257+
.checkbox input[type="checkbox"]:checked + label::after,
258+
.sf-multi-check input[type="checkbox"]:checked + label::after,
259+
.sf-radio input[type="radio"]:checked + label::after {
260+
content: "";
261+
}
262+
263+
/*Adding focus styles on the outer-box of the fake checkbox*/
264+
.checkbox input[type="checkbox"]:focus + label::before,
265+
.sf-multi-check input[type="checkbox"]:focus + label::before,
266+
.sf-radio input[type="radio"]:focus + label::before {
267+
outline: rgb(59, 153, 252) auto 5px;
268+
}
269+
270+
.sf-schema-selector {
271+
.sf-radio {
272+
input[type="radio"] {
273+
margin: 0;
274+
275+
& + label::after, & + label::before {
276+
content: none;
277+
}
278+
279+
&:checked + label {
280+
background-color: gray;
281+
color: white;
282+
}
283+
}
284+
285+
label {
286+
padding: 0 0.5em;
287+
text-align: center;
288+
margin: 0;
289+
line-height: normal;
290+
}
291+
}
292+
}
293+
294+
.sf-array-fieldset > .sf-element > .sf-row.sf-schema-selector {
295+
display: block;
296+
}
297+
298+
.sf-array-fieldset > .sf-element > .sf-schema-selector ~ .sf-array-buttons {
299+
width: 29%;
300+
text-align: right;
301+
}
302+
303+
.sf-array-fieldset > .sf-element > .sf-schema-selector ~ .sf-array-buttons > .sf-control-button {
304+
margin-top: 2px;
305+
}
306+
307+
.sf-row.sf-schema-selector ~ .sf-array {
308+
order: 1;
309+
}
310+
311+
.sf-row.sf-schema-selector > .sf-radio-buttons {
312+
padding: 0;
313+
display: inline-block;
314+
}
315+
316+
/* SUBMIT BUTTON */
317+
318+
.sf-buttons {
319+
text-align: center;
320+
margin-bottom: 10px;
321+
}
322+
323+
.sf-submit-button {
324+
background-color: white;
325+
border: 1px solid #333;
326+
cursor: pointer;
327+
}
328+
329+
.sf-submit-button {
330+
text-decoration: none;
331+
padding: 4px 10px;
332+
color: black;
333+
display: inline-block;
334+
}
335+
336+
.sf-submit-button {
337+
text-transform: uppercase;
338+
}
339+
340+
.sf-submit-button:hover {
341+
background-color: #ccc;
342+
}
343+
344+
.sf-dirty .sf-submit-button {
345+
background-color:#eed4d4
346+
}

0 commit comments

Comments
 (0)