commonroutesApp/www/lib/ionic/scss/_bar.scss
www/lib/ionic/scss/_bar.scssRaw
1
2/**
3 * Bar (Headers and Footers)
4 * --------------------------------------------------
5 */
6
7.bar {
8 @include display-flex();
9 @include translate3d(0,0,0);
10 @include user-select(none);
11 position: absolute;
12 right: 0;
13 left: 0;
14 z-index: $z-index-bar;
15
16 @include box-sizing(border-box);
17 padding: $bar-padding-portrait;
18
19 width: 100%;
20 height: $bar-height;
21 border-width: 0;
22 border-style: solid;
23 border-top: 1px solid transparent;
24 border-bottom: 1px solid $bar-default-border;
25
26 background-color: $bar-default-bg;
27
28 /* border-width: 1px will actually create 2 device pixels on retina */
29 /* this nifty trick sets an actual 1px border on hi-res displays */
30 background-size: 0;
31 @media (min--moz-device-pixel-ratio: 1.5),
32 (-webkit-min-device-pixel-ratio: 1.5),
33 (min-device-pixel-ratio: 1.5),
34 (min-resolution: 144dpi),
35 (min-resolution: 1.5dppx) {
36 border: none;
37 background-image: linear-gradient(0deg, $bar-default-border, $bar-default-border 50%, transparent 50%);
38 background-position: bottom;
39 background-size: 100% 1px;
40 background-repeat: no-repeat;
41 }
42
43 &.bar-clear {
44 border: none;
45 background: none;
46 color: #fff;
47
48 .button {
49 color: #fff;
50 }
51 .title {
52 color: #fff;
53 }
54 }
55
56 &.item-input-inset {
57 .item-input-wrapper {
58 margin-top: -1px;
59
60 input {
61 padding-left: 8px;
62 width: 94%;
63 height: 28px;
64 background: transparent;
65 }
66 }
67 }
68
69 &.bar-light {
70 @include bar-style($bar-light-bg, $bar-light-border, $bar-light-text);
71 &.bar-footer{
72 background-image: linear-gradient(180deg, $bar-light-border, $bar-light-border 50%, transparent 50%);
73 }
74 }
75 &.bar-stable {
76 @include bar-style($bar-stable-bg, $bar-stable-border, $bar-stable-text);
77 &.bar-footer{
78 background-image: linear-gradient(180deg, $bar-stable-border, $bar-stable-border 50%, transparent 50%);
79 }
80 }
81 &.bar-positive {
82 @include bar-style($bar-positive-bg, $bar-positive-border, $bar-positive-text);
83 &.bar-footer{
84 background-image: linear-gradient(180deg, $bar-positive-border, $bar-positive-border 50%, transparent 50%);
85 }
86 }
87 &.bar-calm {
88 @include bar-style($bar-calm-bg, $bar-calm-border, $bar-calm-text);
89 &.bar-footer{
90 background-image: linear-gradient(180deg, $bar-calm-border, $bar-calm-border 50%, transparent 50%);
91 }
92 }
93 &.bar-assertive {
94 @include bar-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-text);
95 &.bar-footer{
96 background-image: linear-gradient(180deg, $bar-assertive-border, $bar-assertive-border 50%, transparent 50%);
97 }
98 }
99 &.bar-balanced {
100 @include bar-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-text);
101 &.bar-footer{
102 background-image: linear-gradient(180deg, $bar-balanced-border, $bar-balanced-border 50%, transparent 50%);
103 }
104 }
105 &.bar-energized {
106 @include bar-style($bar-energized-bg, $bar-energized-border, $bar-energized-text);
107 &.bar-footer{
108 background-image: linear-gradient(180deg, $bar-energized-border, $bar-energized-border 50%, transparent 50%);
109 }
110 }
111 &.bar-royal {
112 @include bar-style($bar-royal-bg, $bar-royal-border, $bar-royal-text);
113 &.bar-footer{
114 background-image: linear-gradient(180deg, $bar-royal-border, $bar-royal-border 50%, transparent 50%);
115 }
116 }
117 &.bar-dark {
118 @include bar-style($bar-dark-bg, $bar-dark-border, $bar-dark-text);
119 &.bar-footer{
120 background-image: linear-gradient(180deg, $bar-dark-border, $bar-dark-border 50%, transparent 50%);
121 }
122 }
123
124 // Title inside of a bar is centered
125 .title {
126 display: block;
127 position: absolute;
128
129 top: 0;
130 right: 0;
131 left: 0;
132 z-index: $z-index-bar-title;
133 overflow: hidden;
134
135 margin: 0 10px;
136
137 min-width: 30px;
138 height: $bar-height - 1;
139
140 text-align: center;
141
142 // Go into ellipsis if too small
143 text-overflow: ellipsis;
144 white-space: nowrap;
145
146 font-size: $bar-title-font-size;
147 font-weight: $headings-font-weight;
148
149 line-height: $bar-height;
150
151 &.title-left {
152 text-align: left;
153 }
154 &.title-right {
155 text-align: right;
156 }
157 }
158
159 .title a {
160 color: inherit;
161 }
162
163 .button, button {
164 z-index: $z-index-bar-button;
165 padding: 0 $button-bar-button-padding;
166 min-width: initial;
167 min-height: $button-bar-button-height - 1;
168 font-weight: 400;
169 font-size: $button-bar-button-font-size;
170 line-height: $button-bar-button-height;
171
172 &.button-icon:before,
173 .icon:before,
174 &.icon:before,
175 &.icon-left:before,
176 &.icon-right:before {
177 padding-right: 2px;
178 padding-left: 2px;
179 font-size: $button-bar-button-icon-size;
180 line-height: $button-bar-button-height;
181 }
182
183 &.button-icon {
184 font-size: $bar-title-font-size;
185 .icon:before,
186 &:before,
187 &.icon-left:before,
188 &.icon-right:before {
189 vertical-align: top;
190 font-size: $button-large-icon-size;
191 line-height: $button-bar-button-height;
192 }
193 }
194 &.button-clear {
195 padding-right: 2px;
196 padding-left: 2px;
197 font-weight: 300;
198 font-size: $bar-title-font-size;
199
200 .icon:before,
201 &.icon:before,
202 &.icon-left:before,
203 &.icon-right:before {
204 font-size: $button-large-icon-size;
205 line-height: $button-bar-button-height;
206 }
207 }
208
209 &.back-button {
210 display: block;
211 margin-right: 5px;
212 padding: 0;
213 white-space: nowrap;
214 font-weight: 400;
215 }
216
217 &.back-button.active,
218 &.back-button.activated {
219 opacity: 0.2;
220 }
221 }
222
223 .button-bar > .button,
224 .buttons > .button {
225 min-height: $button-bar-button-height - 1;
226 line-height: $button-bar-button-height;
227 }
228
229 .button-bar + .button,
230 .button + .button-bar {
231 margin-left: 5px;
232 }
233
234 // Android 4.4 messes with the display property
235 .buttons,
236 .buttons.primary-buttons,
237 .buttons.secondary-buttons {
238 display: inherit;
239 }
240 .buttons span {
241 display: inline-block;
242 }
243 .buttons-left span {
244 margin-right: 5px;
245 display: inherit;
246 }
247 .buttons-right span {
248 margin-left: 5px;
249 display: inherit;
250 }
251
252 // Place the last button in a bar on the right of the bar
253 .title + .button:last-child,
254 > .button + .button:last-child,
255 > .button.pull-right,
256 .buttons.pull-right,
257 .title + .buttons {
258 position: absolute;
259 top: 5px;
260 right: 5px;
261 bottom: 5px;
262 }
263
264}
265
266.platform-android {
267
268 .nav-bar-has-subheader .bar {
269 background-image: none;
270 }
271
272 .bar {
273
274 .back-button .icon:before {
275 font-size: 24px;
276 }
277
278 .title {
279 font-size: 19px;
280 line-height: $bar-height;
281 }
282 }
283
284}
285
286// Default styles for buttons inside of styled bars
287.bar-light {
288 .button {
289 @include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text);
290 @include button-clear($bar-light-text, $bar-title-font-size);
291 }
292}
293.bar-stable {
294 .button {
295 @include button-style($bar-stable-bg, $bar-stable-border, $bar-stable-active-bg, $bar-stable-active-border, $bar-stable-text);
296 @include button-clear($bar-stable-text, $bar-title-font-size);
297 }
298}
299.bar-positive {
300 .button {
301 @include button-style($bar-positive-bg, $bar-positive-border, $bar-positive-active-bg, $bar-positive-active-border, $bar-positive-text);
302 @include button-clear(#fff, $bar-title-font-size);
303 }
304}
305.bar-calm {
306 .button {
307 @include button-style($bar-calm-bg, $bar-calm-border, $bar-calm-active-bg, $bar-calm-active-border, $bar-calm-text);
308 @include button-clear(#fff, $bar-title-font-size);
309 }
310}
311.bar-assertive {
312 .button {
313 @include button-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-active-bg, $bar-assertive-active-border, $bar-assertive-text);
314 @include button-clear(#fff, $bar-title-font-size);
315 }
316}
317.bar-balanced {
318 .button {
319 @include button-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-active-bg, $bar-balanced-active-border, $bar-balanced-text);
320 @include button-clear(#fff, $bar-title-font-size);
321 }
322}
323.bar-energized {
324 .button {
325 @include button-style($bar-energized-bg, $bar-energized-border, $bar-energized-active-bg, $bar-energized-active-border, $bar-energized-text);
326 @include button-clear(#fff, $bar-title-font-size);
327 }
328}
329.bar-royal {
330 .button {
331 @include button-style($bar-royal-bg, $bar-royal-border, $bar-royal-active-bg, $bar-royal-active-border, $bar-royal-text);
332 @include button-clear(#fff, $bar-title-font-size);
333 }
334}
335.bar-dark {
336 .button {
337 @include button-style($bar-dark-bg, $bar-dark-border, $bar-dark-active-bg, $bar-dark-active-border, $bar-dark-text);
338 @include button-clear(#fff, $bar-title-font-size);
339 }
340}
341
342// Header at top
343.bar-header {
344 top: 0;
345 border-top-width: 0;
346 border-bottom-width: 1px;
347 &.has-tabs-top{
348 border-bottom-width: 0px;
349 background-image: none;
350 }
351}
352.tabs-top .bar-header{
353 border-bottom-width: 0px;
354 background-image: none;
355}
356
357// Footer at bottom
358.bar-footer {
359 bottom: 0;
360 border-top-width: 1px;
361 border-bottom-width: 0;
362 background-position: top;
363
364 height: $bar-footer-height;
365
366 &.item-input-inset {
367 position: absolute;
368 }
369
370 .title {
371 height: $bar-footer-height - 1;
372 line-height: $bar-footer-height;
373 }
374}
375
376// Don't render padding if the bar is just for tabs
377.bar-tabs {
378 padding: 0;
379}
380
381.bar-subheader {
382 top: $bar-height;
383
384 height: $bar-subheader-height;
385
386 .title {
387 height: $bar-subheader-height - 1;
388 line-height: $bar-subheader-height;
389 }
390}
391.bar-subfooter {
392 bottom: $bar-footer-height;
393
394 height: $bar-subfooter-height;
395
396 .title {
397 height: $bar-subfooter-height - 1;
398 line-height: $bar-subfooter-height;
399 }
400}
401
402.nav-bar-block {
403 position: absolute;
404 top: 0;
405 right: 0;
406 left: 0;
407 z-index: $z-index-bar;
408}
409
410.bar .back-button.hide,
411.bar .buttons .hide {
412 display: none;
413}
414
415.nav-bar-tabs-top .bar {
416 background-image: none;
417}