StyleSass 0.1.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (197) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +9 -0
  3. data/.rspec +2 -0
  4. data/.travis.yml +4 -0
  5. data/Gemfile +4 -0
  6. data/LICENSE.txt +21 -0
  7. data/README.md +41 -0
  8. data/Rakefile +6 -0
  9. data/StyleSass.gemspec +35 -0
  10. data/app/assets/fonts/FontAwesome.otf +0 -0
  11. data/app/assets/fonts/fontawesome-webfont.eot +0 -0
  12. data/app/assets/fonts/fontawesome-webfont.svg +640 -0
  13. data/app/assets/fonts/fontawesome-webfont.ttf +0 -0
  14. data/app/assets/fonts/fontawesome-webfont.woff +0 -0
  15. data/app/assets/fonts/fontawesome-webfont.woff2 +0 -0
  16. data/app/assets/fonts/glyphicons-halflings-regular.eot +0 -0
  17. data/app/assets/fonts/glyphicons-halflings-regular.svg +288 -0
  18. data/app/assets/fonts/glyphicons-halflings-regular.ttf +0 -0
  19. data/app/assets/fonts/glyphicons-halflings-regular.woff +0 -0
  20. data/app/assets/fonts/glyphicons-halflings-regular.woff2 +0 -0
  21. data/app/assets/javascripts/bootstrap/affix.js +162 -0
  22. data/app/assets/javascripts/bootstrap/alert.js +94 -0
  23. data/app/assets/javascripts/bootstrap/button.js +120 -0
  24. data/app/assets/javascripts/bootstrap/carousel.js +237 -0
  25. data/app/assets/javascripts/bootstrap/collapse.js +211 -0
  26. data/app/assets/javascripts/bootstrap/dropdown.js +165 -0
  27. data/app/assets/javascripts/bootstrap/modal.js +337 -0
  28. data/app/assets/javascripts/bootstrap/popover.js +108 -0
  29. data/app/assets/javascripts/bootstrap/scrollspy.js +172 -0
  30. data/app/assets/javascripts/bootstrap/tab.js +155 -0
  31. data/app/assets/javascripts/bootstrap/tooltip.js +514 -0
  32. data/app/assets/javascripts/bootstrap/transition.js +59 -0
  33. data/app/assets/javascripts/bootstrap-sprockets.js +12 -0
  34. data/app/assets/javascripts/bootstrap.js +2363 -0
  35. data/app/assets/javascripts/bootstrap.min.js +7 -0
  36. data/app/assets/stylesheets/_bootstrap-compass.scss +9 -0
  37. data/app/assets/stylesheets/_bootstrap-mincer.scss +19 -0
  38. data/app/assets/stylesheets/_bootstrap-sprockets.scss +9 -0
  39. data/app/assets/stylesheets/_bootstrap.scss +56 -0
  40. data/app/assets/stylesheets/_bourbon-deprecated-upcoming.scss +411 -0
  41. data/app/assets/stylesheets/_bourbon.scss +87 -0
  42. data/app/assets/stylesheets/_font-awesome.css.scss +2026 -0
  43. data/app/assets/stylesheets/_font-awesome.min.css.scss +4 -0
  44. data/app/assets/stylesheets/_normalize.css.scss +427 -0
  45. data/app/assets/stylesheets/addons/_border-color.scss +26 -0
  46. data/app/assets/stylesheets/addons/_border-radius.scss +48 -0
  47. data/app/assets/stylesheets/addons/_border-style.scss +25 -0
  48. data/app/assets/stylesheets/addons/_border-width.scss +25 -0
  49. data/app/assets/stylesheets/addons/_buttons.scss +64 -0
  50. data/app/assets/stylesheets/addons/_clearfix.scss +25 -0
  51. data/app/assets/stylesheets/addons/_ellipsis.scss +30 -0
  52. data/app/assets/stylesheets/addons/_font-stacks.scss +31 -0
  53. data/app/assets/stylesheets/addons/_hide-text.scss +27 -0
  54. data/app/assets/stylesheets/addons/_margin.scss +26 -0
  55. data/app/assets/stylesheets/addons/_padding.scss +26 -0
  56. data/app/assets/stylesheets/addons/_position.scss +48 -0
  57. data/app/assets/stylesheets/addons/_prefixer.scss +66 -0
  58. data/app/assets/stylesheets/addons/_retina-image.scss +25 -0
  59. data/app/assets/stylesheets/addons/_size.scss +51 -0
  60. data/app/assets/stylesheets/addons/_text-inputs.scss +113 -0
  61. data/app/assets/stylesheets/addons/_timing-functions.scss +34 -0
  62. data/app/assets/stylesheets/addons/_triangle.scss +63 -0
  63. data/app/assets/stylesheets/addons/_word-wrap.scss +29 -0
  64. data/app/assets/stylesheets/bootstrap/_alerts.scss +73 -0
  65. data/app/assets/stylesheets/bootstrap/_badges.scss +68 -0
  66. data/app/assets/stylesheets/bootstrap/_breadcrumbs.scss +28 -0
  67. data/app/assets/stylesheets/bootstrap/_button-groups.scss +244 -0
  68. data/app/assets/stylesheets/bootstrap/_buttons.scss +168 -0
  69. data/app/assets/stylesheets/bootstrap/_carousel.scss +269 -0
  70. data/app/assets/stylesheets/bootstrap/_close.scss +36 -0
  71. data/app/assets/stylesheets/bootstrap/_code.scss +69 -0
  72. data/app/assets/stylesheets/bootstrap/_component-animations.scss +37 -0
  73. data/app/assets/stylesheets/bootstrap/_dropdowns.scss +216 -0
  74. data/app/assets/stylesheets/bootstrap/_forms.scss +611 -0
  75. data/app/assets/stylesheets/bootstrap/_glyphicons.scss +307 -0
  76. data/app/assets/stylesheets/bootstrap/_grid.scss +84 -0
  77. data/app/assets/stylesheets/bootstrap/_input-groups.scss +167 -0
  78. data/app/assets/stylesheets/bootstrap/_jumbotron.scss +52 -0
  79. data/app/assets/stylesheets/bootstrap/_labels.scss +66 -0
  80. data/app/assets/stylesheets/bootstrap/_list-group.scss +130 -0
  81. data/app/assets/stylesheets/bootstrap/_media.scss +66 -0
  82. data/app/assets/stylesheets/bootstrap/_mixins.scss +40 -0
  83. data/app/assets/stylesheets/bootstrap/_modals.scss +150 -0
  84. data/app/assets/stylesheets/bootstrap/_navbar.scss +662 -0
  85. data/app/assets/stylesheets/bootstrap/_navs.scss +242 -0
  86. data/app/assets/stylesheets/bootstrap/_normalize.scss +424 -0
  87. data/app/assets/stylesheets/bootstrap/_pager.scss +54 -0
  88. data/app/assets/stylesheets/bootstrap/_pagination.scss +89 -0
  89. data/app/assets/stylesheets/bootstrap/_panels.scss +271 -0
  90. data/app/assets/stylesheets/bootstrap/_popovers.scss +131 -0
  91. data/app/assets/stylesheets/bootstrap/_print.scss +101 -0
  92. data/app/assets/stylesheets/bootstrap/_progress-bars.scss +87 -0
  93. data/app/assets/stylesheets/bootstrap/_responsive-embed.scss +35 -0
  94. data/app/assets/stylesheets/bootstrap/_responsive-utilities.scss +179 -0
  95. data/app/assets/stylesheets/bootstrap/_scaffolding.scss +161 -0
  96. data/app/assets/stylesheets/bootstrap/_tables.scss +234 -0
  97. data/app/assets/stylesheets/bootstrap/_theme.scss +291 -0
  98. data/app/assets/stylesheets/bootstrap/_thumbnails.scss +38 -0
  99. data/app/assets/stylesheets/bootstrap/_tooltip.scss +101 -0
  100. data/app/assets/stylesheets/bootstrap/_type.scss +298 -0
  101. data/app/assets/stylesheets/bootstrap/_utilities.scss +55 -0
  102. data/app/assets/stylesheets/bootstrap/_variables.scss +872 -0
  103. data/app/assets/stylesheets/bootstrap/_wells.scss +29 -0
  104. data/app/assets/stylesheets/bootstrap/mixins/_alerts.scss +14 -0
  105. data/app/assets/stylesheets/bootstrap/mixins/_background-variant.scss +12 -0
  106. data/app/assets/stylesheets/bootstrap/mixins/_border-radius.scss +18 -0
  107. data/app/assets/stylesheets/bootstrap/mixins/_buttons.scss +68 -0
  108. data/app/assets/stylesheets/bootstrap/mixins/_center-block.scss +7 -0
  109. data/app/assets/stylesheets/bootstrap/mixins/_clearfix.scss +22 -0
  110. data/app/assets/stylesheets/bootstrap/mixins/_forms.scss +88 -0
  111. data/app/assets/stylesheets/bootstrap/mixins/_gradients.scss +58 -0
  112. data/app/assets/stylesheets/bootstrap/mixins/_grid-framework.scss +81 -0
  113. data/app/assets/stylesheets/bootstrap/mixins/_grid.scss +122 -0
  114. data/app/assets/stylesheets/bootstrap/mixins/_hide-text.scss +21 -0
  115. data/app/assets/stylesheets/bootstrap/mixins/_image.scss +33 -0
  116. data/app/assets/stylesheets/bootstrap/mixins/_labels.scss +12 -0
  117. data/app/assets/stylesheets/bootstrap/mixins/_list-group.scss +32 -0
  118. data/app/assets/stylesheets/bootstrap/mixins/_nav-divider.scss +10 -0
  119. data/app/assets/stylesheets/bootstrap/mixins/_nav-vertical-align.scss +9 -0
  120. data/app/assets/stylesheets/bootstrap/mixins/_opacity.scss +8 -0
  121. data/app/assets/stylesheets/bootstrap/mixins/_pagination.scss +24 -0
  122. data/app/assets/stylesheets/bootstrap/mixins/_panels.scss +24 -0
  123. data/app/assets/stylesheets/bootstrap/mixins/_progress-bar.scss +10 -0
  124. data/app/assets/stylesheets/bootstrap/mixins/_reset-filter.scss +8 -0
  125. data/app/assets/stylesheets/bootstrap/mixins/_reset-text.scss +18 -0
  126. data/app/assets/stylesheets/bootstrap/mixins/_resize.scss +6 -0
  127. data/app/assets/stylesheets/bootstrap/mixins/_responsive-visibility.scss +21 -0
  128. data/app/assets/stylesheets/bootstrap/mixins/_size.scss +10 -0
  129. data/app/assets/stylesheets/bootstrap/mixins/_tab-focus.scss +9 -0
  130. data/app/assets/stylesheets/bootstrap/mixins/_table-row.scss +28 -0
  131. data/app/assets/stylesheets/bootstrap/mixins/_text-emphasis.scss +12 -0
  132. data/app/assets/stylesheets/bootstrap/mixins/_text-overflow.scss +8 -0
  133. data/app/assets/stylesheets/bootstrap/mixins/_vendor-prefixes.scss +222 -0
  134. data/app/assets/stylesheets/css3/_animation.scss +43 -0
  135. data/app/assets/stylesheets/css3/_appearance.scss +3 -0
  136. data/app/assets/stylesheets/css3/_backface-visibility.scss +3 -0
  137. data/app/assets/stylesheets/css3/_background-image.scss +42 -0
  138. data/app/assets/stylesheets/css3/_background.scss +55 -0
  139. data/app/assets/stylesheets/css3/_border-image.scss +59 -0
  140. data/app/assets/stylesheets/css3/_calc.scss +4 -0
  141. data/app/assets/stylesheets/css3/_columns.scss +47 -0
  142. data/app/assets/stylesheets/css3/_filter.scss +4 -0
  143. data/app/assets/stylesheets/css3/_flex-box.scss +287 -0
  144. data/app/assets/stylesheets/css3/_font-face.scss +24 -0
  145. data/app/assets/stylesheets/css3/_font-feature-settings.scss +4 -0
  146. data/app/assets/stylesheets/css3/_hidpi-media-query.scss +10 -0
  147. data/app/assets/stylesheets/css3/_hyphens.scss +4 -0
  148. data/app/assets/stylesheets/css3/_image-rendering.scss +14 -0
  149. data/app/assets/stylesheets/css3/_keyframes.scss +36 -0
  150. data/app/assets/stylesheets/css3/_linear-gradient.scss +38 -0
  151. data/app/assets/stylesheets/css3/_perspective.scss +8 -0
  152. data/app/assets/stylesheets/css3/_placeholder.scss +8 -0
  153. data/app/assets/stylesheets/css3/_radial-gradient.scss +39 -0
  154. data/app/assets/stylesheets/css3/_selection.scss +42 -0
  155. data/app/assets/stylesheets/css3/_text-decoration.scss +19 -0
  156. data/app/assets/stylesheets/css3/_transform.scss +15 -0
  157. data/app/assets/stylesheets/css3/_transition.scss +71 -0
  158. data/app/assets/stylesheets/css3/_user-select.scss +3 -0
  159. data/app/assets/stylesheets/functions/_assign-inputs.scss +11 -0
  160. data/app/assets/stylesheets/functions/_contains-falsy.scss +20 -0
  161. data/app/assets/stylesheets/functions/_contains.scss +26 -0
  162. data/app/assets/stylesheets/functions/_is-length.scss +11 -0
  163. data/app/assets/stylesheets/functions/_is-light.scss +21 -0
  164. data/app/assets/stylesheets/functions/_is-number.scss +11 -0
  165. data/app/assets/stylesheets/functions/_is-size.scss +13 -0
  166. data/app/assets/stylesheets/functions/_modular-scale.scss +69 -0
  167. data/app/assets/stylesheets/functions/_px-to-em.scss +13 -0
  168. data/app/assets/stylesheets/functions/_px-to-rem.scss +15 -0
  169. data/app/assets/stylesheets/functions/_shade.scss +24 -0
  170. data/app/assets/stylesheets/functions/_strip-units.scss +17 -0
  171. data/app/assets/stylesheets/functions/_tint.scss +24 -0
  172. data/app/assets/stylesheets/functions/_transition-property-name.scss +22 -0
  173. data/app/assets/stylesheets/functions/_unpack.scss +27 -0
  174. data/app/assets/stylesheets/helpers/_convert-units.scss +21 -0
  175. data/app/assets/stylesheets/helpers/_directional-values.scss +96 -0
  176. data/app/assets/stylesheets/helpers/_font-source-declaration.scss +43 -0
  177. data/app/assets/stylesheets/helpers/_gradient-positions-parser.scss +13 -0
  178. data/app/assets/stylesheets/helpers/_linear-angle-parser.scss +25 -0
  179. data/app/assets/stylesheets/helpers/_linear-gradient-parser.scss +41 -0
  180. data/app/assets/stylesheets/helpers/_linear-positions-parser.scss +61 -0
  181. data/app/assets/stylesheets/helpers/_linear-side-corner-parser.scss +31 -0
  182. data/app/assets/stylesheets/helpers/_radial-arg-parser.scss +69 -0
  183. data/app/assets/stylesheets/helpers/_radial-gradient-parser.scss +50 -0
  184. data/app/assets/stylesheets/helpers/_radial-positions-parser.scss +18 -0
  185. data/app/assets/stylesheets/helpers/_render-gradients.scss +26 -0
  186. data/app/assets/stylesheets/helpers/_shape-size-stripper.scss +10 -0
  187. data/app/assets/stylesheets/helpers/_str-to-num.scss +50 -0
  188. data/app/assets/stylesheets/settings/_asset-pipeline.scss +7 -0
  189. data/app/assets/stylesheets/settings/_prefixer.scss +9 -0
  190. data/app/assets/stylesheets/settings/_px-to-em.scss +1 -0
  191. data/bin/console +14 -0
  192. data/bin/setup +8 -0
  193. data/lib/StyleSass/engine.rb +5 -0
  194. data/lib/StyleSass/version.rb +3 -0
  195. data/lib/StyleSass.rb +2 -0
  196. data/lib/generators/style_sass/install_generator.rb +13 -0
  197. metadata +295 -0
@@ -0,0 +1,24 @@
1
+ // Pagination
2
+
3
+ @mixin pagination-size($padding-vertical, $padding-horizontal, $font-size, $line-height, $border-radius) {
4
+ > li {
5
+ > a,
6
+ > span {
7
+ padding: $padding-vertical $padding-horizontal;
8
+ font-size: $font-size;
9
+ line-height: $line-height;
10
+ }
11
+ &:first-child {
12
+ > a,
13
+ > span {
14
+ @include border-left-radius($border-radius);
15
+ }
16
+ }
17
+ &:last-child {
18
+ > a,
19
+ > span {
20
+ @include border-right-radius($border-radius);
21
+ }
22
+ }
23
+ }
24
+ }
@@ -0,0 +1,24 @@
1
+ // Panels
2
+
3
+ @mixin panel-variant($border, $heading-text-color, $heading-bg-color, $heading-border) {
4
+ border-color: $border;
5
+
6
+ & > .panel-heading {
7
+ color: $heading-text-color;
8
+ background-color: $heading-bg-color;
9
+ border-color: $heading-border;
10
+
11
+ + .panel-collapse > .panel-body {
12
+ border-top-color: $border;
13
+ }
14
+ .badge {
15
+ color: $heading-bg-color;
16
+ background-color: $heading-text-color;
17
+ }
18
+ }
19
+ & > .panel-footer {
20
+ + .panel-collapse > .panel-body {
21
+ border-bottom-color: $border;
22
+ }
23
+ }
24
+ }
@@ -0,0 +1,10 @@
1
+ // Progress bars
2
+
3
+ @mixin progress-bar-variant($color) {
4
+ background-color: $color;
5
+
6
+ // Deprecated parent class requirement as of v3.2.0
7
+ .progress-striped & {
8
+ @include gradient-striped;
9
+ }
10
+ }
@@ -0,0 +1,8 @@
1
+ // Reset filters for IE
2
+ //
3
+ // When you need to remove a gradient background, do not forget to use this to reset
4
+ // the IE filter for IE9 and below.
5
+
6
+ @mixin reset-filter() {
7
+ filter: progid:DXImageTransform.Microsoft.gradient(enabled = false);
8
+ }
@@ -0,0 +1,18 @@
1
+ @mixin reset-text() {
2
+ font-family: $font-family-base;
3
+ // We deliberately do NOT reset font-size.
4
+ font-style: normal;
5
+ font-weight: normal;
6
+ letter-spacing: normal;
7
+ line-break: auto;
8
+ line-height: $line-height-base;
9
+ text-align: left; // Fallback for where `start` is not supported
10
+ text-align: start;
11
+ text-decoration: none;
12
+ text-shadow: none;
13
+ text-transform: none;
14
+ white-space: normal;
15
+ word-break: normal;
16
+ word-spacing: normal;
17
+ word-wrap: normal;
18
+ }
@@ -0,0 +1,6 @@
1
+ // Resize anything
2
+
3
+ @mixin resizable($direction) {
4
+ resize: $direction; // Options: horizontal, vertical, both
5
+ overflow: auto; // Per CSS3 UI, `resize` only applies when `overflow` isn't `visible`
6
+ }
@@ -0,0 +1,21 @@
1
+ // Responsive utilities
2
+
3
+ //
4
+ // More easily include all the states for responsive-utilities.less.
5
+ // [converter] $parent hack
6
+ @mixin responsive-visibility($parent) {
7
+ #{$parent} {
8
+ display: block !important;
9
+ }
10
+ table#{$parent} { display: table !important; }
11
+ tr#{$parent} { display: table-row !important; }
12
+ th#{$parent},
13
+ td#{$parent} { display: table-cell !important; }
14
+ }
15
+
16
+ // [converter] $parent hack
17
+ @mixin responsive-invisibility($parent) {
18
+ #{$parent} {
19
+ display: none !important;
20
+ }
21
+ }
@@ -0,0 +1,10 @@
1
+ // Sizing shortcuts
2
+
3
+ @mixin size($width, $height) {
4
+ width: $width;
5
+ height: $height;
6
+ }
7
+
8
+ @mixin square($size) {
9
+ @include size($size, $size);
10
+ }
@@ -0,0 +1,9 @@
1
+ // WebKit-style focus
2
+
3
+ @mixin tab-focus() {
4
+ // Default
5
+ outline: thin dotted;
6
+ // WebKit
7
+ outline: 5px auto -webkit-focus-ring-color;
8
+ outline-offset: -2px;
9
+ }
@@ -0,0 +1,28 @@
1
+ // Tables
2
+
3
+ @mixin table-row-variant($state, $background) {
4
+ // Exact selectors below required to override `.table-striped` and prevent
5
+ // inheritance to nested tables.
6
+ .table > thead > tr,
7
+ .table > tbody > tr,
8
+ .table > tfoot > tr {
9
+ > td.#{$state},
10
+ > th.#{$state},
11
+ &.#{$state} > td,
12
+ &.#{$state} > th {
13
+ background-color: $background;
14
+ }
15
+ }
16
+
17
+ // Hover states for `.table-hover`
18
+ // Note: this is not available for cells or rows within `thead` or `tfoot`.
19
+ .table-hover > tbody > tr {
20
+ > td.#{$state}:hover,
21
+ > th.#{$state}:hover,
22
+ &.#{$state}:hover > td,
23
+ &:hover > .#{$state},
24
+ &.#{$state}:hover > th {
25
+ background-color: darken($background, 5%);
26
+ }
27
+ }
28
+ }
@@ -0,0 +1,12 @@
1
+ // Typography
2
+
3
+ // [converter] $parent hack
4
+ @mixin text-emphasis-variant($parent, $color) {
5
+ #{$parent} {
6
+ color: $color;
7
+ }
8
+ a#{$parent}:hover,
9
+ a#{$parent}:focus {
10
+ color: darken($color, 10%);
11
+ }
12
+ }
@@ -0,0 +1,8 @@
1
+ // Text overflow
2
+ // Requires inline-block or block for proper styling
3
+
4
+ @mixin text-overflow() {
5
+ overflow: hidden;
6
+ text-overflow: ellipsis;
7
+ white-space: nowrap;
8
+ }
@@ -0,0 +1,222 @@
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 will be removed in v4.
5
+
6
+ // - Animations
7
+ // - Backface visibility
8
+ // - Box shadow
9
+ // - Box sizing
10
+ // - Content columns
11
+ // - Hyphens
12
+ // - Placeholder text
13
+ // - Transformations
14
+ // - Transitions
15
+ // - User Select
16
+
17
+
18
+ // Animations
19
+ @mixin animation($animation) {
20
+ -webkit-animation: $animation;
21
+ -o-animation: $animation;
22
+ animation: $animation;
23
+ }
24
+ @mixin animation-name($name) {
25
+ -webkit-animation-name: $name;
26
+ animation-name: $name;
27
+ }
28
+ @mixin animation-duration($duration) {
29
+ -webkit-animation-duration: $duration;
30
+ animation-duration: $duration;
31
+ }
32
+ @mixin animation-timing-function($timing-function) {
33
+ -webkit-animation-timing-function: $timing-function;
34
+ animation-timing-function: $timing-function;
35
+ }
36
+ @mixin animation-delay($delay) {
37
+ -webkit-animation-delay: $delay;
38
+ animation-delay: $delay;
39
+ }
40
+ @mixin animation-iteration-count($iteration-count) {
41
+ -webkit-animation-iteration-count: $iteration-count;
42
+ animation-iteration-count: $iteration-count;
43
+ }
44
+ @mixin animation-direction($direction) {
45
+ -webkit-animation-direction: $direction;
46
+ animation-direction: $direction;
47
+ }
48
+ @mixin animation-fill-mode($fill-mode) {
49
+ -webkit-animation-fill-mode: $fill-mode;
50
+ animation-fill-mode: $fill-mode;
51
+ }
52
+
53
+ // Backface visibility
54
+ // Prevent browsers from flickering when using CSS 3D transforms.
55
+ // Default value is `visible`, but can be changed to `hidden`
56
+
57
+ @mixin backface-visibility($visibility){
58
+ -webkit-backface-visibility: $visibility;
59
+ -moz-backface-visibility: $visibility;
60
+ backface-visibility: $visibility;
61
+ }
62
+
63
+ // Drop shadows
64
+ //
65
+ // Note: Deprecated `.box-shadow()` as of v3.1.0 since all of Bootstrap's
66
+ // supported browsers that have box shadow capabilities now support it.
67
+
68
+ @mixin box-shadow($shadow...) {
69
+ -webkit-box-shadow: $shadow; // iOS <4.3 & Android <4.1
70
+ box-shadow: $shadow;
71
+ }
72
+
73
+ // Box sizing
74
+ @mixin box-sizing($boxmodel) {
75
+ -webkit-box-sizing: $boxmodel;
76
+ -moz-box-sizing: $boxmodel;
77
+ box-sizing: $boxmodel;
78
+ }
79
+
80
+ // CSS3 Content Columns
81
+ @mixin content-columns($column-count, $column-gap: $grid-gutter-width) {
82
+ -webkit-column-count: $column-count;
83
+ -moz-column-count: $column-count;
84
+ column-count: $column-count;
85
+ -webkit-column-gap: $column-gap;
86
+ -moz-column-gap: $column-gap;
87
+ column-gap: $column-gap;
88
+ }
89
+
90
+ // Optional hyphenation
91
+ @mixin hyphens($mode: auto) {
92
+ word-wrap: break-word;
93
+ -webkit-hyphens: $mode;
94
+ -moz-hyphens: $mode;
95
+ -ms-hyphens: $mode; // IE10+
96
+ -o-hyphens: $mode;
97
+ hyphens: $mode;
98
+ }
99
+
100
+ // Placeholder text
101
+ @mixin placeholder($color: $input-color-placeholder) {
102
+ // Firefox
103
+ &::-moz-placeholder {
104
+ color: $color;
105
+ opacity: 1; // Override Firefox's unusual default opacity; see https://github.com/twbs/bootstrap/pull/11526
106
+ }
107
+ &:-ms-input-placeholder { color: $color; } // Internet Explorer 10+
108
+ &::-webkit-input-placeholder { color: $color; } // Safari and Chrome
109
+ }
110
+
111
+ // Transformations
112
+ @mixin scale($ratio...) {
113
+ -webkit-transform: scale($ratio);
114
+ -ms-transform: scale($ratio); // IE9 only
115
+ -o-transform: scale($ratio);
116
+ transform: scale($ratio);
117
+ }
118
+
119
+ @mixin scaleX($ratio) {
120
+ -webkit-transform: scaleX($ratio);
121
+ -ms-transform: scaleX($ratio); // IE9 only
122
+ -o-transform: scaleX($ratio);
123
+ transform: scaleX($ratio);
124
+ }
125
+ @mixin scaleY($ratio) {
126
+ -webkit-transform: scaleY($ratio);
127
+ -ms-transform: scaleY($ratio); // IE9 only
128
+ -o-transform: scaleY($ratio);
129
+ transform: scaleY($ratio);
130
+ }
131
+ @mixin skew($x, $y) {
132
+ -webkit-transform: skewX($x) skewY($y);
133
+ -ms-transform: skewX($x) skewY($y); // See https://github.com/twbs/bootstrap/issues/4885; IE9+
134
+ -o-transform: skewX($x) skewY($y);
135
+ transform: skewX($x) skewY($y);
136
+ }
137
+ @mixin translate($x, $y) {
138
+ -webkit-transform: translate($x, $y);
139
+ -ms-transform: translate($x, $y); // IE9 only
140
+ -o-transform: translate($x, $y);
141
+ transform: translate($x, $y);
142
+ }
143
+ @mixin translate3d($x, $y, $z) {
144
+ -webkit-transform: translate3d($x, $y, $z);
145
+ transform: translate3d($x, $y, $z);
146
+ }
147
+ @mixin rotate($degrees) {
148
+ -webkit-transform: rotate($degrees);
149
+ -ms-transform: rotate($degrees); // IE9 only
150
+ -o-transform: rotate($degrees);
151
+ transform: rotate($degrees);
152
+ }
153
+ @mixin rotateX($degrees) {
154
+ -webkit-transform: rotateX($degrees);
155
+ -ms-transform: rotateX($degrees); // IE9 only
156
+ -o-transform: rotateX($degrees);
157
+ transform: rotateX($degrees);
158
+ }
159
+ @mixin rotateY($degrees) {
160
+ -webkit-transform: rotateY($degrees);
161
+ -ms-transform: rotateY($degrees); // IE9 only
162
+ -o-transform: rotateY($degrees);
163
+ transform: rotateY($degrees);
164
+ }
165
+ @mixin perspective($perspective) {
166
+ -webkit-perspective: $perspective;
167
+ -moz-perspective: $perspective;
168
+ perspective: $perspective;
169
+ }
170
+ @mixin perspective-origin($perspective) {
171
+ -webkit-perspective-origin: $perspective;
172
+ -moz-perspective-origin: $perspective;
173
+ perspective-origin: $perspective;
174
+ }
175
+ @mixin transform-origin($origin) {
176
+ -webkit-transform-origin: $origin;
177
+ -moz-transform-origin: $origin;
178
+ -ms-transform-origin: $origin; // IE9 only
179
+ transform-origin: $origin;
180
+ }
181
+
182
+
183
+ // Transitions
184
+
185
+ @mixin transition($transition...) {
186
+ -webkit-transition: $transition;
187
+ -o-transition: $transition;
188
+ transition: $transition;
189
+ }
190
+ @mixin transition-property($transition-property...) {
191
+ -webkit-transition-property: $transition-property;
192
+ transition-property: $transition-property;
193
+ }
194
+ @mixin transition-delay($transition-delay) {
195
+ -webkit-transition-delay: $transition-delay;
196
+ transition-delay: $transition-delay;
197
+ }
198
+ @mixin transition-duration($transition-duration...) {
199
+ -webkit-transition-duration: $transition-duration;
200
+ transition-duration: $transition-duration;
201
+ }
202
+ @mixin transition-timing-function($timing-function) {
203
+ -webkit-transition-timing-function: $timing-function;
204
+ transition-timing-function: $timing-function;
205
+ }
206
+ @mixin transition-transform($transition...) {
207
+ -webkit-transition: -webkit-transform $transition;
208
+ -moz-transition: -moz-transform $transition;
209
+ -o-transition: -o-transform $transition;
210
+ transition: transform $transition;
211
+ }
212
+
213
+
214
+ // User select
215
+ // For selecting text on the page
216
+
217
+ @mixin user-select($select) {
218
+ -webkit-user-select: $select;
219
+ -moz-user-select: $select;
220
+ -ms-user-select: $select; // IE10+
221
+ user-select: $select;
222
+ }
@@ -0,0 +1,43 @@
1
+ // http://www.w3.org/TR/css3-animations/#the-animation-name-property-
2
+ // Each of these mixins support comma separated lists of values, which allows different transitions for individual properties to be described in a single style rule. Each value in the list corresponds to the value at that same position in the other properties.
3
+
4
+ @mixin animation($animations...) {
5
+ @include prefixer(animation, $animations, webkit moz spec);
6
+ }
7
+
8
+ @mixin animation-name($names...) {
9
+ @include prefixer(animation-name, $names, webkit moz spec);
10
+ }
11
+
12
+ @mixin animation-duration($times...) {
13
+ @include prefixer(animation-duration, $times, webkit moz spec);
14
+ }
15
+
16
+ @mixin animation-timing-function($motions...) {
17
+ // ease | linear | ease-in | ease-out | ease-in-out
18
+ @include prefixer(animation-timing-function, $motions, webkit moz spec);
19
+ }
20
+
21
+ @mixin animation-iteration-count($values...) {
22
+ // infinite | <number>
23
+ @include prefixer(animation-iteration-count, $values, webkit moz spec);
24
+ }
25
+
26
+ @mixin animation-direction($directions...) {
27
+ // normal | alternate
28
+ @include prefixer(animation-direction, $directions, webkit moz spec);
29
+ }
30
+
31
+ @mixin animation-play-state($states...) {
32
+ // running | paused
33
+ @include prefixer(animation-play-state, $states, webkit moz spec);
34
+ }
35
+
36
+ @mixin animation-delay($times...) {
37
+ @include prefixer(animation-delay, $times, webkit moz spec);
38
+ }
39
+
40
+ @mixin animation-fill-mode($modes...) {
41
+ // none | forwards | backwards | both
42
+ @include prefixer(animation-fill-mode, $modes, webkit moz spec);
43
+ }
@@ -0,0 +1,3 @@
1
+ @mixin appearance($value) {
2
+ @include prefixer(appearance, $value, webkit moz ms o spec);
3
+ }
@@ -0,0 +1,3 @@
1
+ @mixin backface-visibility($visibility) {
2
+ @include prefixer(backface-visibility, $visibility, webkit spec);
3
+ }
@@ -0,0 +1,42 @@
1
+ //************************************************************************//
2
+ // Background-image property for adding multiple background images with
3
+ // gradients, or for stringing multiple gradients together.
4
+ //************************************************************************//
5
+
6
+ @mixin background-image($images...) {
7
+ $webkit-images: ();
8
+ $spec-images: ();
9
+
10
+ @each $image in $images {
11
+ $webkit-image: ();
12
+ $spec-image: ();
13
+
14
+ @if (type-of($image) == string) {
15
+ $url-str: str-slice($image, 1, 3);
16
+ $gradient-type: str-slice($image, 1, 6);
17
+
18
+ @if $url-str == "url" {
19
+ $webkit-image: $image;
20
+ $spec-image: $image;
21
+ }
22
+
23
+ @else if $gradient-type == "linear" {
24
+ $gradients: _linear-gradient-parser($image);
25
+ $webkit-image: map-get($gradients, webkit-image);
26
+ $spec-image: map-get($gradients, spec-image);
27
+ }
28
+
29
+ @else if $gradient-type == "radial" {
30
+ $gradients: _radial-gradient-parser($image);
31
+ $webkit-image: map-get($gradients, webkit-image);
32
+ $spec-image: map-get($gradients, spec-image);
33
+ }
34
+ }
35
+
36
+ $webkit-images: append($webkit-images, $webkit-image, comma);
37
+ $spec-images: append($spec-images, $spec-image, comma);
38
+ }
39
+
40
+ background-image: $webkit-images;
41
+ background-image: $spec-images;
42
+ }
@@ -0,0 +1,55 @@
1
+ //************************************************************************//
2
+ // Background property for adding multiple backgrounds using shorthand
3
+ // notation.
4
+ //************************************************************************//
5
+
6
+ @mixin background($backgrounds...) {
7
+ $webkit-backgrounds: ();
8
+ $spec-backgrounds: ();
9
+
10
+ @each $background in $backgrounds {
11
+ $webkit-background: ();
12
+ $spec-background: ();
13
+ $background-type: type-of($background);
14
+
15
+ @if $background-type == string or $background-type == list {
16
+ $background-str: if($background-type == list, nth($background, 1), $background);
17
+
18
+ $url-str: str-slice($background-str, 1, 3);
19
+ $gradient-type: str-slice($background-str, 1, 6);
20
+
21
+ @if $url-str == "url" {
22
+ $webkit-background: $background;
23
+ $spec-background: $background;
24
+ }
25
+
26
+ @else if $gradient-type == "linear" {
27
+ $gradients: _linear-gradient-parser("#{$background}");
28
+ $webkit-background: map-get($gradients, webkit-image);
29
+ $spec-background: map-get($gradients, spec-image);
30
+ }
31
+
32
+ @else if $gradient-type == "radial" {
33
+ $gradients: _radial-gradient-parser("#{$background}");
34
+ $webkit-background: map-get($gradients, webkit-image);
35
+ $spec-background: map-get($gradients, spec-image);
36
+ }
37
+
38
+ @else {
39
+ $webkit-background: $background;
40
+ $spec-background: $background;
41
+ }
42
+ }
43
+
44
+ @else {
45
+ $webkit-background: $background;
46
+ $spec-background: $background;
47
+ }
48
+
49
+ $webkit-backgrounds: append($webkit-backgrounds, $webkit-background, comma);
50
+ $spec-backgrounds: append($spec-backgrounds, $spec-background, comma);
51
+ }
52
+
53
+ background: $webkit-backgrounds;
54
+ background: $spec-backgrounds;
55
+ }
@@ -0,0 +1,59 @@
1
+ @mixin border-image($borders...) {
2
+ $webkit-borders: ();
3
+ $spec-borders: ();
4
+
5
+ @each $border in $borders {
6
+ $webkit-border: ();
7
+ $spec-border: ();
8
+ $border-type: type-of($border);
9
+
10
+ @if $border-type == string or list {
11
+ $border-str: if($border-type == list, nth($border, 1), $border);
12
+
13
+ $url-str: str-slice($border-str, 1, 3);
14
+ $gradient-type: str-slice($border-str, 1, 6);
15
+
16
+ @if $url-str == "url" {
17
+ $webkit-border: $border;
18
+ $spec-border: $border;
19
+ }
20
+
21
+ @else if $gradient-type == "linear" {
22
+ $gradients: _linear-gradient-parser("#{$border}");
23
+ $webkit-border: map-get($gradients, webkit-image);
24
+ $spec-border: map-get($gradients, spec-image);
25
+ }
26
+
27
+ @else if $gradient-type == "radial" {
28
+ $gradients: _radial-gradient-parser("#{$border}");
29
+ $webkit-border: map-get($gradients, webkit-image);
30
+ $spec-border: map-get($gradients, spec-image);
31
+ }
32
+
33
+ @else {
34
+ $webkit-border: $border;
35
+ $spec-border: $border;
36
+ }
37
+ }
38
+
39
+ @else {
40
+ $webkit-border: $border;
41
+ $spec-border: $border;
42
+ }
43
+
44
+ $webkit-borders: append($webkit-borders, $webkit-border, comma);
45
+ $spec-borders: append($spec-borders, $spec-border, comma);
46
+ }
47
+
48
+ -webkit-border-image: $webkit-borders;
49
+ border-image: $spec-borders;
50
+ border-style: solid;
51
+ }
52
+
53
+ //Examples:
54
+ // @include border-image(url("image.png"));
55
+ // @include border-image(url("image.png") 20 stretch);
56
+ // @include border-image(linear-gradient(45deg, orange, yellow));
57
+ // @include border-image(linear-gradient(45deg, orange, yellow) stretch);
58
+ // @include border-image(linear-gradient(45deg, orange, yellow) 20 30 40 50 stretch round);
59
+ // @include border-image(radial-gradient(top, cover, orange, yellow, orange));
@@ -0,0 +1,4 @@
1
+ @mixin calc($property, $value) {
2
+ #{$property}: -webkit-calc(#{$value});
3
+ #{$property}: calc(#{$value});
4
+ }
@@ -0,0 +1,47 @@
1
+ @mixin columns($arg: auto) {
2
+ // <column-count> || <column-width>
3
+ @include prefixer(columns, $arg, webkit moz spec);
4
+ }
5
+
6
+ @mixin column-count($int: auto) {
7
+ // auto || integer
8
+ @include prefixer(column-count, $int, webkit moz spec);
9
+ }
10
+
11
+ @mixin column-gap($length: normal) {
12
+ // normal || length
13
+ @include prefixer(column-gap, $length, webkit moz spec);
14
+ }
15
+
16
+ @mixin column-fill($arg: auto) {
17
+ // auto || length
18
+ @include prefixer(column-fill, $arg, webkit moz spec);
19
+ }
20
+
21
+ @mixin column-rule($arg) {
22
+ // <border-width> || <border-style> || <color>
23
+ @include prefixer(column-rule, $arg, webkit moz spec);
24
+ }
25
+
26
+ @mixin column-rule-color($color) {
27
+ @include prefixer(column-rule-color, $color, webkit moz spec);
28
+ }
29
+
30
+ @mixin column-rule-style($style: none) {
31
+ // none | hidden | dashed | dotted | double | groove | inset | inset | outset | ridge | solid
32
+ @include prefixer(column-rule-style, $style, webkit moz spec);
33
+ }
34
+
35
+ @mixin column-rule-width ($width: none) {
36
+ @include prefixer(column-rule-width, $width, webkit moz spec);
37
+ }
38
+
39
+ @mixin column-span($arg: none) {
40
+ // none || all
41
+ @include prefixer(column-span, $arg, webkit moz spec);
42
+ }
43
+
44
+ @mixin column-width($length: auto) {
45
+ // auto || length
46
+ @include prefixer(column-width, $length, webkit moz spec);
47
+ }
@@ -0,0 +1,4 @@
1
+ @mixin filter($function: none) {
2
+ // <filter-function> [<filter-function]* | none
3
+ @include prefixer(filter, $function, webkit spec);
4
+ }