From 38d3feaa47e87e037c6fe4b320ad88417d565ea5 Mon Sep 17 00:00:00 2001 From: Pliable Pixels Date: Thu, 18 Apr 2019 09:42:22 -0400 Subject: libs tbd cleanup --- www/lib/ionic/scss/_action-sheet.scss | 170 +++ www/lib/ionic/scss/_animations.scss | 48 + www/lib/ionic/scss/_backdrop.scss | 24 + www/lib/ionic/scss/_badge.scss | 62 + www/lib/ionic/scss/_bar.scss | 417 ++++++ www/lib/ionic/scss/_button-bar.scss | 92 ++ www/lib/ionic/scss/_button.scss | 252 ++++ www/lib/ionic/scss/_checkbox.scss | 180 +++ www/lib/ionic/scss/_form.scss | 327 +++++ www/lib/ionic/scss/_grid.scss | 159 +++ www/lib/ionic/scss/_items.scss | 830 +++++++++++ www/lib/ionic/scss/_list.scss | 125 ++ www/lib/ionic/scss/_loading.scss | 51 + www/lib/ionic/scss/_menu.scss | 70 + www/lib/ionic/scss/_mixins.scss | 642 +++++++++ www/lib/ionic/scss/_modal.scss | 102 ++ www/lib/ionic/scss/_platform.scss | 157 +++ www/lib/ionic/scss/_popover.scss | 168 +++ www/lib/ionic/scss/_popup.scss | 110 ++ www/lib/ionic/scss/_progress.scss | 11 + www/lib/ionic/scss/_radio.scss | 47 + www/lib/ionic/scss/_range.scss | 160 +++ www/lib/ionic/scss/_refresher.scss | 113 ++ www/lib/ionic/scss/_reset.scss | 365 +++++ www/lib/ionic/scss/_scaffolding.scss | 291 ++++ www/lib/ionic/scss/_select.scss | 142 ++ www/lib/ionic/scss/_slide-box.scss | 71 + www/lib/ionic/scss/_slides.scss | 529 +++++++ www/lib/ionic/scss/_spinner.scss | 100 ++ www/lib/ionic/scss/_tabs.scss | 542 +++++++ www/lib/ionic/scss/_toggle.scss | 198 +++ www/lib/ionic/scss/_transitions.scss | 188 +++ www/lib/ionic/scss/_type.scss | 166 +++ www/lib/ionic/scss/_util.scss | 296 ++++ www/lib/ionic/scss/_variables.scss | 764 ++++++++++ www/lib/ionic/scss/ionic.scss | 54 + www/lib/ionic/scss/ionicons/_ionicons-font.scss | 28 + www/lib/ionic/scss/ionicons/_ionicons-icons.scss | 1473 ++++++++++++++++++++ .../ionic/scss/ionicons/_ionicons-variables.scss | 741 ++++++++++ www/lib/ionic/scss/ionicons/ionicons.scss | 16 + www/lib/ionic/scss/tsconfig.json | 18 + 41 files changed, 10299 insertions(+) create mode 100644 www/lib/ionic/scss/_action-sheet.scss create mode 100644 www/lib/ionic/scss/_animations.scss create mode 100644 www/lib/ionic/scss/_backdrop.scss create mode 100644 www/lib/ionic/scss/_badge.scss create mode 100644 www/lib/ionic/scss/_bar.scss create mode 100644 www/lib/ionic/scss/_button-bar.scss create mode 100644 www/lib/ionic/scss/_button.scss create mode 100644 www/lib/ionic/scss/_checkbox.scss create mode 100644 www/lib/ionic/scss/_form.scss create mode 100644 www/lib/ionic/scss/_grid.scss create mode 100644 www/lib/ionic/scss/_items.scss create mode 100644 www/lib/ionic/scss/_list.scss create mode 100644 www/lib/ionic/scss/_loading.scss create mode 100644 www/lib/ionic/scss/_menu.scss create mode 100644 www/lib/ionic/scss/_mixins.scss create mode 100644 www/lib/ionic/scss/_modal.scss create mode 100644 www/lib/ionic/scss/_platform.scss create mode 100644 www/lib/ionic/scss/_popover.scss create mode 100644 www/lib/ionic/scss/_popup.scss create mode 100644 www/lib/ionic/scss/_progress.scss create mode 100644 www/lib/ionic/scss/_radio.scss create mode 100644 www/lib/ionic/scss/_range.scss create mode 100644 www/lib/ionic/scss/_refresher.scss create mode 100755 www/lib/ionic/scss/_reset.scss create mode 100644 www/lib/ionic/scss/_scaffolding.scss create mode 100644 www/lib/ionic/scss/_select.scss create mode 100644 www/lib/ionic/scss/_slide-box.scss create mode 100644 www/lib/ionic/scss/_slides.scss create mode 100644 www/lib/ionic/scss/_spinner.scss create mode 100644 www/lib/ionic/scss/_tabs.scss create mode 100644 www/lib/ionic/scss/_toggle.scss create mode 100644 www/lib/ionic/scss/_transitions.scss create mode 100644 www/lib/ionic/scss/_type.scss create mode 100644 www/lib/ionic/scss/_util.scss create mode 100644 www/lib/ionic/scss/_variables.scss create mode 100644 www/lib/ionic/scss/ionic.scss create mode 100644 www/lib/ionic/scss/ionicons/_ionicons-font.scss create mode 100644 www/lib/ionic/scss/ionicons/_ionicons-icons.scss create mode 100644 www/lib/ionic/scss/ionicons/_ionicons-variables.scss create mode 100644 www/lib/ionic/scss/ionicons/ionicons.scss create mode 100644 www/lib/ionic/scss/tsconfig.json (limited to 'www/lib/ionic/scss') diff --git a/www/lib/ionic/scss/_action-sheet.scss b/www/lib/ionic/scss/_action-sheet.scss new file mode 100644 index 00000000..7537f733 --- /dev/null +++ b/www/lib/ionic/scss/_action-sheet.scss @@ -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; + } + + } + +} diff --git a/www/lib/ionic/scss/_animations.scss b/www/lib/ionic/scss/_animations.scss new file mode 100644 index 00000000..67e0e184 --- /dev/null +++ b/www/lib/ionic/scss/_animations.scss @@ -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; } +} diff --git a/www/lib/ionic/scss/_backdrop.scss b/www/lib/ionic/scss/_backdrop.scss new file mode 100644 index 00000000..cc8efd8b --- /dev/null +++ b/www/lib/ionic/scss/_backdrop.scss @@ -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); +} diff --git a/www/lib/ionic/scss/_badge.scss b/www/lib/ionic/scss/_badge.scss new file mode 100644 index 00000000..37298be2 --- /dev/null +++ b/www/lib/ionic/scss/_badge.scss @@ -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; +} diff --git a/www/lib/ionic/scss/_bar.scss b/www/lib/ionic/scss/_bar.scss new file mode 100644 index 00000000..c8d11a95 --- /dev/null +++ b/www/lib/ionic/scss/_bar.scss @@ -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; +} diff --git a/www/lib/ionic/scss/_button-bar.scss b/www/lib/ionic/scss/_button-bar.scss new file mode 100644 index 00000000..da809d15 --- /dev/null +++ b/www/lib/ionic/scss/_button-bar.scss @@ -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; + } +} diff --git a/www/lib/ionic/scss/_button.scss b/www/lib/ionic/scss/_button.scss new file mode 100644 index 00000000..93a47c6a --- /dev/null +++ b/www/lib/ionic/scss/_button.scss @@ -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; +} diff --git a/www/lib/ionic/scss/_checkbox.scss b/www/lib/ionic/scss/_checkbox.scss new file mode 100644 index 00000000..8321195a --- /dev/null +++ b/www/lib/ionic/scss/_checkbox.scss @@ -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; +} diff --git a/www/lib/ionic/scss/_form.scss b/www/lib/ionic/scss/_form.scss new file mode 100644 index 00000000..288f633d --- /dev/null +++ b/www/lib/ionic/scss/_form.scss @@ -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; +} diff --git a/www/lib/ionic/scss/_grid.scss b/www/lib/ionic/scss/_grid.scss new file mode 100644 index 00000000..cb3a97b5 --- /dev/null +++ b/www/lib/ionic/scss/_grid.scss @@ -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); diff --git a/www/lib/ionic/scss/_items.scss b/www/lib/ionic/scss/_items.scss new file mode 100644 index 00000000..0d9b72c6 --- /dev/null +++ b/www/lib/ionic/scss/_items.scss @@ -0,0 +1,830 @@ +/** + * 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 and