refactor(sass): individual sass files import globals

2026-03-13 10:22:08 +08:00 · 2015-11-23 14:51:38 -06:00
parent 3d898485ad
commit bc8ff4070f
77 changed files with 171 additions and 116 deletions
--- a/ionic/components/action-sheet/action-sheet.scss
+++ b/ionic/components/action-sheet/action-sheet.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Action Sheet
 // --------------------------------------------------
--- a/ionic/components/action-sheet/modes/ios.scss
+++ b/ionic/components/action-sheet/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Action Sheet
 // --------------------------------------------------
--- a/ionic/components/action-sheet/modes/md.scss
+++ b/ionic/components/action-sheet/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design Action Sheet
 // --------------------------------------------------
@@ -79,4 +80,3 @@ ion-action-sheet button {
  width: auto;
  border: none;
 }
-
--- a/ionic/components/app/modes/ios.scss
+++ b/ionic/components/app/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS App
 // --------------------------------------------------
--- a/ionic/components/app/modes/md.scss
+++ b/ionic/components/app/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design App
 // --------------------------------------------------
--- a/ionic/components/app/structure.scss
+++ b/ionic/components/app/structure.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Z-Index
 // --------------------------------------------------
--- a/ionic/components/app/typography.scss
+++ b/ionic/components/app/typography.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Typography
 // -------------------------
--- a/ionic/components/badge/badge.scss
+++ b/ionic/components/badge/badge.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Badge
 // --------------------------------------------------
--- a/ionic/components/button/button-clear.scss
+++ b/ionic/components/button/button-clear.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Clear Button
 // --------------------------------------------------
--- a/ionic/components/button/button-fab.scss
+++ b/ionic/components/button/button-fab.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // FABulous Buttons (Floating Action Button from material)
 // --------------------------------------------------
--- a/ionic/components/button/button-icon.scss
+++ b/ionic/components/button/button-icon.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Button Icons
 // --------------------------------------------------
--- a/ionic/components/button/button-outline.scss
+++ b/ionic/components/button/button-outline.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Outline Button
 // --------------------------------------------------
--- a/ionic/components/button/button-size.scss
+++ b/ionic/components/button/button-size.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Button Sizes
 // --------------------------------------------------
--- a/ionic/components/button/button.scss
+++ b/ionic/components/button/button.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Button Variables
 // --------------------------------------------------
--- a/ionic/components/button/modes/ios.scss
+++ b/ionic/components/button/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 button {
  &[block] {
--- a/ionic/components/button/modes/md.scss
+++ b/ionic/components/button/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design Button
 // --------------------------------------------------
--- a/ionic/components/card/card.scss
+++ b/ionic/components/card/card.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Card
 // --------------------------------------------------
--- a/ionic/components/card/modes/ios.scss
+++ b/ionic/components/card/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Card
 // --------------------------------------------------
--- a/ionic/components/card/modes/md.scss
+++ b/ionic/components/card/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design Card
 // --------------------------------------------------
--- a/ionic/components/checkbox/checkbox.scss
+++ b/ionic/components/checkbox/checkbox.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Checkbox
 // --------------------------------------------------
--- a/ionic/components/checkbox/modes/ios.scss
+++ b/ionic/components/checkbox/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Checkbox Structure
 // --------------------------------------------------
--- a/ionic/components/checkbox/modes/md.scss
+++ b/ionic/components/checkbox/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design Checkbox
 // --------------------------------------------------
--- a/ionic/components/content/modes/ios.scss
+++ b/ionic/components/content/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Content
 // --------------------------------------------------
--- a/ionic/components/content/modes/md.scss
+++ b/ionic/components/content/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design Content Padding
 // --------------------------------------------------
--- a/ionic/components/grid/grid.scss
+++ b/ionic/components/grid/grid.scss
@@ -1,12 +1,13 @@
-/**
- * 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.
- */
+@import "../../ionic.globals";
+
+// 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.
+

 $grid-padding-width:              10px !default;
 $grid-responsive-sm-break:        567px !default;  // smaller than landscape phone
--- a/ionic/components/icon/icon.scss
+++ b/ionic/components/icon/icon.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Icon
 // --------------------------------------------------
--- a/ionic/components/icon/modes/ios.scss
+++ b/ionic/components/icon/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Icon
 // --------------------------------------------------
--- a/ionic/components/item/item-media.scss
+++ b/ionic/components/item/item-media.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Item Media
 // --------------------------------------------------
--- a/ionic/components/item/item-sliding.scss
+++ b/ionic/components/item/item-sliding.scss
@@ -1,9 +1,7 @@
+@import "../../ionic.globals";

-/**
- * The hidden right-side buttons that can be exposed under a list item
- * with dragging.
- */

+// The hidden right-side buttons that can be exposed under a list item with dragging.
 ion-item-sliding {
  display: block;
  position: relative;
--- a/ionic/components/item/item.scss
+++ b/ionic/components/item/item.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Item
 // --------------------------------------------------
--- a/ionic/components/item/modes/ios.scss
+++ b/ionic/components/item/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Item
 // --------------------------------------------------
--- a/ionic/components/item/modes/md.scss
+++ b/ionic/components/item/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design Item
 // --------------------------------------------------
--- a/ionic/components/list/list.scss
+++ b/ionic/components/list/list.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // List
 // --------------------------------------------------
@@ -20,7 +21,7 @@
 .list[inset] {
  overflow: hidden;
  transform: translateZ(0);
-  
+
  ion-header {
    background-color: $list-background-color;
  }
--- a/ionic/components/list/modes/ios.scss
+++ b/ionic/components/list/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS List
 // --------------------------------------------------
--- a/ionic/components/list/modes/md.scss
+++ b/ionic/components/list/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design List
 // --------------------------------------------------
--- a/ionic/components/menu/menu-types.scss
+++ b/ionic/components/menu/menu-types.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Menu Reveal
 // --------------------------------------------------
--- a/ionic/components/menu/menu.scss
+++ b/ionic/components/menu/menu.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Menu
 // --------------------------------------------------
--- a/ionic/components/modal/modal.scss
+++ b/ionic/components/modal/modal.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Modals
 // --------------------------------------------------
--- a/ionic/components/navbar/modes/ios.scss
+++ b/ionic/components/navbar/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Navbar
 // --------------------------------------------------
--- a/ionic/components/navbar/modes/md.scss
+++ b/ionic/components/navbar/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design Navbar
 // --------------------------------------------------
--- a/ionic/components/navbar/navbar.scss
+++ b/ionic/components/navbar/navbar.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Navbar
 // --------------------------------------------------
@@ -8,7 +9,7 @@ ion-navbar.toolbar {
 }

 .back-button {
-  order: map-get($toolbar-order, backButton);  
+  order: map-get($toolbar-order, backButton);

  display: none;
  &.show-back-button {
--- a/ionic/components/popup/modes/ios.scss
+++ b/ionic/components/popup/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Popups
 // --------------------------------------------------
--- a/ionic/components/popup/modes/md.scss
+++ b/ionic/components/popup/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design Popups
 // --------------------------------------------------
--- a/ionic/components/popup/popup.scss
+++ b/ionic/components/popup/popup.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Popups
 // --------------------------------------------------
--- a/ionic/components/radio/modes/ios.scss
+++ b/ionic/components/radio/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Radio
 // --------------------------------------------------
--- a/ionic/components/radio/modes/md.scss
+++ b/ionic/components/radio/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design Radio
 // --------------------------------------------------
--- a/ionic/components/radio/radio.scss
+++ b/ionic/components/radio/radio.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Radio
 // --------------------------------------------------
--- a/ionic/components/scroll/scroll.scss
+++ b/ionic/components/scroll/scroll.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 ion-scroll {
  position: relative;
--- a/ionic/components/searchbar/modes/ios.scss
+++ b/ionic/components/searchbar/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Search Bar
 // --------------------------------------------------
@@ -137,5 +138,5 @@ ion-searchbar.left-align {
      color: $color-value;
    }
  }
-  
+
 }
--- a/ionic/components/searchbar/modes/md.scss
+++ b/ionic/components/searchbar/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design Search Bar
 // --------------------------------------------------
--- a/ionic/components/searchbar/searchbar.scss
+++ b/ionic/components/searchbar/searchbar.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Search Bar
 // --------------------------------------------------
--- a/ionic/components/segment/modes/ios.scss
+++ b/ionic/components/segment/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Segment
 // --------------------------------------------------
--- a/ionic/components/segment/modes/md.scss
+++ b/ionic/components/segment/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Segment
 // --------------------------------------------------
--- a/ionic/components/segment/segment.scss
+++ b/ionic/components/segment/segment.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Segment
 // --------------------------------------------------
--- a/ionic/components/slides/slides.scss
+++ b/ionic/components/slides/slides.scss
@@ -1,3 +1,5 @@
+@import "../../ionic.globals";
+
 ion-swipe-slides {
  display: block;
  width: 100%;
--- a/ionic/components/switch/modes/ios.scss
+++ b/ionic/components/switch/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Switch
 // --------------------------------------------------
--- a/ionic/components/switch/modes/md.scss
+++ b/ionic/components/switch/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design Switch
 // --------------------------------------------------
--- a/ionic/components/switch/switch.scss
+++ b/ionic/components/switch/switch.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Switch
 // --------------------------------------------------
--- a/ionic/components/tabs/modes/ios.scss
+++ b/ionic/components/tabs/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Tabs
 // --------------------------------------------------
--- a/ionic/components/tabs/modes/md.scss
+++ b/ionic/components/tabs/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design Tabs
 // --------------------------------------------------
--- a/ionic/components/tabs/tabs.scss
+++ b/ionic/components/tabs/tabs.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Tabs
 // --------------------------------------------------
--- a/ionic/components/tap-click/ripple.scss
+++ b/ionic/components/tap-click/ripple.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Material Design Ripple Effect
 // --------------------------------------------------
--- a/ionic/components/text-input/label.scss
+++ b/ionic/components/text-input/label.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Label
 // --------------------------------------------------
--- a/ionic/components/text-input/modes/ios.scss
+++ b/ionic/components/text-input/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Text Input
 // --------------------------------------------------
--- a/ionic/components/text-input/modes/md.scss
+++ b/ionic/components/text-input/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design Text Input
 // --------------------------------------------------
--- a/ionic/components/text-input/text-input.scss
+++ b/ionic/components/text-input/text-input.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Text Input
 // --------------------------------------------------
--- a/ionic/components/toolbar/modes/ios.scss
+++ b/ionic/components/toolbar/modes/ios.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // iOS Toolbar
 // --------------------------------------------------
--- a/ionic/components/toolbar/modes/md.scss
+++ b/ionic/components/toolbar/modes/md.scss
@@ -1,3 +1,4 @@
+@import "../../../ionic.globals";

 // Material Design Toolbar
 // --------------------------------------------------
--- a/ionic/components/toolbar/toolbar.scss
+++ b/ionic/components/toolbar/toolbar.scss
@@ -1,3 +1,4 @@
+@import "../../ionic.globals";

 // Toolbar
 // --------------------------------------------------
--- a/ionic/ionic.core.scss
+++ b/ionic/ionic.core.scss
@@ -1,11 +1,6 @@

-// Theme
-@import "themes/default";
-
-
-// Globals
+// Core App
@import
-  "util/mixins",
  "components/app/normalize",
  "components/app/structure",
  "components/app/typography",
@@ -50,6 +45,7 @@


 // Ionicons
+// soon to be replaced with SVGs
 $font-path: "../fonts" !default;
 $ionicons: true !default;
@if ($ionicons) {
--- a/ionic/ionic.globals.scss
+++ b/ionic/ionic.globals.scss
@@ -0,0 +1,11 @@
+
+// Global Theme
+@import "themes/default";
+
+
+// Global Functions
+@import "util/functions";
+
+
+// Global Mixins
+@import "util/mixins";
--- a/ionic/platform/.eslintrc
+++ b/ionic/platform/.eslintrc
@@ -1,12 +0,0 @@
-{
-    "ecmaFeatures": {
-        "blockBindings": true,
-        "arrowFunctions": true,
-        "classes": true,
-        "forOf": true,
-        "modules": true,
-    },
-    "rules": {
-        "semi": 2
-    }
-}
--- a/ionic/platform/cordova-ios.scss
+++ b/ionic/platform/cordova-ios.scss
@@ -1,3 +1,4 @@
+@import "../ionic.globals";

 // iOS Cordova
 // --------------------------------------------------
--- a/ionic/themes/dark.scss
+++ b/ionic/themes/dark.scss
@@ -18,7 +18,7 @@ $background-color:           #222 !default;

 $list-text-color:            $text-color !default;
 $list-background-color:      $background-color !default;
-$list-border-color:               #666 !default;
+$list-border-color:          #666 !default;

 $link-color:                 map-get($colors, primary) !default;

--- a/ionic/util/functions.scss
+++ b/ionic/util/functions.scss
@@ -0,0 +1,62 @@
+
+// Color Functions
+// --------------------------------------------------
+
+@function inverse($color-value) {
+  @if (lightness($color-value) > 70) {
+    @return #000;
+  }
+  @else {
+    @return #fff;
+  }
+}
+
+@function darken-or-lighten($color-value, $amount:8%) {
+  // lightness is a percent value, 0% darkest, 100% lightest
+  $lightness-percent: lightness($color-value);
+
+
+  @if ($lightness-percent > 80) {
+    // really light foreground color, so really darken it up
+    @return darken($color-value, ($amount * 2));
+  }
+
+  @if ($lightness-percent < 35) {
+    // dark foreground color, so light it up
+    @return lighten($color-value, $amount * 2);
+  }
+
+  // default to darken
+  @return darken($color-value, $amount);
+}
+
+@function color($color-name) {
+  @return map-get($colors, $color-name);
+}
+
+@function auxiliary-colors() {
+  // get a map of all the colors, except "primary"
+  @return map-remove($colors, primary);
+}
+
+
+// String Replace Function
+// --------------------------------------------------
+
+@function str-replace($string, $search, $replace: '') {
+  $index: str-index($string, $search);
+
+  @if $index {
+    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
+  }
+
+  @return $string;
+}
+
+
+// URL Encode Function
+// --------------------------------------------------
+
+@function url-encode($val) {
+  @return str-replace($val, ' ', '%20');
+}
--- a/ionic/util/mixins.scss
+++ b/ionic/util/mixins.scss
@@ -1,46 +1,4 @@

-// Color Functions
-// --------------------------------------------------
-
-@function inverse($color-value) {
-  @if (lightness($color-value) > 70) {
-    @return #000;
-  }
-  @else {
-    @return #fff;
-  }
-}
-
-@function darken-or-lighten($color-value, $amount:8%) {
-  // lightness is a percent value, 0% darkest, 100% lightest
-  $lightness-percent: lightness($color-value);
-
-
-  @if ($lightness-percent > 80) {
-    // really light foreground color, so really darken it up
-    @return darken($color-value, ($amount * 2));
-  }
-
-  @if ($lightness-percent < 35) {
-    // dark foreground color, so light it up
-    @return lighten($color-value, $amount * 2);
-  }
-
-  // default to darken
-  @return darken($color-value, $amount);
-}
-
-@function color($color-name) {
-  @return map-get($colors, $color-name);
-}
-
-@function auxiliary-colors() {
-  // get a map of all the colors, except "primary"
-  @return map-remove($colors, primary);
-}
-
-
-
 // Appearance
 // --------------------------------------------------

@@ -50,19 +8,15 @@
 }


-
-// User Select None
+// Calc
 // --------------------------------------------------

-@mixin user-select-none() {
-  -webkit-user-select: none;
-  -moz-user-select: none;
-  -ms-user-select: none;
-  user-select: none;
+@mixin calc($property, $expression) {
+  #{$property}: -webkit-calc(#{$expression});
+  #{$property}: calc(#{$expression});
 }


-
 // Input Placeholder
 // --------------------------------------------------

@@ -81,31 +35,6 @@
 }


-
-// String Replace Function
-// --------------------------------------------------
-
-@function str-replace($string, $search, $replace: '') {
-  $index: str-index($string, $search);
-
-  @if $index {
-    @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
-  }
-
-  @return $string;
-}
-
-
-
-// URL Encode Function
-// --------------------------------------------------
-
-@function url-encode($val) {
-  @return str-replace($val, ' ', '%20');
-}
-
-
-
 // SVG Background Image Mixin
 // --------------------------------------------------

@@ -115,11 +44,12 @@
 }


-
-// calc()
+// User Select None
 // --------------------------------------------------

-@mixin calc($property, $expression) {
-  #{$property}: -webkit-calc(#{$expression});
-  #{$property}: calc(#{$expression});
+@mixin user-select-none() {
+  -webkit-user-select: none;
+  -moz-user-select: none;
+  -ms-user-select: none;
+  user-select: none;
 }
--- a/ionic/util/util.scss
+++ b/ionic/util/util.scss
@@ -1,3 +1,4 @@
+@import "../ionic.globals";

 .align-left {
  text-align: left;