Skip to content

Commit e6c39ab

Browse files
committedNov 27, 2021
Add minicolors and tagedit styles
1 parent 59d1237 commit e6c39ab

File tree

4 files changed

+539
-0
lines changed

4 files changed

+539
-0
lines changed
 
+432
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,432 @@
1+
.minicolors {
2+
position: relative;
3+
}
4+
5+
.minicolors-sprite {
6+
background-image: url(images/jquery.minicolors.png);
7+
}
8+
9+
.minicolors-swatch {
10+
position: absolute;
11+
vertical-align: middle;
12+
background-position: -80px 0;
13+
border: solid 1px #ccc;
14+
cursor: text;
15+
padding: 0;
16+
margin: 0;
17+
display: inline-block;
18+
}
19+
20+
.minicolors-swatch-color {
21+
position: absolute;
22+
top: 0;
23+
left: 0;
24+
right: 0;
25+
bottom: 0;
26+
}
27+
28+
.minicolors input[type=hidden] + .minicolors-swatch {
29+
width: 28px;
30+
position: static;
31+
cursor: pointer;
32+
}
33+
34+
.minicolors input[type=hidden][disabled] + .minicolors-swatch {
35+
cursor: default;
36+
}
37+
38+
/* Panel */
39+
.minicolors-panel {
40+
position: absolute;
41+
width: 173px;
42+
background: white;
43+
border: solid 1px #CCC;
44+
box-shadow: 0 0 20px rgba(0, 0, 0, .2);
45+
z-index: 99999;
46+
box-sizing: content-box;
47+
display: none;
48+
}
49+
50+
.minicolors-panel.minicolors-visible {
51+
display: block;
52+
}
53+
54+
/* Panel positioning */
55+
.minicolors-position-top .minicolors-panel {
56+
top: -154px;
57+
}
58+
59+
.minicolors-position-right .minicolors-panel {
60+
right: 0;
61+
}
62+
63+
.minicolors-position-bottom .minicolors-panel {
64+
top: auto;
65+
}
66+
67+
.minicolors-position-left .minicolors-panel {
68+
left: 0;
69+
}
70+
71+
.minicolors-with-opacity .minicolors-panel {
72+
width: 194px;
73+
}
74+
75+
.minicolors .minicolors-grid {
76+
position: relative;
77+
top: 1px;
78+
left: 1px; /* LTR */
79+
width: 150px;
80+
height: 150px;
81+
margin-bottom: 2px;
82+
background-position: -120px 0;
83+
cursor: crosshair;
84+
}
85+
[dir=rtl] .minicolors .minicolors-grid {
86+
right: 1px;
87+
}
88+
89+
.minicolors .minicolors-grid-inner {
90+
position: absolute;
91+
top: 0;
92+
left: 0;
93+
width: 150px;
94+
height: 150px;
95+
}
96+
97+
.minicolors-slider-saturation .minicolors-grid {
98+
background-position: -420px 0;
99+
}
100+
101+
.minicolors-slider-saturation .minicolors-grid-inner {
102+
background-position: -270px 0;
103+
background-image: inherit;
104+
}
105+
106+
.minicolors-slider-brightness .minicolors-grid {
107+
background-position: -570px 0;
108+
}
109+
110+
.minicolors-slider-brightness .minicolors-grid-inner {
111+
background-color: black;
112+
}
113+
114+
.minicolors-slider-wheel .minicolors-grid {
115+
background-position: -720px 0;
116+
}
117+
118+
.minicolors-slider,
119+
.minicolors-opacity-slider {
120+
position: absolute;
121+
top: 1px;
122+
left: 152px; /* LTR */
123+
width: 20px;
124+
height: 150px;
125+
background-color: white;
126+
background-position: 0 0;
127+
cursor: row-resize;
128+
}
129+
[dir=rtl] .minicolors-slider,
130+
[dir=rtl] .minicolors-opacity-slider {
131+
right: 152px;
132+
}
133+
134+
.minicolors-slider-saturation .minicolors-slider {
135+
background-position: -60px 0;
136+
}
137+
138+
.minicolors-slider-brightness .minicolors-slider {
139+
background-position: -20px 0;
140+
}
141+
142+
.minicolors-slider-wheel .minicolors-slider {
143+
background-position: -20px 0;
144+
}
145+
146+
.minicolors-opacity-slider {
147+
left: 173px; /* LTR */
148+
background-position: -40px 0;
149+
display: none;
150+
}
151+
[dir=rtl] .minicolors-opacity-slider {
152+
right: 173px;
153+
}
154+
155+
.minicolors-with-opacity .minicolors-opacity-slider {
156+
display: block;
157+
}
158+
159+
/* Pickers */
160+
.minicolors-grid .minicolors-picker {
161+
position: absolute;
162+
top: 70px;
163+
left: 70px;
164+
width: 12px;
165+
height: 12px;
166+
border: solid 1px black;
167+
border-radius: 10px;
168+
margin-top: -6px;
169+
margin-left: -6px;
170+
background: none;
171+
}
172+
173+
.minicolors-grid .minicolors-picker > div {
174+
position: absolute;
175+
top: 0;
176+
left: 0;
177+
width: 8px;
178+
height: 8px;
179+
border-radius: 8px;
180+
border: solid 2px white;
181+
box-sizing: content-box;
182+
}
183+
184+
.minicolors-picker {
185+
position: absolute;
186+
top: 0;
187+
left: 0;
188+
width: 18px;
189+
height: 2px;
190+
background: white;
191+
border: solid 1px black;
192+
margin-top: -2px;
193+
box-sizing: content-box;
194+
}
195+
196+
/* Swatches */
197+
.minicolors-swatches,
198+
.minicolors-swatches li {
199+
margin: 5px 0 3px 5px; /* LTR */
200+
padding: 0;
201+
list-style: none;
202+
overflow: hidden;
203+
}
204+
[dir=rtl] .minicolors-swatches,
205+
[dir=rtl] .minicolors-swatches li {
206+
margin: 5px 5px 3px 0;
207+
}
208+
209+
.minicolors-swatches .minicolors-swatch {
210+
position: relative;
211+
float: left; /* LTR */
212+
cursor: pointer;
213+
margin:0 4px 0 0; /* LTR */
214+
}
215+
[dir=rtl] .minicolors-swatches .minicolors-swatch {
216+
float: right;
217+
margin:0 0 0 4px;
218+
}
219+
220+
.minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
221+
margin-right: 7px; /* LTR */
222+
}
223+
[dir=rtl] .minicolors-with-opacity .minicolors-swatches .minicolors-swatch {
224+
margin-right: 0;
225+
margin-left: 7px;
226+
}
227+
228+
.minicolors-swatch.selected {
229+
border-color: #000;
230+
}
231+
232+
/* Inline controls */
233+
.minicolors-inline {
234+
display: inline-block;
235+
}
236+
237+
.minicolors-inline .minicolors-input {
238+
display: none !important;
239+
}
240+
241+
.minicolors-inline .minicolors-panel {
242+
position: relative;
243+
top: auto;
244+
left: auto; /* LTR */
245+
box-shadow: none;
246+
z-index: auto;
247+
display: inline-block;
248+
}
249+
[dir=rtl] .minicolors-inline .minicolors-panel {
250+
right: auto;
251+
}
252+
253+
/* Default theme */
254+
.minicolors-theme-default .minicolors-swatch {
255+
top: 5px;
256+
left: 5px; /* LTR */
257+
width: 18px;
258+
height: 18px;
259+
}
260+
[dir=rtl] .minicolors-theme-default .minicolors-swatch {
261+
right: 5px;
262+
}
263+
.minicolors-theme-default .minicolors-swatches .minicolors-swatch {
264+
margin-bottom: 2px;
265+
top: 0;
266+
left: 0; /* LTR */
267+
width: 18px;
268+
height: 18px;
269+
}
270+
[dir=rtl] .minicolors-theme-default .minicolors-swatches .minicolors-swatch {
271+
right: 0;
272+
}
273+
.minicolors-theme-default.minicolors-position-right .minicolors-swatch {
274+
left: auto; /* LTR */
275+
right: 5px; /* LTR */
276+
}
277+
[dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-swatch {
278+
right: auto;
279+
left: 5px;
280+
}
281+
.minicolors-theme-default.minicolors {
282+
width: auto;
283+
display: inline-block;
284+
}
285+
.minicolors-theme-default .minicolors-input {
286+
height: 20px;
287+
width: auto;
288+
display: inline-block;
289+
padding-left: 26px; /* LTR */
290+
}
291+
[dir=rtl] .minicolors-theme-default .minicolors-input {
292+
text-align: right;
293+
unicode-bidi: plaintext;
294+
padding-left: 1px;
295+
padding-right: 26px;
296+
}
297+
.minicolors-theme-default.minicolors-position-right .minicolors-input {
298+
padding-right: 26px; /* LTR */
299+
padding-left: inherit; /* LTR */
300+
}
301+
[dir=rtl] .minicolors-theme-default.minicolors-position-left .minicolors-input {
302+
padding-right: inherit;
303+
padding-left: 26px;
304+
}
305+
306+
/* Bootstrap theme */
307+
.minicolors-theme-bootstrap .minicolors-swatch {
308+
z-index: 2;
309+
top: 3px;
310+
left: 3px; /* LTR */
311+
width: 28px;
312+
height: 28px;
313+
border-radius: 3px;
314+
}
315+
[dir=rtl] .minicolors-theme-bootstrap .minicolors-swatch {
316+
right: 3px;
317+
}
318+
.minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
319+
margin-bottom: 2px;
320+
top: 0;
321+
left: 0; /* LTR */
322+
width: 20px;
323+
height: 20px;
324+
}
325+
[dir=rtl] .minicolors-theme-bootstrap .minicolors-swatches .minicolors-swatch {
326+
right: 0;
327+
}
328+
.minicolors-theme-bootstrap .minicolors-swatch-color {
329+
border-radius: inherit;
330+
}
331+
.minicolors-theme-bootstrap.minicolors-position-right > .minicolors-swatch {
332+
left: auto; /* LTR */
333+
right: 3px; /* LTR */
334+
}
335+
[dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left > .minicolors-swatch {
336+
right: auto;
337+
left: 3px;
338+
}
339+
.minicolors-theme-bootstrap .minicolors-input {
340+
float: none;
341+
padding-left: 44px; /* LTR */
342+
}
343+
[dir=rtl] .minicolors-theme-bootstrap .minicolors-input {
344+
text-align: right;
345+
unicode-bidi: plaintext;
346+
padding-left: 12px;
347+
padding-right: 44px;
348+
}
349+
.minicolors-theme-bootstrap.minicolors-position-right .minicolors-input {
350+
padding-right: 44px; /* LTR */
351+
padding-left: 12px; /* LTR */
352+
}
353+
[dir=rtl] .minicolors-theme-bootstrap.minicolors-position-left .minicolors-input {
354+
padding-right: 12px;
355+
padding-left: 44px;
356+
}
357+
.minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
358+
top: 4px;
359+
left: 4px; /* LTR */
360+
width: 37px;
361+
height: 37px;
362+
border-radius: 5px;
363+
}
364+
[dir=rtl] .minicolors-theme-bootstrap .minicolors-input.input-lg + .minicolors-swatch {
365+
right: 4px;
366+
}
367+
.minicolors-theme-bootstrap .minicolors-input.input-sm + .minicolors-swatch {
368+
width: 24px;
369+
height: 24px;
370+
}
371+
.minicolors-theme-bootstrap .minicolors-input.input-xs + .minicolors-swatch {
372+
width: 18px;
373+
height: 18px;
374+
}
375+
.input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
376+
border-top-left-radius: 0; /* LTR */
377+
border-bottom-left-radius: 0; /* LTR */
378+
}
379+
[dir=rtl] .input-group .minicolors-theme-bootstrap .minicolors-input {
380+
border-radius: 4px;
381+
}
382+
[dir=rtl] .input-group .minicolors-theme-bootstrap:not(:first-child) .minicolors-input {
383+
border-top-right-radius: 0;
384+
border-bottom-right-radius: 0;
385+
}
386+
[dir=rtl] .input-group .minicolors-theme-bootstrap:not(:last-child) .minicolors-input {
387+
border-top-left-radius: 0;
388+
border-bottom-left-radius: 0;
389+
}
390+
/* bootstrap input-group rtl override */
391+
[dir=rtl] .input-group .form-control,
392+
[dir=rtl] .input-group-addon,
393+
[dir=rtl] .input-group-btn > .btn,
394+
[dir=rtl] .input-group-btn > .btn-group > .btn,
395+
[dir=rtl] .input-group-btn > .dropdown-toggle {
396+
border: 1px solid #ccc;
397+
border-radius: 4px;
398+
}
399+
[dir=rtl] .input-group .form-control:first-child,
400+
[dir=rtl] .input-group-addon:first-child,
401+
[dir=rtl] .input-group-btn:first-child > .btn,
402+
[dir=rtl] .input-group-btn:first-child > .btn-group > .btn,
403+
[dir=rtl] .input-group-btn:first-child > .dropdown-toggle,
404+
[dir=rtl] .input-group-btn:last-child > .btn:not(:last-child):not(.dropdown-toggle),
405+
[dir=rtl] .input-group-btn:last-child > .btn-group:not(:last-child) > .btn {
406+
border-top-left-radius: 0;
407+
border-bottom-left-radius: 0;
408+
border-left: 0;
409+
}
410+
[dir=rtl] .input-group .form-control:last-child,
411+
[dir=rtl] .input-group-addon:last-child,
412+
[dir=rtl] .input-group-btn:last-child > .btn,
413+
[dir=rtl] .input-group-btn:last-child > .btn-group > .btn,
414+
[dir=rtl] .input-group-btn:last-child > .dropdown-toggle,
415+
[dir=rtl] .input-group-btn:first-child > .btn:not(:first-child),
416+
[dir=rtl] .input-group-btn:first-child > .btn-group:not(:first-child) > .btn {
417+
border-top-right-radius: 0;
418+
border-bottom-right-radius: 0;
419+
}
420+
421+
/* Semantic Ui theme */
422+
.minicolors-theme-semanticui .minicolors-swatch {
423+
top: 0;
424+
left: 0; /* LTR */
425+
padding: 18px;
426+
}
427+
[dir=rtl] .minicolors-theme-semanticui .minicolors-swatch {
428+
right: 0;
429+
}
430+
.minicolors-theme-semanticui input {
431+
text-indent: 30px;
432+
}

‎plugins/jqueryui/jquery.minicolors.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎plugins/jqueryui/tagedit.css

+105
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,105 @@
1+
/**
2+
* Styles of the tagedit inputsforms
3+
*/
4+
.tagedit-list {
5+
width: 100%;
6+
margin: 0;
7+
padding: 4px 4px 0 5px;
8+
overflow: auto;
9+
min-height: 26px;
10+
background: #fff;
11+
border: 1px solid #b2b2b2;
12+
border-radius: 4px;
13+
box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
14+
-moz-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
15+
-webkit-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
16+
-o-box-shadow: inset 0 0 2px 1px rgba(0,0,0, 0.1);
17+
}
18+
.tagedit-list li.tagedit-listelement {
19+
list-style-type: none;
20+
float: left;
21+
margin: 0 4px 4px 0;
22+
padding: 0;
23+
}
24+
25+
/* New Item input */
26+
.tagedit-list li.tagedit-listelement-new input {
27+
border: 0;
28+
height: 100%;
29+
padding: 4px 1px;
30+
width: 15px;
31+
background: #fff;
32+
border-radius: 0;
33+
box-shadow: none;
34+
-moz-box-shadow: none;
35+
-webkit-box-shadow: none;
36+
-o-box-shadow: none;
37+
}
38+
.tagedit-list li.tagedit-listelement-new input:focus {
39+
box-shadow: none;
40+
-moz-box-shadow: none;
41+
-webkit-box-shadow: none;
42+
-o-box-shadow: none;
43+
outline: none;
44+
}
45+
.tagedit-list li.tagedit-listelement-new input.tagedit-input-disabled {
46+
display: none;
47+
}
48+
49+
/* Item that is put to the List */
50+
.tagedit span.tag-element,
51+
.tagedit-list li.tagedit-listelement-old {
52+
padding: 3px 6px 1px 6px;
53+
background: #ddeef5;
54+
background: -moz-linear-gradient(top, #edf6fa 0%, #d6e9f3 100%);
55+
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#edf6fa), color-stop(100%,#d6e9f3));
56+
background: -o-linear-gradient(top, #edf6fa 0%, #d6e9f3 100%);
57+
background: -ms-linear-gradient(top, #edf6fa 0%, #d6e9f3 100%);
58+
background: linear-gradient(top, #edf6fa 0%, #d6e9f3 100%);
59+
border: 1px solid #c2dae5;
60+
-moz-border-radius: 4px;
61+
-webkit-border-radius: 4px;
62+
border-radius: 4px;
63+
color: #0d5165;
64+
line-height: 1.3em;
65+
}
66+
67+
.tagedit-list li.tagedit-listelement-focus {
68+
border-color: #4787b1;
69+
-moz-box-shadow: 0 0 3px 1px rgba(71,135,177, 0.8);
70+
-webkit-box-shadow: 0 0 3px 1px rgba(71,135,177, 0.8);
71+
-o-box-shadow: 0 0 3px 1px rgba(71,135,177, 0.8);
72+
box-shadow: 0 0 3px 1px rgba(71,135,177, 0.8);
73+
}
74+
75+
.tagedit span.tag-element {
76+
margin-right: 0.6em;
77+
padding: 2px 6px;
78+
/* cursor: pointer; */
79+
}
80+
81+
.tagedit span.tag-element.inherit {
82+
color: #666;
83+
background: #f2f2f2;
84+
border-color: #ddd;
85+
}
86+
87+
.tagedit-list li.tagedit-listelement-old a.tagedit-close,
88+
.tagedit-list li.tagedit-listelement-old a.tagedit-break,
89+
.tagedit-list li.tagedit-listelement-old a.tagedit-delete,
90+
.tagedit-list li.tagedit-listelement-old a.tagedit-save {
91+
text-indent: -2000px;
92+
display: inline-block;
93+
position: relative;
94+
top: -1px;
95+
width: 16px;
96+
height: 16px;
97+
margin: 0 -4px 0 6px;
98+
background: url('data:image/gif;base64,iVBORw0KGgoAAAANSUhEUgAAAA0AAAAOCAYAAAD0f5bSAAAAgUlEQVQoz2NgQAKzdxwWAOIEIG5AwiC+AAM2AJQIAOL3QPwfCwaJB6BrSMChGB0nwDQYwATP3nn4f+Ge4ygKQXyQOJKYAUjTepjAm09fwBimEUTDxJA0rWdANxWmaMXB0xiGwDADurthGkEAmwbqaCLFeWQFBOlBTlbkkp2MSE2wAA8R50rWvqeRAAAAAElFTkSuQmCC') left 1px no-repeat;
99+
cursor: pointer;
100+
}
101+
102+
.tagedit-list li.tagedit-listelement-old span {
103+
display: inline-block;
104+
height: 15px;
105+
}

‎plugins/jqueryui/tagedit.min.css

+1
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)
Please sign in to comment.