dnet45/modules/uoa-repository-manager-service/trunk/app/features/horizontal-menu/horizontal-menu.component.scss @ 60616
1 |
@import 'src/styles'; |
---|---|
2 |
|
3 |
.info { |
4 |
min-width: 210px; |
5 |
}
|
6 |
|
7 |
.session-timer { |
8 |
font-size: 0.75em; |
9 |
text-align: right; |
10 |
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol"; |
11 |
}
|
12 |
|
13 |
::ng-deep .session-timer i { |
14 |
font-size: 0.75em; |
15 |
}
|
16 |
|
17 |
:host ::ng-deep .p-component { |
18 |
font-weight: 600; |
19 |
|
20 |
&.p-menubar { |
21 |
padding: 0; |
22 |
color: $black; |
23 |
border: none; |
24 |
width: 100%; |
25 |
border-radius: unset; |
26 |
background: $light-grey; |
27 |
position: sticky; |
28 |
top: 0; |
29 |
z-index: 1; |
30 |
|
31 |
.p-menubar-root-list { |
32 |
line-height: 1em; |
33 |
background: $light-grey; |
34 |
|
35 |
.p-menuitem { |
36 |
text-align: center; |
37 |
display: inline-block; |
38 |
|
39 |
.p-menuitem-link { |
40 |
padding: 15px 15px; |
41 |
background: $light-grey; |
42 |
color: $black; |
43 |
transition: 0.2s; |
44 |
border-radius: unset; |
45 |
border-right: 1px solid $black; |
46 |
|
47 |
&:hover { |
48 |
background: $black; |
49 |
|
50 |
.p-menuitem-text { |
51 |
color: $white; |
52 |
}
|
53 |
|
54 |
.p-menuitem-icon { |
55 |
color: $white; |
56 |
}
|
57 |
|
58 |
.p-submenu-icon { |
59 |
color: $white; |
60 |
}
|
61 |
}
|
62 |
|
63 |
&:focus { |
64 |
box-shadow: none; |
65 |
}
|
66 |
|
67 |
&.p-menuitem-link-active { |
68 |
background: $orange; |
69 |
|
70 |
.p-menuitem-text { |
71 |
color: $white; |
72 |
}
|
73 |
|
74 |
.p-menuitem-icon { |
75 |
color: $white; |
76 |
}
|
77 |
|
78 |
.p-submenu-icon { |
79 |
color: $white; |
80 |
}
|
81 |
}
|
82 |
|
83 |
.p-menuitem-text { |
84 |
color: $black; |
85 |
transition: 0.2s; |
86 |
}
|
87 |
|
88 |
.p-menuitem-icon { |
89 |
color: $black; |
90 |
transition: 0.2s; |
91 |
}
|
92 |
|
93 |
.p-submenu-icon { |
94 |
color: $black; |
95 |
transition: 0.2s; |
96 |
}
|
97 |
}
|
98 |
|
99 |
&:last-child { |
100 |
.p-menuitem-link { |
101 |
border-right: unset; |
102 |
}
|
103 |
}
|
104 |
}
|
105 |
}
|
106 |
|
107 |
.p-submenu-list { |
108 |
width: 13.5rem; |
109 |
padding: 0; |
110 |
background: $medium-grey; |
111 |
|
112 |
.p-menuitem { |
113 |
width: 100%; |
114 |
text-align: left; |
115 |
|
116 |
.p-menuitem-link { |
117 |
padding: 10px 10px; |
118 |
background: $medium-grey; |
119 |
color: $white; |
120 |
transition: 0.2s; |
121 |
border-radius: unset; |
122 |
border: unset; |
123 |
font-size: 0.9em; |
124 |
|
125 |
.p-menuitem-text { |
126 |
width: 100%; |
127 |
color: $white; |
128 |
}
|
129 |
}
|
130 |
}
|
131 |
}
|
132 |
}
|
133 |
|
134 |
&.p-button-logout { |
135 |
background: $orange; |
136 |
color: $white; |
137 |
border: 1px solid $orange; |
138 |
border-radius: unset; |
139 |
padding: 0.7rem; |
140 |
|
141 |
&:hover { |
142 |
background: $dark-orange-1; |
143 |
color: $white; |
144 |
border: 1px solid $dark-orange-1; |
145 |
}
|
146 |
|
147 |
&:focus { |
148 |
box-shadow: unset; |
149 |
}
|
150 |
}
|
151 |
}
|
152 |
|
153 |
@media (max-width: 960px) { |
154 |
:host ::ng-deep .p-component { |
155 |
&.p-menubar { |
156 |
color: $black; |
157 |
width: auto; |
158 |
background: white; |
159 |
top: -1px; |
160 |
|
161 |
.p-menubar-button { |
162 |
border-radius: unset; |
163 |
background: $light-grey; |
164 |
color: $black; |
165 |
width: 2.9rem; |
166 |
height: 2.9rem; |
167 |
|
168 |
&:hover { |
169 |
color: $white; |
170 |
background: $black; |
171 |
}
|
172 |
|
173 |
&:focus { |
174 |
box-shadow: unset; |
175 |
}
|
176 |
}
|
177 |
|
178 |
.p-menubar-root-list { |
179 |
padding: 0; |
180 |
|
181 |
.p-menuitem { |
182 |
|
183 |
&:first-child { |
184 |
.p-menuitem-link { |
185 |
border-top: unset; |
186 |
}
|
187 |
}
|
188 |
|
189 |
.p-menuitem-link { |
190 |
border-right: unset; |
191 |
border-top: 1px solid $black; |
192 |
}
|
193 |
}
|
194 |
}
|
195 |
|
196 |
.p-submenu-list { |
197 |
width: 100%; |
198 |
|
199 |
.p-menuitem { |
200 |
.p-menuitem-link { |
201 |
border-top: unset; |
202 |
padding: 10px 40px; |
203 |
}
|
204 |
}
|
205 |
}
|
206 |
}
|
207 |
}
|
208 |
}
|