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

reorg scss util files

Browse Source
This commit is contained in:
Adam Bradley
2015-07-23 13:55:26 -05:00
parent 4c5046710c
commit b58cffab88
12 changed files with 78 additions and 123 deletions
Download Patch File Download Diff File Expand all files Collapse all files

26
ionic/components/app/mixins/colors.scss
View File

@@ -1,26 +0,0 @@
// Color Functions/Mixins
// --------------------------------------------------
@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);
}

16
ionic/components/app/mixins/form.scss
View File

@@ -1,16 +0,0 @@
// Placeholder text
// --------------------------------------------------
@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;
}
}

25
ionic/components/app/mixins/typography.scss
View File

@@ -1,25 +0,0 @@
// Font Mixins
// --------------------------------------------------
@mixin font-shorthand($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
font-weight: $weight;
font-size: $size;
line-height: $line-height;
}
@mixin font-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
font-family: $serif-font-family;
@include font-shorthand($size, $weight, $line-height);
}
@mixin font-sans-serif($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
font-family: $sans-font-family;
@include font-shorthand($size, $weight, $line-height);
}
@mixin font-monospace($size: $base-font-size, $weight: normal, $line-height: $base-line-height) {
font-family: $mono-font-family;
@include font-shorthand($size, $weight, $line-height);
}

112
ionic/components/app/mixins/util.scss
View File

@@ -1,112 +0,0 @@
// Util Mixins/Functions
// Appearance (not a CSS standard, does not autoprefix)
// --------------------------------------------------
@mixin appearance($val) {
-webkit-appearance: $val;
-moz-appearance: $val;
}
// 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;
}
}
}
}
}

29
ionic/components/app/overlay.scss
View File

@@ -1,29 +0,0 @@
// Overlay
// --------------------------------------------------
$overlay-background: #000 !default;
$overlay-opacity: 0.3 !default;
.overlay-backdrop {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
background: $overlay-background;
opacity: $overlay-opacity;
}
.overlay-container {
position: absolute;
top: 0;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
}

153
ionic/components/app/util.scss
View File

@@ -1,153 +0,0 @@
@mixin calc($property, $expression) {
#{$property}: -webkit-calc(#{$expression});
#{$property}: calc(#{$expression});
}
.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;
}

11
ionic/components/button/button.scss
View File

@@ -253,8 +253,8 @@ a[button] {
@mixin button-clear($fg-color) {
&[clear] {
background: none;
color: $fg-color;
background: none;
}
}
@@ -279,10 +279,17 @@ a[button] {
button[#{$color}],
[button][#{$color}] {
@if lightness(get-color($color, base)) > 90 {
$fg-color: get-color($color, inverse);
} @else {
$fg-color: get-color($color, base);
}
@include button-default(get-color($color, base),
get-color($color, inverse));
@include button-clear(get-color($color, base));
@include button-clear($fg-color);
@include button-outline(get-color($color, light));
}

4
ionic/components/button/extensions/material.scss
View File

@@ -93,9 +93,9 @@ $button-material-border-radius: 3px !default;
&[clear] {
box-shadow: none;
@if lightness(get-color($color, base)) > 90 {
/* @if lightness(get-color($color, base)) > 90 {
color: get-color($color, inverse);
}
}*/
&:hover,
&.hover {

9
ionic/components/form/form.scss
View File

@@ -1,8 +1,6 @@
/**
* Forms
* --------------------------------------------------
*/
// Forms
// --------------------------------------------------
$input-label-color: get-color(dark, base);
$input-color: $input-label-color;
@@ -14,6 +12,7 @@ $input-height-base: 5rem;
$input-height-large: $input-height-base + 0.3rem;
$input-height-small: 1.2rem;
// Make all forms have space below them
form {
margin: 0 0 $line-height-base;
@@ -24,7 +23,7 @@ label,
input,
select,
textarea {
@include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
// @include font-shorthand($font-size-base, normal, $line-height-base); // Set size, weight, line-height here
}
input,
select,

2
ionic/components/form/text-input.ts
View File

@@ -26,7 +26,7 @@ export class Input extends IonInputItem {
@Directive({
selector: 'textarea,input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url]',
selector: 'textarea,input[type=text],input[type=password],input[type=number],input[type=search],input[type=email],input[type=url],input[type=tel]',
property: [
'tabIndex'
],