mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2026-03-13 10:22:08 +08:00
mixins cleanup
This commit is contained in:
Adam Bradley
8
dist/css/ionic.css
vendored
8
dist/css/ionic.css
vendored
@@ -1953,7 +1953,6 @@ html {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
font-family: sans-serif;
|
||||
/* 1 */
|
||||
@@ -2633,7 +2632,6 @@ a.subdued {
|
||||
-webkit-user-select: none;
|
||||
-moz-user-select: none;
|
||||
-ms-user-select: none;
|
||||
-o-user-select: none;
|
||||
user-select: none;
|
||||
position: absolute;
|
||||
right: 0;
|
||||
@@ -3197,6 +3195,7 @@ a.subdued {
|
||||
*/
|
||||
.modal {
|
||||
-webkit-transform: translate3d(0, 100%, 0);
|
||||
-moz-transform: translate3d(0, 100%, 0);
|
||||
transform: translate3d(0, 100%, 0);
|
||||
position: fixed;
|
||||
top: 0;
|
||||
@@ -4328,6 +4327,7 @@ input[type="checkbox"][readonly] {
|
||||
/* also the handle's appearance when it is "off" */
|
||||
.toggle .handle {
|
||||
-webkit-transition: 0.1s ease-in-out;
|
||||
-moz-transition: 0.1s ease-in-out;
|
||||
transition: 0.1s ease-in-out;
|
||||
position: absolute;
|
||||
top: 2px;
|
||||
@@ -4353,6 +4353,7 @@ input[type="checkbox"][readonly] {
|
||||
/* the handle when the toggle is "on" */
|
||||
.toggle input:checked + .track .handle {
|
||||
-webkit-transform: translate3d(22px, 0, 0);
|
||||
-moz-transform: translate3d(22px, 0, 0);
|
||||
transform: translate3d(22px, 0, 0);
|
||||
background-color: white; }
|
||||
|
||||
@@ -4812,6 +4813,7 @@ input[type="range"] {
|
||||
|
||||
.button-icon {
|
||||
-webkit-transition: opacity 0.1s;
|
||||
-moz-transition: opacity 0.1s;
|
||||
transition: opacity 0.1s;
|
||||
padding: 0 6px;
|
||||
min-width: initial;
|
||||
@@ -4828,6 +4830,7 @@ input[type="range"] {
|
||||
|
||||
.button-clear {
|
||||
-webkit-transition: opacity 0.1s;
|
||||
-moz-transition: opacity 0.1s;
|
||||
transition: opacity 0.1s;
|
||||
padding: 0 6px;
|
||||
max-height: 42px;
|
||||
@@ -4847,6 +4850,7 @@ input[type="range"] {
|
||||
|
||||
.button-outline {
|
||||
-webkit-transition: opacity 0.1s;
|
||||
-moz-transition: opacity 0.1s;
|
||||
transition: opacity 0.1s;
|
||||
background: none;
|
||||
box-shadow: none; }
|
||||
|
||||
@@ -117,12 +117,9 @@
|
||||
}
|
||||
|
||||
|
||||
// Utility Mixins
|
||||
// Clearfix
|
||||
// --------------------------------------------------
|
||||
|
||||
// Clearfix
|
||||
// --------
|
||||
// For clearing floats like a boss h5bp.com/q
|
||||
@mixin clearfix {
|
||||
*zoom: 1;
|
||||
&:before,
|
||||
@@ -137,28 +134,11 @@
|
||||
clear: both;
|
||||
}
|
||||
}
|
||||
// Center-align a block level element
|
||||
// ----------------------------------
|
||||
@mixin center-block() {
|
||||
display: block;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
||||
// Sizing shortcuts
|
||||
// -------------------------
|
||||
@mixin size($height, $width) {
|
||||
width: $width;
|
||||
height: $height;
|
||||
}
|
||||
@mixin square($size) {
|
||||
@include size($size, $size);
|
||||
}
|
||||
|
||||
|
||||
// Placeholder text
|
||||
// -------------------------
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin placeholder($color: $input-color-placeholder) {
|
||||
&:-moz-placeholder {
|
||||
color: $color;
|
||||
@@ -173,8 +153,8 @@
|
||||
|
||||
|
||||
// Text overflow
|
||||
// -------------------------
|
||||
// Requires inline-block or block for proper styling
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin text-overflow() {
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
@@ -182,7 +162,7 @@
|
||||
}
|
||||
|
||||
|
||||
// FONTS
|
||||
// Fonts
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin font-family-serif() {
|
||||
@@ -214,19 +194,19 @@
|
||||
|
||||
|
||||
|
||||
|
||||
|
||||
// CSS3 PROPERTIES
|
||||
// Appearance
|
||||
// --------------------------------------------------
|
||||
|
||||
// Appearance
|
||||
@mixin appearance($val) {
|
||||
-webkit-appearance: $val;
|
||||
-moz-appearance: $val;
|
||||
appearance: $val;
|
||||
}
|
||||
|
||||
|
||||
// Border Radius
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin border-radius($radius) {
|
||||
-webkit-border-radius: $radius;
|
||||
-moz-border-radius: $radius;
|
||||
@@ -273,93 +253,158 @@
|
||||
@include border-bottom-left-radius($radius);
|
||||
}
|
||||
|
||||
// Drop shadows
|
||||
|
||||
// Box shadows
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin box-shadow($shadow...) {
|
||||
-webkit-box-shadow: $shadow;
|
||||
-moz-box-shadow: $shadow;
|
||||
box-shadow: $shadow;
|
||||
}
|
||||
|
||||
|
||||
// Transitions
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin transition($transition...) {
|
||||
-webkit-transition: $transition;
|
||||
-moz-transition: $transition;
|
||||
transition: $transition;
|
||||
}
|
||||
@mixin transition-delay($transition-delay) {
|
||||
-webkit-transition-delay: $transition-delay;
|
||||
-moz-transition-delay: $transition-delay;
|
||||
transition-delay: $transition-delay;
|
||||
}
|
||||
@mixin transition-duration($transition-duration) {
|
||||
-webkit-transition-duration: $transition-duration;
|
||||
-moz-transition-duration: $transition-duration;
|
||||
transition-duration: $transition-duration;
|
||||
}
|
||||
@mixin transition-timing-function($transition-timing) {
|
||||
-webkit-transition-timing-function: $transition-timing;
|
||||
-moz-transition-timing-function: $transition-timing;
|
||||
transition-timing-function: $transition-timing;
|
||||
}
|
||||
@mixin animation($animation) {
|
||||
-webkit-animation: $animation;
|
||||
-moz-animation: $animation;
|
||||
animation: $animation;
|
||||
}
|
||||
@mixin animation-duration($duration) {
|
||||
-webkit-animation-duration: $duration;
|
||||
-moz-animation-duration: $duration;
|
||||
animation-duration: $duration;
|
||||
}
|
||||
@mixin animation-timing-function($animation-timing) {
|
||||
-webkit-animation-timing-function: $animation-timing;
|
||||
-moz-animation-timing-function: $animation-timing;
|
||||
animation-timing-function: $animation-timing;
|
||||
}
|
||||
@mixin animation-fill-mode($fill-mode) {
|
||||
-webkit-animation-fill-mode: $fill-mode;
|
||||
-moz-animation-fill-mode: $fill-mode;
|
||||
animation-fill-mode: $fill-mode;
|
||||
}
|
||||
@mixin animation-name($name) {
|
||||
-webkit-animation-name: $name;
|
||||
-moz-animation-name: $name;
|
||||
animation-name: $name;
|
||||
}
|
||||
@mixin animation-iteration-count($count) {
|
||||
-webkit-animation-iteration-count: $count;
|
||||
-moz-animation-iteration-count: $count;
|
||||
animation-iteration-count: $count;
|
||||
}
|
||||
|
||||
|
||||
// Transformations
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin rotate($degrees) {
|
||||
-webkit-transform: rotate($degrees);
|
||||
-moz-transform: rotate($degrees);
|
||||
transform: rotate($degrees);
|
||||
}
|
||||
@mixin scale($ratio) {
|
||||
-webkit-transform: scale($ratio);
|
||||
-moz-transform: scale($ratio);
|
||||
transform: scale($ratio);
|
||||
}
|
||||
@mixin translate($x, $y) {
|
||||
-webkit-transform: translate($x, $y);
|
||||
-moz-transform: translate($x, $y);
|
||||
transform: translate($x, $y);
|
||||
}
|
||||
@mixin skew($x, $y) {
|
||||
-webkit-transform: skew($x, $y);
|
||||
-moz-transform: skew($x, $y);
|
||||
transform: skew($x, $y);
|
||||
-webkit-backface-visibility: hidden; // See https://github.com/twitter/bootstrap/issues/5319
|
||||
-webkit-backface-visibility: hidden;
|
||||
}
|
||||
@mixin translate3d($x, $y, $z) {
|
||||
-webkit-transform: translate3d($x, $y, $z);
|
||||
-moz-transform: translate3d($x, $y, $z);
|
||||
transform: translate3d($x, $y, $z);
|
||||
}
|
||||
|
||||
|
||||
// Backface visibility
|
||||
// --------------------------------------------------
|
||||
// Prevent browsers from flickering when using CSS 3D transforms.
|
||||
// Default value is `visible`, but can be changed to `hidden
|
||||
// See git pull https://github.com/dannykeane/bootstrap.git backface-visibility for examples
|
||||
|
||||
@mixin backface-visibility($visibility){
|
||||
-webkit-backface-visibility: $visibility;
|
||||
backface-visibility: $visibility;
|
||||
}
|
||||
|
||||
|
||||
// Background clipping
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin background-clip($clip) {
|
||||
-webkit-background-clip: $clip;
|
||||
-moz-background-clip: $clip;
|
||||
background-clip: $clip;
|
||||
}
|
||||
|
||||
|
||||
// Background sizing
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin background-size($size) {
|
||||
-webkit-background-size: $size;
|
||||
-moz-background-size: $size;
|
||||
-o-background-size: $size;
|
||||
background-size: $size;
|
||||
}
|
||||
|
||||
|
||||
// Box sizing
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin box-sizing($boxmodel) {
|
||||
-webkit-box-sizing: $boxmodel;
|
||||
-moz-box-sizing: $boxmodel;
|
||||
box-sizing: $boxmodel;
|
||||
}
|
||||
|
||||
|
||||
// User select
|
||||
// For selecting text on the page
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin user-select($select) {
|
||||
-webkit-user-select: $select;
|
||||
-moz-user-select: $select;
|
||||
-ms-user-select: $select;
|
||||
-o-user-select: $select;
|
||||
user-select: $select;
|
||||
}
|
||||
|
||||
// CSS3 Content Columns
|
||||
|
||||
// Content Columns
|
||||
// --------------------------------------------------
|
||||
|
||||
@mixin content-columns($columnCount, $columnGap: $grid-gutter-width) {
|
||||
-webkit-column-count: $columnCount;
|
||||
-moz-column-count: $columnCount;
|
||||
@@ -369,16 +414,6 @@
|
||||
column-gap: $columnGap;
|
||||
}
|
||||
|
||||
// Optional hyphenation
|
||||
@mixin hyphens($mode: auto) {
|
||||
word-wrap: break-word;
|
||||
-webkit-hyphens: $mode;
|
||||
-moz-hyphens: $mode;
|
||||
-ms-hyphens: $mode;
|
||||
-o-hyphens: $mode;
|
||||
hyphens: $mode;
|
||||
}
|
||||
|
||||
|
||||
// Flexbox Mixins
|
||||
// --------------------------------------------------
|
||||
@@ -404,17 +439,17 @@
|
||||
|
||||
@mixin flex-direction($value: row) {
|
||||
@if $value == row-reverse {
|
||||
-webkit-box-direction: reverse;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: reverse;
|
||||
-webkit-box-orient: horizontal;
|
||||
} @else if $value == column {
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-box-orient: vertical;
|
||||
} @else if $value == column-reverse {
|
||||
-webkit-box-direction: reverse;
|
||||
-webkit-box-orient: vertical;
|
||||
-webkit-box-direction: reverse;
|
||||
-webkit-box-orient: vertical;
|
||||
} @else {
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-box-orient: horizontal;
|
||||
-webkit-box-direction: normal;
|
||||
-webkit-box-orient: horizontal;
|
||||
}
|
||||
-webkit-flex-direction: $value;
|
||||
-moz-flex-direction: $value;
|
||||
@@ -427,9 +462,9 @@
|
||||
-webkit-flex-wrap: $value;
|
||||
-moz-flex-wrap: $value;
|
||||
@if $value == nowrap {
|
||||
-ms-flex-wrap: none;
|
||||
-ms-flex-wrap: none;
|
||||
} @else {
|
||||
-ms-flex-wrap: $value;
|
||||
-ms-flex-wrap: $value;
|
||||
}
|
||||
flex-wrap: $value;
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user