Skip to content

Commit 9cbc8c6

Browse files
githubering182githubering182
committed
ref selectors css
1 parent e8b43f9 commit 9cbc8c6

File tree

4 files changed

+235
-243
lines changed

4 files changed

+235
-243
lines changed

‎frontend-app/src/components/ui/AttributeMultiSelector/styles.css‎

Lines changed: 69 additions & 72 deletions
Original file line numberDiff line numberDiff line change
@@ -1,114 +1,111 @@
11
.iss__filterSelector {
2-
border-radius: 4px;
3-
position: relative;
4-
width: 100%;
5-
padding: 4px 8px;
6-
background-color: white;
7-
border: 1px solid var(--issBrand);
8-
height: fit-content;
2+
border-radius: 4px;
3+
position: relative;
4+
width: 100%;
5+
padding: 4px 8px;
6+
background-color: white;
7+
border: 1px solid var(--issBrand);
8+
height: fit-content;
99
}
1010

1111
.iss__filterSelector__selected {
12-
position: relative;
13-
cursor: pointer;
14-
display: inline-block;
15-
width: 100%;
16-
height: 100%;
17-
display: flex;
18-
flex-wrap: wrap;
19-
gap: 4px;
12+
position: relative;
13+
cursor: pointer;
14+
display: inline-block;
15+
width: 100%;
16+
height: 100%;
17+
display: flex;
18+
flex-wrap: wrap;
19+
gap: 4px;
2020
}
2121

2222
.iss__filterSelector__selected > span {
23-
padding: 2px 8px;
24-
color: black;
25-
font-size: 14px;
26-
background-color: var(--issLightBrand);
27-
border-radius: 4px;
23+
padding: 2px 8px;
24+
color: black;
25+
font-size: 14px;
26+
background-color: var(--issLightBrand);
27+
border-radius: 4px;
2828
}
2929

3030
.iss__filterSelector__selected > svg {
31-
position: absolute;
32-
top: 20%;
33-
right: 0;
31+
position: absolute;
32+
top: 20%;
33+
right: 0;
3434
}
3535

3636
.iss__filterSelector__options {
37-
position: absolute;
38-
bottom: 0;
39-
left: 0;
40-
z-index: 1;
41-
width: 100%;
42-
overflow-y: scroll;
43-
background-color: white;
44-
max-height: 0;
45-
outline: 1px solid transparent;
46-
transform: translateY(100%);
37+
position: absolute;
38+
bottom: 0;
39+
left: 0;
40+
z-index: 1;
41+
width: 100%;
42+
overflow-y: scroll;
43+
background-color: white;
44+
max-height: 0;
45+
outline: 1px solid transparent;
46+
transform: translateY(100%);
4747
}
4848

4949
.iss__filterSelector__options > div,
5050
.iss__filterSelector__options > form {
51-
padding: 4px 8px;
52-
display: flex;
53-
flex-direction: column;
51+
padding: 4px 8px;
52+
display: flex;
53+
flex-direction: column;
5454
}
5555

5656
.options--open {
57-
outline-color: var(--issBrand);
58-
max-height: 500px;
59-
transition:
60-
max-height 0.3s ease,
61-
outline 0.5s ease;
57+
outline-color: var(--issBrand);
58+
max-height: 500px;
6259
}
6360

6461
.iss__filterSelector__level {
65-
font-size: 14px;
66-
cursor: pointer;
67-
color: black;
68-
padding: 4px 0;
69-
border-bottom: 1px solid var(--issBrand);
70-
margin-bottom: 8px;
62+
font-size: 14px;
63+
cursor: pointer;
64+
color: black;
65+
padding: 4px 0;
66+
border-bottom: 1px solid var(--issBrand);
67+
margin-bottom: 8px;
7168
}
7269

7370
.iss__filterSelector__submit {
74-
margin: 12px 0;
75-
background-color: unset;
76-
border: 1px solid var(--issBrand);
77-
padding: 4px;
78-
width: fit-content;
79-
min-width: 60px;
80-
place-self: center;
81-
cursor: pointer;
82-
transition:
83-
background-color 0.3s ease,
84-
color 0.3s ease;
71+
margin: 12px 0;
72+
background-color: unset;
73+
border: 1px solid var(--issBrand);
74+
padding: 4px;
75+
width: fit-content;
76+
min-width: 60px;
77+
place-self: center;
78+
cursor: pointer;
79+
transition:
80+
background-color 0.3s ease,
81+
color 0.3s ease;
8582
}
8683

8784
.iss__validationFilter__form .iss__selector,
8885
.iss__validationFilter__form .iss__filterSelector {
89-
padding: 0;
86+
padding: 0;
9087
}
9188

9289
.iss__validationFilter__form .iss__selectorsWrap {
93-
margin-bottom: 14px;
90+
margin-bottom: 14px;
9491
}
9592

9693
.off--title {
97-
background-color: transparent !important;
94+
background-color: transparent !important;
9895
}
9996

10097
@media (hover: hover) {
101-
.iss__filterSelector__option:hover {
102-
background-color: var(--issLightBrand);
103-
cursor: pointer;
104-
}
98+
.iss__filterSelector__option:hover {
99+
background-color: var(--issLightBrand);
100+
cursor: pointer;
101+
}
105102

106-
.iss__filterSelector__level:hover {
107-
background-color: var(--issLightBrand);
108-
}
103+
.iss__filterSelector__level:hover {
104+
background-color: var(--issLightBrand);
105+
}
109106

110-
.iss__filterSelector__submit:hover {
111-
background-color: var(--issBrand);
112-
color: white;
113-
}
107+
.iss__filterSelector__submit:hover {
108+
background-color: var(--issBrand);
109+
color: white;
110+
}
114111
}

‎frontend-app/src/components/ui/DateSelector/styles.css‎

Lines changed: 78 additions & 81 deletions
Original file line numberDiff line numberDiff line change
@@ -1,123 +1,120 @@
11
.iss__dateSelector {
2-
border-radius: 4px;
3-
position: relative;
4-
width: 100%;
5-
padding: 4px 8px;
6-
background-color: white;
7-
border: 1px solid var(--issBrand);
8-
height: fit-content;
2+
border-radius: 4px;
3+
position: relative;
4+
width: 100%;
5+
padding: 4px 8px;
6+
background-color: white;
7+
border: 1px solid var(--issBrand);
8+
height: fit-content;
99
}
1010

1111
.iss__dateSelector__selected {
12-
position: relative;
13-
cursor: pointer;
14-
display: inline-block;
15-
width: 100%;
16-
height: 100%;
17-
display: flex;
18-
flex-wrap: wrap;
19-
gap: 4px;
12+
position: relative;
13+
cursor: pointer;
14+
display: inline-block;
15+
width: 100%;
16+
height: 100%;
17+
display: flex;
18+
flex-wrap: wrap;
19+
gap: 4px;
2020
}
2121

2222
.iss__dateSelector__selected > span {
23-
padding: 2px 4px;
24-
color: black;
25-
font-size: 12px;
26-
background-color: var(--issLightBrand);
27-
border-radius: 4px;
28-
white-space: nowrap;
23+
padding: 2px 4px;
24+
color: black;
25+
font-size: 12px;
26+
background-color: var(--issLightBrand);
27+
border-radius: 4px;
28+
white-space: nowrap;
2929
}
3030

3131
.off--title {
32-
background-color: transparent !important;
33-
font-size: 14px;
32+
background-color: transparent !important;
33+
font-size: 14px;
3434
}
3535

3636
.iss__dateSelector__selected > svg {
37-
position: absolute;
38-
top: 20%;
39-
right: 0;
37+
position: absolute;
38+
top: 20%;
39+
right: 0;
4040
}
4141

4242
.iss__dateSelector__options {
43-
position: absolute;
44-
bottom: 0;
45-
left: 0;
46-
z-index: 1;
47-
width: 100%;
48-
overflow-y: hidden;
49-
background-color: white;
50-
max-height: 0;
51-
outline: 1px solid transparent;
52-
transform: translateY(100%);
43+
position: absolute;
44+
bottom: 0;
45+
left: 0;
46+
z-index: 1;
47+
width: 100%;
48+
overflow-y: hidden;
49+
background-color: white;
50+
max-height: 0;
51+
outline: 1px solid transparent;
52+
transform: translateY(100%);
5353
}
5454

5555
.iss__dateSelector__options > div {
56-
padding: 4px 8px;
57-
display: flex;
58-
flex-direction: column;
56+
padding: 4px 8px;
57+
display: flex;
58+
flex-direction: column;
5959
}
6060

6161
.options--open {
62-
outline-color: var(--issBrand);
63-
max-height: 500px;
64-
transition:
65-
max-height 0.3s ease,
66-
outline 0.5s ease;
62+
outline-color: var(--issBrand);
63+
max-height: 500px;
6764
}
6865

6966
.iss__dateSelector__level,
7067
.iss__dateSelector__input {
71-
font-size: 14px;
72-
cursor: pointer;
73-
color: black;
74-
padding: 4px 0;
75-
border-bottom: 1px solid var(--issBrand);
76-
margin-bottom: 8px;
68+
font-size: 14px;
69+
cursor: pointer;
70+
color: black;
71+
padding: 4px 0;
72+
border-bottom: 1px solid var(--issBrand);
73+
margin-bottom: 8px;
7774
}
7875
.iss__dateSelector__input {
79-
margin-bottom: 4px;
80-
display: flex;
81-
flex-direction: column;
76+
margin-bottom: 4px;
77+
display: flex;
78+
flex-direction: column;
8279
}
8380
.iss__dateSelector__input > span {
84-
font-size: 12px;
85-
opacity: 0.5;
81+
font-size: 12px;
82+
opacity: 0.5;
8683
}
8784

8885
.iss__dateSelector__selector {
89-
border: none;
90-
outline: none;
91-
font-size: 14px;
92-
cursor: text;
86+
border: none;
87+
outline: none;
88+
font-size: 14px;
89+
cursor: text;
9390
}
9491

9592
.iss__dateSelector__submit {
96-
margin: 12px 0;
97-
background-color: unset;
98-
border: 1px solid var(--issBrand);
99-
padding: 4px;
100-
width: fit-content;
101-
min-width: 60px;
102-
place-self: center;
103-
cursor: pointer;
104-
transition:
105-
background-color 0.3s ease,
106-
color 0.3s ease;
93+
margin: 12px 0;
94+
background-color: unset;
95+
border: 1px solid var(--issBrand);
96+
padding: 4px;
97+
width: fit-content;
98+
min-width: 60px;
99+
place-self: center;
100+
cursor: pointer;
101+
transition:
102+
background-color 0.3s ease,
103+
color 0.3s ease;
107104
}
108105

109106
@media (hover: hover) {
110-
.iss__dateSelector__option:hover {
111-
background-color: var(--issLightBrand);
112-
cursor: pointer;
113-
}
107+
.iss__dateSelector__option:hover {
108+
background-color: var(--issLightBrand);
109+
cursor: pointer;
110+
}
114111

115-
.iss__dateSelector__level:hover {
116-
background-color: var(--issLightBrand);
117-
}
112+
.iss__dateSelector__level:hover {
113+
background-color: var(--issLightBrand);
114+
}
118115

119-
.iss__dateSelector__submit:hover {
120-
background-color: var(--issBrand);
121-
color: white;
122-
}
116+
.iss__dateSelector__submit:hover {
117+
background-color: var(--issBrand);
118+
color: white;
119+
}
123120
}

0 commit comments

Comments
 (0)