diff --git a/dist/css/ionic-ios7.css b/dist/css/ionic-ios7.css index fb004fad8a..c97dd77b1c 100644 --- a/dist/css/ionic-ios7.css +++ b/dist/css/ionic-ios7.css @@ -551,64 +551,67 @@ a.subdued‎ { height: 44px; border-width: 0; border-style: solid; - background-color: white; } - .bar.bar-header { - border-bottom-width: 1px; } - .bar.bar-footer { - border-top-width: 1px; } + background-color: white; + /* &.bar-header { + border-bottom-width: 1px; + } + &.bar-footer { + border-top-width: 1px; + }*/ + box-shadow: inset 0 0 1px #999; } .bar.bar-clear { + border: none; background: none; - color: #fff; - border: none; } + color: #fff; } .bar.bar-clear .button { color: #fff; } .bar.bar-clear .title { color: #fff; } .bar.bar-default { background-color: rgba(255, 255, 255, 0.9); - border-color: #dddddd; + box-shadow: inset 0 0 1px #9d9d9d; color: #333333; } .bar.bar-default .title { color: #333333; } .bar.bar-secondary { background-color: rgba(245, 245, 245, 0.9); - border-color: #bbbbbb; + box-shadow: inset 0 0 1px #7b7b7b; color: #333333; } .bar.bar-secondary .title { color: #333333; } .bar.bar-primary { background-color: rgba(74, 135, 238, 0.9); - border-color: #3b6dc2; + box-shadow: inset 0 0 1px #1d3660; color: white; } .bar.bar-primary .title { color: white; } .bar.bar-info { background-color: rgba(67, 206, 230, 0.9); - border-color: #3bb3c8; + box-shadow: inset 0 0 1px #1d5c67; color: white; } .bar.bar-info .title { color: white; } .bar.bar-success { background-color: rgba(102, 204, 51, 0.9); - border-color: #5bb22f; + box-shadow: inset 0 0 1px #274d14; color: white; } .bar.bar-success .title { color: white; } .bar.bar-warning { background-color: rgba(240, 184, 64, 0.9); - border-color: #d29f31; + box-shadow: inset 0 0 1px #6c5118; color: white; } .bar.bar-warning .title { color: white; } .bar.bar-danger { background-color: rgba(239, 78, 58, 0.9); - border-color: #c73927; + box-shadow: inset 0 0 1px #5c1a12; color: white; } .bar.bar-danger .title { color: white; } .bar.bar-dark { background-color: rgba(68, 68, 68, 0.9); - border-color: #111111; + box-shadow: inset 0 0 1px black; color: white; } .bar.bar-dark .title { color: white; } diff --git a/dist/css/ionic-scoped.css b/dist/css/ionic-scoped.css index 07cfc60756..a31c91d454 100644 --- a/dist/css/ionic-scoped.css +++ b/dist/css/ionic-scoped.css @@ -1317,64 +1317,67 @@ height: 44px; border-width: 0; border-style: solid; - background-color: white; } - .ionic .bar.bar-header { - border-bottom-width: 1px; } - .ionic .bar.bar-footer { - border-top-width: 1px; } + background-color: white; + /* &.bar-header { + border-bottom-width: 1px; + } + &.bar-footer { + border-top-width: 1px; + }*/ + box-shadow: inset 0 0 1px #999; } .ionic .bar.bar-clear { + border: none; background: none; - color: #fff; - border: none; } + color: #fff; } .ionic .bar.bar-clear .button { color: #fff; } .ionic .bar.bar-clear .title { color: #fff; } .ionic .bar.bar-default { background-color: rgba(255, 255, 255, 0.9); - border-color: #dddddd; + box-shadow: inset 0 0 1px #9d9d9d; color: #333333; } .ionic .bar.bar-default .title { color: #333333; } .ionic .bar.bar-secondary { background-color: rgba(245, 245, 245, 0.9); - border-color: #bbbbbb; + box-shadow: inset 0 0 1px #7b7b7b; color: #333333; } .ionic .bar.bar-secondary .title { color: #333333; } .ionic .bar.bar-primary { background-color: rgba(74, 135, 238, 0.9); - border-color: #3b6dc2; + box-shadow: inset 0 0 1px #1d3660; color: white; } .ionic .bar.bar-primary .title { color: white; } .ionic .bar.bar-info { background-color: rgba(67, 206, 230, 0.9); - border-color: #3bb3c8; + box-shadow: inset 0 0 1px #1d5c67; color: white; } .ionic .bar.bar-info .title { color: white; } .ionic .bar.bar-success { background-color: rgba(102, 204, 51, 0.9); - border-color: #5bb22f; + box-shadow: inset 0 0 1px #274d14; color: white; } .ionic .bar.bar-success .title { color: white; } .ionic .bar.bar-warning { background-color: rgba(240, 184, 64, 0.9); - border-color: #d29f31; + box-shadow: inset 0 0 1px #6c5118; color: white; } .ionic .bar.bar-warning .title { color: white; } .ionic .bar.bar-danger { background-color: rgba(239, 78, 58, 0.9); - border-color: #c73927; + box-shadow: inset 0 0 1px #5c1a12; color: white; } .ionic .bar.bar-danger .title { color: white; } .ionic .bar.bar-dark { background-color: rgba(68, 68, 68, 0.9); - border-color: #111111; + box-shadow: inset 0 0 1px black; color: white; } .ionic .bar.bar-dark .title { color: white; } diff --git a/dist/css/ionic.css b/dist/css/ionic.css index d27f43f4b2..afb904a98c 100644 --- a/dist/css/ionic.css +++ b/dist/css/ionic.css @@ -1660,64 +1660,67 @@ a.subdued‎ { height: 44px; border-width: 0; border-style: solid; - background-color: white; } - .bar.bar-header { - border-bottom-width: 1px; } - .bar.bar-footer { - border-top-width: 1px; } + background-color: white; + /* &.bar-header { + border-bottom-width: 1px; + } + &.bar-footer { + border-top-width: 1px; + }*/ + box-shadow: inset 0 0 1px #999; } .bar.bar-clear { + border: none; background: none; - color: #fff; - border: none; } + color: #fff; } .bar.bar-clear .button { color: #fff; } .bar.bar-clear .title { color: #fff; } .bar.bar-default { background-color: rgba(255, 255, 255, 0.9); - border-color: #dddddd; + box-shadow: inset 0 0 1px #9d9d9d; color: #333333; } .bar.bar-default .title { color: #333333; } .bar.bar-secondary { background-color: rgba(245, 245, 245, 0.9); - border-color: #bbbbbb; + box-shadow: inset 0 0 1px #7b7b7b; color: #333333; } .bar.bar-secondary .title { color: #333333; } .bar.bar-primary { background-color: rgba(74, 135, 238, 0.9); - border-color: #3b6dc2; + box-shadow: inset 0 0 1px #1d3660; color: white; } .bar.bar-primary .title { color: white; } .bar.bar-info { background-color: rgba(67, 206, 230, 0.9); - border-color: #3bb3c8; + box-shadow: inset 0 0 1px #1d5c67; color: white; } .bar.bar-info .title { color: white; } .bar.bar-success { background-color: rgba(102, 204, 51, 0.9); - border-color: #5bb22f; + box-shadow: inset 0 0 1px #274d14; color: white; } .bar.bar-success .title { color: white; } .bar.bar-warning { background-color: rgba(240, 184, 64, 0.9); - border-color: #d29f31; + box-shadow: inset 0 0 1px #6c5118; color: white; } .bar.bar-warning .title { color: white; } .bar.bar-danger { background-color: rgba(239, 78, 58, 0.9); - border-color: #c73927; + box-shadow: inset 0 0 1px #5c1a12; color: white; } .bar.bar-danger .title { color: white; } .bar.bar-dark { background-color: rgba(68, 68, 68, 0.9); - border-color: #111111; + box-shadow: inset 0 0 1px black; color: white; } .bar.bar-dark .title { color: white; } diff --git a/scss/ionic/_bar.scss b/scss/ionic/_bar.scss index 24712677e1..73f963985e 100644 --- a/scss/ionic/_bar.scss +++ b/scss/ionic/_bar.scss @@ -1,5 +1,8 @@ -.bar { +// Bar (Headers and Footers) +// ------------------------------- + +.bar { @include user-select(none); position: absolute; right: 0; @@ -18,17 +21,19 @@ background-color: $bar-bg; - &.bar-header { +/* &.bar-header { border-bottom-width: 1px; } &.bar-footer { border-top-width: 1px; - } + }*/ + + box-shadow: inset 0 0 1px #999; &.bar-clear { + border: none; background: none; color: #fff; - border: none; .button { color: #fff; } diff --git a/scss/ionic/_mixins.scss b/scss/ionic/_mixins.scss index d44348716d..8bccbe3f12 100644 --- a/scss/ionic/_mixins.scss +++ b/scss/ionic/_mixins.scss @@ -96,7 +96,8 @@ @mixin bar-style($bgColor, $borderColor, $color) { background-color: $bgColor; - border-color: $borderColor; + + box-shadow: inset 0 0 1px darken($borderColor, 25%); color: $color; .title { @@ -312,7 +313,6 @@ } // Background clipping -// Heads up: FF 3.6 and under need "padding" instead of "padding-box" @mixin background-clip($clip) { -webkit-background-clip: $clip; -moz-background-clip: $clip; @@ -345,19 +345,6 @@ user-select: $select; } -@mixin disable-user-select() { - -webkit-touch-callout: none; - -webkit-user-select: none; - -moz-user-select: -moz-none; - user-select: none; -} - -// Resize anything -@mixin resizable($direction) { - resize: $direction; // Options: horizontal, vertical, both - overflow: auto; // Safari fix -} - // CSS3 Content Columns @mixin content-columns($columnCount, $columnGap: $gridGutterWidth) { -webkit-column-count: $columnCount;