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

1px border-bottom on headers

Browse Source
This commit is contained in:
Adam Bradley
2013-10-28 13:22:24 -05:00
parent 04dcd1050e
commit 46e0a24f8c
5 changed files with 301 additions and 53 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@ -552,13 +552,16 @@ a.subdued‎ {
border-width: 0;
border-style: solid;
background-color: white;
/* &.bar-header {
border-bottom-width: 1px;
}
&.bar-footer {
border-top-width: 1px;
}*/
box-shadow: inset 0 0 1px #999; }
border-top: 1px solid transparent;
border-bottom: 1px solid #dddddd; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #dddddd, #dddddd, 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-clear {
border: none;
background: none;
@ -569,50 +572,122 @@ a.subdued‎ {
color: #fff; }
.bar.bar-default {
background-color: rgba(255, 255, 255, 0.9);
box-shadow: inset 0 0 1px #9d9d9d;
border-top: 1px solid transparent;
border-bottom: 1px solid #dddddd;
color: #333333; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-default {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-default .title {
color: #333333; }
.bar.bar-secondary {
background-color: rgba(245, 245, 245, 0.9);
box-shadow: inset 0 0 1px #7b7b7b;
border-top: 1px solid transparent;
border-bottom: 1px solid #bbbbbb;
color: #333333; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-secondary {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-secondary .title {
color: #333333; }
.bar.bar-primary {
background-color: rgba(74, 135, 238, 0.9);
box-shadow: inset 0 0 1px #1d3660;
border-top: 1px solid transparent;
border-bottom: 1px solid #3b6dc2;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-primary {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-primary .title {
color: white; }
.bar.bar-info {
background-color: rgba(67, 206, 230, 0.9);
box-shadow: inset 0 0 1px #1d5c67;
border-top: 1px solid transparent;
border-bottom: 1px solid #3bb3c8;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-info {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-info .title {
color: white; }
.bar.bar-success {
background-color: rgba(102, 204, 51, 0.9);
box-shadow: inset 0 0 1px #274d14;
border-top: 1px solid transparent;
border-bottom: 1px solid #5bb22f;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-success {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-success .title {
color: white; }
.bar.bar-warning {
background-color: rgba(240, 184, 64, 0.9);
box-shadow: inset 0 0 1px #6c5118;
border-top: 1px solid transparent;
border-bottom: 1px solid #d29f31;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-warning {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-warning .title {
color: white; }
.bar.bar-danger {
background-color: rgba(239, 78, 58, 0.9);
box-shadow: inset 0 0 1px #5c1a12;
border-top: 1px solid transparent;
border-bottom: 1px solid #c73927;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-danger {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-danger .title {
color: white; }
.bar.bar-dark {
background-color: rgba(68, 68, 68, 0.9);
box-shadow: inset 0 0 1px black;
border-top: 1px solid transparent;
border-bottom: 1px solid #111111;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-dark {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-dark .title {
color: white; }
.bar .title {

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

@ -1318,13 +1318,16 @@
border-width: 0;
border-style: solid;
background-color: white;
/* &.bar-header {
border-bottom-width: 1px;
}
&.bar-footer {
border-top-width: 1px;
}*/
box-shadow: inset 0 0 1px #999; }
border-top: 1px solid transparent;
border-bottom: 1px solid #dddddd; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.ionic .bar {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #dddddd, #dddddd, 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.ionic .bar.bar-clear {
border: none;
background: none;
@ -1335,50 +1338,122 @@
color: #fff; }
.ionic .bar.bar-default {
background-color: rgba(255, 255, 255, 0.9);
box-shadow: inset 0 0 1px #9d9d9d;
border-top: 1px solid transparent;
border-bottom: 1px solid #dddddd;
color: #333333; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.ionic .bar.bar-default {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.ionic .bar.bar-default .title {
color: #333333; }
.ionic .bar.bar-secondary {
background-color: rgba(245, 245, 245, 0.9);
box-shadow: inset 0 0 1px #7b7b7b;
border-top: 1px solid transparent;
border-bottom: 1px solid #bbbbbb;
color: #333333; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.ionic .bar.bar-secondary {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.ionic .bar.bar-secondary .title {
color: #333333; }
.ionic .bar.bar-primary {
background-color: rgba(74, 135, 238, 0.9);
box-shadow: inset 0 0 1px #1d3660;
border-top: 1px solid transparent;
border-bottom: 1px solid #3b6dc2;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.ionic .bar.bar-primary {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.ionic .bar.bar-primary .title {
color: white; }
.ionic .bar.bar-info {
background-color: rgba(67, 206, 230, 0.9);
box-shadow: inset 0 0 1px #1d5c67;
border-top: 1px solid transparent;
border-bottom: 1px solid #3bb3c8;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.ionic .bar.bar-info {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.ionic .bar.bar-info .title {
color: white; }
.ionic .bar.bar-success {
background-color: rgba(102, 204, 51, 0.9);
box-shadow: inset 0 0 1px #274d14;
border-top: 1px solid transparent;
border-bottom: 1px solid #5bb22f;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.ionic .bar.bar-success {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.ionic .bar.bar-success .title {
color: white; }
.ionic .bar.bar-warning {
background-color: rgba(240, 184, 64, 0.9);
box-shadow: inset 0 0 1px #6c5118;
border-top: 1px solid transparent;
border-bottom: 1px solid #d29f31;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.ionic .bar.bar-warning {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.ionic .bar.bar-warning .title {
color: white; }
.ionic .bar.bar-danger {
background-color: rgba(239, 78, 58, 0.9);
box-shadow: inset 0 0 1px #5c1a12;
border-top: 1px solid transparent;
border-bottom: 1px solid #c73927;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.ionic .bar.bar-danger {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.ionic .bar.bar-danger .title {
color: white; }
.ionic .bar.bar-dark {
background-color: rgba(68, 68, 68, 0.9);
box-shadow: inset 0 0 1px black;
border-top: 1px solid transparent;
border-bottom: 1px solid #111111;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.ionic .bar.bar-dark {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.ionic .bar.bar-dark .title {
color: white; }
.ionic .bar .title {

105
dist/css/ionic.css vendored
View File

@ -1661,13 +1661,16 @@ a.subdued‎ {
border-width: 0;
border-style: solid;
background-color: white;
/* &.bar-header {
border-bottom-width: 1px;
}
&.bar-footer {
border-top-width: 1px;
}*/
box-shadow: inset 0 0 1px #999; }
border-top: 1px solid transparent;
border-bottom: 1px solid #dddddd; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #dddddd, #dddddd, 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-clear {
border: none;
background: none;
@ -1678,50 +1681,122 @@ a.subdued‎ {
color: #fff; }
.bar.bar-default {
background-color: rgba(255, 255, 255, 0.9);
box-shadow: inset 0 0 1px #9d9d9d;
border-top: 1px solid transparent;
border-bottom: 1px solid #dddddd;
color: #333333; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-default {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-default .title {
color: #333333; }
.bar.bar-secondary {
background-color: rgba(245, 245, 245, 0.9);
box-shadow: inset 0 0 1px #7b7b7b;
border-top: 1px solid transparent;
border-bottom: 1px solid #bbbbbb;
color: #333333; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-secondary {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-secondary .title {
color: #333333; }
.bar.bar-primary {
background-color: rgba(74, 135, 238, 0.9);
box-shadow: inset 0 0 1px #1d3660;
border-top: 1px solid transparent;
border-bottom: 1px solid #3b6dc2;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-primary {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-primary .title {
color: white; }
.bar.bar-info {
background-color: rgba(67, 206, 230, 0.9);
box-shadow: inset 0 0 1px #1d5c67;
border-top: 1px solid transparent;
border-bottom: 1px solid #3bb3c8;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-info {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-info .title {
color: white; }
.bar.bar-success {
background-color: rgba(102, 204, 51, 0.9);
box-shadow: inset 0 0 1px #274d14;
border-top: 1px solid transparent;
border-bottom: 1px solid #5bb22f;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-success {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-success .title {
color: white; }
.bar.bar-warning {
background-color: rgba(240, 184, 64, 0.9);
box-shadow: inset 0 0 1px #6c5118;
border-top: 1px solid transparent;
border-bottom: 1px solid #d29f31;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-warning {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-warning .title {
color: white; }
.bar.bar-danger {
background-color: rgba(239, 78, 58, 0.9);
box-shadow: inset 0 0 1px #5c1a12;
border-top: 1px solid transparent;
border-bottom: 1px solid #c73927;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-danger {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-danger .title {
color: white; }
.bar.bar-dark {
background-color: rgba(68, 68, 68, 0.9);
box-shadow: inset 0 0 1px black;
border-top: 1px solid transparent;
border-bottom: 1px solid #111111;
color: white; }
@media (min--moz-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5), (min-resolution: 144dpi), (min-resolution: 1.5dppx) {
.bar.bar-dark {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom; } }
.bar.bar-dark .title {
color: white; }
.bar .title {

21
scss/ionic/_bar.scss
View File

@ -20,15 +20,22 @@
border-style: solid;
background-color: $bar-bg;
border-top: 1px solid transparent;
border-bottom: 1px solid $bar-default-border-color;
@media (min--moz-device-pixel-ratio: 1.5),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
/* &.bar-header {
border-bottom-width: 1px;
}
&.bar-footer {
border-top-width: 1px;
}*/
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, $bar-default-border-color, $bar-default-border-color, 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom;
box-shadow: inset 0 0 1px #999;
}
&.bar-clear {
border: none;

18
scss/ionic/_mixins.scss
View File

@ -96,8 +96,24 @@
@mixin bar-style($bgColor, $borderColor, $color) {
background-color: $bgColor;
border-top: 1px solid transparent;
border-bottom: 1px solid $borderColor;
@media (min--moz-device-pixel-ratio: 1.5),
(-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5),
(min-resolution: 144dpi),
(min-resolution: 1.5dppx) {
border-top: none;
border-bottom: none;
background-image: linear-gradient(0deg, $borderColor, $borderColor 50%, transparent 50%);
background-size: 100% 1px;
background-repeat: no-repeat;
background-position: bottom;
}
box-shadow: inset 0 0 1px darken($borderColor, 25%);
color: $color;
.title {