This commit is contained in:
Max Lynch
2013-11-01 15:48:47 -05:00
22 changed files with 692 additions and 438 deletions

0
dist/css/fonts/ionicons.eot vendored Normal file → Executable file
View File

4
dist/css/fonts/ionicons.svg vendored Normal file → Executable file
View File

@ -11,8 +11,8 @@
"license": "MIT", "license": "MIT",
"licenseURL": "http://opensource.org/licenses/MIT", "licenseURL": "http://opensource.org/licenses/MIT",
"version": "Version 1.2.3", "version": "Version 1.2.3",
"fontId": "Ionicons", "fontId": "ionicons",
"psName": "Ionicons", "psName": "ionicons",
"subFamily": "Regular", "subFamily": "Regular",
"fullName": "Ionicons", "fullName": "Ionicons",
"description": "Generated by IcoMoon" "description": "Generated by IcoMoon"

Before

Width:  |  Height:  |  Size: 248 KiB

After

Width:  |  Height:  |  Size: 248 KiB

0
dist/css/fonts/ionicons.ttf vendored Normal file → Executable file
View File

0
dist/css/fonts/ionicons.woff vendored Normal file → Executable file
View File

View File

@ -16,7 +16,7 @@ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, small, strike, strong, sub, sup, tt, var,
b, u, i, center, b, u, center,
dl, dt, dd, ol, ul, li, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, table, caption, tbody, tfoot, thead, tr, th, td,
@ -182,7 +182,7 @@ sub {
fieldset { fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; } border: 1px solid #c0c0c0; }
/** /**
* 1. Correct `color` not being inherited in IE 8/9. * 1. Correct `color` not being inherited in IE 8/9.
@ -556,8 +556,8 @@ a.subdued {
border-style: solid; border-style: solid;
border-top: 1px solid transparent; border-top: 1px solid transparent;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
background-size: 0; background-color: white;
background-color: white; } background-size: 0; }
@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) { @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 {
border-top: none !important; border-top: none !important;
@ -646,20 +646,17 @@ a.subdued {
.bar .title a { .bar .title a {
color: inherit; } color: inherit; }
.bar > .button { .bar > .button {
box-flex: 1;
-webkit-box-flex: 0;
-moz-box-flex: 0;
z-index: 1; z-index: 1;
margin: 0; padding: 0 8px;
padding: 2px 8px 0 8px; min-height: 31px;
min-height: 33px;
background-color: transparent;
font-size: 12px; font-size: 12px;
line-height: 28px; } line-height: 30px; }
.bar > .button i, .bar > .button .icon { .bar > .button i, .bar > .button .icon {
margin-top: 1px; } font-size: 24px;
.bar .button-bar { line-height: 29px; }
line-height: 18px; } .bar .button-bar > .button {
min-height: 31px;
line-height: 31px; }
.bar .button-bar + .button, .bar .button + .button-bar { .bar .button-bar + .button, .bar .button + .button-bar {
margin-left: 5px; } margin-left: 5px; }
.bar .title + .button:last-child, .bar .title + .button:last-child,
@ -835,9 +832,17 @@ a.subdued {
* A navigation bar with any number of tab items supported. * A navigation bar with any number of tab items supported.
*/ */
.tabs { .tabs {
box-orient: horizontal; display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-moz-box-orient: horizontal; -webkit-flex-direction: horizontal;
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal;
background-color: white; background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd; border-color: #dddddd;
@ -845,8 +850,6 @@ a.subdued {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 5; z-index: 5;
display: -webkit-box;
display: box;
width: 100%; width: 100%;
height: 49px; height: 49px;
border-style: solid; border-style: solid;
@ -906,13 +909,16 @@ a.subdued {
top: 44px; } top: 44px; }
.tab-item { .tab-item {
box-flex: 1;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
display: block; -moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: inline-block;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
width: 0; margin: auto;
height: 100%; height: 100%;
color: inherit; color: inherit;
text-align: center; text-align: center;
@ -970,6 +976,16 @@ a.subdued {
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark { .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
color: #444444; } color: #444444; }
.item.tabs {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
padding: 0; }
.item.tabs i, .item.tabs .icon {
position: relative; }
.menu { .menu {
position: absolute; position: absolute;
top: 0; top: 0;
@ -1198,7 +1214,9 @@ a.item {
font-size: 32px; } font-size: 32px; }
.item .fill-icon { .item .fill-icon {
font-size: 28px; } font-size: 28px;
min-width: 30px;
min-height: 30px; }
.item-icon-left { .item-icon-left {
padding-left: 45px; } padding-left: 45px; }
@ -1273,23 +1291,23 @@ button.item-icon-right:after {
border-radius: 4px; } border-radius: 4px; }
.item-thumbnail-left { .item-thumbnail-left {
padding-left: 95px; padding-left: 105px;
min-height: 80px; } min-height: 100px; }
.item-thumbnail-left img:first-child, .item-thumbnail-left .item-image { .item-thumbnail-left img:first-child, .item-thumbnail-left .item-image {
position: absolute; position: absolute;
top: 0; top: 10px;
left: 0; left: 10px;
max-width: 80px; max-width: 80px;
max-height: 80px; max-height: 80px;
width: 100%; } width: 100%; }
.item-thumbnail-right { .item-thumbnail-right {
padding-right: 95px; padding-right: 105px;
min-height: 80px; } min-height: 100px; }
.item-thumbnail-right img:first-child, .item-thumbnail-right .item-image { .item-thumbnail-right img:first-child, .item-thumbnail-right .item-image {
position: absolute; position: absolute;
top: 0; top: 10px;
right: 0; right: 10px;
max-width: 80px; max-width: 80px;
max-height: 80px; max-height: 80px;
width: 100%; } width: 100%; }
@ -1313,12 +1331,18 @@ button.item-icon-right:after {
.item-divider { .item-divider {
margin: -1px; margin: -1px;
padding: 5px 15px; padding: 5px 15px;
min-height: 30px;
border: none; border: none;
background-color: whitesmoke; background-color: whitesmoke;
box-shadow: inset 0 0 1px #666666; box-shadow: inset 0 0 1px #666666;
color: #222222; color: #222222;
font-weight: bold; } font-weight: bold; }
.item-note {
float: right;
color: #aaa;
font-size: 14px; }
.item-sliding { .item-sliding {
-webkit-transition: -webkit-transform 0.1s ease-in-out; } -webkit-transition: -webkit-transform 0.1s ease-in-out; }
@ -1424,11 +1448,6 @@ button.item-icon-right:after {
padding-right: 1px; padding-right: 1px;
padding-left: 1px; } padding-left: 1px; }
.item-label-right {
float: right;
color: #aaa;
font-size: 14px; }
/* /*
A card and list-inset are close to the same thing, except a card as a box shadow. A card and list-inset are close to the same thing, except a card as a box shadow.
*/ */
@ -1663,7 +1682,7 @@ input[type="file"] {
line-height: 34px; } line-height: 34px; }
select { select {
border: 1px solid #cccccc; border: 1px solid #ccc;
background-color: white; } background-color: white; }
select[multiple], select[multiple],
@ -1735,7 +1754,7 @@ input[type="checkbox"][readonly] {
right: 20px; right: 20px;
transition: 0.2s ease; transition: 0.2s ease;
transition-property: left, right; transition-property: left, right;
transition-delay: 0s, 0.05s; } transition-delay: 0s, .05s; }
.toggle :checked + .track { .toggle :checked + .track {
/* When the toggle is "on" */ /* When the toggle is "on" */
@ -1750,7 +1769,7 @@ input[type="checkbox"][readonly] {
right: 0; right: 0;
left: 20px; left: 20px;
-webkit-transform: none; -webkit-transform: none;
transition-delay: 0.05s, 0s; } transition-delay: .05s, 0s; }
.item-radio { .item-radio {
padding: 0; } padding: 0; }
@ -1814,8 +1833,9 @@ input[type="range"] {
position: relative; position: relative;
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: 10px 12px 7px 12px; padding: 0 12px;
min-height: 44px; padding-top: 1px;
min-height: 42px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-radius: 2px; border-radius: 2px;
@ -1824,24 +1844,24 @@ input[type="range"] {
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 16px; font-size: 16px;
line-height: 23px; line-height: 41px;
cursor: pointer; } cursor: pointer; }
.button i, .button .icon { .button i, .button .icon {
display: inline-block; display: inline-block;
padding: 0; padding: 0 0 1px 0;
vertical-align: inherit; vertical-align: inherit;
font-size: 24px; font-size: 24px;
line-height: 22px; } line-height: 40px; }
.button.button-icon { .button.button-icon {
padding: 12px 6px; padding: 2px 4px;
background: none; } background: none; }
.button.button-icon i, .button.button-icon .icon { .button.button-icon i, .button.button-icon .icon {
font-size: 32px; } font-size: 32px; }
.button.button-clear { .button.button-clear {
-webkit-transition: opacity 0.1s; -webkit-transition: opacity 0.1s;
transition: opacity 0.1s; transition: opacity 0.1s;
padding: 12px 6px; padding: 0 6px;
max-height: 44px; max-height: 42px;
border: none; border: none;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
@ -2034,26 +2054,28 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active { .button.button-icon:active, .button.button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px white; } text-shadow: 0px 0px 10px #fff; }
.button.block, .button.button-full { .button.block, .button.button-full {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; } margin-bottom: 10px; }
.button-small { .button-small {
padding: 1px 8px 1px 8px; padding: 0 4px;
min-height: 32px; min-height: 28px;
line-height: 29px; font-size: 12px;
font-size: 12px; } line-height: 27px; }
.button-small i, .button-small .icon { .button-small i, .button-small .icon {
font-size: 20px; font-size: 16px;
line-height: 26px; } line-height: 26px; }
.button-large { .button-large {
padding: 12px 18px 12px 18px; padding: 0 12px;
min-height: 52px; min-height: 54px;
font-size: 24px; } font-size: 18px;
line-height: 53px; }
.button-large i, .button-large .icon { .button-large i, .button-large .icon {
font-size: 32px; } font-size: 32px;
line-height: 52px; }
.padding > .button.block:first-child { .padding > .button.block:first-child {
margin-top: 0; } margin-top: 0; }
@ -2076,45 +2098,45 @@ a.button {
text-decoration: none; } text-decoration: none; }
.button-bar { .button-bar {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
display: -webkit-box; display: -webkit-box;
display: box; } display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: horizontal;
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal; }
.button-bar > .button { .button-bar > .button {
box-flex: 1;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
display: block; -moz-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden; overflow: hidden;
padding: 8px 16px; padding: 0 16px;
width: 0; width: 0;
border-width: 1px 0px 1px 1px; border-width: 1px 0px 1px 1px;
border-radius: 0; border-radius: 0;
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap; }
line-height: 15px; }
.button-bar > .button:first-child { .button-bar > .button:first-child {
border-radius: 2px 0px 0px 2px; } border-radius: 2px 0px 0px 2px; }
.button-bar > .button:last-child { .button-bar > .button:last-child {
border-right-width: 1px; border-right-width: 1px;
border-radius: 0px 2px 2px 0px; } border-radius: 0px 2px 2px 0px; }
.buttons {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
display: -webkit-box;
display: box; }
.badge { .badge {
display: inline-block; display: inline-block;
min-width: 10px; min-width: 10px;
@ -2349,6 +2371,45 @@ a.button {
-webkit-transform: rotate(360deg); -webkit-transform: rotate(360deg);
transform: rotate(360deg); } } transform: rotate(360deg); } }
i.icon-default, .icon.icon-default {
color: white; }
i.icon-secondary, .icon.icon-secondary {
color: gainsboro; }
i.icon-primary, .icon.icon-primary {
color: #4a87ee; }
i.icon-info, .icon.icon-info {
color: #43cee6; }
i.icon-success, .icon.icon-success {
color: #66cc33; }
i.icon-warning, .icon.icon-warning {
color: #f0b840; }
i.icon-danger, .icon.icon-danger {
color: #ef4e3a; }
i.icon-dark, .icon.icon-dark {
color: #444444; }
i.icon-gray-darker, .icon.icon-gray-darker {
color: #222222; }
i.icon-gray-dark, .icon.icon-gray-dark {
color: #333333; }
i.icon-gray, .icon.icon-gray {
color: #555555; }
i.icon-gray-light, .icon.icon-gray-light {
color: #999999; }
i.icon-gray-lighter, .icon.icon-gray-lighter {
color: #999999; }
.fill-icon { .fill-icon {
color: white !important; } color: white !important; }
.fill-icon:before { .fill-icon:before {
@ -2356,31 +2417,31 @@ a.button {
position: relative; position: relative;
border-radius: 6px; border-radius: 6px;
padding: 1px; } padding: 1px; }
.fill-icon.brand-default:before { .fill-icon.icon-default:before {
background: white; } background: white; }
.fill-icon.brand-secondary:before { .fill-icon.icon-secondary:before {
background: whitesmoke; } background: whitesmoke; }
.fill-icon.brand-primary:before { .fill-icon.icon-primary:before {
background: #4a87ee; } background: #4a87ee; }
.fill-icon.brand-info:before { .fill-icon.icon-info:before {
background: #43cee6; } background: #43cee6; }
.fill-icon.brand-success:before { .fill-icon.icon-success:before {
background: #66cc33; } background: #66cc33; }
.fill-icon.brand-warning:before { .fill-icon.icon-warning:before {
background: #f0b840; } background: #f0b840; }
.fill-icon.brand-danger:before { .fill-icon.icon-danger:before {
background: #ef4e3a; } background: #ef4e3a; }
.fill-icon.brand-dark:before { .fill-icon.icon-dark:before {
background: #444444; } background: #444444; }
.fill-icon.gray-darker:before { .fill-icon.icon-gray-darker:before {
background: #222222; } background: #222222; }
.fill-icon.gray-dark:before { .fill-icon.icon-gray-dark:before {
background: #333333; } background: #333333; }
.fill-icon.gray:before { .fill-icon.icon-gray:before {
background: #555555; } background: #555555; }
.fill-icon.gray-light:before { .fill-icon.icon-gray-light:before {
background: #999999; } background: #999999; }
.fill-icon.gray-lighter:before { .fill-icon.icon-gray-lighter:before {
background: #eeeeee; } background: #eeeeee; }
.icon-loading { .icon-loading {
@ -2392,9 +2453,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.icon-loading:before { .icon-loading:before {
content: "\e144"; } content: "\e144"; }
@ -2407,9 +2468,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.icon-refreshing:before { .icon-refreshing:before {
content: "\e144"; } content: "\e144"; }

View File

@ -213,12 +213,12 @@
transform: rotate(360deg); } } transform: rotate(360deg); } }
} }
.ionic i, .ionic .icon { .ionic i, .ionic .icon {
font-family: 'ionicons'; font-family: 'ionicons' !important;
speak: none; speak: none !important;
font-style: normal; font-style: normal !important;
font-weight: normal; font-weight: normal !important;
font-variant: normal; font-variant: normal !important;
text-transform: none; text-transform: none !important;
line-height: 1; line-height: 1;
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -1108,7 +1108,7 @@
.ionic a, .ionic abbr, .ionic acronym, .ionic address, .ionic big, .ionic cite, .ionic code, .ionic a, .ionic abbr, .ionic acronym, .ionic address, .ionic big, .ionic cite, .ionic code,
.ionic del, .ionic dfn, .ionic em, .ionic img, .ionic ins, .ionic kbd, .ionic q, .ionic s, .ionic samp, .ionic del, .ionic dfn, .ionic em, .ionic img, .ionic ins, .ionic kbd, .ionic q, .ionic s, .ionic samp,
.ionic small, .ionic strike, .ionic strong, .ionic sub, .ionic sup, .ionic tt, .ionic var, .ionic small, .ionic strike, .ionic strong, .ionic sub, .ionic sup, .ionic tt, .ionic var,
.ionic b, .ionic u, .ionic i, .ionic center, .ionic b, .ionic u, .ionic center,
.ionic dl, .ionic dt, .ionic dd, .ionic ol, .ionic ul, .ionic li, .ionic dl, .ionic dt, .ionic dd, .ionic ol, .ionic ul, .ionic li,
.ionic fieldset, .ionic form, .ionic label, .ionic legend, .ionic fieldset, .ionic form, .ionic label, .ionic legend,
.ionic table, .ionic caption, .ionic tbody, .ionic tfoot, .ionic thead, .ionic tr, .ionic th, .ionic td, .ionic table, .ionic caption, .ionic tbody, .ionic tfoot, .ionic thead, .ionic tr, .ionic th, .ionic td,
@ -1195,7 +1195,7 @@
.ionic fieldset { .ionic fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; } border: 1px solid #c0c0c0; }
.ionic legend { .ionic legend {
padding: 0; padding: 0;
/* 2 */ /* 2 */
@ -1489,8 +1489,8 @@
border-style: solid; border-style: solid;
border-top: 1px solid transparent; border-top: 1px solid transparent;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
background-size: 0; background-color: white;
background-color: white; } background-size: 0; }
@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) { @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 { .ionic .bar {
border-top: none !important; border-top: none !important;
@ -1579,20 +1579,17 @@
.ionic .bar .title a { .ionic .bar .title a {
color: inherit; } color: inherit; }
.ionic .bar > .button { .ionic .bar > .button {
box-flex: 1;
-webkit-box-flex: 0;
-moz-box-flex: 0;
z-index: 1; z-index: 1;
margin: 0; padding: 0 8px;
padding: 2px 8px 0 8px; min-height: 31px;
min-height: 33px;
background-color: transparent;
font-size: 12px; font-size: 12px;
line-height: 28px; } line-height: 30px; }
.ionic .bar > .button i, .ionic .bar > .button .icon { .ionic .bar > .button i, .ionic .bar > .button .icon {
margin-top: 1px; } font-size: 24px;
.ionic .bar .button-bar { line-height: 29px; }
line-height: 18px; } .ionic .bar .button-bar > .button {
min-height: 31px;
line-height: 31px; }
.ionic .bar .button-bar + .button, .ionic .bar .button + .button-bar { .ionic .bar .button-bar + .button, .ionic .bar .button + .button-bar {
margin-left: 5px; } margin-left: 5px; }
.ionic .bar .title + .button:last-child, .ionic .bar .title + .button:last-child,
@ -1749,9 +1746,17 @@
bottom: 44px; bottom: 44px;
display: block; } display: block; }
.ionic .tabs { .ionic .tabs {
box-orient: horizontal; display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-moz-box-orient: horizontal; -webkit-flex-direction: horizontal;
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal;
background-color: white; background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd; border-color: #dddddd;
@ -1759,8 +1764,6 @@
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 5; z-index: 5;
display: -webkit-box;
display: box;
width: 100%; width: 100%;
height: 49px; height: 49px;
border-style: solid; border-style: solid;
@ -1818,13 +1821,16 @@
.ionic .tabs-top { .ionic .tabs-top {
top: 44px; } top: 44px; }
.ionic .tab-item { .ionic .tab-item {
box-flex: 1;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
display: block; -moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: inline-block;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
width: 0; margin: auto;
height: 100%; height: 100%;
color: inherit; color: inherit;
text-align: center; text-align: center;
@ -1874,6 +1880,15 @@
color: #f0b840; } color: #f0b840; }
.ionic .tab-item.active.tab-item-dark, .ionic .tab-item:active.tab-item-dark { .ionic .tab-item.active.tab-item-dark, .ionic .tab-item:active.tab-item-dark {
color: #444444; } color: #444444; }
.ionic .item.tabs {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
padding: 0; }
.ionic .item.tabs i, .ionic .item.tabs .icon {
position: relative; }
.ionic .menu { .ionic .menu {
position: absolute; position: absolute;
top: 0; top: 0;
@ -2086,7 +2101,9 @@
height: 100%; height: 100%;
font-size: 32px; } font-size: 32px; }
.ionic .item .fill-icon { .ionic .item .fill-icon {
font-size: 28px; } font-size: 28px;
min-width: 30px;
min-height: 30px; }
.ionic .item-icon-left { .ionic .item-icon-left {
padding-left: 45px; } padding-left: 45px; }
.ionic .item-icon-left i, .ionic .item-icon-left .icon { .ionic .item-icon-left i, .ionic .item-icon-left .icon {
@ -2151,22 +2168,22 @@
width: 100%; width: 100%;
border-radius: 4px; } border-radius: 4px; }
.ionic .item-thumbnail-left { .ionic .item-thumbnail-left {
padding-left: 95px; padding-left: 105px;
min-height: 80px; } min-height: 100px; }
.ionic .item-thumbnail-left img:first-child, .ionic .item-thumbnail-left .item-image { .ionic .item-thumbnail-left img:first-child, .ionic .item-thumbnail-left .item-image {
position: absolute; position: absolute;
top: 0; top: 10px;
left: 0; left: 10px;
max-width: 80px; max-width: 80px;
max-height: 80px; max-height: 80px;
width: 100%; } width: 100%; }
.ionic .item-thumbnail-right { .ionic .item-thumbnail-right {
padding-right: 95px; padding-right: 105px;
min-height: 80px; } min-height: 100px; }
.ionic .item-thumbnail-right img:first-child, .ionic .item-thumbnail-right .item-image { .ionic .item-thumbnail-right img:first-child, .ionic .item-thumbnail-right .item-image {
position: absolute; position: absolute;
top: 0; top: 10px;
right: 0; right: 10px;
max-width: 80px; max-width: 80px;
max-height: 80px; max-height: 80px;
width: 100%; } width: 100%; }
@ -2187,11 +2204,16 @@
.ionic .item-divider { .ionic .item-divider {
margin: -1px; margin: -1px;
padding: 5px 15px; padding: 5px 15px;
min-height: 30px;
border: none; border: none;
background-color: whitesmoke; background-color: whitesmoke;
box-shadow: inset 0 0 1px #666666; box-shadow: inset 0 0 1px #666666;
color: #222222; color: #222222;
font-weight: bold; } font-weight: bold; }
.ionic .item-note {
float: right;
color: #aaa;
font-size: 14px; }
.ionic .item-sliding { .ionic .item-sliding {
-webkit-transition: -webkit-transform 0.1s ease-in-out; } -webkit-transition: -webkit-transform 0.1s ease-in-out; }
.ionic .item-reordering { .ionic .item-reordering {
@ -2274,10 +2296,6 @@
.ionic .card.list .list-item { .ionic .card.list .list-item {
padding-right: 1px; padding-right: 1px;
padding-left: 1px; } padding-left: 1px; }
.ionic .item-label-right {
float: right;
color: #aaa;
font-size: 14px; }
.ionic .card, .ionic .card,
.ionic .list-inset { .ionic .list-inset {
overflow: hidden; overflow: hidden;
@ -2487,7 +2505,7 @@
.ionic input[type="file"] { .ionic input[type="file"] {
line-height: 34px; } line-height: 34px; }
.ionic select { .ionic select {
border: 1px solid #cccccc; border: 1px solid #ccc;
background-color: white; } background-color: white; }
.ionic select[multiple], .ionic select[multiple],
.ionic select[size] { .ionic select[size] {
@ -2536,7 +2554,7 @@
border-radius: 50%; border-radius: 50%;
background: white; background: white;
content: ' '; content: ' ';
transition: background-color 0.1s ease-in-out; } transition: background-color .1s ease-in-out; }
.ionic .checkbox input:after { .ionic .checkbox input:after {
position: absolute; position: absolute;
top: 34%; top: 34%;
@ -2549,7 +2567,7 @@
border-right: 0; border-right: 0;
content: ' '; content: ' ';
opacity: 0; opacity: 0;
transition: opacity 0.05s ease-in-out; transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
.ionic .checkbox input:checked:before { .ionic .checkbox input:checked:before {
@ -2680,8 +2698,9 @@
position: relative; position: relative;
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: 10px 12px 7px 12px; padding: 0 12px;
min-height: 44px; padding-top: 1px;
min-height: 42px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-radius: 2px; border-radius: 2px;
@ -2690,24 +2709,24 @@
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 16px; font-size: 16px;
line-height: 23px; line-height: 41px;
cursor: pointer; } cursor: pointer; }
.ionic .button i, .ionic .button .icon { .ionic .button i, .ionic .button .icon {
display: inline-block; display: inline-block;
padding: 0; padding: 0 0 1px 0;
vertical-align: inherit; vertical-align: inherit;
font-size: 24px; font-size: 24px;
line-height: 22px; } line-height: 40px; }
.ionic .button.button-icon { .ionic .button.button-icon {
padding: 12px 6px; padding: 2px 4px;
background: none; } background: none; }
.ionic .button.button-icon i, .ionic .button.button-icon .icon { .ionic .button.button-icon i, .ionic .button.button-icon .icon {
font-size: 32px; } font-size: 32px; }
.ionic .button.button-clear { .ionic .button.button-clear {
-webkit-transition: opacity 0.1s; -webkit-transition: opacity 0.1s;
transition: opacity 0.1s; transition: opacity 0.1s;
padding: 12px 6px; padding: 0 6px;
max-height: 44px; max-height: 42px;
border: none; border: none;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
@ -2900,24 +2919,26 @@
.ionic .button.button-icon:active, .ionic .button.button-icon.active { .ionic .button.button-icon:active, .ionic .button.button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px white; } text-shadow: 0px 0px 10px #fff; }
.ionic .button.block, .ionic .button.button-full { .ionic .button.block, .ionic .button.button-full {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; } margin-bottom: 10px; }
.ionic .button-small { .ionic .button-small {
padding: 1px 8px 1px 8px; padding: 0 4px;
min-height: 32px; min-height: 28px;
line-height: 29px; font-size: 12px;
font-size: 12px; } line-height: 27px; }
.ionic .button-small i, .ionic .button-small .icon { .ionic .button-small i, .ionic .button-small .icon {
font-size: 20px; font-size: 16px;
line-height: 26px; } line-height: 26px; }
.ionic .button-large { .ionic .button-large {
padding: 12px 18px 12px 18px; padding: 0 12px;
min-height: 52px; min-height: 54px;
font-size: 24px; } font-size: 18px;
line-height: 53px; }
.ionic .button-large i, .ionic .button-large .icon { .ionic .button-large i, .ionic .button-large .icon {
font-size: 32px; } font-size: 32px;
line-height: 52px; }
.ionic .padding > .button.block:first-child { .ionic .padding > .button.block:first-child {
margin-top: 0; } margin-top: 0; }
.ionic .button-full, .ionic .button-full,
@ -2935,42 +2956,43 @@
.ionic a.button { .ionic a.button {
text-decoration: none; } text-decoration: none; }
.ionic .button-bar { .ionic .button-bar {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
display: -webkit-box; display: -webkit-box;
display: box; } display: -webkit-flex;
.ionic .button-bar > .button { display: -moz-flex;
box-flex: 1; display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
display: block; -moz-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: horizontal;
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal; }
.ionic .button-bar > .button {
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden; overflow: hidden;
padding: 8px 16px; padding: 0 16px;
width: 0; width: 0;
border-width: 1px 0px 1px 1px; border-width: 1px 0px 1px 1px;
border-radius: 0; border-radius: 0;
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap; }
line-height: 15px; }
.ionic .button-bar > .button:first-child { .ionic .button-bar > .button:first-child {
border-radius: 2px 0px 0px 2px; } border-radius: 2px 0px 0px 2px; }
.ionic .button-bar > .button:last-child { .ionic .button-bar > .button:last-child {
border-right-width: 1px; border-right-width: 1px;
border-radius: 0px 2px 2px 0px; } border-radius: 0px 2px 2px 0px; }
.ionic .buttons {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
display: -webkit-box;
display: box; }
.ionic .badge { .ionic .badge {
display: inline-block; display: inline-block;
min-width: 10px; min-width: 10px;
@ -3124,6 +3146,32 @@
.ionic .fade-in.active { .ionic .fade-in.active {
-webkit-animation: fadeIn 0.3s; -webkit-animation: fadeIn 0.3s;
animation: fadeIn 0.3s; } animation: fadeIn 0.3s; }
.ionic i.icon-default, .ionic .icon.icon-default {
color: white; }
.ionic i.icon-secondary, .ionic .icon.icon-secondary {
color: gainsboro; }
.ionic i.icon-primary, .ionic .icon.icon-primary {
color: #4a87ee; }
.ionic i.icon-info, .ionic .icon.icon-info {
color: #43cee6; }
.ionic i.icon-success, .ionic .icon.icon-success {
color: #66cc33; }
.ionic i.icon-warning, .ionic .icon.icon-warning {
color: #f0b840; }
.ionic i.icon-danger, .ionic .icon.icon-danger {
color: #ef4e3a; }
.ionic i.icon-dark, .ionic .icon.icon-dark {
color: #444444; }
.ionic i.icon-gray-darker, .ionic .icon.icon-gray-darker {
color: #222222; }
.ionic i.icon-gray-dark, .ionic .icon.icon-gray-dark {
color: #333333; }
.ionic i.icon-gray, .ionic .icon.icon-gray {
color: #555555; }
.ionic i.icon-gray-light, .ionic .icon.icon-gray-light {
color: #999999; }
.ionic i.icon-gray-lighter, .ionic .icon.icon-gray-lighter {
color: #999999; }
.ionic .fill-icon { .ionic .fill-icon {
color: white !important; } color: white !important; }
.ionic .fill-icon:before { .ionic .fill-icon:before {
@ -3131,31 +3179,31 @@
position: relative; position: relative;
border-radius: 6px; border-radius: 6px;
padding: 1px; } padding: 1px; }
.ionic .fill-icon.brand-default:before { .ionic .fill-icon.icon-default:before {
background: white; } background: white; }
.ionic .fill-icon.brand-secondary:before { .ionic .fill-icon.icon-secondary:before {
background: whitesmoke; } background: whitesmoke; }
.ionic .fill-icon.brand-primary:before { .ionic .fill-icon.icon-primary:before {
background: #4a87ee; } background: #4a87ee; }
.ionic .fill-icon.brand-info:before { .ionic .fill-icon.icon-info:before {
background: #43cee6; } background: #43cee6; }
.ionic .fill-icon.brand-success:before { .ionic .fill-icon.icon-success:before {
background: #66cc33; } background: #66cc33; }
.ionic .fill-icon.brand-warning:before { .ionic .fill-icon.icon-warning:before {
background: #f0b840; } background: #f0b840; }
.ionic .fill-icon.brand-danger:before { .ionic .fill-icon.icon-danger:before {
background: #ef4e3a; } background: #ef4e3a; }
.ionic .fill-icon.brand-dark:before { .ionic .fill-icon.icon-dark:before {
background: #444444; } background: #444444; }
.ionic .fill-icon.gray-darker:before { .ionic .fill-icon.icon-gray-darker:before {
background: #222222; } background: #222222; }
.ionic .fill-icon.gray-dark:before { .ionic .fill-icon.icon-gray-dark:before {
background: #333333; } background: #333333; }
.ionic .fill-icon.gray:before { .ionic .fill-icon.icon-gray:before {
background: #555555; } background: #555555; }
.ionic .fill-icon.gray-light:before { .ionic .fill-icon.icon-gray-light:before {
background: #999999; } background: #999999; }
.ionic .fill-icon.gray-lighter:before { .ionic .fill-icon.icon-gray-lighter:before {
background: #eeeeee; } background: #eeeeee; }
.ionic .icon-loading { .ionic .icon-loading {
font-family: 'ionicons'; font-family: 'ionicons';
@ -3166,9 +3214,9 @@
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.ionic .icon-loading:before { .ionic .icon-loading:before {
content: "\e144"; } content: "\e144"; }
.ionic .icon-refreshing { .ionic .icon-refreshing {
@ -3180,9 +3228,9 @@
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.ionic .icon-refreshing:before { .ionic .icon-refreshing:before {
content: "\e144"; } content: "\e144"; }
.ionic .hidden, .ionic .hidden,

269
dist/css/ionic.css vendored
View File

@ -7,12 +7,12 @@
font-style: normal; } font-style: normal; }
i, .icon { i, .icon {
font-family: 'ionicons'; font-family: 'ionicons' !important;
speak: none; speak: none !important;
font-style: normal; font-style: normal !important;
font-weight: normal; font-weight: normal !important;
font-variant: normal; font-variant: normal !important;
text-transform: none; text-transform: none !important;
line-height: 1; line-height: 1;
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
@ -1355,7 +1355,7 @@ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, small, strike, strong, sub, sup, tt, var,
b, u, i, center, b, u, center,
dl, dt, dd, ol, ul, li, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, table, caption, tbody, tfoot, thead, tr, th, td,
@ -1521,7 +1521,7 @@ sub {
fieldset { fieldset {
margin: 0 2px; margin: 0 2px;
padding: 0.35em 0.625em 0.75em; padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; } border: 1px solid #c0c0c0; }
/** /**
* 1. Correct `color` not being inherited in IE 8/9. * 1. Correct `color` not being inherited in IE 8/9.
@ -1925,8 +1925,8 @@ a.subdued {
border-style: solid; border-style: solid;
border-top: 1px solid transparent; border-top: 1px solid transparent;
border-bottom: 1px solid #dddddd; border-bottom: 1px solid #dddddd;
background-size: 0; background-color: white;
background-color: white; } background-size: 0; }
@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) { @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 {
border-top: none !important; border-top: none !important;
@ -2015,20 +2015,17 @@ a.subdued {
.bar .title a { .bar .title a {
color: inherit; } color: inherit; }
.bar > .button { .bar > .button {
box-flex: 1;
-webkit-box-flex: 0;
-moz-box-flex: 0;
z-index: 1; z-index: 1;
margin: 0; padding: 0 8px;
padding: 2px 8px 0 8px; min-height: 31px;
min-height: 33px;
background-color: transparent;
font-size: 12px; font-size: 12px;
line-height: 28px; } line-height: 30px; }
.bar > .button i, .bar > .button .icon { .bar > .button i, .bar > .button .icon {
margin-top: 1px; } font-size: 24px;
.bar .button-bar { line-height: 29px; }
line-height: 18px; } .bar .button-bar > .button {
min-height: 31px;
line-height: 31px; }
.bar .button-bar + .button, .bar .button + .button-bar { .bar .button-bar + .button, .bar .button + .button-bar {
margin-left: 5px; } margin-left: 5px; }
.bar .title + .button:last-child, .bar .title + .button:last-child,
@ -2204,9 +2201,17 @@ a.subdued {
* A navigation bar with any number of tab items supported. * A navigation bar with any number of tab items supported.
*/ */
.tabs { .tabs {
box-orient: horizontal; display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal; -webkit-box-orient: horizontal;
-moz-box-orient: horizontal; -webkit-flex-direction: horizontal;
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal;
background-color: white; background-color: white;
background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%); background-image: linear-gradient(0deg, #dddddd, #dddddd 50%, transparent 50%);
border-color: #dddddd; border-color: #dddddd;
@ -2214,8 +2219,6 @@ a.subdued {
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 5; z-index: 5;
display: -webkit-box;
display: box;
width: 100%; width: 100%;
height: 49px; height: 49px;
border-style: solid; border-style: solid;
@ -2275,13 +2278,16 @@ a.subdued {
top: 44px; } top: 44px; }
.tab-item { .tab-item {
box-flex: 1;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
display: block; -moz-flex: 1;
-ms-flex: 1;
flex: 1;
display: inline-block;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
width: 0; margin: auto;
height: 100%; height: 100%;
color: inherit; color: inherit;
text-align: center; text-align: center;
@ -2339,6 +2345,16 @@ a.subdued {
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark { .tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
color: #444444; } color: #444444; }
.item.tabs {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
padding: 0; }
.item.tabs i, .item.tabs .icon {
position: relative; }
.menu { .menu {
position: absolute; position: absolute;
top: 0; top: 0;
@ -2601,7 +2617,9 @@ a.item {
font-size: 32px; } font-size: 32px; }
.item .fill-icon { .item .fill-icon {
font-size: 28px; } font-size: 28px;
min-width: 30px;
min-height: 30px; }
.item-icon-left { .item-icon-left {
padding-left: 45px; } padding-left: 45px; }
@ -2676,23 +2694,23 @@ button.item-icon-right:after {
border-radius: 4px; } border-radius: 4px; }
.item-thumbnail-left { .item-thumbnail-left {
padding-left: 95px; padding-left: 105px;
min-height: 80px; } min-height: 100px; }
.item-thumbnail-left img:first-child, .item-thumbnail-left .item-image { .item-thumbnail-left img:first-child, .item-thumbnail-left .item-image {
position: absolute; position: absolute;
top: 0; top: 10px;
left: 0; left: 10px;
max-width: 80px; max-width: 80px;
max-height: 80px; max-height: 80px;
width: 100%; } width: 100%; }
.item-thumbnail-right { .item-thumbnail-right {
padding-right: 95px; padding-right: 105px;
min-height: 80px; } min-height: 100px; }
.item-thumbnail-right img:first-child, .item-thumbnail-right .item-image { .item-thumbnail-right img:first-child, .item-thumbnail-right .item-image {
position: absolute; position: absolute;
top: 0; top: 10px;
right: 0; right: 10px;
max-width: 80px; max-width: 80px;
max-height: 80px; max-height: 80px;
width: 100%; } width: 100%; }
@ -2716,12 +2734,18 @@ button.item-icon-right:after {
.item-divider { .item-divider {
margin: -1px; margin: -1px;
padding: 5px 15px; padding: 5px 15px;
min-height: 30px;
border: none; border: none;
background-color: whitesmoke; background-color: whitesmoke;
box-shadow: inset 0 0 1px #666666; box-shadow: inset 0 0 1px #666666;
color: #222222; color: #222222;
font-weight: bold; } font-weight: bold; }
.item-note {
float: right;
color: #aaa;
font-size: 14px; }
.item-sliding { .item-sliding {
-webkit-transition: -webkit-transform 0.1s ease-in-out; } -webkit-transition: -webkit-transform 0.1s ease-in-out; }
@ -2827,11 +2851,6 @@ button.item-icon-right:after {
padding-right: 1px; padding-right: 1px;
padding-left: 1px; } padding-left: 1px; }
.item-label-right {
float: right;
color: #aaa;
font-size: 14px; }
/* /*
A card and list-inset are close to the same thing, except a card as a box shadow. A card and list-inset are close to the same thing, except a card as a box shadow.
*/ */
@ -3066,7 +3085,7 @@ input[type="file"] {
line-height: 34px; } line-height: 34px; }
select { select {
border: 1px solid #cccccc; border: 1px solid #ccc;
background-color: white; } background-color: white; }
select[multiple], select[multiple],
@ -3121,7 +3140,7 @@ input[type="checkbox"][readonly] {
border-radius: 50%; border-radius: 50%;
background: white; background: white;
content: ' '; content: ' ';
transition: background-color 0.1s ease-in-out; } transition: background-color .1s ease-in-out; }
/* the checkmark within the box */ /* the checkmark within the box */
.checkbox input:after { .checkbox input:after {
@ -3136,7 +3155,7 @@ input[type="checkbox"][readonly] {
border-right: 0; border-right: 0;
content: ' '; content: ' ';
opacity: 0; opacity: 0;
transition: opacity 0.05s ease-in-out; transition: opacity .05s ease-in-out;
-webkit-transform: rotate(-45deg); -webkit-transform: rotate(-45deg);
transform: rotate(-45deg); } transform: rotate(-45deg); }
@ -3295,8 +3314,9 @@ input[type="range"] {
position: relative; position: relative;
display: inline-block; display: inline-block;
margin: 0; margin: 0;
padding: 10px 12px 7px 12px; padding: 0 12px;
min-height: 44px; padding-top: 1px;
min-height: 42px;
border-width: 1px; border-width: 1px;
border-style: solid; border-style: solid;
border-radius: 2px; border-radius: 2px;
@ -3305,24 +3325,24 @@ input[type="range"] {
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: 16px; font-size: 16px;
line-height: 23px; line-height: 41px;
cursor: pointer; } cursor: pointer; }
.button i, .button .icon { .button i, .button .icon {
display: inline-block; display: inline-block;
padding: 0; padding: 0 0 1px 0;
vertical-align: inherit; vertical-align: inherit;
font-size: 24px; font-size: 24px;
line-height: 22px; } line-height: 40px; }
.button.button-icon { .button.button-icon {
padding: 12px 6px; padding: 2px 4px;
background: none; } background: none; }
.button.button-icon i, .button.button-icon .icon { .button.button-icon i, .button.button-icon .icon {
font-size: 32px; } font-size: 32px; }
.button.button-clear { .button.button-clear {
-webkit-transition: opacity 0.1s; -webkit-transition: opacity 0.1s;
transition: opacity 0.1s; transition: opacity 0.1s;
padding: 12px 6px; padding: 0 6px;
max-height: 44px; max-height: 42px;
border: none; border: none;
background: none; background: none;
box-shadow: none; } box-shadow: none; }
@ -3515,26 +3535,28 @@ input[type="range"] {
.button.button-icon:active, .button.button-icon.active { .button.button-icon:active, .button.button-icon.active {
background: none; background: none;
box-shadow: none; box-shadow: none;
text-shadow: 0px 0px 10px white; } text-shadow: 0px 0px 10px #fff; }
.button.block, .button.button-full { .button.block, .button.button-full {
margin-top: 10px; margin-top: 10px;
margin-bottom: 10px; } margin-bottom: 10px; }
.button-small { .button-small {
padding: 1px 8px 1px 8px; padding: 0 4px;
min-height: 32px; min-height: 28px;
line-height: 29px; font-size: 12px;
font-size: 12px; } line-height: 27px; }
.button-small i, .button-small .icon { .button-small i, .button-small .icon {
font-size: 20px; font-size: 16px;
line-height: 26px; } line-height: 26px; }
.button-large { .button-large {
padding: 12px 18px 12px 18px; padding: 0 12px;
min-height: 52px; min-height: 54px;
font-size: 24px; } font-size: 18px;
line-height: 53px; }
.button-large i, .button-large .icon { .button-large i, .button-large .icon {
font-size: 32px; } font-size: 32px;
line-height: 52px; }
.padding > .button.block:first-child { .padding > .button.block:first-child {
margin-top: 0; } margin-top: 0; }
@ -3557,45 +3579,45 @@ a.button {
text-decoration: none; } text-decoration: none; }
.button-bar { .button-bar {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
display: -webkit-box; display: -webkit-box;
display: box; } display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1;
-moz-flex: 1;
-ms-flex: 1;
flex: 1;
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
-webkit-flex-direction: horizontal;
-moz-flex-direction: horizontal;
-ms-flex-direction: horizontal;
flex-direction: horizontal; }
.button-bar > .button { .button-bar > .button {
box-flex: 1;
-webkit-box-flex: 1; -webkit-box-flex: 1;
-webkit-flex: 1;
-moz-box-flex: 1; -moz-box-flex: 1;
display: block; -moz-flex: 1;
-ms-flex: 1;
flex: 1;
overflow: hidden; overflow: hidden;
padding: 8px 16px; padding: 0 16px;
width: 0; width: 0;
border-width: 1px 0px 1px 1px; border-width: 1px 0px 1px 1px;
border-radius: 0; border-radius: 0;
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap; }
line-height: 15px; }
.button-bar > .button:first-child { .button-bar > .button:first-child {
border-radius: 2px 0px 0px 2px; } border-radius: 2px 0px 0px 2px; }
.button-bar > .button:last-child { .button-bar > .button:last-child {
border-right-width: 1px; border-right-width: 1px;
border-radius: 0px 2px 2px 0px; } border-radius: 0px 2px 2px 0px; }
.buttons {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
display: -webkit-box;
display: box; }
.badge { .badge {
display: inline-block; display: inline-block;
min-width: 10px; min-width: 10px;
@ -3935,6 +3957,45 @@ a.button {
-webkit-transform: rotate(360deg); -webkit-transform: rotate(360deg);
transform: rotate(360deg); } } transform: rotate(360deg); } }
i.icon-default, .icon.icon-default {
color: white; }
i.icon-secondary, .icon.icon-secondary {
color: gainsboro; }
i.icon-primary, .icon.icon-primary {
color: #4a87ee; }
i.icon-info, .icon.icon-info {
color: #43cee6; }
i.icon-success, .icon.icon-success {
color: #66cc33; }
i.icon-warning, .icon.icon-warning {
color: #f0b840; }
i.icon-danger, .icon.icon-danger {
color: #ef4e3a; }
i.icon-dark, .icon.icon-dark {
color: #444444; }
i.icon-gray-darker, .icon.icon-gray-darker {
color: #222222; }
i.icon-gray-dark, .icon.icon-gray-dark {
color: #333333; }
i.icon-gray, .icon.icon-gray {
color: #555555; }
i.icon-gray-light, .icon.icon-gray-light {
color: #999999; }
i.icon-gray-lighter, .icon.icon-gray-lighter {
color: #999999; }
.fill-icon { .fill-icon {
color: white !important; } color: white !important; }
.fill-icon:before { .fill-icon:before {
@ -3942,31 +4003,31 @@ a.button {
position: relative; position: relative;
border-radius: 6px; border-radius: 6px;
padding: 1px; } padding: 1px; }
.fill-icon.brand-default:before { .fill-icon.icon-default:before {
background: white; } background: white; }
.fill-icon.brand-secondary:before { .fill-icon.icon-secondary:before {
background: whitesmoke; } background: whitesmoke; }
.fill-icon.brand-primary:before { .fill-icon.icon-primary:before {
background: #4a87ee; } background: #4a87ee; }
.fill-icon.brand-info:before { .fill-icon.icon-info:before {
background: #43cee6; } background: #43cee6; }
.fill-icon.brand-success:before { .fill-icon.icon-success:before {
background: #66cc33; } background: #66cc33; }
.fill-icon.brand-warning:before { .fill-icon.icon-warning:before {
background: #f0b840; } background: #f0b840; }
.fill-icon.brand-danger:before { .fill-icon.icon-danger:before {
background: #ef4e3a; } background: #ef4e3a; }
.fill-icon.brand-dark:before { .fill-icon.icon-dark:before {
background: #444444; } background: #444444; }
.fill-icon.gray-darker:before { .fill-icon.icon-gray-darker:before {
background: #222222; } background: #222222; }
.fill-icon.gray-dark:before { .fill-icon.icon-gray-dark:before {
background: #333333; } background: #333333; }
.fill-icon.gray:before { .fill-icon.icon-gray:before {
background: #555555; } background: #555555; }
.fill-icon.gray-light:before { .fill-icon.icon-gray-light:before {
background: #999999; } background: #999999; }
.fill-icon.gray-lighter:before { .fill-icon.icon-gray-lighter:before {
background: #eeeeee; } background: #eeeeee; }
.icon-loading { .icon-loading {
@ -3978,9 +4039,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.icon-loading:before { .icon-loading:before {
content: "\e144"; } content: "\e144"; }
@ -3993,9 +4054,9 @@ a.button {
line-height: 1; line-height: 1;
-webkit-font-smoothing: antialiased; -webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale; -moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite; -webkit-animation: spin .75s linear infinite;
-moz-animation: spin 0.75s linear infinite; -moz-animation: spin .75s linear infinite;
animation: spin 0.75s linear infinite; } animation: spin .75s linear infinite; }
.icon-refreshing:before { .icon-refreshing:before {
content: "\e144"; } content: "\e144"; }

View File

@ -10,12 +10,12 @@
} }
i, .icon { i, .icon {
font-family: 'ionicons'; font-family: 'ionicons' !important;
speak: none; speak: none !important;
font-style: normal; font-style: normal !important;
font-weight: normal; font-weight: normal !important;
font-variant: normal; font-variant: normal !important;
text-transform: none; text-transform: none !important;
line-height: 1; line-height: 1;
/* Better Font Rendering =========== */ /* Better Font Rendering =========== */

View File

@ -40,7 +40,6 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
*/ */
this.pushFromTemplate = function(templateUrl) { this.pushFromTemplate = function(templateUrl) {
var childScope = $scope.$new(); var childScope = $scope.$new();
childScope.isVisible = true;
// Load the given template // Load the given template
TemplateLoader.load(templateUrl).then(function(templateString) { TemplateLoader.load(templateUrl).then(function(templateString) {
@ -123,13 +122,14 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
}; };
return { return {
restrict: 'ECA', restrict: 'CA',
require: '^navs', require: '^navs',
transclude: 'element', transclude: 'element',
compile: function(element, attr, transclude) { compile: function(element, attr, transclude) {
return function($scope, $element, $attr, navCtrl) { return function($scope, $element, $attr, navCtrl) {
var lastParent, lastIndex, childScope, childElement; var lastParent, lastIndex, childScope, childElement;
<<<<<<< HEAD
$scope.title = $attr.title; $scope.title = $attr.title;
$scope.slideAnimation = $attr.slideAnimation || ''; $scope.slideAnimation = $attr.slideAnimation || '';
@ -143,6 +143,9 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
// Push this controller onto the stack // Push this controller onto the stack
$scope.pushController($scope, $element); $scope.pushController($scope, $element);
=======
$scope.isVisible = true;
>>>>>>> e8bd9a5dee77d29b746115546a51b1a4a3d46246
$scope.$watch('isVisible', function(value) { $scope.$watch('isVisible', function(value) {
// Taken from ngIf // Taken from ngIf
@ -158,7 +161,10 @@ angular.module('ionic.ui.nav', ['ionic.service.templateLoad', 'ionic.service.ges
// Check if this is visible, and if so, create it and show it // Check if this is visible, and if so, create it and show it
if(value) { if(value) {
childScope = $scope.$new(); childScope = $scope.$new();
<<<<<<< HEAD
=======
>>>>>>> e8bd9a5dee77d29b746115546a51b1a4a3d46246
transclude(childScope, function(clone) { transclude(childScope, function(clone) {
childElement = clone; childElement = clone;

View File

@ -73,6 +73,11 @@
.controller('CatsCtrl', function($scope, $compile, $element) { .controller('CatsCtrl', function($scope, $compile, $element) {
console.log('Cats', $element); console.log('Cats', $element);
var items = [];
for(var i = 0; i < 100; i++) {
items.push({});
}
$scope.items = items;
$scope.goNext = function() { $scope.goNext = function() {
$scope.navController.pushFromTemplate('page.html'); $scope.navController.pushFromTemplate('page.html');
}; };

View File

@ -20,9 +20,9 @@
border-style: solid; border-style: solid;
border-top: 1px solid transparent; border-top: 1px solid transparent;
border-bottom: 1px solid $bar-default-border-color; border-bottom: 1px solid $bar-default-border-color;
background-size: 0;
background-color: $bar-bg; background-color: $bar-bg;
background-size: 0;
@media (min--moz-device-pixel-ratio: 1.5), @media (min--moz-device-pixel-ratio: 1.5),
(-webkit-min-device-pixel-ratio: 1.5), (-webkit-min-device-pixel-ratio: 1.5),
(min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5),
@ -102,22 +102,21 @@
} }
> .button { > .button {
@include box-flex(0);
z-index: 1; z-index: 1;
margin: 0; padding: $button-bar-button-padding;
padding: 2px 8px 0 8px; min-height: $button-bar-button-height;
min-height: $button-bar-button-min-height; font-size: $button-bar-button-font-size;
background-color: transparent; line-height: $button-bar-button-height - $button-border-width;
font-size: 12px;
line-height: 28px;
i, .icon { i, .icon {
margin-top: 1px; font-size: $button-bar-button-icon-size;
line-height: $button-bar-button-height - $button-border-width - 1;
} }
} }
.button-bar { .button-bar > .button {
line-height: $bar-button-bar-line-height; min-height: $button-bar-button-height;
line-height: $button-bar-button-height;
} }
.button-bar + .button, .button + .button-bar { .button-bar + .button, .button + .button-bar {

View File

@ -1,17 +1,16 @@
.button-bar { .button-bar {
@include box-flex(1); @include display-flex();
@include box-orient(horizontal); @include flex(1);
display: -webkit-box; @include flex-direction(horizontal);
display: box;
} }
.button-bar > .button { .button-bar > .button {
@include box-flex(1); @include flex(1);
display: block;
overflow: hidden; overflow: hidden;
padding: 8px 16px; padding: 0 16px;
// Fix for unequal widths of buttons // Fix for unequal widths of buttons
width: 0; width: 0;
@ -21,9 +20,6 @@
text-align: center; text-align: center;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
// Fix for box-flex width issue
line-height: $button-bar-button-line-height;
&:first-child { &:first-child {
border-radius: 2px 0px 0px 2px; border-radius: 2px 0px 0px 2px;
@ -33,13 +29,3 @@
border-radius: 0px 2px 2px 0px; border-radius: 0px 2px 2px 0px;
} }
} }
// Buttons are used to group a set of buttons, useful
// to pull a set of buttons to the right side of a header
// bar, for example.
.buttons {
@include box-flex(1);
@include box-orient(horizontal);
display: -webkit-box;
display: box;
}

View File

@ -4,7 +4,8 @@
margin: 0; margin: 0;
padding: $button-padding; padding: $button-padding;
min-height: $button-min-height; padding-top: 1px;
min-height: $button-height;
border-width: $button-border-width; border-width: $button-border-width;
border-style: solid; border-style: solid;
@ -17,31 +18,31 @@
text-overflow: ellipsis; text-overflow: ellipsis;
font-size: $button-font-size; font-size: $button-font-size;
line-height: $button-line-height; line-height: $button-height - $button-border-width;
cursor: pointer; cursor: pointer;
i, .icon { i, .icon {
display: inline-block; display: inline-block;
padding: 0; padding: 0 0 $button-border-width 0;
vertical-align: inherit; vertical-align: inherit;
font-size: $button-icon-font-size; font-size: $button-icon-size;
line-height: $button-line-height - 1; line-height: $button-height - $button-border-width - 1;
} }
&.button-icon { &.button-icon {
padding: $button-clear-padding; padding: 2px 4px;
background: none; background: none;
i, .icon { i, .icon {
font-size: $button-icon-large-font-size; font-size: $button-large-icon-size;
} }
} }
&.button-clear { &.button-clear {
@include transition(opacity .1s); @include transition(opacity .1s);
padding: $button-clear-padding; padding: $button-clear-padding;
max-height: 44px; max-height: $button-height;
border: none; border: none;
background: none; background: none;
box-shadow: none; box-shadow: none;
@ -116,24 +117,26 @@
} }
.button-small { .button-small {
padding: 1px 8px 1px 8px; padding: $button-small-padding;
min-height: $button-small-min-height; min-height: $button-small-height;
line-height: $button-small-line-height; font-size: $button-small-font-size;
font-size: $button-font-size - 4; line-height: $button-small-height - $button-border-width;
i, .icon { i, .icon {
font-size: $button-icon-font-size - 4; font-size: $button-small-icon-size;
line-height: $button-small-line-height - 3; line-height: $button-small-height - $button-border-width - 1;
} }
} }
.button-large { .button-large {
padding: 12px 18px 12px 18px; padding: $button-large-padding;
min-height: $button-min-height + 8; min-height: $button-large-height;
font-size: $button-font-size + 8; font-size: $button-large-font-size;
line-height: $button-large-height - $button-border-width;
i, .icon { i, .icon {
font-size: $button-icon-font-size + 8; font-size: $button-large-icon-size;
line-height: $button-large-height - $button-border-width - 1;
} }
} }

View File

@ -1,4 +1,57 @@
i.icon-default, .icon.icon-default {
color: $brand-default;
}
i.icon-secondary, .icon.icon-secondary {
color: darken($brand-secondary, 10%);
}
i.icon-primary, .icon.icon-primary {
color: $brand-primary;
}
i.icon-info, .icon.icon-info {
color: $brand-info;
}
i.icon-success, .icon.icon-success {
color: $brand-success;
}
i.icon-warning, .icon.icon-warning {
color: $brand-warning;
}
i.icon-danger, .icon.icon-danger {
color: $brand-danger;
}
i.icon-dark, .icon.icon-dark {
color: $brand-dark;
}
i.icon-gray-darker, .icon.icon-gray-darker {
color: $gray-darker;
}
i.icon-gray-dark, .icon.icon-gray-dark {
color: $gray-dark;
}
i.icon-gray, .icon.icon-gray {
color: $gray;
}
i.icon-gray-light, .icon.icon-gray-light {
color: $gray-light;
}
i.icon-gray-lighter, .icon.icon-gray-lighter {
color: $gray-light;
}
.fill-icon { .fill-icon {
color: white !important; color: white !important;
&:before { &:before {
@ -8,44 +61,44 @@
padding: 1px; padding: 1px;
} }
&.brand-default:before { &.icon-default:before {
background: $brand-default; background: $brand-default;
} }
&.brand-secondary:before { &.icon-secondary:before {
background: $brand-secondary; background: $brand-secondary;
} }
&.brand-primary:before { &.icon-primary:before {
background: $brand-primary; background: $brand-primary;
} }
&.brand-info:before { &.icon-info:before {
background: $brand-info; background: $brand-info;
} }
&.brand-success:before { &.icon-success:before {
background: $brand-success; background: $brand-success;
} }
&.brand-warning:before { &.icon-warning:before {
background: $brand-warning; background: $brand-warning;
} }
&.brand-danger:before { &.icon-danger:before {
background: $brand-danger; background: $brand-danger;
} }
&.brand-dark:before { &.icon-dark:before {
background: $brand-dark; background: $brand-dark;
} }
&.gray-darker:before { &.icon-gray-darker:before {
background: $gray-darker; background: $gray-darker;
} }
&.gray-dark:before { &.icon-gray-dark:before {
background: $gray-dark; background: $gray-dark;
} }
&.gray:before { &.icon-gray:before {
background: $gray; background: $gray;
} }
&.gray-light:before { &.icon-gray-light:before {
background: $gray-light; background: $gray-light;
} }
&.gray-lighter:before { &.icon-gray-lighter:before {
background: $gray-lighter; background: $gray-lighter;
} }

View File

@ -186,6 +186,8 @@ a.item {
.item .fill-icon { .item .fill-icon {
font-size: $item-icon-fill-font-size; font-size: $item-icon-fill-font-size;
min-width: $item-icon-fill-font-size + 2;
min-height: $item-icon-fill-font-size + 2;
} }
.item-icon-left { .item-icon-left {
@ -275,13 +277,13 @@ button.item-icon-right:after {
// ------------------------------- // -------------------------------
.item-thumbnail-left { .item-thumbnail-left {
padding-left: $item-thumbnail-width + $item-padding; padding-left: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
min-height: $item-thumbnail-height; min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
img:first-child, .item-image { img:first-child, .item-image {
position: absolute; position: absolute;
top: 0; top: $item-thumbnail-margin;
left: 0; left: $item-thumbnail-margin;
max-width: $item-thumbnail-width; max-width: $item-thumbnail-width;
max-height: $item-thumbnail-height; max-height: $item-thumbnail-height;
width: 100%; width: 100%;
@ -289,13 +291,13 @@ button.item-icon-right:after {
} }
.item-thumbnail-right { .item-thumbnail-right {
padding-right: $item-thumbnail-width + $item-padding; padding-right: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
min-height: $item-thumbnail-height; min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
img:first-child, .item-image { img:first-child, .item-image {
position: absolute; position: absolute;
top: 0; top: $item-thumbnail-margin;
right: 0; right: $item-thumbnail-margin;
max-width: $item-thumbnail-width; max-width: $item-thumbnail-width;
max-height: $item-thumbnail-height; max-height: $item-thumbnail-height;
width: 100%; width: 100%;
@ -339,6 +341,7 @@ button.item-icon-right:after {
.item-divider { .item-divider {
margin: $item-border-width * -1; margin: $item-border-width * -1;
padding: $item-divider-padding; padding: $item-divider-padding;
min-height: 30px;
border: none; border: none;
background-color: $item-divider-bg; background-color: $item-divider-bg;
box-shadow: $item-box-shadow; box-shadow: $item-box-shadow;
@ -347,6 +350,16 @@ button.item-icon-right:after {
} }
// Item Note
// -------------------------------
.item-note {
float: right;
color: #aaa;
font-size: 14px;
}
// Item Animations // Item Animations
// ------------------------------- // -------------------------------

View File

@ -57,12 +57,6 @@
padding-left: 1px; padding-left: 1px;
} }
.item-label-right {
float: right;
color: #aaa;
font-size: 14px;
}
// Cards / Inset Lists // Cards / Inset Lists
// -------------------------------------------------- // --------------------------------------------------

View File

@ -350,18 +350,6 @@
hyphens: $mode; hyphens: $mode;
} }
@mixin box-orient($orientation) {
box-orient: $orientation;
-webkit-box-orient: $orientation;
-moz-box-orient: $orientation;
}
@mixin box-flex($flex) {
box-flex: 1;
-webkit-box-flex: $flex;
-moz-box-flex: $flex;
}
@mixin display-flex { @mixin display-flex {
display: -webkit-box; display: -webkit-box;
display: -webkit-flex; display: -webkit-flex;

View File

@ -16,7 +16,7 @@ h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code, a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp, del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var, small, strike, strong, sub, sup, tt, var,
b, u, i, center, b, u, center,
dl, dt, dd, ol, ul, li, dl, dt, dd, ol, ul, li,
fieldset, form, label, legend, fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td, table, caption, tbody, tfoot, thead, tr, th, td,

View File

@ -5,15 +5,13 @@
*/ */
.tabs { .tabs {
@include display-flex();
@include box-orient(horizontal); @include flex-direction(horizontal);
@include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark); @include tab-style($tabs-default-bg, $tabs-default-border-color, $gray-dark);
position: fixed; position: fixed;
bottom: 0; bottom: 0;
z-index: 5; z-index: 5;
display: -webkit-box;
display: box;
width: 100%; width: 100%;
height: $tabs-height; height: $tabs-height;
border-style: solid; border-style: solid;
@ -66,13 +64,12 @@
} }
.tab-item { .tab-item {
@include box-flex(1); @include flex(1);
display: block; display: inline-block;
overflow: hidden; overflow: hidden;
box-sizing: border-box; box-sizing: border-box;
margin: auto;
// Required to force box elements to be the same size;
width: 0;
height: 100%; height: 100%;
color: inherit; color: inherit;
@ -149,3 +146,12 @@
} }
} }
.item.tabs {
@include display-flex();
padding: 0;
i, .icon {
position: relative;
}
}

View File

@ -210,23 +210,30 @@ $info-border: darken(adjust-hue($info-bg, -10), 7%);
// ------------------------------- // -------------------------------
$button-color: #222; $button-color: #222;
$button-padding: 10px 12px 7px 12px;
$button-block-margin: 10px !default; $button-block-margin: 10px !default;
$button-clear-padding: 12px 6px; $button-clear-padding: 0 6px;
$button-border-radius: 2px; $button-border-radius: 2px;
$button-border-width: 1px; $button-border-width: 1px;
$button-font-size: 16px; $button-font-size: 16px;
$button-line-height: 23px; $button-height: 42px;
$button-min-height: 44px; $button-padding: 0 12px;
$button-icon-size: 24px;
$button-small-line-height: 29px !default; $button-large-font-size: 18px;
$button-small-min-height: 32px !default; $button-large-height: 54px;
$button-large-padding: 0 12px;
$button-large-icon-size: 32px;
$button-icon-font-size: 24px; $button-small-font-size: 12px;
$button-icon-large-font-size: 32px; $button-small-height: 28px;
$button-small-padding: 0 4px;
$button-small-icon-size: 16px;
$button-bar-button-line-height: 15px !default; $button-bar-button-font-size: 12px;
$button-bar-button-min-height: 33px !default; $button-bar-button-height: 31px !default;
$button-bar-button-padding: 0 8px;
$button-bar-button-icon-size: 24px;
$button-default-bg: $brand-default; $button-default-bg: $brand-default;
$button-default-border: #ddd; $button-default-border: #ddd;
@ -411,6 +418,7 @@ $item-avitar-height: 40px !default;
$item-thumbnail-width: 80px !default; $item-thumbnail-width: 80px !default;
$item-thumbnail-height: 80px !default; $item-thumbnail-height: 80px !default;
$item-thumbnail-margin: 10px !default;
// Icons // Icons

View File

@ -95,6 +95,18 @@
<p>November 05, 1955</p> <p>November 05, 1955</p>
</div> </div>
<div class="item item-thumbnail-left">
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-thumbnail-right">
<img src="http://mimg.ugo.com/201001/34590/cuts/marty-mcfly_288x288.jpg">
<h2>Marty McFly</h2>
<p>November 05, 1955</p>
</div>
<div class="item item-body"> <div class="item item-body">
<img class="full-image" src="http://paulaubin.com/wp/wp-content/uploads/2012/05/back-to-the-future-delorean.jpg"> <img class="full-image" src="http://paulaubin.com/wp/wp-content/uploads/2012/05/back-to-the-future-delorean.jpg">
<p> <p>
@ -108,8 +120,19 @@
</p> </p>
</div> </div>
<div class="item item-divider"> <div class="item tabs tabs-secondary tabs-icon-left">
Like Comment Share <a class="tab-item" href="#">
<i class="icon-thumbsup"></i>
Like
</a>
<a class="tab-item" href="#">
<i class="icon-chatbox"></i>
Comment
</a>
<a class="tab-item" href="#">
<i class="icon-share"></i>
Share
</a>
</div> </div>
</div> </div>

View File

@ -48,31 +48,31 @@
</div> </div>
<a href="#" class="item item-icon-left"> <a href="#" class="item item-icon-left">
<i class="icon-email"></i> <i class="icon-email icon-secondary"></i>
Check mail Check mail
<span class="badge badge-info">5</span> <span class="badge badge-info">5</span>
</a> </a>
<a href="#" class="item item-icon-left"> <a href="#" class="item item-icon-left">
<i class="icon-chatbubble-working"></i> <i class="icon-chatbubble-working icon-primary"></i>
Call Ma Call Ma
<span class="item-label-right"> <span class="item-note">
Cell Cell
</span> </span>
</a> </a>
<a href="#" class="item item-icon-left"> <a href="#" class="item item-icon-left">
<i class="icon-mic-a"></i> <i class="icon-mic-a icon-info"></i>
Record album Record album
<span class="item-label-right"> <span class="item-note">
Grammy Grammy
</span> </span>
</a> </a>
<a href="#" class="item item-icon-left"> <a href="#" class="item item-icon-left">
<i class="icon-flask"></i> <i class="icon-flask icon-success"></i>
Breaking Bad Breaking Bad
<span class="item-label-right"> <span class="item-note">
Blue, yellow, pink Blue, yellow, pink
</span> </span>
</a> </a>
@ -82,31 +82,31 @@
</div> </div>
<a href="#" class="item item-icon-left"> <a href="#" class="item item-icon-left">
<i class="icon-game-controller-b"></i> <i class="icon-game-controller-b icon-warning"></i>
Games Games
<span class="item-label-right"> <span class="item-note">
Super Mario Super Mario
</span> </span>
</a> </a>
<a href="#" class="item item-icon-left"> <a href="#" class="item item-icon-left">
<i class="icon-music-note"></i> <i class="icon-music-note icon-danger"></i>
Music Music
<span class="item-label-right"> <span class="item-note">
JT JT
</span> </span>
</a> </a>
<a href="#" class="item item-icon-left"> <a href="#" class="item item-icon-left">
<i class="icon-bag"></i> <i class="icon-bag icon-dark"></i>
Shopping Shopping
<span class="item-label-right"> <span class="item-note">
Bag Bag
</span> </span>
</a> </a>
<a href="#" class="item item-icon-left"> <a href="#" class="item item-icon-left">
<i class="icon-person-stalker"></i> <i class="icon-person-stalker icon-warning fill-icon"></i>
Friends Friends
<span class="badge badge-danger">0</span> <span class="badge badge-danger">0</span>
</a> </a>