monra commited on
Commit
7f0cf80
1 Parent(s): 9c956cd

Improves responsiveness

Browse files
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
- input[type="checkbox"] {
2
  height: 0;
3
  width: 0;
4
  display: none;
5
  }
6
 
7
- input:checked + label {
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
 
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
- border: 1px solid var(--conversations);
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
- gap: 16px;
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
- width: fit-content;
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";