javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2025-11-07 15:07:13 +08:00
Code Issues Packages Projects Releases Wiki Activity

1px border on headers/footers

Browse Source
This commit is contained in:
Adam Bradley
2013-10-25 11:12:20 -05:00
parent 9ce398c368
commit a4565b8f52
5 changed files with 65 additions and 64 deletions
Download Patch File Download Diff File Expand all files Collapse all files

33
dist/css/ionic-ios7.css vendored
View File

@ -551,64 +551,67 @@ a.subdued‎ {
height: 44px; height: 44px;
border-width: 0; border-width: 0;
border-style: solid; border-style: solid;
background-color: white; } background-color: white;
.bar.bar-header { /* &.bar-header {
border-bottom-width: 1px; } border-bottom-width: 1px;
.bar.bar-footer { }
border-top-width: 1px; } &.bar-footer {
border-top-width: 1px;
}*/
box-shadow: inset 0 0 1px #999; }
.bar.bar-clear { .bar.bar-clear {
border: none;
background: none; background: none;
color: #fff; color: #fff; }
border: none; }
.bar.bar-clear .button { .bar.bar-clear .button {
color: #fff; } color: #fff; }
.bar.bar-clear .title { .bar.bar-clear .title {
color: #fff; } color: #fff; }
.bar.bar-default { .bar.bar-default {
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
border-color: #dddddd; box-shadow: inset 0 0 1px #9d9d9d;
color: #333333; } color: #333333; }
.bar.bar-default .title { .bar.bar-default .title {
color: #333333; } color: #333333; }
.bar.bar-secondary { .bar.bar-secondary {
background-color: rgba(245, 245, 245, 0.9); background-color: rgba(245, 245, 245, 0.9);
border-color: #bbbbbb; box-shadow: inset 0 0 1px #7b7b7b;
color: #333333; } color: #333333; }
.bar.bar-secondary .title { .bar.bar-secondary .title {
color: #333333; } color: #333333; }
.bar.bar-primary { .bar.bar-primary {
background-color: rgba(74, 135, 238, 0.9); background-color: rgba(74, 135, 238, 0.9);
border-color: #3b6dc2; box-shadow: inset 0 0 1px #1d3660;
color: white; } color: white; }
.bar.bar-primary .title { .bar.bar-primary .title {
color: white; } color: white; }
.bar.bar-info { .bar.bar-info {
background-color: rgba(67, 206, 230, 0.9); background-color: rgba(67, 206, 230, 0.9);
border-color: #3bb3c8; box-shadow: inset 0 0 1px #1d5c67;
color: white; } color: white; }
.bar.bar-info .title { .bar.bar-info .title {
color: white; } color: white; }
.bar.bar-success { .bar.bar-success {
background-color: rgba(102, 204, 51, 0.9); background-color: rgba(102, 204, 51, 0.9);
border-color: #5bb22f; box-shadow: inset 0 0 1px #274d14;
color: white; } color: white; }
.bar.bar-success .title { .bar.bar-success .title {
color: white; } color: white; }
.bar.bar-warning { .bar.bar-warning {
background-color: rgba(240, 184, 64, 0.9); background-color: rgba(240, 184, 64, 0.9);
border-color: #d29f31; box-shadow: inset 0 0 1px #6c5118;
color: white; } color: white; }
.bar.bar-warning .title { .bar.bar-warning .title {
color: white; } color: white; }
.bar.bar-danger { .bar.bar-danger {
background-color: rgba(239, 78, 58, 0.9); background-color: rgba(239, 78, 58, 0.9);
border-color: #c73927; box-shadow: inset 0 0 1px #5c1a12;
color: white; } color: white; }
.bar.bar-danger .title { .bar.bar-danger .title {
color: white; } color: white; }
.bar.bar-dark { .bar.bar-dark {
background-color: rgba(68, 68, 68, 0.9); background-color: rgba(68, 68, 68, 0.9);
border-color: #111111; box-shadow: inset 0 0 1px black;
color: white; } color: white; }
.bar.bar-dark .title { .bar.bar-dark .title {
color: white; } color: white; }

33
dist/css/ionic-scoped.css vendored
View File

@ -1317,64 +1317,67 @@
height: 44px; height: 44px;
border-width: 0; border-width: 0;
border-style: solid; border-style: solid;
background-color: white; } background-color: white;
.ionic .bar.bar-header { /* &.bar-header {
border-bottom-width: 1px; } border-bottom-width: 1px;
.ionic .bar.bar-footer { }
border-top-width: 1px; } &.bar-footer {
border-top-width: 1px;
}*/
box-shadow: inset 0 0 1px #999; }
.ionic .bar.bar-clear { .ionic .bar.bar-clear {
border: none;
background: none; background: none;
color: #fff; color: #fff; }
border: none; }
.ionic .bar.bar-clear .button { .ionic .bar.bar-clear .button {
color: #fff; } color: #fff; }
.ionic .bar.bar-clear .title { .ionic .bar.bar-clear .title {
color: #fff; } color: #fff; }
.ionic .bar.bar-default { .ionic .bar.bar-default {
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
border-color: #dddddd; box-shadow: inset 0 0 1px #9d9d9d;
color: #333333; } color: #333333; }
.ionic .bar.bar-default .title { .ionic .bar.bar-default .title {
color: #333333; } color: #333333; }
.ionic .bar.bar-secondary { .ionic .bar.bar-secondary {
background-color: rgba(245, 245, 245, 0.9); background-color: rgba(245, 245, 245, 0.9);
border-color: #bbbbbb; box-shadow: inset 0 0 1px #7b7b7b;
color: #333333; } color: #333333; }
.ionic .bar.bar-secondary .title { .ionic .bar.bar-secondary .title {
color: #333333; } color: #333333; }
.ionic .bar.bar-primary { .ionic .bar.bar-primary {
background-color: rgba(74, 135, 238, 0.9); background-color: rgba(74, 135, 238, 0.9);
border-color: #3b6dc2; box-shadow: inset 0 0 1px #1d3660;
color: white; } color: white; }
.ionic .bar.bar-primary .title { .ionic .bar.bar-primary .title {
color: white; } color: white; }
.ionic .bar.bar-info { .ionic .bar.bar-info {
background-color: rgba(67, 206, 230, 0.9); background-color: rgba(67, 206, 230, 0.9);
border-color: #3bb3c8; box-shadow: inset 0 0 1px #1d5c67;
color: white; } color: white; }
.ionic .bar.bar-info .title { .ionic .bar.bar-info .title {
color: white; } color: white; }
.ionic .bar.bar-success { .ionic .bar.bar-success {
background-color: rgba(102, 204, 51, 0.9); background-color: rgba(102, 204, 51, 0.9);
border-color: #5bb22f; box-shadow: inset 0 0 1px #274d14;
color: white; } color: white; }
.ionic .bar.bar-success .title { .ionic .bar.bar-success .title {
color: white; } color: white; }
.ionic .bar.bar-warning { .ionic .bar.bar-warning {
background-color: rgba(240, 184, 64, 0.9); background-color: rgba(240, 184, 64, 0.9);
border-color: #d29f31; box-shadow: inset 0 0 1px #6c5118;
color: white; } color: white; }
.ionic .bar.bar-warning .title { .ionic .bar.bar-warning .title {
color: white; } color: white; }
.ionic .bar.bar-danger { .ionic .bar.bar-danger {
background-color: rgba(239, 78, 58, 0.9); background-color: rgba(239, 78, 58, 0.9);
border-color: #c73927; box-shadow: inset 0 0 1px #5c1a12;
color: white; } color: white; }
.ionic .bar.bar-danger .title { .ionic .bar.bar-danger .title {
color: white; } color: white; }
.ionic .bar.bar-dark { .ionic .bar.bar-dark {
background-color: rgba(68, 68, 68, 0.9); background-color: rgba(68, 68, 68, 0.9);
border-color: #111111; box-shadow: inset 0 0 1px black;
color: white; } color: white; }
.ionic .bar.bar-dark .title { .ionic .bar.bar-dark .title {
color: white; } color: white; }

33
dist/css/ionic.css vendored
View File

@ -1660,64 +1660,67 @@ a.subdued‎ {
height: 44px; height: 44px;
border-width: 0; border-width: 0;
border-style: solid; border-style: solid;
background-color: white; } background-color: white;
.bar.bar-header { /* &.bar-header {
border-bottom-width: 1px; } border-bottom-width: 1px;
.bar.bar-footer { }
border-top-width: 1px; } &.bar-footer {
border-top-width: 1px;
}*/
box-shadow: inset 0 0 1px #999; }
.bar.bar-clear { .bar.bar-clear {
border: none;
background: none; background: none;
color: #fff; color: #fff; }
border: none; }
.bar.bar-clear .button { .bar.bar-clear .button {
color: #fff; } color: #fff; }
.bar.bar-clear .title { .bar.bar-clear .title {
color: #fff; } color: #fff; }
.bar.bar-default { .bar.bar-default {
background-color: rgba(255, 255, 255, 0.9); background-color: rgba(255, 255, 255, 0.9);
border-color: #dddddd; box-shadow: inset 0 0 1px #9d9d9d;
color: #333333; } color: #333333; }
.bar.bar-default .title { .bar.bar-default .title {
color: #333333; } color: #333333; }
.bar.bar-secondary { .bar.bar-secondary {
background-color: rgba(245, 245, 245, 0.9); background-color: rgba(245, 245, 245, 0.9);
border-color: #bbbbbb; box-shadow: inset 0 0 1px #7b7b7b;
color: #333333; } color: #333333; }
.bar.bar-secondary .title { .bar.bar-secondary .title {
color: #333333; } color: #333333; }
.bar.bar-primary { .bar.bar-primary {
background-color: rgba(74, 135, 238, 0.9); background-color: rgba(74, 135, 238, 0.9);
border-color: #3b6dc2; box-shadow: inset 0 0 1px #1d3660;
color: white; } color: white; }
.bar.bar-primary .title { .bar.bar-primary .title {
color: white; } color: white; }
.bar.bar-info { .bar.bar-info {
background-color: rgba(67, 206, 230, 0.9); background-color: rgba(67, 206, 230, 0.9);
border-color: #3bb3c8; box-shadow: inset 0 0 1px #1d5c67;
color: white; } color: white; }
.bar.bar-info .title { .bar.bar-info .title {
color: white; } color: white; }
.bar.bar-success { .bar.bar-success {
background-color: rgba(102, 204, 51, 0.9); background-color: rgba(102, 204, 51, 0.9);
border-color: #5bb22f; box-shadow: inset 0 0 1px #274d14;
color: white; } color: white; }
.bar.bar-success .title { .bar.bar-success .title {
color: white; } color: white; }
.bar.bar-warning { .bar.bar-warning {
background-color: rgba(240, 184, 64, 0.9); background-color: rgba(240, 184, 64, 0.9);
border-color: #d29f31; box-shadow: inset 0 0 1px #6c5118;
color: white; } color: white; }
.bar.bar-warning .title { .bar.bar-warning .title {
color: white; } color: white; }
.bar.bar-danger { .bar.bar-danger {
background-color: rgba(239, 78, 58, 0.9); background-color: rgba(239, 78, 58, 0.9);
border-color: #c73927; box-shadow: inset 0 0 1px #5c1a12;
color: white; } color: white; }
.bar.bar-danger .title { .bar.bar-danger .title {
color: white; } color: white; }
.bar.bar-dark { .bar.bar-dark {
background-color: rgba(68, 68, 68, 0.9); background-color: rgba(68, 68, 68, 0.9);
border-color: #111111; box-shadow: inset 0 0 1px black;
color: white; } color: white; }
.bar.bar-dark .title { .bar.bar-dark .title {
color: white; } color: white; }

13
scss/ionic/_bar.scss
View File

@ -1,5 +1,8 @@
.bar {
// Bar (Headers and Footers)
// -------------------------------
.bar {
@include user-select(none); @include user-select(none);
position: absolute; position: absolute;
right: 0; right: 0;
@ -18,17 +21,19 @@
background-color: $bar-bg; background-color: $bar-bg;
&.bar-header { /* &.bar-header {
border-bottom-width: 1px; border-bottom-width: 1px;
} }
&.bar-footer { &.bar-footer {
border-top-width: 1px; border-top-width: 1px;
} }*/
box-shadow: inset 0 0 1px #999;
&.bar-clear { &.bar-clear {
border: none;
background: none; background: none;
color: #fff; color: #fff;
border: none;
.button { .button {
color: #fff; color: #fff;
} }

17
scss/ionic/_mixins.scss
View File

@ -96,7 +96,8 @@
@mixin bar-style($bgColor, $borderColor, $color) { @mixin bar-style($bgColor, $borderColor, $color) {
background-color: $bgColor; background-color: $bgColor;
border-color: $borderColor;
box-shadow: inset 0 0 1px darken($borderColor, 25%);
color: $color; color: $color;
.title { .title {
@ -312,7 +313,6 @@
} }
// Background clipping // Background clipping
// Heads up: FF 3.6 and under need "padding" instead of "padding-box"
@mixin background-clip($clip) { @mixin background-clip($clip) {
-webkit-background-clip: $clip; -webkit-background-clip: $clip;
-moz-background-clip: $clip; -moz-background-clip: $clip;
@ -345,19 +345,6 @@
user-select: $select; 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 // CSS3 Content Columns
@mixin content-columns($columnCount, $columnGap: $gridGutterWidth) { @mixin content-columns($columnCount, $columnGap: $gridGutterWidth) {
-webkit-column-count: $columnCount; -webkit-column-count: $columnCount;