From 77c610701648663316a441cabb2f0ad322e84e68 Mon Sep 17 00:00:00 2001 From: pandao <272383090@qq.com> Date: Fri, 19 Jun 2015 10:05:48 +0800 Subject: [PATCH] Release v0.2.0 --- .gitignore | 4 + CHANGE.md | 18 +- Gulpfile.js | 59 +- README.md | 2 +- bower.json | 5 +- dist/prefixes.scss | 759 +++++++++++++++---------- examples/animation.scss | 2 +- examples/border-radius.scss | 2 +- examples/box-shadow.scss | 2 +- examples/box-sizing.css | 19 - examples/box-sizing.scss | 2 +- examples/{ => css}/animation.css | 139 +++-- examples/{ => css}/border-radius.css | 79 ++- examples/{ => css}/box-shadow.css | 33 +- examples/css/box-sizing.css | 10 + examples/css/flexbox.css | 160 ++++++ examples/{ => css}/mask.css | 37 +- examples/{ => css}/sass.css | 53 +- examples/{ => css}/simple.css | 61 +-- examples/{ => css}/transform.css | 75 ++- examples/{ => css}/viewport.css | 45 +- examples/display-flex.css | 33 -- examples/display-flex.scss | 12 - examples/flexbox.scss | 66 +++ examples/mask.scss | 2 +- examples/sass.sass | 2 +- examples/simple.scss | 3 +- examples/transform.scss | 2 +- examples/viewport.scss | 2 +- package.json | 9 +- src/animation.scss | 76 +++ src/backgroup.scss | 31 ++ src/border.scss | 78 +++ src/box.scss | 27 + src/clip.scss | 9 + src/column.scss | 64 +++ src/display.scss | 8 + src/filter.scss | 17 + src/flexbox.scss | 219 ++++++++ src/font.scss | 20 + src/helper.scss | 49 ++ src/input.scss | 23 + src/margin.scss | 14 + src/mask.scss | 57 ++ src/padding.scss | 14 + src/perspective.scss | 30 + src/prefixes.scss | 791 --------------------------- src/tab.scss | 10 + src/text.scss | 91 +++ src/transform.scss | 40 ++ src/transition.scss | 33 ++ src/viewport.scss | 28 + 52 files changed, 1953 insertions(+), 1473 deletions(-) delete mode 100644 examples/box-sizing.css rename examples/{ => css}/animation.css (82%) rename examples/{ => css}/border-radius.css (78%) rename examples/{ => css}/box-shadow.css (59%) create mode 100644 examples/css/box-sizing.css create mode 100644 examples/css/flexbox.css rename examples/{ => css}/mask.css (62%) rename examples/{ => css}/sass.css (70%) rename examples/{ => css}/simple.css (55%) rename examples/{ => css}/transform.css (76%) rename examples/{ => css}/viewport.css (56%) delete mode 100644 examples/display-flex.css delete mode 100644 examples/display-flex.scss create mode 100644 examples/flexbox.scss create mode 100644 src/animation.scss create mode 100644 src/backgroup.scss create mode 100644 src/border.scss create mode 100644 src/box.scss create mode 100644 src/clip.scss create mode 100644 src/column.scss create mode 100644 src/display.scss create mode 100644 src/filter.scss create mode 100644 src/flexbox.scss create mode 100644 src/font.scss create mode 100644 src/helper.scss create mode 100644 src/input.scss create mode 100644 src/margin.scss create mode 100644 src/mask.scss create mode 100644 src/padding.scss create mode 100644 src/perspective.scss delete mode 100644 src/prefixes.scss create mode 100644 src/tab.scss create mode 100644 src/text.scss create mode 100644 src/transform.scss create mode 100644 src/transition.scss create mode 100644 src/viewport.scss diff --git a/.gitignore b/.gitignore index c465df1..c08dc7c 100644 --- a/.gitignore +++ b/.gitignore @@ -1,6 +1,10 @@ .sass-cache/ node_modules/ backup/ +demo/ +research/ +test/ +tests/ examples/*.map *.bat *.sh diff --git a/CHANGE.md b/CHANGE.md index 4753e45..939f802 100644 --- a/CHANGE.md +++ b/CHANGE.md @@ -11,4 +11,20 @@ Releases v0.1.0, 115 mixins. #### v0.1.1 - Added `bower.json` and registed bower package; -- Update `README.md`; \ No newline at end of file +- Update `README.md`; + +#### v0.2.0 + +- Modular division, change scss source files; +- Removed `src/prefixes.scss`; +- Perfect and fixed Flexbox supports; + - Fixed Flexbox properties; + - Added mixin `display-flex()` alias `flexbox()`; + - Added mixin `order()` alias `flex-order()`; + - Added mixin `justify-content()` alias `flex-justify()`; + - Added mixin `inline-flex()` alias `inline-flexbox()`; + - Added mixin `flex-inline()`; +- Change `dist/prefixes.scss` header comment to inline; +- Update `Gulpfile.js`, `package.json` and `bower.json`; +- Update `README.md` and `CHANGE.md`; +- Update Examples; \ No newline at end of file diff --git a/Gulpfile.js b/Gulpfile.js index 36cbd11..450f1fd 100644 --- a/Gulpfile.js +++ b/Gulpfile.js @@ -2,44 +2,67 @@ var gulp = require("gulp"); var gutil = require("gulp-util"); -var sass = require("gulp-ruby-sass"); +var sass = require("gulp-sass"); var rename = require("gulp-rename"); var notify = require("gulp-notify"); +var header = require('gulp-header'); +var concat = require("gulp-concat"); +var dateFormat = require("dateformatter").format; +var pkg = require("./package.json"); -var examplesTask = function(fileName, path, ext) { - - path = path || ""; - ext = ext || "scss"; +pkg.name = "Prefixes.scss"; +pkg.today = dateFormat; + +var headerComment = ["/*!", + " * <%= pkg.name %> v<%= pkg.version %>", + " * @file <%= fileName(file) %> ", + " * @description <%= pkg.description %>", + " * @license MIT License", + " * @author <%= pkg.author %>", + " * {@link <%= pkg.homepage %>}", + " * @updateTime <%= pkg.today('Y-m-d') %>", + " */", + "\r\n"].join("\r\n"); + +var headerCommentInline = "/*! <%= pkg.name %> v<%= pkg.version %> | <%= pkg.description %> | Author: <%= pkg.author %> | Copyright (c) 2015 Pandao, MIT License | <%= pkg.homepage %> | <%=pkg.today('Y-m-d') %> */\r\n\r\n@charset \"UTF-8\";\r\n"; + + +var examplesTask = function(files) { - return gulp.src(path + fileName + "." + ext) - .pipe(sass({ style: "nested", sourcemap: false })) //nested,compact,expanded,compressed - .pipe(gulp.dest("examples")) - .pipe(notify({ message: fileName + "." + ext + " task completed!" })); + return gulp.src("examples/" + files) + .pipe(sass({ outputStyle: "nested", sourcemap: false })) //nested,compact,expanded,compressed + .pipe(gulp.dest("examples/css")) + .pipe(notify({ message: "Examples task completed!" })); }; -gulp.task("scss", function() { - return gulp.src("src/prefixes.scss") - .pipe(rename("prefixes.scss")) - .pipe(gulp.dest("dist")) - .pipe(notify({ message: "prefixes.scss task completed!" })); +gulp.task("dist", function() { + return gulp.src("src/**/*.scss") + .pipe(concat("prefixes.scss")) + .pipe(gulp.dest("dist")) + .pipe(header(headerCommentInline, {pkg : pkg, fileName : function(file) { + var name = file.path.split(file.base + "\\"); + return name[1]; + }})) + .pipe(gulp.dest("dist")) + .pipe(notify({ message: "prefixes.scss task completed!" })); }); gulp.task("sass", function() { - return examplesTask("*", "examples/**/", "sass"); + return examplesTask("*.sass"); }); gulp.task("examples", function() { - return examplesTask("*", "examples/**/"); + return examplesTask("**/*.scss"); }); gulp.task("watch", function() { - gulp.watch("src/**/*.scss", ["scss"]); + gulp.watch("src/**/*.scss", ["dist"]); gulp.watch("examples/**/*.sass", ["sass"]); gulp.watch("examples/**/*.scss", ["examples"]); }); gulp.task("default", function() { - gulp.run("scss"); + gulp.run("dist"); gulp.run("sass"); gulp.run("examples"); }); \ No newline at end of file diff --git a/README.md b/README.md index d3fdbd5..1b2f664 100644 --- a/README.md +++ b/README.md @@ -1,6 +1,6 @@ # Prefixes.scss -CSS(3) prefixes mixins library for Sass/Scss. Free installation, custom you need css prefixes. +CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes. #### Install diff --git a/bower.json b/bower.json index 719d379..4c73d70 100644 --- a/bower.json +++ b/bower.json @@ -1,11 +1,11 @@ { "name": "prefixes.scss", - "version": "0.1.1", + "version": "0.2.0", "homepage": "https://github.com/pandao/prefixes.scss", "authors": [ "pandao <272383090@qq.com>" ], - "description": "CSS(3) prefixes mixins library for Sass/Scss. Free installation, custom you need css prefixes.", + "description": "CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes.", "keywords": [ "css", "prefix", @@ -18,6 +18,7 @@ "**/.*", "node_modules", "bower_components", + "research", "test", "tests" ] diff --git a/dist/prefixes.scss b/dist/prefixes.scss index 7858733..5ce42f8 100644 --- a/dist/prefixes.scss +++ b/dist/prefixes.scss @@ -1,182 +1,6 @@ -@charset "UTF-8"; - -/*! - * prefixes.scss - * @author Pandao - * @version 0.1.0 - * @homePage https://github.com/pandao/prefixes.scss - * @license MIT - * @copyright Copyright (c) 2015 - */ - -// appearance - -@mixin appearance($value) { - -webkit-appearance: $value; - -moz-appearance: $value; - -ms-appearance: $value; - appearance: $value; -} - -// clearfix - -@mixin clearfix() { - &:before, &:after { - content: " "; - display: table; - } - - &:after { - clear: both; - } -} - -// viewport - -@mixin viewport-device-width() { - width: device-width; - user-zoom: fixed; -} - -@mixin viewport() { - @-webkit-viewport { - @include viewport-device-width(); - } - @-moz-viewport { - @include viewport-device-width(); - } - - @-ms-viewport { - @include viewport-device-width(); - } - - @-o-viewport { - @include viewport-device-width(); - } - - @viewport { - @include viewport-device-width(); - } -} - -// Transform - -@mixin transform($transform) { - -webkit-transform: $transform; /* Safari, Chrome */ - -moz-transform: $transform; /* Firefox 3.5~16.0 */ - -ms-transform: $transform; /* IE9~10 */ - -o-transform: $transform; /* Opera 10.5~12.10 */ - transform: $transform; -} - -@mixin transform-origin($origin) { - -webkit-transform-origin: $origin; - -moz-transform-origin: $origin; /* Firefox 3.5~16.0 */ - -ms-transform-origin: $origin; /* IE9~10 */ - -o-transform-origin: $origin; /* Opera 10.5~12.10 */ - transform-origin: $origin; -} - -@mixin transform-origin-x($origin) { - -webkit-transform-origin-x: $origin; /* Blink, Webkit */ - transform-origin-x: $origin; /* IE11+ */ -} - -@mixin transform-origin-y($origin) { - -webkit-transform-origin-y: $origin; /* Blink, Webkit */ - transform-origin-y: $origin; /* IE11+ */ -} - -@mixin transform-origin-z($origin) { - -webkit-transform-origin-z: $origin; /* Blink, Webkit */ - transform-origin-z: $origin; /* IE11+ */ -} - -@mixin transform-style($style) { - -webkit-transform-style: $style; - -moz-transform-style: $style; /* Firefox 10~16.0 */ - -ms-transform-style: $style; /* IE9~10 */ - transform-style: $style; /* Firefox, Blink, IE11+ */ -} - -// perspective - -@mixin perspective($value) { - -webkit-perspective: $value; /* Safari, Chrome */ - perspective: $value; /* None yet / Non-standard */ -} - -@mixin perspective-origin($value) { - -webkit-perspective-origin: $value; /* Safari, Chrome 12+ */ - -moz-perspective-origin: $value; /* Firefox 10~16 */ - perspective-origin: $value; /* Opera 15+, IE10+ */ -} - -@mixin perspective-origin-x($value) { - -webkit-perspective-origin-x: $value; /* Safari, Chrome 12+ */ - perspective-origin-x: $value; /* IE10+ */ -} - -@mixin perspective-origin-y($value) { - -webkit-perspective-origin-y: $value; /* Safari, Chrome 12+ */ - perspective-origin-y: $value; /* IE10+ */ -} - -@mixin backface-visibility($value : hidden) { - -webkit-backface-visibility: $value; /* Chrome, Safari, Opera 15+ */ - -moz-backface-visibility: $value; /* Firefox */ - -ms-backface-visibility: $value; /* IE10 */ - backface-visibility: $value; -} - -// Transitions IE10+ - -@mixin transition($transition...) { - -webkit-transition: $transition; /* Safari, Chrome */ - -moz-transition: $transition; /* Firefox 4.0~16.0 */ - transition: $transition; /* IE >9, FF >15, Opera >12.0 */ -} - -@mixin transition-property($property) { - -webkit-transition-property: $property; - -moz-transition-property: $property; /* Firefox 4.0~16.0 */ - transition-property: $property; -} - -@mixin transition-duration($duration) { - -webkit-transition-duration: $duration; - -moz-transition-duration: $duration; /* Firefox 4.0~16.0 */ - transition-duration: $duration; -} - -@mixin transition-timing-function($easing) { - -webkit-transition-timing-function: $easing; - -moz-transition-timing-function: $easing; /* Firefox 4.0~16.0 */ - transition-timing-function: $easing; -} - -@mixin transition-delay($delay) { - -webkit-transition-delay: $delay; - -moz-transition-delay: $delay; /* Firefox 4.0~16.0 */ - transition-delay: $delay; -} - -// Flex align - -@mixin align-content($value) { - -webkit-align-content: $value; /* Chrome 21.0+, Safari Not supported. */ - align-content: $value; /* Firefox 28+, Opera 12.10, IE Not supported. */ -} - -@mixin align-items($value) { - -webkit-align-items: $value; /* Safari 7.0+, Chrome 21.0+ */ - align-items: $value; /* Firefox 20.0+, IE11+, Opera 12.10 */ -} +/*! Prefixes.scss v0.2.0 | CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes. | Author: Pandao | Copyright (c) 2015 Pandao, MIT License | https://github.com/pandao/prefixes.scss | 2015-06-19 */ -@mixin align-self($value) { - -webkit-align-self: $value; /* Chrome 21~36, Safari Not supported. */ - align-self: $value; /* Firefox 28+, Opera 12.10, IE Not supported. */ -} +@charset "UTF-8"; // Animations IE10+ @@ -253,15 +77,41 @@ animation-fill-mode: $mode; } -// user-select + -@mixin user-select($type) { - -webkit-user-select: $type; - -moz-user-select: $type; - -ms-user-select: $type; - -o-user-select: $type; - user-select: $type; +// background + +// gradient + +@mixin linear-gradient($start-color, $end-color, $position : top, $perStart : 0%, $perEnd : 100%) { + background: -webkit-linear-gradient($position, $start-color, $end-color); /* Webkit browsers */ + background: -moz-linear-gradient( $position, $start-color, $end-color); /* Firefox(old) */ + background: -o-linear-gradient( $position, $start-color, $end-color); /* Opera(old) */ + background: -ms-linear-gradient( $position, $start-color $perStart, $end-color $perEnd); /* IE10 */ + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, start-colorstr=#{$start-color}, end-colorstr=#{$end-color}); /* IE9 */ + ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, start-colorstr=#{$start-color}, end-colorstr=#{$end-color})"; /* IE8 */ + background: linear-gradient( $position, $start-color $perStart, $end-color $perEnd); /* W3C */ +} + +@mixin background-clip($value) { + -webkit-background-clip: $value; + background-clip: $value; /* Firefox 4.0, IE9+, Opera 10.5+, Chrome, Safari 3.0+ */ +} + +@mixin background-origin($value) { + -webkit-background-origin: $value; + background-origin: $value; /* IE9+, Other */ +} + +@mixin background-size($value) { + -webkit-background-size: $value; /* Chrome, iOS, Safari */ + -moz-background-size: $value; /* Firefox 3.6~4.0 */ + -o-background-size: $value; /* Opera 9.5 */ + background-size: $value; /* IE9+, New */ } + + +// Border // border-radius @@ -338,6 +188,9 @@ -webkit-border-image-repeat: $value; /* Safari 5, Chrome */ border-image-repeat: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */ } + + +// Box // box-shadow @@ -363,35 +216,17 @@ -webkit-box-reflect: $value; /* Chrome, Safari, iOS, Blackberry */ box-reflect: $value; /* None yet / Non-standard */ } + -// background - -@mixin linear-gradient($start-color, $end-color, $position : top, $perStart : 0%, $perEnd : 100%) { - background: -webkit-linear-gradient($position, $start-color, $end-color); /* Webkit browsers */ - background: -moz-linear-gradient( $position, $start-color, $end-color); /* Firefox(old) */ - background: -o-linear-gradient( $position, $start-color, $end-color); /* Opera(old) */ - background: -ms-linear-gradient( $position, $start-color $perStart, $end-color $perEnd); /* IE10 */ - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, start-colorstr=#{$start-color}, end-colorstr=#{$end-color}); /* IE9 */ - ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, start-colorstr=#{$start-color}, end-colorstr=#{$end-color})"; /* IE8 */ - background: linear-gradient( $position, $start-color $perStart, $end-color $perEnd); /* W3C */ -} - -@mixin background-clip($value) { - -webkit-background-clip: $value; - background-clip: $value; /* Firefox 4.0, IE9+, Opera 10.5+, Chrome, Safari 3.0+ */ -} +// Clip -@mixin background-origin($value) { - -webkit-background-origin: $value; - background-origin: $value; /* IE9+, Other */ -} +// clip-path -@mixin background-size($value) { - -webkit-background-size: $value; /* Chrome, iOS, Safari */ - -moz-background-size: $value; /* Firefox 3.6~4.0 */ - -o-background-size: $value; /* Opera 9.5 */ - background-size: $value; /* IE9+, New */ +@mixin clip-path($value) { + -webkit-clip-path: $value; /* Chrome, iOS, Safari */ + clip-path: $value; } + // Column @@ -456,106 +291,255 @@ -moz-columns: $value; /* Firefox */ columns: $value; /* IE10+, Opera */ } + -// clip-path - -@mixin clip-path($value) { - -webkit-clip-path: $value; /* Chrome, iOS, Safari */ - clip-path: $value; -} - -// display +// Display @mixin display-grid() { display: -ms-grid; /* IE 10 */ display: grid; /* None yet */ } + + +// filter + +@mixin filter($value) { + -webkit-filter: $value; /* Chrome 23+, Safari 6.0+, Blackberry 10.0+ */ + filter: $value; /* None yet */ +} + +// filter blur + +@mixin filter-blur($value : 10px, $ie-value : 10) { + filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=#{$ie-value}, MakeShadow=false); /* IE6~IE9 */ + -webkit-filter: blur($value); /* Chrome, Opera, iOS, Safari */ + -moz-filter: blur($value); /* Firefox(Old) */ + -ms-filter: blur($value); + filter: blur($value); +} + + +// Flexbox + @mixin display-flex() { display: -webkit-box; /* Old - iOS 6-, Safari 3.1~6, Blackberry 7 */ display: -ms-flexbox; /* TWEENER - IE 10 */ display: -webkit-flex; /* New - Safari 6.1+. iOS 7.1+, Blackberry 10 */ + display: -moz-flex; display: flex; /* New, Spec - Firefox, Chrome, Opera */ } -@mixin inline-flex($value) { - -webkit-inline-flex: $value; /* Chrome 21.0+ */ - inline-flex: $value; /* Firefox 20+, Opera 12.5 */ +// alias display-flex() + +@mixin flexbox() { + @include display-flex(); } -@mixin flex($value) { +@mixin inline-flex() { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: -moz-inline-flex; + display: inline-flex; +} + +// alias inline-flex() + +@mixin inline-flexbox() { + @include inline-flex(); +} + +@mixin flex-inline($value) { + -webkit-inline-flex: $value; /* Chrome 21.0+ */ + -moz-inline-flex: $value; + -ms-inline-flex: $value; + inline-flex: $value; /* Firefox 20+, Opera 12.5 */ +} + +@mixin flex($value : 1) { -webkit-box-flex: $value; /* Old - iOS 6-, Safari 3.1~6 */ + -moz-box-flex: $value; -webkit-flex: $value; /* Safari 6.1+. iOS 7.1+, Blackberry 10 */ + -moz-flex: $value; -ms-flex: $value; /* IE 10 */ flex: $value; /* New, Spec - Firefox, Chrome, Opera */ } -@mixin flex-direction($value) { - -webkit-flex-direction: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ - flex-direction: $value; /* Firefox 28+, IE11, Opera 12.10 */ +@mixin flex-direction($value: row) { + @if $value == row-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; + } @else if $value == column { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + } @else if $value == column-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; + } @else { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + } + + -webkit-flex-direction: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ + -moz-flex-direction: $value; + -ms-flex-direction: $value; + flex-direction: $value; /* Firefox 28+, IE11, Opera 12.10 */ } -@mixin flex-basis($value) { - -webkit-flex-basis: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ - flex-basis: $value; /* Firefox 22+, IE11, Opera 12.10 */ +@mixin flex-basis($value : auto) { + -webkit-flex-basis: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ + -ms-flex-preferred-size: $value; + -moz-flex-basis: $value; + flex-basis: $value; /* Firefox 22+, IE11, Opera 12.10 */ } -@mixin flex-flow($value) { - -webkit-flex-flow: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ - flex-flow: $value; /* Firefox 28+, IE11, Opera 12.10 */ +@mixin flex-flow($values: (row nowrap)) { + -webkit-flex-flow: $values; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ + -moz-flex-flow: $values; + -ms-flex-flow: $values; + flex-flow: $values; /* Firefox 28+, IE11, Opera 12.10 */ } -@mixin flex-grow($value) { +@mixin flex-grow($value : 0) { + -webkit-box-flex: $value; -webkit-flex-grow: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ + -ms-flex-positive: $value; + -moz-flex-grow: $value; flex-grow: $value; /* Firefox 20+, Opera 12.10, IE Not supported. */ } @mixin flex-shrink($value) { -webkit-flex-shrink: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ + -moz-flex-shrink: $value; flex-shrink: $value; /* Firefox 20+, Opera 12.10, IE Not supported. */ } -@mixin flex-wrap($value) { - -webkit-flex-wrap: $value; /* Safari 6.1+, Chrome 21.0+, Android 4.4+, iOS 7.0+ */ - flex-wrap: $value; /* Firefox 28+, IE11, Opera 12.10 */ +@mixin flex-wrap($value: nowrap) { + -webkit-flex-wrap: $value; /* Safari 6.1+, Chrome 21.0+, Android 4.4+, iOS 7.0+ */ + -moz-flex-wrap: $value; + + @if $value == nowrap { + -ms-flex-wrap: none; + } @else { + -ms-flex-wrap: $value; + } + + flex-wrap: $value; /* Firefox 28+, IE11, Opera 12.10 */ } -@mixin order($value) { - -webkit-order: $value; /* Chrome 21+, Safari Not supported. */ - -ms-flex-order: $value; /* IE 10.0 */ - order: $value; /* Firefox 20+, Opera 12.10 */ +@mixin order($value : 1) { + -webkit-box-ordinal-group: $value + 1; + -webkit-order: $value; /* Chrome 21+, Safari Not supported. */ + -ms-flex-order: $value; /* IE 10.0 */ + -moz-order: $value; + order: $value; /* Firefox 20+, Opera 12.10 */ +} + +// alias order() + +@mixin flex-order($args...) { + @include order($args...); } // flow @mixin flow-into($value) { -webkit-flow-into: $value; /* Safari 7.1+, iOS Safari 7.1+ */ + -moz-flow-into: $value; -ms-flow-into: $value; /* IE10+ */ flow-into: $value; /* None yet */ } @mixin flow-from($value) { -webkit-flow-from: $value; /* Safari 7.1+, iOS Safari 7.1+ */ + -moz-flow-from: $value; -ms-flow-from: $value; /* IE10+ */ flow-from: $value; /* None yet */ } -// filter +// Flex align -@mixin filter($value) { - -webkit-filter: $value; /* Chrome 23+, Safari 6.0+, Blackberry 10.0+ */ - filter: $value; /* None yet */ +// Values: flex-start | flex-end | center | space-between | space-around | stretch + +@mixin align-content($value: stretch) { + -webkit-align-content: $value; /* Chrome 21.0+, Safari Not supported. */ + -moz-align-content: $value; + + @if $value == flex-start { + -ms-flex-line-pack: start; + } @else if $value == flex-end { + -ms-flex-line-pack: end; + } @else { + -ms-flex-line-pack: $value; + } + + align-content: $value; /* Firefox 28+, Opera 12.10, IE Not supported. */ +} + +@mixin align-items($value: stretch) { + @if $value == flex-start { + -webkit-box-align: start; + -ms-flex-align: start; + } @else if $value == flex-end { + -webkit-box-align: end; + -ms-flex-align: end; + } @else { + -webkit-box-align: $value; + -ms-flex-align: $value; + } + + -webkit-align-items: $value; /* Safari 7.0+, Chrome 21.0+ */ + -moz-align-items: $value; + align-items: $value; /* Firefox 20.0+, IE11+, Opera 12.10 */ +} + +// Values: auto | flex-start | flex-end | center | baseline | stretch + +@mixin align-self($value: auto) { + -webkit-align-self: $value; /* Chrome 21~36, Safari Not supported. */ + -moz-align-self: $value; + + @if $value == flex-start { + -ms-flex-item-align: start; + } @else if $value == flex-end { + -ms-flex-item-align: end; + } @else { + -ms-flex-item-align: $value; + } + + align-self: $value; /* Firefox 28+, Opera 12.10, IE Not supported. */ +} + +@mixin justify-content($value : flex-start) { + @if $value == flex-start { + -webkit-box-pack: start; + -ms-flex-pack: start; + } @else if $value == flex-end { + -webkit-box-pack: end; + -ms-flex-pack: end; + } @else if $value == space-around { + -ms-flex-pack: distribute; + } @else if $value == space-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + } @else { + -webkit-box-pack: $value; + -ms-flex-pack: $value; + } + + -webkit-justify-content: $value; /* Chrome 21+, Safari Not supported. */ + -moz-justify-content: $value; /* Chrome 21+, Safari Not supported. */ + justify-content: $value; /* Firefox 20+, Opera 12.10, IE Not supported. */ } -// filter blur +// alias justify-content -@mixin filter-blur($value : 10px, $ie-value : 10) { - filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=#{$ie-value}, MakeShadow=false); /* IE6~IE9 */ - -webkit-filter: blur($value); /* Chrome, Opera, iOS, Safari */ - -moz-filter: blur($value); /* Firefox(Old) */ - -ms-filter: blur($value); - filter: blur($value); -} +@mixin flex-justify($args...) { + @include justify-content($args...); +} + +// Font @mixin font-kerning($value) { -webkit-font-kerning: $value; @@ -574,29 +558,82 @@ -webkit-font-variant-ligatures: $value; font-variant-ligatures: $value; } + -// hyphens +// Helper -@mixin hyphens($value : auto) { - // Chrome 29- and Android 4.0 Browser support "-webkit-hyphens: none", but not the "auto" property. - -webkit-hyphens: $value; /* Safari 5.1+, Chrome */ - -moz-hyphens: $value; /* Firefox 6.0+ */ - -ms-hyphens: $value; /* IE 10+ */ - hyphens: $value; /* None yet */ +// clearfix + +@mixin clearfix() { + &:before, &:after { + content: " "; + display: table; + } + + &:after { + clear: both; + } +} + +// user-select + +@mixin user-select($type) { + -webkit-user-select: $type; + -moz-user-select: $type; + -ms-user-select: $type; + -o-user-select: $type; + user-select: $type; } -@mixin justify-content($value) { - -webkit-justify-content: $value; /* Chrome 21+, Safari Not supported. */ - justify-content: $value; /* Firefox 20+, Opera 12.10, IE Not supported. */ +// appearance + +@mixin appearance($value) { + -webkit-appearance: $value; + -moz-appearance: $value; + -ms-appearance: $value; + appearance: $value; } -// line +// opacity -@mixin line-break($value) { - -webkit-line-break: $value; - line-break: $value; +@mixin opacity($opacity) { + opacity: $opacity; /* W3C */ + filter: alpha(opacity=($opacity * 100)); /* IE */ +} + +// ruby-position + +@mixin ruby-position($value) { + -webkit-ruby-position: $value; /* Blink, Webkit */ + ruby-position: $value; /* Firefox, IE */ } + + +// Input + +// input-placeholder + +@mixin input-placeholder($seletor) { + + #{$seletor}::-webkit-input-placeholder { + @content; + } + + #{$seletor}:-moz-placeholder { /* Firefox 4~18 */ + @content; + } + + #{$seletor}::-moz-placeholder { /* Firefox 19+ */ + @content; + } + + #{$seletor}:-ms-input-placeholder { /* IE10+ */ + @content; + } +} + + // margin @mixin margin-start($value) { @@ -610,8 +647,9 @@ -moz-margin-end: $value; /* Firefox 1.0+ */ margin-end: $value; /* None yet / Non-standard */ } + -// mask +// Mask @mixin mask-image($value) { -webkit-mask-image: $value; /* Chrome, iOS, Safari */ @@ -666,14 +704,7 @@ @mixin mask-box-image($value) { -webkit-mask-box-image: $value; /* Chrome, iOS, Safari */ mask-box-image: $value; /* None yet / Non-standard */ -} - -// opacity - -@mixin opacity($opacity) { - opacity: $opacity; /* W3C */ - filter: alpha(opacity=($opacity * 100)); /* IE */ -} +} // padding @@ -688,14 +719,49 @@ -moz-padding-end: $value; /* Firefox 3+ */ padding-end: $value; } + -// ruby-position +// perspective -@mixin ruby-position($value) { - -webkit-ruby-position: $value; /* Blink, Webkit */ - ruby-position: $value; /* Firefox, IE */ +@mixin perspective($value) { + -webkit-perspective: $value; /* Safari, Chrome */ + perspective: $value; /* None yet / Non-standard */ +} + +@mixin perspective-origin($value) { + -webkit-perspective-origin: $value; /* Safari, Chrome 12+ */ + -moz-perspective-origin: $value; /* Firefox 10~16 */ + perspective-origin: $value; /* Opera 15+, IE10+ */ +} + +@mixin perspective-origin-x($value) { + -webkit-perspective-origin-x: $value; /* Safari, Chrome 12+ */ + perspective-origin-x: $value; /* IE10+ */ +} + +@mixin perspective-origin-y($value) { + -webkit-perspective-origin-y: $value; /* Safari, Chrome 12+ */ + perspective-origin-y: $value; /* IE10+ */ +} + +@mixin backface-visibility($value : hidden) { + -webkit-backface-visibility: $value; /* Chrome, Safari, Opera 15+ */ + -moz-backface-visibility: $value; /* Firefox */ + -ms-backface-visibility: $value; /* IE10 */ + backface-visibility: $value; +} + +// tab + +@mixin tab-size($value) { + -webkit-tab-size: $value; /* Chrome 21+, Safari 6.1+ */ + -moz-tab-size: $value; /* Firefox 4.0 */ + -o-tab-size: $value; /* Opera 10.6~15 */ + tab-size: $value; /* Blink & Webkit */ } + + // Text @mixin text-size-adjust($value) { @@ -760,32 +826,133 @@ text-emphasis-position: $value; /* WebKit */ } -// tab +// Word -@mixin tab-size($value) { - -webkit-tab-size: $value; /* Chrome 21+, Safari 6.1+ */ - -moz-tab-size: $value; /* Firefox 4.0 */ - -o-tab-size: $value; /* Opera 10.6~15 */ - tab-size: $value; /* Blink & Webkit */ +@mixin word-break() { + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; } -// input-placeholder +// hyphens : none | manual | auto +// iOS 4.2+ -@mixin input-placeholder($seletor) { - - #{$seletor}::-webkit-input-placeholder { - @content; +@mixin hyphens($value : auto) { + // Chrome 29- and Android 4.0 Browser support "-webkit-hyphens: none", but not the "auto" property. + -webkit-hyphens: $value; /* Safari 5.1+, Chrome */ + -moz-hyphens: $value; /* Firefox 6.0+ */ + -ms-hyphens: $value; /* IE 10+ */ + hyphens: $value; /* None yet */ +} + +// line +// 指定用于中文、日语和韩语 (CJK) 文本的换行规则的严格程度 + +@mixin line-break($value) { + -webkit-line-break: $value; + line-break: $value; +} + + +// Transform + +@mixin transform($transform) { + -webkit-transform: $transform; /* Safari, Chrome */ + -moz-transform: $transform; /* Firefox 3.5~16.0 */ + -ms-transform: $transform; /* IE9~10 */ + -o-transform: $transform; /* Opera 10.5~12.10 */ + transform: $transform; +} + +@mixin transform-origin($origin) { + -webkit-transform-origin: $origin; + -moz-transform-origin: $origin; /* Firefox 3.5~16.0 */ + -ms-transform-origin: $origin; /* IE9~10 */ + -o-transform-origin: $origin; /* Opera 10.5~12.10 */ + transform-origin: $origin; +} + +@mixin transform-origin-x($origin) { + -webkit-transform-origin-x: $origin; /* Blink, Webkit */ + transform-origin-x: $origin; /* IE11+ */ +} + +@mixin transform-origin-y($origin) { + -webkit-transform-origin-y: $origin; /* Blink, Webkit */ + transform-origin-y: $origin; /* IE11+ */ +} + +@mixin transform-origin-z($origin) { + -webkit-transform-origin-z: $origin; /* Blink, Webkit */ + transform-origin-z: $origin; /* IE11+ */ +} + +@mixin transform-style($style) { + -webkit-transform-style: $style; + -moz-transform-style: $style; /* Firefox 10~16.0 */ + -ms-transform-style: $style; /* IE9~10 */ + transform-style: $style; /* Firefox, Blink, IE11+ */ +} + + +// Transitions +// IE10+ + +@mixin transition($transition...) { + -webkit-transition: $transition; /* Safari, Chrome */ + -moz-transition: $transition; /* Firefox 4.0~16.0 */ + transition: $transition; /* IE >9, FF >15, Opera >12.0 */ +} + +@mixin transition-property($property) { + -webkit-transition-property: $property; + -moz-transition-property: $property; /* Firefox 4.0~16.0 */ + transition-property: $property; +} + +@mixin transition-duration($duration) { + -webkit-transition-duration: $duration; + -moz-transition-duration: $duration; /* Firefox 4.0~16.0 */ + transition-duration: $duration; +} + +@mixin transition-timing-function($easing) { + -webkit-transition-timing-function: $easing; + -moz-transition-timing-function: $easing; /* Firefox 4.0~16.0 */ + transition-timing-function: $easing; +} + +@mixin transition-delay($delay) { + -webkit-transition-delay: $delay; + -moz-transition-delay: $delay; /* Firefox 4.0~16.0 */ + transition-delay: $delay; +} + + +// viewport + +@mixin viewport-device-width() { + width: device-width; + user-zoom: fixed; +} + +@mixin viewport() { + @-webkit-viewport { + @include viewport-device-width(); + } + @-moz-viewport { + @include viewport-device-width(); } - #{$seletor}:-moz-placeholder { /* Firefox 4~18 */ - @content; + @-ms-viewport { + @include viewport-device-width(); } - #{$seletor}::-moz-placeholder { /* Firefox 19+ */ - @content; + @-o-viewport { + @include viewport-device-width(); } - #{$seletor}:-ms-input-placeholder { /* IE10+ */ - @content; + @viewport { + @include viewport-device-width(); } -} \ No newline at end of file +} diff --git a/examples/animation.scss b/examples/animation.scss index 7299e20..7b2ceaa 100644 --- a/examples/animation.scss +++ b/examples/animation.scss @@ -1,6 +1,6 @@ @charset "UTF-8"; -@import "../src/prefixes"; +@import "../dist/prefixes"; [class*=animation-] { @include animation-duration(0.5s); diff --git a/examples/border-radius.scss b/examples/border-radius.scss index b168b06..934ca50 100644 --- a/examples/border-radius.scss +++ b/examples/border-radius.scss @@ -1,6 +1,6 @@ @charset "UTF-8"; -@import "../src/prefixes"; +@import "../dist/prefixes"; .radius { @include border-radius(4px); diff --git a/examples/box-shadow.scss b/examples/box-shadow.scss index 5c2a0af..2d4cce9 100644 --- a/examples/box-shadow.scss +++ b/examples/box-shadow.scss @@ -1,6 +1,6 @@ @charset "UTF-8"; -@import "../src/prefixes"; +@import "../dist/prefixes"; .box-shadow { @include box-shadow(0 1px 4px rgba(0, 0, 0, .5)); diff --git a/examples/box-sizing.css b/examples/box-sizing.css deleted file mode 100644 index b43beeb..0000000 --- a/examples/box-sizing.css +++ /dev/null @@ -1,19 +0,0 @@ -/*! - * prefixes.scss - * @author Pandao - * @version 0.1.0 - * @homePage https://github.com/pandao/prefixes.scss - * @license MIT - * @copyright Copyright (c) 2015 - */ -.border-box { - -webkit-box-sizing: border-box; - -moz-box-sizing: border-box; - box-sizing: border-box; } - -.content-box { - -webkit-box-sizing: content-box; - -moz-box-sizing: content-box; - box-sizing: content-box; } - -/*# sourceMappingURL=box-sizing.css.map */ diff --git a/examples/box-sizing.scss b/examples/box-sizing.scss index 52998d7..6f32d41 100644 --- a/examples/box-sizing.scss +++ b/examples/box-sizing.scss @@ -1,6 +1,6 @@ @charset "UTF-8"; -@import "../src/prefixes"; +@import "../dist/prefixes"; .border-box { @include box-sizing(border-box); diff --git a/examples/animation.css b/examples/css/animation.css similarity index 82% rename from examples/animation.css rename to examples/css/animation.css index 63af5cd..c8cd93a 100644 --- a/examples/animation.css +++ b/examples/css/animation.css @@ -1,71 +1,68 @@ -/*! - * prefixes.scss - * @author Pandao - * @version 0.1.0 - * @homePage https://github.com/pandao/prefixes.scss - * @license MIT - * @copyright Copyright (c) 2015 - */ -[class*=animation-] { - -webkit-animation-duration: 0.5s; - -moz-animation-duration: 0.5s; - /* Firefox 5.0~16.0 */ - animation-duration: 0.5s; - -webkit-animation-timing-function: ease-out; - -moz-animation-timing-function: ease-out; - /* Firefox 5.0~16.0 */ - animation-timing-function: ease-out; - -webkit-animation-fill-mode: both; - -moz-animation-fill-mode: both; - animation-fill-mode: both; } - -@-webkit-keyframes fade-in { - 0% { - opacity: 0; } - 100% { - opacity: 1; } } -@-moz-keyframes fade-in { - 0% { - opacity: 0; } - 100% { - opacity: 1; } } -@keyframes fade-in { - 0% { - opacity: 0; } - 100% { - opacity: 1; } } -@-webkit-keyframes fade-out { - 0% { - opacity: 1; } - 100% { - opacity: 0; } } -@-moz-keyframes fade-out { - 0% { - opacity: 1; } - 100% { - opacity: 0; } } -@keyframes fade-out { - 0% { - opacity: 1; } - 100% { - opacity: 0; } } -.animation-fade-in { - -webkit-animation-name: fade-in; - -moz-animation-name: fade-in; - /* Firefox 5.0~16.0 */ - animation-name: fade-in; } - -.animation-fade-out { - -webkit-animation-name: fade-out; - -moz-animation-name: fade-out; - /* Firefox 5.0~16.0 */ - animation-name: fade-out; } - -.logo-fade-in { - -webkit-animation: fade-in 1s ease-out; - -moz-animation: fade-in 1s ease-out; - /* Firefox 5.0~16.0 */ - animation: fade-in 1s ease-out; - /* IE10+ */ } - -/*# sourceMappingURL=animation.css.map */ +/*! Prefixes.scss v0.2.0 | CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes. | Author: Pandao | Copyright (c) 2015 Pandao, MIT License | https://github.com/pandao/prefixes.scss | 2015-06-19 */ +[class*=animation-] { + -webkit-animation-duration: 0.5s; + -moz-animation-duration: 0.5s; + /* Firefox 5.0~16.0 */ + animation-duration: 0.5s; + -webkit-animation-timing-function: ease-out; + -moz-animation-timing-function: ease-out; + /* Firefox 5.0~16.0 */ + animation-timing-function: ease-out; + -webkit-animation-fill-mode: both; + -moz-animation-fill-mode: both; + animation-fill-mode: both; } + +@-webkit-keyframes fade-in { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@-moz-keyframes fade-in { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@keyframes fade-in { + 0% { + opacity: 0; } + 100% { + opacity: 1; } } + +@-webkit-keyframes fade-out { + 0% { + opacity: 1; } + 100% { + opacity: 0; } } + +@-moz-keyframes fade-out { + 0% { + opacity: 1; } + 100% { + opacity: 0; } } + +@keyframes fade-out { + 0% { + opacity: 1; } + 100% { + opacity: 0; } } + +.animation-fade-in { + -webkit-animation-name: fade-in; + -moz-animation-name: fade-in; + /* Firefox 5.0~16.0 */ + animation-name: fade-in; } + +.animation-fade-out { + -webkit-animation-name: fade-out; + -moz-animation-name: fade-out; + /* Firefox 5.0~16.0 */ + animation-name: fade-out; } + +.logo-fade-in { + -webkit-animation: fade-in 1s ease-out; + -moz-animation: fade-in 1s ease-out; + /* Firefox 5.0~16.0 */ + animation: fade-in 1s ease-out; + /* IE10+ */ } diff --git a/examples/border-radius.css b/examples/css/border-radius.css similarity index 78% rename from examples/border-radius.css rename to examples/css/border-radius.css index d74210a..b707a27 100644 --- a/examples/border-radius.css +++ b/examples/css/border-radius.css @@ -1,44 +1,35 @@ -/*! - * prefixes.scss - * @author Pandao - * @version 0.1.0 - * @homePage https://github.com/pandao/prefixes.scss - * @license MIT - * @copyright Copyright (c) 2015 - */ -.radius { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; } - -.radius-top-left { - -webkit-border-top-left-radius: 4px; - -moz-border-top-left-radius: 4px; - -ms-border-top-left-radius: 4px; - -o-border-top-left-radius: 4px; - border-top-left-radius: 4px; } - -.radius-top-right { - -webkit-border-top-right-radius: 4px; - -moz-border-top-right-radius: 4px; - -ms-border-top-right-radius: 4px; - -o-border-top-right-radius: 4px; - border-top-right-radius: 4px; } - -.radius-bottom-left { - -webkit-border-bottom-left-radius: 4px; - -moz-border-bottom-left-radius: 4px; - -ms-border-bottom-left-radius: 4px; - -o-border-bottom-left-radius: 4px; - border-bottom-left-radius: 4px; } - -.radius-bottom-right { - -webkit-border-bottom-right-radius: 4px; - -moz-border-bottom-right-radius: 4px; - -ms-border-bottom-right-radius: 4px; - -o-border-bottom-right-radius: 4px; - border-bottom-right-radius: 4px; } - -/*# sourceMappingURL=border-radius.css.map */ +/*! Prefixes.scss v0.2.0 | CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes. | Author: Pandao | Copyright (c) 2015 Pandao, MIT License | https://github.com/pandao/prefixes.scss | 2015-06-19 */ +.radius { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; } + +.radius-top-left { + -webkit-border-top-left-radius: 4px; + -moz-border-top-left-radius: 4px; + -ms-border-top-left-radius: 4px; + -o-border-top-left-radius: 4px; + border-top-left-radius: 4px; } + +.radius-top-right { + -webkit-border-top-right-radius: 4px; + -moz-border-top-right-radius: 4px; + -ms-border-top-right-radius: 4px; + -o-border-top-right-radius: 4px; + border-top-right-radius: 4px; } + +.radius-bottom-left { + -webkit-border-bottom-left-radius: 4px; + -moz-border-bottom-left-radius: 4px; + -ms-border-bottom-left-radius: 4px; + -o-border-bottom-left-radius: 4px; + border-bottom-left-radius: 4px; } + +.radius-bottom-right { + -webkit-border-bottom-right-radius: 4px; + -moz-border-bottom-right-radius: 4px; + -ms-border-bottom-right-radius: 4px; + -o-border-bottom-right-radius: 4px; + border-bottom-right-radius: 4px; } diff --git a/examples/box-shadow.css b/examples/css/box-shadow.css similarity index 59% rename from examples/box-shadow.css rename to examples/css/box-shadow.css index 21a0bac..7cf01c7 100644 --- a/examples/box-shadow.css +++ b/examples/css/box-shadow.css @@ -1,21 +1,12 @@ -/*! - * prefixes.scss - * @author Pandao - * @version 0.1.0 - * @homePage https://github.com/pandao/prefixes.scss - * @license MIT - * @copyright Copyright (c) 2015 - */ -.box-shadow { - -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); - /* Webkit browsers */ - -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); - /* Firefox */ - -ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); - /* IE9 */ - -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); - /* Opera(Old) */ - box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); - /* IE9+, News */ } - -/*# sourceMappingURL=box-shadow.css.map */ +/*! Prefixes.scss v0.2.0 | CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes. | Author: Pandao | Copyright (c) 2015 Pandao, MIT License | https://github.com/pandao/prefixes.scss | 2015-06-19 */ +.box-shadow { + -webkit-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); + /* Webkit browsers */ + -moz-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); + /* Firefox */ + -ms-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); + /* IE9 */ + -o-box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); + /* Opera(Old) */ + box-shadow: 0 1px 4px rgba(0, 0, 0, 0.5); + /* IE9+, News */ } diff --git a/examples/css/box-sizing.css b/examples/css/box-sizing.css new file mode 100644 index 0000000..be015fb --- /dev/null +++ b/examples/css/box-sizing.css @@ -0,0 +1,10 @@ +/*! Prefixes.scss v0.2.0 | CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes. | Author: Pandao | Copyright (c) 2015 Pandao, MIT License | https://github.com/pandao/prefixes.scss | 2015-06-19 */ +.border-box { + -webkit-box-sizing: border-box; + -moz-box-sizing: border-box; + box-sizing: border-box; } + +.content-box { + -webkit-box-sizing: content-box; + -moz-box-sizing: content-box; + box-sizing: content-box; } diff --git a/examples/css/flexbox.css b/examples/css/flexbox.css new file mode 100644 index 0000000..2f3e57a --- /dev/null +++ b/examples/css/flexbox.css @@ -0,0 +1,160 @@ +/*! Prefixes.scss v0.2.0 | CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes. | Author: Pandao | Copyright (c) 2015 Pandao, MIT License | https://github.com/pandao/prefixes.scss | 2015-06-19 */ +.display-flex { + display: -webkit-box; + /* Old - iOS 6-, Safari 3.1~6, Blackberry 7 */ + display: -ms-flexbox; + /* TWEENER - IE 10 */ + display: -webkit-flex; + /* New - Safari 6.1+. iOS 7.1+, Blackberry 10 */ + display: -moz-flex; + display: flex; + /* New, Spec - Firefox, Chrome, Opera */ } + +.flexbox { + display: -webkit-box; + /* Old - iOS 6-, Safari 3.1~6, Blackberry 7 */ + display: -ms-flexbox; + /* TWEENER - IE 10 */ + display: -webkit-flex; + /* New - Safari 6.1+. iOS 7.1+, Blackberry 10 */ + display: -moz-flex; + display: flex; + /* New, Spec - Firefox, Chrome, Opera */ } + +.inline-flex { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: -moz-inline-flex; + display: inline-flex; } + +.inline-flexbox { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: -moz-inline-flex; + display: inline-flex; } + +.column-item { + -webkit-box-flex: 1; + /* Old - iOS 6-, Safari 3.1~6 */ + -moz-box-flex: 1; + -webkit-flex: 1; + /* Safari 6.1+. iOS 7.1+, Blackberry 10 */ + -moz-flex: 1; + -ms-flex: 1; + /* IE 10 */ + flex: 1; + /* New, Spec - Firefox, Chrome, Opera */ + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + -webkit-flex-direction: column; + /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ + -moz-flex-direction: column; + -ms-flex-direction: column; + flex-direction: column; + /* Firefox 28+, IE11, Opera 12.10 */ + -webkit-box-ordinal-group: 2; + -webkit-order: 1; + /* Chrome 21+, Safari Not supported. */ + -ms-flex-order: 1; + /* IE 10.0 */ + -moz-order: 1; + order: 1; + /* Firefox 20+, Opera 12.10 */ } + +.row-item { + -webkit-box-flex: 1; + /* Old - iOS 6-, Safari 3.1~6 */ + -moz-box-flex: 1; + -webkit-flex: 1; + /* Safari 6.1+. iOS 7.1+, Blackberry 10 */ + -moz-flex: 1; + -ms-flex: 1; + /* IE 10 */ + flex: 1; + /* New, Spec - Firefox, Chrome, Opera */ + -webkit-box-ordinal-group: 3; + -webkit-order: 2; + /* Chrome 21+, Safari Not supported. */ + -ms-flex-order: 2; + /* IE 10.0 */ + -moz-order: 2; + order: 2; + /* Firefox 20+, Opera 12.10 */ } + +.flex-inline { + -webkit-inline-flex: 2; + /* Chrome 21.0+ */ + -moz-inline-flex: 2; + -ms-inline-flex: 2; + inline-flex: 2; + /* Firefox 20+, Opera 12.5 */ } + +.nowarp { + -webkit-flex-wrap: nowrap; + /* Safari 6.1+, Chrome 21.0+, Android 4.4+, iOS 7.0+ */ + -moz-flex-wrap: nowrap; + -ms-flex-wrap: none; + flex-wrap: nowrap; + /* Firefox 28+, IE11, Opera 12.10 */ } + +.flex-flow { + -webkit-flex-flow: row nowrap; + /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ + -moz-flex-flow: row nowrap; + -ms-flex-flow: row nowrap; + flex-flow: row nowrap; + /* Firefox 28+, IE11, Opera 12.10 */ } + +.flex-grow { + -webkit-box-flex: 0; + -webkit-flex-grow: 0; + /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ + -ms-flex-positive: 0; + -moz-flex-grow: 0; + flex-grow: 0; + /* Firefox 20+, Opera 12.10, IE Not supported. */ } + +.flex-basis { + -webkit-flex-basis: auto; + /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ + -ms-flex-preferred-size: auto; + -moz-flex-basis: auto; + flex-basis: auto; + /* Firefox 22+, IE11, Opera 12.10 */ } + +.flex-justify { + -webkit-box-pack: start; + -ms-flex-pack: start; + -webkit-justify-content: flex-start; + /* Chrome 21+, Safari Not supported. */ + -moz-justify-content: flex-start; + /* Chrome 21+, Safari Not supported. */ + justify-content: flex-start; + /* Firefox 20+, Opera 12.10, IE Not supported. */ } + +.align-items { + -webkit-box-align: stretch; + -ms-flex-align: stretch; + -webkit-align-items: stretch; + /* Safari 7.0+, Chrome 21.0+ */ + -moz-align-items: stretch; + align-items: stretch; + /* Firefox 20.0+, IE11+, Opera 12.10 */ } + +.align-self { + -webkit-align-self: auto; + /* Chrome 21~36, Safari Not supported. */ + -moz-align-self: auto; + -ms-flex-item-align: auto; + align-self: auto; + /* Firefox 28+, Opera 12.10, IE Not supported. */ } + +.align-content { + -webkit-align-content: stretch; + /* Chrome 21.0+, Safari Not supported. */ + -moz-align-content: stretch; + -ms-flex-line-pack: stretch; + align-content: stretch; + /* Firefox 28+, Opera 12.10, IE Not supported. */ } diff --git a/examples/mask.css b/examples/css/mask.css similarity index 62% rename from examples/mask.css rename to examples/css/mask.css index aeda50a..7e95fbf 100644 --- a/examples/mask.css +++ b/examples/css/mask.css @@ -1,23 +1,14 @@ -/*! - * prefixes.scss - * @author Pandao - * @version 0.1.0 - * @homePage https://github.com/pandao/prefixes.scss - * @license MIT - * @copyright Copyright (c) 2015 - */ -.mask { - -webkit-mask-image: url(images/hexagon.png); - /* Chrome, iOS, Safari */ - mask-image: url(images/hexagon.png); - /* None yet / Non-standard */ - -webkit-mask-size: cover; - /* Chrome, iOS, Safari */ - mask-size: cover; - /* None yet / Non-standard */ - -webkit-mask-repeat: no-repeat; - /* Chrome, iOS, Safari */ - mask-repeat: no-repeat; - /* None yet / Non-standard */ } - -/*# sourceMappingURL=mask.css.map */ +/*! Prefixes.scss v0.2.0 | CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes. | Author: Pandao | Copyright (c) 2015 Pandao, MIT License | https://github.com/pandao/prefixes.scss | 2015-06-19 */ +.mask { + -webkit-mask-image: url(images/hexagon.png); + /* Chrome, iOS, Safari */ + mask-image: url(images/hexagon.png); + /* None yet / Non-standard */ + -webkit-mask-size: cover; + /* Chrome, iOS, Safari */ + mask-size: cover; + /* None yet / Non-standard */ + -webkit-mask-repeat: no-repeat; + /* Chrome, iOS, Safari */ + mask-repeat: no-repeat; + /* None yet / Non-standard */ } diff --git a/examples/sass.css b/examples/css/sass.css similarity index 70% rename from examples/sass.css rename to examples/css/sass.css index 9702ce1..5dd9a41 100644 --- a/examples/sass.css +++ b/examples/css/sass.css @@ -1,31 +1,22 @@ -/*! - * prefixes.scss - * @author Pandao - * @version 0.1.0 - * @homePage https://github.com/pandao/prefixes.scss - * @license MIT - * @copyright Copyright (c) 2015 - */ -.example { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); - /* Webkit browsers */ - -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); - /* Firefox */ - -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); - /* IE9 */ - -o-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); - /* Opera(Old) */ - box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); - /* IE9+, News */ } - .example:before, .example:after { - content: " "; - display: table; } - .example:after { - clear: both; } - -/*# sourceMappingURL=sass.css.map */ +/*! Prefixes.scss v0.2.0 | CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes. | Author: Pandao | Copyright (c) 2015 Pandao, MIT License | https://github.com/pandao/prefixes.scss | 2015-06-19 */ +.example { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); + /* Webkit browsers */ + -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); + /* Firefox */ + -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); + /* IE9 */ + -o-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); + /* Opera(Old) */ + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); + /* IE9+, News */ } + .example:before, .example:after { + content: " "; + display: table; } + .example:after { + clear: both; } diff --git a/examples/simple.css b/examples/css/simple.css similarity index 55% rename from examples/simple.css rename to examples/css/simple.css index 0ccd8a1..e250a3d 100644 --- a/examples/simple.css +++ b/examples/css/simple.css @@ -1,31 +1,30 @@ -/*! - * prefixes.scss - * @author Pandao - * @version 0.1.0 - * @homePage https://github.com/pandao/prefixes.scss - * @license MIT - * @copyright Copyright (c) 2015 - */ -.example { - -webkit-border-radius: 4px; - -moz-border-radius: 4px; - -ms-border-radius: 4px; - -o-border-radius: 4px; - border-radius: 4px; - -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); - /* Webkit browsers */ - -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); - /* Firefox */ - -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); - /* IE9 */ - -o-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); - /* Opera(Old) */ - box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); - /* IE9+, News */ } - .example:before, .example:after { - content: " "; - display: table; } - .example:after { - clear: both; } - -/*# sourceMappingURL=simple.css.map */ +/*! Prefixes.scss v0.2.0 | CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes. | Author: Pandao | Copyright (c) 2015 Pandao, MIT License | https://github.com/pandao/prefixes.scss | 2015-06-19 */ +.example { + -webkit-border-radius: 4px; + -moz-border-radius: 4px; + -ms-border-radius: 4px; + -o-border-radius: 4px; + border-radius: 4px; + -webkit-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); + /* Webkit browsers */ + -moz-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); + /* Firefox */ + -ms-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); + /* IE9 */ + -o-box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); + /* Opera(Old) */ + box-shadow: 0 1px 5px rgba(0, 0, 0, 0.5); + /* IE9+, News */ + -webkit-background-size: cover; + /* Chrome, iOS, Safari */ + -moz-background-size: cover; + /* Firefox 3.6~4.0 */ + -o-background-size: cover; + /* Opera 9.5 */ + background-size: cover; + /* IE9+, New */ } + .example:before, .example:after { + content: " "; + display: table; } + .example:after { + clear: both; } diff --git a/examples/transform.css b/examples/css/transform.css similarity index 76% rename from examples/transform.css rename to examples/css/transform.css index d954ecc..9a3fcd1 100644 --- a/examples/transform.css +++ b/examples/css/transform.css @@ -1,42 +1,33 @@ -/*! - * prefixes.scss - * @author Pandao - * @version 0.1.0 - * @homePage https://github.com/pandao/prefixes.scss - * @license MIT - * @copyright Copyright (c) 2015 - */ -.rotate { - -webkit-transform: rotate(360deg); - /* Safari, Chrome */ - -moz-transform: rotate(360deg); - /* Firefox 3.5~16.0 */ - -ms-transform: rotate(360deg); - /* IE9~10 */ - -o-transform: rotate(360deg); - /* Opera 10.5~12.10 */ - transform: rotate(360deg); } - -.rotate-x { - -webkit-transform: rotateX(360deg); - /* Safari, Chrome */ - -moz-transform: rotateX(360deg); - /* Firefox 3.5~16.0 */ - -ms-transform: rotateX(360deg); - /* IE9~10 */ - -o-transform: rotateX(360deg); - /* Opera 10.5~12.10 */ - transform: rotateX(360deg); } - -.rotate-y { - -webkit-transform: rotateY(360deg); - /* Safari, Chrome */ - -moz-transform: rotateY(360deg); - /* Firefox 3.5~16.0 */ - -ms-transform: rotateY(360deg); - /* IE9~10 */ - -o-transform: rotateY(360deg); - /* Opera 10.5~12.10 */ - transform: rotateY(360deg); } - -/*# sourceMappingURL=transform.css.map */ +/*! Prefixes.scss v0.2.0 | CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes. | Author: Pandao | Copyright (c) 2015 Pandao, MIT License | https://github.com/pandao/prefixes.scss | 2015-06-19 */ +.rotate { + -webkit-transform: rotate(360deg); + /* Safari, Chrome */ + -moz-transform: rotate(360deg); + /* Firefox 3.5~16.0 */ + -ms-transform: rotate(360deg); + /* IE9~10 */ + -o-transform: rotate(360deg); + /* Opera 10.5~12.10 */ + transform: rotate(360deg); } + +.rotate-x { + -webkit-transform: rotateX(360deg); + /* Safari, Chrome */ + -moz-transform: rotateX(360deg); + /* Firefox 3.5~16.0 */ + -ms-transform: rotateX(360deg); + /* IE9~10 */ + -o-transform: rotateX(360deg); + /* Opera 10.5~12.10 */ + transform: rotateX(360deg); } + +.rotate-y { + -webkit-transform: rotateY(360deg); + /* Safari, Chrome */ + -moz-transform: rotateY(360deg); + /* Firefox 3.5~16.0 */ + -ms-transform: rotateY(360deg); + /* IE9~10 */ + -o-transform: rotateY(360deg); + /* Opera 10.5~12.10 */ + transform: rotateY(360deg); } diff --git a/examples/viewport.css b/examples/css/viewport.css similarity index 56% rename from examples/viewport.css rename to examples/css/viewport.css index 9b20a12..4669aeb 100644 --- a/examples/viewport.css +++ b/examples/css/viewport.css @@ -1,25 +1,20 @@ -/*! - * prefixes.scss - * @author Pandao - * @version 0.1.0 - * @homePage https://github.com/pandao/prefixes.scss - * @license MIT - * @copyright Copyright (c) 2015 - */ -@-webkit-viewport { - width: device-width; - user-zoom: fixed; } -@-moz-viewport { - width: device-width; - user-zoom: fixed; } -@-ms-viewport { - width: device-width; - user-zoom: fixed; } -@-o-viewport { - width: device-width; - user-zoom: fixed; } -@viewport { - width: device-width; - user-zoom: fixed; } - -/*# sourceMappingURL=viewport.css.map */ +/*! Prefixes.scss v0.2.0 | CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes. | Author: Pandao | Copyright (c) 2015 Pandao, MIT License | https://github.com/pandao/prefixes.scss | 2015-06-19 */ +@-webkit-viewport { + width: device-width; + user-zoom: fixed; } + +@-moz-viewport { + width: device-width; + user-zoom: fixed; } + +@-ms-viewport { + width: device-width; + user-zoom: fixed; } + +@-o-viewport { + width: device-width; + user-zoom: fixed; } + +@viewport { + width: device-width; + user-zoom: fixed; } diff --git a/examples/display-flex.css b/examples/display-flex.css deleted file mode 100644 index e75e3c1..0000000 --- a/examples/display-flex.css +++ /dev/null @@ -1,33 +0,0 @@ -/*! - * prefixes.scss - * @author Pandao - * @version 0.1.0 - * @homePage https://github.com/pandao/prefixes.scss - * @license MIT - * @copyright Copyright (c) 2015 - */ -.example { - display: -webkit-box; - /* Old - iOS 6-, Safari 3.1~6, Blackberry 7 */ - display: -ms-flexbox; - /* TWEENER - IE 10 */ - display: -webkit-flex; - /* New - Safari 6.1+. iOS 7.1+, Blackberry 10 */ - display: flex; - /* New, Spec - Firefox, Chrome, Opera */ } - -.example-item { - -webkit-box-flex: 1; - /* Old - iOS 6-, Safari 3.1~6 */ - -webkit-flex: 1; - /* Safari 6.1+. iOS 7.1+, Blackberry 10 */ - -ms-flex: 1; - /* IE 10 */ - flex: 1; - /* New, Spec - Firefox, Chrome, Opera */ - -webkit-flex-direction: column; - /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ - flex-direction: column; - /* Firefox 28+, IE11, Opera 12.10 */ } - -/*# sourceMappingURL=display-flex.css.map */ diff --git a/examples/display-flex.scss b/examples/display-flex.scss deleted file mode 100644 index a70fad9..0000000 --- a/examples/display-flex.scss +++ /dev/null @@ -1,12 +0,0 @@ -@charset "UTF-8"; - -@import "../src/prefixes"; - -.example { - @include display-flex(); -} - -.example-item { - @include flex(1); - @include flex-direction(column); -} \ No newline at end of file diff --git a/examples/flexbox.scss b/examples/flexbox.scss new file mode 100644 index 0000000..69e8306 --- /dev/null +++ b/examples/flexbox.scss @@ -0,0 +1,66 @@ +@charset "UTF-8"; + +@import "../dist/prefixes"; + +.display-flex { + @include display-flex(); +} + +.flexbox { + @include flexbox(); // alias display-flex() +} + +.inline-flex { + @include inline-flex(); +} + +.inline-flexbox { + @include inline-flexbox(); // alias inline-flex(); +} + +.column-item { + @include flex(1); + @include flex-direction(column); + @include order(1); +} + +.row-item { + @include flex(1); + @include flex-order(2); +} + +.flex-inline { + @include flex-inline(2); +} + +.nowarp { + @include flex-wrap(); +} + +.flex-flow { + @include flex-flow(); +} + +.flex-grow { + @include flex-grow(); +} + +.flex-basis { + @include flex-basis(); +} + +.flex-justify { + @include flex-justify(); +} + +.align-items { + @include align-items(); +} + +.align-self { + @include align-self(); +} + +.align-content { + @include align-content(); +} \ No newline at end of file diff --git a/examples/mask.scss b/examples/mask.scss index 1dec191..89db238 100644 --- a/examples/mask.scss +++ b/examples/mask.scss @@ -1,6 +1,6 @@ @charset "UTF-8"; -@import "../src/prefixes"; +@import "../dist/prefixes"; .mask { @include mask-image(url(images/hexagon.png)); diff --git a/examples/sass.sass b/examples/sass.sass index 3a5d049..dd7ad8e 100644 --- a/examples/sass.sass +++ b/examples/sass.sass @@ -1,6 +1,6 @@ @charset "UTF-8" -@import "../src/prefixes" +@import "../dist/prefixes" .example @include clearfix() diff --git a/examples/simple.scss b/examples/simple.scss index 00197e6..50ffdb1 100644 --- a/examples/simple.scss +++ b/examples/simple.scss @@ -1,9 +1,10 @@ @charset "UTF-8"; -@import "../src/prefixes"; +@import "../dist/prefixes"; .example { @include clearfix(); @include border-radius(4px); @include box-shadow(0 1px 5px rgba(0, 0, 0, .5)); + @include background-size(cover); } \ No newline at end of file diff --git a/examples/transform.scss b/examples/transform.scss index 935c100..2b69e13 100644 --- a/examples/transform.scss +++ b/examples/transform.scss @@ -1,6 +1,6 @@ @charset "UTF-8"; -@import "../src/prefixes"; +@import "../dist/prefixes"; .rotate { @include transform(rotate(360deg)); diff --git a/examples/viewport.scss b/examples/viewport.scss index 8870804..98a578c 100644 --- a/examples/viewport.scss +++ b/examples/viewport.scss @@ -1,5 +1,5 @@ @charset "UTF-8"; -@import "../src/prefixes"; +@import "../dist/prefixes"; @include viewport(); diff --git a/package.json b/package.json index 8f1fcec..57357ec 100644 --- a/package.json +++ b/package.json @@ -1,7 +1,7 @@ { "name": "prefixes.scss", - "version": "0.1.0", - "description": "CSS(3) prefixes mixins for Sass/Scss.", + "version": "0.2.0", + "description": "CSS(3) prefixes mixins library for Sass/Scss, Custom you need CSS prefixes.", "directories": { "doc": "docs", "example": "examples", @@ -28,10 +28,13 @@ }, "homepage": "https://github.com/pandao/prefixes.scss", "devDependencies": { + "dateformatter": "^0.1.0", "gulp": "^3.8.10", + "gulp-concat": "^2.5.2", + "gulp-header": "^1.2.2", "gulp-notify": "^2.1.0", "gulp-rename": "^1.2.0", - "gulp-ruby-sass": "^0.7.1", + "gulp-sass": "^2.0.1", "gulp-util": "^3.0.1" } } diff --git a/src/animation.scss b/src/animation.scss new file mode 100644 index 0000000..936a31e --- /dev/null +++ b/src/animation.scss @@ -0,0 +1,76 @@ + +// Animations IE10+ + +@mixin keyframes($name) { + @-webkit-keyframes #{$name} { + @content; + } + + @-moz-keyframes #{$name} { + @content; + } + + @keyframes #{$name} { + @content; + } +} + +@mixin animation($animation...) { + -webkit-animation: $animation; + -moz-animation: $animation; /* Firefox 5.0~16.0 */ + animation: $animation; /* IE10+ */ +} + +@mixin animation-name($name) { + -webkit-animation-name: $name; + -moz-animation-name: $name; /* Firefox 5.0~16.0 */ + animation-name: $name; +} + +@mixin animation-duration($time : 1s) { + -webkit-animation-duration: $time; + -moz-animation-duration: $time; /* Firefox 5.0~16.0 */ + animation-duration: $time; +} + +@mixin animation-timing-function($easing : ease) { + -webkit-animation-timing-function: $easing; + -moz-animation-timing-function: $easing; /* Firefox 5.0~16.0 */ + animation-timing-function: $easing; +} + +@mixin animation-delay($delay : 1s) { + -webkit-animation-delay: $delay; + -moz-animation-delay: $delay; /* Firefox 5.0~16.0 */ + animation-delay: $delay; +} + +@mixin animation-iteration-count($count : infinite) { + -webkit-animation-iteration-count: $count; + -moz-animation-iteration-count: $count; /* Firefox 5.0~16.0 */ + animation-iteration-count: $count; +} + +// normal or alternate +@mixin animation-direction($direction : normal) { + -webkit-animation-direction: $direction; + -moz-animation-direction: $direction; /* Firefox 5.0~16.0 */ + animation-direction: $direction; +} + +// paused or running + +@mixin animation-play-state($state) { + -webkit-animation-play-state: $state; + -moz-animation-play-state: $state; /* Firefox 5.0~16.0 */ + animation-play-state: $state; +} + +// animation-fill-mode + +@mixin animation-fill-mode($mode) { + -webkit-animation-fill-mode: $mode; + -moz-animation-fill-mode: $mode; + animation-fill-mode: $mode; +} + diff --git a/src/backgroup.scss b/src/backgroup.scss new file mode 100644 index 0000000..f3fe7ff --- /dev/null +++ b/src/backgroup.scss @@ -0,0 +1,31 @@ + +// background + +// gradient + +@mixin linear-gradient($start-color, $end-color, $position : top, $perStart : 0%, $perEnd : 100%) { + background: -webkit-linear-gradient($position, $start-color, $end-color); /* Webkit browsers */ + background: -moz-linear-gradient( $position, $start-color, $end-color); /* Firefox(old) */ + background: -o-linear-gradient( $position, $start-color, $end-color); /* Opera(old) */ + background: -ms-linear-gradient( $position, $start-color $perStart, $end-color $perEnd); /* IE10 */ + filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, start-colorstr=#{$start-color}, end-colorstr=#{$end-color}); /* IE9 */ + ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, start-colorstr=#{$start-color}, end-colorstr=#{$end-color})"; /* IE8 */ + background: linear-gradient( $position, $start-color $perStart, $end-color $perEnd); /* W3C */ +} + +@mixin background-clip($value) { + -webkit-background-clip: $value; + background-clip: $value; /* Firefox 4.0, IE9+, Opera 10.5+, Chrome, Safari 3.0+ */ +} + +@mixin background-origin($value) { + -webkit-background-origin: $value; + background-origin: $value; /* IE9+, Other */ +} + +@mixin background-size($value) { + -webkit-background-size: $value; /* Chrome, iOS, Safari */ + -moz-background-size: $value; /* Firefox 3.6~4.0 */ + -o-background-size: $value; /* Opera 9.5 */ + background-size: $value; /* IE9+, New */ +} diff --git a/src/border.scss b/src/border.scss new file mode 100644 index 0000000..3edde47 --- /dev/null +++ b/src/border.scss @@ -0,0 +1,78 @@ + +// Border + +// border-radius + +@mixin border-radius($radius: 4px) { + -webkit-border-radius: $radius; + -moz-border-radius: $radius; + -ms-border-radius: $radius; + -o-border-radius: $radius; + border-radius: $radius; +} + +@mixin border-top-left-radius($radius: 4px) { + -webkit-border-top-left-radius: $radius; + -moz-border-top-left-radius: $radius; + -ms-border-top-left-radius: $radius; + -o-border-top-left-radius: $radius; + border-top-left-radius: $radius; +} + +@mixin border-top-right-radius($radius: 4px) { + -webkit-border-top-right-radius: $radius; + -moz-border-top-right-radius: $radius; + -ms-border-top-right-radius: $radius; + -o-border-top-right-radius: $radius; + border-top-right-radius: $radius; +} + +@mixin border-bottom-left-radius($radius: 4px) { + -webkit-border-bottom-left-radius: $radius; + -moz-border-bottom-left-radius: $radius; + -ms-border-bottom-left-radius: $radius; + -o-border-bottom-left-radius: $radius; + border-bottom-left-radius: $radius; +} + +@mixin border-bottom-right-radius($radius: 4px) { + -webkit-border-bottom-right-radius: $radius; + -moz-border-bottom-right-radius: $radius; + -ms-border-bottom-right-radius: $radius; + -o-border-bottom-right-radius: $radius; + border-bottom-right-radius: $radius; +} + +// border-image + +@mixin border-image($value) { + -webkit-border-image: $value; /* Safari 5, Chrome */ + -moz-border-image: $value; /* Firefox 3.5~15.0 */ + -o-border-image: $value; /* Opera */ + border-image: $value; /* Safari 6+, Chrome, New */ +} + +@mixin border-image-source($value) { + -webkit-border-image-source: $value; /* Safari 5, Chrome */ + border-image-source: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */ +} + +@mixin border-image-slice($value) { + -webkit-border-image-slice: $value; /* Safari 5, Chrome */ + border-image-slice: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */ +} + +@mixin border-image-width($value) { + -webkit-border-image-width: $value; /* Safari 5, Chrome */ + border-image-width: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */ +} + +@mixin border-image-outset($value) { + -webkit-border-image-outset: $value; /* Safari 5, Chrome */ + border-image-outset: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */ +} + +@mixin border-image-repeat($value) { + -webkit-border-image-repeat: $value; /* Safari 5, Chrome */ + border-image-repeat: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */ +} diff --git a/src/box.scss b/src/box.scss new file mode 100644 index 0000000..ddcfeaf --- /dev/null +++ b/src/box.scss @@ -0,0 +1,27 @@ + +// Box + +// box-shadow + +@mixin box-shadow($value) { + -webkit-box-shadow: $value; /* Webkit browsers */ + -moz-box-shadow: $value; /* Firefox */ + -ms-box-shadow: $value; /* IE9 */ + -o-box-shadow: $value; /* Opera(Old) */ + box-shadow: $value; /* IE9+, News */ +} + +//box-sizing + +@mixin box-sizing($value) { + -webkit-box-sizing: $value; + -moz-box-sizing: $value; + box-sizing: $value; +} + +// box-reflect + +@mixin box-reflect($value) { + -webkit-box-reflect: $value; /* Chrome, Safari, iOS, Blackberry */ + box-reflect: $value; /* None yet / Non-standard */ +} diff --git a/src/clip.scss b/src/clip.scss new file mode 100644 index 0000000..7ea51c1 --- /dev/null +++ b/src/clip.scss @@ -0,0 +1,9 @@ + +// Clip + +// clip-path + +@mixin clip-path($value) { + -webkit-clip-path: $value; /* Chrome, iOS, Safari */ + clip-path: $value; +} diff --git a/src/column.scss b/src/column.scss new file mode 100644 index 0000000..a94a9f5 --- /dev/null +++ b/src/column.scss @@ -0,0 +1,64 @@ + +// Column + +@mixin column-count($value) { + -webkit-column-count: $value; /* Chrome, Safari, Android, Blackberry */ + -moz-column-count: $value; /* Firefox 34+ */ + column-count: $value; /* IE 10+, Opera 11.1+, New */ +} + +@mixin column-gap($value) { + -webkit-column-gap: $value; /* Chrome, Safari, Android, Blackberry */ + -moz-column-gap: $value; /* Firefox 34+ */ + column-gap: $value; /* IE 10+, Opera 11.1+, New */ +} + +@mixin column-rule($value) { + -webkit-column-rule: $value; /* Chrome, Safari, Android, Blackberry */ + -moz-column-rule: $value; /* Firefox 34+ */ + column-rule: $value; /* IE 10+, Opera 11.1+, New */ +} + +@mixin column-rule-color($value) { + -webkit-column-rule-color: $value; /* Chrome, Safari, Android, Blackberry */ + -moz-column-rule-color: $value; /* Firefox 34+ */ + column-rule-color: $value; /* IE 10+, Opera 11.1+, New */ +} + +@mixin column-rule-style($value) { + -webkit-column-rule-style: $value; /* Chrome, Safari, Android, Blackberry */ + -moz-column-rule-style: $value; /* Firefox 34+ */ + column-rule-style: $value; /* IE 10+, Opera 11.1+, New */ +} + +@mixin column-rule-width($value) { + -webkit-column-rule-width: $value; /* Chrome, Safari, Android, Blackberry */ + -moz-column-rule-width: $value; /* Firefox 34+ */ + column-rule-width: $value; /* IE 10+, Opera 11.1+, New */ +} + +@mixin column-fill($value) { + -webkit-column-fill: $value; /* None yet */ + -moz-column-fill: $value; /* Firefox 13.0+ */ + column-fill: $value; /* None yet / Non-standard */ +} + +@mixin column-span($value) { + -webkit-column-span: $value; /* Safari, Chrome, iOS 7.0+, Android, Opera 26+ */ + -moz-column-span: $value; /* Firefox 34+ */ + column-span: $value; /* IE10+, Opera Mini */ +} + +@mixin column-width($value) { + -webkit-column-width: $value; /* Safari, Chrome, iOS 7.0+, Android, Opera 26+ */ + -moz-column-width: $value; /* Firefox */ + column-width: $value; /* IE10+, Opera */ +} + +// columns: column-width column-count; + +@mixin columns($value) { + -webkit-columns: $value; /* Safari, Chrome, iOS 7.0+, Android, Opera 26+ */ + -moz-columns: $value; /* Firefox */ + columns: $value; /* IE10+, Opera */ +} diff --git a/src/display.scss b/src/display.scss new file mode 100644 index 0000000..b8c1b08 --- /dev/null +++ b/src/display.scss @@ -0,0 +1,8 @@ + +// Display + +@mixin display-grid() { + display: -ms-grid; /* IE 10 */ + display: grid; /* None yet */ +} + diff --git a/src/filter.scss b/src/filter.scss new file mode 100644 index 0000000..c6dbc0b --- /dev/null +++ b/src/filter.scss @@ -0,0 +1,17 @@ + +// filter + +@mixin filter($value) { + -webkit-filter: $value; /* Chrome 23+, Safari 6.0+, Blackberry 10.0+ */ + filter: $value; /* None yet */ +} + +// filter blur + +@mixin filter-blur($value : 10px, $ie-value : 10) { + filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=#{$ie-value}, MakeShadow=false); /* IE6~IE9 */ + -webkit-filter: blur($value); /* Chrome, Opera, iOS, Safari */ + -moz-filter: blur($value); /* Firefox(Old) */ + -ms-filter: blur($value); + filter: blur($value); +} diff --git a/src/flexbox.scss b/src/flexbox.scss new file mode 100644 index 0000000..5dd3dc9 --- /dev/null +++ b/src/flexbox.scss @@ -0,0 +1,219 @@ + +// Flexbox + +@mixin display-flex() { + display: -webkit-box; /* Old - iOS 6-, Safari 3.1~6, Blackberry 7 */ + display: -ms-flexbox; /* TWEENER - IE 10 */ + display: -webkit-flex; /* New - Safari 6.1+. iOS 7.1+, Blackberry 10 */ + display: -moz-flex; + display: flex; /* New, Spec - Firefox, Chrome, Opera */ +} + +// alias display-flex() + +@mixin flexbox() { + @include display-flex(); +} + +@mixin inline-flex() { + display: -webkit-inline-box; + display: -webkit-inline-flex; + display: -ms-inline-flexbox; + display: -moz-inline-flex; + display: inline-flex; +} + +// alias inline-flex() + +@mixin inline-flexbox() { + @include inline-flex(); +} + +@mixin flex-inline($value) { + -webkit-inline-flex: $value; /* Chrome 21.0+ */ + -moz-inline-flex: $value; + -ms-inline-flex: $value; + inline-flex: $value; /* Firefox 20+, Opera 12.5 */ +} + +@mixin flex($value : 1) { + -webkit-box-flex: $value; /* Old - iOS 6-, Safari 3.1~6 */ + -moz-box-flex: $value; + -webkit-flex: $value; /* Safari 6.1+. iOS 7.1+, Blackberry 10 */ + -moz-flex: $value; + -ms-flex: $value; /* IE 10 */ + flex: $value; /* New, Spec - Firefox, Chrome, Opera */ +} + +@mixin flex-direction($value: row) { + @if $value == row-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: horizontal; + } @else if $value == column { + -webkit-box-direction: normal; + -webkit-box-orient: vertical; + } @else if $value == column-reverse { + -webkit-box-direction: reverse; + -webkit-box-orient: vertical; + } @else { + -webkit-box-direction: normal; + -webkit-box-orient: horizontal; + } + + -webkit-flex-direction: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ + -moz-flex-direction: $value; + -ms-flex-direction: $value; + flex-direction: $value; /* Firefox 28+, IE11, Opera 12.10 */ +} + +@mixin flex-basis($value : auto) { + -webkit-flex-basis: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ + -ms-flex-preferred-size: $value; + -moz-flex-basis: $value; + flex-basis: $value; /* Firefox 22+, IE11, Opera 12.10 */ +} + +@mixin flex-flow($values: (row nowrap)) { + -webkit-flex-flow: $values; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ + -moz-flex-flow: $values; + -ms-flex-flow: $values; + flex-flow: $values; /* Firefox 28+, IE11, Opera 12.10 */ +} + +@mixin flex-grow($value : 0) { + -webkit-box-flex: $value; + -webkit-flex-grow: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ + -ms-flex-positive: $value; + -moz-flex-grow: $value; + flex-grow: $value; /* Firefox 20+, Opera 12.10, IE Not supported. */ +} + +@mixin flex-shrink($value) { + -webkit-flex-shrink: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ + -moz-flex-shrink: $value; + flex-shrink: $value; /* Firefox 20+, Opera 12.10, IE Not supported. */ +} + +@mixin flex-wrap($value: nowrap) { + -webkit-flex-wrap: $value; /* Safari 6.1+, Chrome 21.0+, Android 4.4+, iOS 7.0+ */ + -moz-flex-wrap: $value; + + @if $value == nowrap { + -ms-flex-wrap: none; + } @else { + -ms-flex-wrap: $value; + } + + flex-wrap: $value; /* Firefox 28+, IE11, Opera 12.10 */ +} + +@mixin order($value : 1) { + -webkit-box-ordinal-group: $value + 1; + -webkit-order: $value; /* Chrome 21+, Safari Not supported. */ + -ms-flex-order: $value; /* IE 10.0 */ + -moz-order: $value; + order: $value; /* Firefox 20+, Opera 12.10 */ +} + +// alias order() + +@mixin flex-order($args...) { + @include order($args...); +} + +// flow + +@mixin flow-into($value) { + -webkit-flow-into: $value; /* Safari 7.1+, iOS Safari 7.1+ */ + -moz-flow-into: $value; + -ms-flow-into: $value; /* IE10+ */ + flow-into: $value; /* None yet */ +} + +@mixin flow-from($value) { + -webkit-flow-from: $value; /* Safari 7.1+, iOS Safari 7.1+ */ + -moz-flow-from: $value; + -ms-flow-from: $value; /* IE10+ */ + flow-from: $value; /* None yet */ +} + +// Flex align + +// Values: flex-start | flex-end | center | space-between | space-around | stretch + +@mixin align-content($value: stretch) { + -webkit-align-content: $value; /* Chrome 21.0+, Safari Not supported. */ + -moz-align-content: $value; + + @if $value == flex-start { + -ms-flex-line-pack: start; + } @else if $value == flex-end { + -ms-flex-line-pack: end; + } @else { + -ms-flex-line-pack: $value; + } + + align-content: $value; /* Firefox 28+, Opera 12.10, IE Not supported. */ +} + +@mixin align-items($value: stretch) { + @if $value == flex-start { + -webkit-box-align: start; + -ms-flex-align: start; + } @else if $value == flex-end { + -webkit-box-align: end; + -ms-flex-align: end; + } @else { + -webkit-box-align: $value; + -ms-flex-align: $value; + } + + -webkit-align-items: $value; /* Safari 7.0+, Chrome 21.0+ */ + -moz-align-items: $value; + align-items: $value; /* Firefox 20.0+, IE11+, Opera 12.10 */ +} + +// Values: auto | flex-start | flex-end | center | baseline | stretch + +@mixin align-self($value: auto) { + -webkit-align-self: $value; /* Chrome 21~36, Safari Not supported. */ + -moz-align-self: $value; + + @if $value == flex-start { + -ms-flex-item-align: start; + } @else if $value == flex-end { + -ms-flex-item-align: end; + } @else { + -ms-flex-item-align: $value; + } + + align-self: $value; /* Firefox 28+, Opera 12.10, IE Not supported. */ +} + +@mixin justify-content($value : flex-start) { + @if $value == flex-start { + -webkit-box-pack: start; + -ms-flex-pack: start; + } @else if $value == flex-end { + -webkit-box-pack: end; + -ms-flex-pack: end; + } @else if $value == space-around { + -ms-flex-pack: distribute; + } @else if $value == space-between { + -webkit-box-pack: justify; + -ms-flex-pack: justify; + } @else { + -webkit-box-pack: $value; + -ms-flex-pack: $value; + } + + -webkit-justify-content: $value; /* Chrome 21+, Safari Not supported. */ + -moz-justify-content: $value; /* Chrome 21+, Safari Not supported. */ + justify-content: $value; /* Firefox 20+, Opera 12.10, IE Not supported. */ +} + +// alias justify-content + +@mixin flex-justify($args...) { + @include justify-content($args...); +} \ No newline at end of file diff --git a/src/font.scss b/src/font.scss new file mode 100644 index 0000000..dade146 --- /dev/null +++ b/src/font.scss @@ -0,0 +1,20 @@ + +// Font + +@mixin font-kerning($value) { + -webkit-font-kerning: $value; + font-kerning: $value; +} + +// font-feature-settings + +@mixin font-feature-settings($value) { + -webkit-font-feature-settings: $value; /* Chrome 16-26, Blackberry 10 */ + -moz-font-feature-settings: $value; /* Firefox 4-21 */ + font-feature-settings: $value; /* IE 10, Safari 4.0-6.0 */ +} + +@mixin font-variant-ligatures($value) { + -webkit-font-variant-ligatures: $value; + font-variant-ligatures: $value; +} diff --git a/src/helper.scss b/src/helper.scss new file mode 100644 index 0000000..bafe847 --- /dev/null +++ b/src/helper.scss @@ -0,0 +1,49 @@ + +// Helper + +// clearfix + +@mixin clearfix() { + &:before, &:after { + content: " "; + display: table; + } + + &:after { + clear: both; + } +} + +// user-select + +@mixin user-select($type) { + -webkit-user-select: $type; + -moz-user-select: $type; + -ms-user-select: $type; + -o-user-select: $type; + user-select: $type; +} + +// appearance + +@mixin appearance($value) { + -webkit-appearance: $value; + -moz-appearance: $value; + -ms-appearance: $value; + appearance: $value; +} + +// opacity + +@mixin opacity($opacity) { + opacity: $opacity; /* W3C */ + filter: alpha(opacity=($opacity * 100)); /* IE */ +} + +// ruby-position + +@mixin ruby-position($value) { + -webkit-ruby-position: $value; /* Blink, Webkit */ + ruby-position: $value; /* Firefox, IE */ +} + diff --git a/src/input.scss b/src/input.scss new file mode 100644 index 0000000..8892435 --- /dev/null +++ b/src/input.scss @@ -0,0 +1,23 @@ + +// Input + +// input-placeholder + +@mixin input-placeholder($seletor) { + + #{$seletor}::-webkit-input-placeholder { + @content; + } + + #{$seletor}:-moz-placeholder { /* Firefox 4~18 */ + @content; + } + + #{$seletor}::-moz-placeholder { /* Firefox 19+ */ + @content; + } + + #{$seletor}:-ms-input-placeholder { /* IE10+ */ + @content; + } +} diff --git a/src/margin.scss b/src/margin.scss new file mode 100644 index 0000000..0dc0b85 --- /dev/null +++ b/src/margin.scss @@ -0,0 +1,14 @@ + +// margin + +@mixin margin-start($value) { + -webkit-margin-start: $value; /* Safari 3.0+, Chrome */ + -moz-margin-start: $value; /* Firefox 1.0+ */ + margin-start: $value; /* None yet / Non-standard */ +} + +@mixin margin-end($value) { + -webkit-margin-end: $value; /* Safari 3.0+, Chrome */ + -moz-margin-end: $value; /* Firefox 1.0+ */ + margin-end: $value; /* None yet / Non-standard */ +} diff --git a/src/mask.scss b/src/mask.scss new file mode 100644 index 0000000..026e658 --- /dev/null +++ b/src/mask.scss @@ -0,0 +1,57 @@ + +// Mask + +@mixin mask-image($value) { + -webkit-mask-image: $value; /* Chrome, iOS, Safari */ + mask-image: $value; /* None yet / Non-standard */ +} + +@mixin mask-size($value) { + -webkit-mask-size: $value; /* Chrome, iOS, Safari */ + mask-size: $value; /* None yet / Non-standard */ +} + +@mixin mask-clip($value) { + -webkit-mask-clip: $value; /* Chrome, iOS, Safari */ + mask-clip: $value; /* None yet / Non-standard */ +} + +@mixin mask-position($value) { + -webkit-mask-position: $value; /* Chrome, iOS, Safari */ + mask-position: $value; /* None yet / Non-standard */ +} + +@mixin mask-position-x($value) { + -webkit-mask-position-x: $value; /* Chrome, iOS, Safari */ + mask-position-x: $value; /* None yet / Non-standard */ +} + +@mixin mask-position-y($value) { + -webkit-mask-position-y: $value; /* Chrome, iOS, Safari */ + mask-position-y: $value; /* None yet / Non-standard */ +} + +@mixin mask-origin($value) { + -webkit-mask-origin: $value; /* Chrome, iOS, Safari */ + mask-origin: $value; /* None yet / Non-standard */ +} + +@mixin mask-repeat($value) { + -webkit-mask-repeat: $value; /* Chrome, iOS, Safari */ + mask-repeat: $value; /* None yet / Non-standard */ +} + +@mixin mask-attachment($value) { + -webkit-mask-attachment: $value; /* Chrome, iOS, Safari */ + mask-attachment: $value; /* None yet / Non-standard */ +} + +@mixin mask-composite($value) { + -webkit-mask-composite: $value; /* Chrome, iOS, Safari */ + mask-composite: $value; /* None yet / Non-standard */ +} + +@mixin mask-box-image($value) { + -webkit-mask-box-image: $value; /* Chrome, iOS, Safari */ + mask-box-image: $value; /* None yet / Non-standard */ +} \ No newline at end of file diff --git a/src/padding.scss b/src/padding.scss new file mode 100644 index 0000000..895b7b5 --- /dev/null +++ b/src/padding.scss @@ -0,0 +1,14 @@ + +// padding + +@mixin padding-start($value) { + -webkit-padding-start: $value; /* Safari, Chrome, WebKit */ + -moz-padding-start: $value; /* Firefox 3+ */ + padding-start: $value; +} + +@mixin padding-end($value) { + -webkit-padding-end: $value; /* Safari, Chrome, WebKit */ + -moz-padding-end: $value; /* Firefox 3+ */ + padding-end: $value; +} diff --git a/src/perspective.scss b/src/perspective.scss new file mode 100644 index 0000000..2e88ab4 --- /dev/null +++ b/src/perspective.scss @@ -0,0 +1,30 @@ + +// perspective + +@mixin perspective($value) { + -webkit-perspective: $value; /* Safari, Chrome */ + perspective: $value; /* None yet / Non-standard */ +} + +@mixin perspective-origin($value) { + -webkit-perspective-origin: $value; /* Safari, Chrome 12+ */ + -moz-perspective-origin: $value; /* Firefox 10~16 */ + perspective-origin: $value; /* Opera 15+, IE10+ */ +} + +@mixin perspective-origin-x($value) { + -webkit-perspective-origin-x: $value; /* Safari, Chrome 12+ */ + perspective-origin-x: $value; /* IE10+ */ +} + +@mixin perspective-origin-y($value) { + -webkit-perspective-origin-y: $value; /* Safari, Chrome 12+ */ + perspective-origin-y: $value; /* IE10+ */ +} + +@mixin backface-visibility($value : hidden) { + -webkit-backface-visibility: $value; /* Chrome, Safari, Opera 15+ */ + -moz-backface-visibility: $value; /* Firefox */ + -ms-backface-visibility: $value; /* IE10 */ + backface-visibility: $value; +} \ No newline at end of file diff --git a/src/prefixes.scss b/src/prefixes.scss deleted file mode 100644 index 7858733..0000000 --- a/src/prefixes.scss +++ /dev/null @@ -1,791 +0,0 @@ -@charset "UTF-8"; - -/*! - * prefixes.scss - * @author Pandao - * @version 0.1.0 - * @homePage https://github.com/pandao/prefixes.scss - * @license MIT - * @copyright Copyright (c) 2015 - */ - -// appearance - -@mixin appearance($value) { - -webkit-appearance: $value; - -moz-appearance: $value; - -ms-appearance: $value; - appearance: $value; -} - -// clearfix - -@mixin clearfix() { - &:before, &:after { - content: " "; - display: table; - } - - &:after { - clear: both; - } -} - -// viewport - -@mixin viewport-device-width() { - width: device-width; - user-zoom: fixed; -} - -@mixin viewport() { - @-webkit-viewport { - @include viewport-device-width(); - } - @-moz-viewport { - @include viewport-device-width(); - } - - @-ms-viewport { - @include viewport-device-width(); - } - - @-o-viewport { - @include viewport-device-width(); - } - - @viewport { - @include viewport-device-width(); - } -} - -// Transform - -@mixin transform($transform) { - -webkit-transform: $transform; /* Safari, Chrome */ - -moz-transform: $transform; /* Firefox 3.5~16.0 */ - -ms-transform: $transform; /* IE9~10 */ - -o-transform: $transform; /* Opera 10.5~12.10 */ - transform: $transform; -} - -@mixin transform-origin($origin) { - -webkit-transform-origin: $origin; - -moz-transform-origin: $origin; /* Firefox 3.5~16.0 */ - -ms-transform-origin: $origin; /* IE9~10 */ - -o-transform-origin: $origin; /* Opera 10.5~12.10 */ - transform-origin: $origin; -} - -@mixin transform-origin-x($origin) { - -webkit-transform-origin-x: $origin; /* Blink, Webkit */ - transform-origin-x: $origin; /* IE11+ */ -} - -@mixin transform-origin-y($origin) { - -webkit-transform-origin-y: $origin; /* Blink, Webkit */ - transform-origin-y: $origin; /* IE11+ */ -} - -@mixin transform-origin-z($origin) { - -webkit-transform-origin-z: $origin; /* Blink, Webkit */ - transform-origin-z: $origin; /* IE11+ */ -} - -@mixin transform-style($style) { - -webkit-transform-style: $style; - -moz-transform-style: $style; /* Firefox 10~16.0 */ - -ms-transform-style: $style; /* IE9~10 */ - transform-style: $style; /* Firefox, Blink, IE11+ */ -} - -// perspective - -@mixin perspective($value) { - -webkit-perspective: $value; /* Safari, Chrome */ - perspective: $value; /* None yet / Non-standard */ -} - -@mixin perspective-origin($value) { - -webkit-perspective-origin: $value; /* Safari, Chrome 12+ */ - -moz-perspective-origin: $value; /* Firefox 10~16 */ - perspective-origin: $value; /* Opera 15+, IE10+ */ -} - -@mixin perspective-origin-x($value) { - -webkit-perspective-origin-x: $value; /* Safari, Chrome 12+ */ - perspective-origin-x: $value; /* IE10+ */ -} - -@mixin perspective-origin-y($value) { - -webkit-perspective-origin-y: $value; /* Safari, Chrome 12+ */ - perspective-origin-y: $value; /* IE10+ */ -} - -@mixin backface-visibility($value : hidden) { - -webkit-backface-visibility: $value; /* Chrome, Safari, Opera 15+ */ - -moz-backface-visibility: $value; /* Firefox */ - -ms-backface-visibility: $value; /* IE10 */ - backface-visibility: $value; -} - -// Transitions IE10+ - -@mixin transition($transition...) { - -webkit-transition: $transition; /* Safari, Chrome */ - -moz-transition: $transition; /* Firefox 4.0~16.0 */ - transition: $transition; /* IE >9, FF >15, Opera >12.0 */ -} - -@mixin transition-property($property) { - -webkit-transition-property: $property; - -moz-transition-property: $property; /* Firefox 4.0~16.0 */ - transition-property: $property; -} - -@mixin transition-duration($duration) { - -webkit-transition-duration: $duration; - -moz-transition-duration: $duration; /* Firefox 4.0~16.0 */ - transition-duration: $duration; -} - -@mixin transition-timing-function($easing) { - -webkit-transition-timing-function: $easing; - -moz-transition-timing-function: $easing; /* Firefox 4.0~16.0 */ - transition-timing-function: $easing; -} - -@mixin transition-delay($delay) { - -webkit-transition-delay: $delay; - -moz-transition-delay: $delay; /* Firefox 4.0~16.0 */ - transition-delay: $delay; -} - -// Flex align - -@mixin align-content($value) { - -webkit-align-content: $value; /* Chrome 21.0+, Safari Not supported. */ - align-content: $value; /* Firefox 28+, Opera 12.10, IE Not supported. */ -} - -@mixin align-items($value) { - -webkit-align-items: $value; /* Safari 7.0+, Chrome 21.0+ */ - align-items: $value; /* Firefox 20.0+, IE11+, Opera 12.10 */ -} - -@mixin align-self($value) { - -webkit-align-self: $value; /* Chrome 21~36, Safari Not supported. */ - align-self: $value; /* Firefox 28+, Opera 12.10, IE Not supported. */ -} - -// Animations IE10+ - -@mixin keyframes($name) { - @-webkit-keyframes #{$name} { - @content; - } - - @-moz-keyframes #{$name} { - @content; - } - - @keyframes #{$name} { - @content; - } -} - -@mixin animation($animation...) { - -webkit-animation: $animation; - -moz-animation: $animation; /* Firefox 5.0~16.0 */ - animation: $animation; /* IE10+ */ -} - -@mixin animation-name($name) { - -webkit-animation-name: $name; - -moz-animation-name: $name; /* Firefox 5.0~16.0 */ - animation-name: $name; -} - -@mixin animation-duration($time : 1s) { - -webkit-animation-duration: $time; - -moz-animation-duration: $time; /* Firefox 5.0~16.0 */ - animation-duration: $time; -} - -@mixin animation-timing-function($easing : ease) { - -webkit-animation-timing-function: $easing; - -moz-animation-timing-function: $easing; /* Firefox 5.0~16.0 */ - animation-timing-function: $easing; -} - -@mixin animation-delay($delay : 1s) { - -webkit-animation-delay: $delay; - -moz-animation-delay: $delay; /* Firefox 5.0~16.0 */ - animation-delay: $delay; -} - -@mixin animation-iteration-count($count : infinite) { - -webkit-animation-iteration-count: $count; - -moz-animation-iteration-count: $count; /* Firefox 5.0~16.0 */ - animation-iteration-count: $count; -} - -// normal or alternate -@mixin animation-direction($direction : normal) { - -webkit-animation-direction: $direction; - -moz-animation-direction: $direction; /* Firefox 5.0~16.0 */ - animation-direction: $direction; -} - -// paused or running - -@mixin animation-play-state($state) { - -webkit-animation-play-state: $state; - -moz-animation-play-state: $state; /* Firefox 5.0~16.0 */ - animation-play-state: $state; -} - -// animation-fill-mode - -@mixin animation-fill-mode($mode) { - -webkit-animation-fill-mode: $mode; - -moz-animation-fill-mode: $mode; - animation-fill-mode: $mode; -} - -// user-select - -@mixin user-select($type) { - -webkit-user-select: $type; - -moz-user-select: $type; - -ms-user-select: $type; - -o-user-select: $type; - user-select: $type; -} - -// border-radius - -@mixin border-radius($radius: 4px) { - -webkit-border-radius: $radius; - -moz-border-radius: $radius; - -ms-border-radius: $radius; - -o-border-radius: $radius; - border-radius: $radius; -} - -@mixin border-top-left-radius($radius: 4px) { - -webkit-border-top-left-radius: $radius; - -moz-border-top-left-radius: $radius; - -ms-border-top-left-radius: $radius; - -o-border-top-left-radius: $radius; - border-top-left-radius: $radius; -} - -@mixin border-top-right-radius($radius: 4px) { - -webkit-border-top-right-radius: $radius; - -moz-border-top-right-radius: $radius; - -ms-border-top-right-radius: $radius; - -o-border-top-right-radius: $radius; - border-top-right-radius: $radius; -} - -@mixin border-bottom-left-radius($radius: 4px) { - -webkit-border-bottom-left-radius: $radius; - -moz-border-bottom-left-radius: $radius; - -ms-border-bottom-left-radius: $radius; - -o-border-bottom-left-radius: $radius; - border-bottom-left-radius: $radius; -} - -@mixin border-bottom-right-radius($radius: 4px) { - -webkit-border-bottom-right-radius: $radius; - -moz-border-bottom-right-radius: $radius; - -ms-border-bottom-right-radius: $radius; - -o-border-bottom-right-radius: $radius; - border-bottom-right-radius: $radius; -} - -// border-image - -@mixin border-image($value) { - -webkit-border-image: $value; /* Safari 5, Chrome */ - -moz-border-image: $value; /* Firefox 3.5~15.0 */ - -o-border-image: $value; /* Opera */ - border-image: $value; /* Safari 6+, Chrome, New */ -} - -@mixin border-image-source($value) { - -webkit-border-image-source: $value; /* Safari 5, Chrome */ - border-image-source: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */ -} - -@mixin border-image-slice($value) { - -webkit-border-image-slice: $value; /* Safari 5, Chrome */ - border-image-slice: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */ -} - -@mixin border-image-width($value) { - -webkit-border-image-width: $value; /* Safari 5, Chrome */ - border-image-width: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */ -} - -@mixin border-image-outset($value) { - -webkit-border-image-outset: $value; /* Safari 5, Chrome */ - border-image-outset: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */ -} - -@mixin border-image-repeat($value) { - -webkit-border-image-repeat: $value; /* Safari 5, Chrome */ - border-image-repeat: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */ -} - -// box-shadow - -@mixin box-shadow($value) { - -webkit-box-shadow: $value; /* Webkit browsers */ - -moz-box-shadow: $value; /* Firefox */ - -ms-box-shadow: $value; /* IE9 */ - -o-box-shadow: $value; /* Opera(Old) */ - box-shadow: $value; /* IE9+, News */ -} - -//box-sizing - -@mixin box-sizing($value) { - -webkit-box-sizing: $value; - -moz-box-sizing: $value; - box-sizing: $value; -} - -// box-reflect - -@mixin box-reflect($value) { - -webkit-box-reflect: $value; /* Chrome, Safari, iOS, Blackberry */ - box-reflect: $value; /* None yet / Non-standard */ -} - -// background - -@mixin linear-gradient($start-color, $end-color, $position : top, $perStart : 0%, $perEnd : 100%) { - background: -webkit-linear-gradient($position, $start-color, $end-color); /* Webkit browsers */ - background: -moz-linear-gradient( $position, $start-color, $end-color); /* Firefox(old) */ - background: -o-linear-gradient( $position, $start-color, $end-color); /* Opera(old) */ - background: -ms-linear-gradient( $position, $start-color $perStart, $end-color $perEnd); /* IE10 */ - filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, start-colorstr=#{$start-color}, end-colorstr=#{$end-color}); /* IE9 */ - ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, start-colorstr=#{$start-color}, end-colorstr=#{$end-color})"; /* IE8 */ - background: linear-gradient( $position, $start-color $perStart, $end-color $perEnd); /* W3C */ -} - -@mixin background-clip($value) { - -webkit-background-clip: $value; - background-clip: $value; /* Firefox 4.0, IE9+, Opera 10.5+, Chrome, Safari 3.0+ */ -} - -@mixin background-origin($value) { - -webkit-background-origin: $value; - background-origin: $value; /* IE9+, Other */ -} - -@mixin background-size($value) { - -webkit-background-size: $value; /* Chrome, iOS, Safari */ - -moz-background-size: $value; /* Firefox 3.6~4.0 */ - -o-background-size: $value; /* Opera 9.5 */ - background-size: $value; /* IE9+, New */ -} - -// Column - -@mixin column-count($value) { - -webkit-column-count: $value; /* Chrome, Safari, Android, Blackberry */ - -moz-column-count: $value; /* Firefox 34+ */ - column-count: $value; /* IE 10+, Opera 11.1+, New */ -} - -@mixin column-gap($value) { - -webkit-column-gap: $value; /* Chrome, Safari, Android, Blackberry */ - -moz-column-gap: $value; /* Firefox 34+ */ - column-gap: $value; /* IE 10+, Opera 11.1+, New */ -} - -@mixin column-rule($value) { - -webkit-column-rule: $value; /* Chrome, Safari, Android, Blackberry */ - -moz-column-rule: $value; /* Firefox 34+ */ - column-rule: $value; /* IE 10+, Opera 11.1+, New */ -} - -@mixin column-rule-color($value) { - -webkit-column-rule-color: $value; /* Chrome, Safari, Android, Blackberry */ - -moz-column-rule-color: $value; /* Firefox 34+ */ - column-rule-color: $value; /* IE 10+, Opera 11.1+, New */ -} - -@mixin column-rule-style($value) { - -webkit-column-rule-style: $value; /* Chrome, Safari, Android, Blackberry */ - -moz-column-rule-style: $value; /* Firefox 34+ */ - column-rule-style: $value; /* IE 10+, Opera 11.1+, New */ -} - -@mixin column-rule-width($value) { - -webkit-column-rule-width: $value; /* Chrome, Safari, Android, Blackberry */ - -moz-column-rule-width: $value; /* Firefox 34+ */ - column-rule-width: $value; /* IE 10+, Opera 11.1+, New */ -} - -@mixin column-fill($value) { - -webkit-column-fill: $value; /* None yet */ - -moz-column-fill: $value; /* Firefox 13.0+ */ - column-fill: $value; /* None yet / Non-standard */ -} - -@mixin column-span($value) { - -webkit-column-span: $value; /* Safari, Chrome, iOS 7.0+, Android, Opera 26+ */ - -moz-column-span: $value; /* Firefox 34+ */ - column-span: $value; /* IE10+, Opera Mini */ -} - -@mixin column-width($value) { - -webkit-column-width: $value; /* Safari, Chrome, iOS 7.0+, Android, Opera 26+ */ - -moz-column-width: $value; /* Firefox */ - column-width: $value; /* IE10+, Opera */ -} - -// columns: column-width column-count; - -@mixin columns($value) { - -webkit-columns: $value; /* Safari, Chrome, iOS 7.0+, Android, Opera 26+ */ - -moz-columns: $value; /* Firefox */ - columns: $value; /* IE10+, Opera */ -} - -// clip-path - -@mixin clip-path($value) { - -webkit-clip-path: $value; /* Chrome, iOS, Safari */ - clip-path: $value; -} - -// display - -@mixin display-grid() { - display: -ms-grid; /* IE 10 */ - display: grid; /* None yet */ -} - -@mixin display-flex() { - display: -webkit-box; /* Old - iOS 6-, Safari 3.1~6, Blackberry 7 */ - display: -ms-flexbox; /* TWEENER - IE 10 */ - display: -webkit-flex; /* New - Safari 6.1+. iOS 7.1+, Blackberry 10 */ - display: flex; /* New, Spec - Firefox, Chrome, Opera */ -} - -@mixin inline-flex($value) { - -webkit-inline-flex: $value; /* Chrome 21.0+ */ - inline-flex: $value; /* Firefox 20+, Opera 12.5 */ -} - -@mixin flex($value) { - -webkit-box-flex: $value; /* Old - iOS 6-, Safari 3.1~6 */ - -webkit-flex: $value; /* Safari 6.1+. iOS 7.1+, Blackberry 10 */ - -ms-flex: $value; /* IE 10 */ - flex: $value; /* New, Spec - Firefox, Chrome, Opera */ -} - -@mixin flex-direction($value) { - -webkit-flex-direction: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ - flex-direction: $value; /* Firefox 28+, IE11, Opera 12.10 */ -} - -@mixin flex-basis($value) { - -webkit-flex-basis: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ - flex-basis: $value; /* Firefox 22+, IE11, Opera 12.10 */ -} - -@mixin flex-flow($value) { - -webkit-flex-flow: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ - flex-flow: $value; /* Firefox 28+, IE11, Opera 12.10 */ -} - -@mixin flex-grow($value) { - -webkit-flex-grow: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ - flex-grow: $value; /* Firefox 20+, Opera 12.10, IE Not supported. */ -} - -@mixin flex-shrink($value) { - -webkit-flex-shrink: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */ - flex-shrink: $value; /* Firefox 20+, Opera 12.10, IE Not supported. */ -} - -@mixin flex-wrap($value) { - -webkit-flex-wrap: $value; /* Safari 6.1+, Chrome 21.0+, Android 4.4+, iOS 7.0+ */ - flex-wrap: $value; /* Firefox 28+, IE11, Opera 12.10 */ -} - -@mixin order($value) { - -webkit-order: $value; /* Chrome 21+, Safari Not supported. */ - -ms-flex-order: $value; /* IE 10.0 */ - order: $value; /* Firefox 20+, Opera 12.10 */ -} - -// flow - -@mixin flow-into($value) { - -webkit-flow-into: $value; /* Safari 7.1+, iOS Safari 7.1+ */ - -ms-flow-into: $value; /* IE10+ */ - flow-into: $value; /* None yet */ -} - -@mixin flow-from($value) { - -webkit-flow-from: $value; /* Safari 7.1+, iOS Safari 7.1+ */ - -ms-flow-from: $value; /* IE10+ */ - flow-from: $value; /* None yet */ -} - -// filter - -@mixin filter($value) { - -webkit-filter: $value; /* Chrome 23+, Safari 6.0+, Blackberry 10.0+ */ - filter: $value; /* None yet */ -} - -// filter blur - -@mixin filter-blur($value : 10px, $ie-value : 10) { - filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=#{$ie-value}, MakeShadow=false); /* IE6~IE9 */ - -webkit-filter: blur($value); /* Chrome, Opera, iOS, Safari */ - -moz-filter: blur($value); /* Firefox(Old) */ - -ms-filter: blur($value); - filter: blur($value); -} - -@mixin font-kerning($value) { - -webkit-font-kerning: $value; - font-kerning: $value; -} - -// font-feature-settings - -@mixin font-feature-settings($value) { - -webkit-font-feature-settings: $value; /* Chrome 16-26, Blackberry 10 */ - -moz-font-feature-settings: $value; /* Firefox 4-21 */ - font-feature-settings: $value; /* IE 10, Safari 4.0-6.0 */ -} - -@mixin font-variant-ligatures($value) { - -webkit-font-variant-ligatures: $value; - font-variant-ligatures: $value; -} - -// hyphens - -@mixin hyphens($value : auto) { - // Chrome 29- and Android 4.0 Browser support "-webkit-hyphens: none", but not the "auto" property. - -webkit-hyphens: $value; /* Safari 5.1+, Chrome */ - -moz-hyphens: $value; /* Firefox 6.0+ */ - -ms-hyphens: $value; /* IE 10+ */ - hyphens: $value; /* None yet */ -} - -@mixin justify-content($value) { - -webkit-justify-content: $value; /* Chrome 21+, Safari Not supported. */ - justify-content: $value; /* Firefox 20+, Opera 12.10, IE Not supported. */ -} - -// line - -@mixin line-break($value) { - -webkit-line-break: $value; - line-break: $value; -} - -// margin - -@mixin margin-start($value) { - -webkit-margin-start: $value; /* Safari 3.0+, Chrome */ - -moz-margin-start: $value; /* Firefox 1.0+ */ - margin-start: $value; /* None yet / Non-standard */ -} - -@mixin margin-end($value) { - -webkit-margin-end: $value; /* Safari 3.0+, Chrome */ - -moz-margin-end: $value; /* Firefox 1.0+ */ - margin-end: $value; /* None yet / Non-standard */ -} - -// mask - -@mixin mask-image($value) { - -webkit-mask-image: $value; /* Chrome, iOS, Safari */ - mask-image: $value; /* None yet / Non-standard */ -} - -@mixin mask-size($value) { - -webkit-mask-size: $value; /* Chrome, iOS, Safari */ - mask-size: $value; /* None yet / Non-standard */ -} - -@mixin mask-clip($value) { - -webkit-mask-clip: $value; /* Chrome, iOS, Safari */ - mask-clip: $value; /* None yet / Non-standard */ -} - -@mixin mask-position($value) { - -webkit-mask-position: $value; /* Chrome, iOS, Safari */ - mask-position: $value; /* None yet / Non-standard */ -} - -@mixin mask-position-x($value) { - -webkit-mask-position-x: $value; /* Chrome, iOS, Safari */ - mask-position-x: $value; /* None yet / Non-standard */ -} - -@mixin mask-position-y($value) { - -webkit-mask-position-y: $value; /* Chrome, iOS, Safari */ - mask-position-y: $value; /* None yet / Non-standard */ -} - -@mixin mask-origin($value) { - -webkit-mask-origin: $value; /* Chrome, iOS, Safari */ - mask-origin: $value; /* None yet / Non-standard */ -} - -@mixin mask-repeat($value) { - -webkit-mask-repeat: $value; /* Chrome, iOS, Safari */ - mask-repeat: $value; /* None yet / Non-standard */ -} - -@mixin mask-attachment($value) { - -webkit-mask-attachment: $value; /* Chrome, iOS, Safari */ - mask-attachment: $value; /* None yet / Non-standard */ -} - -@mixin mask-composite($value) { - -webkit-mask-composite: $value; /* Chrome, iOS, Safari */ - mask-composite: $value; /* None yet / Non-standard */ -} - -@mixin mask-box-image($value) { - -webkit-mask-box-image: $value; /* Chrome, iOS, Safari */ - mask-box-image: $value; /* None yet / Non-standard */ -} - -// opacity - -@mixin opacity($opacity) { - opacity: $opacity; /* W3C */ - filter: alpha(opacity=($opacity * 100)); /* IE */ -} - -// padding - -@mixin padding-start($value) { - -webkit-padding-start: $value; /* Safari, Chrome, WebKit */ - -moz-padding-start: $value; /* Firefox 3+ */ - padding-start: $value; -} - -@mixin padding-end($value) { - -webkit-padding-end: $value; /* Safari, Chrome, WebKit */ - -moz-padding-end: $value; /* Firefox 3+ */ - padding-end: $value; -} - -// ruby-position - -@mixin ruby-position($value) { - -webkit-ruby-position: $value; /* Blink, Webkit */ - ruby-position: $value; /* Firefox, IE */ -} - -// Text - -@mixin text-size-adjust($value) { - -webkit-text-size-adjust: $value; /* Chrome 27+ */ - -moz-text-size-adjust: $value; /* Firefox */ - text-size-adjust: $value; /* None yet */ -} - -@mixin text-align-last($value) { - -webkit-text-align-last: $value; /* Chrome 35+, Safari Not supported. */ - -moz-text-align-last: $value; /* Firefox 12.0 */ - text-align-last: $value; /* IE 5.5+ */ -} - -@mixin text-justify($value) { - -webkit-text-justify: $value; - text-justify: $value; -} - -@mixin text-decoration-color($value) { - -webkit-text-decoration-color: $value; - text-decoration-color: $value; -} - -@mixin text-decoration-line($value) { - -webkit-text-decoration-line: $value; - text-decoration-line: $value; -} - -@mixin text-decoration-style($value) { - -webkit-text-decoration-style: $value; - text-decoration-style: $value; -} - -@mixin text-orientation($value) { - -webkit-text-orientation: $value; - text-orientation: $value; -} - -@mixin text-underline-position($value) { - -webkit-text-underline-position: $value; /* Chrome 33 not fully supported. */ - text-underline-position: $value; /* IE 5 not fully supported. */ -} - -@mixin text-emphasis($value) { - -webkit-text-emphasis: $value; /* Blink */ - text-emphasis: $value; /* WebKit */ -} - -@mixin text-emphasis-color($value) { - -webkit-text-emphasis-color: $value; /* Blink */ - text-emphasis-color: $value; /* WebKit */ -} - -@mixin text-emphasis-style($value) { - -webkit-text-emphasis-style: $value; /* Blink */ - text-emphasis-style: $value; /* WebKit */ -} - -@mixin text-emphasis-position($value) { - -webkit-text-emphasis-position: $value; /* Blink */ - text-emphasis-position: $value; /* WebKit */ -} - -// tab - -@mixin tab-size($value) { - -webkit-tab-size: $value; /* Chrome 21+, Safari 6.1+ */ - -moz-tab-size: $value; /* Firefox 4.0 */ - -o-tab-size: $value; /* Opera 10.6~15 */ - tab-size: $value; /* Blink & Webkit */ -} - -// input-placeholder - -@mixin input-placeholder($seletor) { - - #{$seletor}::-webkit-input-placeholder { - @content; - } - - #{$seletor}:-moz-placeholder { /* Firefox 4~18 */ - @content; - } - - #{$seletor}::-moz-placeholder { /* Firefox 19+ */ - @content; - } - - #{$seletor}:-ms-input-placeholder { /* IE10+ */ - @content; - } -} \ No newline at end of file diff --git a/src/tab.scss b/src/tab.scss new file mode 100644 index 0000000..86ec4f6 --- /dev/null +++ b/src/tab.scss @@ -0,0 +1,10 @@ + +// tab + +@mixin tab-size($value) { + -webkit-tab-size: $value; /* Chrome 21+, Safari 6.1+ */ + -moz-tab-size: $value; /* Firefox 4.0 */ + -o-tab-size: $value; /* Opera 10.6~15 */ + tab-size: $value; /* Blink & Webkit */ +} + diff --git a/src/text.scss b/src/text.scss new file mode 100644 index 0000000..0347ac0 --- /dev/null +++ b/src/text.scss @@ -0,0 +1,91 @@ + +// Text + +@mixin text-size-adjust($value) { + -webkit-text-size-adjust: $value; /* Chrome 27+ */ + -moz-text-size-adjust: $value; /* Firefox */ + text-size-adjust: $value; /* None yet */ +} + +@mixin text-align-last($value) { + -webkit-text-align-last: $value; /* Chrome 35+, Safari Not supported. */ + -moz-text-align-last: $value; /* Firefox 12.0 */ + text-align-last: $value; /* IE 5.5+ */ +} + +@mixin text-justify($value) { + -webkit-text-justify: $value; + text-justify: $value; +} + +@mixin text-decoration-color($value) { + -webkit-text-decoration-color: $value; + text-decoration-color: $value; +} + +@mixin text-decoration-line($value) { + -webkit-text-decoration-line: $value; + text-decoration-line: $value; +} + +@mixin text-decoration-style($value) { + -webkit-text-decoration-style: $value; + text-decoration-style: $value; +} + +@mixin text-orientation($value) { + -webkit-text-orientation: $value; + text-orientation: $value; +} + +@mixin text-underline-position($value) { + -webkit-text-underline-position: $value; /* Chrome 33 not fully supported. */ + text-underline-position: $value; /* IE 5 not fully supported. */ +} + +@mixin text-emphasis($value) { + -webkit-text-emphasis: $value; /* Blink */ + text-emphasis: $value; /* WebKit */ +} + +@mixin text-emphasis-color($value) { + -webkit-text-emphasis-color: $value; /* Blink */ + text-emphasis-color: $value; /* WebKit */ +} + +@mixin text-emphasis-style($value) { + -webkit-text-emphasis-style: $value; /* Blink */ + text-emphasis-style: $value; /* WebKit */ +} + +@mixin text-emphasis-position($value) { + -webkit-text-emphasis-position: $value; /* Blink */ + text-emphasis-position: $value; /* WebKit */ +} + +// Word + +@mixin word-break() { + -ms-word-break: break-all; + word-break: break-all; + word-break: break-word; +} + +// hyphens : none | manual | auto +// iOS 4.2+ + +@mixin hyphens($value : auto) { + // Chrome 29- and Android 4.0 Browser support "-webkit-hyphens: none", but not the "auto" property. + -webkit-hyphens: $value; /* Safari 5.1+, Chrome */ + -moz-hyphens: $value; /* Firefox 6.0+ */ + -ms-hyphens: $value; /* IE 10+ */ + hyphens: $value; /* None yet */ +} + +// line +// 指定用于中文、日语和韩语 (CJK) 文本的换行规则的严格程度 + +@mixin line-break($value) { + -webkit-line-break: $value; + line-break: $value; +} diff --git a/src/transform.scss b/src/transform.scss new file mode 100644 index 0000000..23caeee --- /dev/null +++ b/src/transform.scss @@ -0,0 +1,40 @@ + +// Transform + +@mixin transform($transform) { + -webkit-transform: $transform; /* Safari, Chrome */ + -moz-transform: $transform; /* Firefox 3.5~16.0 */ + -ms-transform: $transform; /* IE9~10 */ + -o-transform: $transform; /* Opera 10.5~12.10 */ + transform: $transform; +} + +@mixin transform-origin($origin) { + -webkit-transform-origin: $origin; + -moz-transform-origin: $origin; /* Firefox 3.5~16.0 */ + -ms-transform-origin: $origin; /* IE9~10 */ + -o-transform-origin: $origin; /* Opera 10.5~12.10 */ + transform-origin: $origin; +} + +@mixin transform-origin-x($origin) { + -webkit-transform-origin-x: $origin; /* Blink, Webkit */ + transform-origin-x: $origin; /* IE11+ */ +} + +@mixin transform-origin-y($origin) { + -webkit-transform-origin-y: $origin; /* Blink, Webkit */ + transform-origin-y: $origin; /* IE11+ */ +} + +@mixin transform-origin-z($origin) { + -webkit-transform-origin-z: $origin; /* Blink, Webkit */ + transform-origin-z: $origin; /* IE11+ */ +} + +@mixin transform-style($style) { + -webkit-transform-style: $style; + -moz-transform-style: $style; /* Firefox 10~16.0 */ + -ms-transform-style: $style; /* IE9~10 */ + transform-style: $style; /* Firefox, Blink, IE11+ */ +} diff --git a/src/transition.scss b/src/transition.scss new file mode 100644 index 0000000..f9f9ccd --- /dev/null +++ b/src/transition.scss @@ -0,0 +1,33 @@ + +// Transitions +// IE10+ + +@mixin transition($transition...) { + -webkit-transition: $transition; /* Safari, Chrome */ + -moz-transition: $transition; /* Firefox 4.0~16.0 */ + transition: $transition; /* IE >9, FF >15, Opera >12.0 */ +} + +@mixin transition-property($property) { + -webkit-transition-property: $property; + -moz-transition-property: $property; /* Firefox 4.0~16.0 */ + transition-property: $property; +} + +@mixin transition-duration($duration) { + -webkit-transition-duration: $duration; + -moz-transition-duration: $duration; /* Firefox 4.0~16.0 */ + transition-duration: $duration; +} + +@mixin transition-timing-function($easing) { + -webkit-transition-timing-function: $easing; + -moz-transition-timing-function: $easing; /* Firefox 4.0~16.0 */ + transition-timing-function: $easing; +} + +@mixin transition-delay($delay) { + -webkit-transition-delay: $delay; + -moz-transition-delay: $delay; /* Firefox 4.0~16.0 */ + transition-delay: $delay; +} diff --git a/src/viewport.scss b/src/viewport.scss new file mode 100644 index 0000000..b9fd34c --- /dev/null +++ b/src/viewport.scss @@ -0,0 +1,28 @@ + +// viewport + +@mixin viewport-device-width() { + width: device-width; + user-zoom: fixed; +} + +@mixin viewport() { + @-webkit-viewport { + @include viewport-device-width(); + } + @-moz-viewport { + @include viewport-device-width(); + } + + @-ms-viewport { + @include viewport-device-width(); + } + + @-o-viewport { + @include viewport-device-width(); + } + + @viewport { + @include viewport-device-width(); + } +}