init
This commit is contained in:
170
www/lib/ionic/scss/_action-sheet.scss
Normal file
170
www/lib/ionic/scss/_action-sheet.scss
Normal 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;
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
}
|
||||
48
www/lib/ionic/scss/_animations.scss
Normal file
48
www/lib/ionic/scss/_animations.scss
Normal 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; }
|
||||
}
|
||||
24
www/lib/ionic/scss/_backdrop.scss
Normal file
24
www/lib/ionic/scss/_backdrop.scss
Normal 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);
|
||||
}
|
||||
62
www/lib/ionic/scss/_badge.scss
Normal file
62
www/lib/ionic/scss/_badge.scss
Normal 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;
|
||||
}
|
||||
417
www/lib/ionic/scss/_bar.scss
Normal file
417
www/lib/ionic/scss/_bar.scss
Normal 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;
|
||||
}
|
||||
92
www/lib/ionic/scss/_button-bar.scss
Normal file
92
www/lib/ionic/scss/_button-bar.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
252
www/lib/ionic/scss/_button.scss
Normal file
252
www/lib/ionic/scss/_button.scss
Normal 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;
|
||||
}
|
||||
180
www/lib/ionic/scss/_checkbox.scss
Normal file
180
www/lib/ionic/scss/_checkbox.scss
Normal 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;
|
||||
}
|
||||
327
www/lib/ionic/scss/_form.scss
Normal file
327
www/lib/ionic/scss/_form.scss
Normal 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;
|
||||
}
|
||||
159
www/lib/ionic/scss/_grid.scss
Normal file
159
www/lib/ionic/scss/_grid.scss
Normal 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);
|
||||
825
www/lib/ionic/scss/_items.scss
Normal file
825
www/lib/ionic/scss/_items.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
125
www/lib/ionic/scss/_list.scss
Normal file
125
www/lib/ionic/scss/_list.scss
Normal 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;
|
||||
}
|
||||
51
www/lib/ionic/scss/_loading.scss
Normal file
51
www/lib/ionic/scss/_loading.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
70
www/lib/ionic/scss/_menu.scss
Normal file
70
www/lib/ionic/scss/_menu.scss
Normal 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);
|
||||
}
|
||||
642
www/lib/ionic/scss/_mixins.scss
Normal file
642
www/lib/ionic/scss/_mixins.scss
Normal 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%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
102
www/lib/ionic/scss/_modal.scss
Normal file
102
www/lib/ionic/scss/_modal.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
77
www/lib/ionic/scss/_platform.scss
Normal file
77
www/lib/ionic/scss/_platform.scss
Normal 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;
|
||||
}
|
||||
168
www/lib/ionic/scss/_popover.scss
Normal file
168
www/lib/ionic/scss/_popover.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
110
www/lib/ionic/scss/_popup.scss
Normal file
110
www/lib/ionic/scss/_popup.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
11
www/lib/ionic/scss/_progress.scss
Normal file
11
www/lib/ionic/scss/_progress.scss
Normal file
@@ -0,0 +1,11 @@
|
||||
|
||||
/**
|
||||
* Progress
|
||||
* --------------------------------------------------
|
||||
*/
|
||||
|
||||
progress {
|
||||
display: block;
|
||||
margin: $progress-margin;
|
||||
width: $progress-width;
|
||||
}
|
||||
47
www/lib/ionic/scss/_radio.scss
Normal file
47
www/lib/ionic/scss/_radio.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
|
||||
160
www/lib/ionic/scss/_range.scss
Normal file
160
www/lib/ionic/scss/_range.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
113
www/lib/ionic/scss/_refresher.scss
Normal file
113
www/lib/ionic/scss/_refresher.scss
Normal 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); }
|
||||
}
|
||||
365
www/lib/ionic/scss/_reset.scss
Normal file
365
www/lib/ionic/scss/_reset.scss
Normal 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;
|
||||
}
|
||||
291
www/lib/ionic/scss/_scaffolding.scss
Normal file
291
www/lib/ionic/scss/_scaffolding.scss
Normal 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%;
|
||||
}
|
||||
142
www/lib/ionic/scss/_select.scss
Normal file
142
www/lib/ionic/scss/_select.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
71
www/lib/ionic/scss/_slide-box.scss
Normal file
71
www/lib/ionic/scss/_slide-box.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
529
www/lib/ionic/scss/_slides.scss
Normal file
529
www/lib/ionic/scss/_slides.scss
Normal 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%;
|
||||
}
|
||||
}
|
||||
100
www/lib/ionic/scss/_spinner.scss
Normal file
100
www/lib/ionic/scss/_spinner.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
542
www/lib/ionic/scss/_tabs.scss
Normal file
542
www/lib/ionic/scss/_tabs.scss
Normal 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
|
||||
}
|
||||
|
||||
198
www/lib/ionic/scss/_toggle.scss
Normal file
198
www/lib/ionic/scss/_toggle.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
188
www/lib/ionic/scss/_transitions.scss
Normal file
188
www/lib/ionic/scss/_transitions.scss
Normal 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);
|
||||
}
|
||||
}
|
||||
|
||||
166
www/lib/ionic/scss/_type.scss
Normal file
166
www/lib/ionic/scss/_type.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
296
www/lib/ionic/scss/_util.scss
Normal file
296
www/lib/ionic/scss/_util.scss
Normal 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;
|
||||
}
|
||||
764
www/lib/ionic/scss/_variables.scss
Normal file
764
www/lib/ionic/scss/_variables.scss
Normal 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;
|
||||
54
www/lib/ionic/scss/ionic.scss
Normal file
54
www/lib/ionic/scss/ionic.scss
Normal 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";
|
||||
28
www/lib/ionic/scss/ionicons/_ionicons-font.scss
Normal file
28
www/lib/ionic/scss/ionicons/_ionicons-font.scss
Normal 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;
|
||||
}
|
||||
1473
www/lib/ionic/scss/ionicons/_ionicons-icons.scss
Normal file
1473
www/lib/ionic/scss/ionicons/_ionicons-icons.scss
Normal file
File diff suppressed because it is too large
Load Diff
741
www/lib/ionic/scss/ionicons/_ionicons-variables.scss
Normal file
741
www/lib/ionic/scss/ionicons/_ionicons-variables.scss
Normal 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";
|
||||
16
www/lib/ionic/scss/ionicons/ionicons.scss
Normal file
16
www/lib/ionic/scss/ionicons/ionicons.scss
Normal 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 Google’s
|
||||
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 ionicon’s grid from original.
|
||||
*/
|
||||
|
||||
@import "ionicons-font";
|
||||
@import "ionicons-icons";
|
||||
Reference in New Issue
Block a user