Initial-Release

This commit is contained in:
Carsten Hilmer
2016-08-05 00:46:43 +02:00
parent 38914d6e7b
commit 6a1387f45e
138 changed files with 159814 additions and 0 deletions

View File

@@ -0,0 +1,170 @@
/**
* Action Sheets
* --------------------------------------------------
*/
.action-sheet-backdrop {
@include transition(background-color 150ms ease-in-out);
position: fixed;
top: 0;
left: 0;
z-index: $z-index-action-sheet;
width: 100%;
height: 100%;
background-color: rgba(0,0,0,0);
&.active {
background-color: rgba(0,0,0,0.4);
}
}
.action-sheet-wrapper {
@include translate3d(0, 100%, 0);
@include transition(all cubic-bezier(.36, .66, .04, 1) 500ms);
position: absolute;
bottom: 0;
left: 0;
right: 0;
width: 100%;
max-width: 500px;
margin: auto;
}
.action-sheet-up {
@include translate3d(0, 0, 0);
}
.action-sheet {
margin-left: $sheet-margin;
margin-right: $sheet-margin;
width: auto;
z-index: $z-index-action-sheet;
overflow: hidden;
.button {
display: block;
padding: 1px;
width: 100%;
border-radius: 0;
border-color: $sheet-options-border-color;
background-color: transparent;
color: $sheet-options-text-color;
font-size: 21px;
&:hover {
color: $sheet-options-text-color;
}
&.destructive {
color: #ff3b30;
&:hover {
color: #ff3b30;
}
}
}
.button.active, .button.activated {
box-shadow: none;
border-color: $sheet-options-border-color;
color: $sheet-options-text-color;
background: $sheet-options-bg-active-color;
}
}
.action-sheet-has-icons .icon {
position: absolute;
left: 16px;
}
.action-sheet-title {
padding: $sheet-margin * 2;
color: #8f8f8f;
text-align: center;
font-size: 13px;
}
.action-sheet-group {
margin-bottom: $sheet-margin;
border-radius: $sheet-border-radius;
background-color: #fff;
overflow: hidden;
.button {
border-width: 1px 0px 0px 0px;
}
.button:first-child:last-child {
border-width: 0;
}
}
.action-sheet-options {
background: $sheet-options-bg-color;
}
.action-sheet-cancel {
.button {
font-weight: 500;
}
}
.action-sheet-open {
pointer-events: none;
&.modal-open .modal {
pointer-events: none;
}
.action-sheet-backdrop {
pointer-events: auto;
}
}
.platform-android {
.action-sheet-backdrop.active {
background-color: rgba(0,0,0,0.2);
}
.action-sheet {
margin: 0;
.action-sheet-title,
.button {
text-align: left;
border-color: transparent;
font-size: 16px;
color: inherit;
}
.action-sheet-title {
font-size: 14px;
padding: 16px;
color: #666;
}
.button.active,
.button.activated {
background: #e8e8e8;
}
}
.action-sheet-group {
margin: 0;
border-radius: 0;
background-color: #fafafa;
}
.action-sheet-cancel {
display: none;
}
.action-sheet-has-icons {
.button {
padding-left: 56px;
}
}
}

View File

@@ -0,0 +1,48 @@
// Slide up from the bottom, used for modals
// -------------------------------
.slide-in-up {
@include translate3d(0, 100%, 0);
}
.slide-in-up.ng-enter,
.slide-in-up > .ng-enter {
@include transition(all cubic-bezier(.1, .7, .1, 1) 400ms);
}
.slide-in-up.ng-enter-active,
.slide-in-up > .ng-enter-active {
@include translate3d(0, 0, 0);
}
.slide-in-up.ng-leave,
.slide-in-up > .ng-leave {
@include transition(all ease-in-out 250ms);
}
// Scale Out
// Scale from hero (1 in this case) to zero
// -------------------------------
@-webkit-keyframes scaleOut {
from { -webkit-transform: scale(1); opacity: 1; }
to { -webkit-transform: scale(0.8); opacity: 0; }
}
@keyframes scaleOut {
from { transform: scale(1); opacity: 1; }
to { transform: scale(0.8); opacity: 0; }
}
// Super Scale In
// Scale from super (1.x) to duper (1 in this case)
// -------------------------------
@-webkit-keyframes superScaleIn {
from { -webkit-transform: scale(1.2); opacity: 0; }
to { -webkit-transform: scale(1); opacity: 1 }
}
@keyframes superScaleIn {
from { transform: scale(1.2); opacity: 0; }
to { transform: scale(1); opacity: 1; }
}

View File

@@ -0,0 +1,24 @@
.backdrop {
position: fixed;
top: 0;
left: 0;
z-index: $z-index-backdrop;
width: 100%;
height: 100%;
background-color: $loading-backdrop-bg-color;
visibility: hidden;
opacity: 0;
&.visible {
visibility: visible;
}
&.active {
opacity: 1;
}
@include transition($loading-backdrop-fadein-duration opacity linear);
}

View File

@@ -0,0 +1,62 @@
/**
* Badges
* --------------------------------------------------
*/
.badge {
@include badge-style($badge-default-bg, $badge-default-text);
z-index: $z-index-badge;
display: inline-block;
padding: 3px 8px;
min-width: 10px;
border-radius: $badge-border-radius;
vertical-align: baseline;
text-align: center;
white-space: nowrap;
font-weight: $badge-font-weight;
font-size: $badge-font-size;
line-height: $badge-line-height;
&:empty {
display: none;
}
}
//Be sure to override specificity of rule that 'badge color matches tab color by default'
.tabs .tab-item .badge,
.badge {
&.badge-light {
@include badge-style($badge-light-bg, $badge-light-text);
}
&.badge-stable {
@include badge-style($badge-stable-bg, $badge-stable-text);
}
&.badge-positive {
@include badge-style($badge-positive-bg, $badge-positive-text);
}
&.badge-calm {
@include badge-style($badge-calm-bg, $badge-calm-text);
}
&.badge-assertive {
@include badge-style($badge-assertive-bg, $badge-assertive-text);
}
&.badge-balanced {
@include badge-style($badge-balanced-bg, $badge-balanced-text);
}
&.badge-energized {
@include badge-style($badge-energized-bg, $badge-energized-text);
}
&.badge-royal {
@include badge-style($badge-royal-bg, $badge-royal-text);
}
&.badge-dark {
@include badge-style($badge-dark-bg, $badge-dark-text);
}
}
// Quick fix for labels/badges in buttons
.button .badge {
position: relative;
top: -1px;
}

View File

@@ -0,0 +1,417 @@
/**
* Bar (Headers and Footers)
* --------------------------------------------------
*/
.bar {
@include display-flex();
@include translate3d(0,0,0);
@include user-select(none);
position: absolute;
right: 0;
left: 0;
z-index: $z-index-bar;
@include box-sizing(border-box);
padding: $bar-padding-portrait;
width: 100%;
height: $bar-height;
border-width: 0;
border-style: solid;
border-top: 1px solid transparent;
border-bottom: 1px solid $bar-default-border;
background-color: $bar-default-bg;
/* border-width: 1px will actually create 2 device pixels on retina */
/* this nifty trick sets an actual 1px border on hi-res displays */
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) {
border: none;
background-image: linear-gradient(0deg, $bar-default-border, $bar-default-border 50%, transparent 50%);
background-position: bottom;
background-size: 100% 1px;
background-repeat: no-repeat;
}
&.bar-clear {
border: none;
background: none;
color: #fff;
.button {
color: #fff;
}
.title {
color: #fff;
}
}
&.item-input-inset {
.item-input-wrapper {
margin-top: -1px;
input {
padding-left: 8px;
width: 94%;
height: 28px;
background: transparent;
}
}
}
&.bar-light {
@include bar-style($bar-light-bg, $bar-light-border, $bar-light-text);
&.bar-footer{
background-image: linear-gradient(180deg, $bar-light-border, $bar-light-border 50%, transparent 50%);
}
}
&.bar-stable {
@include bar-style($bar-stable-bg, $bar-stable-border, $bar-stable-text);
&.bar-footer{
background-image: linear-gradient(180deg, $bar-stable-border, $bar-stable-border 50%, transparent 50%);
}
}
&.bar-positive {
@include bar-style($bar-positive-bg, $bar-positive-border, $bar-positive-text);
&.bar-footer{
background-image: linear-gradient(180deg, $bar-positive-border, $bar-positive-border 50%, transparent 50%);
}
}
&.bar-calm {
@include bar-style($bar-calm-bg, $bar-calm-border, $bar-calm-text);
&.bar-footer{
background-image: linear-gradient(180deg, $bar-calm-border, $bar-calm-border 50%, transparent 50%);
}
}
&.bar-assertive {
@include bar-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-text);
&.bar-footer{
background-image: linear-gradient(180deg, $bar-assertive-border, $bar-assertive-border 50%, transparent 50%);
}
}
&.bar-balanced {
@include bar-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-text);
&.bar-footer{
background-image: linear-gradient(180deg, $bar-balanced-border, $bar-balanced-border 50%, transparent 50%);
}
}
&.bar-energized {
@include bar-style($bar-energized-bg, $bar-energized-border, $bar-energized-text);
&.bar-footer{
background-image: linear-gradient(180deg, $bar-energized-border, $bar-energized-border 50%, transparent 50%);
}
}
&.bar-royal {
@include bar-style($bar-royal-bg, $bar-royal-border, $bar-royal-text);
&.bar-footer{
background-image: linear-gradient(180deg, $bar-royal-border, $bar-royal-border 50%, transparent 50%);
}
}
&.bar-dark {
@include bar-style($bar-dark-bg, $bar-dark-border, $bar-dark-text);
&.bar-footer{
background-image: linear-gradient(180deg, $bar-dark-border, $bar-dark-border 50%, transparent 50%);
}
}
// Title inside of a bar is centered
.title {
display: block;
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: $z-index-bar-title;
overflow: hidden;
margin: 0 10px;
min-width: 30px;
height: $bar-height - 1;
text-align: center;
// Go into ellipsis if too small
text-overflow: ellipsis;
white-space: nowrap;
font-size: $bar-title-font-size;
font-weight: $headings-font-weight;
line-height: $bar-height;
&.title-left {
text-align: left;
}
&.title-right {
text-align: right;
}
}
.title a {
color: inherit;
}
.button, button {
z-index: $z-index-bar-button;
padding: 0 $button-bar-button-padding;
min-width: initial;
min-height: $button-bar-button-height - 1;
font-weight: 400;
font-size: $button-bar-button-font-size;
line-height: $button-bar-button-height;
&.button-icon:before,
.icon:before,
&.icon:before,
&.icon-left:before,
&.icon-right:before {
padding-right: 2px;
padding-left: 2px;
font-size: $button-bar-button-icon-size;
line-height: $button-bar-button-height;
}
&.button-icon {
font-size: $bar-title-font-size;
.icon:before,
&:before,
&.icon-left:before,
&.icon-right:before {
vertical-align: top;
font-size: $button-large-icon-size;
line-height: $button-bar-button-height;
}
}
&.button-clear {
padding-right: 2px;
padding-left: 2px;
font-weight: 300;
font-size: $bar-title-font-size;
.icon:before,
&.icon:before,
&.icon-left:before,
&.icon-right:before {
font-size: $button-large-icon-size;
line-height: $button-bar-button-height;
}
}
&.back-button {
display: block;
margin-right: 5px;
padding: 0;
white-space: nowrap;
font-weight: 400;
}
&.back-button.active,
&.back-button.activated {
opacity: 0.2;
}
}
.button-bar > .button,
.buttons > .button {
min-height: $button-bar-button-height - 1;
line-height: $button-bar-button-height;
}
.button-bar + .button,
.button + .button-bar {
margin-left: 5px;
}
// Android 4.4 messes with the display property
.buttons,
.buttons.primary-buttons,
.buttons.secondary-buttons {
display: inherit;
}
.buttons span {
display: inline-block;
}
.buttons-left span {
margin-right: 5px;
display: inherit;
}
.buttons-right span {
margin-left: 5px;
display: inherit;
}
// Place the last button in a bar on the right of the bar
.title + .button:last-child,
> .button + .button:last-child,
> .button.pull-right,
.buttons.pull-right,
.title + .buttons {
position: absolute;
top: 5px;
right: 5px;
bottom: 5px;
}
}
.platform-android {
.nav-bar-has-subheader .bar {
background-image: none;
}
.bar {
.back-button .icon:before {
font-size: 24px;
}
.title {
font-size: 19px;
line-height: $bar-height;
}
}
}
// Default styles for buttons inside of styled bars
.bar-light {
.button {
@include button-style($bar-light-bg, $bar-light-border, $bar-light-active-bg, $bar-light-active-border, $bar-light-text);
@include button-clear($bar-light-text, $bar-title-font-size);
}
}
.bar-stable {
.button {
@include button-style($bar-stable-bg, $bar-stable-border, $bar-stable-active-bg, $bar-stable-active-border, $bar-stable-text);
@include button-clear($bar-stable-text, $bar-title-font-size);
}
}
.bar-positive {
.button {
@include button-style($bar-positive-bg, $bar-positive-border, $bar-positive-active-bg, $bar-positive-active-border, $bar-positive-text);
@include button-clear(#fff, $bar-title-font-size);
}
}
.bar-calm {
.button {
@include button-style($bar-calm-bg, $bar-calm-border, $bar-calm-active-bg, $bar-calm-active-border, $bar-calm-text);
@include button-clear(#fff, $bar-title-font-size);
}
}
.bar-assertive {
.button {
@include button-style($bar-assertive-bg, $bar-assertive-border, $bar-assertive-active-bg, $bar-assertive-active-border, $bar-assertive-text);
@include button-clear(#fff, $bar-title-font-size);
}
}
.bar-balanced {
.button {
@include button-style($bar-balanced-bg, $bar-balanced-border, $bar-balanced-active-bg, $bar-balanced-active-border, $bar-balanced-text);
@include button-clear(#fff, $bar-title-font-size);
}
}
.bar-energized {
.button {
@include button-style($bar-energized-bg, $bar-energized-border, $bar-energized-active-bg, $bar-energized-active-border, $bar-energized-text);
@include button-clear(#fff, $bar-title-font-size);
}
}
.bar-royal {
.button {
@include button-style($bar-royal-bg, $bar-royal-border, $bar-royal-active-bg, $bar-royal-active-border, $bar-royal-text);
@include button-clear(#fff, $bar-title-font-size);
}
}
.bar-dark {
.button {
@include button-style($bar-dark-bg, $bar-dark-border, $bar-dark-active-bg, $bar-dark-active-border, $bar-dark-text);
@include button-clear(#fff, $bar-title-font-size);
}
}
// Header at top
.bar-header {
top: 0;
border-top-width: 0;
border-bottom-width: 1px;
&.has-tabs-top{
border-bottom-width: 0px;
background-image: none;
}
}
.tabs-top .bar-header{
border-bottom-width: 0px;
background-image: none;
}
// Footer at bottom
.bar-footer {
bottom: 0;
border-top-width: 1px;
border-bottom-width: 0;
background-position: top;
height: $bar-footer-height;
&.item-input-inset {
position: absolute;
}
.title {
height: $bar-footer-height - 1;
line-height: $bar-footer-height;
}
}
// Don't render padding if the bar is just for tabs
.bar-tabs {
padding: 0;
}
.bar-subheader {
top: $bar-height;
height: $bar-subheader-height;
.title {
height: $bar-subheader-height - 1;
line-height: $bar-subheader-height;
}
}
.bar-subfooter {
bottom: $bar-footer-height;
height: $bar-subfooter-height;
.title {
height: $bar-subfooter-height - 1;
line-height: $bar-subfooter-height;
}
}
.nav-bar-block {
position: absolute;
top: 0;
right: 0;
left: 0;
z-index: $z-index-bar;
}
.bar .back-button.hide,
.bar .buttons .hide {
display: none;
}
.nav-bar-tabs-top .bar {
background-image: none;
}

View File

@@ -0,0 +1,92 @@
/**
* Button Bar
* --------------------------------------------------
*/
.button-bar {
@include display-flex();
@include flex(1);
width: 100%;
&.button-bar-inline {
display: block;
width: auto;
@include clearfix();
> .button {
width: auto;
display: inline-block;
float: left;
}
}
&.bar-light > .button {
border-color: $button-light-border;
}
&.bar-stable > .button {
border-color: $button-stable-border;
}
&.bar-positive > .button {
border-color: $button-positive-border;
}
&.bar-calm > .button {
border-color: $button-calm-border;
}
&.bar-assertive > .button {
border-color: $button-assertive-border;
}
&.bar-balanced > .button {
border-color: $button-balanced-border;
}
&.bar-energized > .button {
border-color: $button-energized-border;
}
&.bar-royal > .button {
border-color: $button-royal-border;
}
&.bar-dark > .button {
border-color: $button-dark-border;
}
}
.button-bar > .button {
@include flex(1);
display: block;
overflow: hidden;
padding: 0 16px;
width: 0;
border-width: 1px 0px 1px 1px;
border-radius: 0;
text-align: center;
text-overflow: ellipsis;
white-space: nowrap;
&:before,
.icon:before {
line-height: 44px;
}
&:first-child {
border-radius: $button-border-radius 0px 0px $button-border-radius;
}
&:last-child {
border-right-width: 1px;
border-radius: 0px $button-border-radius $button-border-radius 0px;
}
&:only-child {
border-radius: $button-border-radius;
}
}
.button-bar > .button-small {
&:before,
.icon:before {
line-height: 28px;
}
}

View File

@@ -0,0 +1,252 @@
/**
* Buttons
* --------------------------------------------------
*/
.button {
// set the color defaults
@include button-style($button-default-bg, $button-default-border, $button-default-active-bg, $button-default-active-border, $button-default-text);
position: relative;
display: inline-block;
margin: 0;
padding: 0 $button-padding;
min-width: ($button-padding * 3) + $button-font-size;
min-height: $button-height + 5px;
border-width: $button-border-width;
border-style: solid;
border-radius: $button-border-radius;
vertical-align: top;
text-align: center;
text-overflow: ellipsis;
font-size: $button-font-size;
line-height: $button-height - $button-border-width + 1px;
cursor: pointer;
&:after {
// used to create a larger button "hit" area
position: absolute;
top: -6px;
right: -6px;
bottom: -6px;
left: -6px;
content: ' ';
}
.icon {
vertical-align: top;
pointer-events: none;
}
.icon:before,
&.icon:before,
&.icon-left:before,
&.icon-right:before {
display: inline-block;
padding: 0 0 $button-border-width 0;
vertical-align: inherit;
font-size: $button-icon-size;
line-height: $button-height - $button-border-width;
pointer-events: none;
}
&.icon-left:before {
float: left;
padding-right: .2em;
padding-left: 0;
}
&.icon-right:before {
float: right;
padding-right: 0;
padding-left: .2em;
}
&.button-block, &.button-full {
margin-top: $button-block-margin;
margin-bottom: $button-block-margin;
}
&.button-light {
@include button-style($button-light-bg, $button-default-border, $button-light-active-bg, $button-default-active-border, $button-light-text);
@include button-clear($button-light-border);
@include button-outline($button-light-border);
}
&.button-stable {
@include button-style($button-stable-bg, $button-default-border, $button-stable-active-bg, $button-default-active-border, $button-stable-text);
@include button-clear($button-stable-border);
@include button-outline($button-stable-border);
}
&.button-positive {
@include button-style($button-positive-bg, $button-default-border, $button-positive-active-bg, $button-default-active-border, $button-positive-text);
@include button-clear($button-positive-bg);
@include button-outline($button-positive-bg);
}
&.button-calm {
@include button-style($button-calm-bg, $button-default-border, $button-calm-active-bg, $button-default-active-border, $button-calm-text);
@include button-clear($button-calm-bg);
@include button-outline($button-calm-bg);
}
&.button-assertive {
@include button-style($button-assertive-bg, $button-default-border, $button-assertive-active-bg, $button-default-active-border, $button-assertive-text);
@include button-clear($button-assertive-bg);
@include button-outline($button-assertive-bg);
}
&.button-balanced {
@include button-style($button-balanced-bg, $button-default-border, $button-balanced-active-bg, $button-default-active-border, $button-balanced-text);
@include button-clear($button-balanced-bg);
@include button-outline($button-balanced-bg);
}
&.button-energized {
@include button-style($button-energized-bg, $button-default-border, $button-energized-active-bg, $button-default-active-border, $button-energized-text);
@include button-clear($button-energized-bg);
@include button-outline($button-energized-bg);
}
&.button-royal {
@include button-style($button-royal-bg, $button-default-border, $button-royal-active-bg, $button-default-active-border, $button-royal-text);
@include button-clear($button-royal-bg);
@include button-outline($button-royal-bg);
}
&.button-dark {
@include button-style($button-dark-bg, $button-default-border, $button-dark-active-bg, $button-default-active-border, $button-dark-text);
@include button-clear($button-dark-bg);
@include button-outline($button-dark-bg);
}
}
.button-small {
padding: 2px $button-small-padding 1px;
min-width: $button-small-height;
min-height: $button-small-height + 2;
font-size: $button-small-font-size;
line-height: $button-small-height - $button-border-width - 1;
.icon:before,
&.icon:before,
&.icon-left:before,
&.icon-right:before {
font-size: $button-small-icon-size;
line-height: $button-small-icon-size + 3;
margin-top: 3px;
}
}
.button-large {
padding: 0 $button-large-padding;
min-width: ($button-large-padding * 3) + $button-large-font-size;
min-height: $button-large-height + 5;
font-size: $button-large-font-size;
line-height: $button-large-height - $button-border-width;
.icon:before,
&.icon:before,
&.icon-left:before,
&.icon-right:before {
padding-bottom: ($button-border-width * 2);
font-size: $button-large-icon-size;
line-height: $button-large-height - ($button-border-width * 2) - 1;
}
}
.button-icon {
@include transition(opacity .1s);
padding: 0 6px;
min-width: initial;
border-color: transparent;
background: none;
&.button.active,
&.button.activated {
border-color: transparent;
background: none;
box-shadow: none;
opacity: 0.3;
}
.icon:before,
&.icon:before {
font-size: $button-large-icon-size;
}
}
.button-clear {
@include button-clear($button-default-border);
@include transition(opacity .1s);
padding: 0 $button-clear-padding;
max-height: $button-height;
border-color: transparent;
background: none;
box-shadow: none;
&.active,
&.activated {
opacity: 0.3;
}
}
.button-outline {
@include button-outline($button-default-border);
@include transition(opacity .1s);
background: none;
box-shadow: none;
}
.padding > .button.button-block:first-child {
margin-top: 0;
}
.button-block {
display: block;
clear: both;
&:after {
clear: both;
}
}
.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.button-block,
button.button-full,
.button-full > button.button,
input.button.button-block {
width: 100%;
}
a.button {
text-decoration: none;
.icon:before,
&.icon:before,
&.icon-left:before,
&.icon-right:before {
margin-top: 2px;
}
}
.button.disabled,
.button[disabled] {
opacity: .4;
cursor: default !important;
pointer-events: none;
}

View File

@@ -0,0 +1,180 @@
/**
* Checkbox
* --------------------------------------------------
*/
.checkbox {
// set the color defaults
@include checkbox-style($checkbox-off-border-default, $checkbox-on-bg-default, $checkbox-on-border-default);
position: relative;
display: inline-block;
padding: ($checkbox-height / 4) ($checkbox-width / 4);
cursor: pointer;
}
.checkbox-light {
@include checkbox-style($checkbox-off-border-light, $checkbox-on-bg-light, $checkbox-off-border-light);
}
.checkbox-stable {
@include checkbox-style($checkbox-off-border-stable, $checkbox-on-bg-stable, $checkbox-off-border-stable);
}
.checkbox-positive {
@include checkbox-style($checkbox-off-border-positive, $checkbox-on-bg-positive, $checkbox-off-border-positive);
}
.checkbox-calm {
@include checkbox-style($checkbox-off-border-calm, $checkbox-on-bg-calm, $checkbox-off-border-calm);
}
.checkbox-assertive {
@include checkbox-style($checkbox-off-border-assertive, $checkbox-on-bg-assertive, $checkbox-off-border-assertive);
}
.checkbox-balanced {
@include checkbox-style($checkbox-off-border-balanced, $checkbox-on-bg-balanced, $checkbox-off-border-balanced);
}
.checkbox-energized{
@include checkbox-style($checkbox-off-border-energized, $checkbox-on-bg-energized, $checkbox-off-border-energized);
}
.checkbox-royal {
@include checkbox-style($checkbox-off-border-royal, $checkbox-on-bg-royal, $checkbox-off-border-royal);
}
.checkbox-dark {
@include checkbox-style($checkbox-off-border-dark, $checkbox-on-bg-dark, $checkbox-off-border-dark);
}
.checkbox input:disabled:before,
.checkbox input:disabled + .checkbox-icon:before {
border-color: $checkbox-off-border-light;
}
.checkbox input:disabled:checked:before,
.checkbox input:disabled:checked + .checkbox-icon:before {
background: $checkbox-on-bg-light;
}
.checkbox.checkbox-input-hidden input {
display: none !important;
}
.checkbox input,
.checkbox-icon {
position: relative;
width: $checkbox-width;
height: $checkbox-height;
display: block;
border: 0;
background: transparent;
cursor: pointer;
-webkit-appearance: none;
&:before {
// what the checkbox looks like when its not checked
display: table;
width: 100%;
height: 100%;
border-width: $checkbox-border-width;
border-style: solid;
border-radius: $checkbox-border-radius;
background: $checkbox-off-bg-color;
content: ' ';
@include transition(background-color 20ms ease-in-out);
}
}
.checkbox input:checked:before,
input:checked + .checkbox-icon:before {
border-width: $checkbox-border-width + 1;
}
// the checkmark within the box
.checkbox input:after,
.checkbox-icon:after {
@include transition(opacity .05s ease-in-out);
@include rotate(-45deg);
position: absolute;
top: 33%;
left: 25%;
display: table;
width: ($checkbox-width / 2);
height: ($checkbox-width / 4) - 1;
border: $checkbox-check-width solid $checkbox-check-color;
border-top: 0;
border-right: 0;
content: ' ';
opacity: 0;
}
.platform-android .checkbox-platform input:before,
.platform-android .checkbox-platform .checkbox-icon:before,
.checkbox-square input:before,
.checkbox-square .checkbox-icon:before {
border-radius: 2px;
width: 72%;
height: 72%;
margin-top: 14%;
margin-left: 14%;
border-width: 2px;
}
.platform-android .checkbox-platform input:after,
.platform-android .checkbox-platform .checkbox-icon:after,
.checkbox-square input:after,
.checkbox-square .checkbox-icon:after {
border-width: 2px;
top: 19%;
left: 25%;
width: ($checkbox-width / 2) - 1;
height: 7px;
}
.platform-android .item-checkbox-right .checkbox-square .checkbox-icon::after {
top: 31%;
}
.grade-c .checkbox input:after,
.grade-c .checkbox-icon:after {
@include rotate(0);
top: 3px;
left: 4px;
border: none;
color: $checkbox-check-color;
content: '\2713';
font-weight: bold;
font-size: 20px;
}
// what the checkmark looks like when its checked
.checkbox input:checked:after,
input:checked + .checkbox-icon:after {
opacity: 1;
}
// make sure item content have enough padding on left to fit the checkbox
.item-checkbox {
padding-left: ($item-padding * 2) + $checkbox-width;
&.active {
box-shadow: none;
}
}
// position the checkbox to the left within an item
.item-checkbox .checkbox {
position: absolute;
top: 50%;
right: $item-padding / 2;
left: $item-padding / 2;
z-index: $z-index-item-checkbox;
margin-top: (($checkbox-height + ($checkbox-height / 2)) / 2) * -1;
}
.item-checkbox.item-checkbox-right {
padding-right: ($item-padding * 2) + $checkbox-width;
padding-left: $item-padding;
}
.item-checkbox-right .checkbox input,
.item-checkbox-right .checkbox-icon {
float: right;
}

View File

@@ -0,0 +1,327 @@
/**
* Forms
* --------------------------------------------------
*/
// Make all forms have space below them
form {
margin: 0 0 $line-height-base;
}
// Groups of fields with labels on top (legends)
legend {
display: block;
margin-bottom: $line-height-base;
padding: 0;
width: 100%;
border: $input-border-width solid $input-border;
color: $dark;
font-size: $font-size-base * 1.5;
line-height: $line-height-base * 2;
small {
color: $stable;
font-size: $line-height-base * .75;
}
}
// Set font for forms
label,
input,
button,
select,
textarea {
@include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
}
input,
button,
select,
textarea {
font-family: $font-family-base; // And only set font-family here for those that need it (note the missing label element)
}
// Input List
// -------------------------------
.item-input {
@include display-flex();
@include align-items(center);
position: relative;
overflow: hidden;
padding: 6px 0 5px 16px;
input {
@include border-radius(0);
@include flex(1, 220px);
@include appearance(none);
margin: 0;
padding-right: 24px;
background-color: transparent;
}
.button .icon {
@include flex(0, 0, 24px);
position: static;
display: inline-block;
height: auto;
text-align: center;
font-size: 16px;
}
.button-bar {
@include border-radius(0);
@include flex(1, 0, 220px);
@include appearance(none);
}
.icon {
min-width: 14px;
}
}
// prevent flex-shrink on WP
.platform-windowsphone .item-input input{
flex-shrink: 1;
}
.item-input-inset {
@include display-flex();
@include align-items(center);
position: relative;
overflow: hidden;
padding: ($item-padding / 3) * 2;
}
.item-input-wrapper {
@include display-flex();
@include flex(1, 0);
@include align-items(center);
@include border-radius(4px);
padding-right: 8px;
padding-left: 8px;
background: #eee;
}
.item-input-inset .item-input-wrapper input {
padding-left: 4px;
height: 29px;
background: transparent;
line-height: 18px;
}
.item-input-wrapper ~ .button {
margin-left: ($item-padding / 3) * 2;
}
.input-label {
display: table;
padding: 7px 10px 7px 0px;
max-width: 200px;
width: 35%;
color: $input-label-color;
font-size: 16px;
}
.placeholder-icon {
color: #aaa;
&:first-child {
padding-right: 6px;
}
&:last-child {
padding-left: 6px;
}
}
.item-stacked-label {
display: block;
background-color: transparent;
box-shadow: none;
.input-label, .icon {
display: inline-block;
padding: 4px 0 0 0px;
vertical-align: middle;
}
}
.item-stacked-label input,
.item-stacked-label textarea {
@include border-radius(2px);
padding: 4px 8px 3px 0;
border: none;
background-color: $input-bg;
}
.item-stacked-label input {
overflow: hidden;
height: $line-height-computed + $font-size-base + 12px;
}
.item-select.item-stacked-label select {
position: relative;
padding: 0px;
max-width: 90%;
direction:ltr;
white-space: pre-wrap;
margin: -3px;
}
.item-floating-label {
display: block;
background-color: transparent;
box-shadow: none;
.input-label {
position: relative;
padding: 5px 0 0 0;
opacity: 0;
top: 10px;
@include transition(opacity .15s ease-in, top .2s linear);
&.has-input {
opacity: 1;
top: 0;
@include transition(opacity .15s ease-in, top .2s linear);
}
}
}
// Form Controls
// -------------------------------
// Shared size and type resets
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: block;
padding-top: 2px;
padding-left: 0;
height: $line-height-computed + $font-size-base;
color: $input-color;
vertical-align: middle;
font-size: $font-size-base;
line-height: $font-size-base + 2;
}
.platform-ios,
.platform-android {
input[type="datetime-local"],
input[type="date"],
input[type="month"],
input[type="time"],
input[type="week"] {
padding-top: 8px;
}
}
.item-input {
input,
textarea {
width: 100%;
}
}
textarea {
padding-left: 0;
@include placeholder($input-color-placeholder, -3px);
}
// Reset height since textareas have rows
textarea {
height: auto;
}
// Everything else
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;
}
// Position radios and checkboxes better
input[type="radio"],
input[type="checkbox"] {
margin: 0;
line-height: normal;
}
// Reset width of input images, buttons, radios, checkboxes
.item-input {
input[type="file"],
input[type="image"],
input[type="submit"],
input[type="reset"],
input[type="button"],
input[type="radio"],
input[type="checkbox"] {
width: auto; // Override of generic input selector
}
}
// Set the height of file to match text inputs
input[type="file"] {
line-height: $input-height-base;
}
// Text input classes to hide text caret during scroll
.previous-input-focus,
.cloned-text-input + input,
.cloned-text-input + textarea {
position: absolute !important;
left: -9999px;
width: 200px;
}
// Placeholder
// -------------------------------
input,
textarea {
@include placeholder();
}
// DISABLED STATE
// -------------------------------
// Disabled and read-only inputs
input[disabled],
select[disabled],
textarea[disabled],
input[readonly]:not(.cloned-text-input),
textarea[readonly]:not(.cloned-text-input),
select[readonly] {
background-color: $input-bg-disabled;
cursor: not-allowed;
}
// Explicitly reset the colors here
input[type="radio"][disabled],
input[type="checkbox"][disabled],
input[type="radio"][readonly],
input[type="checkbox"][readonly] {
background-color: transparent;
}

View File

@@ -0,0 +1,159 @@
/**
* Grid
* --------------------------------------------------
* Using flexbox for the grid, inspired by Philip Walton:
* http://philipwalton.github.io/solved-by-flexbox/demos/grids/
* By default each .col within a .row will evenly take up
* available width, and the height of each .col with take
* up the height of the tallest .col in the same .row.
*/
.row {
@include display-flex();
padding: ($grid-padding-width / 2);
width: 100%;
}
.row-wrap {
@include flex-wrap(wrap);
}
.row-no-padding {
padding: 0;
> .col {
padding: 0;
}
}
.row + .row {
margin-top: ($grid-padding-width / 2) * -1;
padding-top: 0;
}
.col {
@include flex(1);
display: block;
padding: ($grid-padding-width / 2);
width: 100%;
}
/* Vertically Align Columns */
/* .row-* vertically aligns every .col in the .row */
.row-top {
@include align-items(flex-start);
}
.row-bottom {
@include align-items(flex-end);
}
.row-center {
@include align-items(center);
}
.row-stretch {
@include align-items(stretch);
}
.row-baseline {
@include align-items(baseline);
}
/* .col-* vertically aligns an individual .col */
.col-top {
@include align-self(flex-start);
}
.col-bottom {
@include align-self(flex-end);
}
.col-center {
@include align-self(center);
}
/* Column Offsets */
.col-offset-10 {
margin-left: 10%;
}
.col-offset-20 {
margin-left: 20%;
}
.col-offset-25 {
margin-left: 25%;
}
.col-offset-33, .col-offset-34 {
margin-left: 33.3333%;
}
.col-offset-50 {
margin-left: 50%;
}
.col-offset-66, .col-offset-67 {
margin-left: 66.6666%;
}
.col-offset-75 {
margin-left: 75%;
}
.col-offset-80 {
margin-left: 80%;
}
.col-offset-90 {
margin-left: 90%;
}
/* Explicit Column Percent Sizes */
/* By default each grid column will evenly distribute */
/* across the grid. However, you can specify individual */
/* columns to take up a certain size of the available area */
.col-10 {
@include flex(0, 0, 10%);
max-width: 10%;
}
.col-20 {
@include flex(0, 0, 20%);
max-width: 20%;
}
.col-25 {
@include flex(0, 0, 25%);
max-width: 25%;
}
.col-33, .col-34 {
@include flex(0, 0, 33.3333%);
max-width: 33.3333%;
}
.col-40 {
@include flex(0, 0, 40%);
max-width: 40%;
}
.col-50 {
@include flex(0, 0, 50%);
max-width: 50%;
}
.col-60 {
@include flex(0, 0, 60%);
max-width: 60%;
}
.col-66, .col-67 {
@include flex(0, 0, 66.6666%);
max-width: 66.6666%;
}
.col-75 {
@include flex(0, 0, 75%);
max-width: 75%;
}
.col-80 {
@include flex(0, 0, 80%);
max-width: 80%;
}
.col-90 {
@include flex(0, 0, 90%);
max-width: 90%;
}
/* Responsive Grid Classes */
/* Adding a class of responsive-X to a row */
/* will trigger the flex-direction to */
/* change to column and add some margin */
/* to any columns in the row for clearity */
@include responsive-grid-break('.responsive-sm', $grid-responsive-sm-break);
@include responsive-grid-break('.responsive-md', $grid-responsive-md-break);
@include responsive-grid-break('.responsive-lg', $grid-responsive-lg-break);

View File

@@ -0,0 +1,825 @@
/**
* Items
* --------------------------------------------------
*/
.item {
@include item-style($item-default-bg, $item-default-border, $item-default-text);
position: relative;
z-index: $z-index-item; // Make sure the borders and stuff don't get hidden by children
display: block;
margin: $item-border-width * -1;
padding: $item-padding;
border-width: $item-border-width;
border-style: solid;
font-size: $item-font-size;
h2 {
margin: 0 0 2px 0;
font-size: 16px;
font-weight: normal;
}
h3 {
margin: 0 0 4px 0;
font-size: 14px;
}
h4 {
margin: 0 0 4px 0;
font-size: 12px;
}
h5, h6 {
margin: 0 0 3px 0;
font-size: 10px;
}
p {
color: #666;
font-size: 14px;
margin-bottom: 2px;
}
h1:last-child,
h2:last-child,
h3:last-child,
h4:last-child,
h5:last-child,
h6:last-child,
p:last-child {
margin-bottom: 0;
}
// Align badges within items
.badge {
@include display-flex();
position: absolute;
top: $item-padding;
right: ($item-padding * 2);
}
&.item-button-right .badge {
right: ($item-padding * 2) + 35;
}
&.item-divider .badge {
top: ceil($item-padding / 2);
}
.badge + .badge {
margin-right: 5px;
}
// Different themes for items
&.item-light {
@include item-style($item-light-bg, $item-light-border, $item-light-text);
}
&.item-stable {
@include item-style($item-stable-bg, $item-stable-border, $item-stable-text);
}
&.item-positive {
@include item-style($item-positive-bg, $item-positive-border, $item-positive-text);
}
&.item-calm {
@include item-style($item-calm-bg, $item-calm-border, $item-calm-text);
}
&.item-assertive {
@include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text);
}
&.item-balanced {
@include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text);
}
&.item-energized {
@include item-style($item-energized-bg, $item-energized-border, $item-energized-text);
}
&.item-royal {
@include item-style($item-royal-bg, $item-royal-border, $item-royal-text);
}
&.item-dark {
@include item-style($item-dark-bg, $item-dark-border, $item-dark-text);
}
&[ng-click]:hover {
cursor: pointer;
}
}
.list-borderless .item,
.item-borderless {
border-width: 0;
}
// Link and Button Active States
.item.active,
.item.activated,
.item-complex.active .item-content,
.item-complex.activated .item-content,
.item .item-content.active,
.item .item-content.activated {
@include item-active-style($item-default-active-bg, $item-default-active-border);
// Different active themes for <a> and <button> items
&.item-light {
@include item-active-style($item-light-active-bg, $item-light-active-border);
}
&.item-stable {
@include item-active-style($item-stable-active-bg, $item-stable-active-border);
}
&.item-positive {
@include item-active-style($item-positive-active-bg, $item-positive-active-border);
}
&.item-calm {
@include item-active-style($item-calm-active-bg, $item-calm-active-border);
}
&.item-assertive {
@include item-active-style($item-assertive-active-bg, $item-assertive-active-border);
}
&.item-balanced {
@include item-active-style($item-balanced-active-bg, $item-balanced-active-border);
}
&.item-energized {
@include item-active-style($item-energized-active-bg, $item-energized-active-border);
}
&.item-royal {
@include item-active-style($item-royal-active-bg, $item-royal-active-border);
}
&.item-dark {
@include item-active-style($item-dark-active-bg, $item-dark-active-border);
}
}
// Handle text overflow
.item,
.item h1,
.item h2,
.item h3,
.item h4,
.item h5,
.item h6,
.item p,
.item-content,
.item-content h1,
.item-content h2,
.item-content h3,
.item-content h4,
.item-content h5,
.item-content h6,
.item-content p {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
// Linked list items
a.item {
color: inherit;
text-decoration: none;
&:hover,
&:focus {
text-decoration: none;
}
}
/**
* Complex Items
* --------------------------------------------------
* Adding .item-complex allows the .item to be slidable and
* have options underneath the button, but also requires an
* additional .item-content element inside .item.
* Basically .item-complex removes any default settings which
* .item added, so that .item-content looks them as just .item.
*/
.item-complex,
a.item.item-complex,
button.item.item-complex {
padding: 0;
}
.item-complex .item-content,
.item-radio .item-content {
position: relative;
z-index: $z-index-item;
padding: $item-padding (ceil( ($item-padding * 3) + ($item-padding / 3) ) - 5) $item-padding $item-padding;
border: none;
background-color: $item-default-bg;
}
a.item-content {
display: block;
color: inherit;
text-decoration: none;
}
.item-text-wrap .item,
.item-text-wrap .item-content,
.item-text-wrap,
.item-text-wrap h1,
.item-text-wrap h2,
.item-text-wrap h3,
.item-text-wrap h4,
.item-text-wrap h5,
.item-text-wrap h6,
.item-text-wrap p,
.item-complex.item-text-wrap .item-content,
.item-body h1,
.item-body h2,
.item-body h3,
.item-body h4,
.item-body h5,
.item-body h6,
.item-body p {
overflow: visible;
white-space: normal;
}
.item-complex.item-text-wrap,
.item-complex.item-text-wrap h1,
.item-complex.item-text-wrap h2,
.item-complex.item-text-wrap h3,
.item-complex.item-text-wrap h4,
.item-complex.item-text-wrap h5,
.item-complex.item-text-wrap h6,
.item-complex.item-text-wrap p {
overflow: visible;
white-space: normal;
}
// Link and Button Active States
.item-complex{
// Stylized items
&.item-light > .item-content{
@include item-style($item-light-bg, $item-light-border, $item-light-text);
&.active, &:active {
@include item-active-style($item-light-active-bg, $item-light-active-border);
}
}
&.item-stable > .item-content{
@include item-style($item-stable-bg, $item-stable-border, $item-stable-text);
&.active, &:active {
@include item-active-style($item-stable-active-bg, $item-stable-active-border);
}
}
&.item-positive > .item-content{
@include item-style($item-positive-bg, $item-positive-border, $item-positive-text);
&.active, &:active {
@include item-active-style($item-positive-active-bg, $item-positive-active-border);
}
}
&.item-calm > .item-content{
@include item-style($item-calm-bg, $item-calm-border, $item-calm-text);
&.active, &:active {
@include item-active-style($item-calm-active-bg, $item-calm-active-border);
}
}
&.item-assertive > .item-content{
@include item-style($item-assertive-bg, $item-assertive-border, $item-assertive-text);
&.active, &:active {
@include item-active-style($item-assertive-active-bg, $item-assertive-active-border);
}
}
&.item-balanced > .item-content{
@include item-style($item-balanced-bg, $item-balanced-border, $item-balanced-text);
&.active, &:active {
@include item-active-style($item-balanced-active-bg, $item-balanced-active-border);
}
}
&.item-energized > .item-content{
@include item-style($item-energized-bg, $item-energized-border, $item-energized-text);
&.active, &:active {
@include item-active-style($item-energized-active-bg, $item-energized-active-border);
}
}
&.item-royal > .item-content{
@include item-style($item-royal-bg, $item-royal-border, $item-royal-text);
&.active, &:active {
@include item-active-style($item-royal-active-bg, $item-royal-active-border);
}
}
&.item-dark > .item-content{
@include item-style($item-dark-bg, $item-dark-border, $item-dark-text);
&.active, &:active {
@include item-active-style($item-dark-active-bg, $item-dark-active-border);
}
}
}
/**
* Item Icons
* --------------------------------------------------
*/
.item-icon-left .icon,
.item-icon-right .icon {
@include display-flex();
@include align-items(center);
position: absolute;
top: 0;
height: 100%;
font-size: $item-icon-font-size;
&:before {
display: block;
width: $item-icon-font-size;
text-align: center;
}
}
.item .fill-icon {
min-width: $item-icon-fill-font-size + 2;
min-height: $item-icon-fill-font-size + 2;
font-size: $item-icon-fill-font-size;
}
.item-icon-left {
padding-left: ceil( ($item-padding * 3) + ($item-padding / 3) );
.icon {
left: ceil( ($item-padding / 3) * 2);
}
}
.item-complex.item-icon-left {
padding-left: 0;
.item-content {
padding-left: ceil( ($item-padding * 3) + ($item-padding / 3) );
}
}
.item-icon-right {
padding-right: ceil( ($item-padding * 3) + ($item-padding / 3) );
.icon {
right: ceil( ($item-padding / 3) * 2);
}
}
.item-complex.item-icon-right {
padding-right: 0;
.item-content {
padding-right: ceil( ($item-padding * 3) + ($item-padding / 3) );
}
}
.item-icon-left.item-icon-right .icon:first-child {
right: auto;
}
.item-icon-left.item-icon-right .icon:last-child,
.item-icon-left .item-delete .icon {
left: auto;
}
.item-icon-left .icon-accessory,
.item-icon-right .icon-accessory {
color: $item-icon-accessory-color;
font-size: $item-icon-accessory-font-size;
}
.item-icon-left .icon-accessory {
left: floor($item-padding / 5);
}
.item-icon-right .icon-accessory {
right: floor($item-padding / 5);
}
/**
* Item Button
* --------------------------------------------------
* An item button is a child button inside an .item (not the entire .item)
*/
.item-button-left {
padding-left: ceil($item-padding * 4.5);
}
.item-button-left > .button,
.item-button-left .item-content > .button {
@include display-flex();
@include align-items(center);
position: absolute;
top: ceil($item-padding / 2);
left: ceil( ($item-padding / 3) * 2);
min-width: $item-icon-font-size + ($button-border-width * 2);
min-height: $item-icon-font-size + ($button-border-width * 2);
font-size: $item-button-font-size;
line-height: $item-button-line-height;
.icon:before {
position: relative;
left: auto;
width: auto;
line-height: $item-icon-font-size - 1;
}
> .button {
margin: 0px 2px;
min-height: $item-icon-font-size + ($button-border-width * 2);
font-size: $item-button-font-size;
line-height: $item-button-line-height;
}
}
.item-button-right,
a.item.item-button-right,
button.item.item-button-right {
padding-right: $item-padding * 5;
}
.item-button-right > .button,
.item-button-right .item-content > .button,
.item-button-right > .buttons,
.item-button-right .item-content > .buttons {
@include display-flex();
@include align-items(center);
position: absolute;
top: ceil($item-padding / 2);
right: $item-padding;
min-width: $item-icon-font-size + ($button-border-width * 2);
min-height: $item-icon-font-size + ($button-border-width * 2);
font-size: $item-button-font-size;
line-height: $item-button-line-height;
.icon:before {
position: relative;
left: auto;
width: auto;
line-height: $item-icon-font-size - 1;
}
> .button {
margin: 0px 2px;
min-width: $item-icon-font-size + ($button-border-width * 2);
min-height: $item-icon-font-size + ($button-border-width * 2);
font-size: $item-button-font-size;
line-height: $item-button-line-height;
}
}
.item-button-left.item-button-right{
.button{
&:first-child {
right: auto;
}
&:last-child {
left: auto;
}
}
}
// Item Avatar
// -------------------------------
.item-avatar,
.item-avatar .item-content,
.item-avatar-left,
.item-avatar-left .item-content {
padding-left: $item-avatar-width + ($item-padding * 2);
min-height: $item-avatar-width + ($item-padding * 2);
> img:first-child,
.item-image {
position: absolute;
top: $item-padding;
left: $item-padding;
max-width: $item-avatar-width;
max-height: $item-avatar-height;
width: 100%;
height: 100%;
border-radius: $item-avatar-border-radius;
}
}
.item-avatar-right,
.item-avatar-right .item-content {
padding-right: $item-avatar-width + ($item-padding * 2);
min-height: $item-avatar-width + ($item-padding * 2);
> img:first-child,
.item-image {
position: absolute;
top: $item-padding;
right: $item-padding;
max-width: $item-avatar-width;
max-height: $item-avatar-height;
width: 100%;
height: 100%;
border-radius: $item-avatar-border-radius;
}
}
// Item Thumbnails
// -------------------------------
.item-thumbnail-left,
.item-thumbnail-left .item-content {
padding-top: $item-padding / 2;
padding-left: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
> img:first-child,
.item-image {
position: absolute;
top: $item-thumbnail-margin;
left: $item-thumbnail-margin;
max-width: $item-thumbnail-width;
max-height: $item-thumbnail-height;
width: 100%;
height: 100%;
}
}
.item-avatar.item-complex,
.item-avatar-left.item-complex,
.item-thumbnail-left.item-complex {
padding-top: 0;
padding-left: 0;
}
.item-thumbnail-right,
.item-thumbnail-right .item-content {
padding-top: $item-padding / 2;
padding-right: $item-thumbnail-width + $item-thumbnail-margin + $item-padding;
min-height: $item-thumbnail-height + ($item-thumbnail-margin * 2);
> img:first-child,
.item-image {
position: absolute;
top: $item-thumbnail-margin;
right: $item-thumbnail-margin;
max-width: $item-thumbnail-width;
max-height: $item-thumbnail-height;
width: 100%;
height: 100%;
}
}
.item-avatar-right.item-complex,
.item-thumbnail-right.item-complex {
padding-top: 0;
padding-right: 0;
}
// Item Image
// -------------------------------
.item-image {
padding: 0;
text-align: center;
img:first-child, .list-img {
width: 100%;
vertical-align: middle;
}
}
// Item Body
// -------------------------------
.item-body {
overflow: auto;
padding: $item-padding;
text-overflow: inherit;
white-space: normal;
h1, h2, h3, h4, h5, h6, p {
margin-top: $item-padding;
margin-bottom: $item-padding;
}
}
// Item Divider
// -------------------------------
.item-divider {
padding-top: ceil($item-padding / 2);
padding-bottom: ceil($item-padding / 2);
min-height: 30px;
background-color: $item-divider-bg;
color: $item-divider-color;
font-weight: 500;
}
.platform-ios .item-divider-platform,
.item-divider-ios {
padding-top: 26px;
text-transform: uppercase;
font-weight: 300;
font-size: 13px;
background-color: #efeff4;
color: #555;
}
.platform-android .item-divider-platform,
.item-divider-android {
font-weight: 300;
font-size: 13px;
}
// Item Note
// -------------------------------
.item-note {
float: right;
color: #aaa;
font-size: 14px;
}
// Item Editing
// -------------------------------
.item-left-editable .item-content,
.item-right-editable .item-content {
// setup standard transition settings
@include transition-duration( $item-edit-transition-duration );
@include transition-timing-function( $item-edit-transition-function );
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
transition-property: transform;
}
.list-left-editing .item-left-editable .item-content,
.item-left-editing.item-left-editable .item-content {
// actively editing the left side of the item
@include translate3d($item-left-edit-open-width, 0, 0);
}
.item-remove-animate {
&.ng-leave {
@include transition-duration( $item-remove-transition-duration );
}
&.ng-leave .item-content,
&.ng-leave:last-of-type {
@include transition-duration( $item-remove-transition-duration );
@include transition-timing-function( $item-remove-transition-function );
@include transition-property( all );
}
&.ng-leave.ng-leave-active .item-content {
opacity:0;
-webkit-transform: translate3d(-100%, 0, 0) !important;
transform: translate3d(-100%, 0, 0) !important;
}
&.ng-leave.ng-leave-active:last-of-type {
opacity: 0;
}
&.ng-leave.ng-leave-active ~ ion-item:not(.ng-leave) {
-webkit-transform: translate3d(0, unquote('-webkit-calc(-100% + 1px)'), 0);
transform: translate3d(0, calc(-100% + 1px), 0);
@include transition-duration( $item-remove-transition-duration );
@include transition-timing-function( $item-remove-descendents-transition-function );
@include transition-property( all );
}
}
// Item Left Edit Button
// -------------------------------
.item-left-edit {
@include transition(all $item-edit-transition-function $item-edit-transition-duration / 2);
position: absolute;
top: 0;
left: 0;
z-index: $z-index-item-edit;
width: $item-left-edit-open-width;
height: 100%;
line-height: 100%;
.button {
height: 100%;
&.icon {
@include display-flex();
@include align-items(center);
position: absolute;
top: 0;
height: 100%;
}
}
display: none;
opacity: 0;
@include translate3d( ($item-left-edit-left - $item-left-edit-open-width) / 2, 0, 0);
&.visible {
display: block;
&.active {
opacity: 1;
@include translate3d($item-left-edit-left, 0, 0);
}
}
}
.list-left-editing .item-left-edit {
@include transition-delay($item-edit-transition-duration / 2);
}
// Item Delete (Left side edit button)
// -------------------------------
.item-delete .button.icon {
color: $item-delete-icon-color;
font-size: $item-delete-icon-size;
&:hover {
opacity: .7;
}
}
// Item Right Edit Button
// -------------------------------
.item-right-edit {
@include transition(all $item-edit-transition-function $item-edit-transition-duration);
position: absolute;
top: 0;
right: 0;
z-index: $z-index-item-reorder;
width: $item-right-edit-open-width * 1.5;
height: 100%;
background: inherit;
padding-left: 20px;
.button {
min-width: $item-right-edit-open-width;
height: 100%;
&.icon {
@include display-flex();
@include align-items(center);
position: absolute;
top: 0;
height: 100%;
font-size: $item-reorder-icon-size;
}
}
display: block;
opacity: 0;
@include translate3d($item-right-edit-open-width * 1.5, 0, 0);
&.visible {
display: block;
&.active {
opacity: 1;
@include translate3d(0, 0, 0);
}
}
}
// Item Reordering (Right side edit button)
// -------------------------------
.item-reorder .button.icon {
color: $item-reorder-icon-color;
font-size: $item-reorder-icon-size;
}
.item-reordering {
// item is actively being reordered
position: absolute;
left: 0;
top: 0;
z-index: $z-index-item-reordering;
width: 100%;
box-shadow: 0px 0px 10px 0px #aaa;
.item-reorder {
z-index: $z-index-item-reordering;
}
}
.item-placeholder {
// placeholder for the item that's being reordered
opacity: 0.7;
}
/**
* 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: $z-index-item-options;
height: 100%;
.button {
height: 100%;
border: none;
border-radius: 0;
@include display-inline-flex();
@include align-items(center);
&:before{
margin: 0 auto;
}
}
}

View File

@@ -0,0 +1,125 @@
/**
* Lists
* --------------------------------------------------
*/
.list {
position: relative;
padding-top: $item-border-width;
padding-bottom: $item-border-width;
padding-left: 0; // reset padding because ul and ol
margin-bottom: 20px;
}
.list:last-child {
margin-bottom: 0px;
&.card{
margin-bottom:40px;
}
}
/**
* List Header
* --------------------------------------------------
*/
.list-header {
margin-top: $list-header-margin-top;
padding: $list-header-padding;
background-color: $list-header-bg;
color: $list-header-color;
font-weight: bold;
}
// when its a card make sure it doesn't duplicate top and bottom borders
.card.list .list-item {
padding-right: 1px;
padding-left: 1px;
}
/**
* Cards and Inset Lists
* --------------------------------------------------
* A card and list-inset are close to the same thing, except a card as a box shadow.
*/
.card,
.list-inset {
overflow: hidden;
margin: ($content-padding * 2) $content-padding;
border-radius: $card-border-radius;
background-color: $card-body-bg;
}
.card {
padding-top: $item-border-width;
padding-bottom: $item-border-width;
box-shadow: $card-box-shadow;
.item {
border-left: 0;
border-right: 0;
}
.item:first-child {
border-top: 0;
}
.item:last-child {
border-bottom: 0;
}
}
.padding {
.card, .list-inset {
margin-left: 0;
margin-right: 0;
}
}
.card .item,
.list-inset .item,
.padding > .list .item
{
&:first-child {
border-top-left-radius: $card-border-radius;
border-top-right-radius: $card-border-radius;
.item-content {
border-top-left-radius: $card-border-radius;
border-top-right-radius: $card-border-radius;
}
}
&:last-child {
border-bottom-right-radius: $card-border-radius;
border-bottom-left-radius: $card-border-radius;
.item-content {
border-bottom-right-radius: $card-border-radius;
border-bottom-left-radius: $card-border-radius;
}
}
}
.card .item:last-child,
.list-inset .item:last-child {
margin-bottom: $item-border-width * -1;
}
.card .item,
.list-inset .item,
.padding > .list .item,
.padding-horizontal > .list .item {
margin-right: 0;
margin-left: 0;
&.item-input input {
padding-right: 44px;
}
}
.padding-left > .list .item {
margin-left: 0;
}
.padding-right > .list .item {
margin-right: 0;
}

View File

@@ -0,0 +1,51 @@
/**
* Loading
* --------------------------------------------------
*/
.loading-container {
position: absolute;
left: 0;
top: 0;
right: 0;
bottom: 0;
z-index: $z-index-loading;
@include display-flex();
@include justify-content(center);
@include align-items(center);
@include transition(0.2s opacity linear);
visibility: hidden;
opacity: 0;
&:not(.visible) .icon,
&:not(.visible) .spinner{
display: none;
}
&.visible {
visibility: visible;
}
&.active {
opacity: 1;
}
.loading {
padding: $loading-padding;
border-radius: $loading-border-radius;
background-color: $loading-bg-color;
color: $loading-text-color;
text-align: center;
text-overflow: ellipsis;
font-size: $loading-font-size;
h1, h2, h3, h4, h5, h6 {
color: $loading-text-color;
}
}
}

View File

@@ -0,0 +1,70 @@
/**
* Menus
* --------------------------------------------------
* Side panel structure
*/
.menu {
position: absolute;
top: 0;
bottom: 0;
z-index: $z-index-menu;
overflow: hidden;
min-height: 100%;
max-height: 100%;
width: $menu-width;
background-color: $menu-bg;
.scroll-content {
z-index: $z-index-menu-scroll-content;
}
.bar-header {
z-index: $z-index-menu-bar-header;
}
}
.menu-content {
@include transform(none);
box-shadow: $menu-side-shadow;
}
.menu-open .menu-content .pane,
.menu-open .menu-content .scroll-content {
pointer-events: none;
}
.menu-open .menu-content .scroll-content .scroll {
pointer-events: none;
}
.menu-open .menu-content .scroll-content:not(.overflow-scroll) {
overflow: hidden;
}
.grade-b .menu-content,
.grade-c .menu-content {
@include box-sizing(content-box);
right: -1px;
left: -1px;
border-right: 1px solid #ccc;
border-left: 1px solid #ccc;
box-shadow: none;
}
.menu-left {
left: 0;
}
.menu-right {
right: 0;
}
.aside-open.aside-resizing .menu-right {
display: none;
}
.menu-animated {
@include transition-transform($menu-animation-speed ease);
}

View File

@@ -0,0 +1,642 @@
// Button Mixins
// --------------------------------------------------
@mixin button-style($bg-color, $border-color, $active-bg-color, $active-border-color, $color) {
border-color: $border-color;
background-color: $bg-color;
color: $color;
// Give desktop users something to play with
&:hover {
color: $color;
text-decoration: none;
}
&.active,
&.activated {
@if $active-border-color != ""{
border-color: $active-border-color;
}
background-color: $active-bg-color;
//box-shadow: inset 0 1px 4px rgba(0,0,0,0.1);
}
}
@mixin button-clear($color, $font-size:"") {
&.button-clear {
border-color: transparent;
background: none;
box-shadow: none;
color: $color;
@if $font-size != "" {
font-size: $font-size;
}
}
&.button-icon {
border-color: transparent;
background: none;
}
}
@mixin button-outline($color, $text-color:"") {
&.button-outline {
border-color: $color;
background: transparent;
@if $text-color == "" {
$text-color: $color;
}
color: $text-color;
&.active,
&.activated {
background-color: $color;
box-shadow: none;
color: #fff;
}
}
}
// Bar Mixins
// --------------------------------------------------
@mixin bar-style($bg-color, $border-color, $color) {
border-color: $border-color;
background-color: $bg-color;
background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
color: $color;
.title {
color: $color;
}
}
// Tab Mixins
// --------------------------------------------------
@mixin tab-style($bg-color, $border-color, $color) {
border-color: $border-color;
background-color: $bg-color;
background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
color: $color;
}
@mixin tab-badge-style($bg-color, $color) {
.tab-item .badge {
background-color: $bg-color;
color: $color;
}
}
// Item Mixins
// --------------------------------------------------
@mixin item-style($bg-color, $border-color, $color) {
border-color: $border-color;
background-color: $bg-color;
color: $color;
}
@mixin item-active-style($active-bg-color, $active-border-color) {
border-color: $active-border-color;
background-color: $active-bg-color;
&.item-complex > .item-content {
border-color: $active-border-color;
background-color: $active-bg-color;
}
}
// Badge Mixins
// --------------------------------------------------
@mixin badge-style($bg-color, $color) {
background-color: $bg-color;
color: $color;
}
// Range Mixins
// --------------------------------------------------
@mixin range-style($track-bg-color) {
&::-webkit-slider-thumb:before {
background: $track-bg-color;
}
&::-ms-fill-lower{
background: $track-bg-color;
}
}
// Checkbox Mixins
// --------------------------------------------------
@mixin checkbox-style($off-border-color, $on-bg-color, $on-border-color) {
& input:before,
& .checkbox-icon:before {
border-color: $off-border-color;
}
// what the background looks like when its checked
& input:checked:before,
& input:checked + .checkbox-icon:before {
background: $on-bg-color;
border-color: $on-border-color;
}
}
// Toggle Mixins
// --------------------------------------------------
@mixin toggle-style($on-border-color, $on-bg-color) {
// the track when the toggle is "on"
& input:checked + .track {
border-color: $on-border-color;
background-color: $on-bg-color;
}
}
@mixin toggle-small-style($on-bg-color) {
// the track when the toggle is "on"
& input:checked + .track {
background-color: rgba($on-bg-color, .5);
}
& input:checked + .track .handle {
background-color: $on-bg-color;
}
}
// Clearfix
// --------------------------------------------------
@mixin clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
line-height: 0;
}
&:after {
clear: both;
}
}
// Placeholder text
// --------------------------------------------------
@mixin placeholder($color: $input-color-placeholder, $text-indent: 0) {
&::-moz-placeholder { // Firefox 19+
color: $color;
}
&:-ms-input-placeholder {
color: $color;
}
&::-webkit-input-placeholder {
color: $color;
// Safari placeholder margin issue
text-indent: $text-indent;
}
}
// Text Mixins
// --------------------------------------------------
@mixin text-size-adjust($value: none) {
-webkit-text-size-adjust: $value;
-moz-text-size-adjust: $value;
text-size-adjust: $value;
}
@mixin tap-highlight-transparent() {
-webkit-tap-highlight-color: rgba(0,0,0,0);
-webkit-tap-highlight-color: transparent; // For some Androids
}
@mixin touch-callout($value: none) {
-webkit-touch-callout: $value;
}
// Font Mixins
// --------------------------------------------------
@mixin font-family-serif() {
font-family: $serif-font-family;
}
@mixin font-family-sans-serif() {
font-family: $sans-font-family;
}
@mixin font-family-monospace() {
font-family: $mono-font-family;
}
@mixin font-shorthand($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
font-weight: $weight;
font-size: $size;
line-height: $line-height;
}
@mixin font-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
@include font-family-serif();
@include font-shorthand($size, $weight, $line-height);
}
@mixin font-sans-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
@include font-family-sans-serif();
@include font-shorthand($size, $weight, $line-height);
}
@mixin font-monospace($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
@include font-family-monospace();
@include font-shorthand($size, $weight, $line-height);
}
@mixin font-smoothing($font-smoothing) {
-webkit-font-smoothing: $font-smoothing;
font-smoothing: $font-smoothing;
}
// Appearance
// --------------------------------------------------
@mixin appearance($val) {
-webkit-appearance: $val;
-moz-appearance: $val;
appearance: $val;
}
// Border Radius Mixins
// --------------------------------------------------
@mixin border-radius($radius) {
-webkit-border-radius: $radius;
border-radius: $radius;
}
// Single Corner Border Radius
@mixin border-top-left-radius($radius) {
-webkit-border-top-left-radius: $radius;
border-top-left-radius: $radius;
}
@mixin border-top-right-radius($radius) {
-webkit-border-top-right-radius: $radius;
border-top-right-radius: $radius;
}
@mixin border-bottom-right-radius($radius) {
-webkit-border-bottom-right-radius: $radius;
border-bottom-right-radius: $radius;
}
@mixin border-bottom-left-radius($radius) {
-webkit-border-bottom-left-radius: $radius;
border-bottom-left-radius: $radius;
}
// Single Side Border Radius
@mixin border-top-radius($radius) {
@include border-top-right-radius($radius);
@include border-top-left-radius($radius);
}
@mixin border-right-radius($radius) {
@include border-top-right-radius($radius);
@include border-bottom-right-radius($radius);
}
@mixin border-bottom-radius($radius) {
@include border-bottom-right-radius($radius);
@include border-bottom-left-radius($radius);
}
@mixin border-left-radius($radius) {
@include border-top-left-radius($radius);
@include border-bottom-left-radius($radius);
}
// Box shadows
// --------------------------------------------------
@mixin box-shadow($shadow...) {
-webkit-box-shadow: $shadow;
box-shadow: $shadow;
}
// Transition Mixins
// --------------------------------------------------
@mixin transition($transition...) {
-webkit-transition: $transition;
transition: $transition;
}
@mixin transition-delay($transition-delay) {
-webkit-transition-delay: $transition-delay;
transition-delay: $transition-delay;
}
@mixin transition-duration($transition-duration) {
-webkit-transition-duration: $transition-duration;
transition-duration: $transition-duration;
}
@mixin transition-timing-function($transition-timing) {
-webkit-transition-timing-function: $transition-timing;
transition-timing-function: $transition-timing;
}
@mixin transition-property($property) {
-webkit-transition-property: $property;
transition-property: $property;
}
@mixin transition-transform($properties...) {
// special case cuz of transform vendor prefixes
-webkit-transition: -webkit-transform $properties;
transition: transform $properties;
}
// Animation Mixins
// --------------------------------------------------
@mixin animation($animation) {
-webkit-animation: $animation;
animation: $animation;
}
@mixin animation-duration($duration) {
-webkit-animation-duration: $duration;
animation-duration: $duration;
}
@mixin animation-direction($direction) {
-webkit-animation-direction: $direction;
animation-direction: $direction;
}
@mixin animation-timing-function($animation-timing) {
-webkit-animation-timing-function: $animation-timing;
animation-timing-function: $animation-timing;
}
@mixin animation-fill-mode($fill-mode) {
-webkit-animation-fill-mode: $fill-mode;
animation-fill-mode: $fill-mode;
}
@mixin animation-name($name...) {
-webkit-animation-name: $name;
animation-name: $name;
}
@mixin animation-iteration-count($count) {
-webkit-animation-iteration-count: $count;
animation-iteration-count: $count;
}
// Transformation Mixins
// --------------------------------------------------
@mixin rotate($degrees) {
@include transform( rotate($degrees) );
}
@mixin scale($ratio) {
@include transform( scale($ratio) );
}
@mixin translate($x, $y) {
@include transform( translate($x, $y) );
}
@mixin skew($x, $y) {
@include transform( skew($x, $y) );
-webkit-backface-visibility: hidden;
}
@mixin translate3d($x, $y, $z) {
@include transform( translate3d($x, $y, $z) );
}
@mixin translateZ($z) {
@include transform( translateZ($z) );
}
@mixin transform($val) {
-webkit-transform: $val;
transform: $val;
}
@mixin transform-origin($left, $top) {
-webkit-transform-origin: $left $top;
transform-origin: $left $top;
}
// Backface visibility
// --------------------------------------------------
// Prevent browsers from flickering when using CSS 3D transforms.
// Default value is `visible`, but can be changed to `hidden
@mixin backface-visibility($visibility){
-webkit-backface-visibility: $visibility;
backface-visibility: $visibility;
}
// Background clipping
// --------------------------------------------------
@mixin background-clip($clip) {
-webkit-background-clip: $clip;
background-clip: $clip;
}
// Background sizing
// --------------------------------------------------
@mixin background-size($size) {
-webkit-background-size: $size;
background-size: $size;
}
// Box sizing
// --------------------------------------------------
@mixin box-sizing($boxmodel) {
-webkit-box-sizing: $boxmodel;
-moz-box-sizing: $boxmodel;
box-sizing: $boxmodel;
}
// User select
// --------------------------------------------------
@mixin user-select($select) {
-webkit-user-select: $select;
-moz-user-select: $select;
-ms-user-select: $select;
user-select: $select;
}
// Content Columns
// --------------------------------------------------
@mixin content-columns($columnCount, $columnGap: $grid-gutter-width) {
-webkit-column-count: $columnCount;
-moz-column-count: $columnCount;
column-count: $columnCount;
-webkit-column-gap: $columnGap;
-moz-column-gap: $columnGap;
column-gap: $columnGap;
}
// Flexbox Mixins
// --------------------------------------------------
// http://philipwalton.github.io/solved-by-flexbox/
// https://github.com/philipwalton/solved-by-flexbox
@mixin display-flex {
display: -webkit-box;
display: -webkit-flex;
display: -moz-box;
display: -moz-flex;
display: -ms-flexbox;
display: flex;
}
@mixin display-inline-flex {
display: -webkit-inline-box;
display: -webkit-inline-flex;
display: -moz-inline-flex;
display: -ms-inline-flexbox;
display: inline-flex;
}
@mixin flex-direction($value: row) {
@if $value == row-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: horizontal;
} @else if $value == column {
-webkit-box-direction: normal;
-webkit-box-orient: vertical;
} @else if $value == column-reverse {
-webkit-box-direction: reverse;
-webkit-box-orient: vertical;
} @else {
-webkit-box-direction: normal;
-webkit-box-orient: horizontal;
}
-webkit-flex-direction: $value;
-moz-flex-direction: $value;
-ms-flex-direction: $value;
flex-direction: $value;
}
@mixin flex-wrap($value: nowrap) {
// No Webkit Box fallback.
-webkit-flex-wrap: $value;
-moz-flex-wrap: $value;
@if $value == nowrap {
-ms-flex-wrap: none;
} @else {
-ms-flex-wrap: $value;
}
flex-wrap: $value;
}
@mixin flex($fg: 1, $fs: null, $fb: null) {
-webkit-box-flex: $fg;
-webkit-flex: $fg $fs $fb;
-moz-box-flex: $fg;
-moz-flex: $fg $fs $fb;
-ms-flex: $fg $fs $fb;
flex: $fg $fs $fb;
}
@mixin flex-flow($values: (row nowrap)) {
// No Webkit Box fallback.
-webkit-flex-flow: $values;
-moz-flex-flow: $values;
-ms-flex-flow: $values;
flex-flow: $values;
}
@mixin align-items($value: stretch) {
@if $value == flex-start {
-webkit-box-align: start;
-ms-flex-align: start;
} @else if $value == flex-end {
-webkit-box-align: end;
-ms-flex-align: end;
} @else {
-webkit-box-align: $value;
-ms-flex-align: $value;
}
-webkit-align-items: $value;
-moz-align-items: $value;
align-items: $value;
}
@mixin align-self($value: auto) {
-webkit-align-self: $value;
-moz-align-self: $value;
@if $value == flex-start {
-ms-flex-item-align: start;
} @else if $value == flex-end {
-ms-flex-item-align: end;
} @else {
-ms-flex-item-align: $value;
}
align-self: $value;
}
@mixin align-content($value: stretch) {
-webkit-align-content: $value;
-moz-align-content: $value;
@if $value == flex-start {
-ms-flex-line-pack: start;
} @else if $value == flex-end {
-ms-flex-line-pack: end;
} @else {
-ms-flex-line-pack: $value;
}
align-content: $value;
}
@mixin justify-content($value: stretch) {
@if $value == flex-start {
-webkit-box-pack: start;
-ms-flex-pack: start;
} @else if $value == flex-end {
-webkit-box-pack: end;
-ms-flex-pack: end;
} @else if $value == space-between {
-webkit-box-pack: justify;
-ms-flex-pack: justify;
} @else {
-webkit-box-pack: $value;
-ms-flex-pack: $value;
}
-webkit-justify-content: $value;
-moz-justify-content: $value;
justify-content: $value;
}
@mixin flex-order($n) {
-webkit-order: $n;
-ms-flex-order: $n;
order: $n;
-webkit-box-ordinal-group: $n;
}
@mixin responsive-grid-break($selector, $max-width) {
@media (max-width: $max-width) {
#{$selector} {
-webkit-box-direction: normal;
-moz-box-direction: normal;
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
.col, .col-10, .col-20, .col-25, .col-33, .col-34, .col-50, .col-66, .col-67, .col-75, .col-80, .col-90 {
@include flex(1);
margin-bottom: ($grid-padding-width * 3) / 2;
margin-left: 0;
max-width: 100%;
width: 100%;
}
}
}
}

View File

@@ -0,0 +1,102 @@
/**
* Modals
* --------------------------------------------------
* Modals are independent windows that slide in from off-screen.
*/
.modal-backdrop,
.modal-backdrop-bg {
position: fixed;
top: 0;
left: 0;
z-index: $z-index-modal;
width: 100%;
height: 100%;
}
.modal-backdrop-bg {
pointer-events: none;
}
.modal {
display: block;
position: absolute;
top: 0;
z-index: $z-index-modal;
overflow: hidden;
min-height: 100%;
width: 100%;
background-color: $modal-bg-color;
}
@media (min-width: $modal-inset-mode-break-point) {
// inset mode is when the modal doesn't fill the entire
// display but instead is centered within a large display
.modal {
top: $modal-inset-mode-top;
right: $modal-inset-mode-right;
bottom: $modal-inset-mode-bottom;
left: $modal-inset-mode-left;
min-height: $modal-inset-mode-min-height;
width: (100% - $modal-inset-mode-left - $modal-inset-mode-right);
}
.modal.ng-leave-active {
bottom: 0;
}
// remove ios header padding from inset header
.platform-ios.platform-cordova .modal-wrapper .modal {
.bar-header:not(.bar-subheader) {
height: $bar-height;
> * {
margin-top: 0;
}
}
.tabs-top > .tabs,
.tabs.tabs-top {
top: $bar-height;
}
.has-header,
.bar-subheader {
top: $bar-height;
}
.has-subheader {
top: $bar-height + $bar-subheader-height;
}
.has-header.has-tabs-top {
top: $bar-height + $tabs-height;
}
.has-header.has-subheader.has-tabs-top {
top: $bar-height + $bar-subheader-height + $tabs-height;
}
}
.modal-backdrop-bg {
@include transition(opacity 300ms ease-in-out);
background-color: $modal-backdrop-bg-active;
opacity: 0;
}
.active .modal-backdrop-bg {
opacity: 0.5;
}
}
// disable clicks on all but the modal
.modal-open {
pointer-events: none;
.modal,
.modal-backdrop {
pointer-events: auto;
}
// prevent clicks on modal when loading overlay is active though
&.loading-active {
.modal,
.modal-backdrop {
pointer-events: none;
}
}
}

View File

@@ -0,0 +1,77 @@
/**
* Platform
* --------------------------------------------------
* Platform specific tweaks
*/
.platform-ios.platform-cordova {
// iOS has a status bar which sits on top of the header.
// Bump down everything to make room for it. However, if
// if its in Cordova, and set to fullscreen, then disregard the bump.
&:not(.fullscreen) {
.bar-header:not(.bar-subheader) {
height: $bar-height + $ios-statusbar-height;
&.item-input-inset .item-input-wrapper {
margin-top: 19px !important;
}
> * {
margin-top: $ios-statusbar-height;
}
}
.tabs-top > .tabs,
.tabs.tabs-top {
top: $bar-height + $ios-statusbar-height;
}
.has-header,
.bar-subheader {
top: $bar-height + $ios-statusbar-height;
}
.has-subheader {
top: $bar-height + $bar-subheader-height + $ios-statusbar-height;
}
.has-header.has-tabs-top {
top: $bar-height + $tabs-height + $ios-statusbar-height;
}
.has-header.has-subheader.has-tabs-top {
top: $bar-height + $bar-subheader-height + $tabs-height + $ios-statusbar-height;
}
}
.popover{
.bar-header:not(.bar-subheader) {
height: $bar-height;
&.item-input-inset .item-input-wrapper {
margin-top: -1px;
}
> * {
margin-top: 0;
}
}
.has-header,
.bar-subheader {
top: $bar-height;
}
.has-subheader {
top: $bar-height + $bar-subheader-height;
}
}
&.status-bar-hide {
// Cordova doesn't adjust the body height correctly, this makes up for it
margin-bottom: 20px;
}
}
@media (orientation:landscape) {
.platform-ios.platform-browser.platform-ipad {
position: fixed; // required for iPad 7 Safari
}
}
.platform-c:not(.enable-transitions) * {
// disable transitions on grade-c devices (Android 2)
-webkit-transition: none !important;
transition: none !important;
}

View File

@@ -0,0 +1,168 @@
/**
* Popovers
* --------------------------------------------------
* Popovers are independent views which float over content
*/
.popover-backdrop {
position: fixed;
top: 0;
left: 0;
z-index: $z-index-popover;
width: 100%;
height: 100%;
background-color: $popover-backdrop-bg-inactive;
&.active {
background-color: $popover-backdrop-bg-active;
}
}
.popover {
position: absolute;
top: 25%;
left: 50%;
z-index: $z-index-popover;
display: block;
margin-top: 12px;
margin-left: -$popover-width / 2;
height: $popover-height;
width: $popover-width;
background-color: $popover-bg-color;
box-shadow: $popover-box-shadow;
opacity: 0;
.item:first-child {
border-top: 0;
}
.item:last-child {
border-bottom: 0;
}
&.popover-bottom {
margin-top: -12px;
}
}
// Set popover border-radius
.popover,
.popover .bar-header {
border-radius: $popover-border-radius;
}
.popover .scroll-content {
z-index: 1;
margin: 2px 0;
}
.popover .bar-header {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.popover .has-header {
border-top-right-radius: 0;
border-top-left-radius: 0;
}
.popover-arrow {
display: none;
}
// iOS Popover
.platform-ios {
.popover {
box-shadow: $popover-box-shadow-ios;
border-radius: $popover-border-radius-ios;
}
.popover .bar-header {
@include border-top-radius($popover-border-radius-ios);
}
.popover .scroll-content {
margin: 8px 0;
border-radius: $popover-border-radius-ios;
}
.popover .scroll-content.has-header {
margin-top: 0;
}
.popover-arrow {
position: absolute;
display: block;
top: -17px;
width: 30px;
height: 19px;
overflow: hidden;
&:after {
position: absolute;
top: 12px;
left: 5px;
width: 20px;
height: 20px;
background-color: $popover-bg-color;
border-radius: 3px;
content: '';
@include rotate(-45deg);
}
}
.popover-bottom .popover-arrow {
top: auto;
bottom: -10px;
&:after {
top: -6px;
}
}
}
// Android Popover
.platform-android {
.popover {
margin-top: -32px;
background-color: $popover-bg-color-android;
box-shadow: $popover-box-shadow-android;
.item {
border-color: $popover-bg-color-android;
background-color: $popover-bg-color-android;
color: #4d4d4d;
}
&.popover-bottom {
margin-top: 32px;
}
}
.popover-backdrop,
.popover-backdrop.active {
background-color: transparent;
}
}
// disable clicks on all but the popover
.popover-open {
pointer-events: none;
.popover,
.popover-backdrop {
pointer-events: auto;
}
// prevent clicks on popover when loading overlay is active though
&.loading-active {
.popover,
.popover-backdrop {
pointer-events: none;
}
}
}
// wider popover on larger viewports
@media (min-width: $popover-large-break-point) {
.popover {
width: $popover-large-width;
margin-left: -$popover-large-width / 2;
}
}

View File

@@ -0,0 +1,110 @@
/**
* Popups
* --------------------------------------------------
*/
.popup-container {
position: absolute;
top: 0;
left: 0;
bottom: 0;
right: 0;
background: rgba(0,0,0,0);
@include display-flex();
@include justify-content(center);
@include align-items(center);
z-index: $z-index-popup;
// Start hidden
visibility: hidden;
&.popup-showing {
visibility: visible;
}
&.popup-hidden .popup {
@include animation-name(scaleOut);
@include animation-duration($popup-leave-animation-duration);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
}
&.active .popup {
@include animation-name(superScaleIn);
@include animation-duration($popup-enter-animation-duration);
@include animation-timing-function(ease-in-out);
@include animation-fill-mode(both);
}
.popup {
width: $popup-width;
max-width: 100%;
max-height: 90%;
border-radius: $popup-border-radius;
background-color: $popup-background-color;
@include display-flex();
@include flex-direction(column);
}
input,
textarea {
width: 100%;
}
}
.popup-head {
padding: 15px 10px;
border-bottom: 1px solid #eee;
text-align: center;
}
.popup-title {
margin: 0;
padding: 0;
font-size: 15px;
}
.popup-sub-title {
margin: 5px 0 0 0;
padding: 0;
font-weight: normal;
font-size: 11px;
}
.popup-body {
padding: 10px;
overflow: auto;
}
.popup-buttons {
@include display-flex();
@include flex-direction(row);
padding: 10px;
min-height: $popup-button-min-height + 20;
.button {
@include flex(1);
display: block;
min-height: $popup-button-min-height;
border-radius: $popup-button-border-radius;
line-height: $popup-button-line-height;
margin-right: 5px;
&:last-child {
margin-right: 0px;
}
}
}
.popup-open {
pointer-events: none;
&.modal-open .modal {
pointer-events: none;
}
.popup-backdrop, .popup {
pointer-events: auto;
}
}

View File

@@ -0,0 +1,11 @@
/**
* Progress
* --------------------------------------------------
*/
progress {
display: block;
margin: $progress-margin;
width: $progress-width;
}

View File

@@ -0,0 +1,47 @@
/**
* Radio Button Inputs
* --------------------------------------------------
*/
.item-radio {
padding: 0;
&:hover {
cursor: pointer;
}
}
.item-radio .item-content {
/* give some room to the right for the checkmark icon */
padding-right: $item-padding * 4;
}
.item-radio .radio-icon {
/* checkmark icon will be hidden by default */
position: absolute;
top: 0;
right: 0;
z-index: $z-index-item-radio;
visibility: hidden;
padding: $item-padding - 2;
height: 100%;
font-size: 24px;
}
.item-radio input {
/* hide any radio button inputs elements (the ugly circles) */
position: absolute;
left: -9999px;
&:checked + .radio-content .item-content {
/* style the item content when its checked */
background: #f7f7f7;
}
&:checked + .radio-content .radio-icon {
/* show the checkmark icon when its checked */
visibility: visible;
}
}

View File

@@ -0,0 +1,160 @@
/**
* Range
* --------------------------------------------------
*/
.range input{
display: inline-block;
overflow: hidden;
margin-top: 5px;
margin-bottom: 5px;
padding-right: 2px;
padding-left: 1px;
width: auto;
height: $range-slider-height + 15;
outline: none;
background: -webkit-gradient(linear, 50% 0%, 50% 100%, color-stop(0%, $range-default-track-bg), color-stop(100%, $range-default-track-bg));
background: linear-gradient(to right, $range-default-track-bg 0%, $range-default-track-bg 100%);
background-position: center;
background-size: 99% $range-track-height;
background-repeat: no-repeat;
-webkit-appearance: none;
&::-moz-focus-outer {
/* hide the focus outline in Firefox */
border: 0;
}
&::-webkit-slider-thumb {
position: relative;
width: $range-slider-width;
height: $range-slider-height;
border-radius: $range-slider-border-radius;
background-color: $toggle-handle-off-bg-color;
box-shadow: $range-slider-box-shadow;
cursor: pointer;
-webkit-appearance: none;
border: 0;
}
&::-webkit-slider-thumb:before{
/* what creates the colorful line on the left side of the slider */
position: absolute;
top: ($range-slider-height / 2) - ($range-track-height / 2);
left: -2001px;
width: 2000px;
height: $range-track-height;
background: $dark;
content: ' ';
}
&::-webkit-slider-thumb:after {
/* create a larger (but hidden) hit area */
position: absolute;
top: -15px;
left: -15px;
padding: 30px;
content: ' ';
//background: red;
//opacity: .5;
}
&::-ms-fill-lower{
height: $range-track-height;
background:$dark;
}
/*
&::-ms-track{
background: transparent;
border-color: transparent;
border-width: 11px 0 16px;
color:transparent;
margin-top:20px;
}
&::-ms-thumb {
width: $range-slider-width;
height: $range-slider-height;
border-radius: $range-slider-border-radius;
background-color: $toggle-handle-off-bg-color;
border-color:$toggle-handle-off-bg-color;
box-shadow: $range-slider-box-shadow;
margin-left:1px;
margin-right:1px;
outline:none;
}
&::-ms-fill-upper {
height: $range-track-height;
background:$range-default-track-bg;
}
*/
}
.range {
@include display-flex();
@include align-items(center);
padding: 2px 11px;
&.range-light {
input { @include range-style($range-light-track-bg); }
}
&.range-stable {
input { @include range-style($range-stable-track-bg); }
}
&.range-positive {
input { @include range-style($range-positive-track-bg); }
}
&.range-calm {
input { @include range-style($range-calm-track-bg); }
}
&.range-balanced {
input { @include range-style($range-balanced-track-bg); }
}
&.range-assertive {
input { @include range-style($range-assertive-track-bg); }
}
&.range-energized {
input { @include range-style($range-energized-track-bg); }
}
&.range-royal {
input { @include range-style($range-royal-track-bg); }
}
&.range-dark {
input { @include range-style($range-dark-track-bg); }
}
}
.range .icon {
@include flex(0);
display: block;
min-width: $range-icon-size;
text-align: center;
font-size: $range-icon-size;
}
.range input {
@include flex(1);
display: block;
margin-right: 10px;
margin-left: 10px;
}
.range-label {
@include flex(0, 0, auto);
display: block;
white-space: nowrap;
}
.range-label:first-child {
padding-left: 5px;
}
.range input + .range-label {
padding-right: 5px;
padding-left: 0;
}
// WP range height must be auto
.platform-windowsphone{
.range input{
height:auto;
}
}

View File

@@ -0,0 +1,113 @@
// Scroll refresher (for pull to refresh)
.scroll-refresher {
position: absolute;
top: -60px;
right: 0;
left: 0;
overflow: hidden;
margin: auto;
height: 60px;
.ionic-refresher-content {
position: absolute;
bottom: 15px;
left: 0;
width: 100%;
color: $scroll-refresh-icon-color;
text-align: center;
font-size: 30px;
.text-refreshing,
.text-pulling {
font-size: 16px;
line-height: 16px;
}
&.ionic-refresher-with-text {
bottom: 10px;
}
}
.icon-refreshing,
.icon-pulling {
width: 100%;
-webkit-backface-visibility: hidden;
backface-visibility: hidden;
-webkit-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.icon-pulling {
@include animation-name(refresh-spin-back);
@include animation-duration(200ms);
@include animation-timing-function(linear);
@include animation-fill-mode(none);
-webkit-transform: translate3d(0,0,0) rotate(0deg);
transform: translate3d(0,0,0) rotate(0deg);
}
.icon-refreshing,
.text-refreshing {
display: none;
}
.icon-refreshing {
@include animation-duration(1.5s);
}
&.active {
.icon-pulling:not(.pulling-rotation-disabled) {
@include animation-name(refresh-spin);
-webkit-transform: translate3d(0,0,0) rotate(-180deg);
transform: translate3d(0,0,0) rotate(-180deg);
}
&.refreshing {
@include transition(-webkit-transform .2s);
@include transition(transform .2s);
-webkit-transform: scale(1,1);
transform: scale(1,1);
.icon-pulling,
.text-pulling {
display: none;
}
.icon-refreshing,
.text-refreshing {
display: block;
}
&.refreshing-tail {
-webkit-transform: scale(0,0);
transform: scale(0,0);
}
}
}
}
.overflow-scroll > .scroll{
&.overscroll{
position:fixed;
right: 0;
left: 0;
}
-webkit-overflow-scrolling:touch;
width:100%;
}
.overflow-scroll.padding > .scroll.overscroll{
padding: 10px;
}
@-webkit-keyframes refresh-spin {
0% { -webkit-transform: translate3d(0,0,0) rotate(0); }
100% { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
}
@keyframes refresh-spin {
0% { transform: translate3d(0,0,0) rotate(0); }
100% { transform: translate3d(0,0,0) rotate(180deg); }
}
@-webkit-keyframes refresh-spin-back {
0% { -webkit-transform: translate3d(0,0,0) rotate(180deg); }
100% { -webkit-transform: translate3d(0,0,0) rotate(0); }
}
@keyframes refresh-spin-back {
0% { transform: translate3d(0,0,0) rotate(180deg); }
100% { transform: translate3d(0,0,0) rotate(0); }
}

View File

@@ -0,0 +1,365 @@
/**
* Resets
* --------------------------------------------------
* 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, i, u, 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 {
@include 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 default outlines.
*/
a,
button,
:focus,
a:focus,
button:focus,
a:active,
a:hover {
outline: 0;
}
/* *
* Remove tap highlight color
*/
a {
-webkit-user-drag: none;
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
-webkit-tap-highlight-color: transparent;
&[href]:hover {
cursor: pointer;
}
}
/* ==========================================================================
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 #c0c0c0;
}
/**
* 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
* 5. Make sure webkit font smoothing is being inherited
* 6. Remove default gradient in Android Firefox / FirefoxOS
*/
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 */
-webkit-font-smoothing: inherit; /* 5 */
background-image: none; /* 6 */
}
/**
* Address Firefox 4+ setting `line-height` on `input` using `importnt` 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"], /* 1 */
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 */
}
img {
-webkit-user-drag: none;
}
/* ==========================================================================
Tables
========================================================================== */
/**
* Remove most spacing between table cells.
*/
table {
border-spacing: 0;
border-collapse: collapse;
}

View File

@@ -0,0 +1,291 @@
/**
* Scaffolding
* --------------------------------------------------
*/
*,
*:before,
*:after {
@include box-sizing(border-box);
}
html {
overflow: hidden;
-ms-touch-action: pan-y;
touch-action: pan-y;
}
body,
.ionic-body {
@include touch-callout(none);
@include font-smoothing(antialiased);
@include text-size-adjust(none);
@include tap-highlight-transparent();
@include user-select(none);
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
margin: 0;
padding: 0;
color: $base-color;
word-wrap: break-word;
font-size: $font-size-base;
font-family: -apple-system;
font-family: $font-family-base;
line-height: $line-height-computed;
text-rendering: optimizeLegibility;
-webkit-backface-visibility: hidden;
-webkit-user-drag: none;
-ms-content-zooming: none;
}
body.grade-b,
body.grade-c {
// disable optimizeLegibility for low end devices
text-rendering: auto;
}
.content {
// used for content areas not using the content directive
position: relative;
}
.scroll-content {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
overflow: hidden;
// Hide the top border if any
margin-top: -1px;
// Prevents any distortion of lines
padding-top: 1px;
margin-bottom: -1px;
width: auto;
height: auto;
}
.menu .scroll-content.scroll-content-false{
z-index: $z-index-scroll-content-false;
}
.scroll-view {
position: relative;
display: block;
overflow: hidden;
&.overflow-scroll {
position: relative;
}
&.scroll-x { overflow-x: scroll; overflow-y: hidden; }
&.scroll-y { overflow-x: hidden; overflow-y: scroll; }
&.scroll-xy { overflow-x: scroll; overflow-y: scroll; }
// Hide the top border if any
margin-top: -1px;
}
/**
* Scroll is the scroll view component available for complex and custom
* scroll view functionality.
*/
.scroll {
@include user-select(none);
@include touch-callout(none);
@include text-size-adjust(none);
@include transform-origin(left, top);
}
/**
* Set ms-viewport to prevent MS "page squish" and allow fluid scrolling
* https://msdn.microsoft.com/en-us/library/ie/hh869615(v=vs.85).aspx
*/
@-ms-viewport { width: device-width; }
// Scroll bar styles
.scroll-bar {
position: absolute;
z-index: $z-index-scroll-bar;
}
// hide the scroll-bar during animations
.ng-animate .scroll-bar {
visibility: hidden;
}
.scroll-bar-h {
right: 2px;
bottom: 3px;
left: 2px;
height: 3px;
.scroll-bar-indicator {
height: 100%;
}
}
.scroll-bar-v {
top: 2px;
right: 3px;
bottom: 2px;
width: 3px;
.scroll-bar-indicator {
width: 100%;
}
}
.scroll-bar-indicator {
position: absolute;
border-radius: 4px;
background: rgba(0,0,0,0.3);
opacity: 1;
@include transition(opacity .3s linear);
&.scroll-bar-fade-out {
opacity: 0;
}
}
.platform-android .scroll-bar-indicator {
// android doesn't have rounded ends on scrollbar
border-radius: 0;
}
.grade-b .scroll-bar-indicator,
.grade-c .scroll-bar-indicator {
// disable rgba background and border radius for low end devices
background: #aaa;
&.scroll-bar-fade-out {
@include transition(none);
}
}
ion-infinite-scroll {
height: 60px;
width: 100%;
display: block;
@include display-flex();
@include flex-direction(row);
@include justify-content(center);
@include align-items(center);
.icon {
color: #666666;
font-size: 30px;
color: $scroll-refresh-icon-color;
}
&:not(.active){
.spinner,
.icon:before{
display:none;
}
}
}
.overflow-scroll {
overflow-x: hidden;
overflow-y: scroll;
-webkit-overflow-scrolling: touch;
// Make sure the scrollbar doesn't take up layout space on edge
-ms-overflow-style: -ms-autohiding-scrollbar;
top: 0;
right: 0;
bottom: 0;
left: 0;
position: absolute;
&.pane {
overflow-x: hidden;
overflow-y: scroll;
}
.scroll {
position: static;
height: 100%;
-webkit-transform: translate3d(0, 0, 0); // fix iOS bug where relative children of scroller disapear while scrolling. see: http://stackoverflow.com/questions/9807620/ipad-safari-scrolling-causes-html-elements-to-disappear-and-reappear-with-a-dela
}
}
// Pad top/bottom of content so it doesn't hide behind .bar-title and .bar-tab.
// Note: For these to work, content must come after both bars in the markup
/* If you change these, change platform.scss as well */
.has-header {
top: $bar-height;
}
// Force no header
.no-header {
top: 0;
}
.has-subheader {
top: $bar-height + $bar-subheader-height;
}
.has-tabs-top {
top: $bar-height + $tabs-height;
}
.has-header.has-subheader.has-tabs-top {
top: $bar-height + $bar-subheader-height + $tabs-height;
}
.has-footer {
bottom: $bar-footer-height;
}
.has-subfooter {
bottom: $bar-footer-height + $bar-subfooter-height;
}
.has-tabs,
.bar-footer.has-tabs {
bottom: $tabs-height;
&.pane{
bottom: $tabs-height;
height:auto;
}
}
.bar-subfooter.has-tabs {
bottom: $tabs-height + $bar-footer-height;
}
.has-footer.has-tabs {
bottom: $tabs-height + $bar-footer-height;
}
// A full screen section with a solid background
.pane {
@include translate3d(0,0,0);
@include transition-duration(0);
z-index: $z-index-pane;
}
.view {
z-index: $z-index-view;
}
.pane,
.view {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background-color: $base-background-color;
overflow: hidden;
}
.view-container {
position: absolute;
display: block;
width: 100%;
height: 100%;
}

View File

@@ -0,0 +1,142 @@
/**
* Select
* --------------------------------------------------
*/
.item-select {
position: relative;
select {
@include appearance(none);
position: absolute;
top: 0;
bottom: 0;
right: 0;
padding: 0 ($item-padding * 3) 0 $item-padding;
max-width: 65%;
border: none;
background: $item-default-bg;
color: #333;
// hack to hide default dropdown arrow in FF
text-indent: .01px;
text-overflow: '';
white-space: nowrap;
font-size: $font-size-base;
cursor: pointer;
direction: rtl; // right align the select text
}
select::-ms-expand {
// hide default dropdown arrow in IE
display: none;
}
option {
direction: ltr;
}
&:after {
position: absolute;
top: 50%;
right: $item-padding;
margin-top: -3px;
width: 0;
height: 0;
border-top: 5px solid;
border-right: 5px solid rgba(0, 0, 0, 0);
border-left: 5px solid rgba(0, 0, 0, 0);
color: #999;
content: "";
pointer-events: none;
}
&.item-light {
select{
background:$item-light-bg;
color:$item-light-text;
}
}
&.item-stable {
select{
background:$item-stable-bg;
color:$item-stable-text;
}
&:after, .input-label{
color:darken($item-stable-border,30%);
}
}
&.item-positive {
select{
background:$item-positive-bg;
color:$item-positive-text;
}
&:after, .input-label{
color:$item-positive-text;
}
}
&.item-calm {
select{
background:$item-calm-bg;
color:$item-calm-text;
}
&:after, .input-label{
color:$item-calm-text;
}
}
&.item-assertive {
select{
background:$item-assertive-bg;
color:$item-assertive-text;
}
&:after, .input-label{
color:$item-assertive-text;
}
}
&.item-balanced {
select{
background:$item-balanced-bg;
color:$item-balanced-text;
}
&:after, .input-label{
color:$item-balanced-text;
}
}
&.item-energized {
select{
background:$item-energized-bg;
color:$item-energized-text;
}
&:after, .input-label{
color:$item-energized-text;
}
}
&.item-royal {
select{
background:$item-royal-bg;
color:$item-royal-text;
}
&:after, .input-label{
color:$item-royal-text;
}
}
&.item-dark {
select{
background:$item-dark-bg;
color:$item-dark-text;
}
&:after, .input-label{
color:$item-dark-text;
}
}
}
select {
&[multiple],
&[size] {
height: auto;
}
}

View File

@@ -0,0 +1,71 @@
/**
* Slide Box
* --------------------------------------------------
*/
.slider {
position: relative;
visibility: hidden;
// Make sure items don't scroll over ever
overflow: hidden;
}
.slider-slides {
position: relative;
height: 100%;
}
.slider-slide {
position: relative;
display: block;
float: left;
width: 100%;
height: 100%;
vertical-align: top;
}
.slider-slide-image {
> img {
width: 100%;
}
}
.slider-pager {
position: absolute;
bottom: 20px;
z-index: $z-index-slider-pager;
width: 100%;
height: 15px;
text-align: center;
.slider-pager-page {
display: inline-block;
margin: 0px 3px;
width: 15px;
color: #000;
text-decoration: none;
opacity: 0.3;
&.active {
@include transition(opacity 0.4s ease-in);
opacity: 1;
}
}
}
//Disable animate service animations
.slider-slide,
.slider-pager-page {
&.ng-enter,
&.ng-leave,
&.ng-animate {
-webkit-transition: none !important;
transition: none !important;
}
&.ng-animate {
-webkit-animation: none 0s;
animation: none 0s;
}
}

View File

@@ -0,0 +1,529 @@
/**
* Swiper 3.2.7
* Most modern mobile touch slider and framework with hardware accelerated transitions
*
* http://www.idangero.us/swiper/
*
* Copyright 2015, Vladimir Kharlampidi
* The iDangero.us
* http://www.idangero.us/
*
* Licensed under MIT
*
* Released on: December 7, 2015
*/
.swiper-container {
margin: 0 auto;
position: relative;
overflow: hidden;
/* Fix of Webkit flickering */
z-index: 1;
}
.swiper-container-no-flexbox .swiper-slide {
float: left;
}
.swiper-container-vertical > .swiper-wrapper {
-webkit-box-orient: vertical;
-moz-box-orient: vertical;
-ms-flex-direction: column;
-webkit-flex-direction: column;
flex-direction: column;
}
.swiper-wrapper {
position: relative;
width: 100%;
height: 100%;
z-index: 1;
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-transition-property: -webkit-transform;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform;
-webkit-box-sizing: content-box;
-moz-box-sizing: content-box;
box-sizing: content-box;
}
.swiper-container-android .swiper-slide,
.swiper-wrapper {
-webkit-transform: translate3d(0px, 0, 0);
-moz-transform: translate3d(0px, 0, 0);
-o-transform: translate(0px, 0px);
-ms-transform: translate3d(0px, 0, 0);
transform: translate3d(0px, 0, 0);
}
.swiper-container-multirow > .swiper-wrapper {
-webkit-box-lines: multiple;
-moz-box-lines: multiple;
-ms-flex-wrap: wrap;
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
.swiper-container-free-mode > .swiper-wrapper {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
margin: 0 auto;
}
.swiper-slide {
display: block;
-webkit-flex-shrink: 0;
-ms-flex: 0 0 auto;
flex-shrink: 0;
width: 100%;
height: 100%;
position: relative;
}
/* Auto Height */
.swiper-container-autoheight,
.swiper-container-autoheight .swiper-slide {
height: auto;
}
.swiper-container-autoheight .swiper-wrapper {
-webkit-box-align: start;
-ms-flex-align: start;
-webkit-align-items: flex-start;
align-items: flex-start;
-webkit-transition-property: -webkit-transform, height;
-moz-transition-property: -moz-transform;
-o-transition-property: -o-transform;
-ms-transition-property: -ms-transform;
transition-property: transform, height;
}
/* a11y */
.swiper-container .swiper-notification {
position: absolute;
left: 0;
top: 0;
pointer-events: none;
opacity: 0;
z-index: -1000;
}
/* IE10 Windows Phone 8 Fixes */
.swiper-wp8-horizontal {
-ms-touch-action: pan-y;
touch-action: pan-y;
}
.swiper-wp8-vertical {
-ms-touch-action: pan-x;
touch-action: pan-x;
}
/* Arrows */
.swiper-button-prev,
.swiper-button-next {
position: absolute;
top: 50%;
width: 27px;
height: 44px;
margin-top: -22px;
z-index: 10;
cursor: pointer;
-moz-background-size: 27px 44px;
-webkit-background-size: 27px 44px;
background-size: 27px 44px;
background-position: center;
background-repeat: no-repeat;
}
.swiper-button-prev.swiper-button-disabled,
.swiper-button-next.swiper-button-disabled {
opacity: 0.35;
cursor: auto;
pointer-events: none;
}
.swiper-button-prev,
.swiper-container-rtl .swiper-button-next {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
left: 10px;
right: auto;
}
.swiper-button-prev.swiper-button-black,
.swiper-container-rtl .swiper-button-next.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-prev.swiper-button-white,
.swiper-container-rtl .swiper-button-next.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M0%2C22L22%2C0l2.1%2C2.1L4.2%2C22l19.9%2C19.9L22%2C44L0%2C22L0%2C22L0%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next,
.swiper-container-rtl .swiper-button-prev {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23007aff'%2F%3E%3C%2Fsvg%3E");
right: 10px;
left: auto;
}
.swiper-button-next.swiper-button-black,
.swiper-container-rtl .swiper-button-prev.swiper-button-black {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23000000'%2F%3E%3C%2Fsvg%3E");
}
.swiper-button-next.swiper-button-white,
.swiper-container-rtl .swiper-button-prev.swiper-button-white {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20viewBox%3D'0%200%2027%2044'%3E%3Cpath%20d%3D'M27%2C22L27%2C22L5%2C44l-2.1-2.1L22.8%2C22L2.9%2C2.1L5%2C0L27%2C22L27%2C22z'%20fill%3D'%23ffffff'%2F%3E%3C%2Fsvg%3E");
}
/* Pagination Styles */
.swiper-pagination {
position: absolute;
text-align: center;
-webkit-transition: 300ms;
-moz-transition: 300ms;
-o-transition: 300ms;
transition: 300ms;
-webkit-transform: translate3d(0, 0, 0);
-ms-transform: translate3d(0, 0, 0);
-o-transform: translate3d(0, 0, 0);
transform: translate3d(0, 0, 0);
z-index: 10;
}
.swiper-pagination.swiper-pagination-hidden {
opacity: 0;
}
.swiper-pagination-bullet {
width: 8px;
height: 8px;
display: inline-block;
border-radius: 100%;
background: #000;
opacity: 0.2;
}
button.swiper-pagination-bullet {
border: none;
margin: 0;
padding: 0;
box-shadow: none;
-moz-appearance: none;
-ms-appearance: none;
-webkit-appearance: none;
appearance: none;
}
.swiper-pagination-clickable .swiper-pagination-bullet {
cursor: pointer;
}
.swiper-pagination-white .swiper-pagination-bullet {
background: #fff;
}
.swiper-pagination-bullet-active {
opacity: 1;
}
.swiper-pagination-white .swiper-pagination-bullet-active {
background: #fff;
}
.swiper-pagination-black .swiper-pagination-bullet-active {
background: #000;
}
.swiper-container-vertical > .swiper-pagination {
right: 10px;
top: 50%;
-webkit-transform: translate3d(0px, -50%, 0);
-moz-transform: translate3d(0px, -50%, 0);
-o-transform: translate(0px, -50%);
-ms-transform: translate3d(0px, -50%, 0);
transform: translate3d(0px, -50%, 0);
}
.swiper-container-vertical > .swiper-pagination .swiper-pagination-bullet {
margin: 5px 0;
display: block;
}
.swiper-container-horizontal > .swiper-pagination {
bottom: 10px;
left: 0;
width: 100%;
}
.swiper-container-horizontal > .swiper-pagination .swiper-pagination-bullet {
margin: 0 5px;
}
/* 3D Container */
.swiper-container-3d {
-webkit-perspective: 1200px;
-moz-perspective: 1200px;
-o-perspective: 1200px;
perspective: 1200px;
}
.swiper-container-3d .swiper-wrapper,
.swiper-container-3d .swiper-slide,
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom,
.swiper-container-3d .swiper-cube-shadow {
-webkit-transform-style: preserve-3d;
-moz-transform-style: preserve-3d;
-ms-transform-style: preserve-3d;
transform-style: preserve-3d;
}
.swiper-container-3d .swiper-slide-shadow-left,
.swiper-container-3d .swiper-slide-shadow-right,
.swiper-container-3d .swiper-slide-shadow-top,
.swiper-container-3d .swiper-slide-shadow-bottom {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
pointer-events: none;
z-index: 10;
}
.swiper-container-3d .swiper-slide-shadow-left {
background-image: -webkit-gradient(linear, left top, right top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-right {
background-image: -webkit-gradient(linear, right top, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(left, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to right, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-top {
background-image: -webkit-gradient(linear, left top, left bottom, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
.swiper-container-3d .swiper-slide-shadow-bottom {
background-image: -webkit-gradient(linear, left bottom, left top, from(rgba(0, 0, 0, 0.5)), to(rgba(0, 0, 0, 0)));
/* Safari 4+, Chrome */
background-image: -webkit-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Chrome 10+, Safari 5.1+, iOS 5+ */
background-image: -moz-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 3.6-15 */
background-image: -o-linear-gradient(top, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Opera 11.10-12.00 */
background-image: linear-gradient(to bottom, rgba(0, 0, 0, 0.5), rgba(0, 0, 0, 0));
/* Firefox 16+, IE10, Opera 12.50+ */
}
/* Coverflow */
.swiper-container-coverflow .swiper-wrapper {
/* Windows 8 IE 10 fix */
-ms-perspective: 1200px;
}
/* Fade */
.swiper-container-fade.swiper-container-free-mode .swiper-slide {
-webkit-transition-timing-function: ease-out;
-moz-transition-timing-function: ease-out;
-ms-transition-timing-function: ease-out;
-o-transition-timing-function: ease-out;
transition-timing-function: ease-out;
}
.swiper-container-fade .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide .swiper-slide {
pointer-events: none;
}
.swiper-container-fade .swiper-slide-active,
.swiper-container-fade .swiper-slide-active .swiper-slide-active {
pointer-events: auto;
}
/* Cube */
.swiper-container-cube {
overflow: visible;
}
.swiper-container-cube .swiper-slide {
pointer-events: none;
visibility: hidden;
-webkit-transform-origin: 0 0;
-moz-transform-origin: 0 0;
-ms-transform-origin: 0 0;
transform-origin: 0 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
width: 100%;
height: 100%;
z-index: 1;
}
.swiper-container-cube.swiper-container-rtl .swiper-slide {
-webkit-transform-origin: 100% 0;
-moz-transform-origin: 100% 0;
-ms-transform-origin: 100% 0;
transform-origin: 100% 0;
}
.swiper-container-cube .swiper-slide-active,
.swiper-container-cube .swiper-slide-next,
.swiper-container-cube .swiper-slide-prev,
.swiper-container-cube .swiper-slide-next + .swiper-slide {
pointer-events: auto;
visibility: visible;
}
.swiper-container-cube .swiper-slide-shadow-top,
.swiper-container-cube .swiper-slide-shadow-bottom,
.swiper-container-cube .swiper-slide-shadow-left,
.swiper-container-cube .swiper-slide-shadow-right {
z-index: 0;
-webkit-backface-visibility: hidden;
-moz-backface-visibility: hidden;
-ms-backface-visibility: hidden;
backface-visibility: hidden;
}
.swiper-container-cube .swiper-cube-shadow {
position: absolute;
left: 0;
bottom: 0px;
width: 100%;
height: 100%;
background: #000;
opacity: 0.6;
-webkit-filter: blur(50px);
filter: blur(50px);
z-index: 0;
}
/* Scrollbar */
.swiper-scrollbar {
border-radius: 10px;
position: relative;
-ms-touch-action: none;
background: rgba(0, 0, 0, 0.1);
}
.swiper-container-horizontal > .swiper-scrollbar {
position: absolute;
left: 1%;
bottom: 3px;
z-index: 50;
height: 5px;
width: 98%;
}
.swiper-container-vertical > .swiper-scrollbar {
position: absolute;
right: 3px;
top: 1%;
z-index: 50;
width: 5px;
height: 98%;
}
.swiper-scrollbar-drag {
height: 100%;
width: 100%;
position: relative;
background: rgba(0, 0, 0, 0.5);
border-radius: 10px;
left: 0;
top: 0;
}
.swiper-scrollbar-cursor-drag {
cursor: move;
}
/* Preloader */
.swiper-lazy-preloader {
width: 42px;
height: 42px;
position: absolute;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -21px;
z-index: 10;
-webkit-transform-origin: 50%;
-moz-transform-origin: 50%;
transform-origin: 50%;
-webkit-animation: swiper-preloader-spin 1s steps(12, end) infinite;
-moz-animation: swiper-preloader-spin 1s steps(12, end) infinite;
animation: swiper-preloader-spin 1s steps(12, end) infinite;
}
.swiper-lazy-preloader:after {
display: block;
content: "";
width: 100%;
height: 100%;
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%236c6c6c'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
background-position: 50%;
-webkit-background-size: 100%;
background-size: 100%;
background-repeat: no-repeat;
}
.swiper-lazy-preloader-white:after {
background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg%20viewBox%3D'0%200%20120%20120'%20xmlns%3D'http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg'%20xmlns%3Axlink%3D'http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink'%3E%3Cdefs%3E%3Cline%20id%3D'l'%20x1%3D'60'%20x2%3D'60'%20y1%3D'7'%20y2%3D'27'%20stroke%3D'%23fff'%20stroke-width%3D'11'%20stroke-linecap%3D'round'%2F%3E%3C%2Fdefs%3E%3Cg%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(30%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(60%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(90%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(120%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.27'%20transform%3D'rotate(150%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.37'%20transform%3D'rotate(180%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.46'%20transform%3D'rotate(210%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.56'%20transform%3D'rotate(240%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.66'%20transform%3D'rotate(270%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.75'%20transform%3D'rotate(300%2060%2C60)'%2F%3E%3Cuse%20xlink%3Ahref%3D'%23l'%20opacity%3D'.85'%20transform%3D'rotate(330%2060%2C60)'%2F%3E%3C%2Fg%3E%3C%2Fsvg%3E");
}
@-webkit-keyframes swiper-preloader-spin {
100% {
-webkit-transform: rotate(360deg);
}
}
@keyframes swiper-preloader-spin {
100% {
transform: rotate(360deg);
}
}
ion-slides {
width: 100%;
height: 100%;
display: block;
}
.slide-zoom {
display: block;
width: 100%;
text-align: center;
}
.swiper-container {
//position: absolute;
//left: 0;
//top: 0;
width: 100%;
height: 100%;
padding: 0;
//display: flex;
overflow: hidden;
}
.swiper-wrapper {
position: absolute;
left: 0;
top: 0;
width: 100%;
height: 100%;
padding: 0;
//display: flex;
}
.swiper-container {
//width: 100%;
//height: 100%;
}
.swiper-slide {
width: 100%;
height: 100%;
box-sizing: border-box;
//text-align: center;
//font-size: 18px;
//background: #fff;
/* Center slide text vertically */
//display: flex;
//justify-content: center;
//align-items: center;
img {
width: auto;
height: auto;
max-width: 100%;
max-height: 100%;
}
}

View File

@@ -0,0 +1,100 @@
/**
* Spinners
* --------------------------------------------------
*/
.spinner {
svg {
width: $spinner-width;
height: $spinner-height;
}
stroke: $spinner-default-stroke;
fill: $spinner-default-fill;
&.spinner-light {
stroke: $spinner-light-stroke;
fill: $spinner-light-fill;
}
&.spinner-stable {
stroke: $spinner-stable-stroke;
fill: $spinner-stable-fill;
}
&.spinner-positive {
stroke: $spinner-positive-stroke;
fill: $spinner-positive-fill;
}
&.spinner-calm {
stroke: $spinner-calm-stroke;
fill: $spinner-calm-fill;
}
&.spinner-balanced {
stroke: $spinner-balanced-stroke;
fill: $spinner-balanced-fill;
}
&.spinner-assertive {
stroke: $spinner-assertive-stroke;
fill: $spinner-assertive-fill;
}
&.spinner-energized {
stroke: $spinner-energized-stroke;
fill: $spinner-energized-fill;
}
&.spinner-royal {
stroke: $spinner-royal-stroke;
fill: $spinner-royal-fill;
}
&.spinner-dark {
stroke: $spinner-dark-stroke;
fill: $spinner-dark-fill;
}
}
.spinner-android {
stroke: #4b8bf4;
}
.spinner-ios,
.spinner-ios-small {
stroke: #69717d;
}
.spinner-spiral {
.stop1 {
stop-color: $spinner-light-fill;
stop-opacity: 0;
}
&.spinner-light {
.stop1 {
stop-color: $spinner-default-fill;
}
.stop2 {
stop-color: $spinner-light-fill;
}
}
&.spinner-stable .stop2 {
stop-color: $spinner-stable-fill;
}
&.spinner-positive .stop2 {
stop-color: $spinner-positive-fill;
}
&.spinner-calm .stop2 {
stop-color: $spinner-calm-fill;
}
&.spinner-balanced .stop2 {
stop-color: $spinner-balanced-fill;
}
&.spinner-assertive .stop2 {
stop-color: $spinner-assertive-fill;
}
&.spinner-energized .stop2 {
stop-color: $spinner-energized-fill;
}
&.spinner-royal .stop2 {
stop-color: $spinner-royal-fill;
}
&.spinner-dark .stop2 {
stop-color: $spinner-dark-fill;
}
}

View File

@@ -0,0 +1,542 @@
/**
* Tabs
* --------------------------------------------------
* A navigation bar with any number of tab items supported.
*/
.tabs {
@include display-flex();
@include flex-direction(horizontal);
@include justify-content(center);
@include translate3d(0,0,0);
@include tab-style($tabs-default-bg, $tabs-default-border, $tabs-default-text);
@include tab-badge-style($tabs-default-text, $tabs-default-bg);
position: absolute;
bottom: 0;
z-index: $z-index-tabs;
width: 100%;
height: $tabs-height;
border-style: solid;
border-top-width: 1px;
background-size: 0;
line-height: $tabs-height;
@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) {
padding-top: 2px;
border-top: none !important;
border-bottom: none;
background-position: top;
background-size: 100% 1px;
background-repeat: no-repeat;
}
}
/* Allow parent element of tabs to define color, or just the tab itself */
.tabs-light > .tabs,
.tabs.tabs-light {
@include tab-style($tabs-light-bg, $tabs-light-border, $tabs-light-text);
@include tab-badge-style($tabs-light-text, $tabs-light-bg);
}
.tabs-stable > .tabs,
.tabs.tabs-stable {
@include tab-style($tabs-stable-bg, $tabs-stable-border, $tabs-stable-text);
@include tab-badge-style($tabs-stable-text, $tabs-stable-bg);
}
.tabs-positive > .tabs,
.tabs.tabs-positive {
@include tab-style($tabs-positive-bg, $tabs-positive-border, $tabs-positive-text);
@include tab-badge-style($tabs-positive-text, $tabs-positive-bg);
}
.tabs-calm > .tabs,
.tabs.tabs-calm {
@include tab-style($tabs-calm-bg, $tabs-calm-border, $tabs-calm-text);
@include tab-badge-style($tabs-calm-text, $tabs-calm-bg);
}
.tabs-assertive > .tabs,
.tabs.tabs-assertive {
@include tab-style($tabs-assertive-bg, $tabs-assertive-border, $tabs-assertive-text);
@include tab-badge-style($tabs-assertive-text, $tabs-assertive-bg);
}
.tabs-balanced > .tabs,
.tabs.tabs-balanced {
@include tab-style($tabs-balanced-bg, $tabs-balanced-border, $tabs-balanced-text);
@include tab-badge-style($tabs-balanced-text, $tabs-balanced-bg);
}
.tabs-energized > .tabs,
.tabs.tabs-energized {
@include tab-style($tabs-energized-bg, $tabs-energized-border, $tabs-energized-text);
@include tab-badge-style($tabs-energized-text, $tabs-energized-bg);
}
.tabs-royal > .tabs,
.tabs.tabs-royal {
@include tab-style($tabs-royal-bg, $tabs-royal-border, $tabs-royal-text);
@include tab-badge-style($tabs-royal-text, $tabs-royal-bg);
}
.tabs-dark > .tabs,
.tabs.tabs-dark {
@include tab-style($tabs-dark-bg, $tabs-dark-border, $tabs-dark-text);
@include tab-badge-style($tabs-dark-text, $tabs-dark-bg);
}
@mixin tabs-striped($style, $color, $background) {
&.#{$style} {
.tabs{
background-color: $background;
}
.tab-item {
color: rgba($color, $tabs-striped-off-opacity);
opacity: 1;
.badge{
opacity:$tabs-striped-off-opacity;
}
&.tab-item-active,
&.active,
&.activated {
margin-top: -$tabs-striped-border-width;
color: $color;
border-style: solid;
border-width: $tabs-striped-border-width 0 0 0;
border-color: $color;
}
}
}
&.tabs-top{
.tab-item {
&.tab-item-active,
&.active,
&.activated {
.badge {
top: 4%;
}
}
}
}
}
@mixin tabs-background($style, $color, $border-color) {
.#{$style} {
.tabs,
&> .tabs{
background-color: $color;
background-image: linear-gradient(0deg, $border-color, $border-color 50%, transparent 50%);
border-color: $border-color;
}
}
}
@mixin tabs-striped-background($style, $color) {
&.#{$style} {
.tabs {
background-color: $color;
background-image:none;
}
}
}
@mixin tabs-color($style, $color) {
.#{$style} {
.tab-item {
color: rgba($color, $tabs-off-opacity);
opacity: 1;
.badge{
opacity:$tabs-off-opacity;
}
&.tab-item-active,
&.active,
&.activated {
color: $color;
border: 0 solid $color;
.badge{
opacity: 1;
}
}
}
}
}
@mixin tabs-striped-color($style, $color) {
&.#{$style} {
.tab-item {
color: rgba($color, $tabs-striped-off-opacity);
opacity: 1;
.badge{
opacity:$tabs-striped-off-opacity;
}
&.tab-item-active,
&.active,
&.activated {
margin-top: -$tabs-striped-border-width;
color: $color;
border: 0 solid $color;
border-top-width: $tabs-striped-border-width;
.badge{
top:$tabs-striped-border-width;
opacity: 1;
}
}
}
}
}
.tabs-striped {
.tabs {
background-color: white;
background-image: none;
border: none;
border-bottom: 1px solid #ddd;
padding-top: $tabs-striped-border-width;
}
.tab-item {
// default android tab style
&.tab-item-active,
&.active,
&.activated {
margin-top: -$tabs-striped-border-width;
border-style: solid;
border-width: $tabs-striped-border-width 0 0 0;
border-color: $dark;
.badge{
top:$tabs-striped-border-width;
opacity: 1;
}
}
}
@include tabs-striped('tabs-light', $dark, $light);
@include tabs-striped('tabs-stable', $dark, $stable);
@include tabs-striped('tabs-positive', $light, $positive);
@include tabs-striped('tabs-calm', $light, $calm);
@include tabs-striped('tabs-assertive', $light, $assertive);
@include tabs-striped('tabs-balanced', $light, $balanced);
@include tabs-striped('tabs-energized', $light, $energized);
@include tabs-striped('tabs-royal', $light, $royal);
@include tabs-striped('tabs-dark', $light, $dark);
// doing this twice so striped tabs styles don't override specific bg and color vals
@include tabs-striped-background('tabs-background-light', $light);
@include tabs-striped-background('tabs-background-stable', $stable);
@include tabs-striped-background('tabs-background-positive', $positive);
@include tabs-striped-background('tabs-background-calm', $calm);
@include tabs-striped-background('tabs-background-assertive', $assertive);
@include tabs-striped-background('tabs-background-balanced', $balanced);
@include tabs-striped-background('tabs-background-energized',$energized);
@include tabs-striped-background('tabs-background-royal', $royal);
@include tabs-striped-background('tabs-background-dark', $dark);
@include tabs-striped-color('tabs-color-light', $light);
@include tabs-striped-color('tabs-color-stable', $stable);
@include tabs-striped-color('tabs-color-positive', $positive);
@include tabs-striped-color('tabs-color-calm', $calm);
@include tabs-striped-color('tabs-color-assertive', $assertive);
@include tabs-striped-color('tabs-color-balanced', $balanced);
@include tabs-striped-color('tabs-color-energized',$energized);
@include tabs-striped-color('tabs-color-royal', $royal);
@include tabs-striped-color('tabs-color-dark', $dark);
}
@include tabs-background('tabs-background-light', $light, $bar-light-border);
@include tabs-background('tabs-background-stable', $stable, $bar-stable-border);
@include tabs-background('tabs-background-positive', $positive, $bar-positive-border);
@include tabs-background('tabs-background-calm', $calm, $bar-calm-border);
@include tabs-background('tabs-background-assertive', $assertive, $bar-assertive-border);
@include tabs-background('tabs-background-balanced', $balanced, $bar-balanced-border);
@include tabs-background('tabs-background-energized',$energized, $bar-energized-border);
@include tabs-background('tabs-background-royal', $royal, $bar-royal-border);
@include tabs-background('tabs-background-dark', $dark, $bar-dark-border);
@include tabs-color('tabs-color-light', $light);
@include tabs-color('tabs-color-stable', $stable);
@include tabs-color('tabs-color-positive', $positive);
@include tabs-color('tabs-color-calm', $calm);
@include tabs-color('tabs-color-assertive', $assertive);
@include tabs-color('tabs-color-balanced', $balanced);
@include tabs-color('tabs-color-energized',$energized);
@include tabs-color('tabs-color-royal', $royal);
@include tabs-color('tabs-color-dark', $dark);
@mixin tabs-standard-color($style, $color, $off-color:$dark) {
&.#{$style} {
.tab-item {
color: $off-color;
&.tab-item-active,
&.active,
&.activated {
color: $color;
}
}
}
&.tabs-striped.#{$style} {
.tab-item {
&.tab-item-active,
&.active,
&.activated {
border-color: $color;
color: $color;
}
}
}
}
ion-tabs {
@include tabs-standard-color('tabs-color-active-light', $light, $dark);
@include tabs-standard-color('tabs-color-active-stable', $stable, $dark);
@include tabs-standard-color('tabs-color-active-positive', $positive, $dark);
@include tabs-standard-color('tabs-color-active-calm', $calm, $dark);
@include tabs-standard-color('tabs-color-active-assertive', $assertive, $dark);
@include tabs-standard-color('tabs-color-active-balanced', $balanced, $dark);
@include tabs-standard-color('tabs-color-active-energized',$energized, $dark);
@include tabs-standard-color('tabs-color-active-royal', $royal, $dark);
@include tabs-standard-color('tabs-color-active-dark', $dark, $light);
}
.tabs-top {
&.tabs-striped {
padding-bottom:0;
.tab-item{
background: transparent;
// animate the top bar, leave bottom for platform consistency
-webkit-transition: color .1s ease;
-moz-transition: color .1s ease;
-ms-transition: color .1s ease;
-o-transition: color .1s ease;
transition: color .1s ease;
&.tab-item-active,
&.active,
&.activated {
margin-top: $tabs-striped-border-width - 1px;
border-width: 0px 0px $tabs-striped-border-width 0px !important;
border-style: solid;
> .badge, > i{
margin-top: -$tabs-striped-border-width + 1px;
}
}
.badge{
-webkit-transition: color .2s ease;
-moz-transition: color .2s ease;
-ms-transition: color .2s ease;
-o-transition: color .2s ease;
transition: color .2s ease;
}
}
&:not(.tabs-icon-left):not(.tabs-icon-top){
.tab-item{
&.tab-item-active,
&.active,
&.activated {
.tab-title, i{
display:block;
margin-top: -$tabs-striped-border-width + 1px;
}
}
}
}
&.tabs-icon-left{
.tab-item{
margin-top: 1px;
&.tab-item-active,
&.active,
&.activated {
.tab-title, i {
margin-top: -0.1em;
}
}
}
}
}
}
/* Allow parent element to have tabs-top */
/* If you change this, change platform.scss as well */
.tabs-top > .tabs,
.tabs.tabs-top {
top: $bar-height;
padding-top: 0;
background-position: bottom;
border-top-width: 0;
border-bottom-width: 1px;
.tab-item {
&.tab-item-active,
&.active,
&.activated {
.badge {
top: 4%;
}
}
}
}
.tabs-top ~ .bar-header {
border-bottom-width: 0;
}
.tab-item {
@include flex(1);
display: block;
overflow: hidden;
max-width: $tab-item-max-width;
height: 100%;
color: inherit;
text-align: center;
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
font-weight: 400;
font-size: $tabs-text-font-size;
font-family: $font-family-sans-serif;
opacity: 0.7;
&:hover {
cursor: pointer;
}
&.tab-hidden{
display:none;
}
}
.tabs-item-hide > .tabs,
.tabs.tabs-item-hide {
display: none;
}
.tabs-icon-top > .tabs .tab-item,
.tabs-icon-top.tabs .tab-item,
.tabs-icon-bottom > .tabs .tab-item,
.tabs-icon-bottom.tabs .tab-item {
font-size: $tabs-text-font-size-side-icon;
line-height: $tabs-text-font-size;
}
.tab-item .icon {
display: block;
margin: 0 auto;
height: $tabs-icon-size;
font-size: $tabs-icon-size;
}
.tabs-icon-left.tabs .tab-item,
.tabs-icon-left > .tabs .tab-item,
.tabs-icon-right.tabs .tab-item,
.tabs-icon-right > .tabs .tab-item {
font-size: $tabs-text-font-size-side-icon;
.icon, .tab-title {
display: inline-block;
vertical-align: top;
margin-top: -.1em;
&:before {
font-size: $tabs-icon-size - 8;
line-height: $tabs-height;
}
}
}
.tabs-icon-left > .tabs .tab-item .icon,
.tabs-icon-left.tabs .tab-item .icon {
padding-right: 3px;
}
.tabs-icon-right > .tabs .tab-item .icon,
.tabs-icon-right.tabs .tab-item .icon {
padding-left: 3px;
}
.tabs-icon-only > .tabs .icon,
.tabs-icon-only.tabs .icon {
line-height: inherit;
}
.tab-item.has-badge {
position: relative;
}
.tab-item .badge {
position: absolute;
top: 4%;
right: 33%; // fallback
right: calc(50% - 26px);
padding: $tabs-badge-padding;
height: auto;
font-size: $tabs-badge-font-size;
line-height: $tabs-badge-font-size + 4;
}
/* Navigational tab */
/* Active state for tab */
.tab-item.tab-item-active,
.tab-item.active,
.tab-item.activated {
opacity: 1;
&.tab-item-light {
color: $light;
}
&.tab-item-stable {
color: $stable;
}
&.tab-item-positive {
color: $positive;
}
&.tab-item-calm {
color: $calm;
}
&.tab-item-assertive {
color: $assertive;
}
&.tab-item-balanced {
color: $balanced;
}
&.tab-item-energized {
color: $energized;
}
&.tab-item-royal {
color: $royal;
}
&.tab-item-dark {
color: $dark;
}
}
.item.tabs {
@include display-flex();
padding: 0;
.icon:before {
position: relative;
}
}
.tab-item.disabled,
.tab-item[disabled] {
opacity: .4;
cursor: default;
pointer-events: none;
}
.nav-bar-tabs-top.hide ~ .view-container .tabs-top .tabs{
top: 0
}
.pane[hide-nav-bar="true"] .has-tabs-top{
top:$tabs-height
}

View File

@@ -0,0 +1,198 @@
/**
* Toggle
* --------------------------------------------------
*/
.item-toggle {
pointer-events: none;
}
.toggle {
// set the color defaults
@include toggle-style($toggle-on-default-border, $toggle-on-default-bg);
position: relative;
display: inline-block;
pointer-events: auto;
margin: -$toggle-hit-area-expansion;
padding: $toggle-hit-area-expansion;
&.dragging {
.handle {
background-color: $toggle-handle-dragging-bg-color !important;
}
}
}
.toggle {
&.toggle-light {
@include toggle-style($toggle-on-light-border, $toggle-on-light-bg);
}
&.toggle-stable {
@include toggle-style($toggle-on-stable-border, $toggle-on-stable-bg);
}
&.toggle-positive {
@include toggle-style($toggle-on-positive-border, $toggle-on-positive-bg);
}
&.toggle-calm {
@include toggle-style($toggle-on-calm-border, $toggle-on-calm-bg);
}
&.toggle-assertive {
@include toggle-style($toggle-on-assertive-border, $toggle-on-assertive-bg);
}
&.toggle-balanced {
@include toggle-style($toggle-on-balanced-border, $toggle-on-balanced-bg);
}
&.toggle-energized {
@include toggle-style($toggle-on-energized-border, $toggle-on-energized-bg);
}
&.toggle-royal {
@include toggle-style($toggle-on-royal-border, $toggle-on-royal-bg);
}
&.toggle-dark {
@include toggle-style($toggle-on-dark-border, $toggle-on-dark-bg);
}
}
.toggle input {
// hide the actual input checkbox
display: none;
}
/* the track appearance when the toggle is "off" */
.toggle .track {
@include transition-timing-function(ease-in-out);
@include transition-duration($toggle-transition-duration);
@include transition-property((background-color, border));
display: inline-block;
box-sizing: border-box;
width: $toggle-width;
height: $toggle-height;
border: solid $toggle-border-width $toggle-off-border-color;
border-radius: $toggle-border-radius;
background-color: $toggle-off-bg-color;
content: ' ';
cursor: pointer;
pointer-events: none;
}
/* Fix to avoid background color bleeding */
/* (occurred on (at least) Android 4.2, Asus MeMO Pad HD7 ME173X) */
.platform-android4_2 .toggle .track {
-webkit-background-clip: padding-box;
}
/* the handle (circle) thats inside the toggle's track area */
/* also the handle's appearance when it is "off" */
.toggle .handle {
@include transition($toggle-transition-duration cubic-bezier(0, 1.1, 1, 1.1));
@include transition-property((background-color, transform));
position: absolute;
display: block;
width: $toggle-handle-width;
height: $toggle-handle-height;
border-radius: $toggle-handle-radius;
background-color: $toggle-handle-off-bg-color;
top: $toggle-border-width + $toggle-hit-area-expansion;
left: $toggle-border-width + $toggle-hit-area-expansion;
box-shadow: 0 2px 7px rgba(0,0,0,.35), 0 1px 1px rgba(0,0,0,.15);
&:before {
// used to create a larger (but hidden) hit area to slide the handle
position: absolute;
top: -4px;
left: ( ($toggle-handle-width / 2) * -1) - 8;
padding: ($toggle-handle-height / 2) + 5 ($toggle-handle-width + 7);
content: " ";
}
}
.toggle input:checked + .track .handle {
// the handle when the toggle is "on"
@include translate3d($toggle-width - $toggle-handle-width - ($toggle-border-width * 2), 0, 0);
background-color: $toggle-handle-on-bg-color;
}
.item-toggle.active {
box-shadow: none;
}
.item-toggle,
.item-toggle.item-complex .item-content {
// make sure list item content have enough padding on right to fit the toggle
padding-right: ($item-padding * 3) + $toggle-width;
}
.item-toggle.item-complex {
padding-right: 0;
}
.item-toggle .toggle {
// position the toggle to the right within a list item
position: absolute;
top: ($item-padding / 2) + 2;
right: $item-padding;
z-index: $z-index-item-toggle;
}
.toggle input:disabled + .track {
opacity: .6;
}
.toggle-small {
.track {
border: 0;
width: 34px;
height: 15px;
background: #9e9e9e;
}
input:checked + .track {
background: rgba(0,150,137,.5);
}
.handle {
top: 2px;
left: 4px;
width: 21px;
height: 21px;
box-shadow: 0 2px 5px rgba(0,0,0,.25);
}
input:checked + .track .handle {
@include translate3d(16px, 0, 0);
background: rgb(0,150,137);
}
&.item-toggle .toggle {
top: 19px;
}
.toggle-light {
@include toggle-small-style($toggle-on-light-bg);
}
.toggle-stable {
@include toggle-small-style($toggle-on-stable-bg);
}
.toggle-positive {
@include toggle-small-style($toggle-on-positive-bg);
}
.toggle-calm {
@include toggle-small-style($toggle-on-calm-bg);
}
.toggle-assertive {
@include toggle-small-style($toggle-on-assertive-bg);
}
.toggle-balanced {
@include toggle-small-style($toggle-on-balanced-bg);
}
.toggle-energized {
@include toggle-small-style($toggle-on-energized-bg);
}
.toggle-royal {
@include toggle-small-style($toggle-on-royal-bg);
}
.toggle-dark {
@include toggle-small-style($toggle-on-dark-bg);
}
}

View File

@@ -0,0 +1,188 @@
// iOS View Transitions
// -------------------------------
$ios-transition-duration: 500ms !default;
$ios-transition-timing-function: cubic-bezier(.36, .66, .04, 1) !default;
$ios-transition-container-bg-color: #000 !default;
[nav-view-transition="ios"] {
[nav-view="entering"],
[nav-view="leaving"] {
@include transition-duration( $ios-transition-duration );
@include transition-timing-function( $ios-transition-timing-function );
-webkit-transition-property: opacity, -webkit-transform, box-shadow;
transition-property: opacity, transform, box-shadow;
}
&[nav-view-direction="forward"],
&[nav-view-direction="back"] {
background-color: $ios-transition-container-bg-color;
}
[nav-view="active"],
&[nav-view-direction="forward"] [nav-view="entering"],
&[nav-view-direction="back"] [nav-view="leaving"] {
z-index: $z-index-view-above;
}
&[nav-view-direction="back"] [nav-view="entering"],
&[nav-view-direction="forward"] [nav-view="leaving"] {
z-index: $z-index-view-below;
}
}
// iOS Nav Bar Transitions
// -------------------------------
[nav-bar-transition="ios"] {
.title,
.buttons,
.back-text {
@include transition-duration( $ios-transition-duration );
@include transition-timing-function( $ios-transition-timing-function );
-webkit-transition-property: opacity, -webkit-transform;
transition-property: opacity, transform;
}
[nav-bar="active"],
[nav-bar="entering"] {
z-index: $z-index-bar-above;
.bar {
background: transparent;
}
}
[nav-bar="cached"] {
display: block;
.header-item {
display: none;
}
}
}
// Android View Transitions
// -------------------------------
$android-transition-duration: 200ms !default;
$android-transition-timing-function: cubic-bezier(0.4, 0.6, 0.2, 1) !default;
[nav-view-transition="android"] {
[nav-view="entering"],
[nav-view="leaving"] {
@include transition-duration( $android-transition-duration );
@include transition-timing-function( $android-transition-timing-function );
-webkit-transition-property: -webkit-transform;
transition-property: transform;
}
[nav-view="active"],
&[nav-view-direction="forward"] [nav-view="entering"],
&[nav-view-direction="back"] [nav-view="leaving"] {
z-index: $z-index-view-above;
}
&[nav-view-direction="back"] [nav-view="entering"],
&[nav-view-direction="forward"] [nav-view="leaving"] {
z-index: $z-index-view-below;
}
}
// Android Nav Bar Transitions
// -------------------------------
[nav-bar-transition="android"] {
.title,
.buttons {
@include transition-duration( $android-transition-duration );
@include transition-timing-function( $android-transition-timing-function );
-webkit-transition-property: opacity;
transition-property: opacity;
}
[nav-bar="active"],
[nav-bar="entering"] {
z-index: $z-index-bar-above;
.bar {
background: transparent;
}
}
[nav-bar="cached"] {
display: block;
.header-item {
display: none;
}
}
}
// Nav Swipe
// -------------------------------
[nav-swipe="fast"] {
[nav-view],
.title,
.buttons,
.back-text {
@include transition-duration(50ms);
@include transition-timing-function(linear);
}
}
[nav-swipe="slow"] {
[nav-view],
.title,
.buttons,
.back-text {
@include transition-duration(160ms);
@include transition-timing-function(linear);
}
}
// Transition Settings
// -------------------------------
[nav-view="cached"],
[nav-bar="cached"] {
display: none;
}
[nav-view="stage"] {
opacity: 0;
@include transition-duration( 0 );
}
[nav-bar="stage"] {
.title,
.buttons,
.back-text {
position: absolute;
opacity: 0;
@include transition-duration(0s);
}
}

View File

@@ -0,0 +1,166 @@
/**
* Typography
* --------------------------------------------------
*/
// Body text
// -------------------------
p {
margin: 0 0 ($line-height-computed / 2);
}
// Emphasis & misc
// -------------------------
small { font-size: 85%; }
cite { font-style: normal; }
// Alignment
// -------------------------
.text-left { text-align: left; }
.text-right { text-align: right; }
.text-center { text-align: center; }
// Headings
// -------------------------
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
color: $base-color;
font-weight: $headings-font-weight;
font-family: $headings-font-family;
line-height: $headings-line-height;
small {
font-weight: normal;
line-height: 1;
}
}
h1, .h1,
h2, .h2,
h3, .h3 {
margin-top: $line-height-computed;
margin-bottom: ($line-height-computed / 2);
&:first-child {
margin-top: 0;
}
+ h1, + .h1,
+ h2, + .h2,
+ h3, + .h3 {
margin-top: ($line-height-computed / 2);
}
}
h4, .h4,
h5, .h5,
h6, .h6 {
margin-top: ($line-height-computed / 2);
margin-bottom: ($line-height-computed / 2);
}
h1, .h1 { font-size: floor($font-size-base * 2.60); } // ~36px
h2, .h2 { font-size: floor($font-size-base * 2.15); } // ~30px
h3, .h3 { font-size: ceil($font-size-base * 1.70); } // ~24px
h4, .h4 { font-size: ceil($font-size-base * 1.25); } // ~18px
h5, .h5 { font-size: $font-size-base; }
h6, .h6 { font-size: ceil($font-size-base * 0.85); } // ~12px
h1 small, .h1 small { font-size: ceil($font-size-base * 1.70); } // ~24px
h2 small, .h2 small { font-size: ceil($font-size-base * 1.25); } // ~18px
h3 small, .h3 small,
h4 small, .h4 small { font-size: $font-size-base; }
// Description Lists
// -------------------------
dl {
margin-bottom: $line-height-computed;
}
dt,
dd {
line-height: $line-height-base;
}
dt {
font-weight: bold;
}
// Blockquotes
// -------------------------
blockquote {
margin: 0 0 $line-height-computed;
padding: ($line-height-computed / 2) $line-height-computed;
border-left: 5px solid gray;
p {
font-weight: 300;
font-size: ($font-size-base * 1.25);
line-height: 1.25;
}
p:last-child {
margin-bottom: 0;
}
small {
display: block;
line-height: $line-height-base;
&:before {
content: '\2014 \00A0';// EM DASH, NBSP;
}
}
}
// Quotes
// -------------------------
q:before,
q:after,
blockquote:before,
blockquote:after {
content: "";
}
// Addresses
// -------------------------
address {
display: block;
margin-bottom: $line-height-computed;
font-style: normal;
line-height: $line-height-base;
}
// Links
// -------------------------
a {
color: $link-color;
}
a.subdued {
padding-right: 10px;
color: #888;
text-decoration: none;
&:hover {
text-decoration: none;
}
&:last-child {
padding-right: 0;
}
}

View File

@@ -0,0 +1,296 @@
/**
* Utility Classes
* --------------------------------------------------
*/
.hide {
display: none;
}
.opacity-hide {
opacity: 0;
}
.grade-b .opacity-hide,
.grade-c .opacity-hide {
opacity: 1;
display: none;
}
.show {
display: block;
}
.opacity-show {
opacity: 1;
}
.invisible {
visibility: hidden;
}
.keyboard-open .hide-on-keyboard-open {
display: none;
}
.keyboard-open .tabs.hide-on-keyboard-open + .pane .has-tabs,
.keyboard-open .bar-footer.hide-on-keyboard-open + .pane .has-footer {
bottom: 0;
}
.inline {
display: inline-block;
}
.disable-pointer-events {
pointer-events: none;
}
.enable-pointer-events {
pointer-events: auto;
}
.disable-user-behavior {
// used to prevent the browser from doing its native behavior. this doesnt
// prevent the scrolling, but cancels the contextmenu, tap highlighting, etc
@include user-select(none);
@include touch-callout(none);
@include tap-highlight-transparent();
-webkit-user-drag: none;
-ms-touch-action: none;
-ms-content-zooming: none;
}
// Fill the screen to block clicks (a better pointer-events: none) for the body
// to avoid full-page reflows and paints which can cause flickers
.click-block {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
opacity: 0;
z-index: $z-index-click-block;
@include translate3d(0, 0, 0);
overflow: hidden;
}
.click-block-hide {
@include translate3d(-9999px, 0, 0);
}
.no-resize {
resize: none;
}
.block {
display: block;
clear: both;
&:after {
display: block;
visibility: hidden;
clear: both;
height: 0;
content: ".";
}
}
.full-image {
width: 100%;
}
.clearfix {
*zoom: 1;
&:before,
&:after {
display: table;
content: "";
// Fixes Opera/contenteditable bug:
// http://nicolasgallagher.com/micro-clearfix-hack/#comment-36952
line-height: 0;
}
&:after {
clear: both;
}
}
/**
* Content Padding
* --------------------------------------------------
*/
.padding {
padding: $content-padding;
}
.padding-top,
.padding-vertical {
padding-top: $content-padding;
}
.padding-right,
.padding-horizontal {
padding-right: $content-padding;
}
.padding-bottom,
.padding-vertical {
padding-bottom: $content-padding;
}
.padding-left,
.padding-horizontal {
padding-left: $content-padding;
}
/**
* Scrollable iFrames
* --------------------------------------------------
*/
.iframe-wrapper {
position: fixed;
-webkit-overflow-scrolling: touch;
overflow: scroll;
iframe {
height: 100%;
width: 100%;
}
}
/**
* Rounded
* --------------------------------------------------
*/
.rounded {
border-radius: $border-radius-base;
}
/**
* Utility Colors
* --------------------------------------------------
* Utility colors are added to help set a naming convention. You'll
* notice we purposely do not use words like "red" or "blue", but
* instead have colors which represent an emotion or generic theme.
*/
.light, a.light {
color: $light;
}
.light-bg {
background-color: $light;
}
.light-border {
border-color: $button-light-border;
}
.stable, a.stable {
color: $stable;
}
.stable-bg {
background-color: $stable;
}
.stable-border {
border-color: $button-stable-border;
}
.positive, a.positive {
color: $positive;
}
.positive-bg {
background-color: $positive;
}
.positive-border {
border-color: $button-positive-border;
}
.calm, a.calm {
color: $calm;
}
.calm-bg {
background-color: $calm;
}
.calm-border {
border-color: $button-calm-border;
}
.assertive, a.assertive {
color: $assertive;
}
.assertive-bg {
background-color: $assertive;
}
.assertive-border {
border-color: $button-assertive-border;
}
.balanced, a.balanced {
color: $balanced;
}
.balanced-bg {
background-color: $balanced;
}
.balanced-border {
border-color: $button-balanced-border;
}
.energized, a.energized {
color: $energized;
}
.energized-bg {
background-color: $energized;
}
.energized-border {
border-color: $button-energized-border;
}
.royal, a.royal {
color: $royal;
}
.royal-bg {
background-color: $royal;
}
.royal-border {
border-color: $button-royal-border;
}
.dark, a.dark {
color: $dark;
}
.dark-bg {
background-color: $dark;
}
.dark-border {
border-color: $button-dark-border;
}
[collection-repeat] {
/* Position is set by transforms */
left: 0 !important;
top: 0 !important;
position: absolute !important;
z-index: 1;
}
.collection-repeat-container {
position: relative;
z-index: 1; //make sure it's above the after-container
}
.collection-repeat-after-container {
z-index: 0;
display: block;
/* when scrolling horizontally, make sure the after container doesn't take up 100% width */
&.horizontal {
display: inline-block;
}
}
// ng-show fix for windows phone
// https://www.hoessl.eu/2014/12/on-using-the-ionic-framework-for-windows-phone-8-1-apps/
[ng\:cloak], [ng-cloak], [data-ng-cloak], [x-ng-cloak], .ng-cloak,
.x-ng-cloak, .ng-hide:not(.ng-hide-animate) {
display: none !important;
}

View File

@@ -0,0 +1,764 @@
// Colors
// -------------------------------
$light: #fff !default;
$stable: #f8f8f8 !default;
$positive: #387ef5 !default;
$calm: #11c1f3 !default;
$balanced: #33cd5f !default;
$energized: #ffc900 !default;
$assertive: #ef473a !default;
$royal: #886aea !default;
$dark: #444 !default;
// Base
// -------------------------------
$font-family-sans-serif: '-apple-system', "Helvetica Neue", "Roboto", "Segoe UI", sans-serif !default;
$font-family-light-sans-serif: '-apple-system', "HelveticaNeue-Light", "Roboto-Light", "Segoe UI-Light", sans-serif-light !default;
$font-family-serif: serif !default;
$font-family-monospace: monospace !default;
$font-family-base: $font-family-sans-serif !default;
$font-size-base: 14px !default;
$font-size-large: 18px !default;
$font-size-small: 11px !default;
$line-height-base: 1.428571429 !default; // 20/14
$line-height-computed: floor($font-size-base * $line-height-base) !default; // ~20px
$line-height-large: 1.33 !default;
$line-height-small: 1.5 !default;
$headings-font-family: $font-family-base !default;
$headings-font-weight: 500 !default;
$headings-line-height: 1.2 !default;
$base-background-color: #fff !default;
$base-color: #000 !default;
$link-color: $positive !default;
$link-hover-color: darken($link-color, 15%) !default;
$content-padding: 10px !default;
$padding-base-vertical: 6px !default;
$padding-base-horizontal: 12px !default;
$padding-large-vertical: 10px !default;
$padding-large-horizontal: 16px !default;
$padding-small-vertical: 5px !default;
$padding-small-horizontal: 10px !default;
$border-radius-base: 4px !default;
$border-radius-large: 6px !default;
$border-radius-small: 3px !default;
// Content
// -------------------------------
$scroll-refresh-icon-color: #666666 !default;
// Buttons
// -------------------------------
$button-color: #222 !default;
$button-block-margin: 10px !default;
$button-clear-padding: 6px !default;
$button-border-radius: 4px !default;
$button-border-width: 1px !default;
$button-font-size: 16px !default;
$button-height: 42px !default;
$button-padding: 12px !default;
$button-icon-size: 24px !default;
$button-large-font-size: 20px !default;
$button-large-height: 54px !default;
$button-large-padding: 16px !default;
$button-large-icon-size: 32px !default;
$button-small-font-size: 12px !default;
$button-small-height: 28px !default;
$button-small-padding: 4px !default;
$button-small-icon-size: 16px !default;
$button-bar-button-font-size: 13px !default;
$button-bar-button-height: 32px !default;
$button-bar-button-padding: 8px !default;
$button-bar-button-icon-size: 20px !default;
$button-default-border: transparent;
$button-default-active-border:null;
$button-light-bg: $light !default;
$button-light-text: #444 !default;
$button-light-border: #ddd !default;
$button-light-active-bg: #fafafa !default;
$button-light-active-border: #ccc !default;
$button-stable-bg: $stable !default;
$button-stable-text: #444 !default;
$button-stable-border: #b2b2b2 !default;
$button-stable-active-bg: #e5e5e5 !default;
$button-stable-active-border: #a2a2a2 !default;
$button-positive-bg: $positive !default;
$button-positive-text: #fff !default;
$button-positive-border: darken($positive, 10%) !default;
$button-positive-active-bg: darken($positive, 10%) !default;
$button-positive-active-border: darken($positive, 10%) !default;
$button-calm-bg: $calm !default;
$button-calm-text: #fff !default;
$button-calm-border: darken($calm, 10%) !default;
$button-calm-active-bg: darken($calm, 10%) !default;
$button-calm-active-border: darken($calm, 10%) !default;
$button-assertive-bg: $assertive !default;
$button-assertive-text: #fff !default;
$button-assertive-border: darken($assertive, 10%) !default;
$button-assertive-active-bg: darken($assertive, 10%) !default;
$button-assertive-active-border: darken($assertive, 10%) !default;
$button-balanced-bg: $balanced !default;
$button-balanced-text: #fff !default;
$button-balanced-border: darken($balanced, 10%) !default;
$button-balanced-active-bg: darken($balanced, 10%) !default;
$button-balanced-active-border: darken($balanced, 10%) !default;
$button-energized-bg: $energized !default;
$button-energized-text: #fff !default;
$button-energized-border: darken($energized, 5%) !default;
$button-energized-active-bg: darken($energized, 5%) !default;
$button-energized-active-border: darken($energized, 5%) !default;
$button-royal-bg: $royal !default;
$button-royal-text: #fff !default;
$button-royal-border: darken($royal, 8%) !default;
$button-royal-active-bg: darken($royal, 8%) !default;
$button-royal-active-border: darken($royal, 8%) !default;
$button-dark-bg: $dark !default;
$button-dark-text: #fff !default;
$button-dark-border: #111 !default;
$button-dark-active-bg: #262626 !default;
$button-dark-active-border: #000 !default;
$button-default-bg: $button-stable-bg !default;
$button-default-text: $button-stable-text !default;
$button-default-border: $button-stable-border !default;
$button-default-active-bg: $button-stable-active-bg !default;
$button-default-active-border: $button-stable-active-border !default;
// Bars
// -------------------------------
$bar-height: 44px !default;
$bar-title-font-size: 17px !default;
$bar-padding-portrait: 5px !default;
$bar-padding-landscape: 5px !default;
$bar-transparency: 1 !default;
$bar-footer-height: $bar-height !default;
$bar-subheader-height: $bar-height !default;
$bar-subfooter-height: $bar-height !default;
$bar-light-bg: rgba($button-light-bg, $bar-transparency) !default;
$bar-light-text: $button-light-text !default;
$bar-light-border: $button-light-border !default;
$bar-light-active-bg: $button-light-active-bg !default;
$bar-light-active-border: $button-light-active-border !default;
$bar-stable-bg: rgba($button-stable-bg, $bar-transparency) !default;
$bar-stable-text: $button-stable-text !default;
$bar-stable-border: $button-stable-border !default;
$bar-stable-active-bg: $button-stable-active-bg !default;
$bar-stable-active-border: $button-stable-active-border !default;
$bar-positive-bg: rgba($button-positive-bg, $bar-transparency) !default;
$bar-positive-text: $button-positive-text !default;
$bar-positive-border: $button-positive-border !default;
$bar-positive-active-bg: $button-positive-active-bg !default;
$bar-positive-active-border: $button-positive-active-border !default;
$bar-calm-bg: rgba($button-calm-bg, $bar-transparency) !default;
$bar-calm-text: $button-calm-text !default;
$bar-calm-border: $button-calm-border !default;
$bar-calm-active-bg: $button-calm-active-bg !default;
$bar-calm-active-border: $button-calm-active-border !default;
$bar-assertive-bg: rgba($button-assertive-bg, $bar-transparency) !default;
$bar-assertive-text: $button-assertive-text !default;
$bar-assertive-border: $button-assertive-border !default;
$bar-assertive-active-bg: $button-assertive-active-bg !default;
$bar-assertive-active-border: $button-assertive-active-border !default;
$bar-balanced-bg: rgba($button-balanced-bg, $bar-transparency) !default;
$bar-balanced-text: $button-balanced-text !default;
$bar-balanced-border: $button-balanced-border !default;
$bar-balanced-active-bg: $button-balanced-active-bg !default;
$bar-balanced-active-border: $button-balanced-active-border !default;
$bar-energized-bg: rgba($button-energized-bg, $bar-transparency) !default;
$bar-energized-text: $button-energized-text !default;
$bar-energized-border: $button-energized-border !default;
$bar-energized-active-bg: $button-energized-active-bg !default;
$bar-energized-active-border: $button-energized-active-border !default;
$bar-royal-bg: rgba($button-royal-bg, $bar-transparency) !default;
$bar-royal-text: $button-royal-text !default;
$bar-royal-border: $button-royal-border !default;
$bar-royal-active-bg: $button-royal-active-bg !default;
$bar-royal-active-border: $button-royal-active-border !default;
$bar-dark-bg: rgba($button-dark-bg, $bar-transparency) !default;
$bar-dark-text: $button-dark-text !default;
$bar-dark-border: $button-dark-border !default;
$bar-dark-active-bg: $button-dark-active-bg !default;
$bar-dark-active-border: $button-dark-active-border !default;
$bar-default-bg: $bar-light-bg !default;
$bar-default-text: $bar-light-text !default;
$bar-default-border: $bar-light-border !default;
$bar-default-active-bg: $bar-light-active-bg !default;
$bar-default-active-border: $bar-light-active-border !default;
// Tabs
// -------------------------------
$tabs-height: 49px !default;
$tabs-text-font-size: 14px !default;
$tabs-text-font-size-side-icon: 10px !default;
$tabs-icon-size: 32px !default;
$tabs-badge-padding: 1px 6px !default;
$tabs-badge-font-size: 12px !default;
$tabs-light-bg: $button-light-bg !default;
$tabs-light-border: $button-light-border !default;
$tabs-light-text: $button-light-text !default;
$tabs-stable-bg: $button-stable-bg !default;
$tabs-stable-border: $button-stable-border !default;
$tabs-stable-text: $button-stable-text !default;
$tabs-positive-bg: $button-positive-bg !default;
$tabs-positive-border: $button-positive-border !default;
$tabs-positive-text: $button-positive-text !default;
$tabs-calm-bg: $button-calm-bg !default;
$tabs-calm-border: $button-calm-border !default;
$tabs-calm-text: $button-calm-text !default;
$tabs-assertive-bg: $button-assertive-bg !default;
$tabs-assertive-border: $button-assertive-border !default;
$tabs-assertive-text: $button-assertive-text !default;
$tabs-balanced-bg: $button-balanced-bg !default;
$tabs-balanced-border: $button-balanced-border !default;
$tabs-balanced-text: $button-balanced-text !default;
$tabs-energized-bg: $button-energized-bg !default;
$tabs-energized-border: $button-energized-border !default;
$tabs-energized-text: $button-energized-text !default;
$tabs-royal-bg: $button-royal-bg !default;
$tabs-royal-border: $button-royal-border !default;
$tabs-royal-text: $button-royal-text !default;
$tabs-dark-bg: $button-dark-bg !default;
$tabs-dark-border: $button-dark-border !default;
$tabs-dark-text: $button-dark-text !default;
$tabs-default-bg: $tabs-stable-bg !default;
$tabs-default-border: $tabs-stable-border !default;
$tabs-default-text: $tabs-stable-text !default;
$tab-item-max-width: 150px !default;
$tabs-off-opacity: 0.4 !default;
$tabs-striped-off-opacity: $tabs-off-opacity !default;
$tabs-striped-off-color: #000 !default;
$tabs-striped-border-width: 2px !default;
// Items
// -------------------------------
$item-font-size: 16px !default;
$item-border-width: 1px !default;
$item-padding: 16px !default;
$item-button-font-size: 18px !default;
$item-button-line-height: 32px !default;
$item-icon-font-size: 32px !default;
$item-icon-fill-font-size: 28px !default;
$item-icon-accessory-color: #ccc !default;
$item-icon-accessory-font-size: 16px !default;
$item-avatar-width: 40px !default;
$item-avatar-height: 40px !default;
$item-avatar-border-radius: 50% !default;
$item-thumbnail-width: 80px !default;
$item-thumbnail-height: 80px !default;
$item-thumbnail-margin: 10px !default;
$item-divider-bg: #f5f5f5 !default;
$item-divider-color: #222 !default;
$item-divider-padding: 5px 15px !default;
$item-light-bg: $button-light-bg !default;
$item-light-border: $button-light-border !default;
$item-light-text: $button-light-text !default;
$item-light-active-bg: $button-light-active-bg !default;
$item-light-active-border: $button-light-active-border !default;
$item-stable-bg: $button-stable-bg !default;
$item-stable-border: $button-stable-border !default;
$item-stable-text: $button-stable-text !default;
$item-stable-active-bg: $button-stable-active-bg !default;
$item-stable-active-border: $button-stable-active-border !default;
$item-positive-bg: $button-positive-bg !default;
$item-positive-border: $button-positive-border !default;
$item-positive-text: $button-positive-text !default;
$item-positive-active-bg: $button-positive-active-bg !default;
$item-positive-active-border: $button-positive-active-border !default;
$item-calm-bg: $button-calm-bg !default;
$item-calm-border: $button-calm-border !default;
$item-calm-text: $button-calm-text !default;
$item-calm-active-bg: $button-calm-active-bg !default;
$item-calm-active-border: $button-calm-active-border !default;
$item-assertive-bg: $button-assertive-bg !default;
$item-assertive-border: $button-assertive-border !default;
$item-assertive-text: $button-assertive-text !default;
$item-assertive-active-bg: $button-assertive-active-bg !default;
$item-assertive-active-border: $button-assertive-active-border !default;
$item-balanced-bg: $button-balanced-bg !default;
$item-balanced-border: $button-balanced-border !default;
$item-balanced-text: $button-balanced-text !default;
$item-balanced-active-bg: $button-balanced-active-bg !default;
$item-balanced-active-border: $button-balanced-active-border !default;
$item-energized-bg: $button-energized-bg !default;
$item-energized-border: $button-energized-border !default;
$item-energized-text: $button-energized-text !default;
$item-energized-active-bg: $button-energized-active-bg !default;
$item-energized-active-border: $button-energized-active-border !default;
$item-royal-bg: $button-royal-bg !default;
$item-royal-border: $button-royal-border !default;
$item-royal-text: $button-royal-text !default;
$item-royal-active-bg: $button-royal-active-bg !default;
$item-royal-active-border: $button-royal-active-border !default;
$item-dark-bg: $button-dark-bg !default;
$item-dark-border: $button-dark-border !default;
$item-dark-text: $button-dark-text !default;
$item-dark-active-bg: $button-dark-active-bg !default;
$item-dark-active-border: $button-dark-active-border !default;
$item-default-bg: $item-light-bg !default;
$item-default-border: $item-light-border !default;
$item-default-text: $item-light-text !default;
$item-default-active-bg: #D9D9D9 !default;
$item-default-active-border: $item-light-active-border !default;
// Item Editing
// -------------------------------
$item-edit-transition-duration: 250ms !default;
$item-edit-transition-function: ease-in-out !default;
$item-remove-transition-duration: 300ms !default;
$item-remove-transition-function: ease-in !default;
$item-remove-descendents-transition-function: cubic-bezier(.25,.81,.24,1) !default;
$item-left-edit-left: 8px !default; // item's left side edit's "left" property
$item-right-edit-open-width: 50px !default;
$item-left-edit-open-width: 50px !default;
$item-delete-icon-size: 24px !default;
$item-delete-icon-color: $assertive !default;
$item-reorder-icon-size: 32px !default;
$item-reorder-icon-color: $dark !default;
// Lists
// -------------------------------
$list-header-bg: transparent !default;
$list-header-color: #222 !default;
$list-header-padding: 5px 15px !default;
$list-header-margin-top: 20px !default;
// Cards
// -------------------------------
$card-header-bg: #F5F5F5 !default;
$card-body-bg: #fff !default;
$card-footer-bg: #F5F5F5 !default;
$card-padding: 10px !default;
$card-border-width: 1px !default;
$card-border-color: #ccc !default;
$card-border-radius: 2px !default;
$card-box-shadow: 0 1px 3px rgba(0, 0, 0, .3) !default;
// Forms
// -------------------------------
$input-height-base: ($line-height-computed + ($padding-base-vertical * 2) + 2) !default;
$input-height-large: (floor($font-size-large * $line-height-large) + ($padding-large-vertical * 2) + 2) !default;
$input-height-small: (floor($font-size-small * $line-height-small) + ($padding-small-vertical * 2) + 2) !default;
$input-bg: $light !default;
$input-bg-disabled: $stable !default;
$input-color: #111 !default;
$input-border: $item-default-border !default;
$input-border-width: $item-border-width !default;
$input-label-color: $dark !default;
$input-color-placeholder: lighten($dark, 40%) !default;
// Progress
// -------------------------------
$progress-width: 100% !default;
$progress-margin: 15px auto !default;
// Toggle
// -------------------------------
$toggle-width: 51px !default;
$toggle-height: 31px !default;
$toggle-border-width: 2px !default;
$toggle-border-radius: 20px !default;
$toggle-handle-width: $toggle-height - ($toggle-border-width * 2) !default;
$toggle-handle-height: $toggle-handle-width !default;
$toggle-handle-radius: $toggle-handle-width !default;
$toggle-handle-dragging-bg-color: darken(#fff, 5%) !default;
$toggle-off-bg-color: #fff !default;
$toggle-off-border-color: #e6e6e6 !default;
$toggle-on-light-bg: $button-light-border !default;
$toggle-on-light-border: $toggle-on-light-bg !default;
$toggle-on-stable-bg: $button-stable-border !default;
$toggle-on-stable-border: $toggle-on-stable-bg !default;
$toggle-on-positive-bg: $positive !default;
$toggle-on-positive-border: $toggle-on-positive-bg !default;
$toggle-on-calm-bg: $calm !default;
$toggle-on-calm-border: $toggle-on-calm-bg !default;
$toggle-on-assertive-bg: $assertive !default;
$toggle-on-assertive-border: $toggle-on-assertive-bg !default;
$toggle-on-balanced-bg: $balanced !default;
$toggle-on-balanced-border: $toggle-on-balanced-bg !default;
$toggle-on-energized-bg: $energized !default;
$toggle-on-energized-border: $toggle-on-energized-bg !default;
$toggle-on-royal-bg: $royal !default;
$toggle-on-royal-border: $toggle-on-royal-bg !default;
$toggle-on-dark-bg: $dark !default;
$toggle-on-dark-border: $toggle-on-dark-bg !default;
$toggle-on-default-bg: #4cd964 !default;
$toggle-on-default-border: $toggle-on-default-bg !default;
$toggle-handle-off-bg-color: $light !default;
$toggle-handle-on-bg-color: $toggle-handle-off-bg-color !default;
$toggle-transition-duration: .3s !default;
$toggle-hit-area-expansion: 5px;
// Checkbox
// -------------------------------
$checkbox-width: 28px !default;
$checkbox-height: 28px !default;
$checkbox-border-radius: $checkbox-width !default;
$checkbox-border-width: 1px !default;
$checkbox-off-bg-color: #fff !default;
$checkbox-off-border-light: $button-light-border !default;
$checkbox-on-bg-light: $button-light-border !default;
$checkbox-off-border-stable: $button-stable-border !default;
$checkbox-on-bg-stable: $button-stable-border !default;
$checkbox-off-border-positive: $positive !default;
$checkbox-on-bg-positive: $positive !default;
$checkbox-off-border-calm: $calm !default;
$checkbox-on-bg-calm: $calm !default;
$checkbox-off-border-assertive: $assertive !default;
$checkbox-on-bg-assertive: $assertive !default;
$checkbox-off-border-balanced: $balanced !default;
$checkbox-on-bg-balanced: $balanced !default;
$checkbox-off-border-energized: $energized !default;
$checkbox-on-bg-energized: $energized !default;
$checkbox-off-border-royal: $royal !default;
$checkbox-on-bg-royal: $royal !default;
$checkbox-off-border-dark: $dark !default;
$checkbox-on-bg-dark: $dark !default;
$checkbox-off-border-default: $button-light-border !default;
$checkbox-on-bg-default: $positive !default;
$checkbox-on-border-default: $positive !default;
$checkbox-check-width: 1px !default;
$checkbox-check-color: #fff !default;
// Range
// -------------------------------
$range-track-height: 2px !default;
$range-slider-width: 28px !default;
$range-slider-height: 28px !default;
$range-slider-border-radius: 50% !default;
$range-icon-size: 24px !default;
$range-slider-box-shadow: 0 0 2px rgba(0,0,0,.3), 0 3px 5px rgba(0,0,0,0.2) !default;
$range-light-track-bg: $button-light-border !default;
$range-stable-track-bg: $button-stable-border !default;
$range-positive-track-bg: $button-positive-bg !default;
$range-calm-track-bg: $button-calm-bg !default;
$range-balanced-track-bg: $button-balanced-bg !default;
$range-assertive-track-bg: $button-assertive-bg !default;
$range-energized-track-bg: $button-energized-bg !default;
$range-royal-track-bg: $button-royal-bg !default;
$range-dark-track-bg: $button-dark-bg !default;
$range-default-track-bg: #ccc !default;
// Menus
// -------------------------------
$menu-bg: #fff !default;
$menu-width: 275px !default;
$menu-animation-speed: 200ms !default;
$menu-side-shadow: -1px 0px 2px rgba(0, 0, 0, 0.2), 1px 0px 2px rgba(0,0,0,0.2) !default;
// Modals
// -------------------------------
$modal-bg-color: #fff !default;
$modal-backdrop-bg-active: #000 !default;
$modal-backdrop-bg-inactive: rgba(0,0,0,0) !default;
$modal-inset-mode-break-point: 680px !default; // @media min-width
$modal-inset-mode-top: 20% !default;
$modal-inset-mode-right: 20% !default;
$modal-inset-mode-bottom: 20% !default;
$modal-inset-mode-left: 20% !default;
$modal-inset-mode-min-height: 240px !default;
// Popovers
// -------------------------------
$popover-bg-color: $light !default;
$popover-backdrop-bg-active: rgba(0,0,0,0.1) !default;
$popover-backdrop-bg-inactive: rgba(0,0,0,0) !default;
$popover-width: 220px !default;
$popover-height: 280px !default;
$popover-large-break-point: 680px !default;
$popover-large-width: 360px !default;
$popover-box-shadow: 0 1px 3px rgba(0,0,0,0.4) !default;
$popover-border-radius: 2px !default;
$popover-box-shadow-ios: 0 0 40px rgba(0,0,0,0.08) !default;
$popover-border-radius-ios: 10px !default;
$popover-bg-color-android: #fafafa !default;
$popover-box-shadow-android: 0 2px 6px rgba(0,0,0,0.35) !default;
// Grids
// -------------------------------
$grid-padding-width: 10px !default;
$grid-responsive-sm-break: 567px !default; // smaller than landscape phone
$grid-responsive-md-break: 767px !default; // smaller than portrait tablet
$grid-responsive-lg-break: 1023px !default; // smaller than landscape tablet
// Action Sheets
// -------------------------------
$sheet-margin: 8px !default;
$sheet-border-radius: 4px !default;
$sheet-options-bg-color: #f1f2f3 !default;
$sheet-options-bg-active-color: #e4e5e7 !default;
$sheet-options-text-color: #007aff !default;
$sheet-options-border-color: #d1d3d6 !default;
// Popups
// -------------------------------
$popup-width: 250px !default;
$popup-enter-animation: superScaleIn !default;
$popup-enter-animation-duration: 0.2s !default;
$popup-leave-animation-duration: 0.1s !default;
$popup-border-radius: 0px !default;
$popup-background-color: rgba(255,255,255,0.9) !default;
$popup-button-border-radius: 2px !default;
$popup-button-line-height: 20px !default;
$popup-button-min-height: 45px !default;
// Loading
// -------------------------------
$loading-text-color: #fff !default;
$loading-bg-color: rgba(0,0,0,0.7) !default;
$loading-padding: 20px !default;
$loading-border-radius: 5px !default;
$loading-font-size: 15px !default;
$loading-backdrop-fadein-duration:0.1s !default;
$loading-backdrop-bg-color: rgba(0,0,0,0.4) !default;
// Badges
// -------------------------------
$badge-font-size: 14px !default;
$badge-line-height: 16px !default;
$badge-font-weight: bold !default;
$badge-border-radius: 10px !default;
$badge-light-bg: $button-light-bg !default;
$badge-light-text: $button-light-text !default;
$badge-stable-bg: $button-stable-bg !default;
$badge-stable-text: $button-stable-text !default;
$badge-positive-bg: $button-positive-bg !default;
$badge-positive-text: $button-positive-text !default;
$badge-calm-bg: $button-calm-bg !default;
$badge-calm-text: $button-calm-text !default;
$badge-balanced-bg: $button-balanced-bg !default;
$badge-balanced-text: $button-balanced-text !default;
$badge-assertive-bg: $button-assertive-bg !default;
$badge-assertive-text: $button-assertive-text !default;
$badge-energized-bg: $button-energized-bg !default;
$badge-energized-text: $button-energized-text !default;
$badge-royal-bg: $button-royal-bg !default;
$badge-royal-text: $button-royal-text !default;
$badge-dark-bg: $button-dark-bg !default;
$badge-dark-text: $button-dark-text !default;
$badge-default-bg: transparent !default;
$badge-default-text: #AAAAAA !default;
// Spinners
// -------------------------------
$spinner-width: 28px !default;
$spinner-height: 28px !default;
$spinner-light-stroke: $light !default;
$spinner-light-fill: $light !default;
$spinner-stable-stroke: $stable !default;
$spinner-stable-fill: $stable !default;
$spinner-positive-stroke: $positive !default;
$spinner-positive-fill: $positive !default;
$spinner-calm-stroke: $calm !default;
$spinner-calm-fill: $calm !default;
$spinner-balanced-stroke: $balanced !default;
$spinner-balanced-fill: $balanced !default;
$spinner-assertive-stroke: $assertive !default;
$spinner-assertive-fill: $assertive !default;
$spinner-energized-stroke: $energized !default;
$spinner-energized-fill: $energized !default;
$spinner-royal-stroke: $royal !default;
$spinner-royal-fill: $royal !default;
$spinner-dark-stroke: $dark !default;
$spinner-dark-fill: $dark !default;
$spinner-default-stroke: $dark !default;
$spinner-default-fill: $dark !default;
// Z-Indexes
// -------------------------------
$z-index-bar-title: 0 !default;
$z-index-item-drag: 0 !default;
$z-index-item-edit: 0 !default;
$z-index-menu: 0 !default;
$z-index-badge: 1 !default;
$z-index-bar-button: 1 !default;
$z-index-item-options: 1 !default;
$z-index-pane: 1 !default;
$z-index-slider-pager: 1 !default;
$z-index-view: 1 !default;
$z-index-view-below: 2 !default;
$z-index-item: 2 !default;
$z-index-item-checkbox: 3 !default;
$z-index-item-radio: 3 !default;
$z-index-item-reorder: 3 !default;
$z-index-item-toggle: 3 !default;
$z-index-view-above: 3 !default;
$z-index-tabs: 5 !default;
$z-index-item-reordering: 9 !default;
$z-index-bar: 9 !default;
$z-index-bar-above: 10 !default;
$z-index-menu-scroll-content: 10 !default;
$z-index-modal: 10 !default;
$z-index-popover: 10 !default;
$z-index-action-sheet: 11 !default;
$z-index-backdrop: 11 !default;
$z-index-menu-bar-header: 11 !default;
$z-index-scroll-content-false: 11 !default;
$z-index-popup: 12 !default;
$z-index-loading: 13 !default;
$z-index-scroll-bar: 9999 !default;
$z-index-click-block: 99999 !default;
// Platform
// -------------------------------
$ios-statusbar-height: 20px !default;

View File

@@ -0,0 +1,54 @@
@charset "UTF-8";
@import
// Ionicons
"ionicons/ionicons.scss",
// Variables
"mixins",
"variables",
// Base
"reset",
"scaffolding",
"type",
// Components
"action-sheet",
"backdrop",
"bar",
"tabs",
"menu",
"modal",
"popover",
"popup",
"loading",
"items",
"list",
"badge",
"slide-box",
"slides",
"refresher",
"spinner",
// Forms
"form",
"checkbox",
"toggle",
"radio",
"range",
"select",
"progress",
// Buttons
"button",
"button-bar",
// Util
"grid",
"util",
"platform",
// Animations
"animations",
"transitions";

View File

@@ -0,0 +1,28 @@
// Ionicons Font Path
// --------------------------
@font-face {
font-family: $ionicons-font-family;
src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}");
src:url("#{$ionicons-font-path}/ionicons.eot?v=#{$ionicons-version}#iefix") format("embedded-opentype"),
url("#{$ionicons-font-path}/ionicons.ttf?v=#{$ionicons-version}") format("truetype"),
url("#{$ionicons-font-path}/ionicons.woff?v=#{$ionicons-version}") format("woff"),
url("#{$ionicons-font-path}/ionicons.woff") format("woff"), /* for WP8 */
url("#{$ionicons-font-path}/ionicons.svg?v=#{$ionicons-version}#Ionicons") format("svg");
font-weight: normal;
font-style: normal;
}
.ion {
display: inline-block;
font-family: $ionicons-font-family;
speak: none;
font-style: normal;
font-weight: normal;
font-variant: normal;
text-transform: none;
text-rendering: auto;
line-height: 1;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}

File diff suppressed because it is too large Load Diff

View File

@@ -0,0 +1,741 @@
// Ionicons Variables
// --------------------------
$ionicons-font-path: "../fonts" !default;
$ionicons-font-family: "Ionicons" !default;
$ionicons-version: "2.0.1" !default;
$ionicons-prefix: ion- !default;
$ionicon-var-alert: "\f101";
$ionicon-var-alert-circled: "\f100";
$ionicon-var-android-add: "\f2c7";
$ionicon-var-android-add-circle: "\f359";
$ionicon-var-android-alarm-clock: "\f35a";
$ionicon-var-android-alert: "\f35b";
$ionicon-var-android-apps: "\f35c";
$ionicon-var-android-archive: "\f2c9";
$ionicon-var-android-arrow-back: "\f2ca";
$ionicon-var-android-arrow-down: "\f35d";
$ionicon-var-android-arrow-dropdown: "\f35f";
$ionicon-var-android-arrow-dropdown-circle: "\f35e";
$ionicon-var-android-arrow-dropleft: "\f361";
$ionicon-var-android-arrow-dropleft-circle: "\f360";
$ionicon-var-android-arrow-dropright: "\f363";
$ionicon-var-android-arrow-dropright-circle: "\f362";
$ionicon-var-android-arrow-dropup: "\f365";
$ionicon-var-android-arrow-dropup-circle: "\f364";
$ionicon-var-android-arrow-forward: "\f30f";
$ionicon-var-android-arrow-up: "\f366";
$ionicon-var-android-attach: "\f367";
$ionicon-var-android-bar: "\f368";
$ionicon-var-android-bicycle: "\f369";
$ionicon-var-android-boat: "\f36a";
$ionicon-var-android-bookmark: "\f36b";
$ionicon-var-android-bulb: "\f36c";
$ionicon-var-android-bus: "\f36d";
$ionicon-var-android-calendar: "\f2d1";
$ionicon-var-android-call: "\f2d2";
$ionicon-var-android-camera: "\f2d3";
$ionicon-var-android-cancel: "\f36e";
$ionicon-var-android-car: "\f36f";
$ionicon-var-android-cart: "\f370";
$ionicon-var-android-chat: "\f2d4";
$ionicon-var-android-checkbox: "\f374";
$ionicon-var-android-checkbox-blank: "\f371";
$ionicon-var-android-checkbox-outline: "\f373";
$ionicon-var-android-checkbox-outline-blank: "\f372";
$ionicon-var-android-checkmark-circle: "\f375";
$ionicon-var-android-clipboard: "\f376";
$ionicon-var-android-close: "\f2d7";
$ionicon-var-android-cloud: "\f37a";
$ionicon-var-android-cloud-circle: "\f377";
$ionicon-var-android-cloud-done: "\f378";
$ionicon-var-android-cloud-outline: "\f379";
$ionicon-var-android-color-palette: "\f37b";
$ionicon-var-android-compass: "\f37c";
$ionicon-var-android-contact: "\f2d8";
$ionicon-var-android-contacts: "\f2d9";
$ionicon-var-android-contract: "\f37d";
$ionicon-var-android-create: "\f37e";
$ionicon-var-android-delete: "\f37f";
$ionicon-var-android-desktop: "\f380";
$ionicon-var-android-document: "\f381";
$ionicon-var-android-done: "\f383";
$ionicon-var-android-done-all: "\f382";
$ionicon-var-android-download: "\f2dd";
$ionicon-var-android-drafts: "\f384";
$ionicon-var-android-exit: "\f385";
$ionicon-var-android-expand: "\f386";
$ionicon-var-android-favorite: "\f388";
$ionicon-var-android-favorite-outline: "\f387";
$ionicon-var-android-film: "\f389";
$ionicon-var-android-folder: "\f2e0";
$ionicon-var-android-folder-open: "\f38a";
$ionicon-var-android-funnel: "\f38b";
$ionicon-var-android-globe: "\f38c";
$ionicon-var-android-hand: "\f2e3";
$ionicon-var-android-hangout: "\f38d";
$ionicon-var-android-happy: "\f38e";
$ionicon-var-android-home: "\f38f";
$ionicon-var-android-image: "\f2e4";
$ionicon-var-android-laptop: "\f390";
$ionicon-var-android-list: "\f391";
$ionicon-var-android-locate: "\f2e9";
$ionicon-var-android-lock: "\f392";
$ionicon-var-android-mail: "\f2eb";
$ionicon-var-android-map: "\f393";
$ionicon-var-android-menu: "\f394";
$ionicon-var-android-microphone: "\f2ec";
$ionicon-var-android-microphone-off: "\f395";
$ionicon-var-android-more-horizontal: "\f396";
$ionicon-var-android-more-vertical: "\f397";
$ionicon-var-android-navigate: "\f398";
$ionicon-var-android-notifications: "\f39b";
$ionicon-var-android-notifications-none: "\f399";
$ionicon-var-android-notifications-off: "\f39a";
$ionicon-var-android-open: "\f39c";
$ionicon-var-android-options: "\f39d";
$ionicon-var-android-people: "\f39e";
$ionicon-var-android-person: "\f3a0";
$ionicon-var-android-person-add: "\f39f";
$ionicon-var-android-phone-landscape: "\f3a1";
$ionicon-var-android-phone-portrait: "\f3a2";
$ionicon-var-android-pin: "\f3a3";
$ionicon-var-android-plane: "\f3a4";
$ionicon-var-android-playstore: "\f2f0";
$ionicon-var-android-print: "\f3a5";
$ionicon-var-android-radio-button-off: "\f3a6";
$ionicon-var-android-radio-button-on: "\f3a7";
$ionicon-var-android-refresh: "\f3a8";
$ionicon-var-android-remove: "\f2f4";
$ionicon-var-android-remove-circle: "\f3a9";
$ionicon-var-android-restaurant: "\f3aa";
$ionicon-var-android-sad: "\f3ab";
$ionicon-var-android-search: "\f2f5";
$ionicon-var-android-send: "\f2f6";
$ionicon-var-android-settings: "\f2f7";
$ionicon-var-android-share: "\f2f8";
$ionicon-var-android-share-alt: "\f3ac";
$ionicon-var-android-star: "\f2fc";
$ionicon-var-android-star-half: "\f3ad";
$ionicon-var-android-star-outline: "\f3ae";
$ionicon-var-android-stopwatch: "\f2fd";
$ionicon-var-android-subway: "\f3af";
$ionicon-var-android-sunny: "\f3b0";
$ionicon-var-android-sync: "\f3b1";
$ionicon-var-android-textsms: "\f3b2";
$ionicon-var-android-time: "\f3b3";
$ionicon-var-android-train: "\f3b4";
$ionicon-var-android-unlock: "\f3b5";
$ionicon-var-android-upload: "\f3b6";
$ionicon-var-android-volume-down: "\f3b7";
$ionicon-var-android-volume-mute: "\f3b8";
$ionicon-var-android-volume-off: "\f3b9";
$ionicon-var-android-volume-up: "\f3ba";
$ionicon-var-android-walk: "\f3bb";
$ionicon-var-android-warning: "\f3bc";
$ionicon-var-android-watch: "\f3bd";
$ionicon-var-android-wifi: "\f305";
$ionicon-var-aperture: "\f313";
$ionicon-var-archive: "\f102";
$ionicon-var-arrow-down-a: "\f103";
$ionicon-var-arrow-down-b: "\f104";
$ionicon-var-arrow-down-c: "\f105";
$ionicon-var-arrow-expand: "\f25e";
$ionicon-var-arrow-graph-down-left: "\f25f";
$ionicon-var-arrow-graph-down-right: "\f260";
$ionicon-var-arrow-graph-up-left: "\f261";
$ionicon-var-arrow-graph-up-right: "\f262";
$ionicon-var-arrow-left-a: "\f106";
$ionicon-var-arrow-left-b: "\f107";
$ionicon-var-arrow-left-c: "\f108";
$ionicon-var-arrow-move: "\f263";
$ionicon-var-arrow-resize: "\f264";
$ionicon-var-arrow-return-left: "\f265";
$ionicon-var-arrow-return-right: "\f266";
$ionicon-var-arrow-right-a: "\f109";
$ionicon-var-arrow-right-b: "\f10a";
$ionicon-var-arrow-right-c: "\f10b";
$ionicon-var-arrow-shrink: "\f267";
$ionicon-var-arrow-swap: "\f268";
$ionicon-var-arrow-up-a: "\f10c";
$ionicon-var-arrow-up-b: "\f10d";
$ionicon-var-arrow-up-c: "\f10e";
$ionicon-var-asterisk: "\f314";
$ionicon-var-at: "\f10f";
$ionicon-var-backspace: "\f3bf";
$ionicon-var-backspace-outline: "\f3be";
$ionicon-var-bag: "\f110";
$ionicon-var-battery-charging: "\f111";
$ionicon-var-battery-empty: "\f112";
$ionicon-var-battery-full: "\f113";
$ionicon-var-battery-half: "\f114";
$ionicon-var-battery-low: "\f115";
$ionicon-var-beaker: "\f269";
$ionicon-var-beer: "\f26a";
$ionicon-var-bluetooth: "\f116";
$ionicon-var-bonfire: "\f315";
$ionicon-var-bookmark: "\f26b";
$ionicon-var-bowtie: "\f3c0";
$ionicon-var-briefcase: "\f26c";
$ionicon-var-bug: "\f2be";
$ionicon-var-calculator: "\f26d";
$ionicon-var-calendar: "\f117";
$ionicon-var-camera: "\f118";
$ionicon-var-card: "\f119";
$ionicon-var-cash: "\f316";
$ionicon-var-chatbox: "\f11b";
$ionicon-var-chatbox-working: "\f11a";
$ionicon-var-chatboxes: "\f11c";
$ionicon-var-chatbubble: "\f11e";
$ionicon-var-chatbubble-working: "\f11d";
$ionicon-var-chatbubbles: "\f11f";
$ionicon-var-checkmark: "\f122";
$ionicon-var-checkmark-circled: "\f120";
$ionicon-var-checkmark-round: "\f121";
$ionicon-var-chevron-down: "\f123";
$ionicon-var-chevron-left: "\f124";
$ionicon-var-chevron-right: "\f125";
$ionicon-var-chevron-up: "\f126";
$ionicon-var-clipboard: "\f127";
$ionicon-var-clock: "\f26e";
$ionicon-var-close: "\f12a";
$ionicon-var-close-circled: "\f128";
$ionicon-var-close-round: "\f129";
$ionicon-var-closed-captioning: "\f317";
$ionicon-var-cloud: "\f12b";
$ionicon-var-code: "\f271";
$ionicon-var-code-download: "\f26f";
$ionicon-var-code-working: "\f270";
$ionicon-var-coffee: "\f272";
$ionicon-var-compass: "\f273";
$ionicon-var-compose: "\f12c";
$ionicon-var-connection-bars: "\f274";
$ionicon-var-contrast: "\f275";
$ionicon-var-crop: "\f3c1";
$ionicon-var-cube: "\f318";
$ionicon-var-disc: "\f12d";
$ionicon-var-document: "\f12f";
$ionicon-var-document-text: "\f12e";
$ionicon-var-drag: "\f130";
$ionicon-var-earth: "\f276";
$ionicon-var-easel: "\f3c2";
$ionicon-var-edit: "\f2bf";
$ionicon-var-egg: "\f277";
$ionicon-var-eject: "\f131";
$ionicon-var-email: "\f132";
$ionicon-var-email-unread: "\f3c3";
$ionicon-var-erlenmeyer-flask: "\f3c5";
$ionicon-var-erlenmeyer-flask-bubbles: "\f3c4";
$ionicon-var-eye: "\f133";
$ionicon-var-eye-disabled: "\f306";
$ionicon-var-female: "\f278";
$ionicon-var-filing: "\f134";
$ionicon-var-film-marker: "\f135";
$ionicon-var-fireball: "\f319";
$ionicon-var-flag: "\f279";
$ionicon-var-flame: "\f31a";
$ionicon-var-flash: "\f137";
$ionicon-var-flash-off: "\f136";
$ionicon-var-folder: "\f139";
$ionicon-var-fork: "\f27a";
$ionicon-var-fork-repo: "\f2c0";
$ionicon-var-forward: "\f13a";
$ionicon-var-funnel: "\f31b";
$ionicon-var-gear-a: "\f13d";
$ionicon-var-gear-b: "\f13e";
$ionicon-var-grid: "\f13f";
$ionicon-var-hammer: "\f27b";
$ionicon-var-happy: "\f31c";
$ionicon-var-happy-outline: "\f3c6";
$ionicon-var-headphone: "\f140";
$ionicon-var-heart: "\f141";
$ionicon-var-heart-broken: "\f31d";
$ionicon-var-help: "\f143";
$ionicon-var-help-buoy: "\f27c";
$ionicon-var-help-circled: "\f142";
$ionicon-var-home: "\f144";
$ionicon-var-icecream: "\f27d";
$ionicon-var-image: "\f147";
$ionicon-var-images: "\f148";
$ionicon-var-information: "\f14a";
$ionicon-var-information-circled: "\f149";
$ionicon-var-ionic: "\f14b";
$ionicon-var-ios-alarm: "\f3c8";
$ionicon-var-ios-alarm-outline: "\f3c7";
$ionicon-var-ios-albums: "\f3ca";
$ionicon-var-ios-albums-outline: "\f3c9";
$ionicon-var-ios-americanfootball: "\f3cc";
$ionicon-var-ios-americanfootball-outline: "\f3cb";
$ionicon-var-ios-analytics: "\f3ce";
$ionicon-var-ios-analytics-outline: "\f3cd";
$ionicon-var-ios-arrow-back: "\f3cf";
$ionicon-var-ios-arrow-down: "\f3d0";
$ionicon-var-ios-arrow-forward: "\f3d1";
$ionicon-var-ios-arrow-left: "\f3d2";
$ionicon-var-ios-arrow-right: "\f3d3";
$ionicon-var-ios-arrow-thin-down: "\f3d4";
$ionicon-var-ios-arrow-thin-left: "\f3d5";
$ionicon-var-ios-arrow-thin-right: "\f3d6";
$ionicon-var-ios-arrow-thin-up: "\f3d7";
$ionicon-var-ios-arrow-up: "\f3d8";
$ionicon-var-ios-at: "\f3da";
$ionicon-var-ios-at-outline: "\f3d9";
$ionicon-var-ios-barcode: "\f3dc";
$ionicon-var-ios-barcode-outline: "\f3db";
$ionicon-var-ios-baseball: "\f3de";
$ionicon-var-ios-baseball-outline: "\f3dd";
$ionicon-var-ios-basketball: "\f3e0";
$ionicon-var-ios-basketball-outline: "\f3df";
$ionicon-var-ios-bell: "\f3e2";
$ionicon-var-ios-bell-outline: "\f3e1";
$ionicon-var-ios-body: "\f3e4";
$ionicon-var-ios-body-outline: "\f3e3";
$ionicon-var-ios-bolt: "\f3e6";
$ionicon-var-ios-bolt-outline: "\f3e5";
$ionicon-var-ios-book: "\f3e8";
$ionicon-var-ios-book-outline: "\f3e7";
$ionicon-var-ios-bookmarks: "\f3ea";
$ionicon-var-ios-bookmarks-outline: "\f3e9";
$ionicon-var-ios-box: "\f3ec";
$ionicon-var-ios-box-outline: "\f3eb";
$ionicon-var-ios-briefcase: "\f3ee";
$ionicon-var-ios-briefcase-outline: "\f3ed";
$ionicon-var-ios-browsers: "\f3f0";
$ionicon-var-ios-browsers-outline: "\f3ef";
$ionicon-var-ios-calculator: "\f3f2";
$ionicon-var-ios-calculator-outline: "\f3f1";
$ionicon-var-ios-calendar: "\f3f4";
$ionicon-var-ios-calendar-outline: "\f3f3";
$ionicon-var-ios-camera: "\f3f6";
$ionicon-var-ios-camera-outline: "\f3f5";
$ionicon-var-ios-cart: "\f3f8";
$ionicon-var-ios-cart-outline: "\f3f7";
$ionicon-var-ios-chatboxes: "\f3fa";
$ionicon-var-ios-chatboxes-outline: "\f3f9";
$ionicon-var-ios-chatbubble: "\f3fc";
$ionicon-var-ios-chatbubble-outline: "\f3fb";
$ionicon-var-ios-checkmark: "\f3ff";
$ionicon-var-ios-checkmark-empty: "\f3fd";
$ionicon-var-ios-checkmark-outline: "\f3fe";
$ionicon-var-ios-circle-filled: "\f400";
$ionicon-var-ios-circle-outline: "\f401";
$ionicon-var-ios-clock: "\f403";
$ionicon-var-ios-clock-outline: "\f402";
$ionicon-var-ios-close: "\f406";
$ionicon-var-ios-close-empty: "\f404";
$ionicon-var-ios-close-outline: "\f405";
$ionicon-var-ios-cloud: "\f40c";
$ionicon-var-ios-cloud-download: "\f408";
$ionicon-var-ios-cloud-download-outline: "\f407";
$ionicon-var-ios-cloud-outline: "\f409";
$ionicon-var-ios-cloud-upload: "\f40b";
$ionicon-var-ios-cloud-upload-outline: "\f40a";
$ionicon-var-ios-cloudy: "\f410";
$ionicon-var-ios-cloudy-night: "\f40e";
$ionicon-var-ios-cloudy-night-outline: "\f40d";
$ionicon-var-ios-cloudy-outline: "\f40f";
$ionicon-var-ios-cog: "\f412";
$ionicon-var-ios-cog-outline: "\f411";
$ionicon-var-ios-color-filter: "\f414";
$ionicon-var-ios-color-filter-outline: "\f413";
$ionicon-var-ios-color-wand: "\f416";
$ionicon-var-ios-color-wand-outline: "\f415";
$ionicon-var-ios-compose: "\f418";
$ionicon-var-ios-compose-outline: "\f417";
$ionicon-var-ios-contact: "\f41a";
$ionicon-var-ios-contact-outline: "\f419";
$ionicon-var-ios-copy: "\f41c";
$ionicon-var-ios-copy-outline: "\f41b";
$ionicon-var-ios-crop: "\f41e";
$ionicon-var-ios-crop-strong: "\f41d";
$ionicon-var-ios-download: "\f420";
$ionicon-var-ios-download-outline: "\f41f";
$ionicon-var-ios-drag: "\f421";
$ionicon-var-ios-email: "\f423";
$ionicon-var-ios-email-outline: "\f422";
$ionicon-var-ios-eye: "\f425";
$ionicon-var-ios-eye-outline: "\f424";
$ionicon-var-ios-fastforward: "\f427";
$ionicon-var-ios-fastforward-outline: "\f426";
$ionicon-var-ios-filing: "\f429";
$ionicon-var-ios-filing-outline: "\f428";
$ionicon-var-ios-film: "\f42b";
$ionicon-var-ios-film-outline: "\f42a";
$ionicon-var-ios-flag: "\f42d";
$ionicon-var-ios-flag-outline: "\f42c";
$ionicon-var-ios-flame: "\f42f";
$ionicon-var-ios-flame-outline: "\f42e";
$ionicon-var-ios-flask: "\f431";
$ionicon-var-ios-flask-outline: "\f430";
$ionicon-var-ios-flower: "\f433";
$ionicon-var-ios-flower-outline: "\f432";
$ionicon-var-ios-folder: "\f435";
$ionicon-var-ios-folder-outline: "\f434";
$ionicon-var-ios-football: "\f437";
$ionicon-var-ios-football-outline: "\f436";
$ionicon-var-ios-game-controller-a: "\f439";
$ionicon-var-ios-game-controller-a-outline: "\f438";
$ionicon-var-ios-game-controller-b: "\f43b";
$ionicon-var-ios-game-controller-b-outline: "\f43a";
$ionicon-var-ios-gear: "\f43d";
$ionicon-var-ios-gear-outline: "\f43c";
$ionicon-var-ios-glasses: "\f43f";
$ionicon-var-ios-glasses-outline: "\f43e";
$ionicon-var-ios-grid-view: "\f441";
$ionicon-var-ios-grid-view-outline: "\f440";
$ionicon-var-ios-heart: "\f443";
$ionicon-var-ios-heart-outline: "\f442";
$ionicon-var-ios-help: "\f446";
$ionicon-var-ios-help-empty: "\f444";
$ionicon-var-ios-help-outline: "\f445";
$ionicon-var-ios-home: "\f448";
$ionicon-var-ios-home-outline: "\f447";
$ionicon-var-ios-infinite: "\f44a";
$ionicon-var-ios-infinite-outline: "\f449";
$ionicon-var-ios-information: "\f44d";
$ionicon-var-ios-information-empty: "\f44b";
$ionicon-var-ios-information-outline: "\f44c";
$ionicon-var-ios-ionic-outline: "\f44e";
$ionicon-var-ios-keypad: "\f450";
$ionicon-var-ios-keypad-outline: "\f44f";
$ionicon-var-ios-lightbulb: "\f452";
$ionicon-var-ios-lightbulb-outline: "\f451";
$ionicon-var-ios-list: "\f454";
$ionicon-var-ios-list-outline: "\f453";
$ionicon-var-ios-location: "\f456";
$ionicon-var-ios-location-outline: "\f455";
$ionicon-var-ios-locked: "\f458";
$ionicon-var-ios-locked-outline: "\f457";
$ionicon-var-ios-loop: "\f45a";
$ionicon-var-ios-loop-strong: "\f459";
$ionicon-var-ios-medical: "\f45c";
$ionicon-var-ios-medical-outline: "\f45b";
$ionicon-var-ios-medkit: "\f45e";
$ionicon-var-ios-medkit-outline: "\f45d";
$ionicon-var-ios-mic: "\f461";
$ionicon-var-ios-mic-off: "\f45f";
$ionicon-var-ios-mic-outline: "\f460";
$ionicon-var-ios-minus: "\f464";
$ionicon-var-ios-minus-empty: "\f462";
$ionicon-var-ios-minus-outline: "\f463";
$ionicon-var-ios-monitor: "\f466";
$ionicon-var-ios-monitor-outline: "\f465";
$ionicon-var-ios-moon: "\f468";
$ionicon-var-ios-moon-outline: "\f467";
$ionicon-var-ios-more: "\f46a";
$ionicon-var-ios-more-outline: "\f469";
$ionicon-var-ios-musical-note: "\f46b";
$ionicon-var-ios-musical-notes: "\f46c";
$ionicon-var-ios-navigate: "\f46e";
$ionicon-var-ios-navigate-outline: "\f46d";
$ionicon-var-ios-nutrition: "\f470";
$ionicon-var-ios-nutrition-outline: "\f46f";
$ionicon-var-ios-paper: "\f472";
$ionicon-var-ios-paper-outline: "\f471";
$ionicon-var-ios-paperplane: "\f474";
$ionicon-var-ios-paperplane-outline: "\f473";
$ionicon-var-ios-partlysunny: "\f476";
$ionicon-var-ios-partlysunny-outline: "\f475";
$ionicon-var-ios-pause: "\f478";
$ionicon-var-ios-pause-outline: "\f477";
$ionicon-var-ios-paw: "\f47a";
$ionicon-var-ios-paw-outline: "\f479";
$ionicon-var-ios-people: "\f47c";
$ionicon-var-ios-people-outline: "\f47b";
$ionicon-var-ios-person: "\f47e";
$ionicon-var-ios-person-outline: "\f47d";
$ionicon-var-ios-personadd: "\f480";
$ionicon-var-ios-personadd-outline: "\f47f";
$ionicon-var-ios-photos: "\f482";
$ionicon-var-ios-photos-outline: "\f481";
$ionicon-var-ios-pie: "\f484";
$ionicon-var-ios-pie-outline: "\f483";
$ionicon-var-ios-pint: "\f486";
$ionicon-var-ios-pint-outline: "\f485";
$ionicon-var-ios-play: "\f488";
$ionicon-var-ios-play-outline: "\f487";
$ionicon-var-ios-plus: "\f48b";
$ionicon-var-ios-plus-empty: "\f489";
$ionicon-var-ios-plus-outline: "\f48a";
$ionicon-var-ios-pricetag: "\f48d";
$ionicon-var-ios-pricetag-outline: "\f48c";
$ionicon-var-ios-pricetags: "\f48f";
$ionicon-var-ios-pricetags-outline: "\f48e";
$ionicon-var-ios-printer: "\f491";
$ionicon-var-ios-printer-outline: "\f490";
$ionicon-var-ios-pulse: "\f493";
$ionicon-var-ios-pulse-strong: "\f492";
$ionicon-var-ios-rainy: "\f495";
$ionicon-var-ios-rainy-outline: "\f494";
$ionicon-var-ios-recording: "\f497";
$ionicon-var-ios-recording-outline: "\f496";
$ionicon-var-ios-redo: "\f499";
$ionicon-var-ios-redo-outline: "\f498";
$ionicon-var-ios-refresh: "\f49c";
$ionicon-var-ios-refresh-empty: "\f49a";
$ionicon-var-ios-refresh-outline: "\f49b";
$ionicon-var-ios-reload: "\f49d";
$ionicon-var-ios-reverse-camera: "\f49f";
$ionicon-var-ios-reverse-camera-outline: "\f49e";
$ionicon-var-ios-rewind: "\f4a1";
$ionicon-var-ios-rewind-outline: "\f4a0";
$ionicon-var-ios-rose: "\f4a3";
$ionicon-var-ios-rose-outline: "\f4a2";
$ionicon-var-ios-search: "\f4a5";
$ionicon-var-ios-search-strong: "\f4a4";
$ionicon-var-ios-settings: "\f4a7";
$ionicon-var-ios-settings-strong: "\f4a6";
$ionicon-var-ios-shuffle: "\f4a9";
$ionicon-var-ios-shuffle-strong: "\f4a8";
$ionicon-var-ios-skipbackward: "\f4ab";
$ionicon-var-ios-skipbackward-outline: "\f4aa";
$ionicon-var-ios-skipforward: "\f4ad";
$ionicon-var-ios-skipforward-outline: "\f4ac";
$ionicon-var-ios-snowy: "\f4ae";
$ionicon-var-ios-speedometer: "\f4b0";
$ionicon-var-ios-speedometer-outline: "\f4af";
$ionicon-var-ios-star: "\f4b3";
$ionicon-var-ios-star-half: "\f4b1";
$ionicon-var-ios-star-outline: "\f4b2";
$ionicon-var-ios-stopwatch: "\f4b5";
$ionicon-var-ios-stopwatch-outline: "\f4b4";
$ionicon-var-ios-sunny: "\f4b7";
$ionicon-var-ios-sunny-outline: "\f4b6";
$ionicon-var-ios-telephone: "\f4b9";
$ionicon-var-ios-telephone-outline: "\f4b8";
$ionicon-var-ios-tennisball: "\f4bb";
$ionicon-var-ios-tennisball-outline: "\f4ba";
$ionicon-var-ios-thunderstorm: "\f4bd";
$ionicon-var-ios-thunderstorm-outline: "\f4bc";
$ionicon-var-ios-time: "\f4bf";
$ionicon-var-ios-time-outline: "\f4be";
$ionicon-var-ios-timer: "\f4c1";
$ionicon-var-ios-timer-outline: "\f4c0";
$ionicon-var-ios-toggle: "\f4c3";
$ionicon-var-ios-toggle-outline: "\f4c2";
$ionicon-var-ios-trash: "\f4c5";
$ionicon-var-ios-trash-outline: "\f4c4";
$ionicon-var-ios-undo: "\f4c7";
$ionicon-var-ios-undo-outline: "\f4c6";
$ionicon-var-ios-unlocked: "\f4c9";
$ionicon-var-ios-unlocked-outline: "\f4c8";
$ionicon-var-ios-upload: "\f4cb";
$ionicon-var-ios-upload-outline: "\f4ca";
$ionicon-var-ios-videocam: "\f4cd";
$ionicon-var-ios-videocam-outline: "\f4cc";
$ionicon-var-ios-volume-high: "\f4ce";
$ionicon-var-ios-volume-low: "\f4cf";
$ionicon-var-ios-wineglass: "\f4d1";
$ionicon-var-ios-wineglass-outline: "\f4d0";
$ionicon-var-ios-world: "\f4d3";
$ionicon-var-ios-world-outline: "\f4d2";
$ionicon-var-ipad: "\f1f9";
$ionicon-var-iphone: "\f1fa";
$ionicon-var-ipod: "\f1fb";
$ionicon-var-jet: "\f295";
$ionicon-var-key: "\f296";
$ionicon-var-knife: "\f297";
$ionicon-var-laptop: "\f1fc";
$ionicon-var-leaf: "\f1fd";
$ionicon-var-levels: "\f298";
$ionicon-var-lightbulb: "\f299";
$ionicon-var-link: "\f1fe";
$ionicon-var-load-a: "\f29a";
$ionicon-var-load-b: "\f29b";
$ionicon-var-load-c: "\f29c";
$ionicon-var-load-d: "\f29d";
$ionicon-var-location: "\f1ff";
$ionicon-var-lock-combination: "\f4d4";
$ionicon-var-locked: "\f200";
$ionicon-var-log-in: "\f29e";
$ionicon-var-log-out: "\f29f";
$ionicon-var-loop: "\f201";
$ionicon-var-magnet: "\f2a0";
$ionicon-var-male: "\f2a1";
$ionicon-var-man: "\f202";
$ionicon-var-map: "\f203";
$ionicon-var-medkit: "\f2a2";
$ionicon-var-merge: "\f33f";
$ionicon-var-mic-a: "\f204";
$ionicon-var-mic-b: "\f205";
$ionicon-var-mic-c: "\f206";
$ionicon-var-minus: "\f209";
$ionicon-var-minus-circled: "\f207";
$ionicon-var-minus-round: "\f208";
$ionicon-var-model-s: "\f2c1";
$ionicon-var-monitor: "\f20a";
$ionicon-var-more: "\f20b";
$ionicon-var-mouse: "\f340";
$ionicon-var-music-note: "\f20c";
$ionicon-var-navicon: "\f20e";
$ionicon-var-navicon-round: "\f20d";
$ionicon-var-navigate: "\f2a3";
$ionicon-var-network: "\f341";
$ionicon-var-no-smoking: "\f2c2";
$ionicon-var-nuclear: "\f2a4";
$ionicon-var-outlet: "\f342";
$ionicon-var-paintbrush: "\f4d5";
$ionicon-var-paintbucket: "\f4d6";
$ionicon-var-paper-airplane: "\f2c3";
$ionicon-var-paperclip: "\f20f";
$ionicon-var-pause: "\f210";
$ionicon-var-person: "\f213";
$ionicon-var-person-add: "\f211";
$ionicon-var-person-stalker: "\f212";
$ionicon-var-pie-graph: "\f2a5";
$ionicon-var-pin: "\f2a6";
$ionicon-var-pinpoint: "\f2a7";
$ionicon-var-pizza: "\f2a8";
$ionicon-var-plane: "\f214";
$ionicon-var-planet: "\f343";
$ionicon-var-play: "\f215";
$ionicon-var-playstation: "\f30a";
$ionicon-var-plus: "\f218";
$ionicon-var-plus-circled: "\f216";
$ionicon-var-plus-round: "\f217";
$ionicon-var-podium: "\f344";
$ionicon-var-pound: "\f219";
$ionicon-var-power: "\f2a9";
$ionicon-var-pricetag: "\f2aa";
$ionicon-var-pricetags: "\f2ab";
$ionicon-var-printer: "\f21a";
$ionicon-var-pull-request: "\f345";
$ionicon-var-qr-scanner: "\f346";
$ionicon-var-quote: "\f347";
$ionicon-var-radio-waves: "\f2ac";
$ionicon-var-record: "\f21b";
$ionicon-var-refresh: "\f21c";
$ionicon-var-reply: "\f21e";
$ionicon-var-reply-all: "\f21d";
$ionicon-var-ribbon-a: "\f348";
$ionicon-var-ribbon-b: "\f349";
$ionicon-var-sad: "\f34a";
$ionicon-var-sad-outline: "\f4d7";
$ionicon-var-scissors: "\f34b";
$ionicon-var-search: "\f21f";
$ionicon-var-settings: "\f2ad";
$ionicon-var-share: "\f220";
$ionicon-var-shuffle: "\f221";
$ionicon-var-skip-backward: "\f222";
$ionicon-var-skip-forward: "\f223";
$ionicon-var-social-android: "\f225";
$ionicon-var-social-android-outline: "\f224";
$ionicon-var-social-angular: "\f4d9";
$ionicon-var-social-angular-outline: "\f4d8";
$ionicon-var-social-apple: "\f227";
$ionicon-var-social-apple-outline: "\f226";
$ionicon-var-social-bitcoin: "\f2af";
$ionicon-var-social-bitcoin-outline: "\f2ae";
$ionicon-var-social-buffer: "\f229";
$ionicon-var-social-buffer-outline: "\f228";
$ionicon-var-social-chrome: "\f4db";
$ionicon-var-social-chrome-outline: "\f4da";
$ionicon-var-social-codepen: "\f4dd";
$ionicon-var-social-codepen-outline: "\f4dc";
$ionicon-var-social-css3: "\f4df";
$ionicon-var-social-css3-outline: "\f4de";
$ionicon-var-social-designernews: "\f22b";
$ionicon-var-social-designernews-outline: "\f22a";
$ionicon-var-social-dribbble: "\f22d";
$ionicon-var-social-dribbble-outline: "\f22c";
$ionicon-var-social-dropbox: "\f22f";
$ionicon-var-social-dropbox-outline: "\f22e";
$ionicon-var-social-euro: "\f4e1";
$ionicon-var-social-euro-outline: "\f4e0";
$ionicon-var-social-facebook: "\f231";
$ionicon-var-social-facebook-outline: "\f230";
$ionicon-var-social-foursquare: "\f34d";
$ionicon-var-social-foursquare-outline: "\f34c";
$ionicon-var-social-freebsd-devil: "\f2c4";
$ionicon-var-social-github: "\f233";
$ionicon-var-social-github-outline: "\f232";
$ionicon-var-social-google: "\f34f";
$ionicon-var-social-google-outline: "\f34e";
$ionicon-var-social-googleplus: "\f235";
$ionicon-var-social-googleplus-outline: "\f234";
$ionicon-var-social-hackernews: "\f237";
$ionicon-var-social-hackernews-outline: "\f236";
$ionicon-var-social-html5: "\f4e3";
$ionicon-var-social-html5-outline: "\f4e2";
$ionicon-var-social-instagram: "\f351";
$ionicon-var-social-instagram-outline: "\f350";
$ionicon-var-social-javascript: "\f4e5";
$ionicon-var-social-javascript-outline: "\f4e4";
$ionicon-var-social-linkedin: "\f239";
$ionicon-var-social-linkedin-outline: "\f238";
$ionicon-var-social-markdown: "\f4e6";
$ionicon-var-social-nodejs: "\f4e7";
$ionicon-var-social-octocat: "\f4e8";
$ionicon-var-social-pinterest: "\f2b1";
$ionicon-var-social-pinterest-outline: "\f2b0";
$ionicon-var-social-python: "\f4e9";
$ionicon-var-social-reddit: "\f23b";
$ionicon-var-social-reddit-outline: "\f23a";
$ionicon-var-social-rss: "\f23d";
$ionicon-var-social-rss-outline: "\f23c";
$ionicon-var-social-sass: "\f4ea";
$ionicon-var-social-skype: "\f23f";
$ionicon-var-social-skype-outline: "\f23e";
$ionicon-var-social-snapchat: "\f4ec";
$ionicon-var-social-snapchat-outline: "\f4eb";
$ionicon-var-social-tumblr: "\f241";
$ionicon-var-social-tumblr-outline: "\f240";
$ionicon-var-social-tux: "\f2c5";
$ionicon-var-social-twitch: "\f4ee";
$ionicon-var-social-twitch-outline: "\f4ed";
$ionicon-var-social-twitter: "\f243";
$ionicon-var-social-twitter-outline: "\f242";
$ionicon-var-social-usd: "\f353";
$ionicon-var-social-usd-outline: "\f352";
$ionicon-var-social-vimeo: "\f245";
$ionicon-var-social-vimeo-outline: "\f244";
$ionicon-var-social-whatsapp: "\f4f0";
$ionicon-var-social-whatsapp-outline: "\f4ef";
$ionicon-var-social-windows: "\f247";
$ionicon-var-social-windows-outline: "\f246";
$ionicon-var-social-wordpress: "\f249";
$ionicon-var-social-wordpress-outline: "\f248";
$ionicon-var-social-yahoo: "\f24b";
$ionicon-var-social-yahoo-outline: "\f24a";
$ionicon-var-social-yen: "\f4f2";
$ionicon-var-social-yen-outline: "\f4f1";
$ionicon-var-social-youtube: "\f24d";
$ionicon-var-social-youtube-outline: "\f24c";
$ionicon-var-soup-can: "\f4f4";
$ionicon-var-soup-can-outline: "\f4f3";
$ionicon-var-speakerphone: "\f2b2";
$ionicon-var-speedometer: "\f2b3";
$ionicon-var-spoon: "\f2b4";
$ionicon-var-star: "\f24e";
$ionicon-var-stats-bars: "\f2b5";
$ionicon-var-steam: "\f30b";
$ionicon-var-stop: "\f24f";
$ionicon-var-thermometer: "\f2b6";
$ionicon-var-thumbsdown: "\f250";
$ionicon-var-thumbsup: "\f251";
$ionicon-var-toggle: "\f355";
$ionicon-var-toggle-filled: "\f354";
$ionicon-var-transgender: "\f4f5";
$ionicon-var-trash-a: "\f252";
$ionicon-var-trash-b: "\f253";
$ionicon-var-trophy: "\f356";
$ionicon-var-tshirt: "\f4f7";
$ionicon-var-tshirt-outline: "\f4f6";
$ionicon-var-umbrella: "\f2b7";
$ionicon-var-university: "\f357";
$ionicon-var-unlocked: "\f254";
$ionicon-var-upload: "\f255";
$ionicon-var-usb: "\f2b8";
$ionicon-var-videocamera: "\f256";
$ionicon-var-volume-high: "\f257";
$ionicon-var-volume-low: "\f258";
$ionicon-var-volume-medium: "\f259";
$ionicon-var-volume-mute: "\f25a";
$ionicon-var-wand: "\f358";
$ionicon-var-waterdrop: "\f25b";
$ionicon-var-wifi: "\f25c";
$ionicon-var-wineglass: "\f2b9";
$ionicon-var-woman: "\f25d";
$ionicon-var-wrench: "\f2ba";
$ionicon-var-xbox: "\f30c";

View File

@@ -0,0 +1,16 @@
@charset "UTF-8";
@import "ionicons-variables";
/*!
Ionicons, v2.0.1
Created by Ben Sperry for the Ionic Framework, http://ionicons.com/
https://twitter.com/benjsperry https://twitter.com/ionicframework
MIT License: https://github.com/driftyco/ionicons
Android-style icons originally built by Googles
Material Design Icons: https://github.com/google/material-design-icons
used under CC BY http://creativecommons.org/licenses/by/4.0/
Modified icons to fit ionicons grid from original.
*/
@import "ionicons-font";
@import "ionicons-icons";