mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-11-07 15:07:13 +08:00
footer top border
This commit is contained in:
Adam Bradley
114
dist/css/ionic-ios7.css
vendored
114
dist/css/ionic-ios7.css
vendored
@ -556,11 +556,12 @@ a.subdued {
|
||||
border-style: solid;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
background-size: 0;
|
||||
background-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 {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-top: none !important;
|
||||
border-bottom: none !important;
|
||||
background-image: linear-gradient(0deg, #dddddd, #dddddd, 50%, transparent 50%);
|
||||
background-position: bottom;
|
||||
background-size: 100% 1px;
|
||||
@ -575,122 +576,66 @@ a.subdued {
|
||||
color: #fff; }
|
||||
.bar.bar-default {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #dddddd;
|
||||
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #bbbbbb;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #bbbbbb;
|
||||
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #3b6dc2;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #3b6dc2;
|
||||
background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #3bb3c8;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #3bb3c8;
|
||||
background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #5bb22f;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #5bb22f;
|
||||
background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #d29f31;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #d29f31;
|
||||
background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #c73927;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #c73927;
|
||||
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #111111;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #111111;
|
||||
background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
|
||||
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 {
|
||||
@ -875,7 +820,10 @@ a.subdued {
|
||||
top: 0; }
|
||||
|
||||
.bar-footer {
|
||||
bottom: 0; }
|
||||
bottom: 0;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 0;
|
||||
background-position: top; }
|
||||
|
||||
.bar-tabs {
|
||||
padding: 0; }
|
||||
|
||||
114
dist/css/ionic-scoped.css
vendored
114
dist/css/ionic-scoped.css
vendored
@ -1322,11 +1322,12 @@
|
||||
border-style: solid;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
background-size: 0;
|
||||
background-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 {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-top: none !important;
|
||||
border-bottom: none !important;
|
||||
background-image: linear-gradient(0deg, #dddddd, #dddddd, 50%, transparent 50%);
|
||||
background-position: bottom;
|
||||
background-size: 100% 1px;
|
||||
@ -1341,122 +1342,66 @@
|
||||
color: #fff; }
|
||||
.ionic .bar.bar-default {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #dddddd;
|
||||
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #bbbbbb;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #bbbbbb;
|
||||
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #3b6dc2;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #3b6dc2;
|
||||
background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #3bb3c8;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #3bb3c8;
|
||||
background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #5bb22f;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #5bb22f;
|
||||
background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #d29f31;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #d29f31;
|
||||
background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #c73927;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #c73927;
|
||||
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #111111;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #111111;
|
||||
background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
|
||||
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 {
|
||||
@ -1631,7 +1576,10 @@
|
||||
.ionic .bar-header {
|
||||
top: 0; }
|
||||
.ionic .bar-footer {
|
||||
bottom: 0; }
|
||||
bottom: 0;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 0;
|
||||
background-position: top; }
|
||||
.ionic .bar-tabs {
|
||||
padding: 0; }
|
||||
.ionic .bar-subheader {
|
||||
|
||||
114
dist/css/ionic.css
vendored
114
dist/css/ionic.css
vendored
@ -1665,11 +1665,12 @@ a.subdued {
|
||||
border-style: solid;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
background-size: 0;
|
||||
background-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 {
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-top: none !important;
|
||||
border-bottom: none !important;
|
||||
background-image: linear-gradient(0deg, #dddddd, #dddddd, 50%, transparent 50%);
|
||||
background-position: bottom;
|
||||
background-size: 100% 1px;
|
||||
@ -1684,122 +1685,66 @@ a.subdued {
|
||||
color: #fff; }
|
||||
.bar.bar-default {
|
||||
background-color: rgba(255, 255, 255, 0.9);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #dddddd;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #dddddd;
|
||||
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #bbbbbb;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #bbbbbb;
|
||||
background-image: linear-gradient(0deg, #bbbbbb, #bbbbbb 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #3b6dc2;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #3b6dc2;
|
||||
background-image: linear-gradient(0deg, #3b6dc2, #3b6dc2 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #3bb3c8;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #3bb3c8;
|
||||
background-image: linear-gradient(0deg, #3bb3c8, #3bb3c8 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #5bb22f;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #5bb22f;
|
||||
background-image: linear-gradient(0deg, #5bb22f, #5bb22f 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #d29f31;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #d29f31;
|
||||
background-image: linear-gradient(0deg, #d29f31, #d29f31 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #c73927;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #c73927;
|
||||
background-image: linear-gradient(0deg, #c73927, #c73927 50%, transparent 50%);
|
||||
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);
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid #111111;
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: #111111;
|
||||
background-image: linear-gradient(0deg, #111111, #111111 50%, transparent 50%);
|
||||
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 {
|
||||
@ -1984,7 +1929,10 @@ a.subdued {
|
||||
top: 0; }
|
||||
|
||||
.bar-footer {
|
||||
bottom: 0; }
|
||||
bottom: 0;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 0;
|
||||
background-position: top; }
|
||||
|
||||
.bar-tabs {
|
||||
padding: 0; }
|
||||
|
||||
@ -20,6 +20,7 @@
|
||||
border-style: solid;
|
||||
border-top: 1px solid transparent;
|
||||
border-bottom: 1px solid $bar-default-border-color;
|
||||
background-size: 0;
|
||||
|
||||
background-color: $bar-bg;
|
||||
@media (min--moz-device-pixel-ratio: 1.5),
|
||||
@ -27,15 +28,13 @@
|
||||
(min-device-pixel-ratio: 1.5),
|
||||
(min-resolution: 144dpi),
|
||||
(min-resolution: 1.5dppx) {
|
||||
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
border-top: none !important;
|
||||
border-bottom: none !important;
|
||||
background-image: linear-gradient(0deg, $bar-default-border-color, $bar-default-border-color, 50%, transparent 50%);
|
||||
background-position: bottom;
|
||||
background-size: 100% 1px;
|
||||
background-repeat: no-repeat;
|
||||
|
||||
}
|
||||
}
|
||||
|
||||
&.bar-clear {
|
||||
border: none;
|
||||
@ -85,7 +84,6 @@
|
||||
z-index: 0;
|
||||
|
||||
margin: 0;
|
||||
//padding: $barPaddingVertical 0px;
|
||||
|
||||
min-width: 30px;
|
||||
|
||||
@ -202,6 +200,9 @@
|
||||
// Footer at bottom
|
||||
.bar-footer {
|
||||
bottom: 0;
|
||||
border-top-width: 1px;
|
||||
border-bottom-width: 0;
|
||||
background-position: top;
|
||||
}
|
||||
|
||||
// Don't render padding if the bar is just for tabs
|
||||
|
||||
@ -96,23 +96,9 @@
|
||||
|
||||
@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;
|
||||
|
||||
}
|
||||
border-top-color: transparent;
|
||||
border-bottom-color: $borderColor;
|
||||
background-image: linear-gradient(0deg, $borderColor, $borderColor 50%, transparent 50%);
|
||||
|
||||
color: $color;
|
||||
|
||||
|
||||
@ -5,82 +5,59 @@
|
||||
|
||||
<!-- Sets initial viewport load and disables zooming -->
|
||||
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
|
||||
<link href="../dist/ionicons.css" rel="stylesheet">
|
||||
<link href="../dist/ionic.css" rel="stylesheet">
|
||||
<link href="../dist/css/ionic.css" rel="stylesheet">
|
||||
<style>
|
||||
.hide{display:none;}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<section>
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Footer</h1>
|
||||
</header>
|
||||
|
||||
<header class="bar bar-header bar-dark">
|
||||
<h1 class="title">Footer</h1>
|
||||
</header>
|
||||
<main class="content padding has-header has-footer">
|
||||
<p>Footer should always stay at the bottom of the screen, and on top of the main content.</p>
|
||||
<p>Content element must have "has-footer" as a classname.</p>
|
||||
<p><button id="btnAddMore">Dynamically Add More Content</button></p>
|
||||
<div id="add-more"></div>
|
||||
<p><button id="btnToggle">Toggle Content</button></p>
|
||||
<p id="toggle-content" class="hide">
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
</p>
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
|
||||
<main class="content padding has-header has-footer">
|
||||
<p>Footer should always stay at the bottom of the screen, and on top of the main content.</p>
|
||||
<p>Content element must have "has-footer" as a classname.</p>
|
||||
<p><button id="btnAddMore">Dynamically Add More Content</button></p>
|
||||
<div id="add-more"></div>
|
||||
<p><button id="btnToggle">Toggle Content</button></p>
|
||||
<p id="toggle-content" class="hide">
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
Toggled content<br>
|
||||
</p>
|
||||
<p><a class="button button-secondary" href="index.html">Homepage</a></p>
|
||||
</main>
|
||||
<footer class="bar bar-footer bar-default">
|
||||
<h3 class="title">Footer</h3>
|
||||
</footer>
|
||||
|
||||
<footer class="bar bar-footer bar-dark">
|
||||
<h3 class="title">Footer</h3>
|
||||
</footer>
|
||||
|
||||
</section>
|
||||
|
||||
<script src="../dist/ionic.js"></script>
|
||||
<script src="../dist/ionic-simple.js"></script>
|
||||
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
|
||||
<script>
|
||||
$("#btnAddMore").click(function(){
|
||||
var moreContent = [];
|
||||
moreContent.push("<ul>");
|
||||
for(var x=0; x<20; x++) {
|
||||
moreContent.push("<li>Dynamically added content!");
|
||||
}
|
||||
moreContent.push("</ul>");
|
||||
$("#add-more").append( moreContent.join('') );
|
||||
return false;
|
||||
});
|
||||
$("#btnToggle").click(function(){
|
||||
$("#toggle-content").toggle("hide")
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
||||
Reference in New Issue
Block a user