javascript/ionic-framework
1
0
Fork 0
mirror of https://github.com/ionic-team/ionic-framework.git synced 2026-03-13 10:22:08 +08:00
Code Issues Packages Projects Releases Wiki Activity

refactor(sass): restructure for sass theme updates

Browse Source
This commit is contained in:
Adam Bradley
2016-09-13 15:54:23 -05:00
parent 0d55e3c417
commit 78122c551d
37 changed files with 422 additions and 578 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
src/platform/cordova.ios.scss
View File

@@ -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);
}

19
src/platform/cordova.md.scss
View File

@@ -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);
}
}

40
src/platform/cordova.scss
View File

@@ -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) {

20
src/platform/cordova.wp.scss
View File

@@ -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);
}