Skip to content

Commit 72f5060

Browse files
chillenbergerchillenberger
authored
Dan form components (#885)
1 parent 7348708 commit 72f5060

File tree

5 files changed

+285
-51
lines changed

5 files changed

+285
-51
lines changed

‎pgml-dashboard/static/css/bootstrap-theme.scss‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -72,6 +72,7 @@
7272
@import 'scss/components/images';
7373
@import 'scss/components/code';
7474
@import 'scss/components/dropdown';
75+
@import 'scss/components/forms';
7576
// pages
7677
@import 'scss/pages/docs';
7778
@import 'scss/pages/notebooks';

‎pgml-dashboard/static/css/scss/abstracts/variables.scss‎

Lines changed: 5 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -129,16 +129,20 @@ $form-check-input-border: 2px solid var(--bs-border-color);
129129
$form-check-input-active-filter: none;
130130
$form-check-label-cursor: pointer;
131131
$form-check-radio-checked-bg-image: none;
132+
132133
$form-range-track-height: .4rem;
133134
$form-range-track-box-shadow: none;
134135
$form-range-thumb-width: 1rem;
135136
$form-range-thumb-box-shadow: none;
136137
$form-range-thumb-transition: none;
137138
$form-range-thumb-active-bg: #{$primary};
138139
$form-range-thumb-bg: #{$primary};
139-
$form-range-thumb-border: 4px solid #{$purple};
140+
$form-range-thumb-border: 4px solid #{$neon-tint-100};
140141
$form-range-track-bg: #111213;
142+
141143
$input-box-shadow: none;
144+
$form-switch-checked-color: #{$gray-100};
145+
$form-switch-focus-color: #{$gray-100};
142146

143147
// Badge
144148
$badge-font-weight: normal;

‎pgml-dashboard/static/css/scss/base/_base.scss‎

Lines changed: 0 additions & 50 deletions
Original file line numberDiff line numberDiff line change
@@ -51,56 +51,6 @@ a {
5151
}
5252
}
5353

54-
input {
55-
&.form-check-input {
56-
&[type=radio]:checked {
57-
border-width: 5px;
58-
}
59-
60-
&:hover {
61-
cursor: pointer;
62-
}
63-
}
64-
65-
&.form-range[type=range] {
66-
cursor: pointer;
67-
}
68-
69-
// Firefox
70-
&.form-range[type="range"]::-moz-range-progress {
71-
background-color: #{$purple};
72-
height: 4px;
73-
border: 0;
74-
}
75-
76-
// IE
77-
&.form-range[type="range"]::-ms-fill-lower {
78-
background-color: #{$purple};
79-
}
80-
81-
// Chrome (doesn't really work as designed)
82-
&.form-range[type=range]::-webkit-slider-thumb {
83-
-webkit-appearance: none;
84-
height: 24px;
85-
width: 24px;
86-
position: relative;
87-
bottom: 4px;
88-
border-radius: 50%;
89-
border: #{$form-range-thumb-border};
90-
background: #{$form-range-thumb-bg};
91-
}
92-
93-
&.form-range[type=range]::-webkit-slider-runnable-track {
94-
height: #{$form-range-track-height};
95-
border: 0;
96-
}
97-
98-
&.form-range[type=range]:focus::-webkit-slider-runnable-track {
99-
background: #{$purple};
100-
}
101-
// End of Chrome
102-
}
103-
10454
table {
10555
@extend .table;
10656
@extend .table-bordered;

‎pgml-dashboard/static/css/scss/components/_forms.scss‎

Lines changed: 268 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,268 @@
1+
.form-check-input {
2+
--bs-form-check-bg: transparent;
3+
4+
&[type=radio] {
5+
border: 2px solid var(--form-radio-border-color);
6+
7+
&:hover {
8+
cursor: pointer;
9+
border: 5px solid var(--form-radio-hover-border-color);
10+
}
11+
12+
&:disabled {
13+
background-color: transparent;
14+
border-color: var(--form-check-disable-color);
15+
}
16+
}
17+
18+
&[type=radio]:checked {
19+
background-color: var(--form-radio-checked-bg);
20+
border: 5px solid var(--form-radio-border-color);
21+
22+
&:disabled {
23+
background-color: transparent;
24+
border: 5px solid var(--form-check-disable-color);
25+
}
26+
}
27+
}
28+
29+
.form-switch>input {
30+
&[type=checkbox] {
31+
background-color: var(--form-switch-default);
32+
border-color: var(--form-switch-default);
33+
34+
&:hover {
35+
border-color: var(--form-switch-hover);
36+
background-color: var(--form-switch-hover);
37+
}
38+
39+
&:disabled {
40+
border-color: var(--form-check-disable-color);
41+
background-color: var(--form-check-disable-color);
42+
opacity: 1;
43+
44+
}
45+
}
46+
47+
&[type=checkbox]:checked {
48+
background-color: var(--form-switch-active);
49+
border-color: var(--form-switch-active);
50+
51+
&:hover {
52+
border-color: var(--form-switch-hover);
53+
background-color: var(--form-switch-hover);
54+
}
55+
56+
&:disabled {
57+
border-color: var(--form-check-disable-color);
58+
background-color: var(--form-check-disable-color);
59+
opacity: 1;
60+
}
61+
}
62+
}
63+
64+
.form-switch .form-check-input {
65+
--bs-form-switch-bg: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='-4 -4 8 8'%3e%3ccircle r='3' fill='white'/%3e%3c/svg%3e") !important;
66+
}
67+
68+
.form-label {
69+
color: #{$gray-100};
70+
}
71+
72+
73+
.form-range[type=range] {
74+
cursor: pointer;
75+
}
76+
77+
// Firefox
78+
.form-range[type="range"]::-moz-range-progress {
79+
background-color: #{$neon-tint-100};
80+
height: 4px;
81+
border: 0;
82+
}
83+
84+
// IE
85+
.form-range[type="range"]::-ms-fill-lower {
86+
background-color: #{$neon-tint-100};
87+
}
88+
89+
// Chrome (doesn't really work as designed)
90+
.form-range[type=range]::-webkit-slider-thumb {
91+
-webkit-appearance: none;
92+
height: 24px;
93+
width: 24px;
94+
position: relative;
95+
bottom: 4px;
96+
border-radius: 50%;
97+
border: #{$form-range-thumb-border};
98+
background: #{$form-range-thumb-bg};
99+
}
100+
101+
.form-range[type=range]::-webkit-slider-runnable-track {
102+
height: #{$form-range-track-height};
103+
border: 0;
104+
}
105+
106+
.form-range[type=range]:focus::-webkit-slider-runnable-track {
107+
background: #{$neon-tint-100};
108+
}
109+
// End of Chrome
110+
111+
.form-range-custome {
112+
& {
113+
font-size: 1.5rem;
114+
width: 100%;
115+
}
116+
117+
& {
118+
color: #{$neon-tint-100};
119+
--thumb-height: 1.125em;
120+
--track-height: 0.125em;
121+
--brightness-hover: 110%;
122+
--brightness-down: 90%;
123+
--clip-edges: 0.125em;
124+
--track-color: #{$gray-600};
125+
--bg-color: transparent;
126+
}
127+
128+
/* === range commons === */
129+
& {
130+
position: relative;
131+
background: var(--bg-color);
132+
overflow: hidden;
133+
}
134+
135+
&:active {
136+
cursor: grabbing;
137+
}
138+
139+
&:disabled {
140+
filter: grayscale(1);
141+
opacity: 0.3;
142+
cursor: not-allowed;
143+
}
144+
145+
/* === WebKit specific styles === */
146+
&,
147+
&::-webkit-slider-runnable-track,
148+
&::-webkit-slider-thumb {
149+
-webkit-appearance: none;
150+
transition: all ease 100ms;
151+
height: var(--thumb-height);
152+
}
153+
154+
&::-webkit-slider-runnable-track,
155+
&::-webkit-slider-thumb {
156+
position: relative;
157+
}
158+
159+
&::-webkit-slider-thumb {
160+
--thumb-radius: calc((var(--thumb-height) * 0.5) - 1px);
161+
--clip-top: calc((var(--thumb-height) - var(--track-height)) * 0.5 - 0.5px);
162+
--clip-bottom: calc(var(--thumb-height) - var(--clip-top));
163+
--clip-further: calc(100% + 1px);
164+
--box-fill: calc(-100vmax - var(--thumb-width, var(--thumb-height))) 0 0
165+
100vmax currentColor;
166+
167+
width: var(--thumb-width, var(--thumb-height));
168+
background: linear-gradient(currentColor 0 0) scroll no-repeat left center /
169+
50% calc(var(--track-height) + 1px);
170+
background-color: currentColor;
171+
box-shadow: var(--box-fill);
172+
border-radius: var(--thumb-width, var(--thumb-height));
173+
174+
filter: brightness(100%);
175+
clip-path: polygon(
176+
100% -1px,
177+
var(--clip-edges) -1px,
178+
0 var(--clip-top),
179+
-100vmax var(--clip-top),
180+
-100vmax var(--clip-bottom),
181+
0 var(--clip-bottom),
182+
var(--clip-edges) 100%,
183+
var(--clip-further) var(--clip-further)
184+
);
185+
}
186+
187+
&:hover::-webkit-slider-thumb {
188+
filter: brightness(var(--brightness-hover));
189+
cursor: grab;
190+
}
191+
192+
&:active::-webkit-slider-thumb {
193+
filter: brightness(var(--brightness-down));
194+
cursor: grabbing;
195+
}
196+
197+
&::-webkit-slider-runnable-track {
198+
background: linear-gradient(var(--track-color) 0 0) scroll no-repeat center /
199+
100% calc(var(--track-height) + 1px);
200+
}
201+
202+
&:disabled::-webkit-slider-thumb {
203+
cursor: not-allowed;
204+
}
205+
206+
/* === Firefox specific styles === */
207+
&,
208+
&::-moz-range-track,
209+
&::-moz-range-thumb {
210+
appearance: none;
211+
transition: all ease 100ms;
212+
height: var(--thumb-height);
213+
}
214+
215+
&::-moz-range-track,
216+
&::-moz-range-thumb,
217+
&::-moz-range-progress {
218+
background: var(--bg-color);
219+
}
220+
221+
&::-moz-range-thumb {
222+
background: currentColor;
223+
border: 0;
224+
width: var(--thumb-width, var(--thumb-height));
225+
border-radius: var(--thumb-width, var(--thumb-height));
226+
cursor: grab;
227+
}
228+
229+
&:active::-moz-range-thumb {
230+
cursor: grabbing;
231+
}
232+
233+
&::-moz-range-track {
234+
width: 100%;
235+
background: var(--track-color);
236+
}
237+
238+
&::-moz-range-progress {
239+
appearance: none;
240+
background: currentColor;
241+
transition-delay: 30ms;
242+
}
243+
244+
&::-moz-range-track,
245+
&::-moz-range-progress {
246+
height: calc(var(--track-height) + 1px);
247+
border-radius: var(--track-height);
248+
}
249+
250+
&::-moz-range-thumb,
251+
&::-moz-range-progress {
252+
filter: brightness(100%);
253+
}
254+
255+
&:hover::-moz-range-thumb,
256+
&:hover::-moz-range-progress {
257+
filter: brightness(var(--brightness-hover));
258+
}
259+
260+
&:active::-moz-range-thumb,
261+
&:active::-moz-range-progress {
262+
filter: brightness(var(--brightness-down));
263+
}
264+
265+
&:disabled::-moz-range-thumb {
266+
cursor: not-allowed;
267+
}
268+
}

‎pgml-dashboard/static/css/scss/themes/dark.scss‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,17 @@
2525
--bs-list-group-color: #{$hp-white};
2626
}
2727

28+
--form-radio-bg: #{$neon-tint-100};
29+
--form-radio-hover-bg: #{$neon-tint-300};
30+
--form-radio-border-color: #{$neon-tint-100};
31+
--form-radio-hover-border-color: #{$neon-tint-300};
32+
--form-check-disable-color: #{$gray-200};
33+
--form-radio-checked-bg: #{$gray-100};
34+
35+
--form-switch-default: #{$neon-tint-400};
36+
--form-switch-hover: #{$neon-tint-300};
37+
--form-switch-active: #{$neon-tint-100};
38+
2839
.form-control {
2940
--bs-form-control-bg: #{$gray-700};
3041
--bs-body-color: #{$gray-200};

0 commit comments

Comments
 (0)