codelation_ui 1.0.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (130) hide show
  1. checksums.yaml +7 -0
  2. data/LICENSE +20 -0
  3. data/README.md +327 -0
  4. data/Rakefile +8 -0
  5. data/app/assets/javascripts/codelation_ui/_base_resources/app.js +91 -0
  6. data/app/assets/javascripts/codelation_ui/_base_resources/components/has_grid.js +24 -0
  7. data/app/assets/javascripts/codelation_ui/_base_resources/components/link.js +22 -0
  8. data/app/assets/javascripts/codelation_ui/_base_resources/progress_bar.js +5 -0
  9. data/app/assets/javascripts/codelation_ui/base.js +8 -0
  10. data/app/assets/javascripts/codelation_ui/extended/slider.js +654 -0
  11. data/app/assets/javascripts/codelation_ui/extended.js +1 -0
  12. data/app/assets/javascripts/codelation_ui/forms/components/input.js +497 -0
  13. data/app/assets/javascripts/codelation_ui/forms/index.js +2 -0
  14. data/app/assets/javascripts/codelation_ui/forms/interfaces/form.js +71 -0
  15. data/app/assets/javascripts/codelation_ui/forms/interfaces/form_validation.js +31 -0
  16. data/app/assets/javascripts/codelation_ui/forms.js +2 -0
  17. data/app/assets/javascripts/codelation_ui/std/index.js +2 -0
  18. data/app/assets/javascripts/codelation_ui/std/interfaces/content_formatters.js +27 -0
  19. data/app/assets/javascripts/codelation_ui/std/interfaces/content_validators.js +50 -0
  20. data/app/assets/javascripts/codelation_ui/std/interfaces/helpers.js +10 -0
  21. data/app/assets/javascripts/codelation_ui/std.js +1 -0
  22. data/app/assets/javascripts/codelation_ui/vue.js +12 -0
  23. data/app/assets/javascripts/codelation_ui/vue_pages.js +11 -0
  24. data/app/assets/javascripts/codelation_ui.js +6 -0
  25. data/app/assets/stylesheets/codelation_ui/_base_resources/_normalize.scss +427 -0
  26. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/_bourbon-deprecated-upcoming.scss +411 -0
  27. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/_bourbon.scss +87 -0
  28. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_border-color.scss +26 -0
  29. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_border-radius.scss +48 -0
  30. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_border-style.scss +25 -0
  31. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_border-width.scss +25 -0
  32. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_buttons.scss +64 -0
  33. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_clearfix.scss +25 -0
  34. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_ellipsis.scss +30 -0
  35. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_font-stacks.scss +31 -0
  36. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_hide-text.scss +27 -0
  37. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_margin.scss +26 -0
  38. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_padding.scss +26 -0
  39. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_position.scss +48 -0
  40. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_prefixer.scss +66 -0
  41. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_retina-image.scss +25 -0
  42. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_size.scss +51 -0
  43. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_text-inputs.scss +113 -0
  44. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_timing-functions.scss +34 -0
  45. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_triangle.scss +63 -0
  46. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/addons/_word-wrap.scss +29 -0
  47. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_animation.scss +43 -0
  48. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_appearance.scss +3 -0
  49. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_backface-visibility.scss +3 -0
  50. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_background-image.scss +42 -0
  51. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_background.scss +55 -0
  52. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_border-image.scss +59 -0
  53. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_calc.scss +4 -0
  54. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_columns.scss +47 -0
  55. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_filter.scss +4 -0
  56. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_flex-box.scss +287 -0
  57. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_font-face.scss +24 -0
  58. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_font-feature-settings.scss +4 -0
  59. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_hidpi-media-query.scss +10 -0
  60. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_hyphens.scss +4 -0
  61. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_image-rendering.scss +14 -0
  62. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_keyframes.scss +36 -0
  63. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_linear-gradient.scss +38 -0
  64. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_perspective.scss +8 -0
  65. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_placeholder.scss +8 -0
  66. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_radial-gradient.scss +39 -0
  67. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_selection.scss +42 -0
  68. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_text-decoration.scss +19 -0
  69. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_transform.scss +15 -0
  70. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_transition.scss +71 -0
  71. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/css3/_user-select.scss +3 -0
  72. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/functions/_assign-inputs.scss +11 -0
  73. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/functions/_contains-falsy.scss +20 -0
  74. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/functions/_contains.scss +26 -0
  75. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/functions/_is-length.scss +11 -0
  76. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/functions/_is-light.scss +21 -0
  77. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/functions/_is-number.scss +11 -0
  78. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/functions/_is-size.scss +13 -0
  79. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/functions/_modular-scale.scss +69 -0
  80. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/functions/_px-to-em.scss +13 -0
  81. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/functions/_px-to-rem.scss +15 -0
  82. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/functions/_shade.scss +24 -0
  83. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/functions/_strip-units.scss +17 -0
  84. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/functions/_tint.scss +24 -0
  85. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/functions/_transition-property-name.scss +22 -0
  86. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/functions/_unpack.scss +27 -0
  87. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_convert-units.scss +21 -0
  88. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_directional-values.scss +96 -0
  89. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_font-source-declaration.scss +43 -0
  90. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_gradient-positions-parser.scss +13 -0
  91. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_linear-angle-parser.scss +25 -0
  92. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_linear-gradient-parser.scss +41 -0
  93. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_linear-positions-parser.scss +61 -0
  94. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_linear-side-corner-parser.scss +31 -0
  95. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_radial-arg-parser.scss +69 -0
  96. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_radial-gradient-parser.scss +50 -0
  97. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_radial-positions-parser.scss +18 -0
  98. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_render-gradients.scss +26 -0
  99. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_shape-size-stripper.scss +10 -0
  100. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/helpers/_str-to-num.scss +50 -0
  101. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/settings/_asset-pipeline.scss +7 -0
  102. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/settings/_prefixer.scss +9 -0
  103. data/app/assets/stylesheets/codelation_ui/_base_resources/bourbon/settings/_px-to-em.scss +1 -0
  104. data/app/assets/stylesheets/codelation_ui/_base_resources/functions/color.scss +162 -0
  105. data/app/assets/stylesheets/codelation_ui/_base_resources/functions/text_color.scss +41 -0
  106. data/app/assets/stylesheets/codelation_ui/_base_resources/mixins/button.scss +47 -0
  107. data/app/assets/stylesheets/codelation_ui/_base_resources/mixins/center_children.scss +9 -0
  108. data/app/assets/stylesheets/codelation_ui/_base_resources/mixins/col_span.scss +16 -0
  109. data/app/assets/stylesheets/codelation_ui/_base_resources/mixins/has_cards.scss +43 -0
  110. data/app/assets/stylesheets/codelation_ui/_base_resources/mixins/has_columns.scss +66 -0
  111. data/app/assets/stylesheets/codelation_ui/_base_resources/mixins/has_grid.scss +80 -0
  112. data/app/assets/stylesheets/codelation_ui/_base_resources/mixins/outer_container.scss +10 -0
  113. data/app/assets/stylesheets/codelation_ui/base.scss +27 -0
  114. data/app/assets/stylesheets/codelation_ui/extended/slider.scss +222 -0
  115. data/app/assets/stylesheets/codelation_ui/extended.scss +1 -0
  116. data/app/assets/stylesheets/codelation_ui/forms/input.scss +72 -0
  117. data/app/assets/stylesheets/codelation_ui/forms.scss +1 -0
  118. data/app/assets/stylesheets/codelation_ui/std.scss +1 -0
  119. data/app/assets/stylesheets/codelation_ui.scss +4 -0
  120. data/lib/codelation_ui.rb +7 -0
  121. data/vendor/assets/javascripts/autonumeric/autoNumeric-1.9.39.js +1465 -0
  122. data/vendor/assets/javascripts/autonumeric/autonumeric_ujs.js +94 -0
  123. data/vendor/assets/javascripts/autonumeric.js +2 -0
  124. data/vendor/assets/javascripts/awesomplete.js +392 -0
  125. data/vendor/assets/javascripts/moment.js +4301 -0
  126. data/vendor/assets/javascripts/numeral.js +679 -0
  127. data/vendor/assets/javascripts/pikaday.js +1081 -0
  128. data/vendor/assets/javascripts/summernote.js +7300 -0
  129. data/vendor/assets/javascripts/vue.js +10237 -0
  130. metadata +242 -0
@@ -0,0 +1,25 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Provides an easy way to include a clearfix for containing floats.
4
+ ///
5
+ /// @link http://cssmojo.com/latest_new_clearfix_so_far/
6
+ ///
7
+ /// @example scss - Usage
8
+ /// .element {
9
+ /// @include clearfix;
10
+ /// }
11
+ ///
12
+ /// @example css - CSS Output
13
+ /// .element::after {
14
+ /// clear: both;
15
+ /// content: "";
16
+ /// display: table;
17
+ /// }
18
+
19
+ @mixin clearfix {
20
+ &::after {
21
+ clear: both;
22
+ content: "";
23
+ display: table;
24
+ }
25
+ }
@@ -0,0 +1,30 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Truncates text and adds an ellipsis to represent overflow.
4
+ ///
5
+ /// @param {Number} $width [100%]
6
+ /// Max-width for the string to respect before being truncated
7
+ ///
8
+ /// @example scss - Usage
9
+ /// .element {
10
+ /// @include ellipsis;
11
+ /// }
12
+ ///
13
+ /// @example css - CSS Output
14
+ /// .element {
15
+ /// display: inline-block;
16
+ /// max-width: 100%;
17
+ /// overflow: hidden;
18
+ /// text-overflow: ellipsis;
19
+ /// white-space: nowrap;
20
+ /// word-wrap: normal;
21
+ /// }
22
+
23
+ @mixin ellipsis($width: 100%) {
24
+ display: inline-block;
25
+ max-width: $width;
26
+ overflow: hidden;
27
+ text-overflow: ellipsis;
28
+ white-space: nowrap;
29
+ word-wrap: normal;
30
+ }
@@ -0,0 +1,31 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Georgia font stack.
4
+ ///
5
+ /// @type List
6
+
7
+ $georgia: "Georgia", "Cambria", "Times New Roman", "Times", serif;
8
+
9
+ /// Helvetica font stack.
10
+ ///
11
+ /// @type List
12
+
13
+ $helvetica: "Helvetica Neue", "Helvetica", "Roboto", "Arial", sans-serif;
14
+
15
+ /// Lucida Grande font stack.
16
+ ///
17
+ /// @type List
18
+
19
+ $lucida-grande: "Lucida Grande", "Tahoma", "Verdana", "Arial", sans-serif;
20
+
21
+ /// Monospace font stack.
22
+ ///
23
+ /// @type List
24
+
25
+ $monospace: "Bitstream Vera Sans Mono", "Consolas", "Courier", monospace;
26
+
27
+ /// Verdana font stack.
28
+ ///
29
+ /// @type List
30
+
31
+ $verdana: "Verdana", "Geneva", sans-serif;
@@ -0,0 +1,27 @@
1
+ /// Hides the text in an element, commonly used to show an image. Some elements will need block-level styles applied.
2
+ ///
3
+ /// @link http://zeldman.com/2012/03/01/replacing-the-9999px-hack-new-image-replacement
4
+ ///
5
+ /// @example scss - Usage
6
+ /// .element {
7
+ /// @include hide-text;
8
+ /// }
9
+ ///
10
+ /// @example css - CSS Output
11
+ /// .element {
12
+ /// overflow: hidden;
13
+ /// text-indent: 101%;
14
+ /// white-space: nowrap;
15
+ /// }
16
+ ///
17
+ /// @todo Remove height argument in v5.0.0
18
+
19
+ @mixin hide-text($height: null) {
20
+ overflow: hidden;
21
+ text-indent: 101%;
22
+ white-space: nowrap;
23
+
24
+ @if $height {
25
+ @warn "The `hide-text` mixin has changed and no longer requires a height. The height argument will no longer be accepted in v5.0.0";
26
+ }
27
+ }
@@ -0,0 +1,26 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Provides a quick method for targeting `margin` on specific sides of a box. Use a `null` value to “skip” a side.
4
+ ///
5
+ /// @param {Arglist} $vals
6
+ /// List of arguments
7
+ ///
8
+ /// @example scss - Usage
9
+ /// .element {
10
+ /// @include margin(null 10px 3em 20vh);
11
+ /// }
12
+ ///
13
+ /// @example css - CSS Output
14
+ /// .element {
15
+ /// margin-bottom: 3em;
16
+ /// margin-left: 20vh;
17
+ /// margin-right: 10px;
18
+ /// }
19
+ ///
20
+ /// @require {mixin} directional-property
21
+ ///
22
+ /// @output `margin`
23
+
24
+ @mixin margin($vals...) {
25
+ @include directional-property(margin, false, $vals...);
26
+ }
@@ -0,0 +1,26 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Provides a quick method for targeting `padding` on specific sides of a box. Use a `null` value to “skip” a side.
4
+ ///
5
+ /// @param {Arglist} $vals
6
+ /// List of arguments
7
+ ///
8
+ /// @example scss - Usage
9
+ /// .element {
10
+ /// @include padding(12vh null 10px 5%);
11
+ /// }
12
+ ///
13
+ /// @example css - CSS Output
14
+ /// .element {
15
+ /// padding-bottom: 10px;
16
+ /// padding-left: 5%;
17
+ /// padding-top: 12vh;
18
+ /// }
19
+ ///
20
+ /// @require {mixin} directional-property
21
+ ///
22
+ /// @output `padding`
23
+
24
+ @mixin padding($vals...) {
25
+ @include directional-property(padding, false, $vals...);
26
+ }
@@ -0,0 +1,48 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Provides a quick method for setting an element’s position. Use a `null` value to “skip” a side.
4
+ ///
5
+ /// @param {Position} $position [relative]
6
+ /// A CSS position value
7
+ ///
8
+ /// @param {Arglist} $coordinates [null null null null]
9
+ /// List of values that correspond to the 4-value syntax for the edges of a box
10
+ ///
11
+ /// @example scss - Usage
12
+ /// .element {
13
+ /// @include position(absolute, 0 null null 10em);
14
+ /// }
15
+ ///
16
+ /// @example css - CSS Output
17
+ /// .element {
18
+ /// left: 10em;
19
+ /// position: absolute;
20
+ /// top: 0;
21
+ /// }
22
+ ///
23
+ /// @require {function} is-length
24
+ /// @require {function} unpack
25
+
26
+ @mixin position($position: relative, $coordinates: null null null null) {
27
+ @if type-of($position) == list {
28
+ $coordinates: $position;
29
+ $position: relative;
30
+ }
31
+
32
+ $coordinates: unpack($coordinates);
33
+
34
+ $offsets: (
35
+ top: nth($coordinates, 1),
36
+ right: nth($coordinates, 2),
37
+ bottom: nth($coordinates, 3),
38
+ left: nth($coordinates, 4)
39
+ );
40
+
41
+ position: $position;
42
+
43
+ @each $offset, $value in $offsets {
44
+ @if is-length($value) {
45
+ #{$offset}: $value;
46
+ }
47
+ }
48
+ }
@@ -0,0 +1,66 @@
1
+ @charset "UTF-8";
2
+
3
+ /// A mixin for generating vendor prefixes on non-standardized properties.
4
+ ///
5
+ /// @param {String} $property
6
+ /// Property to prefix
7
+ ///
8
+ /// @param {*} $value
9
+ /// Value to use
10
+ ///
11
+ /// @param {List} $prefixes
12
+ /// Prefixes to define
13
+ ///
14
+ /// @example scss - Usage
15
+ /// .element {
16
+ /// @include prefixer(border-radius, 10px, webkit ms spec);
17
+ /// }
18
+ ///
19
+ /// @example css - CSS Output
20
+ /// .element {
21
+ /// -webkit-border-radius: 10px;
22
+ /// -moz-border-radius: 10px;
23
+ /// border-radius: 10px;
24
+ /// }
25
+ ///
26
+ /// @require {variable} $prefix-for-webkit
27
+ /// @require {variable} $prefix-for-mozilla
28
+ /// @require {variable} $prefix-for-microsoft
29
+ /// @require {variable} $prefix-for-opera
30
+ /// @require {variable} $prefix-for-spec
31
+
32
+ @mixin prefixer($property, $value, $prefixes) {
33
+ @each $prefix in $prefixes {
34
+ @if $prefix == webkit {
35
+ @if $prefix-for-webkit {
36
+ -webkit-#{$property}: $value;
37
+ }
38
+ } @else if $prefix == moz {
39
+ @if $prefix-for-mozilla {
40
+ -moz-#{$property}: $value;
41
+ }
42
+ } @else if $prefix == ms {
43
+ @if $prefix-for-microsoft {
44
+ -ms-#{$property}: $value;
45
+ }
46
+ } @else if $prefix == o {
47
+ @if $prefix-for-opera {
48
+ -o-#{$property}: $value;
49
+ }
50
+ } @else if $prefix == spec {
51
+ @if $prefix-for-spec {
52
+ #{$property}: $value;
53
+ }
54
+ } @else {
55
+ @warn "Unrecognized prefix: #{$prefix}";
56
+ }
57
+ }
58
+ }
59
+
60
+ @mixin disable-prefix-for-all() {
61
+ $prefix-for-webkit: false !global;
62
+ $prefix-for-mozilla: false !global;
63
+ $prefix-for-microsoft: false !global;
64
+ $prefix-for-opera: false !global;
65
+ $prefix-for-spec: false !global;
66
+ }
@@ -0,0 +1,25 @@
1
+ @mixin retina-image($filename, $background-size, $extension: png, $retina-filename: null, $retina-suffix: _2x, $asset-pipeline: $asset-pipeline) {
2
+ @if $asset-pipeline {
3
+ background-image: image-url("#{$filename}.#{$extension}");
4
+ } @else {
5
+ background-image: url("#{$filename}.#{$extension}");
6
+ }
7
+
8
+ @include hidpi {
9
+ @if $asset-pipeline {
10
+ @if $retina-filename {
11
+ background-image: image-url("#{$retina-filename}.#{$extension}");
12
+ } @else {
13
+ background-image: image-url("#{$filename}#{$retina-suffix}.#{$extension}");
14
+ }
15
+ } @else {
16
+ @if $retina-filename {
17
+ background-image: url("#{$retina-filename}.#{$extension}");
18
+ } @else {
19
+ background-image: url("#{$filename}#{$retina-suffix}.#{$extension}");
20
+ }
21
+ }
22
+
23
+ background-size: $background-size;
24
+ }
25
+ }
@@ -0,0 +1,51 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Sets the `width` and `height` of the element.
4
+ ///
5
+ /// @param {List} $size
6
+ /// A list of at most 2 size values.
7
+ ///
8
+ /// If there is only a single value in `$size` it is used for both width and height. All units are supported.
9
+ ///
10
+ /// @example scss - Usage
11
+ /// .first-element {
12
+ /// @include size(2em);
13
+ /// }
14
+ ///
15
+ /// .second-element {
16
+ /// @include size(auto 10em);
17
+ /// }
18
+ ///
19
+ /// @example css - CSS Output
20
+ /// .first-element {
21
+ /// width: 2em;
22
+ /// height: 2em;
23
+ /// }
24
+ ///
25
+ /// .second-element {
26
+ /// width: auto;
27
+ /// height: 10em;
28
+ /// }
29
+ ///
30
+ /// @todo Refactor in 5.0.0 to use a comma-separated argument
31
+
32
+ @mixin size($value) {
33
+ $width: nth($value, 1);
34
+ $height: $width;
35
+
36
+ @if length($value) > 1 {
37
+ $height: nth($value, 2);
38
+ }
39
+
40
+ @if is-size($height) {
41
+ height: $height;
42
+ } @else {
43
+ @warn "`#{$height}` is not a valid length for the `$height` parameter in the `size` mixin.";
44
+ }
45
+
46
+ @if is-size($width) {
47
+ width: $width;
48
+ } @else {
49
+ @warn "`#{$width}` is not a valid length for the `$width` parameter in the `size` mixin.";
50
+ }
51
+ }
@@ -0,0 +1,113 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Generates variables for all text-based inputs. Please note that you must use interpolation on the variable: `#{$all-text-inputs}`.
4
+ ///
5
+ /// @example scss - Usage
6
+ /// #{$all-text-inputs} {
7
+ /// border: 1px solid #f00;
8
+ /// }
9
+ ///
10
+ /// #{$all-text-inputs-focus},
11
+ /// #{$all-text-inputs-hover} {
12
+ /// border: 1px solid #0f0;
13
+ /// }
14
+ ///
15
+ /// #{$all-text-inputs-active} {
16
+ /// border: 1px solid #00f;
17
+ /// }
18
+ ///
19
+ /// @example css - CSS Output
20
+ /// input[type="color"],
21
+ /// input[type="date"],
22
+ /// input[type="datetime"],
23
+ /// input[type="datetime-local"],
24
+ /// input[type="email"],
25
+ /// input[type="month"],
26
+ /// input[type="number"],
27
+ /// input[type="password"],
28
+ /// input[type="search"],
29
+ /// input[type="tel"],
30
+ /// input[type="text"],
31
+ /// input[type="time"],
32
+ /// input[type="url"],
33
+ /// input[type="week"],
34
+ /// textarea {
35
+ /// border: 1px solid #f00;
36
+ /// }
37
+ ///
38
+ /// input[type="color"]:focus,
39
+ /// input[type="date"]:focus,
40
+ /// input[type="datetime"]:focus,
41
+ /// input[type="datetime-local"]:focus,
42
+ /// input[type="email"]:focus,
43
+ /// input[type="month"]:focus,
44
+ /// input[type="number"]:focus,
45
+ /// input[type="password"]:focus,
46
+ /// input[type="search"]:focus,
47
+ /// input[type="tel"]:focus,
48
+ /// input[type="text"]:focus,
49
+ /// input[type="time"]:focus,
50
+ /// input[type="url"]:focus,
51
+ /// input[type="week"]:focus,
52
+ /// textarea:focus,
53
+ /// input[type="color"]:hover,
54
+ /// input[type="date"]:hover,
55
+ /// input[type="datetime"]:hover,
56
+ /// input[type="datetime-local"]:hover,
57
+ /// input[type="email"]:hover,
58
+ /// input[type="month"]:hover,
59
+ /// input[type="number"]:hover,
60
+ /// input[type="password"]:hover,
61
+ /// input[type="search"]:hover,
62
+ /// input[type="tel"]:hover,
63
+ /// input[type="text"]:hover,
64
+ /// input[type="time"]:hover,
65
+ /// input[type="url"]:hover,
66
+ /// input[type="week"]:hover,
67
+ /// textarea:hover {
68
+ /// border: 1px solid #0f0;
69
+ /// }
70
+ ///
71
+ /// input[type="color"]:active,
72
+ /// input[type="date"]:active,
73
+ /// input[type="datetime"]:active,
74
+ /// input[type="datetime-local"]:active,
75
+ /// input[type="email"]:active,
76
+ /// input[type="month"]:active,
77
+ /// input[type="number"]:active,
78
+ /// input[type="password"]:active,
79
+ /// input[type="search"]:active,
80
+ /// input[type="tel"]:active,
81
+ /// input[type="text"]:active,
82
+ /// input[type="time"]:active,
83
+ /// input[type="url"]:active,
84
+ /// input[type="week"]:active,
85
+ /// textarea:active {
86
+ /// border: 1px solid #00f;
87
+ /// }
88
+ ///
89
+ /// @require assign-inputs
90
+ ///
91
+ /// @type List
92
+
93
+ $text-inputs-list: 'input[type="color"]',
94
+ 'input[type="date"]',
95
+ 'input[type="datetime"]',
96
+ 'input[type="datetime-local"]',
97
+ 'input[type="email"]',
98
+ 'input[type="month"]',
99
+ 'input[type="number"]',
100
+ 'input[type="password"]',
101
+ 'input[type="search"]',
102
+ 'input[type="tel"]',
103
+ 'input[type="text"]',
104
+ 'input[type="time"]',
105
+ 'input[type="url"]',
106
+ 'input[type="week"]',
107
+ 'input:not([type])',
108
+ 'textarea';
109
+
110
+ $all-text-inputs: assign-inputs($text-inputs-list);
111
+ $all-text-inputs-active: assign-inputs($text-inputs-list, active);
112
+ $all-text-inputs-focus: assign-inputs($text-inputs-list, focus);
113
+ $all-text-inputs-hover: assign-inputs($text-inputs-list, hover);
@@ -0,0 +1,34 @@
1
+ @charset "UTF-8";
2
+
3
+ /// CSS cubic-bezier timing functions. Timing functions courtesy of jquery.easie (github.com/jaukia/easie)
4
+ ///
5
+ /// Timing functions are the same as demoed here: http://jqueryui.com/resources/demos/effect/easing.html
6
+ ///
7
+ /// @type cubic-bezier
8
+
9
+ $ease-in-quad: cubic-bezier(0.550, 0.085, 0.680, 0.530);
10
+ $ease-in-cubic: cubic-bezier(0.550, 0.055, 0.675, 0.190);
11
+ $ease-in-quart: cubic-bezier(0.895, 0.030, 0.685, 0.220);
12
+ $ease-in-quint: cubic-bezier(0.755, 0.050, 0.855, 0.060);
13
+ $ease-in-sine: cubic-bezier(0.470, 0.000, 0.745, 0.715);
14
+ $ease-in-expo: cubic-bezier(0.950, 0.050, 0.795, 0.035);
15
+ $ease-in-circ: cubic-bezier(0.600, 0.040, 0.980, 0.335);
16
+ $ease-in-back: cubic-bezier(0.600, -0.280, 0.735, 0.045);
17
+
18
+ $ease-out-quad: cubic-bezier(0.250, 0.460, 0.450, 0.940);
19
+ $ease-out-cubic: cubic-bezier(0.215, 0.610, 0.355, 1.000);
20
+ $ease-out-quart: cubic-bezier(0.165, 0.840, 0.440, 1.000);
21
+ $ease-out-quint: cubic-bezier(0.230, 1.000, 0.320, 1.000);
22
+ $ease-out-sine: cubic-bezier(0.390, 0.575, 0.565, 1.000);
23
+ $ease-out-expo: cubic-bezier(0.190, 1.000, 0.220, 1.000);
24
+ $ease-out-circ: cubic-bezier(0.075, 0.820, 0.165, 1.000);
25
+ $ease-out-back: cubic-bezier(0.175, 0.885, 0.320, 1.275);
26
+
27
+ $ease-in-out-quad: cubic-bezier(0.455, 0.030, 0.515, 0.955);
28
+ $ease-in-out-cubic: cubic-bezier(0.645, 0.045, 0.355, 1.000);
29
+ $ease-in-out-quart: cubic-bezier(0.770, 0.000, 0.175, 1.000);
30
+ $ease-in-out-quint: cubic-bezier(0.860, 0.000, 0.070, 1.000);
31
+ $ease-in-out-sine: cubic-bezier(0.445, 0.050, 0.550, 0.950);
32
+ $ease-in-out-expo: cubic-bezier(1.000, 0.000, 0.000, 1.000);
33
+ $ease-in-out-circ: cubic-bezier(0.785, 0.135, 0.150, 0.860);
34
+ $ease-in-out-back: cubic-bezier(0.680, -0.550, 0.265, 1.550);
@@ -0,0 +1,63 @@
1
+ @mixin triangle($size, $color, $direction) {
2
+ $width: nth($size, 1);
3
+ $height: nth($size, length($size));
4
+ $foreground-color: nth($color, 1);
5
+ $background-color: if(length($color) == 2, nth($color, 2), transparent);
6
+ height: 0;
7
+ width: 0;
8
+
9
+ @if ($direction == up) or ($direction == down) or ($direction == right) or ($direction == left) {
10
+ $width: $width / 2;
11
+ $height: if(length($size) > 1, $height, $height/2);
12
+
13
+ @if $direction == up {
14
+ border-bottom: $height solid $foreground-color;
15
+ border-left: $width solid $background-color;
16
+ border-right: $width solid $background-color;
17
+ } @else if $direction == right {
18
+ border-bottom: $width solid $background-color;
19
+ border-left: $height solid $foreground-color;
20
+ border-top: $width solid $background-color;
21
+ } @else if $direction == down {
22
+ border-left: $width solid $background-color;
23
+ border-right: $width solid $background-color;
24
+ border-top: $height solid $foreground-color;
25
+ } @else if $direction == left {
26
+ border-bottom: $width solid $background-color;
27
+ border-right: $height solid $foreground-color;
28
+ border-top: $width solid $background-color;
29
+ }
30
+ } @else if ($direction == up-right) or ($direction == up-left) {
31
+ border-top: $height solid $foreground-color;
32
+
33
+ @if $direction == up-right {
34
+ border-left: $width solid $background-color;
35
+ } @else if $direction == up-left {
36
+ border-right: $width solid $background-color;
37
+ }
38
+ } @else if ($direction == down-right) or ($direction == down-left) {
39
+ border-bottom: $height solid $foreground-color;
40
+
41
+ @if $direction == down-right {
42
+ border-left: $width solid $background-color;
43
+ } @else if $direction == down-left {
44
+ border-right: $width solid $background-color;
45
+ }
46
+ } @else if ($direction == inset-up) {
47
+ border-color: $background-color $background-color $foreground-color;
48
+ border-style: solid;
49
+ border-width: $height $width;
50
+ } @else if ($direction == inset-down) {
51
+ border-color: $foreground-color $background-color $background-color;
52
+ border-style: solid;
53
+ border-width: $height $width;
54
+ } @else if ($direction == inset-right) {
55
+ border-color: $background-color $background-color $background-color $foreground-color;
56
+ border-style: solid;
57
+ border-width: $width $height;
58
+ } @else if ($direction == inset-left) {
59
+ border-color: $background-color $foreground-color $background-color $background-color;
60
+ border-style: solid;
61
+ border-width: $width $height;
62
+ }
63
+ }
@@ -0,0 +1,29 @@
1
+ @charset "UTF-8";
2
+
3
+ /// Provides an easy way to change the `word-wrap` property.
4
+ ///
5
+ /// @param {String} $wrap [break-word]
6
+ /// Value for the `word-break` property.
7
+ ///
8
+ /// @example scss - Usage
9
+ /// .wrapper {
10
+ /// @include word-wrap(break-word);
11
+ /// }
12
+ ///
13
+ /// @example css - CSS Output
14
+ /// .wrapper {
15
+ /// overflow-wrap: break-word;
16
+ /// word-break: break-all;
17
+ /// word-wrap: break-word;
18
+ /// }
19
+
20
+ @mixin word-wrap($wrap: break-word) {
21
+ overflow-wrap: $wrap;
22
+ word-wrap: $wrap;
23
+
24
+ @if $wrap == break-word {
25
+ word-break: break-all;
26
+ } @else {
27
+ word-break: $wrap;
28
+ }
29
+ }
@@ -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
+ }