|
1 | 1 | .navbar-toggler { |
2 | | - position: absolute; |
3 | | - top: 0.5rem; |
4 | | - right: 1rem; |
5 | | - width: 3.5rem; |
6 | | - height: 2.5rem; |
7 | | - color: white; |
8 | | - background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") |
9 | | - no-repeat center/1.75rem rgba(255, 255, 255, 0.1); |
10 | | - border: 1px solid rgba(255, 255, 255, 0.1); |
11 | | - cursor: pointer; |
12 | | - appearance: none; |
| 2 | + position: absolute; |
| 3 | + top: 0.5rem; |
| 4 | + right: 1rem; |
| 5 | + width: 3.5rem; |
| 6 | + height: 2.5rem; |
| 7 | + color: white; |
| 8 | + background: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba%28255, 255, 255, 0.55%29' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e") |
| 9 | + no-repeat center/1.75rem rgba(255, 255, 255, 0.1); |
| 10 | + border: 1px solid rgba(255, 255, 255, 0.1); |
| 11 | + cursor: pointer; |
| 12 | + appearance: none; |
13 | 13 | } |
14 | 14 |
|
15 | 15 | .navbar-toggler:checked { |
16 | | - background-color: rgba(255, 255, 255, 0.5); |
| 16 | + background-color: rgba(255, 255, 255, 0.5); |
17 | 17 | } |
18 | 18 |
|
19 | 19 | .top-row { |
20 | | - height: 3.5rem; |
21 | | - background-color: rgba(0, 0, 0, 0.4); |
| 20 | + height: 3.5rem; |
| 21 | + background-color: rgba(0, 0, 0, 0.4); |
22 | 22 | } |
23 | 23 |
|
24 | 24 | .navbar-brand { |
25 | | - font-size: 1.1rem; |
| 25 | + font-size: 1.1rem; |
26 | 26 | } |
27 | 27 |
|
28 | 28 | .bi { |
29 | | - position: relative; |
30 | | - top: -1px; |
31 | | - display: inline-block; |
32 | | - width: 1.25rem; |
33 | | - height: 1.25rem; |
34 | | - margin-right: 0.75rem; |
35 | | - background-size: cover; |
| 29 | + position: relative; |
| 30 | + top: -1px; |
| 31 | + display: inline-block; |
| 32 | + width: 1.25rem; |
| 33 | + height: 1.25rem; |
| 34 | + margin-right: 0.75rem; |
| 35 | + background-size: cover; |
36 | 36 | } |
37 | 37 |
|
38 | 38 | .bi-house-door-fill-nav-menu { |
39 | | - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); |
| 39 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-house-door-fill' viewBox='0 0 16 16'%3E%3Cpath d='M6.5 14.5v-3.505c0-.245.25-.495.5-.495h2c.25 0 .5.25.5.5v3.5a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5v-7a.5.5 0 0 0-.146-.354L13 5.793V2.5a.5.5 0 0 0-.5-.5h-1a.5.5 0 0 0-.5.5v1.293L8.354 1.146a.5.5 0 0 0-.708 0l-6 6A.5.5 0 0 0 1.5 7.5v7a.5.5 0 0 0 .5.5h4a.5.5 0 0 0 .5-.5Z'/%3E%3C/svg%3E"); |
40 | 40 | } |
41 | 41 |
|
42 | 42 | .bi-plus-square-fill-nav-menu { |
43 | | - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E"); |
| 43 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-plus-square-fill' viewBox='0 0 16 16'%3E%3Cpath d='M2 0a2 2 0 0 0-2 2v12a2 2 0 0 0 2 2h12a2 2 0 0 0 2-2V2a2 2 0 0 0-2-2H2zm6.5 4.5v3h3a.5.5 0 0 1 0 1h-3v3a.5.5 0 0 1-1 0v-3h-3a.5.5 0 0 1 0-1h3v-3a.5.5 0 0 1 1 0z'/%3E%3C/svg%3E"); |
44 | 44 | } |
45 | 45 |
|
46 | 46 | .bi-list-nested-nav-menu { |
47 | | - background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); |
| 47 | + background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' class='bi bi-list-nested' viewBox='0 0 16 16'%3E%3Cpath fill-rule='evenodd' d='M4.5 11.5A.5.5 0 0 1 5 11h10a.5.5 0 0 1 0 1H5a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 3 7h10a.5.5 0 0 1 0 1H3a.5.5 0 0 1-.5-.5zm-2-4A.5.5 0 0 1 1 3h10a.5.5 0 0 1 0 1H1a.5.5 0 0 1-.5-.5z'/%3E%3C/svg%3E"); |
48 | 48 | } |
49 | 49 |
|
50 | 50 | .nav-item { |
51 | | - padding-bottom: 0.5rem; |
52 | | - font-size: 0.9rem; |
| 51 | + padding-bottom: 0.5rem; |
| 52 | + font-size: 0.9rem; |
53 | 53 | } |
54 | 54 |
|
55 | 55 | .nav-item:first-of-type { |
56 | | - padding-top: 1rem; |
| 56 | + padding-top: 1rem; |
57 | 57 | } |
58 | 58 |
|
59 | 59 | .nav-item:last-of-type { |
60 | | - padding-bottom: 1rem; |
| 60 | + padding-bottom: 1rem; |
61 | 61 | } |
62 | 62 |
|
63 | 63 | .nav-item ::deep .nav-link { |
64 | | - display: flex; |
65 | | - align-items: center; |
66 | | - width: 100%; |
67 | | - height: 3rem; |
68 | | - color: #d7d7d7; |
69 | | - line-height: 3rem; |
70 | | - background: none; |
71 | | - border: none; |
72 | | - border-radius: 4px; |
| 64 | + display: flex; |
| 65 | + align-items: center; |
| 66 | + width: 100%; |
| 67 | + height: 3rem; |
| 68 | + color: #d7d7d7; |
| 69 | + line-height: 3rem; |
| 70 | + background: none; |
| 71 | + border: none; |
| 72 | + border-radius: 4px; |
73 | 73 | } |
74 | 74 |
|
75 | 75 | .nav-item ::deep a.active { |
76 | | - color: white; |
77 | | - background-color: rgba(255, 255, 255, 0.37); |
| 76 | + color: white; |
| 77 | + background-color: rgba(255, 255, 255, 0.37); |
78 | 78 | } |
79 | 79 |
|
80 | 80 | .nav-item ::deep .nav-link:hover { |
81 | | - color: white; |
82 | | - background-color: rgba(255, 255, 255, 0.1); |
| 81 | + color: white; |
| 82 | + background-color: rgba(255, 255, 255, 0.1); |
83 | 83 | } |
84 | 84 |
|
85 | 85 | .nav-scrollable { |
86 | | - display: none; |
| 86 | + display: none; |
87 | 87 | } |
88 | 88 |
|
89 | 89 | .navbar-toggler:checked ~ .nav-scrollable { |
90 | | - display: block; |
| 90 | + display: block; |
91 | 91 | } |
92 | 92 |
|
93 | 93 | @media (min-width: 641px) { |
94 | | - .navbar-toggler { |
95 | | - display: none; |
96 | | - } |
97 | | - |
98 | | - .nav-scrollable { |
99 | | - /* Never collapse the sidebar for wide screens */ |
100 | | - display: block; |
101 | | - |
102 | | - /* Allow sidebar to scroll for tall menus */ |
103 | | - height: calc(100vh - 3.5rem); |
104 | | - overflow-y: auto; |
105 | | - } |
| 94 | + .navbar-toggler { |
| 95 | + display: none; |
| 96 | + } |
| 97 | + |
| 98 | + .nav-scrollable { |
| 99 | + /* Never collapse the sidebar for wide screens */ |
| 100 | + display: block; |
| 101 | + |
| 102 | + /* Allow sidebar to scroll for tall menus */ |
| 103 | + height: calc(100vh - 3.5rem); |
| 104 | + overflow-y: auto; |
| 105 | + } |
106 | 106 | } |
0 commit comments