|
|
|
|
@ -8,12 +8,14 @@
|
|
|
|
|
z-index: 10; |
|
|
|
|
height: 44px; |
|
|
|
|
padding: 5px; |
|
|
|
|
background-color: rgba(248,248,248,.98); |
|
|
|
|
border-bottom: 1px solid #adadad; |
|
|
|
|
box-sizing: border-box; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Modifier class to dock any bar below .bar-title */ |
|
|
|
|
.bar-header-secondary { |
|
|
|
|
top: 45px; |
|
|
|
|
top: 44px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Modifier class to dock any bar to bottom of viewport */ |
|
|
|
|
@ -21,15 +23,6 @@
|
|
|
|
|
bottom: 0; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Generic bar for wrapping buttons, segmented controllers, etc. */ |
|
|
|
|
.bar-standard { |
|
|
|
|
background-color: #f2f2f2; |
|
|
|
|
background-image: -webkit-linear-gradient(top, #f2f2f2 0, #e5e5e5 100%); |
|
|
|
|
background-image: linear-gradient(to bottom, #f2f2f2 0, #e5e5e5 100%); |
|
|
|
|
border-bottom: 1px solid #aaa; |
|
|
|
|
box-shadow: inset 0 1px 1px -1px #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Flip border position to top for footer bars */ |
|
|
|
|
.bar-footer.bar-standard, |
|
|
|
|
.bar-footer-secondary.bar-standard { |
|
|
|
|
@ -45,11 +38,6 @@
|
|
|
|
|
top: 0; |
|
|
|
|
display: -webkit-box; |
|
|
|
|
display: box; |
|
|
|
|
background-color: #1eb0e9; |
|
|
|
|
background-image: -webkit-linear-gradient(top, #1eb0e9 0, #109adc 100%); |
|
|
|
|
background-image: linear-gradient(to bottom, #1eb0e9 0, #109adc 100%); |
|
|
|
|
border-bottom: 1px solid #0e5895; |
|
|
|
|
box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .8); |
|
|
|
|
-webkit-box-orient: horizontal; |
|
|
|
|
box-orient: horizontal; |
|
|
|
|
} |
|
|
|
|
@ -61,12 +49,11 @@
|
|
|
|
|
left: 0; |
|
|
|
|
display: block; |
|
|
|
|
width: 100%; |
|
|
|
|
font-size: 20px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
font-size: 18px; |
|
|
|
|
font-weight: 500; |
|
|
|
|
line-height: 44px; |
|
|
|
|
color: #fff; |
|
|
|
|
color: #000; |
|
|
|
|
text-align: center; |
|
|
|
|
text-shadow: 0 -1px rgba(0, 0, 0, .5); |
|
|
|
|
white-space: nowrap; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
@ -89,12 +76,8 @@
|
|
|
|
|
bottom: 0; |
|
|
|
|
height: 50px; |
|
|
|
|
padding: 0; |
|
|
|
|
background-color: #393939; |
|
|
|
|
background-image: -webkit-linear-gradient(top, #393939 0, #2b2b2b 100%); |
|
|
|
|
background-image: linear-gradient(to bottom, #393939 0, #2b2b2b 100%); |
|
|
|
|
border-top: 1px solid #000; |
|
|
|
|
border-top: 1px solid #adadad; |
|
|
|
|
border-bottom-width: 0; |
|
|
|
|
box-shadow: inset 0 1px 1px -1px rgba(255, 255, 255, .6); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Wrapper for individual tab */ |
|
|
|
|
@ -117,11 +100,6 @@
|
|
|
|
|
box-flex: 1; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Active state for tab */ |
|
|
|
|
.tab-item.active { |
|
|
|
|
box-shadow: inset 0 0 20px rgba(0, 0, 0, .5); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Icon for tab */ |
|
|
|
|
.tab-icon { |
|
|
|
|
display: block; |
|
|
|
|
@ -132,10 +110,12 @@
|
|
|
|
|
/* Label for tab */ |
|
|
|
|
.tab-label { |
|
|
|
|
margin-top: 1px; |
|
|
|
|
font-size: 10px; |
|
|
|
|
font-weight: bold; |
|
|
|
|
color: #fff; |
|
|
|
|
text-shadow: 0 1px rgba(0, 0, 0, .3); |
|
|
|
|
font-size: 11px; |
|
|
|
|
font-weight: 400; |
|
|
|
|
color: #929292; |
|
|
|
|
} |
|
|
|
|
.tab-item.active .tab-label { |
|
|
|
|
color: #007aff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Buttons in title bars |
|
|
|
|
@ -145,15 +125,13 @@
|
|
|
|
|
.bar-title [class*="button"] { |
|
|
|
|
position: relative; |
|
|
|
|
z-index: 10; /* Places buttons over full width title */ |
|
|
|
|
font-size: 12px; |
|
|
|
|
line-height: 23px; |
|
|
|
|
color: #fff; |
|
|
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, .3); |
|
|
|
|
background-color: #1eb0e9; |
|
|
|
|
background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%); |
|
|
|
|
background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%); |
|
|
|
|
border: 1px solid #0e5895; |
|
|
|
|
box-shadow: 0 1px rgba(255, 255, 255, .25); |
|
|
|
|
font-size: 16px; |
|
|
|
|
font-weight: 400; |
|
|
|
|
line-height: 29px; |
|
|
|
|
color: #007aff; |
|
|
|
|
background: transparent; /* Will remove after the buttons refactor. */ |
|
|
|
|
border: 0; |
|
|
|
|
box-shadow: none; /* Will remove after the buttons refactor. */ |
|
|
|
|
-webkit-box-flex: 0; |
|
|
|
|
box-flex: 0; |
|
|
|
|
} |
|
|
|
|
@ -171,81 +149,7 @@
|
|
|
|
|
|
|
|
|
|
/* Override standard button active states */ |
|
|
|
|
.bar-title .button:active { |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: #0876b1; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Directional buttons in title bars (thanks to @GregorAdams for solution - http://cssnerd.com/2011/11/30/the-best-pure-css3-ios-style-arrow-back-button/) |
|
|
|
|
-------------------------------------------------- */ |
|
|
|
|
|
|
|
|
|
/* Add relative positioning so :before content is positioned properly */ |
|
|
|
|
.bar-title .button-prev, |
|
|
|
|
.bar-title .button-next { |
|
|
|
|
position: relative; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Prev/next button base styles */ |
|
|
|
|
.bar-title .button-prev { |
|
|
|
|
margin-left: 7px; /* Push over to make room for :before content */ |
|
|
|
|
border-left: 0; |
|
|
|
|
border-bottom-left-radius: 10px 15px; |
|
|
|
|
border-top-left-radius: 10px 15px; |
|
|
|
|
} |
|
|
|
|
.bar-title .button-next { |
|
|
|
|
margin-right: 7px; /* Push over to make room for :before content */ |
|
|
|
|
border-right: 0; |
|
|
|
|
border-top-right-radius: 10px 15px; |
|
|
|
|
border-bottom-right-radius: 10px 15px; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Pointed part of directional button */ |
|
|
|
|
.bar-title .button-prev:before, |
|
|
|
|
.bar-title .button-next:before { |
|
|
|
|
position: absolute; |
|
|
|
|
top: 2px; |
|
|
|
|
width: 27px; |
|
|
|
|
height: 27px; |
|
|
|
|
border-radius: 30px 100px 2px 40px / 2px 40px 30px 100px; |
|
|
|
|
content: ''; |
|
|
|
|
box-shadow: inset 1px 0 #0e5895, inset 0 1px #0e5895; |
|
|
|
|
-webkit-mask-image: -webkit-gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent)); |
|
|
|
|
mask-image: gradient(linear, left top, right bottom, from(#000), color-stop(.33, #000), color-stop(.5, transparent), to(transparent)); |
|
|
|
|
} |
|
|
|
|
.bar-title .button-prev:before { |
|
|
|
|
left: -5px; |
|
|
|
|
background-image: -webkit-gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9)); |
|
|
|
|
background-image: gradient(linear, left bottom, right top, from(#0984c6), to(#1eb0e9)); |
|
|
|
|
border-left: 1.5px solid rgba(255, 255, 255, .25); |
|
|
|
|
-webkit-transform: rotate(-45deg) skew(-10deg, -10deg); |
|
|
|
|
transform: rotate(-45deg) skew(-10deg, -10deg); |
|
|
|
|
} |
|
|
|
|
.bar-title .button-next:before { |
|
|
|
|
right: -5px; |
|
|
|
|
background-image: -webkit-gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6)); |
|
|
|
|
background-image: gradient(linear, left bottom, right top, from(#1eb0e9), to(#0984c6)); |
|
|
|
|
border-top: 1.5px solid rgba(255, 255, 255, .25); |
|
|
|
|
-webkit-transform: rotate(135deg) skew(-10deg, -10deg); |
|
|
|
|
transform: rotate(135deg) skew(-10deg, -10deg); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Active states for the directional buttons */ |
|
|
|
|
.bar-title .button-prev:active, |
|
|
|
|
.bar-title .button-next:active, |
|
|
|
|
.bar-title .button-prev:active:before, |
|
|
|
|
.bar-title .button-next:active:before { |
|
|
|
|
color: #fff; |
|
|
|
|
background-color: #0876b1; |
|
|
|
|
background-image: none; |
|
|
|
|
} |
|
|
|
|
.bar-title .button-prev:active:before, |
|
|
|
|
.bar-title .button-next:active:before { |
|
|
|
|
content: ''; |
|
|
|
|
} |
|
|
|
|
.bar-title .button-prev:active:before { |
|
|
|
|
box-shadow: inset 0 3px 3px rgba(0, 0, 0, .2); |
|
|
|
|
} |
|
|
|
|
.bar-title .button-next:active:before { |
|
|
|
|
box-shadow: inset 0 -3px 3px rgba(0, 0, 0, .2); |
|
|
|
|
opacity: .8; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Block buttons in any bar |
|
|
|
|
@ -255,7 +159,7 @@
|
|
|
|
|
[class*="bar"] .button-block { |
|
|
|
|
padding: 7px 0; |
|
|
|
|
margin-bottom: 0; |
|
|
|
|
box-shadow: inset 0 1px 1px rgba(255, 255, 255, .4), 0 1px rgba(255, 255, 255, .8); |
|
|
|
|
box-shadow: none; /* Will remove after the buttons refactor. */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Override standard padding changes for .button-blocks */ |
|
|
|
|
@ -282,27 +186,17 @@
|
|
|
|
|
|
|
|
|
|
.bar-title .segmented-controller { |
|
|
|
|
line-height: 18px; |
|
|
|
|
text-shadow: 0 -1px 0 rgba(0, 0, 0, 0.3); |
|
|
|
|
background-color: #1eb0e9; |
|
|
|
|
background-image: -webkit-linear-gradient(top, #1eb0e9 0, #0984c6 100%); |
|
|
|
|
background-image: linear-gradient(to bottom, #1eb0e9 0, #0984c6 100%); |
|
|
|
|
border: 1px solid #0e5895; |
|
|
|
|
background-color: transparent; |
|
|
|
|
background-image: none; /* Will remove after the segmented-controller refactor. */ |
|
|
|
|
border: 1px solid #007aff; |
|
|
|
|
border-radius: 3px; |
|
|
|
|
box-shadow: 0 1px rgba(255, 255, 255, .25); |
|
|
|
|
-webkit-box-flex: 1; |
|
|
|
|
box-flex: 1; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Set color for tab border and highlight */ |
|
|
|
|
.bar-title .segmented-controller li { |
|
|
|
|
border-left: 1px solid #0e5895; |
|
|
|
|
box-shadow: inset 1px 0 rgba(255, 255, 255, .25); |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Remove inset shadow from first tab or one to the right of the active tab */ |
|
|
|
|
.bar-title .segmented-controller .active + li, |
|
|
|
|
.bar-title .segmented-controller li:first-child { |
|
|
|
|
box-shadow: none; |
|
|
|
|
border-left: 1px solid #007aff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Remove left-hand border from first tab */ |
|
|
|
|
@ -312,12 +206,17 @@
|
|
|
|
|
|
|
|
|
|
/* Depressed state (active) */ |
|
|
|
|
.bar-title .segmented-controller li.active { |
|
|
|
|
background-color: #0082c4; |
|
|
|
|
box-shadow: inset 0 1px 6px rgba(0, 0, 0, .3); |
|
|
|
|
background-color: #007aff; |
|
|
|
|
box-shadow: none; /* Will remove after the segmented-controller refactor. */ |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
/* Set color of links to white */ |
|
|
|
|
/* Set color of links to blue */ |
|
|
|
|
.bar-title .segmented-controller li > a { |
|
|
|
|
color: #007aff; |
|
|
|
|
text-shadow: none; /* Will remove after the segmented-controller refactor. */ |
|
|
|
|
} |
|
|
|
|
/* Set color of links to blue */ |
|
|
|
|
.bar-title .segmented-controller li.active > a { |
|
|
|
|
color: #fff; |
|
|
|
|
} |
|
|
|
|
|
|
|
|
|
|
connors
11 years ago