Skip to content

Commit 9e4a08d

Browse files
jordanvidrinejordanvidrine
authored
UX: Polishing borders, border-radius, input, and spacing (#32995)
1 parent 58a01d1 commit 9e4a08d

13 files changed

+31
-36
lines changed

‎app/assets/stylesheets/admin/admin_config_area.scss

Lines changed: 5 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,9 +1,8 @@
11
.admin-config-area-card {
2-
padding: 20px 5px 20px 20px;
2+
padding: var(--space-4);
33
border: 1px solid var(--primary-low);
44
border-radius: var(--d-border-radius);
55
background-color: var(--secondary);
6-
margin-bottom: 1em;
76

87
&__label-optional {
98
color: var(--primary-medium);
@@ -76,6 +75,9 @@
7675

7776
&__primary-content {
7877
flex: 0 1 70%;
78+
display: flex;
79+
flex-direction: column;
80+
gap: var(--space-4);
7981

8082
@media (max-width: $mobile-breakpoint) {
8183
flex: 0 1 auto;
@@ -117,6 +119,7 @@
117119
.admin-empty-list {
118120
padding: 1em;
119121
border: 1px solid var(--primary-low);
122+
border-radius: var(--d-border-radius);
120123

121124
&__cta-button {
122125
display: flex;

‎app/assets/stylesheets/admin/admin_report.scss

Lines changed: 2 additions & 7 deletions
Original file line numberDiff line numberDiff line change
@@ -232,7 +232,6 @@
232232
}
233233

234234
.admin-reports-list {
235-
--d-border-radius: var(--space-0);
236235
display: flex;
237236
flex-wrap: wrap;
238237
list-style-type: none;
@@ -244,19 +243,15 @@
244243
.admin-section-landing-item {
245244
padding: var(--space-4);
246245
border-radius: var(--d-border-radius);
247-
outline: 1px solid var(--primary-low);
246+
border: 1px solid var(--primary-low);
248247
margin-bottom: 0;
249248

250249
@include viewport.from(sm) {
251250
margin-bottom: 0;
252251
}
253252

254253
&:hover {
255-
border: 0;
256-
box-shadow:
257-
0 0 0 1px var(--primary-300),
258-
0 0 0 4px var(--primary-100);
259-
transition: all 0.2s ease-in-out;
254+
border: 1px solid var(--primary-low-mid);
260255
}
261256
}
262257
}

‎app/assets/stylesheets/admin/search.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -19,6 +19,7 @@
1919
box-sizing: border-box;
2020
height: 42px;
2121
padding: 0 var(--space-2);
22+
border-radius: var(--d-input-border-radius);
2223

2324
&:focus,
2425
&:focus-within {

‎app/assets/stylesheets/admin/site-settings.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -32,7 +32,7 @@
3232
padding: var(--space-3);
3333
background-color: var(--secondary);
3434
border: 1px solid var(--primary-300);
35-
border-radius: var(--border-radius);
35+
border-radius: var(--d-border-radius);
3636
box-shadow: var(--shadow-card);
3737

3838
@include viewport.until(sm) {

‎app/assets/stylesheets/common/base/groups.scss

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -46,10 +46,10 @@
4646
cursor: pointer;
4747
border: 1px solid var(--primary-low);
4848
color: var(--primary);
49+
border-radius: var(--d-button-border-radius);
4950

5051
.discourse-no-touch & {
5152
&:hover {
52-
box-shadow: var(--shadow-card);
5353
border-color: var(--primary-low-mid-or-secondary-high);
5454
}
5555
}
@@ -184,7 +184,7 @@
184184
font-size: var(--font-down-2);
185185
padding: 0.2em 1em;
186186
background-color: var(--primary-low);
187-
border-radius: var(--d-button-border-radius);
187+
border-radius: var(--d-border-radius);
188188

189189
.fk-d-tooltip__trigger-container {
190190
align-items: center;

‎app/assets/stylesheets/common/base/personal-message.scss

Lines changed: 8 additions & 8 deletions
Original file line numberDiff line numberDiff line change
@@ -1,7 +1,6 @@
11
@use "lib/viewport";
22

33
.archetype-private_message {
4-
--pm-border-radius: 0;
54
--pm-padding: 1.25em;
65

76
.topic-post {
@@ -21,7 +20,7 @@
2120
}
2221

2322
.regular.contents {
24-
border-radius: var(--pm-border-radius);
23+
border-radius: var(--d-border-radius);
2524
border: 1px solid var(--primary-low);
2625
padding-left: var(--pm-padding);
2726
margin-left: calc(var(--pm-padding) * -1);
@@ -77,7 +76,7 @@
7776

7877
.post-notice {
7978
box-sizing: border-box;
80-
border-radius: var(--pm-border-radius);
79+
border-radius: var(--d-border-radius);
8180
background-color: var(--tertiary-very-low);
8281
border-color: var(--tertiary-very-low);
8382
margin-bottom: 1em;
@@ -108,6 +107,7 @@
108107
display: grid;
109108
grid-template-areas: "contents additional" "pm-map pm-map";
110109
grid-template-columns: 1fr auto;
110+
border-radius: var(--d-border-radius);
111111

112112
@include viewport.from(sm) {
113113
padding-left: calc(
@@ -121,11 +121,11 @@
121121
padding-inline: var(--pm-padding);
122122

123123
&:first-of-type {
124-
border-radius: var(--pm-border-radius) var(--pm-border-radius) 0 0;
124+
border-radius: var(--d-border-radius) var(--d-border-radius) 0 0;
125125
}
126126

127127
&:last-of-type {
128-
border-radius: 0 0 var(--pm-border-radius) var(--pm-border-radius);
128+
border-radius: 0 0 var(--d-border-radius) var(--d-border-radius);
129129
}
130130
}
131131

@@ -158,14 +158,14 @@
158158
border: none;
159159
background: var(--primary-low);
160160
padding: 2px 4px;
161-
border-radius: var(--pm-border-radius);
161+
border-radius: var(--d-border-radius);
162162
}
163163
}
164164
}
165165

166166
.map:first-of-type .buttons .btn {
167167
border: none;
168-
border-radius: var(--pm-border-radius);
168+
border-radius: var(--d-border-radius);
169169
}
170170

171171
.embedded-posts {
@@ -193,7 +193,7 @@
193193
&.top {
194194
.cooked {
195195
border: 1px solid var(--primary-low);
196-
border-radius: var(--pm-border-radius);
196+
border-radius: var(--d-border-radius);
197197
margin-left: calc(var(--pm-padding) * -1);
198198
padding-left: 2.15em;
199199
}

‎app/assets/stylesheets/common/base/search.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -25,6 +25,7 @@
2525

2626
.search-header {
2727
background: var(--primary-very-low);
28+
border-radius: var(--d-border-radius);
2829

2930
@include search-page-spacing;
3031
}

‎app/assets/stylesheets/common/base/sidebar.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -427,6 +427,7 @@
427427
box-sizing: border-box;
428428
margin-top: 0.5em;
429429
margin-bottom: 0.5em;
430+
border-radius: var(--d-input-border-radius);
430431
}
431432

432433
&__icon.btn.btn-transparent {

‎app/assets/stylesheets/common/base/user-badges.scss

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -135,6 +135,7 @@
135135
background-color: var(--primary-very-low);
136136
border: 1px solid var(--primary-low);
137137
position: relative;
138+
border-radius: var(--d-border-radius);
138139

139140
.check-display {
140141
position: absolute;

‎app/assets/stylesheets/common/components/date-time-input.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -1,12 +1,10 @@
11
.d-date-time-input {
22
display: flex;
3-
border: 1px solid var(--primary-medium);
43
box-sizing: border-box;
54
position: relative;
65

76
.date-picker {
87
max-width: unset;
9-
border-color: transparent;
108
}
119

1210
.d-date-time-input {

‎app/assets/stylesheets/common/components/filter-input.scss

Lines changed: 3 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -4,11 +4,12 @@
44
display: flex;
55
align-items: center;
66
justify-content: space-between;
7-
border: 1px solid var(--primary-medium);
7+
border: var(--d-input-border);
8+
border-radius: var(--d-input-border-radius);
89
box-sizing: border-box;
910

1011
&.is-focused {
11-
border: 1px solid var(--tertiary);
12+
@include default-focus;
1213
}
1314

1415
.filter-input,

‎app/assets/stylesheets/common/components/user-stream-item.scss

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -140,7 +140,7 @@
140140

141141
&:not(.show-avatars) {
142142
li.notification {
143-
padding: 0.75em 0;
143+
padding: var(--space-3);
144144

145145
.d-icon {
146146
padding-top: 0;

‎app/assets/stylesheets/common/d-editor.scss

Lines changed: 5 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -35,7 +35,7 @@
3535
flex-direction: column;
3636
background-color: var(--secondary);
3737
position: relative;
38-
border: 1px solid var(--primary-400);
38+
border: var(--d-input-border);
3939
border-radius: var(--d-input-border-radius);
4040
min-height: 0;
4141

@@ -141,7 +141,7 @@
141141
}
142142

143143
.d-editor-textarea-wrapper {
144-
border: 1px solid var(--primary-low);
144+
border: var(--d-input-border);
145145
}
146146

147147
.d-editor-preview-wrapper {
@@ -162,12 +162,6 @@
162162
}
163163
}
164164

165-
.user-preferences .bio-composer,
166-
.group-form-bio {
167-
padding: 10px;
168-
border: 1px solid var(--primary-low);
169-
}
170-
171165
.d-editor-preview img {
172166
vertical-align: baseline; // consistent with cooked
173167

@@ -322,7 +316,7 @@
322316
display: grid;
323317
grid-template-columns: repeat(auto-fill, minmax(2.35em, 1fr));
324318
align-items: center;
325-
border-bottom: 1px solid var(--primary-low);
319+
border-bottom: var(--d-input-border);
326320
width: 100%;
327321
box-sizing: border-box;
328322
flex-shrink: 0;
@@ -366,7 +360,7 @@
366360
overflow: auto;
367361
background: var(--primary-very-low);
368362
padding: 1rem;
369-
border: 1px solid var(--primary-400);
363+
border: var(--d-input-border);
370364
margin-bottom: 0;
371365
height: 100%;
372366
}
@@ -393,7 +387,7 @@
393387
.d-editor-preview .d-editor-translation-preview-wrapper {
394388
--translation-preview-padding: 1rem;
395389
box-sizing: border-box;
396-
border: 1px dashed var(--primary-300);
390+
border: var(--d-input-border);
397391
border-radius: var(--d-border-radius);
398392
padding: var(--translation-preview-padding);
399393
position: relative;

0 commit comments

Comments
 (0)