From 4ba6651776b7bb84aadc02b5d13f9abbdf18075e Mon Sep 17 00:00:00 2001 From: connors Date: Fri, 2 Aug 2013 14:54:58 -0700 Subject: [PATCH] Initial bars.css refactor. --- lib/css/bars.css | 169 ++++++++----------------------------- test/components/index.html | 24 +++--- 2 files changed, 46 insertions(+), 147 deletions(-) diff --git a/lib/css/bars.css b/lib/css/bars.css index 283a16f..fa5bfe1 100644 --- a/lib/css/bars.css +++ b/lib/css/bars.css @@ -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; } diff --git a/test/components/index.html b/test/components/index.html index 395b7ea..c09658c 100644 --- a/test/components/index.html +++ b/test/components/index.html @@ -206,23 +206,23 @@