Spaces:
Running
Running
Improves responsiveness
Browse files- client/css/buttons.css +0 -10
- client/css/checkbox.css +49 -3
- client/css/dropdown.css +9 -2
- client/css/field.css +2 -9
- client/css/label.css +0 -13
- client/css/options.css +10 -0
- client/css/style.css +1 -0
client/css/buttons.css
CHANGED
@@ -1,14 +1,4 @@
|
|
1 |
.buttons {
|
2 |
display: flex;
|
3 |
-
align-items: center;
|
4 |
justify-content: left;
|
5 |
-
width: 100%;
|
6 |
-
}
|
7 |
-
|
8 |
-
@media screen and (max-width: 990px) {
|
9 |
-
.buttons {
|
10 |
-
align-items: flex-start;
|
11 |
-
flex-wrap: wrap;
|
12 |
-
gap: 15px;
|
13 |
-
}
|
14 |
}
|
|
|
1 |
.buttons {
|
2 |
display: flex;
|
|
|
3 |
justify-content: left;
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
4 |
}
|
client/css/checkbox.css
CHANGED
@@ -1,13 +1,59 @@
|
|
1 |
-
|
2 |
height: 0;
|
3 |
width: 0;
|
4 |
display: none;
|
5 |
}
|
6 |
|
7 |
-
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
8 |
background: var(--blur-border);
|
9 |
}
|
10 |
|
11 |
-
input:checked + label:after {
|
12 |
left: calc(100% - 5px - 20px);
|
13 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
.checkbox input {
|
2 |
height: 0;
|
3 |
width: 0;
|
4 |
display: none;
|
5 |
}
|
6 |
|
7 |
+
.checkbox span {
|
8 |
+
font-size: 0.875rem;
|
9 |
+
color: var(--colour-3);
|
10 |
+
margin-left: 4px;
|
11 |
+
}
|
12 |
+
|
13 |
+
.checkbox label:after {
|
14 |
+
content: "";
|
15 |
+
position: absolute;
|
16 |
+
top: 50%;
|
17 |
+
transform: translateY(-50%);
|
18 |
+
left: 5px;
|
19 |
+
width: 20px;
|
20 |
+
height: 20px;
|
21 |
+
background: var(--blur-border);
|
22 |
+
border-radius: 90px;
|
23 |
+
transition: 0.33s;
|
24 |
+
}
|
25 |
+
|
26 |
+
.checkbox input + label:after,
|
27 |
+
.checkbox input:checked + label {
|
28 |
+
background: var(--colour-3);
|
29 |
+
}
|
30 |
+
|
31 |
+
.checkbox input + label,
|
32 |
+
.checkbox input:checked + label:after {
|
33 |
background: var(--blur-border);
|
34 |
}
|
35 |
|
36 |
+
.checkbox input:checked + label:after {
|
37 |
left: calc(100% - 5px - 20px);
|
38 |
}
|
39 |
+
|
40 |
+
@media screen and (max-width: 990px) {
|
41 |
+
.checkbox span {
|
42 |
+
font-size: 0.75rem;
|
43 |
+
}
|
44 |
+
|
45 |
+
.checkbox label {
|
46 |
+
width: 25px;
|
47 |
+
height: 15px;
|
48 |
+
}
|
49 |
+
|
50 |
+
.checkbox label:after {
|
51 |
+
left: 2px;
|
52 |
+
width: 10px;
|
53 |
+
height: 10px;
|
54 |
+
}
|
55 |
+
|
56 |
+
.checkbox input:checked + label:after {
|
57 |
+
left: calc(100% - 2px - 10px);
|
58 |
+
}
|
59 |
+
}
|
client/css/dropdown.css
CHANGED
@@ -1,3 +1,10 @@
|
|
1 |
.dropdown {
|
2 |
-
|
3 |
-
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
.dropdown {
|
2 |
+
border: 1px solid var(--conversations);
|
3 |
+
}
|
4 |
+
|
5 |
+
@media screen and (max-width: 990px) {
|
6 |
+
.dropdown {
|
7 |
+
padding: 4px 8px;
|
8 |
+
font-size: 0.75rem;
|
9 |
+
}
|
10 |
+
}
|
client/css/field.css
CHANGED
@@ -1,18 +1,11 @@
|
|
1 |
.field {
|
2 |
-
height: fit-content;
|
3 |
display: flex;
|
4 |
align-items: center;
|
5 |
-
|
6 |
-
padding-right: 15px;
|
7 |
-
}
|
8 |
-
|
9 |
-
.field .about {
|
10 |
-
font-size: 14px;
|
11 |
-
color: var(--colour-3);
|
12 |
}
|
13 |
|
14 |
@media screen and (max-width: 990px) {
|
15 |
.field {
|
16 |
-
|
17 |
}
|
18 |
}
|
|
|
1 |
.field {
|
|
|
2 |
display: flex;
|
3 |
align-items: center;
|
4 |
+
padding: 4px;
|
|
|
|
|
|
|
|
|
|
|
|
|
5 |
}
|
6 |
|
7 |
@media screen and (max-width: 990px) {
|
8 |
.field {
|
9 |
+
flex-wrap: nowrap;
|
10 |
}
|
11 |
}
|
client/css/label.css
CHANGED
@@ -14,16 +14,3 @@ label {
|
|
14 |
overflow: hidden;
|
15 |
transition: 0.33s;
|
16 |
}
|
17 |
-
|
18 |
-
label:after {
|
19 |
-
content: "";
|
20 |
-
position: absolute;
|
21 |
-
top: 50%;
|
22 |
-
transform: translateY(-50%);
|
23 |
-
left: 5px;
|
24 |
-
width: 20px;
|
25 |
-
height: 20px;
|
26 |
-
background: var(--colour-3);
|
27 |
-
border-radius: 90px;
|
28 |
-
transition: 0.33s;
|
29 |
-
}
|
|
|
14 |
overflow: hidden;
|
15 |
transition: 0.33s;
|
16 |
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
client/css/options.css
ADDED
@@ -0,0 +1,10 @@
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
1 |
+
.options-container {
|
2 |
+
display: flex;
|
3 |
+
flex-wrap: wrap;
|
4 |
+
}
|
5 |
+
|
6 |
+
@media screen and (max-width: 990px) {
|
7 |
+
.options-container {
|
8 |
+
justify-content: space-between;
|
9 |
+
}
|
10 |
+
}
|
client/css/style.css
CHANGED
@@ -14,3 +14,4 @@
|
|
14 |
@import "./dropdown.css";
|
15 |
@import "./field.css";
|
16 |
@import "./select.css";
|
|
|
|
14 |
@import "./dropdown.css";
|
15 |
@import "./field.css";
|
16 |
@import "./select.css";
|
17 |
+
@import "./options.css";
|