Skip to content

Commit c2e05d9

Browse files
silverwindzeripathtechknowlogicklafriks
authored
Form styling adjustments (#13501)
* Form styling adjustments - Move all form-related styling to _forms.less - Defined new form-related variables - Fix spinner on frontpage repo search - Add new rounded-* helpers and fix repo search radius * misc arc green tweaks Co-authored-by: zeripath <[email protected]> Co-authored-by: techknowlogick <[email protected]> Co-authored-by: Lauris BH <[email protected]>
1 parent 4117a44 commit c2e05d9

File tree

6 files changed

+157
-207
lines changed

6 files changed

+157
-207
lines changed

‎templates/user/dashboard/repolist.tmpl

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -91,7 +91,7 @@
9191
</a>
9292
</div>
9393
</div>
94-
<div class="ui attached table segment">
94+
<div v-if="repos.length" class="ui attached table segment rounded-bottom">
9595
<ul class="repo-owner-name-list">
9696
<li v-for="repo in repos" :class="{'private': repo.private || repo.internal}">
9797
<a :href="suburl + '/' + repo.full_name">
@@ -139,7 +139,7 @@
139139
</a>
140140
</div>
141141
</h4>
142-
<div class="ui attached table segment">
142+
<div v-if="organizations.length" class="ui attached table segment rounded-bottom">
143143
<ul class="repo-owner-name-list">
144144
<li v-for="org in organizations">
145145
<a :href="suburl + '/' + org.name">

‎web_src/less/_base.less

Lines changed: 12 additions & 17 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@
6262
--color-box-header: #f7f7f7;
6363
--color-box-body: #ffffff;
6464
--color-timeline: #ececec;
65+
--color-input-text: #212121;
66+
--color-input-background: #ffffff;
67+
--color-input-border: #dedede;
68+
--color-input-border-hover: #cecece;
6569
}
6670

6771
:root:lang(ja) {
@@ -186,23 +190,6 @@ a:hover,
186190
border-right-color: var(--color-primary);
187191
}
188192

189-
.ui.form input:not([type]):focus,
190-
.ui.form textarea:focus,
191-
.ui.form input[type="date"]:focus,
192-
.ui.form input[type="datetime-local"]:focus,
193-
.ui.form input[type="email"]:focus,
194-
.ui.form input[type="file"]:focus,
195-
.ui.form input[type="number"]:focus,
196-
.ui.form input[type="password"]:focus,
197-
.ui.form input[type="search"]:focus,
198-
.ui.form input[type="tel"]:focus,
199-
.ui.form input[type="text"]:focus,
200-
.ui.form input[type="time"]:focus,
201-
.ui.form input[type="url"]:focus,
202-
.ui.selection.dropdown:focus {
203-
border-color: var(--color-primary);
204-
}
205-
206193
.ui.selection.active.dropdown,
207194
.ui.selection.active.dropdown:hover,
208195
.ui.selection.active.dropdown .menu,
@@ -214,6 +201,10 @@ a:hover,
214201
margin: 0 -1.25px;
215202
}
216203

204+
.ui.attached.table {
205+
border-color: var(--color-secondary);
206+
}
207+
217208
.dont-break-out {
218209
overflow-wrap: break-word;
219210
word-wrap: break-word;
@@ -326,6 +317,10 @@ a:hover,
326317
height: auto;
327318
}
328319

320+
.ui.loading.loading.input > i.icon svg {
321+
visibility: hidden;
322+
}
323+
329324
.ui {
330325
&.left:not(.action) {
331326
float: left;

‎web_src/less/_dashboard.less

Lines changed: 1 addition & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -65,10 +65,8 @@
6565
}
6666
}
6767

68-
/* Accomodate for Semantic's 1px hacks on .attached elements */
69-
7068
.dashboard-repos {
71-
margin: 0 1px;
69+
margin: 0 1px; /* Accomodate for Semantic's 1px hacks on .attached elements */
7270
}
7371

7472
.dashboard-navbar {
@@ -144,18 +142,6 @@
144142
}
145143

146144
.list {
147-
.header {
148-
.ui.label {
149-
margin-top: -4px;
150-
padding: 4px 5px;
151-
font-weight: normal;
152-
}
153-
154-
.plus.icon {
155-
margin-top: 5px;
156-
}
157-
}
158-
159145
ul {
160146
list-style: none;
161147
margin: 0;

‎web_src/less/_form.less

Lines changed: 126 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,3 +1,129 @@
1+
input,
2+
textarea,
3+
.ui.input > input,
4+
.ui.form input:not([type]),
5+
.ui.form textarea,
6+
.ui.form input[type="date"],
7+
.ui.form input[type="datetime-local"],
8+
.ui.form input[type="email"],
9+
.ui.form input[type="file"],
10+
.ui.form input[type="number"],
11+
.ui.form input[type="password"],
12+
.ui.form input[type="search"],
13+
.ui.form input[type="tel"],
14+
.ui.form input[type="text"],
15+
.ui.form input[type="time"],
16+
.ui.form input[type="url"],
17+
.ui.selection.dropdown,
18+
.ui.checkbox label::before,
19+
.ui.checkbox input:checked ~ label::before,
20+
.ui.checkbox input:not([type=radio]):indeterminate ~ label::before {
21+
background: var(--color-input-background);
22+
border-color: var(--color-input-border);
23+
color: var(--color-input-text);
24+
}
25+
26+
input:hover,
27+
textarea:hover,
28+
.ui.input input:hover,
29+
.ui.form input:not([type]):hover,
30+
.ui.form textarea:hover,
31+
.ui.form input[type="date"]:hover,
32+
.ui.form input[type="datetime-local"]:hover,
33+
.ui.form input[type="email"]:hover,
34+
.ui.form input[type="file"]:hover,
35+
.ui.form input[type="number"]:hover,
36+
.ui.form input[type="password"]:hover,
37+
.ui.form input[type="search"]:hover,
38+
.ui.form input[type="tel"]:hover,
39+
.ui.form input[type="text"]:hover,
40+
.ui.form input[type="time"]:hover,
41+
.ui.form input[type="url"]:hover,
42+
.ui.selection.dropdown:hover,
43+
.ui.checkbox label:hover::before,
44+
.ui.checkbox label:active::before,
45+
.ui.radio.checkbox label::after,
46+
.ui.radio.checkbox input:focus ~ label::before,
47+
.ui.radio.checkbox input:checked ~ label::before {
48+
background: var(--color-input-background);
49+
border-color: var(--color-input-border-hover);
50+
color: var(--color-input-text);
51+
}
52+
53+
input:focus,
54+
textarea:focus,
55+
.ui.input input:focus,
56+
.ui.form input:not([type]):focus,
57+
.ui.form textarea:focus,
58+
.ui.form input[type="date"]:focus,
59+
.ui.form input[type="datetime-local"]:focus,
60+
.ui.form input[type="email"]:focus,
61+
.ui.form input[type="file"]:focus,
62+
.ui.form input[type="number"]:focus,
63+
.ui.form input[type="password"]:focus,
64+
.ui.form input[type="search"]:focus,
65+
.ui.form input[type="tel"]:focus,
66+
.ui.form input[type="text"]:focus,
67+
.ui.form input[type="time"]:focus,
68+
.ui.form input[type="url"]:focus,
69+
.ui.selection.dropdown:focus,
70+
.ui.checkbox input:focus ~ label::before,
71+
.ui.checkbox input:not([type="radio"]):indeterminate:focus ~ label::before,
72+
.ui.checkbox input:checked:focus ~ label::before,
73+
.ui.radio.checkbox input:focus:checked ~ label::before {
74+
background: var(--color-input-background);
75+
border-color: var(--color-primary);
76+
color: var(--color-input-text);
77+
}
78+
79+
.ui.form .field > label,
80+
.ui.form .inline.fields > label,
81+
.ui.form .inline.fields .field > label,
82+
.ui.form .inline.fields .field > p,
83+
.ui.form .inline.field > label,
84+
.ui.form .inline.field > p,
85+
.ui.checkbox label,
86+
.ui.checkbox + label,
87+
.ui.checkbox label:hover,
88+
.ui.checkbox + label:hover,
89+
.ui.checkbox input:focus ~ label,
90+
.ui.checkbox input:active ~ label {
91+
color: var(--color-text);
92+
}
93+
94+
.ui.input,
95+
.ui.checkbox input:focus ~ label::after,
96+
.ui.checkbox input:checked ~ label::after,
97+
.ui.checkbox label:active::after,
98+
.ui.checkbox input:not([type=radio]):indeterminate ~ label::after,
99+
.ui.checkbox input:not([type=radio]):indeterminate:focus ~ label::after,
100+
.ui.checkbox input:checked:focus ~ label::after,
101+
.ui.disabled.checkbox label,
102+
.ui.checkbox input[disabled] ~ label {
103+
color: var(--color-input-text);
104+
}
105+
106+
.ui.radio.checkbox input:focus ~ label::after,
107+
.ui.radio.checkbox input:checked ~ label::after,
108+
.ui.radio.checkbox input:focus:checked ~ label::after {
109+
background: var(--color-input-text);
110+
}
111+
112+
.ui.toggle.checkbox label::before {
113+
background: var(--color-input-background);
114+
}
115+
116+
.ui.toggle.checkbox label,
117+
.ui.toggle.checkbox input:checked ~ label,
118+
.ui.toggle.checkbox input:focus:checked ~ label {
119+
color: var(--color-text) !important;
120+
}
121+
122+
.ui.toggle.checkbox input:checked ~ label::before,
123+
.ui.toggle.checkbox input:focus:checked ~ label::before {
124+
background: var(--color-primary) !important;
125+
}
126+
1127
.form {
2128
.help {
3129
color: #999999;

‎web_src/less/helpers.less

Lines changed: 6 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -6,7 +6,6 @@
66
.sb { justify-content: space-between !important; }
77
.fc { flex-direction: column !important; }
88
.f1 { flex: 1 !important; }
9-
.rounded { border-radius: var(--border-radius) !important; }
109

1110
.mono {
1211
font-family: var(--fonts-monospace) !important;
@@ -18,6 +17,12 @@
1817
word-break: break-all !important;
1918
}
2019

20+
.rounded { border-radius: var(--border-radius) !important; }
21+
.rounded-top { border-radius: var(--border-radius) var(--border-radius) 0 0 !important; }
22+
.rounded-bottom { border-radius: 0 0 var(--border-radius) var(--border-radius) !important; }
23+
.rounded-left { border-radius: var(--border-radius) 0 0 var(--border-radius) !important; }
24+
.rounded-right { border-radius: 0 var(--border-radius) var(--border-radius) 0 !important; }
25+
2126
.m-0 { margin: 0 !important; }
2227
.m-1 { margin: .125rem !important; }
2328
.m-2 { margin: .25rem !important; }

0 commit comments

Comments
 (0)