Files
ionic-framework/dist/css/ionic-ios7.css
2013-10-25 21:18:08 -05:00

2440 lines
56 KiB
CSS
Raw Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

@charset "UTF-8";
/**
* Adapted from normalize.css and some reset.css. We don't care even one
* bit about old IE, so we don't need any hacks for that in here.
*
* There are probably other things we could remove here, as well.
*
* normalize.css v2.1.2 | MIT License | git.io/normalize
*/
/**
* Eric Meyer's Reset CSS v2.0 (http://meyerweb.com/eric/tools/css/reset/)
* http://cssreset.com
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, fieldset,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
vertical-align: baseline;
font: inherit;
font-size: 100%; }
ol, ul {
list-style: none; }
blockquote, q {
quotes: none; }
blockquote:before, blockquote:after,
q:before, q:after {
content: '';
content: none; }
/**
* Prevent modern browsers from displaying `audio` without controls.
* Remove excess height in iOS 5 devices.
*/
audio:not([controls]) {
display: none;
height: 0; }
/**
* Hide the `template` element in IE, Safari, and Firefox < 22.
*/
[hidden],
template {
display: none; }
script {
display: none !important; }
/* ==========================================================================
Base
========================================================================== */
/**
* 1. Set default font family to sans-serif.
* 2. Prevent iOS text size adjust after orientation change, without disabling
* user zoom.
*/
html {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
font-family: sans-serif;
/* 1 */
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
/* 2 */
-webkit-text-size-adjust: 100%;
/* 2 */ }
/**
* Remove default margin.
*/
body {
margin: 0;
line-height: 1; }
/* *
* Remove tap highlight color on Safari
*/
a {
-webkit-tap-highlight-color: rgba(0, 0, 0, 0); }
/**
* Address `outline` inconsistency between Chrome and other browsers.
*/
a:focus {
outline: thin dotted; }
/**
* Improve readability when focused and also mouse hovered in all browsers.
*/
a:active,
a:hover {
outline: 0; }
/* ==========================================================================
Typography
========================================================================== */
/**
* Address style set to `bolder` in Firefox 4+, Safari 5, and Chrome.
*/
b,
strong {
font-weight: bold; }
/**
* Address styling not present in Safari 5 and Chrome.
*/
dfn {
font-style: italic; }
/**
* Address differences between Firefox and other browsers.
*/
hr {
-moz-box-sizing: content-box;
box-sizing: content-box;
height: 0; }
/**
* Correct font family set oddly in Safari 5 and Chrome.
*/
code,
kbd,
pre,
samp {
font-size: 1em;
font-family: monospace, serif; }
/**
* Improve readability of pre-formatted text in all browsers.
*/
pre {
white-space: pre-wrap; }
/**
* Set consistent quote types.
*/
q {
quotes: "\201C" "\201D" "\2018" "\2019"; }
/**
* Address inconsistent and variable font size in all browsers.
*/
small {
font-size: 80%; }
/**
* Prevent `sub` and `sup` affecting `line-height` in all browsers.
*/
sub,
sup {
position: relative;
vertical-align: baseline;
font-size: 75%;
line-height: 0; }
sup {
top: -0.5em; }
sub {
bottom: -0.25em; }
/**
* Define consistent border, margin, and padding.
*/
fieldset {
margin: 0 2px;
padding: 0.35em 0.625em 0.75em;
border: 1px solid silver; }
/**
* 1. Correct `color` not being inherited in IE 8/9.
* 2. Remove padding so people aren't caught out if they zero out fieldsets.
*/
legend {
padding: 0;
/* 2 */
border: 0;
/* 1 */ }
/**
* 1. Correct font family not being inherited in all browsers.
* 2. Correct font size not being inherited in all browsers.
* 3. Address margins set differently in Firefox 4+, Safari 5, and Chrome.
* 4. Remove any default :focus styles
*/
button,
input,
select,
textarea {
margin: 0;
/* 3 */
font-size: 100%;
/* 2 */
font-family: inherit;
/* 1 */
outline-offset: 0;
/* 4 */
outline-style: none;
/* 4 */
outline-width: 0;
/* 4 */ }
/**
* Address Firefox 4+ setting `line-height` on `input` using `!important` in
* the UA stylesheet.
*/
button,
input {
line-height: normal; }
/**
* Address inconsistent `text-transform` inheritance for `button` and `select`.
* All other form control elements do not inherit `text-transform` values.
* Correct `button` style inheritance in Chrome, Safari 5+, and IE 8+.
* Correct `select` style inheritance in Firefox 4+ and Opera.
*/
button,
select {
text-transform: none; }
/**
* 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
* and `video` controls.
* 2. Correct inability to style clickable `input` types in iOS.
* 3. Improve usability and consistency of cursor style between image-type
* `input` and others.
*/
button,
html input[type="button"],
input[type="reset"],
input[type="submit"] {
cursor: pointer;
/* 3 */
-webkit-appearance: button;
/* 2 */ }
/**
* Re-set default cursor for disabled elements.
*/
button[disabled],
html input[disabled] {
cursor: default; }
/**
* 1. Address `appearance` set to `searchfield` in Safari 5 and Chrome.
* 2. Address `box-sizing` set to `border-box` in Safari 5 and Chrome
* (include `-moz` to future-proof).
*/
input[type="search"] {
-webkit-box-sizing: content-box;
/* 2 */
-moz-box-sizing: content-box;
box-sizing: content-box;
-webkit-appearance: textfield;
/* 1 */ }
/**
* Remove inner padding and search cancel button in Safari 5 and Chrome
* on OS X.
*/
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-decoration {
-webkit-appearance: none; }
/**
* Remove inner padding and border in Firefox 4+.
*/
button::-moz-focus-inner,
input::-moz-focus-inner {
padding: 0;
border: 0; }
/**
* 1. Remove default vertical scrollbar in IE 8/9.
* 2. Improve readability and alignment in all browsers.
*/
textarea {
overflow: auto;
/* 1 */
vertical-align: top;
/* 2 */ }
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-spacing: 0;
border-collapse: collapse; }
*,
*:before,
*:after {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box; }
a {
-webkit-user-drag: none;
-webkit-tap-highlight-color: transparent; }
img {
-webkit-user-drag: none; }
a:focus, button:focus {
outline: 0; }
body, .ionic-body {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
margin: 0;
padding: 0;
color: black;
word-wrap: break-word;
font-size: 14px;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 20px;
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-webkit-text-size-adjust: none;
text-size-adjust: none;
-webkit-tap-highlight-color: transparent;
-webkit-user-drag: none;
-webkit-user-select: none; }
.view-full {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%; }
.content:before,
.content:after {
content: "\00a0";
/* No-break space character */
display: block;
overflow: hidden;
height: 0; }
/* Hack to force all relatively and absolutely positioned elements still render while scrolling
Note: This is a bug for "-webkit-overflow-scrolling: touch" (via ratchet) */
.content > * {
-webkit-transform: translateZ(0px);
transform: translateZ(0px); }
.content {
position: absolute;
width: 100%;
height: 100%;
overflow: auto;
-webkit-overflow-scrolling: touch; }
.has-header {
top: 44px; }
.has-footer {
bottom: 44px; }
.has-tabs {
bottom: 84px; }
.page, .full-section {
position: fixed;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 1;
overflow: auto;
width: 100%;
height: 100%;
background-color: #fff;
-webkit-overflow-scrolling: touch; }
p {
margin: 0 0 10px; }
.lead {
margin-bottom: 20px;
font-weight: 200;
font-size: 16.1px;
line-height: 1.4; }
small {
font-size: 85%; }
cite {
font-style: normal; }
.text-left {
text-align: left; }
.text-right {
text-align: right; }
.text-center {
text-align: center; }
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: black;
font-weight: 500;
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
line-height: 1.1; }
h1 small, h2 small, h3 small, h4 small, h5 small, h6 small,
.h1 small, .h2 small, .h3 small, .h4 small, .h5 small, .h6 small {
font-weight: normal;
line-height: 1; }
h1,
h2,
h3 {
margin-top: 20px;
margin-bottom: 10px; }
h4,
h5,
h6 {
margin-top: 10px;
margin-bottom: 10px; }
h1, .h1 {
font-size: 36px; }
h2, .h2 {
font-size: 30px; }
h3, .h3 {
font-size: 24px; }
h4, .h4 {
font-size: 18px; }
h5, .h5 {
font-size: 14px; }
h6, .h6 {
font-size: 12px; }
h1 small, .h1 small {
font-size: 24px; }
h2 small, .h2 small {
font-size: 18px; }
h3 small, .h3 small,
h4 small, .h4 small {
font-size: 14px; }
dl {
margin-bottom: 20px; }
dt,
dd {
line-height: 1.42857; }
dt {
font-weight: bold; }
dd {
margin-left: 0; }
blockquote {
margin: 0 0 20px;
padding: 10px 20px;
border-left: 5px solid gray; }
blockquote p {
font-weight: 300;
font-size: 17.5px;
line-height: 1.25; }
blockquote p:last-child {
margin-bottom: 0; }
blockquote small {
display: block;
line-height: 1.42857; }
blockquote small:before {
content: '\2014 \00A0'; }
blockquote.pull-right {
padding-right: 15px;
padding-left: 0;
border-right: 5px solid gray;
border-left: 0; }
blockquote.pull-right p,
blockquote.pull-right small {
text-align: right; }
blockquote.pull-right small:before {
content: ''; }
blockquote.pull-right small:after {
content: '\00A0 \2014'; }
q:before,
q:after,
blockquote:before,
blockquote:after {
content: ""; }
address {
display: block;
margin-bottom: 20px;
font-style: normal;
line-height: 1.42857; }
a.subdued {
padding-right: 10px;
color: #555555;
text-decoration: none; }
a.subdued:hover {
text-decoration: none; }
a.subdued:last-child {
padding-right: 0; }
.bar {
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
-o-user-select: none;
user-select: none;
position: absolute;
right: 0;
left: 0;
z-index: 10;
display: -webkit-box;
display: box;
box-sizing: border-box;
padding: 5px;
width: 100%;
height: 44px;
border-width: 0;
border-style: solid;
background-color: white;
/* &.bar-header {
border-bottom-width: 1px;
}
&.bar-footer {
border-top-width: 1px;
}*/
box-shadow: inset 0 0 1px #999999; }
.bar.bar-clear {
border: none;
background: none;
color: #fff; }
.bar.bar-clear .button {
color: #fff; }
.bar.bar-clear .title {
color: #fff; }
.bar.bar-default {
background-color: rgba(255, 255, 255, 0.9);
box-shadow: inset 0 0 1px #9d9d9d;
color: #333333; }
.bar.bar-default .title {
color: #333333; }
.bar.bar-secondary {
background-color: rgba(245, 245, 245, 0.9);
box-shadow: inset 0 0 1px #7b7b7b;
color: #333333; }
.bar.bar-secondary .title {
color: #333333; }
.bar.bar-primary {
background-color: rgba(74, 135, 238, 0.9);
box-shadow: inset 0 0 1px #1d3660;
color: white; }
.bar.bar-primary .title {
color: white; }
.bar.bar-info {
background-color: rgba(67, 206, 230, 0.9);
box-shadow: inset 0 0 1px #1d5c67;
color: white; }
.bar.bar-info .title {
color: white; }
.bar.bar-success {
background-color: rgba(102, 204, 51, 0.9);
box-shadow: inset 0 0 1px #274d14;
color: white; }
.bar.bar-success .title {
color: white; }
.bar.bar-warning {
background-color: rgba(240, 184, 64, 0.9);
box-shadow: inset 0 0 1px #6c5118;
color: white; }
.bar.bar-warning .title {
color: white; }
.bar.bar-danger {
background-color: rgba(239, 78, 58, 0.9);
box-shadow: inset 0 0 1px #5c1a12;
color: white; }
.bar.bar-danger .title {
color: white; }
.bar.bar-dark {
background-color: rgba(68, 68, 68, 0.9);
box-shadow: inset 0 0 1px black;
color: white; }
.bar.bar-dark .title {
color: white; }
.bar .title {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: 0;
margin: 0;
min-width: 30px;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
font-size: 17px;
line-height: 44px; }
.bar .title a {
color: inherit; }
.bar .button {
box-flex: 1;
-webkit-box-flex: 0;
-moz-box-flex: 0;
z-index: 1;
margin: 0;
padding: 4px 12px;
background-color: transparent;
font-size: 12px;
line-height: 23px; }
.bar .button.button-clear {
padding: 0 5px;
line-height: 34px; }
.bar .button-bar {
line-height: 18px; }
.bar .button-bar + .button, .bar .button + .button-bar {
margin-left: 5px; }
.bar .title + .button:last-child,
.bar > .button + .button:last-child,
.bar > .button.pull-right,
.bar .title + .buttons {
position: absolute;
top: 5px;
right: 5px;
bottom: 5px; }
.bar-default .button {
color: #333333;
background-color: white;
border-color: #dddddd; }
.bar-default .button:hover {
color: #333333;
text-decoration: none; }
.bar-default .button.active, .bar-default .button:active {
background-color: #fafafa;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #bbbbbb; }
.bar-default .button.button-clear {
color: #333333;
background: none;
box-shadow: none;
font-size: 17px; }
.bar-secondary .button {
color: #333333;
background-color: whitesmoke;
border-color: #bbbbbb; }
.bar-secondary .button:hover {
color: #333333;
text-decoration: none; }
.bar-secondary .button.active, .bar-secondary .button:active {
background-color: #e5e5e5;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #999999; }
.bar-secondary .button.button-clear {
color: #333333;
background: none;
box-shadow: none;
font-size: 17px; }
.bar-primary .button {
color: white;
background-color: #4a87ee;
border-color: #3b6dc2; }
.bar-primary .button:hover {
color: white;
text-decoration: none; }
.bar-primary .button.active, .bar-primary .button:active {
background-color: #4175ce;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #32599c; }
.bar-primary .button.button-clear {
color: white;
background: none;
box-shadow: none;
font-size: 17px; }
.bar-info .button {
color: white;
background-color: #43cee6;
border-color: #3bb3c8; }
.bar-info .button:hover {
color: white;
text-decoration: none; }
.bar-info .button.active, .bar-info .button:active {
background-color: #3db8cd;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #3293a4; }
.bar-info .button.button-clear {
color: white;
background: none;
box-shadow: none;
font-size: 17px; }
.bar-success .button {
color: white;
background-color: #66cc33;
border-color: #5bb22f; }
.bar-success .button:hover {
color: white;
text-decoration: none; }
.bar-success .button.active, .bar-success .button:active {
background-color: #55aa2b;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #448922; }
.bar-success .button.button-clear {
color: white;
background: none;
box-shadow: none;
font-size: 17px; }
.bar-warning .button {
color: white;
background-color: #f0b840;
border-color: #d29f31; }
.bar-warning .button:hover {
color: white;
text-decoration: none; }
.bar-warning .button.active, .bar-warning .button:active {
background-color: #e2a114;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #b88517; }
.bar-warning .button.button-clear {
color: white;
background: none;
box-shadow: none;
font-size: 17px; }
.bar-danger .button {
color: white;
background-color: #ef4e3a;
border-color: #c73927; }
.bar-danger .button:hover {
color: white;
text-decoration: none; }
.bar-danger .button.active, .bar-danger .button:active {
background-color: #ce4331;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #9f3527; }
.bar-danger .button.button-clear {
color: white;
background: none;
box-shadow: none;
font-size: 17px; }
.bar-dark .button {
color: white;
background-color: #444444;
border-color: #111111; }
.bar-dark .button:hover {
color: white;
text-decoration: none; }
.bar-dark .button.active, .bar-dark .button:active {
background-color: #222222;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: black; }
.bar-dark .button.button-clear {
color: white;
background: none;
box-shadow: none;
font-size: 17px; }
.bar [class^="icon-"],
.bar [class*=" icon-"] {
font-size: 24px; }
.bar .button-icon {
border: 1px solid transparent;
background-color: transparent; }
.bar-header {
top: 0; }
.bar-footer {
bottom: 0; }
.bar-tabs {
padding: 0; }
.bar-subheader {
top: 44px;
display: block; }
.bar-subfooter {
bottom: 44px;
display: block; }
/**
* Tabs
*
* A navigation bar with any number of tab items supported.
*/
.tabs {
font-size: 16px;
position: fixed;
bottom: 0;
width: 100%;
height: 49px;
z-index: 5;
box-orient: horizontal;
-webkit-box-orient: horizontal;
-moz-box-orient: horizontal;
display: -webkit-box;
display: box;
border-top-width: 1px;
border-style: solid;
background-color: white;
border-color: #dddddd;
color: #333333; }
.tabs.tabs-default {
background-color: white;
border-color: #dddddd;
color: #333333; }
.tabs.tabs-secondary {
background-color: whitesmoke;
border-color: #bbbbbb;
color: #333333; }
.tabs.tabs-primary {
background-color: #4a87ee;
border-color: #3b6dc2;
color: white; }
.tabs.tabs-success {
background-color: #66cc33;
border-color: #5bb22f;
color: white; }
.tabs.tabs-info {
background-color: #43cee6;
border-color: #3bb3c8;
color: white; }
.tabs.tabs-warning {
background-color: #f0b840;
border-color: #d29f31;
color: white; }
.tabs.tabs-danger {
background-color: #ef4e3a;
border-color: #c73927;
color: white; }
.tabs.tabs-dark {
background-color: #ef4e3a;
border-color: #c73927;
color: white; }
.tabs-top {
top: 44px; }
.tab-item {
display: block;
width: 0;
height: 100%;
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
box-sizing: border-box;
text-align: center;
text-decoration: none;
font-weight: 400;
font-family: "Helvetica Neue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 10px;
color: inherit;
text-overflow: ellipsis;
white-space: nowrap;
overflow: hidden;
opacity: 0.7; }
.tab-item i {
font-size: 32px; }
/* Navigational tab */
/* Active state for tab */
.tab-item.active, .tab-item:active {
opacity: 1; }
.tab-item.active.tab-item-default, .tab-item:active.tab-item-default {
color: white; }
.tab-item.active.tab-item-secondary, .tab-item:active.tab-item-secondary {
color: whitesmoke; }
.tab-item.active.tab-item-primary, .tab-item:active.tab-item-primary {
color: #4a87ee; }
.tab-item.active.tab-item-success, .tab-item:active.tab-item-success {
color: #66cc33; }
.tab-item.active.tab-item-danger, .tab-item:active.tab-item-danger {
color: #ef4e3a; }
.tab-item.active.tab-item-warning, .tab-item:active.tab-item-warning {
color: #f0b840; }
.tab-item.active.tab-item-dark, .tab-item:active.tab-item-dark {
color: #444444; }
/* Icon for tab */
.tab-item i {
display: block;
margin: 1px auto -3px auto; }
/* Label for tab */
.tab-label {
margin-top: 1px;
color: #fff;
font-weight: bold;
font-size: 10px; }
.menu {
position: absolute;
top: 0;
bottom: 0;
z-index: 0;
overflow-y: scroll;
min-height: 100%;
max-height: 100%;
width: 270px;
background-color: #fff;
-webkit-overflow-scrolling: touch; }
.menu-left {
left: 0; }
.menu-right {
right: 0; }
.menu-animated {
-webkit-transition: -webkit-transform 200ms ease;
-moz-transition: -moz-transform 200ms ease;
transition: transform 200ms ease; }
/**
* Modals are independent windows that slide in from off-screen.
*/
.modal {
position: fixed;
z-index: 10;
top: 0;
width: 100%;
min-height: 100%;
overflow: hidden;
background-color: white; }
.modal.active {
height: 100%; }
.item {
position: relative;
z-index: 2;
display: block;
margin: -1px;
padding: 15px 40px 15px 15px;
border: none;
background-color: white;
box-shadow: inset 0 0 1px #666666;
font-size: 16px;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
.item h2 {
margin: 0 0 4px 0;
font-size: 16px; }
.item h3 {
margin: 0 0 4px 0;
font-size: 14px; }
.item h4 {
margin: 0 0 4px 0;
font-size: 12px; }
.item h5, .item h6 {
margin: 0 0 3px 0;
font-size: 10px; }
.item p {
color: #666;
font-size: 14px; }
.item h1:last-child,
.item h2:last-child,
.item h3:last-child,
.item h4:last-child,
.item h5:last-child,
.item h6:last-child,
.item p:last-child {
margin-bottom: 0; }
.item .badge {
float: right; }
.item .badge + .badge {
margin-right: 5px; }
.item.active, .item.active:hover, .item.active:focus {
z-index: 2; }
.item.active .item-heading, .item.active:hover .item-heading, .item.active:focus .item-heading {
color: inherit; }
.item.item-default {
/*
color: $color;
background-color: $bgColor;
border-color: $borderColor;
*/ }
.item.item-default.active, .item.item-default:active {
color: #333333;
background-color: white;
border-color: #333333; }
.item.item-default.active .list-item-content, .item.item-default:active .list-item-content {
background-color: white;
color: #333333; }
.item.item-secondary {
/*
color: $color;
background-color: $bgColor;
border-color: $borderColor;
*/ }
.item.item-secondary.active, .item.item-secondary:active {
color: #333333;
background-color: white;
border-color: #333333; }
.item.item-secondary.active .list-item-content, .item.item-secondary:active .list-item-content {
background-color: white;
color: #333333; }
.item.item-primary {
/*
color: $color;
background-color: $bgColor;
border-color: $borderColor;
*/ }
.item.item-primary.active, .item.item-primary:active {
color: white;
background-color: #4a87ee;
border-color: #333333; }
.item.item-primary.active .list-item-content, .item.item-primary:active .list-item-content {
background-color: #4a87ee;
color: white; }
.item.item-info {
/*
color: $color;
background-color: $bgColor;
border-color: $borderColor;
*/ }
.item.item-info.active, .item.item-info:active {
color: white;
background-color: #43cee6;
border-color: #333333; }
.item.item-info.active .list-item-content, .item.item-info:active .list-item-content {
background-color: #43cee6;
color: white; }
.item.item-success {
/*
color: $color;
background-color: $bgColor;
border-color: $borderColor;
*/ }
.item.item-success.active, .item.item-success:active {
color: white;
background-color: #66cc33;
border-color: #333333; }
.item.item-success.active .list-item-content, .item.item-success:active .list-item-content {
background-color: #66cc33;
color: white; }
.item.item-warning {
/*
color: $color;
background-color: $bgColor;
border-color: $borderColor;
*/ }
.item.item-warning.active, .item.item-warning:active {
color: white;
background-color: #f0b840;
border-color: #333333; }
.item.item-warning.active .list-item-content, .item.item-warning:active .list-item-content {
background-color: #f0b840;
color: white; }
.item.item-danger {
/*
color: $color;
background-color: $bgColor;
border-color: $borderColor;
*/ }
.item.item-danger.active, .item.item-danger:active {
color: white;
background-color: #ef4e3a;
border-color: #333333; }
.item.item-danger.active .list-item-content, .item.item-danger:active .list-item-content {
background-color: #ef4e3a;
color: white; }
.item.item-dark {
/*
color: $color;
background-color: $bgColor;
border-color: $borderColor;
*/ }
.item.item-dark.active, .item.item-dark:active {
color: white;
background-color: #444444;
border-color: #333333; }
.item.item-dark.active .list-item-content, .item.item-dark:active .list-item-content {
background-color: #444444;
color: white; }
.item,
.item-content {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap; }
a.item {
color: #333333;
text-decoration: none; }
a.item:hover, a.item:focus {
text-decoration: none; }
.item-slider {
padding: 0; }
.item-slider .item-content,
.item-radio .item-content {
/**
* The content area of a complex list item. This area can
* Slide left and right and be dragged to support different
* UI interactions.
*/
position: relative;
z-index: 2;
padding: 15px 40px 15px 15px;
border: none;
background-color: white;
box-shadow: inset 0 0 1px #666666;
-webkit-transition: margin-left 0.2s ease-in-out, margin-right 0.2s ease-in-out, left 0.2s ease-in-out; }
.item-text-wrap {
overflow: auto;
white-space: normal; }
.item-slider.item-text-wrap {
overflow: hidden;
white-space: nowrap; }
.item-slider.item-text-wrap .item-content {
overflow: auto;
white-space: normal; }
.item i {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: absolute;
top: 0;
height: 100%;
font-size: 32px; }
.item .fill-icon {
font-size: 28px; }
.item-icon-left {
padding-left: 45px; }
.item-icon-left i {
left: 7.5px; }
.item-slider.item-icon-left {
padding-left: 0; }
.item-slider.item-icon-left .item-content {
padding-left: 45px; }
.item-icon-right i {
right: 7.5px; }
.item-icon-left.item-icon-right i:first-child {
right: auto; }
.item-icon-left.item-icon-right i:last-child {
left: auto; }
a.item:after,
button.item:after {
/* By default, both <a> and <button> have right side arrow icons */
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: absolute;
top: 0;
right: 11px;
height: 100%;
color: #ccc;
content: "\e0fc";
text-transform: none;
font-weight: normal;
font-style: normal;
font-variant: normal;
font-size: 16px;
font-family: 'ionicons';
line-height: 1;
speak: none;
-webkit-font-smoothing: antialiased; }
a.item-icon-right:after,
button.item-icon-right:after {
display: none; }
.item-avatar {
padding-left: 70px;
min-height: 70px; }
.item-avatar img:first-child, .item-avatar .item-img {
position: absolute;
top: 15px;
left: 15px;
max-width: 40px;
max-height: 40px;
width: 100%;
border-radius: 4px; }
.item-thumbnail-left {
padding-left: 95px;
min-height: 80px; }
.item-thumbnail-left img:first-child, .item-thumbnail-left .item-image {
position: absolute;
top: 0;
left: 0;
max-width: 80px;
max-height: 80px;
width: 100%; }
.item-thumbnail-right {
padding-right: 95px;
min-height: 80px; }
.item-thumbnail-right img:first-child, .item-thumbnail-right .item-image {
position: absolute;
top: 0;
right: 0;
max-width: 80px;
max-height: 80px;
width: 100%; }
.item-image {
padding: 0;
text-align: center; }
.item-image img:first-child, .item-image .list-img {
width: 100%;
vertical-align: middle; }
.item-body {
overflow: auto;
padding: 15px;
text-overflow: inherit;
white-space: normal; }
.item-body h1, .item-body h2, .item-body h3, .item-body h4, .item-body h5, .item-body h6, .item-body p {
margin-top: 15px;
margin-bottom: 15px; }
.item-divider {
margin: -1px;
padding: 5px 15px;
border: none;
background-color: whitesmoke;
box-shadow: inset 0 0 1px #666666;
color: #222222;
font-weight: bold; }
.item-sliding {
-webkit-transition: -webkit-transform 0.1s ease-in-out; }
.item-reordering {
position: absolute;
width: 100%; }
.item-placeholder {
opacity: 0.7; }
/**
* The left-side edit area of a complex list item. This area shows
* whe the list item is in edit mode.
*/
.item-edit {
position: absolute;
top: 0;
left: -48px;
z-index: 0;
width: 48px;
height: 100%;
line-height: 100%;
opacity: 0;
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.item-edit .button {
height: 100%; }
.item-edit i {
color: #ef4e3a;
font-size: 24px; }
.item-edit.ng-enter {
left: -48px;
opacity: 0;
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.item-edit.ng-enter-active {
left: 0;
opacity: 1; }
.item-edit.ng-leave {
left: 0px;
opacity: 1;
-webkit-transition: left 0.2s ease-in-out, opacity 0.2s ease-in-out; }
.item-edit.ng-leave-active {
left: -48px;
opacity: 0; }
.item-drag {
position: absolute;
top: 0;
right: 0;
z-index: 0;
height: 100%; }
.item-drag .button {
height: 100%;
border: none;
border-radius: 0; }
/**
* The hidden right-side buttons that can be exposed under a list item
* with dragging.
*/
.item-options {
position: absolute;
top: 0;
right: 0;
z-index: 1;
height: 100%; }
.item-options .button {
height: 100%;
border: none;
border-radius: 0; }
.list {
position: relative;
overflow: hidden;
margin-bottom: 20px;
padding-top: 1px;
padding-bottom: 1px;
padding-left: 0; }
/**
* List editing styles. These trigger when the entire list goes into
* "edit mode"
*/
.list-editing .item-content {
margin-right: 30px;
margin-left: 30px; }
.list-editing .item-edit {
left: 0px;
opacity: 1; }
.list-header {
margin-top: 20px;
padding: 5px 15px;
background-color: transparent;
color: #222222;
font-weight: bold; }
.list-refresher {
overflow: hidden;
height: 0;
background-color: red; }
.card.list .list-item {
padding-right: 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.
*/
.card,
.list-inset {
overflow: hidden;
margin: 20px 10px;
background-color: white;
border-radius: 2px; }
.card {
padding-top: 1px;
padding-bottom: 1px;
box-shadow: 0 1px 1px rgba(0, 0, 0, 0.1); }
.card .item:first-child,
.list-inset .item:first-child,
.padding > .list .item:first-child {
border-top-left-radius: 2px;
border-top-right-radius: 2px; }
.card .item:first-child .item-content,
.list-inset .item:first-child .item-content,
.padding > .list .item:first-child .item-content {
border-top-left-radius: 2px;
border-top-right-radius: 2px; }
.card .item:last-child,
.list-inset .item:last-child,
.padding > .list .item:last-child {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
.card .item:last-child .item-content,
.list-inset .item:last-child .item-content,
.padding > .list .item:last-child .item-content {
border-bottom-left-radius: 2px;
border-bottom-right-radius: 2px; }
.card .item:last-child,
.list-inset .item:last-child {
margin-bottom: -1px; }
.card .item,
.card .item-divider,
.list-inset .item,
.list-inset .item-divider,
.padding > .list .item,
.padding-horizontal > .list .item,
.padding > .list .item-divider,
.padding-horizontal > .list .item-divider {
margin-left: 0;
margin-right: 0; }
.padding-left > .list .item,
.padding-left > .list .item-divider {
margin-left: 0; }
.padding-right > .list .item,
.padding-right > .list .item-divider {
margin-right: 0; }
form {
margin: 0 0 1.42857; }
legend {
display: block;
margin-bottom: 1.42857;
padding: 0;
width: 100%;
border: 0;
border-bottom: 1px solid #e5e5e5;
color: #333333;
font-size: 21px;
line-height: 2.85714; }
legend small {
color: #999999;
font-size: 1.07143; }
label,
input,
button,
select,
textarea {
font-size: 14px;
font-weight: normal;
line-height: 1.42857; }
input,
button,
select,
textarea {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
.item-input {
display: -webkit-box;
display: -webkit-flex;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
-webkit-box-align: center;
-ms-flex-align: center;
-webkit-align-items: center;
-moz-align-items: center;
align-items: center;
position: relative;
overflow: hidden;
padding: 6px 8px 5px; }
.item-input input {
-webkit-border-radius: 0;
-moz-border-radius: 0;
border-radius: 0;
-webkit-box-flex: 1;
-webkit-flex: 1 0 220px;
-moz-box-flex: 1;
-moz-flex: 1 0 220px;
-ms-flex: 1 0 220px;
flex: 1 0 220px;
margin: 0;
background-color: transparent;
-webkit-appearance: none; }
.item-input .input-label {
-webkit-box-flex: 1;
-webkit-flex: 1 0 100px;
-moz-box-flex: 1;
-moz-flex: 1 0 100px;
-ms-flex: 1 0 100px;
flex: 1 0 100px;
padding: 7px 10px 7px 3px;
max-width: 200px;
color: black;
font-weight: bold; }
.item-input [class^="icon-"], .item-input [class*=" icon-"] {
-webkit-box-flex: 0;
-webkit-flex: 0 0 24px;
-moz-box-flex: 0;
-moz-flex: 0 0 24px;
-ms-flex: 0 0 24px;
flex: 0 0 24px;
position: static;
height: auto;
display: inline-block;
text-align: center;
font-size: 16px; }
.item-input .placeholder-icon {
color: #999; }
.item-stacked-label {
display: block;
background-color: transparent;
box-shadow: none; }
.item-stacked-label .input-label, .item-stacked-label [class^="icon-"], .item-stacked-label [class*=" icon-"] {
display: inline-block;
padding: 4px 0;
vertical-align: middle; }
.item-stacked-label input,
.item-stacked-label textarea {
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
display: block !important;
overflow: hidden;
padding: 4px 8px 3px;
border: none;
background-color: white;
box-shadow: inset 0 0 1px #666666; }
.item-stacked-label input {
height: 46px; }
select,
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
display: inline-block;
height: 34px;
color: #555555;
vertical-align: middle;
font-size: 14px;
line-height: 20px; }
input,
textarea {
width: 100%; }
textarea {
height: auto; }
textarea,
input[type="text"],
input[type="password"],
input[type="datetime"],
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"],
input[type="number"],
input[type="email"],
input[type="url"],
input[type="search"],
input[type="tel"],
input[type="color"] {
border: 0; }
input[type="radio"],
input[type="checkbox"] {
margin: 0;
line-height: normal; }
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto; }
select,
input[type="file"] {
line-height: 34px; }
select {
border: 1px solid #cccccc;
background-color: white; }
select[multiple],
select[size] {
height: auto; }
input:-moz-placeholder,
textarea:-moz-placeholder {
color: #999999; }
input:-ms-input-placeholder,
textarea:-ms-input-placeholder {
color: #999999; }
input::-webkit-input-placeholder,
textarea::-webkit-input-placeholder {
color: #999999; }
input[disabled],
select[disabled],
textarea[disabled],
input[readonly],
select[readonly],
textarea[readonly] {
background-color: #eeeeee;
cursor: not-allowed; }
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
background-color: transparent; }
/* the overall container of the toggle */
.toggle {
display: inline-block; }
/* hide the actual checkbox */
.toggle input {
display: none; }
.toggle .track {
/* the background of the toggle's track area */
/* also the track appearance when the toggle is "off" */
position: relative;
display: inline-block;
box-sizing: border-box;
width: 54px;
height: 32px;
border: solid 2px #dddddd;
border-radius: 20px;
background-color: white;
cursor: pointer;
transition: 0.4s ease; }
.toggle .handle {
/* the handle (circle) thats inside the toggle's track area */
/* also the appearance when the handle is "off" */
position: absolute;
display: block;
width: auto;
/* override defaults */
height: auto;
/* override defaults */
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 4px 5px rgba(0, 0, 0, 0.25);
border-radius: 20px;
background-color: white;
left: 0;
top: 0;
bottom: 0;
right: 20px;
transition: 0.2s ease;
transition-property: left, right;
transition-delay: 0s, 0.05s; }
.toggle :checked + .track {
/* When the toggle is "on" */
/* the track when the toggle is "on" */
border-color: #4bd863;
background-color: #ccc;
box-shadow: inset 0 0 0 20px #4bd863;
transition: 0.2s ease;
/* the handle when the toggle is "on" */ }
.toggle :checked + .track .handle {
background-color: white;
right: 0;
left: 20px;
-webkit-transform: none;
transition-delay: 0.05s, 0s; }
.item-radio {
padding: 0; }
.item-radio:hover {
cursor: pointer; }
.item-radio .item-content {
/* give some room to the right for the checkmark icon */
padding-right: 60px; }
.item-radio .radio-icon {
/* checkmark icon will be hidden by default */
position: absolute;
top: 0;
right: 0;
z-index: 3;
visibility: hidden;
padding: 13px;
height: 100%;
font-size: 24px; }
.item-radio input[type="radio"] {
/* hide any radio button inputs elements (the ugly circles) */
display: none; }
.item-radio input[type="radio"]:checked ~ .item-content {
/* style the item content when its checked */
background: #f7f7f7; }
.item-radio input[type="radio"]:checked ~ .radio-icon {
/* show the checkmark icon when its checked */
visibility: visible; }
input[type="range"] {
display: inline-block;
margin-top: 20px;
margin-bottom: 20px;
width: auto;
height: 4px;
outline: none;
border-radius: 4px;
background-color: #cccccc;
-webkit-appearance: none !important; }
input[type="range"]::-webkit-slider-thumb {
position: relative;
width: 20px;
height: 20px;
border-radius: 10px;
background-color: white;
box-shadow: 0 0 2px rgba(0, 0, 0, 0.5), 0 5px 6px rgba(0, 0, 0, 0.25);
cursor: pointer;
-webkit-appearance: none !important; }
input[type="range"]::-webkit-slider-thumb:after {
/* create a larger (but hidden) hit area */
position: absolute;
top: -10px;
left: -10px;
display: table;
padding: 20px;
content: ' '; }
.button {
position: relative;
display: inline-block;
margin: 0;
padding: 8px 12px;
border-width: 1px;
border-style: solid;
border-radius: 2px;
color: #222222;
vertical-align: middle;
text-align: center;
font-size: 16px;
line-height: 20px;
text-overflow: ellipsis;
cursor: pointer; }
.button.button-icon {
padding: 4px 5px;
border: none;
background: none; }
.button.button-clear {
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;
padding: 4px 5px;
border: none;
background: none;
box-shadow: none; }
.button.button-clear:active, .button.button-clear.active {
opacity: 0.3; }
.button.button-default {
color: #333333;
background-color: white;
border-color: #dddddd; }
.button.button-default:hover {
color: #333333;
text-decoration: none; }
.button.button-default.active, .button.button-default:active {
background-color: #fafafa;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #bbbbbb; }
.button.button-default.button-clear {
color: #dddddd;
background: none;
box-shadow: none; }
.button.button-default.button-outline {
border-color: #dddddd;
color: #333333; }
.button.button-default.button-outline.active, .button.button-default.button-outline:active {
background-color: #dddddd;
color: #fff;
box-shadow: none; }
.button.button-secondary {
color: #333333;
background-color: whitesmoke;
border-color: #bbbbbb; }
.button.button-secondary:hover {
color: #333333;
text-decoration: none; }
.button.button-secondary.active, .button.button-secondary:active {
background-color: #e5e5e5;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #999999; }
.button.button-secondary.button-clear {
color: #bbbbbb;
background: none;
box-shadow: none; }
.button.button-secondary.button-outline {
border-color: #bbbbbb;
color: #333333; }
.button.button-secondary.button-outline.active, .button.button-secondary.button-outline:active {
background-color: #bbbbbb;
color: #fff;
box-shadow: none; }
.button.button-primary {
color: white;
background-color: #4a87ee;
border-color: #3b6dc2; }
.button.button-primary:hover {
color: white;
text-decoration: none; }
.button.button-primary.active, .button.button-primary:active {
background-color: #4175ce;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #32599c; }
.button.button-primary.button-clear {
color: #4a87ee;
background: none;
box-shadow: none; }
.button.button-primary.button-outline {
border-color: #4a87ee;
color: #4a87ee; }
.button.button-primary.button-outline.active, .button.button-primary.button-outline:active {
background-color: #4a87ee;
color: #fff;
box-shadow: none; }
.button.button-info {
color: white;
background-color: #43cee6;
border-color: #3bb3c8; }
.button.button-info:hover {
color: white;
text-decoration: none; }
.button.button-info.active, .button.button-info:active {
background-color: #3db8cd;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #3293a4; }
.button.button-info.button-clear {
color: #43cee6;
background: none;
box-shadow: none; }
.button.button-info.button-outline {
border-color: #43cee6;
color: #43cee6; }
.button.button-info.button-outline.active, .button.button-info.button-outline:active {
background-color: #43cee6;
color: #fff;
box-shadow: none; }
.button.button-success {
color: white;
background-color: #66cc33;
border-color: #5bb22f; }
.button.button-success:hover {
color: white;
text-decoration: none; }
.button.button-success.active, .button.button-success:active {
background-color: #55aa2b;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #448922; }
.button.button-success.button-clear {
color: #66cc33;
background: none;
box-shadow: none; }
.button.button-success.button-outline {
border-color: #66cc33;
color: #66cc33; }
.button.button-success.button-outline.active, .button.button-success.button-outline:active {
background-color: #66cc33;
color: #fff;
box-shadow: none; }
.button.button-warning {
color: white;
background-color: #f0b840;
border-color: #d29f31; }
.button.button-warning:hover {
color: white;
text-decoration: none; }
.button.button-warning.active, .button.button-warning:active {
background-color: #e2a114;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #b88517; }
.button.button-warning.button-clear {
color: #f0b840;
background: none;
box-shadow: none; }
.button.button-warning.button-outline {
border-color: #f0b840;
color: #f0b840; }
.button.button-warning.button-outline.active, .button.button-warning.button-outline:active {
background-color: #f0b840;
color: #fff;
box-shadow: none; }
.button.button-danger {
color: white;
background-color: #ef4e3a;
border-color: #c73927; }
.button.button-danger:hover {
color: white;
text-decoration: none; }
.button.button-danger.active, .button.button-danger:active {
background-color: #ce4331;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: #9f3527; }
.button.button-danger.button-clear {
color: #ef4e3a;
background: none;
box-shadow: none; }
.button.button-danger.button-outline {
border-color: #ef4e3a;
color: #ef4e3a; }
.button.button-danger.button-outline.active, .button.button-danger.button-outline:active {
background-color: #ef4e3a;
color: #fff;
box-shadow: none; }
.button.button-dark {
color: white;
background-color: #444444;
border-color: #111111; }
.button.button-dark:hover {
color: white;
text-decoration: none; }
.button.button-dark.active, .button.button-dark:active {
background-color: #222222;
box-shadow: inset 0px 1px 3px rgba(0, 0, 0, 0.15);
border-color: black; }
.button.button-dark.button-clear {
color: #444444;
background: none;
box-shadow: none; }
.button.button-dark.button-outline {
border-color: #444444;
color: #444444; }
.button.button-dark.button-outline.active, .button.button-dark.button-outline:active {
background-color: #444444;
color: #fff;
box-shadow: none; }
.button.button-outline {
-webkit-transition: opacity 0.1s;
transition: opacity 0.1s;
background: none;
box-shadow: none; }
.button.button-icon {
border: none;
background: none; }
.button.button-icon:active, .button.button-icon.active {
background: none;
box-shadow: none;
text-shadow: 0px 0px 10px white; }
.button.block, .button.button-full {
margin-top: 10px;
margin-bottom: 10px; }
.padding > .button.block:first-child {
margin-top: 0; }
.button-full,
.button-full > .button {
display: block;
margin-right: 0;
margin-left: 0;
border-right-width: 0;
border-left-width: 0;
border-radius: 0; }
button.block,
button.button-full,
.button-full > button.button {
width: 100%; }
a.button {
text-decoration: none; }
.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: box; }
.button-bar > .button {
box-flex: 1;
-webkit-box-flex: 1;
-moz-box-flex: 1;
display: block;
overflow: hidden;
padding: 8px 16px;
width: 0;
border-width: 1px 0px 1px 1px;
border-radius: 0;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 15px; }
.button-bar > .button:last-child {
border-right-width: 1px; }
.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 {
display: inline-block;
min-width: 10px;
padding: 3px 8px;
font-size: 14px;
font-weight: bold;
color: white;
line-height: 16px;
vertical-align: baseline;
white-space: nowrap;
text-align: center;
background-color: #999999;
border-radius: 10px; }
.badge:empty {
display: none; }
.button .badge {
position: relative;
top: -1px; }
.badge-default {
background: white; }
.badge-secondary {
background: whitesmoke; }
.badge-primary {
background: #4a87ee; }
.badge-info {
background: #43cee6; }
.badge-success {
background: #66cc33; }
.badge-warning {
background: #f0b840; }
.badge-danger {
background: #ef4e3a; }
.badge-dark {
background: #444444; }
.badge-gray-darker {
background: #222222; }
.badge-gray-dark {
background: #333333; }
.badge-gray {
background: #555555; }
.badge-gray-light {
background: #999999; }
.badge-gray-ligher {
background: #eeeeee; }
.alert {
margin: 10px;
padding: 8px 35px 8px 14px;
border: 1px solid #fbeed5;
background-color: #fcf8e3;
text-shadow: 0 1px 0 rgba(255, 255, 255, 0.5); }
.alert,
.alert h4 {
color: #c09853; }
.alert .close {
position: relative;
top: -2px;
right: -21px;
line-height: 1.42857; }
.alert-block {
padding-top: 14px;
padding-bottom: 14px; }
.alert-block > p,
.alert-block > ul {
margin-bottom: 0; }
.alert-block p + p {
margin-top: 5px; }
.alert-success {
border-color: #d6e9c6;
background-color: #dff0d8;
color: #468847; }
.alert-success h4 {
color: #468847; }
.alert-danger,
.alert-error {
border-color: #eed3d7;
background-color: #f2dede;
color: #b94a48; }
.alert-danger h4,
.alert-error h4 {
color: #b94a48; }
.alert-info {
border-color: #bce8f1;
background-color: #d9edf7;
color: #3a87ad; }
.alert-info h4 {
color: #3a87ad; }
.slide-in-up {
opacity: 0;
-webkit-transform: translate3d(0, 100%, 0);
transform: translate3d(0, 100%, 0);
-webkit-transition: -webkit-transform 0.4s, opacity 0.1s;
transition: -webkit-transform 0.4s, opacity 0.1s;
-webkit-transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
transition-timing-function: cubic-bezier(0.1, 0.7, 0.1, 1);
-webkit-animation-fill-mode: forwards; }
.slide-in-up.active {
opacity: 1;
-webkit-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0); }
.slide-in-slide-out.ng-enter, .slide-in-slide-out > .ng-enter {
-webkit-transition: 0.5s ease-in-out all;
-webkit-transform: translate3d(100%, 0, 0);
box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
.slide-in-slide-out.ng-enter-active, .slide-in-slide-out > .ng-enter-active {
-webkit-transform: translate3d(0, 0, 0); }
.slide-in-slide-out.ng-leave, .slide-in-slide-out > .ng-leave {
-webkit-transition: 0.5s ease-in-out all;
-webkit-transform: translate3d(0%, 0, 0); }
.slide-in-slide-out.ng-leave-active, .slide-in-slide-out > .ng-leave-active {
-webkit-transform: translate3d(-10%, 0, 0);
opacity: 0.8; }
.slide-in-slide-out-reverse.ng-enter, .slide-in-slide-out-reverse > .ng-enter {
z-index: 1;
-webkit-transition: 0.5s ease-in-out all;
-webkit-transform: translate3d(-100%, 0, 0);
box-shadow: -1px 0px 10px rgba(0, 0, 0, 0.6); }
.slide-in-slide-out-reverse.ng-enter-active, .slide-in-slide-out-reverse > .ng-enter-active {
-webkit-transform: translate3d(0, 0, 0); }
.slide-in-slide-out-reverse.ng-leave, .slide-in-slide-out-reverse > .ng-leave {
z-index: 0;
-webkit-transition: 0.5s ease-in-out all;
-webkit-transform: translate3d(0%, 0, 0); }
.slide-in-slide-out-reverse.ng-leave-active, .slide-in-slide-out-reverse > .ng-leave-active {
-webkit-transform: translate3d(10%, 0, 0);
opacity: 0.8; }
/**
* An animation that fades out one content area and fades in another
*/
.fade-in-out.ng-enter, .fade-in-out > .ng-enter {
opacity: 0;
-webkit-transition: opacity 0.3s ease-in-out; }
.fade-in-out.ng-enter-active, .fade-in-out > .ng-enter-active {
opacity: 1; }
.fade-in-out.ng-leave, .fade-in-out > .ng-leave {
opacity: 1;
-webkit-transition: opacity 0.3s ease-in-out; }
.fade-in-out.ng-leave-active, .fade-in-out > .ng-leave-active {
opacity: 0; }
.slide-left-fade-add {
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out; }
.slide-left-fade-add-active {
-webkit-transform: translate3d(-120px, 0, 0);
opacity: 0; }
.slide-left-fade-remove {
-webkit-transition: -webkit-transform 0.5s ease-in-out, opacity 0.5s ease-in-out;
-webkit-transform: translate3d(120px, 0, 0);
opacity: 0; }
.slide-left-fade-remove-active {
-webkit-transform: translate3d(0, 0, 0);
opacity: 1; }
@-webkit-keyframes fadeOut {
from {
opacity: 1; }
to {
opacity: 0; } }
@keyframes fadeOut {
from {
opacity: 1; }
to {
opacity: 0; } }
@-webkit-keyframes fadeIn {
from {
opacity: 0; }
to {
opacity: 1; } }
@keyframes fadeIn {
from {
opacity: 0; }
to {
opacity: 1; } }
.fade-in {
-webkit-animation: fadeOut 0.3s;
animation: fadeOut 0.3s; }
.fade-in.active {
-webkit-animation: fadeIn 0.3s;
animation: fadeIn 0.3s; }
@-moz-keyframes spin {
100% {
-moz-transform: rotate(360deg); } }
@-webkit-keyframes spin {
100% {
-webkit-transform: rotate(360deg); } }
@keyframes spin {
100% {
-webkit-transform: rotate(360deg);
transform: rotate(360deg); } }
.fill-icon {
color: white !important; }
.fill-icon:before {
background: black;
position: relative;
border-radius: 6px;
padding: 1px; }
.fill-icon.brand-default:before {
background: white; }
.fill-icon.brand-secondary:before {
background: whitesmoke; }
.fill-icon.brand-primary:before {
background: #4a87ee; }
.fill-icon.brand-info:before {
background: #43cee6; }
.fill-icon.brand-success:before {
background: #66cc33; }
.fill-icon.brand-warning:before {
background: #f0b840; }
.fill-icon.brand-danger:before {
background: #ef4e3a; }
.fill-icon.brand-dark:before {
background: #444444; }
.fill-icon.gray-darker:before {
background: #222222; }
.fill-icon.gray-dark:before {
background: #333333; }
.fill-icon.gray:before {
background: #555555; }
.fill-icon.gray-light:before {
background: #999999; }
.fill-icon.gray-lighter:before {
background: #eeeeee; }
.icon-loading {
font-family: 'ionicons';
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.icon-loading:before {
content: "\e144"; }
.icon-refreshing {
font-family: 'ionicons';
speak: none;
font-weight: normal;
font-variant: normal;
text-transform: none;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
-webkit-animation: spin 0.75s linear infinite;
-moz-animation: spin 0.75s linear infinite;
animation: spin 0.75s linear infinite; }
.icon-refreshing:before {
content: "\e144"; }
.hidden,
.hide {
display: none !important; }
.show {
display: block !important; }
.inline {
display: inline-block; }
.block {
display: block;
clear: both; }
.block:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: "."; }
.full-image {
width: 100%; }
.padding {
padding: 10px; }
.padding-top,
.padding-vertical {
padding-top: 10px; }
.padding-right,
.padding-horizontal {
padding-right: 10px; }
.padding-bottom,
.padding-vertical {
padding-bottom: 10px; }
.padding-left,
.padding-horizontal {
padding-left: 10px; }
.rounded {
border-radius: 4px; }
.brand-default {
color: white; }
.brand-secondary {
color: whitesmoke; }
.brand-primary {
color: #4a87ee; }
.brand-info {
color: #43cee6; }
.brand-success {
color: #66cc33; }
.brand-warning {
color: #f0b840; }
.brand-danger {
color: #ef4e3a; }
.brand-dark {
color: #444444; }
.black {
color: black; }
.gray-darker {
color: #222222; }
.gray-dark {
color: #333333; }
.gray {
color: #555555; }
.gray-light {
color: #999999; }
.gray-lighter {
color: #eeeeee; }
.white {
color: white; }