You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

180 lines
4.4 KiB

10 years ago
9 years ago
10 years ago
9 years ago
10 years ago
10 years ago
  1. // Vendor Prefixes
  2. //
  3. // All vendor mixins are deprecated as of v3.2.0 due to the introduction of
  4. // Autoprefixer in our Gruntfile. They have been removed in v4.
  5. // - Animations
  6. // - Backface visibility
  7. // - Box shadow
  8. // - Box sizing
  9. // - Content columns
  10. // - Hyphens
  11. // - Placeholder text
  12. // - Transformations
  13. // - Transitions
  14. // - User Select
  15. // Animations
  16. .animation(@animation) {
  17. -webkit-animation: @animation;
  18. -o-animation: @animation;
  19. animation: @animation;
  20. }
  21. .animation-name(@name) {
  22. -webkit-animation-name: @name;
  23. animation-name: @name;
  24. }
  25. .animation-duration(@duration) {
  26. -webkit-animation-duration: @duration;
  27. animation-duration: @duration;
  28. }
  29. .animation-timing-function(@timing-function) {
  30. -webkit-animation-timing-function: @timing-function;
  31. animation-timing-function: @timing-function;
  32. }
  33. .animation-delay(@delay) {
  34. -webkit-animation-delay: @delay;
  35. animation-delay: @delay;
  36. }
  37. .animation-iteration-count(@iteration-count) {
  38. -webkit-animation-iteration-count: @iteration-count;
  39. animation-iteration-count: @iteration-count;
  40. }
  41. .animation-direction(@direction) {
  42. -webkit-animation-direction: @direction;
  43. animation-direction: @direction;
  44. }
  45. .animation-fill-mode(@fill-mode) {
  46. -webkit-animation-fill-mode: @fill-mode;
  47. animation-fill-mode: @fill-mode;
  48. }
  49. // Backface visibility
  50. // Prevent browsers from flickering when using CSS 3D transforms.
  51. // Default value is `visible`, but can be changed to `hidden`
  52. .backface-visibility(@visibility) {
  53. -webkit-backface-visibility: @visibility;
  54. -moz-backface-visibility: @visibility;
  55. backface-visibility: @visibility;
  56. }
  57. // Drop shadows
  58. //
  59. // Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
  60. // supported browsers that have box shadow capabilities now support it.
  61. .box-shadow(@shadow) {
  62. box-shadow: @shadow;
  63. }
  64. // Box sizing
  65. .box-sizing(@boxmodel) {
  66. box-sizing: @boxmodel;
  67. }
  68. // CSS3 Content Columns
  69. .content-columns(@column-count; @column-gap: @grid-gutter-width) {
  70. -webkit-column-count: @column-count;
  71. -moz-column-count: @column-count;
  72. column-count: @column-count;
  73. -webkit-column-gap: @column-gap;
  74. -moz-column-gap: @column-gap;
  75. column-gap: @column-gap;
  76. }
  77. // Optional hyphenation
  78. .hyphens(@mode: auto) {
  79. word-wrap: break-word;
  80. -webkit-hyphens: @mode;
  81. -moz-hyphens: @mode;
  82. -ms-hyphens: @mode; // IE10+
  83. -o-hyphens: @mode;
  84. hyphens: @mode;
  85. }
  86. // Placeholder text
  87. .placeholder(@color: @input-color-placeholder) {
  88. &:-ms-input-placeholder { color: @color; } // Internet Explorer 10+
  89. &::placeholder { color: @color; opacity: 1; }
  90. }
  91. // Transformations
  92. .scale(@ratio) {
  93. transform: scale(@ratio);
  94. }
  95. .scale(@ratioX; @ratioY) {
  96. transform: scale(@ratioX, @ratioY);
  97. }
  98. .scaleX(@ratio) {
  99. transform: scaleX(@ratio);
  100. }
  101. .scaleY(@ratio) {
  102. -webkit-transform: scaleY(@ratio);
  103. transform: scaleY(@ratio);
  104. }
  105. .skew(@x; @y) {
  106. transform: skewX(@x) skewY(@y);
  107. }
  108. .translate(@x; @y) {
  109. transform: translate(@x, @y);
  110. }
  111. .translate3d(@x; @y; @z) {
  112. transform: translate3d(@x, @y, @z);
  113. }
  114. .rotate(@degrees) {
  115. transform: rotate(@degrees);
  116. }
  117. .rotateX(@degrees) {
  118. transform: rotateX(@degrees);
  119. }
  120. .rotateY(@degrees) {
  121. transform: rotateY(@degrees);
  122. }
  123. .perspective(@perspective) {
  124. -webkit-perspective: @perspective;
  125. -moz-perspective: @perspective;
  126. perspective: @perspective;
  127. }
  128. .perspective-origin(@perspective) {
  129. -webkit-perspective-origin: @perspective;
  130. -moz-perspective-origin: @perspective;
  131. perspective-origin: @perspective;
  132. }
  133. .transform-origin(@origin) {
  134. transform-origin: @origin;
  135. }
  136. // Transitions
  137. .transition(@transition) {
  138. transition: @transition;
  139. }
  140. .transition-property(@transition-property) {
  141. transition-property: @transition-property;
  142. }
  143. .transition-delay(@transition-delay) {
  144. transition-delay: @transition-delay;
  145. }
  146. .transition-duration(@transition-duration) {
  147. transition-duration: @transition-duration;
  148. }
  149. .transition-timing-function(@timing-function) {
  150. transition-timing-function: @timing-function;
  151. }
  152. .transition-transform(@transition) {
  153. transition: transform @transition;
  154. }
  155. // User select
  156. // For selecting text on the page
  157. .user-select(@select) {
  158. -webkit-user-select: @select;
  159. -moz-user-select: @select;
  160. -ms-user-select: @select; // IE10+
  161. user-select: @select;
  162. }