mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
refactor(sass): restructure for sass theme updates
This commit is contained in:
Adam Bradley
@@ -1,34 +0,0 @@
|
||||
|
||||
// Core Globals
|
||||
@import "globals.core";
|
||||
|
||||
|
||||
// Core App
|
||||
@import
|
||||
"components/app/normalize",
|
||||
"components/app/structure",
|
||||
"util/util";
|
||||
|
||||
|
||||
// Core Components
|
||||
@import
|
||||
"components/backdrop/backdrop",
|
||||
"components/grid/grid",
|
||||
"components/icon/icon",
|
||||
"components/img/img",
|
||||
"components/infinite-scroll/infinite-scroll",
|
||||
"components/loading/loading",
|
||||
"components/menu/menu",
|
||||
"components/modal/modal",
|
||||
"components/range/range",
|
||||
"components/refresher/refresher",
|
||||
"components/scroll/scroll",
|
||||
"components/show-hide-when/show-hide-when",
|
||||
"components/slides/slides",
|
||||
"components/spinner/spinner",
|
||||
"components/typography/typography",
|
||||
"components/virtual-scroll/virtual-scroll";
|
||||
|
||||
|
||||
// Ionicons
|
||||
@import "fonts/ionicons";
|
||||
@@ -1,43 +0,0 @@
|
||||
|
||||
// iOS Globals
|
||||
@import "globals.ios";
|
||||
|
||||
|
||||
// iOS Components
|
||||
@import
|
||||
"components/app/app.ios",
|
||||
"components/action-sheet/action-sheet.ios",
|
||||
"components/alert/alert.ios",
|
||||
"components/badge/badge.ios",
|
||||
"components/button/button.ios",
|
||||
"components/card/card.ios",
|
||||
"components/checkbox/checkbox.ios",
|
||||
"components/chip/chip.ios",
|
||||
"components/content/content.ios",
|
||||
"components/datetime/datetime.ios",
|
||||
"components/icon/icon.ios",
|
||||
"components/input/input.ios",
|
||||
"components/item/item.ios",
|
||||
"components/label/label.ios",
|
||||
"components/list/list.ios",
|
||||
"components/loading/loading.ios",
|
||||
"components/menu/menu.ios",
|
||||
"components/modal/modal.ios",
|
||||
"components/picker/picker.ios",
|
||||
"components/popover/popover.ios",
|
||||
"components/radio/radio.ios",
|
||||
"components/range/range.ios",
|
||||
"components/searchbar/searchbar.ios",
|
||||
"components/segment/segment.ios",
|
||||
"components/select/select.ios",
|
||||
"components/spinner/spinner.ios",
|
||||
"components/tabs/tabs.ios",
|
||||
"components/toggle/toggle.ios",
|
||||
"components/toast/toast.ios",
|
||||
"components/toolbar/toolbar.ios",
|
||||
"components/typography/typography.ios";
|
||||
|
||||
|
||||
// iOS Platform
|
||||
@import
|
||||
"platform/cordova.ios";
|
||||
@@ -1,49 +0,0 @@
|
||||
|
||||
// Material Design Globals
|
||||
@import "globals.md";
|
||||
|
||||
|
||||
// Material Design Components
|
||||
@import
|
||||
"components/app/app.md",
|
||||
"components/action-sheet/action-sheet.md",
|
||||
"components/alert/alert.md",
|
||||
"components/badge/badge.md",
|
||||
"components/button/button.md",
|
||||
"components/card/card.md",
|
||||
"components/checkbox/checkbox.md",
|
||||
"components/chip/chip.md",
|
||||
"components/content/content.md",
|
||||
"components/datetime/datetime.md",
|
||||
"components/icon/icon.md",
|
||||
"components/input/input.md",
|
||||
"components/item/item.md",
|
||||
"components/label/label.md",
|
||||
"components/list/list.md",
|
||||
"components/loading/loading.md",
|
||||
"components/menu/menu.md",
|
||||
"components/modal/modal.md",
|
||||
"components/picker/picker.md",
|
||||
"components/popover/popover.md",
|
||||
"components/radio/radio.md",
|
||||
"components/range/range.md",
|
||||
"components/searchbar/searchbar.md",
|
||||
"components/segment/segment.md",
|
||||
"components/select/select.md",
|
||||
"components/spinner/spinner.md",
|
||||
"components/tabs/tabs.md",
|
||||
"components/toggle/toggle.md",
|
||||
"components/toast/toast.md",
|
||||
"components/toolbar/toolbar.md",
|
||||
"components/typography/typography.md";
|
||||
|
||||
|
||||
// Material Design w/ iOS Platform
|
||||
@import
|
||||
"platform/cordova.md";
|
||||
|
||||
|
||||
// Roboto Font
|
||||
@at-root {
|
||||
@import "./fonts/roboto";
|
||||
}
|
||||
@@ -1,49 +0,0 @@
|
||||
|
||||
// Windows Globals
|
||||
@import "globals.wp";
|
||||
|
||||
|
||||
// Windows Components
|
||||
@import
|
||||
"components/app/app.wp",
|
||||
"components/action-sheet/action-sheet.wp",
|
||||
"components/alert/alert.wp",
|
||||
"components/badge/badge.wp",
|
||||
"components/button/button.wp",
|
||||
"components/card/card.wp",
|
||||
"components/checkbox/checkbox.wp",
|
||||
"components/chip/chip.wp",
|
||||
"components/content/content.wp",
|
||||
"components/datetime/datetime.wp",
|
||||
"components/icon/icon.wp",
|
||||
"components/input/input.wp",
|
||||
"components/item/item.wp",
|
||||
"components/label/label.wp",
|
||||
"components/list/list.wp",
|
||||
"components/loading/loading.wp",
|
||||
"components/menu/menu.wp",
|
||||
"components/modal/modal.wp",
|
||||
"components/picker/picker.wp",
|
||||
"components/popover/popover.wp",
|
||||
"components/radio/radio.wp",
|
||||
"components/range/range.wp",
|
||||
"components/searchbar/searchbar.wp",
|
||||
"components/segment/segment.wp",
|
||||
"components/select/select.wp",
|
||||
"components/spinner/spinner.wp",
|
||||
"components/tabs/tabs.wp",
|
||||
"components/toggle/toggle.wp",
|
||||
"components/toast/toast.wp",
|
||||
"components/toolbar/toolbar.wp",
|
||||
"components/typography/typography.wp";
|
||||
|
||||
|
||||
// Windows w/ iOS Platform
|
||||
@import
|
||||
"platform/cordova.wp";
|
||||
|
||||
|
||||
// Noto Sans Font
|
||||
@at-root {
|
||||
@import "./fonts/noto-sans";
|
||||
}
|
||||
@@ -1,5 +1,17 @@
|
||||
@import "../../globals.core";
|
||||
@import "./z-index";
|
||||
|
||||
// Globals
|
||||
// --------------------------------------------------
|
||||
@import "../themes/ionic.globals";
|
||||
|
||||
|
||||
// Normalize
|
||||
// --------------------------------------------------
|
||||
@import "../themes/normalize";
|
||||
|
||||
|
||||
// Util
|
||||
// --------------------------------------------------
|
||||
@import "../themes/util";
|
||||
|
||||
|
||||
// App Structure
|
||||
@@ -20,8 +32,6 @@ html {
|
||||
}
|
||||
|
||||
body {
|
||||
@include user-select-none();
|
||||
|
||||
position: fixed;
|
||||
overflow: hidden;
|
||||
|
||||
@@ -46,6 +56,7 @@ body {
|
||||
word-wrap: break-word;
|
||||
|
||||
text-size-adjust: none;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
|
||||
@@ -62,14 +73,15 @@ ion-tabs,
|
||||
left: 0;
|
||||
z-index: $z-index-page-container;
|
||||
display: block;
|
||||
overflow: hidden;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ion-tab scroll-cotent {
|
||||
display: none;
|
||||
ion-nav,
|
||||
ion-tab,
|
||||
ion-tabs {
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
ion-tab {
|
||||
@@ -80,15 +92,11 @@ ion-tab.show-tab {
|
||||
transform: translateY(0);
|
||||
}
|
||||
|
||||
ion-tab.show-tab scroll-cotent {
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Page Container Structure
|
||||
// --------------------------------------------------
|
||||
|
||||
ion-page {
|
||||
.ion-page {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
left: 0;
|
||||
@@ -101,35 +109,11 @@ ion-page {
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
ion-content {
|
||||
position: relative;
|
||||
top: 0;
|
||||
left: 0;
|
||||
display: block;
|
||||
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
ion-page > ion-content {
|
||||
position: absolute;
|
||||
}
|
||||
|
||||
ion-page scroll-content {
|
||||
// do not render the scroll-content at all until ready
|
||||
display: none;
|
||||
}
|
||||
|
||||
ion-page.show-page {
|
||||
.ion-page.show-page {
|
||||
// show the page now that it's ready
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
ion-page.show-page scroll-content {
|
||||
// render the content when ready
|
||||
display: block;
|
||||
}
|
||||
|
||||
|
||||
// Toolbar Container Structure
|
||||
// --------------------------------------------------
|
||||
@@ -144,11 +128,6 @@ ion-header {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ion-toolbar {
|
||||
position: relative;
|
||||
z-index: $z-index-toolbar;
|
||||
}
|
||||
|
||||
ion-footer {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
@@ -159,66 +138,13 @@ ion-footer {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
ion-tabbar {
|
||||
position: absolute;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $z-index-toolbar;
|
||||
display: flex;
|
||||
|
||||
width: 100%;
|
||||
|
||||
// default to hidden until ready
|
||||
opacity: 0;
|
||||
}
|
||||
|
||||
ion-tabbar.show-tabbar {
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
[tabsPlacement=top] > ion-tabbar {
|
||||
top: 0;
|
||||
bottom: auto;
|
||||
}
|
||||
|
||||
|
||||
// Scrollable Content
|
||||
// Misc
|
||||
// --------------------------------------------------
|
||||
|
||||
scroll-content {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
left: 0;
|
||||
z-index: $z-index-scroll-content;
|
||||
display: block;
|
||||
|
||||
overflow-x: hidden;
|
||||
overflow-y: scroll;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
will-change: scroll-position;
|
||||
}
|
||||
|
||||
ion-content.js-scroll > scroll-content {
|
||||
position: relative;
|
||||
|
||||
min-height: 100%;
|
||||
|
||||
overflow-x: initial;
|
||||
overflow-y: initial;
|
||||
-webkit-overflow-scrolling: auto;
|
||||
will-change: initial;
|
||||
}
|
||||
|
||||
.disable-scroll ion-page scroll-content {
|
||||
overflow-y: hidden;
|
||||
overflow-x: hidden;
|
||||
}
|
||||
|
||||
|
||||
[app-viewport],
|
||||
[overlay-portal],
|
||||
[nav-viewport],
|
||||
[nav-portal],
|
||||
[tab-portal],
|
||||
.nav-decor {
|
||||
display: none;
|
||||
@@ -1,19 +0,0 @@
|
||||
|
||||
// Global Functions
|
||||
@import "util/functions";
|
||||
|
||||
|
||||
// Global Mixins
|
||||
@import "util/mixins";
|
||||
|
||||
|
||||
// Global include-rtl
|
||||
$include-rtl: true !default;
|
||||
|
||||
|
||||
// Global font path
|
||||
$font-path: "../fonts" !default;
|
||||
|
||||
|
||||
// Hairline width
|
||||
$hairlines-width: .55px !default;
|
||||
@@ -1,7 +0,0 @@
|
||||
|
||||
// Global Core
|
||||
@import "globals.core";
|
||||
|
||||
|
||||
// Global iOS
|
||||
@import "themes/default.ios";
|
||||
@@ -1,7 +0,0 @@
|
||||
|
||||
// Core Globals
|
||||
@import "globals.core";
|
||||
|
||||
|
||||
// Material Design Globals
|
||||
@import "themes/default.md";
|
||||
@@ -1,7 +0,0 @@
|
||||
|
||||
// Core Globals
|
||||
@import "globals.core";
|
||||
|
||||
|
||||
// Windows Globals
|
||||
@import "themes/default.wp";
|
||||
@@ -1,13 +0,0 @@
|
||||
// Ionic: iOS
|
||||
@charset "UTF-8";
|
||||
|
||||
// Core Components
|
||||
@import "components.core";
|
||||
|
||||
// iOS Components
|
||||
@import "components.ios";
|
||||
|
||||
// iOS Body
|
||||
body {
|
||||
@include ios-body();
|
||||
}
|
||||
@@ -1,13 +0,0 @@
|
||||
// Ionic: Material Design
|
||||
@charset "UTF-8";
|
||||
|
||||
// Core Components
|
||||
@import "components.core";
|
||||
|
||||
// Material Design Components
|
||||
@import "components.md";
|
||||
|
||||
// Material Design Body
|
||||
body {
|
||||
@include md-body();
|
||||
}
|
||||
@@ -1,23 +0,0 @@
|
||||
@charset "UTF-8";
|
||||
|
||||
// Core Components
|
||||
@import "components.core";
|
||||
|
||||
// iOS Components
|
||||
.ios {
|
||||
@import "components.ios";
|
||||
@include ios-body();
|
||||
}
|
||||
|
||||
// Material Design Components
|
||||
.md {
|
||||
@import "components.md";
|
||||
@include md-body();
|
||||
}
|
||||
|
||||
// Windows Components
|
||||
.wp {
|
||||
@import "components.wp";
|
||||
@include wp-body();
|
||||
}
|
||||
|
||||
@@ -1,13 +0,0 @@
|
||||
// Ionic: Windows
|
||||
@charset "UTF-8";
|
||||
|
||||
// Core Components
|
||||
@import "components.core";
|
||||
|
||||
// Windows Components
|
||||
@import "components.wp";
|
||||
|
||||
// Windows Body
|
||||
body {
|
||||
@include wp-body();
|
||||
}
|
||||
@@ -1,25 +1,11 @@
|
||||
@import "../globals.ios";
|
||||
@import "./cordova";
|
||||
@import "../themes/ionic.globals.ios";
|
||||
|
||||
// iOS Cordova
|
||||
// --------------------------------------------------
|
||||
|
||||
$cordova-ios-statusbar-padding-modal-max-width: $cordova-statusbar-padding-modal-max-width !default;
|
||||
|
||||
|
||||
ion-nav > ion-page,
|
||||
ion-nav > ion-page > ion-header,
|
||||
ion-tab > ion-page > ion-header,
|
||||
ion-tabs > ion-page.tab-subpage > ion-header,
|
||||
ion-menu > .menu-inner,
|
||||
ion-menu > .menu-inner > ion-header {
|
||||
@include toolbar-statusbar-padding($toolbar-ios-height, $content-ios-padding);
|
||||
@include toolbar-title-statusbar-padding($toolbar-ios-height, $content-ios-padding);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $cordova-ios-statusbar-padding-modal-max-width) {
|
||||
.modal-wrapper > ion-page > ion-header {
|
||||
@include toolbar-statusbar-padding($toolbar-ios-height, $content-ios-padding);
|
||||
@include toolbar-title-statusbar-padding($toolbar-ios-height, $content-ios-padding);
|
||||
}
|
||||
}
|
||||
// Cordova mixins are in the main cordova file
|
||||
.ios {
|
||||
@include statusbar-padding($toolbar-ios-height, $content-ios-padding, $cordova-ios-statusbar-padding-modal-max-width, true);
|
||||
}
|
||||
@@ -1,23 +1,12 @@
|
||||
@import "../globals.md";
|
||||
@import "./cordova";
|
||||
@import "../themes/ionic.globals.md";
|
||||
|
||||
// Material Design on iOS with Cordova
|
||||
// --------------------------------------------------
|
||||
|
||||
$cordova-md-statusbar-padding-modal-max-width: $cordova-statusbar-padding-modal-max-width !default;
|
||||
|
||||
|
||||
ion-nav > ion-page,
|
||||
ion-nav > ion-page > ion-header,
|
||||
ion-tab > ion-page > ion-header,
|
||||
ion-tabs > ion-page.tab-subpage > ion-header,
|
||||
ion-menu > .menu-inner,
|
||||
ion-menu > .menu-inner > ion-header {
|
||||
@include toolbar-statusbar-padding($toolbar-md-height, $content-md-padding);
|
||||
// Cordova mixins are in the main cordova file
|
||||
.md {
|
||||
@include statusbar-padding($toolbar-md-height, $content-md-padding, $cordova-md-statusbar-padding-modal-max-width);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $cordova-md-statusbar-padding-modal-max-width) {
|
||||
.modal-wrapper > ion-page > ion-header {
|
||||
@include toolbar-statusbar-padding($toolbar-md-height, $content-md-padding);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../globals.core";
|
||||
@import "../themes/ionic.globals";
|
||||
|
||||
// Cordova Status Bar Padding iOS Platform
|
||||
// --------------------------------------------------------------------------------
|
||||
@@ -10,6 +10,36 @@ $cordova-ios-statusbar-padding: 20px !default;
|
||||
$cordova-statusbar-padding-modal-max-width: 767px !default;
|
||||
|
||||
|
||||
@mixin statusbar-padding($toolbar-height, $content-padding, $modal-max-width, $style-title: false) {
|
||||
|
||||
ion-nav > .ion-page,
|
||||
ion-nav > .ion-page > ion-header,
|
||||
ion-tab > .ion-page > ion-header,
|
||||
ion-tabs > .ion-page.tab-subpage > ion-header,
|
||||
ion-menu > .menu-inner,
|
||||
ion-menu > .menu-inner > ion-header {
|
||||
|
||||
@include toolbar-statusbar-padding($toolbar-height, $content-padding);
|
||||
|
||||
// If we should style the title elements in the toolbar
|
||||
@if ($style-title) {
|
||||
@include toolbar-title-statusbar-padding($toolbar-height, $content-padding);
|
||||
}
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $modal-max-width) {
|
||||
.modal-wrapper > .ion-page > ion-header {
|
||||
@include toolbar-statusbar-padding($toolbar-height, $content-padding);
|
||||
|
||||
// If we should style the title elements in the toolbar
|
||||
@if ($style-title) {
|
||||
@include toolbar-title-statusbar-padding($toolbar-height, $content-padding);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
// The first-child should get modified padding-top for the status bar
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@@ -22,19 +52,19 @@ $cordova-statusbar-padding-modal-max-width: 767px !default;
|
||||
min-height: calc(#{$toolbar-height} + #{$cordova-ios-statusbar-padding});
|
||||
}
|
||||
|
||||
> ion-content.statusbar-padding:first-child scroll-content {
|
||||
> ion-content.statusbar-padding:first-child .scroll-content {
|
||||
padding-top: $cordova-ios-statusbar-padding;
|
||||
}
|
||||
|
||||
> ion-content.statusbar-padding:first-child[padding] scroll-content,
|
||||
> ion-content.statusbar-padding:first-child[padding-top] scroll-content {
|
||||
> ion-content.statusbar-padding:first-child[padding] .scroll-content,
|
||||
> ion-content.statusbar-padding:first-child[padding-top] .scroll-content {
|
||||
padding-top: calc(#{$content-padding} + #{$cordova-ios-statusbar-padding});
|
||||
}
|
||||
|
||||
}
|
||||
|
||||
|
||||
// iOS is the only mode that uses this mixins and it should be removed with #5036
|
||||
// iOS is the only mode that uses this mixin and it should be removed with #5036
|
||||
// --------------------------------------------------------------------------------
|
||||
|
||||
@mixin toolbar-title-statusbar-padding($toolbar-height, $content-padding) {
|
||||
|
||||
@@ -1,23 +1,11 @@
|
||||
@import "../globals.wp";
|
||||
@import "./cordova";
|
||||
@import "../themes/ionic.globals.wp";
|
||||
|
||||
// Windows on iOS with Cordova
|
||||
// --------------------------------------------------
|
||||
|
||||
$cordova-wp-statusbar-padding-modal-max-width: $cordova-statusbar-padding-modal-max-width !default;
|
||||
|
||||
|
||||
ion-nav > ion-page,
|
||||
ion-nav > ion-page > ion-header,
|
||||
ion-tab > ion-page > ion-header,
|
||||
ion-tabs > ion-page.tab-subpage > ion-header,
|
||||
ion-menu > .menu-inner,
|
||||
ion-menu > .menu-inner > ion-header {
|
||||
@include toolbar-statusbar-padding($toolbar-wp-height, $content-wp-padding);
|
||||
}
|
||||
|
||||
@media only screen and (max-width: $cordova-wp-statusbar-padding-modal-max-width) {
|
||||
.modal-wrapper > ion-page > ion-header {
|
||||
@include toolbar-statusbar-padding($toolbar-wp-height, $content-wp-padding);
|
||||
}
|
||||
// Cordova mixins are in the main cordova file
|
||||
.wp {
|
||||
@include statusbar-padding($toolbar-wp-height, $content-wp-padding, $cordova-wp-statusbar-padding-modal-max-width);
|
||||
}
|
||||
|
||||
6
src/themes/ionic.build.dark.scss
Normal file
6
src/themes/ionic.build.dark.scss
Normal file
@@ -0,0 +1,6 @@
|
||||
@charset "UTF-8";
|
||||
$ionic-theme: "Dark";
|
||||
@import "./version";
|
||||
@import "./license";
|
||||
@import "./ionic.theme.dark";
|
||||
@import "./ionic.components";
|
||||
6
src/themes/ionic.build.default.scss
Executable file
6
src/themes/ionic.build.default.scss
Executable file
@@ -0,0 +1,6 @@
|
||||
@charset "UTF-8";
|
||||
$ionic-theme: "Default";
|
||||
@import "./version";
|
||||
@import "./license";
|
||||
@import "./ionic.theme.default";
|
||||
@import "./ionic.components";
|
||||
236
src/themes/ionic.components.scss
Normal file
236
src/themes/ionic.components.scss
Normal file
@@ -0,0 +1,236 @@
|
||||
|
||||
// Components
|
||||
// --------------------------------------------------
|
||||
|
||||
@import
|
||||
"../components/action-sheet/action-sheet",
|
||||
"../components/action-sheet/action-sheet.ios",
|
||||
"../components/action-sheet/action-sheet.md",
|
||||
"../components/action-sheet/action-sheet.wp";
|
||||
|
||||
@import
|
||||
"../components/alert/alert",
|
||||
"../components/alert/alert.ios",
|
||||
"../components/alert/alert.md",
|
||||
"../components/alert/alert.wp";
|
||||
|
||||
@import
|
||||
"../components/app/app",
|
||||
"../components/app/app.ios",
|
||||
"../components/app/app.md",
|
||||
"../components/app/app.wp";
|
||||
|
||||
@import
|
||||
"../components/backdrop/backdrop";
|
||||
|
||||
@import
|
||||
"../components/badge/badge",
|
||||
"../components/badge/badge.ios",
|
||||
"../components/badge/badge.md",
|
||||
"../components/badge/badge.wp";
|
||||
|
||||
@import
|
||||
"../components/button/button",
|
||||
"../components/button/button-fab",
|
||||
"../components/button/button-icon",
|
||||
"../components/button/button.ios",
|
||||
"../components/button/button.md",
|
||||
"../components/button/button.wp";
|
||||
|
||||
@import
|
||||
"../components/card/card",
|
||||
"../components/card/card.ios",
|
||||
"../components/card/card.md",
|
||||
"../components/card/card.wp";
|
||||
|
||||
@import
|
||||
"../components/checkbox/checkbox.ios",
|
||||
"../components/checkbox/checkbox.md",
|
||||
"../components/checkbox/checkbox.wp";
|
||||
|
||||
@import
|
||||
"../components/chip/chip",
|
||||
"../components/chip/chip.ios",
|
||||
"../components/chip/chip.md",
|
||||
"../components/chip/chip.wp";
|
||||
|
||||
@import
|
||||
"../components/content/content",
|
||||
"../components/content/content.ios",
|
||||
"../components/content/content.md",
|
||||
"../components/content/content.wp";
|
||||
|
||||
@import
|
||||
"../components/datetime/datetime",
|
||||
"../components/datetime/datetime.ios",
|
||||
"../components/datetime/datetime.md",
|
||||
"../components/datetime/datetime.wp";
|
||||
|
||||
@import
|
||||
"../components/grid/grid";
|
||||
|
||||
@import
|
||||
"../components/icon/icon",
|
||||
"../components/icon/icon.ios",
|
||||
"../components/icon/icon.md",
|
||||
"../components/icon/icon.wp";
|
||||
|
||||
@import
|
||||
"../components/img/img";
|
||||
|
||||
@import
|
||||
"../components/infinite-scroll/infinite-scroll";
|
||||
|
||||
@import
|
||||
"../components/input/input",
|
||||
"../components/input/input.ios",
|
||||
"../components/input/input.md",
|
||||
"../components/input/input.wp";
|
||||
|
||||
@import
|
||||
"../components/item/item",
|
||||
"../components/item/item-media",
|
||||
"../components/item/item-reorder",
|
||||
"../components/item/item-sliding",
|
||||
"../components/item/item.ios",
|
||||
"../components/item/item.md",
|
||||
"../components/item/item.wp";
|
||||
|
||||
@import
|
||||
"../components/label/label",
|
||||
"../components/label/label.ios",
|
||||
"../components/label/label.md",
|
||||
"../components/label/label.wp";
|
||||
|
||||
@import
|
||||
"../components/list/list",
|
||||
"../components/list/list.ios",
|
||||
"../components/list/list.md",
|
||||
"../components/list/list.wp";
|
||||
|
||||
@import
|
||||
"../components/loading/loading",
|
||||
"../components/loading/loading.ios",
|
||||
"../components/loading/loading.md",
|
||||
"../components/loading/loading.wp";
|
||||
|
||||
@import
|
||||
"../components/menu/menu",
|
||||
"../components/menu/menu.ios",
|
||||
"../components/menu/menu.md",
|
||||
"../components/menu/menu.wp";
|
||||
|
||||
@import
|
||||
"../components/modal/modal",
|
||||
"../components/modal/modal.ios",
|
||||
"../components/modal/modal.md",
|
||||
"../components/modal/modal.wp";
|
||||
|
||||
@import
|
||||
"../components/picker/picker",
|
||||
"../components/picker/picker.ios",
|
||||
"../components/picker/picker.md",
|
||||
"../components/picker/picker.wp";
|
||||
|
||||
@import
|
||||
"../components/popover/popover",
|
||||
"../components/popover/popover.ios",
|
||||
"../components/popover/popover.md",
|
||||
"../components/popover/popover.wp";
|
||||
|
||||
@import
|
||||
"../components/radio/radio.ios",
|
||||
"../components/radio/radio.md",
|
||||
"../components/radio/radio.wp";
|
||||
|
||||
@import
|
||||
"../components/range/range",
|
||||
"../components/range/range.ios",
|
||||
"../components/range/range.md",
|
||||
"../components/range/range.wp";
|
||||
|
||||
@import
|
||||
"../components/refresher/refresher";
|
||||
|
||||
@import
|
||||
"../components/scroll/scroll";
|
||||
|
||||
@import
|
||||
"../components/searchbar/searchbar",
|
||||
"../components/searchbar/searchbar.ios",
|
||||
"../components/searchbar/searchbar.md",
|
||||
"../components/searchbar/searchbar.wp";
|
||||
|
||||
@import
|
||||
"../components/segment/segment",
|
||||
"../components/segment/segment.ios",
|
||||
"../components/segment/segment.md",
|
||||
"../components/segment/segment.wp";
|
||||
|
||||
@import
|
||||
"../components/select/select",
|
||||
"../components/select/select.ios",
|
||||
"../components/select/select.md",
|
||||
"../components/select/select.wp";
|
||||
|
||||
@import
|
||||
"../components/show-hide-when/show-hide-when";
|
||||
|
||||
@import
|
||||
"../components/slides/slides";
|
||||
|
||||
@import
|
||||
"../components/spinner/spinner",
|
||||
"../components/spinner/spinner.ios",
|
||||
"../components/spinner/spinner.md",
|
||||
"../components/spinner/spinner.wp";
|
||||
|
||||
@import
|
||||
"../components/tabs/tabs",
|
||||
"../components/tabs/tabs.ios",
|
||||
"../components/tabs/tabs.md",
|
||||
"../components/tabs/tabs.wp";
|
||||
|
||||
@import
|
||||
"../components/toast/toast",
|
||||
"../components/toast/toast.ios",
|
||||
"../components/toast/toast.md",
|
||||
"../components/toast/toast.wp";
|
||||
|
||||
@import
|
||||
"../components/toggle/toggle.ios",
|
||||
"../components/toggle/toggle.md",
|
||||
"../components/toggle/toggle.wp";
|
||||
|
||||
@import
|
||||
"../components/toolbar/toolbar",
|
||||
"../components/toolbar/toolbar-button",
|
||||
"../components/toolbar/toolbar.ios",
|
||||
"../components/toolbar/toolbar.md",
|
||||
"../components/toolbar/toolbar.wp";
|
||||
|
||||
@import
|
||||
"../components/typography/typography",
|
||||
"../components/typography/typography.ios",
|
||||
"../components/typography/typography.md",
|
||||
"../components/typography/typography.wp";
|
||||
|
||||
@import
|
||||
"../components/virtual-scroll/virtual-scroll";
|
||||
|
||||
|
||||
// Platforms
|
||||
// --------------------------------------------------
|
||||
@import
|
||||
"../platform/cordova",
|
||||
"../platform/cordova.ios",
|
||||
"../platform/cordova.md",
|
||||
"../platform/cordova.wp";
|
||||
|
||||
|
||||
// Fonts
|
||||
// --------------------------------------------------
|
||||
@import
|
||||
"../fonts/ionicons",
|
||||
"../fonts/noto-sans",
|
||||
"../fonts/roboto";
|
||||
@@ -203,10 +203,10 @@
|
||||
@if (type-of($value) == color) {
|
||||
$color-value: color-key($colors, $value);
|
||||
|
||||
// If the value is a string (e.g. primary)
|
||||
// we want to get the value from the map
|
||||
// where it is the key
|
||||
} @else {
|
||||
// If the value is a string (e.g. primary)
|
||||
// we want to get the value from the map
|
||||
// where it is the key
|
||||
$color-value: map-get($colors, $value);
|
||||
}
|
||||
|
||||
@@ -222,16 +222,16 @@
|
||||
$color-value: color-inverse(map-get($color-value, base));
|
||||
}
|
||||
|
||||
// If a mode was passed we need to call
|
||||
// the custom inverse function to get the inverse
|
||||
// color based on the mode
|
||||
} @elseif ($custom-contrast-mode) {
|
||||
} @elseif ($custom-contrast-mode) {
|
||||
// If a mode was passed we need to call
|
||||
// the custom inverse function to get the inverse
|
||||
// color based on the mode
|
||||
$color-value: mode-inverse($color-value, $custom-contrast-mode);
|
||||
|
||||
// Otherwise we were passed a color and can use the
|
||||
// function to get the inverse of that color
|
||||
// (e.g. #f4f4f4)
|
||||
} @else {
|
||||
// Otherwise we were passed a color and can use the
|
||||
// function to get the inverse of that color
|
||||
// (e.g. #f4f4f4)
|
||||
$color-value: color-inverse($color-value);
|
||||
}
|
||||
|
||||
7
src/themes/ionic.globals.ios.scss
Normal file
7
src/themes/ionic.globals.ios.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
|
||||
// Global Core
|
||||
@import "./ionic.globals";
|
||||
|
||||
|
||||
// Global iOS
|
||||
@import "./ionic.theme.default.ios";
|
||||
7
src/themes/ionic.globals.md.scss
Normal file
7
src/themes/ionic.globals.md.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
|
||||
// Core Globals
|
||||
@import "./ionic.globals";
|
||||
|
||||
|
||||
// Material Design Globals
|
||||
@import "./ionic.theme.default.md";
|
||||
@@ -1,4 +1,28 @@
|
||||
|
||||
// Ionic Version
|
||||
@import "./version";
|
||||
|
||||
|
||||
// Global Functions
|
||||
@import "./ionic.functions";
|
||||
|
||||
|
||||
// Global Mixins
|
||||
@import "./ionic.mixins";
|
||||
|
||||
|
||||
// Global include-rtl
|
||||
$include-rtl: true !default;
|
||||
|
||||
|
||||
// Global font path
|
||||
$font-path: "../fonts" !default;
|
||||
|
||||
|
||||
// Hairline width
|
||||
$hairlines-width: .55px !default;
|
||||
|
||||
|
||||
// Z-Index
|
||||
// --------------------------------------------------
|
||||
// Grouped by elements which would be siblings
|
||||
7
src/themes/ionic.globals.wp.scss
Normal file
7
src/themes/ionic.globals.wp.scss
Normal file
@@ -0,0 +1,7 @@
|
||||
|
||||
// Core Globals
|
||||
@import "./ionic.globals";
|
||||
|
||||
|
||||
// Windows Globals
|
||||
@import "./ionic.theme.default.wp";
|
||||
@@ -8,15 +8,6 @@
|
||||
}
|
||||
|
||||
|
||||
// Calc
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin calc($property, $expression) {
|
||||
#{$property}: -webkit-calc(#{$expression});
|
||||
#{$property}: calc(#{$expression});
|
||||
}
|
||||
|
||||
|
||||
// Input Placeholder
|
||||
// --------------------------------------------------
|
||||
|
||||
@@ -44,11 +35,3 @@
|
||||
$url: url-encode($svg);
|
||||
background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
|
||||
}
|
||||
|
||||
|
||||
// User Select None
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin user-select-none() {
|
||||
user-select: none;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "./dark";
|
||||
@import "./ionic.theme.dark";
|
||||
|
||||
// iOS Dark Theme
|
||||
// ----------------------------------
|
||||
@@ -6,8 +6,6 @@
|
||||
$colors-ios: copy-colors($colors) !default;
|
||||
|
||||
$text-ios-color: $text-color !default;
|
||||
$paragraph-ios-color: $paragraph-color !default;
|
||||
$link-ios-color: color($colors-ios, primary) !default;
|
||||
$background-ios-color: $background-color !default;
|
||||
$subdued-text-ios-color: $subdued-text-color !default;
|
||||
|
||||
@@ -75,13 +73,3 @@ $item-ios-padding-icon-bottom: 9px !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
$toggle-ios-handle-background-color: color($colors-ios, light) !default;
|
||||
|
||||
|
||||
// iOS Body
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-body() {
|
||||
font-family: $font-family-ios-base;
|
||||
font-size: $font-size-ios-base;
|
||||
background-color: $background-ios-color;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "./dark";
|
||||
@import "./ionic.theme.dark";
|
||||
|
||||
// Material Design Dark Theme
|
||||
// ----------------------------------
|
||||
@@ -7,8 +7,6 @@ $colors-md: copy-colors($colors) !default;
|
||||
|
||||
|
||||
$text-md-color: $text-color !default;
|
||||
$paragraph-md-color: $paragraph-color !default;
|
||||
$link-md-color: color($colors-md, primary) !default;
|
||||
$background-md-color: $background-color !default;
|
||||
$subdued-text-md-color: $subdued-text-color !default;
|
||||
|
||||
@@ -71,13 +69,3 @@ $toggle-md-handle-background-color-off: color($colors-md, light) !default;
|
||||
@function ripple-background-color($button-color) {
|
||||
@return rgba(red($button-color), green($button-color), blue($button-color), .1);
|
||||
}
|
||||
|
||||
|
||||
// Material Design Body
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin md-body() {
|
||||
font-family: $font-family-md-base;
|
||||
font-size: $font-size-md-base;
|
||||
background-color: $background-md-color;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../globals.core";
|
||||
@import "./ionic.globals";
|
||||
|
||||
|
||||
// Dark Theme
|
||||
@@ -16,7 +16,6 @@ $colors: (
|
||||
|
||||
|
||||
$text-color: #fff !default;
|
||||
$paragraph-color: $text-color !default;
|
||||
$link-color: color($colors, primary) !default;
|
||||
$background-color: #191919 !default;
|
||||
$subdued-text-color: #666 !default;
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "./dark";
|
||||
@import "./ionic.theme.dark";
|
||||
|
||||
// Windows Dark Theme
|
||||
// ----------------------------------
|
||||
@@ -7,8 +7,6 @@ $colors-wp: copy-colors($colors) !default;
|
||||
|
||||
|
||||
$text-wp-color: $text-color !default;
|
||||
$paragraph-wp-color: $paragraph-color !default;
|
||||
$link-wp-color: color($colors-wp, primary) !default;
|
||||
$background-wp-color: $background-color !default;
|
||||
$subdued-text-wp-color: $subdued-text-color !default;
|
||||
|
||||
@@ -69,13 +67,3 @@ $toggle-wp-handle-background-color-off: color($colors-wp, light) !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
$input-wp-border-color: rgba(0, 0, 0, .5) !default;
|
||||
|
||||
|
||||
// Windows Body
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin wp-body() {
|
||||
font-family: $font-family-wp-base;
|
||||
font-size: $font-size-wp-base;
|
||||
background-color: $background-wp-color;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "./default";
|
||||
@import "./ionic.theme.default";
|
||||
|
||||
// iOS Default Theme
|
||||
// ----------------------------------
|
||||
@@ -7,18 +7,20 @@ $colors-ios: copy-colors($colors) !default;
|
||||
|
||||
|
||||
$text-ios-color: $text-color !default;
|
||||
$paragraph-ios-color: $paragraph-color !default;
|
||||
$link-ios-color: color($colors-ios, primary) !default;
|
||||
$background-ios-color: $background-color !default;
|
||||
$subdued-text-ios-color: $subdued-text-color !default;
|
||||
|
||||
$font-family-ios-base: $font-family-base !default;
|
||||
$font-size-ios-base: $font-size-base !default;
|
||||
|
||||
$content-ios-padding: $content-padding !default;
|
||||
$content-ios-margin: $content-margin !default;
|
||||
|
||||
|
||||
// iOS Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$toolbar-ios-height: 44px !default;
|
||||
$toolbar-ios-background: $toolbar-background !default;
|
||||
$toolbar-ios-border-color: $toolbar-border-color !default;
|
||||
$toolbar-ios-text-color: $toolbar-text-color !default;
|
||||
@@ -46,13 +48,3 @@ $item-ios-padding-media-top: 8px !default;
|
||||
$item-ios-padding-media-bottom: 8px !default;
|
||||
$item-ios-padding-icon-top: 10px !default;
|
||||
$item-ios-padding-icon-bottom: 9px !default;
|
||||
|
||||
|
||||
// iOS Body
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin ios-body() {
|
||||
font-family: $font-family-ios-base;
|
||||
font-size: $font-size-ios-base;
|
||||
background-color: $background-ios-color;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "./default";
|
||||
@import "./ionic.theme.default";
|
||||
|
||||
// Material Design Default Theme
|
||||
// ----------------------------------
|
||||
@@ -7,18 +7,20 @@ $colors-md: copy-colors($colors) !default;
|
||||
|
||||
|
||||
$text-md-color: $text-color !default;
|
||||
$paragraph-md-color: $paragraph-color !default;
|
||||
$link-md-color: color($colors-md, primary) !default;
|
||||
$background-md-color: $background-color !default;
|
||||
$subdued-text-md-color: $subdued-text-color !default;
|
||||
|
||||
$font-family-md-base: "Roboto", "Helvetica Neue", sans-serif !default;
|
||||
$font-size-md-base: $font-size-base !default;
|
||||
|
||||
$content-md-padding: $content-padding !default;
|
||||
$content-md-margin: $content-margin !default;
|
||||
|
||||
|
||||
// Material Design Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$toolbar-md-height: 56px !default;
|
||||
$toolbar-md-background: $toolbar-background !default;
|
||||
$toolbar-md-border-color: $toolbar-border-color !default;
|
||||
$toolbar-md-text-color: #424242 !default;
|
||||
@@ -46,13 +48,3 @@ $item-md-padding-media-top: 9px !default;
|
||||
$item-md-padding-media-bottom: 9px !default;
|
||||
$item-md-padding-icon-top: 11px !default;
|
||||
$item-md-padding-icon-bottom: 10px !default;
|
||||
|
||||
|
||||
// Material Design Body
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin md-body() {
|
||||
font-family: $font-family-md-base;
|
||||
font-size: $font-size-md-base;
|
||||
background-color: $background-md-color;
|
||||
}
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../globals.core";
|
||||
@import "./ionic.globals";
|
||||
|
||||
|
||||
// Default Theme
|
||||
@@ -16,7 +16,6 @@ $colors: (
|
||||
|
||||
|
||||
$text-color: #000 !default;
|
||||
$paragraph-color: $text-color !default;
|
||||
$link-color: color($colors, primary) !default;
|
||||
$background-color: #fff !default;
|
||||
$subdued-text-color: #666 !default;
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "./default";
|
||||
@import "./ionic.theme.default";
|
||||
|
||||
// Windows Default Theme
|
||||
// ----------------------------------
|
||||
@@ -7,18 +7,20 @@ $colors-wp: copy-colors($colors) !default;
|
||||
|
||||
|
||||
$text-wp-color: $text-color !default;
|
||||
$paragraph-wp-color: $paragraph-color !default;
|
||||
$link-wp-color: color($colors-wp, primary) !default;
|
||||
$background-wp-color: $background-color !default;
|
||||
$subdued-text-wp-color: $subdued-text-color !default;
|
||||
|
||||
$font-family-wp-base: "Segoe UI", "Noto Sans", sans-serif !default;
|
||||
$font-size-wp-base: $font-size-base !default;
|
||||
|
||||
$content-wp-padding: $content-padding !default;
|
||||
$content-wp-margin: $content-margin !default;
|
||||
|
||||
|
||||
// Windows Toolbar
|
||||
// --------------------------------------------------
|
||||
|
||||
$toolbar-wp-height: 46px !default;
|
||||
$toolbar-wp-background: $toolbar-background !default;
|
||||
$toolbar-wp-border-color: $toolbar-border-color !default;
|
||||
$toolbar-wp-text-color: $toolbar-text-color !default;
|
||||
@@ -52,13 +54,3 @@ $item-wp-padding-icon-bottom: 10px !default;
|
||||
// --------------------------------------------------
|
||||
|
||||
$input-wp-border-color: rgba(0, 0, 0, .5) !default;
|
||||
|
||||
|
||||
// Windows Body
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin wp-body() {
|
||||
font-family: $font-family-wp-base;
|
||||
font-size: $font-size-wp-base;
|
||||
background-color: $background-wp-color;
|
||||
}
|
||||
9
src/themes/license.scss
Normal file
9
src/themes/license.scss
Normal file
@@ -0,0 +1,9 @@
|
||||
/*!
|
||||
* Ionic Framework
|
||||
* A powerful framework for building mobile and progressive web apps.
|
||||
* http://ionicframework.com/
|
||||
*
|
||||
* v#{$ionic-version}, #{$ionic-theme} Theme
|
||||
*
|
||||
* Licensed under the MIT license. Please see LICENSE for more information.
|
||||
*/
|
||||
@@ -1,4 +1,4 @@
|
||||
@import "../globals.core";
|
||||
@import "./ionic.globals";
|
||||
|
||||
.hide,
|
||||
[hidden],
|
||||
@@ -11,11 +11,13 @@ template {
|
||||
top: 0;
|
||||
}
|
||||
|
||||
|
||||
// Focus Outline
|
||||
// --------------------------------------------------
|
||||
|
||||
$focus-outline-border-color: #51a7e8 !default;
|
||||
$focus-outline-box-shadow: 0 0 8px 0 $focus-outline-border-color !default;
|
||||
$focus-outline-border-width: 2px !default;
|
||||
$focus-outline-box-shadow: 0 0 8px 1px $focus-outline-border-color !default;
|
||||
|
||||
|
||||
:focus,
|
||||
@@ -23,52 +25,29 @@ $focus-outline-box-shadow: 0 0 8px 0 $focus-outline-border-color !default;
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.focus-outline {
|
||||
|
||||
:focus {
|
||||
outline: thin dotted;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
button:focus,
|
||||
[button]:focus {
|
||||
border-color: $focus-outline-border-color;
|
||||
outline: thin solid $focus-outline-border-color;
|
||||
box-shadow: $focus-outline-box-shadow;
|
||||
}
|
||||
|
||||
ion-input :focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
.focus-outline :focus {
|
||||
outline: thin dotted;
|
||||
outline-offset: -1px;
|
||||
}
|
||||
|
||||
|
||||
// Focus Controls
|
||||
// -------------------------------
|
||||
|
||||
focus-ctrl {
|
||||
position: fixed;
|
||||
|
||||
input,
|
||||
button {
|
||||
position: fixed;
|
||||
top: 1px;
|
||||
left: -9999px;
|
||||
z-index: 9999;
|
||||
|
||||
width: 9px;
|
||||
|
||||
pointer-events: none;
|
||||
}
|
||||
.focus-outline button:focus,
|
||||
.focus-outline [ion-button]:focus {
|
||||
border-color: $focus-outline-border-color;
|
||||
outline: $focus-outline-border-width solid $focus-outline-border-color;
|
||||
box-shadow: $focus-outline-box-shadow;
|
||||
}
|
||||
|
||||
ion-input :focus {
|
||||
outline: none;
|
||||
}
|
||||
|
||||
|
||||
// Click Block
|
||||
// --------------------------------------------------
|
||||
// Fill the screen to block clicks (a better pointer-events: none)
|
||||
// to avoid full-page reflows and paints which can cause flickers
|
||||
|
||||
click-block {
|
||||
.click-block {
|
||||
position: absolute;
|
||||
top: 0;
|
||||
right: 0;
|
||||
Reference in New Issue
Block a user