Skip to content

Commit 2c563c6

Browse files
committed
Small progress stage of Scoped CSS refactor
1 parent 3a299f5 commit 2c563c6

File tree

3 files changed

+71
-67
lines changed

3 files changed

+71
-67
lines changed
Lines changed: 0 additions & 10 deletions
Original file line numberDiff line numberDiff line change
@@ -1,10 +0,0 @@
1-
.barcode {
2-
text-decoration: none;
3-
font-weight: 400;
4-
font-size: 2.5rem;
5-
}
6-
7-
::deep .navbar-nav li {
8-
padding-left: 1rem;
9-
white-space: nowrap;
10-
}
Lines changed: 1 addition & 56 deletions
Original file line numberDiff line numberDiff line change
@@ -1,56 +1 @@
1-
.search-bar {
2-
border: 2px solid;
3-
display: flex;
4-
border-radius: 100vh;
5-
overflow: hidden;
6-
height: 40px;
7-
padding: 3px;
8-
width: 40px;
9-
position: relative;
10-
transition: width 300ms ease-in-out;
11-
}
12-
13-
.search-bar-input {
14-
flex-grow: 1;
15-
padding: 0 .5em;
16-
border: 0;
17-
opacity: 0;
18-
background: transparent;
19-
position: absolute;
20-
top: 0;
21-
bottom: 0;
22-
left: 0;
23-
z-index: 2;
24-
cursor: pointer;
25-
font-weight: 400;
26-
color: var(--bs-navbar-color);
27-
}
28-
29-
.search-bar-input:focus {
30-
outline: 0;
31-
}
32-
.search-bar-button {
33-
border: 0;
34-
border-radius: 100vh;
35-
margin-left: auto;
36-
width: 30px;
37-
height: 30px;
38-
cursor: pointer;
39-
background: transparent;
40-
/*
41-
TODO: That is really ugly
42-
The problem is that every other button is behind nav-
43-
*/
44-
color: var(--bs-navbar-color);
45-
}
46-
47-
.search-bar:focus-within {
48-
width: 170px;
49-
}
50-
51-
.search-bar:focus-within .search-bar-input {
52-
cursor: initial;
53-
opacity: 1;
54-
z-index: initial;
55-
max-width: 130px;
56-
}
1+


src/LinkDotNet.Blog.Web/wwwroot/css/basic.css

Lines changed: 70 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -178,4 +178,73 @@ code {
178178
bottom: 0;
179179
width: 100%;
180180
height: 2.5rem;
181-
}
181+
}
182+
183+
.barcode {
184+
text-decoration: none;
185+
font-weight: 400;
186+
font-size: 2.5rem;
187+
}
188+
189+
::deep .navbar-nav li {
190+
padding-left: 1rem;
191+
white-space: nowrap;
192+
}
193+
194+
.search-bar {
195+
border: 2px solid;
196+
display: flex;
197+
border-radius: 100vh;
198+
overflow: hidden;
199+
height: 40px;
200+
padding: 3px;
201+
width: 40px;
202+
position: relative;
203+
transition: width 300ms ease-in-out;
204+
}
205+
206+
.search-bar-input {
207+
flex-grow: 1;
208+
padding: 0 .5em;
209+
border: 0;
210+
opacity: 0;
211+
background: transparent;
212+
position: absolute;
213+
top: 0;
214+
bottom: 0;
215+
left: 0;
216+
z-index: 2;
217+
cursor: pointer;
218+
font-weight: 400;
219+
color: var(--bs-navbar-color);
220+
}
221+
222+
.search-bar-input:focus {
223+
outline: 0;
224+
}
225+
.search-bar-button {
226+
border: 0;
227+
border-radius: 100vh;
228+
margin-left: auto;
229+
width: 30px;
230+
height: 30px;
231+
cursor: pointer;
232+
background: transparent;
233+
/*
234+
TODO: That is really ugly
235+
The problem is that every other button is behind nav-
236+
*/
237+
color: var(--bs-navbar-color);
238+
}
239+
240+
.search-bar:focus-within {
241+
width: 170px;
242+
}
243+
244+
.search-bar:focus-within .search-bar-input {
245+
cursor: initial;
246+
opacity: 1;
247+
z-index: initial;
248+
max-width: 130px;
249+
}
250+

0 commit comments

Comments
 (0)