prefixes.scss 23 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243244245246247248249250251252253254255256257258259260261262263264265266267268269270271272273274275276277278279280281282283284285286287288289290291292293294295296297298299300301302303304305306307308309310311312313314315316317318319320321322323324325326327328329330331332333334335336337338339340341342343344345346347348349350351352353354355356357358359360361362363364365366367368369370371372373374375376377378379380381382383384385386387388389390391392393394395396397398399400401402403404405406407408409410411412413414415416417418419420421422423424425426427428429430431432433434435436437438439440441442443444445446447448449450451452453454455456457458459460461462463464465466467468469470471472473474475476477478479480481482483484485486487488489490491492493494495496497498499500501502503504505506507508509510511512513514515516517518519520521522523524525526527528529530531532533534535536537538539540541542543544545546547548549550551552553554555556557558559560561562563564565566567568569570571572573574575576577578579580581582583584585586587588589590591592593594595596597598599600601602603604605606607608609610611612613614615616617618619620621622623624625626627628629630631632633634635636637638639640641642643644645646647648649650651652653654655656657658659660661662663664665666667668669670671672673674675676677678679680681682683684685686687688689690691692693694695696697698699700701702703704705706707708709710711712713714715716717718719720721722723724725726727728729730731732733734735736737738739740741742743744745746747748749750751752753754755756757758759760761762763764765766767768769770771772773774775776777778779780781782783784
  1. @charset "UTF-8";
  2. /*! prefixes.scss v0.1.0 | Author: Pandao | https://github.com/pandao/prefixes.scss | MIT license | Copyright (c) 2015 */
  3. // appearance
  4. @mixin appearance($value) {
  5. -webkit-appearance: $value;
  6. -moz-appearance: $value;
  7. -ms-appearance: $value;
  8. appearance: $value;
  9. }
  10. // clearfix
  11. @mixin clearfix() {
  12. &:before, &:after {
  13. content: " ";
  14. display: table;
  15. }
  16. &:after {
  17. clear: both;
  18. }
  19. }
  20. // viewport
  21. @mixin viewport-device-width() {
  22. width: device-width;
  23. user-zoom: fixed;
  24. }
  25. @mixin viewport() {
  26. @-webkit-viewport {
  27. @include viewport-device-width();
  28. }
  29. @-moz-viewport {
  30. @include viewport-device-width();
  31. }
  32. @-ms-viewport {
  33. @include viewport-device-width();
  34. }
  35. @-o-viewport {
  36. @include viewport-device-width();
  37. }
  38. @viewport {
  39. @include viewport-device-width();
  40. }
  41. }
  42. // Transform
  43. @mixin transform($transform) {
  44. -webkit-transform: $transform; /* Safari, Chrome */
  45. -moz-transform: $transform; /* Firefox 3.5~16.0 */
  46. -ms-transform: $transform; /* IE9~10 */
  47. -o-transform: $transform; /* Opera 10.5~12.10 */
  48. transform: $transform;
  49. }
  50. @mixin transform-origin($origin) {
  51. -webkit-transform-origin: $origin;
  52. -moz-transform-origin: $origin; /* Firefox 3.5~16.0 */
  53. -ms-transform-origin: $origin; /* IE9~10 */
  54. -o-transform-origin: $origin; /* Opera 10.5~12.10 */
  55. transform-origin: $origin;
  56. }
  57. @mixin transform-origin-x($origin) {
  58. -webkit-transform-origin-x: $origin; /* Blink, Webkit */
  59. transform-origin-x: $origin; /* IE11+ */
  60. }
  61. @mixin transform-origin-y($origin) {
  62. -webkit-transform-origin-y: $origin; /* Blink, Webkit */
  63. transform-origin-y: $origin; /* IE11+ */
  64. }
  65. @mixin transform-origin-z($origin) {
  66. -webkit-transform-origin-z: $origin; /* Blink, Webkit */
  67. transform-origin-z: $origin; /* IE11+ */
  68. }
  69. @mixin transform-style($style) {
  70. -webkit-transform-style: $style;
  71. -moz-transform-style: $style; /* Firefox 10~16.0 */
  72. -ms-transform-style: $style; /* IE9~10 */
  73. transform-style: $style; /* Firefox, Blink, IE11+ */
  74. }
  75. // perspective
  76. @mixin perspective($value) {
  77. -webkit-perspective: $value; /* Safari, Chrome */
  78. perspective: $value; /* None yet / Non-standard */
  79. }
  80. @mixin perspective-origin($value) {
  81. -webkit-perspective-origin: $value; /* Safari, Chrome 12+ */
  82. -moz-perspective-origin: $value; /* Firefox 10~16 */
  83. perspective-origin: $value; /* Opera 15+, IE10+ */
  84. }
  85. @mixin perspective-origin-x($value) {
  86. -webkit-perspective-origin-x: $value; /* Safari, Chrome 12+ */
  87. perspective-origin-x: $value; /* IE10+ */
  88. }
  89. @mixin perspective-origin-y($value) {
  90. -webkit-perspective-origin-y: $value; /* Safari, Chrome 12+ */
  91. perspective-origin-y: $value; /* IE10+ */
  92. }
  93. @mixin backface-visibility($value : hidden) {
  94. -webkit-backface-visibility: $value; /* Chrome, Safari, Opera 15+ */
  95. -moz-backface-visibility: $value; /* Firefox */
  96. -ms-backface-visibility: $value; /* IE10 */
  97. backface-visibility: $value;
  98. }
  99. // Transitions IE10+
  100. @mixin transition($transition...) {
  101. -webkit-transition: $transition; /* Safari, Chrome */
  102. -moz-transition: $transition; /* Firefox 4.0~16.0 */
  103. transition: $transition; /* IE >9, FF >15, Opera >12.0 */
  104. }
  105. @mixin transition-property($property) {
  106. -webkit-transition-property: $property;
  107. -moz-transition-property: $property; /* Firefox 4.0~16.0 */
  108. transition-property: $property;
  109. }
  110. @mixin transition-duration($duration) {
  111. -webkit-transition-duration: $duration;
  112. -moz-transition-duration: $duration; /* Firefox 4.0~16.0 */
  113. transition-duration: $duration;
  114. }
  115. @mixin transition-timing-function($easing) {
  116. -webkit-transition-timing-function: $easing;
  117. -moz-transition-timing-function: $easing; /* Firefox 4.0~16.0 */
  118. transition-timing-function: $easing;
  119. }
  120. @mixin transition-delay($delay) {
  121. -webkit-transition-delay: $delay;
  122. -moz-transition-delay: $delay; /* Firefox 4.0~16.0 */
  123. transition-delay: $delay;
  124. }
  125. // Flex align
  126. @mixin align-content($value) {
  127. -webkit-align-content: $value; /* Chrome 21.0+, Safari Not supported. */
  128. align-content: $value; /* Firefox 28+, Opera 12.10, IE Not supported. */
  129. }
  130. @mixin align-items($value) {
  131. -webkit-align-items: $value; /* Safari 7.0+, Chrome 21.0+ */
  132. align-items: $value; /* Firefox 20.0+, IE11+, Opera 12.10 */
  133. }
  134. @mixin align-self($value) {
  135. -webkit-align-self: $value; /* Chrome 21~36, Safari Not supported. */
  136. align-self: $value; /* Firefox 28+, Opera 12.10, IE Not supported. */
  137. }
  138. // Animations IE10+
  139. @mixin keyframes($name) {
  140. @-webkit-keyframes #{$name} {
  141. @content;
  142. }
  143. @-moz-keyframes #{$name} {
  144. @content;
  145. }
  146. @keyframes #{$name} {
  147. @content;
  148. }
  149. }
  150. @mixin animation($animation...) {
  151. -webkit-animation: $animation;
  152. -moz-animation: $animation; /* Firefox 5.0~16.0 */
  153. animation: $animation; /* IE10+ */
  154. }
  155. @mixin animation-name($name) {
  156. -webkit-animation-name: $name;
  157. -moz-animation-name: $name; /* Firefox 5.0~16.0 */
  158. animation-name: $name;
  159. }
  160. @mixin animation-duration($time : 1s) {
  161. -webkit-animation-duration: $time;
  162. -moz-animation-duration: $time; /* Firefox 5.0~16.0 */
  163. animation-duration: $time;
  164. }
  165. @mixin animation-timing-function($easing : ease) {
  166. -webkit-animation-timing-function: $easing;
  167. -moz-animation-timing-function: $easing; /* Firefox 5.0~16.0 */
  168. animation-timing-function: $easing;
  169. }
  170. @mixin animation-delay($delay : 1s) {
  171. -webkit-animation-delay: $delay;
  172. -moz-animation-delay: $delay; /* Firefox 5.0~16.0 */
  173. animation-delay: $delay;
  174. }
  175. @mixin animation-iteration-count($count : infinite) {
  176. -webkit-animation-iteration-count: $count;
  177. -moz-animation-iteration-count: $count; /* Firefox 5.0~16.0 */
  178. animation-iteration-count: $count;
  179. }
  180. // normal or alternate
  181. @mixin animation-direction($direction : normal) {
  182. -webkit-animation-direction: $direction;
  183. -moz-animation-direction: $direction; /* Firefox 5.0~16.0 */
  184. animation-direction: $direction;
  185. }
  186. // paused or running
  187. @mixin animation-play-state($state) {
  188. -webkit-animation-play-state: $state;
  189. -moz-animation-play-state: $state; /* Firefox 5.0~16.0 */
  190. animation-play-state: $state;
  191. }
  192. // animation-fill-mode
  193. @mixin animation-fill-mode($mode) {
  194. -webkit-animation-fill-mode: $mode;
  195. -moz-animation-fill-mode: $mode;
  196. animation-fill-mode: $mode;
  197. }
  198. // user-select
  199. @mixin user-select($type) {
  200. -webkit-user-select: $type;
  201. -moz-user-select: $type;
  202. -ms-user-select: $type;
  203. -o-user-select: $type;
  204. user-select: $type;
  205. }
  206. // border-radius
  207. @mixin border-radius($radius: 4px) {
  208. -webkit-border-radius: $radius;
  209. -moz-border-radius: $radius;
  210. -ms-border-radius: $radius;
  211. -o-border-radius: $radius;
  212. border-radius: $radius;
  213. }
  214. @mixin border-top-left-radius($radius: 4px) {
  215. -webkit-border-top-left-radius: $radius;
  216. -moz-border-top-left-radius: $radius;
  217. -ms-border-top-left-radius: $radius;
  218. -o-border-top-left-radius: $radius;
  219. border-top-left-radius: $radius;
  220. }
  221. @mixin border-top-right-radius($radius: 4px) {
  222. -webkit-border-top-right-radius: $radius;
  223. -moz-border-top-right-radius: $radius;
  224. -ms-border-top-right-radius: $radius;
  225. -o-border-top-right-radius: $radius;
  226. border-top-right-radius: $radius;
  227. }
  228. @mixin border-bottom-left-radius($radius: 4px) {
  229. -webkit-border-bottom-left-radius: $radius;
  230. -moz-border-bottom-left-radius: $radius;
  231. -ms-border-bottom-left-radius: $radius;
  232. -o-border-bottom-left-radius: $radius;
  233. border-bottom-left-radius: $radius;
  234. }
  235. @mixin border-bottom-right-radius($radius: 4px) {
  236. -webkit-border-bottom-right-radius: $radius;
  237. -moz-border-bottom-right-radius: $radius;
  238. -ms-border-bottom-right-radius: $radius;
  239. -o-border-bottom-right-radius: $radius;
  240. border-bottom-right-radius: $radius;
  241. }
  242. // border-image
  243. @mixin border-image($value) {
  244. -webkit-border-image: $value; /* Safari 5, Chrome */
  245. -moz-border-image: $value; /* Firefox 3.5~15.0 */
  246. -o-border-image: $value; /* Opera */
  247. border-image: $value; /* Safari 6+, Chrome, New */
  248. }
  249. @mixin border-image-source($value) {
  250. -webkit-border-image-source: $value; /* Safari 5, Chrome */
  251. border-image-source: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */
  252. }
  253. @mixin border-image-slice($value) {
  254. -webkit-border-image-slice: $value; /* Safari 5, Chrome */
  255. border-image-slice: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */
  256. }
  257. @mixin border-image-width($value) {
  258. -webkit-border-image-width: $value; /* Safari 5, Chrome */
  259. border-image-width: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */
  260. }
  261. @mixin border-image-outset($value) {
  262. -webkit-border-image-outset: $value; /* Safari 5, Chrome */
  263. border-image-outset: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */
  264. }
  265. @mixin border-image-repeat($value) {
  266. -webkit-border-image-repeat: $value; /* Safari 5, Chrome */
  267. border-image-repeat: $value; /* Safari 6+, Chrome, IE11+, Opera 15+ */
  268. }
  269. // box-shadow
  270. @mixin box-shadow($value) {
  271. -webkit-box-shadow: $value; /* Webkit browsers */
  272. -moz-box-shadow: $value; /* Firefox */
  273. -ms-box-shadow: $value; /* IE9 */
  274. -o-box-shadow: $value; /* Opera(Old) */
  275. box-shadow: $value; /* IE9+, News */
  276. }
  277. //box-sizing
  278. @mixin box-sizing($value) {
  279. -webkit-box-sizing: $value;
  280. -moz-box-sizing: $value;
  281. box-sizing: $value;
  282. }
  283. // box-reflect
  284. @mixin box-reflect($value) {
  285. -webkit-box-reflect: $value; /* Chrome, Safari, iOS, Blackberry */
  286. box-reflect: $value; /* None yet / Non-standard */
  287. }
  288. // background
  289. @mixin linear-gradient($start-color, $end-color, $position : top, $perStart : 0%, $perEnd : 100%) {
  290. background: -webkit-linear-gradient($position, $start-color, $end-color); /* Webkit browsers */
  291. background: -moz-linear-gradient( $position, $start-color, $end-color); /* Firefox(old) */
  292. background: -o-linear-gradient( $position, $start-color, $end-color); /* Opera(old) */
  293. background: -ms-linear-gradient( $position, $start-color $perStart, $end-color $perEnd); /* IE10 */
  294. filter: progid:DXImageTransform.Microsoft.gradient(GradientType=0, start-colorstr=#{$start-color}, end-colorstr=#{$end-color}); /* IE9 */
  295. ms-filter: "progid:DXImageTransform.Microsoft.gradient (GradientType=0, start-colorstr=#{$start-color}, end-colorstr=#{$end-color})"; /* IE8 */
  296. background: linear-gradient( $position, $start-color $perStart, $end-color $perEnd); /* W3C */
  297. }
  298. @mixin background-clip($value) {
  299. -webkit-background-clip: $value;
  300. background-clip: $value; /* Firefox 4.0, IE9+, Opera 10.5+, Chrome, Safari 3.0+ */
  301. }
  302. @mixin background-origin($value) {
  303. -webkit-background-origin: $value;
  304. background-origin: $value; /* IE9+, Other */
  305. }
  306. @mixin background-size($value) {
  307. -webkit-background-size: $value; /* Chrome, iOS, Safari */
  308. -moz-background-size: $value; /* Firefox 3.6~4.0 */
  309. -o-background-size: $value; /* Opera 9.5 */
  310. background-size: $value; /* IE9+, New */
  311. }
  312. // Column
  313. @mixin column-count($value) {
  314. -webkit-column-count: $value; /* Chrome, Safari, Android, Blackberry */
  315. -moz-column-count: $value; /* Firefox 34+ */
  316. column-count: $value; /* IE 10+, Opera 11.1+, New */
  317. }
  318. @mixin column-gap($value) {
  319. -webkit-column-gap: $value; /* Chrome, Safari, Android, Blackberry */
  320. -moz-column-gap: $value; /* Firefox 34+ */
  321. column-gap: $value; /* IE 10+, Opera 11.1+, New */
  322. }
  323. @mixin column-rule($value) {
  324. -webkit-column-rule: $value; /* Chrome, Safari, Android, Blackberry */
  325. -moz-column-rule: $value; /* Firefox 34+ */
  326. column-rule: $value; /* IE 10+, Opera 11.1+, New */
  327. }
  328. @mixin column-rule-color($value) {
  329. -webkit-column-rule-color: $value; /* Chrome, Safari, Android, Blackberry */
  330. -moz-column-rule-color: $value; /* Firefox 34+ */
  331. column-rule-color: $value; /* IE 10+, Opera 11.1+, New */
  332. }
  333. @mixin column-rule-style($value) {
  334. -webkit-column-rule-style: $value; /* Chrome, Safari, Android, Blackberry */
  335. -moz-column-rule-style: $value; /* Firefox 34+ */
  336. column-rule-style: $value; /* IE 10+, Opera 11.1+, New */
  337. }
  338. @mixin column-rule-width($value) {
  339. -webkit-column-rule-width: $value; /* Chrome, Safari, Android, Blackberry */
  340. -moz-column-rule-width: $value; /* Firefox 34+ */
  341. column-rule-width: $value; /* IE 10+, Opera 11.1+, New */
  342. }
  343. @mixin column-fill($value) {
  344. -webkit-column-fill: $value; /* None yet */
  345. -moz-column-fill: $value; /* Firefox 13.0+ */
  346. column-fill: $value; /* None yet / Non-standard */
  347. }
  348. @mixin column-span($value) {
  349. -webkit-column-span: $value; /* Safari, Chrome, iOS 7.0+, Android, Opera 26+ */
  350. -moz-column-span: $value; /* Firefox 34+ */
  351. column-span: $value; /* IE10+, Opera Mini */
  352. }
  353. @mixin column-width($value) {
  354. -webkit-column-width: $value; /* Safari, Chrome, iOS 7.0+, Android, Opera 26+ */
  355. -moz-column-width: $value; /* Firefox */
  356. column-width: $value; /* IE10+, Opera */
  357. }
  358. // columns: column-width column-count;
  359. @mixin columns($value) {
  360. -webkit-columns: $value; /* Safari, Chrome, iOS 7.0+, Android, Opera 26+ */
  361. -moz-columns: $value; /* Firefox */
  362. columns: $value; /* IE10+, Opera */
  363. }
  364. // clip-path
  365. @mixin clip-path($value) {
  366. -webkit-clip-path: $value; /* Chrome, iOS, Safari */
  367. clip-path: $value;
  368. }
  369. // display
  370. @mixin display-grid() {
  371. display: -ms-grid; /* IE 10 */
  372. display: grid; /* None yet */
  373. }
  374. @mixin display-flex() {
  375. display: -webkit-box; /* Old - iOS 6-, Safari 3.1~6, Blackberry 7 */
  376. display: -ms-flexbox; /* TWEENER - IE 10 */
  377. display: -webkit-flex; /* New - Safari 6.1+. iOS 7.1+, Blackberry 10 */
  378. display: flex; /* New, Spec - Firefox, Chrome, Opera */
  379. }
  380. @mixin inline-flex($value) {
  381. -webkit-inline-flex: $value; /* Chrome 21.0+ */
  382. inline-flex: $value; /* Firefox 20+, Opera 12.5 */
  383. }
  384. @mixin flex($value) {
  385. -webkit-box-flex: $value; /* Old - iOS 6-, Safari 3.1~6 */
  386. -webkit-flex: $value; /* Safari 6.1+. iOS 7.1+, Blackberry 10 */
  387. -ms-flex: $value; /* IE 10 */
  388. flex: $value; /* New, Spec - Firefox, Chrome, Opera */
  389. }
  390. @mixin flex-direction($value) {
  391. -webkit-flex-direction: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */
  392. flex-direction: $value; /* Firefox 28+, IE11, Opera 12.10 */
  393. }
  394. @mixin flex-basis($value) {
  395. -webkit-flex-basis: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */
  396. flex-basis: $value; /* Firefox 22+, IE11, Opera 12.10 */
  397. }
  398. @mixin flex-flow($value) {
  399. -webkit-flex-flow: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */
  400. flex-flow: $value; /* Firefox 28+, IE11, Opera 12.10 */
  401. }
  402. @mixin flex-grow($value) {
  403. -webkit-flex-grow: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */
  404. flex-grow: $value; /* Firefox 20+, Opera 12.10, IE Not supported. */
  405. }
  406. @mixin flex-shrink($value) {
  407. -webkit-flex-shrink: $value; /* Chrome 21.0+, But Safari & Android & iOS Not supported. */
  408. flex-shrink: $value; /* Firefox 20+, Opera 12.10, IE Not supported. */
  409. }
  410. @mixin flex-wrap($value) {
  411. -webkit-flex-wrap: $value; /* Safari 6.1+, Chrome 21.0+, Android 4.4+, iOS 7.0+ */
  412. flex-wrap: $value; /* Firefox 28+, IE11, Opera 12.10 */
  413. }
  414. @mixin order($value) {
  415. -webkit-order: $value; /* Chrome 21+, Safari Not supported. */
  416. -ms-flex-order: $value; /* IE 10.0 */
  417. order: $value; /* Firefox 20+, Opera 12.10 */
  418. }
  419. // flow
  420. @mixin flow-into($value) {
  421. -webkit-flow-into: $value; /* Safari 7.1+, iOS Safari 7.1+ */
  422. -ms-flow-into: $value; /* IE10+ */
  423. flow-into: $value; /* None yet */
  424. }
  425. @mixin flow-from($value) {
  426. -webkit-flow-from: $value; /* Safari 7.1+, iOS Safari 7.1+ */
  427. -ms-flow-from: $value; /* IE10+ */
  428. flow-from: $value; /* None yet */
  429. }
  430. // filter
  431. @mixin filter($value) {
  432. -webkit-filter: $value; /* Chrome 23+, Safari 6.0+, Blackberry 10.0+ */
  433. filter: $value; /* None yet */
  434. }
  435. // filter blur
  436. @mixin filter-blur($value : 10px, $ie-value : 10) {
  437. filter: progid:DXImageTransform.Microsoft.Blur(PixelRadius=#{$ie-value}, MakeShadow=false); /* IE6~IE9 */
  438. -webkit-filter: blur($value); /* Chrome, Opera, iOS, Safari */
  439. -moz-filter: blur($value); /* Firefox(Old) */
  440. -ms-filter: blur($value);
  441. filter: blur($value);
  442. }
  443. @mixin font-kerning($value) {
  444. -webkit-font-kerning: $value;
  445. font-kerning: $value;
  446. }
  447. // font-feature-settings
  448. @mixin font-feature-settings($value) {
  449. -webkit-font-feature-settings: $value; /* Chrome 16-26, Blackberry 10 */
  450. -moz-font-feature-settings: $value; /* Firefox 4-21 */
  451. font-feature-settings: $value; /* IE 10, Safari 4.0-6.0 */
  452. }
  453. @mixin font-variant-ligatures($value) {
  454. -webkit-font-variant-ligatures: $value;
  455. font-variant-ligatures: $value;
  456. }
  457. // hyphens
  458. @mixin hyphens($value : auto) {
  459. // Chrome 29- and Android 4.0 Browser support "-webkit-hyphens: none", but not the "auto" property.
  460. -webkit-hyphens: $value; /* Safari 5.1+, Chrome */
  461. -moz-hyphens: $value; /* Firefox 6.0+ */
  462. -ms-hyphens: $value; /* IE 10+ */
  463. hyphens: $value; /* None yet */
  464. }
  465. @mixin justify-content($value) {
  466. -webkit-justify-content: $value; /* Chrome 21+, Safari Not supported. */
  467. justify-content: $value; /* Firefox 20+, Opera 12.10, IE Not supported. */
  468. }
  469. // line
  470. @mixin line-break($value) {
  471. -webkit-line-break: $value;
  472. line-break: $value;
  473. }
  474. // margin
  475. @mixin margin-start($value) {
  476. -webkit-margin-start: $value; /* Safari 3.0+, Chrome */
  477. -moz-margin-start: $value; /* Firefox 1.0+ */
  478. margin-start: $value; /* None yet / Non-standard */
  479. }
  480. @mixin margin-end($value) {
  481. -webkit-margin-end: $value; /* Safari 3.0+, Chrome */
  482. -moz-margin-end: $value; /* Firefox 1.0+ */
  483. margin-end: $value; /* None yet / Non-standard */
  484. }
  485. // mask
  486. @mixin mask-image($value) {
  487. -webkit-mask-image: $value; /* Chrome, iOS, Safari */
  488. mask-image: $value; /* None yet / Non-standard */
  489. }
  490. @mixin mask-size($value) {
  491. -webkit-mask-size: $value; /* Chrome, iOS, Safari */
  492. mask-size: $value; /* None yet / Non-standard */
  493. }
  494. @mixin mask-clip($value) {
  495. -webkit-mask-clip: $value; /* Chrome, iOS, Safari */
  496. mask-clip: $value; /* None yet / Non-standard */
  497. }
  498. @mixin mask-position($value) {
  499. -webkit-mask-position: $value; /* Chrome, iOS, Safari */
  500. mask-position: $value; /* None yet / Non-standard */
  501. }
  502. @mixin mask-position-x($value) {
  503. -webkit-mask-position-x: $value; /* Chrome, iOS, Safari */
  504. mask-position-x: $value; /* None yet / Non-standard */
  505. }
  506. @mixin mask-position-y($value) {
  507. -webkit-mask-position-y: $value; /* Chrome, iOS, Safari */
  508. mask-position-y: $value; /* None yet / Non-standard */
  509. }
  510. @mixin mask-origin($value) {
  511. -webkit-mask-origin: $value; /* Chrome, iOS, Safari */
  512. mask-origin: $value; /* None yet / Non-standard */
  513. }
  514. @mixin mask-repeat($value) {
  515. -webkit-mask-repeat: $value; /* Chrome, iOS, Safari */
  516. mask-repeat: $value; /* None yet / Non-standard */
  517. }
  518. @mixin mask-attachment($value) {
  519. -webkit-mask-attachment: $value; /* Chrome, iOS, Safari */
  520. mask-attachment: $value; /* None yet / Non-standard */
  521. }
  522. @mixin mask-composite($value) {
  523. -webkit-mask-composite: $value; /* Chrome, iOS, Safari */
  524. mask-composite: $value; /* None yet / Non-standard */
  525. }
  526. @mixin mask-box-image($value) {
  527. -webkit-mask-box-image: $value; /* Chrome, iOS, Safari */
  528. mask-box-image: $value; /* None yet / Non-standard */
  529. }
  530. // opacity
  531. @mixin opacity($opacity) {
  532. opacity: $opacity; /* W3C */
  533. filter: alpha(opacity=($opacity * 100)); /* IE */
  534. }
  535. // padding
  536. @mixin padding-start($value) {
  537. -webkit-padding-start: $value; /* Safari, Chrome, WebKit */
  538. -moz-padding-start: $value; /* Firefox 3+ */
  539. padding-start: $value;
  540. }
  541. @mixin padding-end($value) {
  542. -webkit-padding-end: $value; /* Safari, Chrome, WebKit */
  543. -moz-padding-end: $value; /* Firefox 3+ */
  544. padding-end: $value;
  545. }
  546. // ruby-position
  547. @mixin ruby-position($value) {
  548. -webkit-ruby-position: $value; /* Blink, Webkit */
  549. ruby-position: $value; /* Firefox, IE */
  550. }
  551. // Text
  552. @mixin text-size-adjust($value) {
  553. -webkit-text-size-adjust: $value; /* Chrome 27+ */
  554. -moz-text-size-adjust: $value; /* Firefox */
  555. text-size-adjust: $value; /* None yet */
  556. }
  557. @mixin text-align-last($value) {
  558. -webkit-text-align-last: $value; /* Chrome 35+, Safari Not supported. */
  559. -moz-text-align-last: $value; /* Firefox 12.0 */
  560. text-align-last: $value; /* IE 5.5+ */
  561. }
  562. @mixin text-justify($value) {
  563. -webkit-text-justify: $value;
  564. text-justify: $value;
  565. }
  566. @mixin text-decoration-color($value) {
  567. -webkit-text-decoration-color: $value;
  568. text-decoration-color: $value;
  569. }
  570. @mixin text-decoration-line($value) {
  571. -webkit-text-decoration-line: $value;
  572. text-decoration-line: $value;
  573. }
  574. @mixin text-decoration-style($value) {
  575. -webkit-text-decoration-style: $value;
  576. text-decoration-style: $value;
  577. }
  578. @mixin text-orientation($value) {
  579. -webkit-text-orientation: $value;
  580. text-orientation: $value;
  581. }
  582. @mixin text-underline-position($value) {
  583. -webkit-text-underline-position: $value; /* Chrome 33 not fully supported. */
  584. text-underline-position: $value; /* IE 5 not fully supported. */
  585. }
  586. @mixin text-emphasis($value) {
  587. -webkit-text-emphasis: $value; /* Blink */
  588. text-emphasis: $value; /* WebKit */
  589. }
  590. @mixin text-emphasis-color($value) {
  591. -webkit-text-emphasis-color: $value; /* Blink */
  592. text-emphasis-color: $value; /* WebKit */
  593. }
  594. @mixin text-emphasis-style($value) {
  595. -webkit-text-emphasis-style: $value; /* Blink */
  596. text-emphasis-style: $value; /* WebKit */
  597. }
  598. @mixin text-emphasis-position($value) {
  599. -webkit-text-emphasis-position: $value; /* Blink */
  600. text-emphasis-position: $value; /* WebKit */
  601. }
  602. // tab
  603. @mixin tab-size($value) {
  604. -webkit-tab-size: $value; /* Chrome 21+, Safari 6.1+ */
  605. -moz-tab-size: $value; /* Firefox 4.0 */
  606. -o-tab-size: $value; /* Opera 10.6~15 */
  607. tab-size: $value; /* Blink & Webkit */
  608. }
  609. // input-placeholder
  610. @mixin input-placeholder($seletor) {
  611. #{$seletor}::-webkit-input-placeholder {
  612. @content;
  613. }
  614. #{$seletor}:-moz-placeholder { /* Firefox 4~18 */
  615. @content;
  616. }
  617. #{$seletor}::-moz-placeholder { /* Firefox 19+ */
  618. @content;
  619. }
  620. #{$seletor}:-ms-input-placeholder { /* IE10+ */
  621. @content;
  622. }
  623. }