reorg scss util files

ionic/util/mixins.scss

@@ -0,0 +1,169 @@
+
+// Color Mixins/Functions
+// --------------------------------------------------
+
+@function get-color($color, $tone: base) {
+  @return map-get(map-get($colors, $color), $tone);
+}
+
+@function inverse-tone($color) {
+  // For a lighter colored "base" the darker colored "inverse"
+  // the inverse-tone will be the "light" tone
+
+  // For a darker colored "base" the lighter colored "inverse"
+  // the inverse-tone will be the "dark" tone
+
+  $base: map-get(map-get($colors, $color), base);
+  $inverse: map-get(map-get($colors, $color), inverse);
+  $light: map-get(map-get($colors, $color), light);
+  $dark: map-get(map-get($colors, $color), dark);
+
+  $lightness: lightness($base) - lightness($inverse);
+
+  @return if($lightness < 0, $dark, $light);
+}
+
+
+
+// Appearance
+// --------------------------------------------------
+
+@mixin appearance($val) {
+  -webkit-appearance: $val;
+  -moz-appearance: $val;
+}
+
+
+
+// Input Placeholder
+// --------------------------------------------------
+
+@mixin placeholder($color: $input-color-placeholder, $text-indent: 0) {
+  &::-moz-placeholder { // Firefox 19+
+    color: $color;
+  }
+  &:-ms-input-placeholder {
+    color: $color;
+  }
+  &::-webkit-input-placeholder {
+    color: $color;
+    // Safari placeholder margin issue
+    text-indent: $text-indent;
+  }
+}
+
+
+
+// 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) {
+  $val: str-replace($val, ' ', '%20');
+  @return $val;
+}
+
+
+
+// SVG Background Image Mixin
+// --------------------------------------------------
+
+@mixin svg-background-image($svg) {
+  $url: url-encode($svg);
+  background-image: url("data:image/svg+xml;charset=utf-8,#{$url}");
+}
+
+
+
+// Hairline
+// --------------------------------------------------
+
+@mixin hairline($placement, $line-color, $z-index: 999) {
+  // border-width: 1px will actually create 2 device pixels on retina
+  // this nifty trick sets an actual 1px border on hi-res displays
+
+  position: relative;
+
+  @if $placement == top {
+    &:before {
+      @if $line-color == none {
+        border-top: none;
+
+      } @else {
+        position: absolute;
+        top: 0;
+        bottom: auto;
+        left: 0;
+        z-index: $z-index;
+        display: block;
+        width: 100%;
+        height: 1px;
+        content: '';
+
+        border-top: 1px solid $line-color;
+
+        @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
+          border: none;
+          background-image: linear-gradient(0deg, $line-color, $line-color 50%, transparent 50%);
+          background-position: bottom;
+          background-size: 100% 1px;
+          background-repeat: no-repeat;
+        }
+      }
+    }
+
+  } @else if $placement == bottom {
+    &:after {
+      @if $line-color == none {
+        border-bottom: none;
+
+      } @else {
+        position: absolute;
+        top: auto;
+        bottom: 0;
+        left: 0;
+        z-index: $z-index;
+        display: block;
+        width: 100%;
+        height: 1px;
+        content: '';
+
+        border-bottom: 1px solid $line-color;
+
+        @media (-webkit-min-device-pixel-ratio: 1.5), (min-device-pixel-ratio: 1.5) {
+          border: none;
+          background-image: linear-gradient(0deg, $line-color, $line-color 50%, transparent 50%);
+          background-position: bottom;
+          background-size: 100% 1px;
+          background-repeat: no-repeat;
+        }
+      }
+    }
+
+  }
+
+}
+
+
+
+// calc()
+// --------------------------------------------------
+
+@mixin calc($property, $expression) {
+  #{$property}: -webkit-calc(#{$expression});
+  #{$property}: calc(#{$expression});
+}

ionic/util/util.scss

@@ -0,0 +1,149 @@
+
+.no-transition {
+  transition: none !important;
+}
+
+// Remove any hairline borders
+.no-border:after {
+  background: none !important;
+}
+
+.hide.hide.hide {
+  display: none;
+}
+
+
+// Content Padding
+// --------------------------------------------------
+
+$content-padding:    10px !default;
+
+
+.padding,
+.padding > .scroll-content {
+  padding: $content-padding;
+}
+
+.padding-top,
+.padding-vertical {
+  padding-top: $content-padding;
+}
+
+.padding-right,
+.padding-horizontal {
+  padding-right: $content-padding;
+}
+
+.padding-bottom,
+.padding-vertical {
+  padding-bottom: $content-padding;
+}
+
+.padding-left,
+.padding-horizontal {
+  padding-left: $content-padding;
+}
+
+
+// Focus Outline
+// --------------------------------------------------
+// When a keydown event happens, from a tab key, then the
+// 'key-input' class is added to the body element so focusable
+// elements have an outline. On a mousedown or touchstart
+// event then the 'key-input' class is removed.
+
+:focus,
+:active {
+  outline: none;
+}
+
+.key-input {
+
+  :focus {
+    outline-offset: -1px;
+    outline: thin dotted;
+  }
+
+  button:focus,
+  [button]:focus {
+    outline-offset: -2px;
+    outline: 2px solid red;
+  }
+
+}
+
+
+// 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 {
+  position: absolute;
+  top: 0;
+  right: 0;
+  bottom: 0;
+  left: 0;
+  opacity: 0;
+  z-index: $z-index-click-block;
+  transform: translate3d(-9999px, 0px, 0px);;
+
+  //background: red;
+  //opacity: .3;
+}
+
+.click-block-active {
+  transform: translate3d(0px, 0px, 0px);
+}
+
+
+// Swipe Handle
+// --------------------------------------------------
+
+$swipe-handle-width:               20px !default;
+$swipe-handle-top:                 70px !default;
+$swipe-handle-bottom:              70px !default;
+
+.swipe-handle {
+  position: absolute;
+  top: $swipe-handle-top;
+  left: 0;
+  bottom: $swipe-handle-bottom;
+  width: $swipe-handle-width;
+  z-index: $z-index-swipe-handle;
+
+  //background: red;
+  //opacity: 0.2;
+
+  transform: translate3d(-999px, 0px, 0px);
+  &.show-handle {
+    transform: translate3d(0px, 0px, 0px);
+  }
+}
+
+
+// Loading Icon
+// --------------------------------------------------
+
+@keyframes rotation {
+  from {
+    transform: rotate(0deg);
+  }
+  to {
+    transform: rotate(359deg);
+  }
+}
+ion-loading-icon {
+  display: flex;
+  align-self: center;
+  margin: auto;
+
+  font-family: 'Ionicons';
+  &:before {
+    content: "\f44e";
+  }
+  font-size: 128px;
+  color: #666666;
+
+  animation: rotation 45s infinite linear;
+}