uniform-ui 3.0.0.beta2 → 3.0.0.beta10

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 (44) hide show
  1. checksums.yaml +4 -4
  2. data/lib/assets/javascripts/uniform/checkbox.js +15 -15
  3. data/lib/assets/javascripts/uniform/component.js +23 -12
  4. data/lib/assets/javascripts/uniform/dropdown.js +54 -54
  5. data/lib/assets/javascripts/uniform/dropzone.js +107 -0
  6. data/lib/assets/javascripts/uniform/floating-label-input.js +14 -12
  7. data/lib/assets/javascripts/uniform/modal.js +31 -33
  8. data/lib/assets/javascripts/uniform/popover.js +59 -40
  9. data/lib/assets/javascripts/uniform/resizer.js +21 -21
  10. data/lib/assets/javascripts/uniform/select.js +187 -163
  11. data/lib/assets/javascripts/uniform/sticker.js +26 -0
  12. data/lib/assets/javascripts/uniform/tooltip.js +29 -16
  13. data/lib/assets/javascripts/uniform.js +23 -8
  14. data/lib/assets/stylesheets/uniform/base.scss +24 -9
  15. data/lib/assets/stylesheets/uniform/components/buttons.scss +4 -5
  16. data/lib/assets/stylesheets/uniform/components/checkbox.scss +2 -0
  17. data/lib/assets/stylesheets/uniform/components/container.scss +8 -7
  18. data/lib/assets/stylesheets/uniform/components/dropzone.scss +40 -0
  19. data/lib/assets/stylesheets/uniform/components/input-group.scss +9 -0
  20. data/lib/assets/stylesheets/uniform/components/loaders.scss +0 -3
  21. data/lib/assets/stylesheets/uniform/components/modal.scss +21 -36
  22. data/lib/assets/stylesheets/uniform/components/pointer.scss +4 -4
  23. data/lib/assets/stylesheets/uniform/components/select.scss +7 -2
  24. data/lib/assets/stylesheets/uniform/components/thumb.scss +0 -1
  25. data/lib/assets/stylesheets/uniform/components/z-input.scss +6 -0
  26. data/lib/assets/stylesheets/uniform/config.scss +156 -0
  27. data/lib/assets/stylesheets/uniform/defaults.scss +2 -26
  28. data/lib/assets/stylesheets/uniform/functions/icons.scss +29 -0
  29. data/lib/assets/stylesheets/uniform/functions/map.scss +95 -0
  30. data/lib/assets/stylesheets/uniform/functions/string.scss +15 -0
  31. data/lib/assets/stylesheets/uniform/functions.scss +4 -79
  32. data/lib/assets/stylesheets/uniform/mixins.scss +34 -26
  33. data/lib/assets/stylesheets/uniform/utilities/borders.scss +12 -13
  34. data/lib/assets/stylesheets/uniform/utilities/effects.scss +31 -0
  35. data/lib/assets/stylesheets/uniform/utilities/layout.scss +22 -22
  36. data/lib/assets/stylesheets/uniform/utilities/position.scss +4 -0
  37. data/lib/assets/stylesheets/uniform/utilities/sizing.scss +14 -8
  38. data/lib/assets/stylesheets/uniform/utilities/spacing.scss +20 -14
  39. data/lib/assets/stylesheets/uniform/utilities/svg.scss +5 -0
  40. data/lib/assets/stylesheets/uniform/utilities/text.scss +1 -0
  41. data/lib/assets/stylesheets/uniform/utilities.scss +8 -0
  42. data/lib/uniform/version.rb +1 -1
  43. metadata +11 -4
  44. data/lib/assets/stylesheets/uniform/variables.scss +0 -134
@@ -0,0 +1,29 @@
1
+ @import 'uniform/functions/string';
2
+
3
+ @function uri-encode($svg) {
4
+ $encoded: '';
5
+ $slice: 2000;
6
+ $index: 0;
7
+ $loops: ceil(str-length($svg) / $slice);
8
+
9
+ @for $i from 1 through $loops {
10
+ $chunk: str-slice($svg, $index, $index + $slice - 1);
11
+ $chunk: str-replace($chunk, '"', "'");
12
+ $chunk: str-replace($chunk, '<', '%3C');
13
+ $chunk: str-replace($chunk, '>', '%3E');
14
+ $chunk: str-replace($chunk, '&', '%26');
15
+ $chunk: str-replace($chunk, '#', '%23');
16
+ $encoded: #{$encoded}#{$chunk};
17
+ $index: $index + $slice;
18
+ }
19
+
20
+ @return $encoded;
21
+ }
22
+
23
+ @function svg-encode ($svg) {
24
+ @return url("data:image/svg+xml;charset=utf8,#{uri-encode($svg)}");
25
+ }
26
+
27
+ @function icon-check($color: #000000){
28
+ @return svg-encode('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><path d="M28.998 8.531l-2.134-2.134c-0.394-0.393-1.030-0.393-1.423 0l-12.795 12.795-6.086-6.13c-0.393-0.393-1.029-0.393-1.423 0l-2.134 2.134c-0.393 0.394-0.393 1.030 0 1.423l8.924 8.984c0.393 0.393 1.030 0.393 1.423 0l15.648-15.649c0.393-0.392 0.393-1.030 0-1.423z" fill="#{$color}"></path></svg>');
29
+ }
@@ -0,0 +1,95 @@
1
+ @function get($map, $keys...) {
2
+ @each $key in $keys {
3
+ $map: map-get($map, $key);
4
+ }
5
+ @return $map;
6
+ }
7
+
8
+ @function set($map, $keys...) {
9
+ $maps: ($map,);
10
+ $result: null;
11
+
12
+ @if length($keys) == 1 {
13
+ @error "Not enought key arguments";
14
+ } @else if length($keys) == 2 {
15
+ @return map-merge($map, (nth($keys, 1): nth($keys, 2)));
16
+ }
17
+
18
+ @for $i from 1 through length($keys) - 2 {
19
+ $key: nth($keys, $i);
20
+ $map: nth($maps, -1);
21
+ @debug $map;
22
+ $value: get($map, $key);
23
+ @if type-of($value) != 'map' {
24
+ $value: ();
25
+ }
26
+ $maps: append($maps, $value);
27
+ }
28
+
29
+ @for $i from length($maps) through 1 {
30
+ $map: nth($maps, $i);
31
+ $key: nth($keys, $i);
32
+ $value: if($i == length($maps), nth($keys, -1), $result);
33
+ $result: map-merge($map, ($key: $value));
34
+ }
35
+
36
+ @return $result;
37
+ }
38
+
39
+ @function merge($maps...) {
40
+ $target: ();
41
+ @each $map in $maps {
42
+ @each $key, $value in $map {
43
+ $current: get($target, $key);
44
+ @if type-of($value) == 'map' and type-of($current) == "map" {
45
+ $target: set($target, $key, merge($current, $value))
46
+ } @else {
47
+ $target: set($target, $key, $value);
48
+ }
49
+ }
50
+ }
51
+ @return $target;
52
+ }
53
+
54
+ @function purge($map) {
55
+ $target: $map;
56
+ @each $key, $value in $map {
57
+ @if type-of($value) == "map" {
58
+ $target: set($map, $key, purge($value))
59
+ } @else if $value == false OR $value == "false" {
60
+ $target: map-remove($map, $key);
61
+ }
62
+ }
63
+ @return $target;
64
+ }
65
+
66
+ @function mapToString($map) {
67
+ $string: '"';
68
+
69
+ @each $key, $value in $map {
70
+ @if type-of($value) == "string" {
71
+ $string: str-insert($string, $key, -1);
72
+ $string: str-insert($string, "/", -1);
73
+ $string: str-insert($string, $value, -1);
74
+ $string: str-insert($string, ",", -1);
75
+ }
76
+ }
77
+ $string: str-slice($string, 1, -2);
78
+ $string: str-insert($string, '"', -1);
79
+
80
+ @return $string;
81
+ }
82
+
83
+ @function mapToJSON($map) {
84
+ $string: '';
85
+
86
+ @each $key, $value in $map {
87
+ @if type-of($value) == "map" {
88
+ $string: str-insert($string, "\"#{$key}\": #{mapToJSON($value)},", -1);
89
+ } @else {
90
+ $string: str-insert($string, "\"#{$key}\": \"#{$value}\",", -1);
91
+ }
92
+ }
93
+
94
+ @return "{#{str-slice($string, 0, -2)}}";
95
+ }
@@ -0,0 +1,15 @@
1
+ /// Replace `$search` with `$replace` in `$string`
2
+ /// @author Hugo Giraudel
3
+ /// @param {String} $string - Initial string
4
+ /// @param {String} $search - Substring to replace
5
+ /// @param {String} $replace ('') - New value
6
+ /// @return {String} - Updated string
7
+ @function str-replace($string, $search, $replace: '') {
8
+ $index: str-index($string, $search);
9
+
10
+ @if $index {
11
+ @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
12
+ }
13
+
14
+ @return $string;
15
+ }
@@ -1,86 +1,11 @@
1
+ @import 'uniform/functions/map';
2
+
1
3
  @function toRGB($color){
2
4
  @return red($color), green($color), blue($color);
3
5
  }
4
6
  @function color($key) {
5
- @return map-get($color_spectrum, $key);
7
+ @return get($uniform_configs, 'colors', $key);
6
8
  }
7
9
  @function size($key) {
8
- @return map-get($sizes, $key);
9
- }
10
-
11
- @function mapToString($map) {
12
- $string: '"';
13
-
14
- @each $key, $value in $map {
15
- $string: str-insert($string, $key, -1);
16
- $string: str-insert($string, "/", -1);
17
- $string: str-insert($string, $value, -1);
18
- $string: str-insert($string, ",", -1);
19
- }
20
- $string: str-slice($string, 1, -2);
21
- $string: str-insert($string, '"', -1);
22
-
23
- @return $string;
24
- }
25
-
26
- //----------------------------------------------------------------
27
- // Icons
28
- //----------------------------------------------------------------
29
-
30
-
31
-
32
- /// Replace `$search` with `$replace` in `$string`
33
- /// @author Hugo Giraudel
34
- /// @param {String} $string - Initial string
35
- /// @param {String} $search - Substring to replace
36
- /// @param {String} $replace ('') - New value
37
- /// @return {String} - Updated string
38
- @function str-replace($string, $search, $replace: '') {
39
- $index: str-index($string, $search);
40
-
41
- @if $index {
42
- @return str-slice($string, 1, $index - 1) + $replace + str-replace(str-slice($string, $index + str-length($search)), $search, $replace);
43
- }
44
-
45
- @return $string;
46
- }
47
-
48
- @function uri-encode($svg) {
49
- $encoded: '';
50
- $slice: 2000;
51
- $index: 0;
52
- $loops: ceil(str-length($svg) / $slice);
53
-
54
- @for $i from 1 through $loops {
55
- $chunk: str-slice($svg, $index, $index + $slice - 1);
56
- $chunk: str-replace($chunk, '"', "'");
57
- $chunk: str-replace($chunk, '<', '%3C');
58
- $chunk: str-replace($chunk, '>', '%3E');
59
- $chunk: str-replace($chunk, '&', '%26');
60
- $chunk: str-replace($chunk, '#', '%23');
61
- $encoded: #{$encoded}#{$chunk};
62
- $index: $index + $slice;
63
- }
64
-
65
- @return $encoded;
66
- }
67
-
68
- @function svg-encode ($svg) {
69
- @return url("data:image/svg+xml;charset=utf8,#{uri-encode($svg)}");
70
- }
71
-
72
- @function icon-check($color: #000000){
73
- @return svg-encode('<svg version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" width="32" height="32" viewBox="0 0 32 32"><path d="M28.998 8.531l-2.134-2.134c-0.394-0.393-1.030-0.393-1.423 0l-12.795 12.795-6.086-6.13c-0.393-0.393-1.029-0.393-1.423 0l-2.134 2.134c-0.393 0.394-0.393 1.030 0 1.423l8.924 8.984c0.393 0.393 1.030 0.393 1.423 0l15.648-15.649c0.393-0.392 0.393-1.030 0-1.423z" fill="#{$color}"></path></svg>');
74
- }
75
-
76
- @function icon-x($size: 32, $color: #000000){
77
- @return svg-encode('<svg version="1.2" baseProfile="tiny" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="#{$size}px" height="#{$size}px" viewBox="0 0 64 64" xml:space="preserve" fill="#{$color}"><g><rect x="-2.352" y="29.385" transform="matrix(0.7071 0.7071 -0.7071 0.7071 32.3545 -14.3899)" width="71.799" height="4.95"/></g><g><rect x="-2.374" y="29.376" transform="matrix(0.7071 -0.7071 0.7071 0.7071 -12.7023 33.0352)" width="71.799" height="4.95"/></g></svg>');
78
- }
79
-
80
- @function icon-circle($width: 2, $height: 2, $radius: 1, $color: #000000){
81
- @return svg-encode('<svg version="1.0" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="#{$width}px" height="#{$height}px" viewBox="0 0 #{$width} #{$height}" enable-background="new 0 0 #{$width} #{$height}" xml:space="preserve"><circle cx="#{$width / 2}" cy="#{$height / 2}" r="#{$radius}" fill="#{$color}"/></svg>');
82
- }
83
-
84
- @function icon-x-block($size: 32, $color: #000000){
85
- @return svg-encode('<svg width="#{$size}px" height="#{$size}px" fill="#{$color}" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 10.5 10.5" style="enable-background:new 0 0 10.5 10.5;" xml:space="preserve"><path d="M8.1,1.3C8.4,1,8.9,1,9.2,1.3c0,0,0,0,0,0c0.3,0.3,0.3,0.8,0,1.1L2.4,9.3c-0.3,0.3-0.8,0.3-1.1,0S1,8.4,1.3,8.1L8.1,1.3z"/><path d="M9.2,8.1c0.3,0.3,0.4,0.8,0.1,1.1c0,0,0,0,0,0l0,0c-0.3,0.3-0.8,0.3-1.1,0L1.3,2.4C1,2.1,0.9,1.6,1.3,1.3c0,0,0,0,0,0l0,0 C1.6,1,2.1,1,2.4,1.3L9.2,8.1z"/></svg>');
10
+ @return get($uniform_configs, 'sizes', $key);
86
11
  }
@@ -1,4 +1,5 @@
1
- @import 'uniform/variables';
1
+ @import 'uniform/config';
2
+ @import 'uniform/functions/map';
2
3
 
3
4
  @mixin text-overflow($inherit:false){
4
5
  @if $inherit {
@@ -36,7 +37,7 @@
36
37
  }
37
38
 
38
39
  @mixin breakpoint($breakpoint){
39
- @media only screen and (map-get($breakpoints, $breakpoint)){
40
+ @media only screen and (get($uniform_configs, 'breakpoints', $breakpoint)){
40
41
  @content;
41
42
  }
42
43
  }
@@ -49,19 +50,19 @@
49
50
  .#{$selector}{
50
51
  @content
51
52
  }
52
- @if $include_child_utilities {
53
+ @if get($uniform_configs, 'breakpoints', 'include_containers') {
53
54
  @include child-rule($selector) {
54
55
  @content
55
56
  }
56
57
  }
57
58
 
58
- @each $breakpoint, $breakpoint_query in $breakpoints {
59
+ @each $breakpoint, $breakpoint_query in map-get($uniform_configs, 'breakpoints') {
59
60
  @include media($breakpoint_query){
60
61
  .#{$breakpoint}\:#{$selector}{
61
62
  @content
62
63
  }
63
64
  }
64
- @if $include_breakpoint_container {
65
+ @if get($uniform_configs, 'breakpoints', 'include_containers') {
65
66
  .#{$breakpoint}-container{
66
67
  .#{$breakpoint}\:#{$selector}{
67
68
  @content
@@ -87,7 +88,7 @@
87
88
  $selector: str-slice($selector, 2, -1);
88
89
  }
89
90
 
90
- @each $name, $value in $color_spectrum {
91
+ @each $name, $value in map-get($uniform_configs, 'colors') {
91
92
  .#{$selector}-#{$name}{
92
93
  @content($value)
93
94
  }
@@ -96,10 +97,8 @@
96
97
  @content($value)
97
98
  }
98
99
 
99
- @if $include_child_utilities {
100
- @include child-rule($selector) {
101
- @content($value)
102
- }
100
+ @include combinator-rule("#{$selector}-#{$name}", false){
101
+ @content($value)
103
102
  }
104
103
  }
105
104
  }
@@ -119,7 +118,7 @@
119
118
  $key: str-slice($key, 1, str-index($key, '-') - 1);
120
119
  }
121
120
 
122
- @each $size, $value in map-get($sizes, $key) {
121
+ @each $size, $value in get($uniform_configs, 'sizes', $key) {
123
122
  $class: "#{$selector}-#{$size}";
124
123
  @if $size == '' {
125
124
  $class: $selector;
@@ -144,26 +143,35 @@
144
143
  }
145
144
  }
146
145
 
147
- @each $pseudo-selector, $pseudo-class in (
148
- active: active,
149
- focus: focus,
150
- hover: hover,
151
- checked: checked,
152
- focus-within: focus-within,
153
- first: first-child,
154
- last: last-child
155
- ) {
156
- @if index($include_pseudo_utilities, $pseudo-class) {
146
+ @each $pseudo-selector, $pseudo-class in map-get($uniform_configs, 'pseudo_classes') {
147
+ @if $pseudo-selector == "group-hover" {
148
+ .group:hover{
149
+ .group-hover\:#{$selector} {
150
+ @content
151
+ }
152
+ }
153
+ } @else {
157
154
  .#{$pseudo-selector}\:#{$selector}:#{$pseudo-class} {
158
155
  @content
159
156
  }
160
157
  }
158
+
161
159
  }
162
- @if index($include_pseudo_utilities, group-hover) {
163
- .group:hover{
164
- .group-hover\:#{$selector} {
165
- @content
166
- }
160
+ }
161
+
162
+ @mixin combinator-rule($selector, $declare_self: true){
163
+ @if str-index($selector, '.') == 1 {
164
+ $selector: str-slice($selector, 2, -1);
165
+ }
166
+ @if $declare_self {
167
+ .#{$selector} {
168
+ @content
169
+ }
170
+ }
171
+
172
+ @each $cominator_selector, $combinator in map-get($uniform_configs, 'combinators') {
173
+ .#{$selector}-#{$cominator_selector} #{$combinator} * {
174
+ @content
167
175
  }
168
176
  }
169
177
  }
@@ -31,22 +31,21 @@
31
31
  // Border Radius
32
32
  //----------------------------------------------------------------
33
33
  @include size-rule('.rounded') using ($size){ border-radius: $size;}
34
- @include responsive-rule('.rounded') { border-radius: 0.25em;}
35
- @include responsive-rule('.rounded-top') {
36
- border-top-right-radius: 0.25em;
37
- border-top-left-radius: 0.25em;
34
+ @include size-rule('.rounded-top') using ($size){
35
+ border-top-right-radius: $size;
36
+ border-top-left-radius: $size;
38
37
  }
39
- @include responsive-rule('.rounded-bottom') {
40
- border-bottom-right-radius: 0.25em;
41
- border-bottom-left-radius: 0.25em;
38
+ @include size-rule('.rounded-bottom') using ($size){
39
+ border-bottom-right-radius: $size;
40
+ border-bottom-left-radius: $size;
42
41
  }
43
- @include responsive-rule('.rounded-left') {
44
- border-top-left-radius: 0.25em;
45
- border-bottom-left-radius: 0.25em;
42
+ @include size-rule('.rounded-left') using ($size){
43
+ border-top-left-radius: $size;
44
+ border-bottom-left-radius: $size;
46
45
  }
47
- @include responsive-rule('.rounded-right') {
48
- border-top-right-radius: 0.25em;
49
- border-bottom-right-radius: 0.25em;
46
+ @include size-rule('.rounded-right') using ($size){
47
+ border-top-right-radius: $size;
48
+ border-bottom-right-radius: $size;
50
49
  }
51
50
 
52
51
  @include responsive-rule('.square') { border-radius: 0;}
@@ -60,6 +60,37 @@
60
60
  }
61
61
  }
62
62
 
63
+ .transition-fade-down,
64
+ .transition-fade-up,
65
+ .transition-fade-left,
66
+ .transition-fade-right {
67
+ transition: transform 100ms, opacity 100ms;
68
+ opacity: 1;
69
+ &.-out {
70
+ opacity: 0;
71
+ }
72
+ }
73
+ .transition-fade-down {
74
+ &.-out {
75
+ transform: translateY(10px);
76
+ }
77
+ }
78
+ .transition-fade-up {
79
+ &.-out {
80
+ transform: translateY(-10px);
81
+ }
82
+ }
83
+ .transition-fade-left {
84
+ &.-out {
85
+ transform: translateX(10px);
86
+ }
87
+ }
88
+ .transition-fade-right {
89
+ &.-out {
90
+ transform: translateX(-10px);
91
+ }
92
+ }
93
+
63
94
 
64
95
  //----------------------------------------------------------------
65
96
  // Transforms
@@ -1,23 +1,5 @@
1
1
  @import 'uniform/mixins';
2
2
 
3
- //----------------------------------------------------------------
4
- // Container
5
- //----------------------------------------------------------------
6
- // TODO match this with breakpoints variable, so that breakpoints can change and adjust this
7
- .container{
8
- margin: auto;
9
- @include breakpoint('md'){
10
- max-width: 720px;
11
- }
12
- @include breakpoint('lg'){
13
- max-width: 1080px;
14
- }
15
- @include breakpoint('xl'){
16
- max-width: 1400px;
17
- }
18
- }
19
-
20
-
21
3
  //----------------------------------------------------------------
22
4
  // Display
23
5
  //----------------------------------------------------------------
@@ -37,8 +19,11 @@
37
19
  @include responsive-rule($type){ display: $type; }
38
20
  }
39
21
  @include responsive-rule('hide'){ display: none; }
22
+ @include pseudo-class-rule('hide', false){ display: none;}
40
23
  @include responsive-rule('show'){ display: inherit; }
24
+ @include pseudo-class-rule('show', false){ display: inherit;}
41
25
  @include responsive-rule('hide-empty:empty'){ display: none; }
26
+ @include pseudo-class-rule('hide-empty:empty', false){ display: none;}
42
27
 
43
28
 
44
29
  //----------------------------------------------------------------
@@ -62,9 +47,10 @@
62
47
  @include responsive-rule('flex-nowrap'){ flex-wrap: nowrap; }
63
48
  @include responsive-rule('flex-wrap'){ flex-wrap: wrap; }
64
49
 
65
- @include responsive-rule('flex-initial'){ flex: 0 1 auto; }
66
50
  @include responsive-rule('flex-fill'){ flex: 1 1 auto; }
67
- @include responsive-rule('flex-none'){ flex: none; }
51
+ @include responsive-rule('flex-grow'){ flex: 1 0 auto; }
52
+ @include responsive-rule('flex-shrink'){ flex: 0 1 auto; }
53
+ @include responsive-rule('flex-none'){ flex: 0 0 auto; }
68
54
 
69
55
  @for $i from 1 through 12 {
70
56
  @include responsive-rule('order-#{$i}'){ order: $i; }
@@ -80,6 +66,16 @@
80
66
  @include responsive-rule('col-start-#{$i}'){ grid-column-start: $i; }
81
67
  @include responsive-rule('col-end-#{$i}'){ grid-column-end: $i; }
82
68
  }
69
+
70
+ @for $i from 0 through 100 {
71
+ @include responsive-rule(".cols-fill-#{$i * 5}-px"){
72
+ grid-template-columns: repeat(auto-fill, minmax($i * 5px, 1fr));
73
+ };
74
+ @include responsive-rule(".cols-fit-#{$i * 5}-px"){
75
+ grid-template-columns: repeat(auto-fit, minmax($i * 5px, 1fr));
76
+ };
77
+ }
78
+
83
79
  @for $i from 1 through 6 {
84
80
  @include responsive-rule('rows-#{$i}'){ grid-template-rows: repeat($i, minmax(0, 1fr)); }
85
81
  @include responsive-rule('row-span-#{$i}'){ grid-row: span $i / span $i; }
@@ -121,6 +117,8 @@
121
117
  center
122
118
  stretch
123
119
  baseline
120
+ flex-start
121
+ flex-end
124
122
  ) {
125
123
  @include responsive-rule('justify-#{$selector}') {
126
124
  justify-items: $selector;
@@ -136,13 +134,15 @@
136
134
  end
137
135
  center
138
136
  stretch
137
+ flex-start
138
+ flex-end
139
139
  ) {
140
140
  .flex,
141
141
  .grid{
142
- @include responsive-rule('justify-#{$selector}') {
142
+ @include responsive-rule('justify-self-#{$selector}') {
143
143
  justify-self: $selector;
144
144
  }
145
- @include responsive-rule('align-#{$selector}') {
145
+ @include responsive-rule('align-self-#{$selector}') {
146
146
  align-self: $selector;
147
147
  }
148
148
  }
@@ -13,6 +13,10 @@ static
13
13
  @each $direction in 'top' 'right' 'bottom' 'left' {
14
14
  @include responsive-rule('.#{$direction}-0'){ #{$direction}: 0; }
15
15
  @include responsive-rule('.#{$direction}-auto'){ #{$direction}: auto; }
16
+ .sticky-#{$direction}{
17
+ position:sticky;
18
+ #{$direction}: 0;
19
+ }
16
20
  }
17
21
  @include responsive-rule('position-fill'){
18
22
  position:absolute;
@@ -32,6 +32,12 @@
32
32
  @include responsive-rule(".min-width-#{$i * 5}-vw"){ min-width: $i * 5vw };
33
33
  @include responsive-rule(".max-width-#{$i * 5}-vw"){ max-width: $i * 5vw };
34
34
  }
35
+
36
+ @for $i from 0 through 20 {
37
+ @include responsive-rule(".height-#{$i * 5}-vh"){ height: $i * 5vh };
38
+ @include responsive-rule(".min-height-#{$i * 5}-vh"){ min-height: $i * 5vh };
39
+ @include responsive-rule(".max-height-#{$i * 5}-vh"){ max-height: $i * 5vh };
40
+ }
35
41
  @include responsive-rule(".height-100-vh"){ height: 100vh; };
36
42
  @include responsive-rule(".min-height-100-vh"){ min-height: 100vh; };
37
43
  @include responsive-rule(".max-height-100-vh"){ max-height: 100vh; };
@@ -41,14 +47,14 @@
41
47
  //----------------------------------------------------------------
42
48
  @include responsive-rule(".height-auto"){ height: auto; };
43
49
  @include responsive-rule(".height-full"){ height: 100%; };
44
- @include responsive-rule(".max-height-auto"){ height: auto; };
45
- @include responsive-rule(".max-height-full"){ height: 100%; };
46
- @include responsive-rule(".min-height-auto"){ height: auto; };
47
- @include responsive-rule(".min-height-full"){ height: 100%; };
50
+ @include responsive-rule(".max-height-auto"){ max-height: auto; };
51
+ @include responsive-rule(".max-height-full"){ max-height: 100%; };
52
+ @include responsive-rule(".min-height-auto"){ min-height: auto; };
53
+ @include responsive-rule(".min-height-full"){ min-height: 100%; };
48
54
 
49
55
  @include responsive-rule(".width-auto"){ width: auto; };
50
56
  @include responsive-rule(".width-full"){ width: 100%; };
51
- @include responsive-rule(".max-width-auto"){ width: auto; };
52
- @include responsive-rule(".max-width-full"){ width: 100%; };
53
- @include responsive-rule(".min-width-auto"){ width: auto; };
54
- @include responsive-rule(".min-width-full"){ width: 100%; };
57
+ @include responsive-rule(".max-width-auto"){ max-width: auto; };
58
+ @include responsive-rule(".max-width-full"){ max-width: 100%; };
59
+ @include responsive-rule(".min-width-auto"){ min-width: auto; };
60
+ @include responsive-rule(".min-width-full"){ min-width: 100%; };
@@ -1,5 +1,25 @@
1
1
  @import 'uniform/mixins';
2
2
 
3
+ //----------------------------------------------------------------
4
+ // Spacing
5
+ //----------------------------------------------------------------
6
+ @include size-rule('.space-h') using ($size) {
7
+ & > * + * {
8
+ margin-left: $size;
9
+ }
10
+ }
11
+ @include size-rule('.space-v') using ($size) {
12
+ & > * + * {
13
+ margin-top: $size
14
+ }
15
+ }
16
+ @include size-rule('.space') using ($size) {
17
+ & > * + * {
18
+ margin-top: $size;
19
+ margin-left: $size;
20
+ }
21
+ }
22
+
3
23
  //----------------------------------------------------------------
4
24
  // Margin
5
25
  //----------------------------------------------------------------
@@ -36,20 +56,6 @@
36
56
  }
37
57
 
38
58
 
39
- //----------------------------------------------------------------
40
- // Spacing
41
- //----------------------------------------------------------------
42
- @include size-rule('.space-h') using ($size) {
43
- & > * + * {
44
- margin-left: $size;
45
- }
46
- }
47
- @include size-rule('.space-v') using ($size) {
48
- & > * + * {
49
- margin-top: $size
50
- }
51
- }
52
-
53
59
 
54
60
  //----------------------------------------------------------------
55
61
  // Pad
@@ -0,0 +1,5 @@
1
+ @import 'uniform/mixins';
2
+
3
+ @include size-rule('.stroke') using ($size) {stroke-width: $size;}
4
+ @include color-rule('.stroke') using ($color) {stroke: $color;}
5
+ @include color-rule('.fill') using ($color) {fill: $color;}
@@ -8,6 +8,7 @@
8
8
  --text-opacity: 1.0;
9
9
  color: rgba($color, var(--text-opacity));
10
10
  }
11
+ @include responsive-rule('.text-current') { color: currentColor; }
11
12
  @include responsive-rule('.text-md') { font-size: 1rem; }
12
13
  @include color-rule('.placeholder') using ($color){
13
14
  &::placeholder{
@@ -13,6 +13,9 @@
13
13
  .overflow-x{
14
14
  overflow-x: auto;
15
15
  }
16
+ .overflow-x-scroll{
17
+ overflow-y: scroll;
18
+ }
16
19
 
17
20
  //----------------------------------------------------------------
18
21
  // Element Reset
@@ -25,6 +28,8 @@
25
28
  padding: 0;
26
29
  margin: 0;
27
30
  list-style:none;
31
+ text-decoration: none;
32
+ color: inherit;
28
33
  }
29
34
 
30
35
  //----------------------------------------------------------------
@@ -45,6 +50,9 @@ grab
45
50
  cursor: $type;
46
51
  }
47
52
  }
53
+ .cursor-move-v {
54
+ cursor: ns-resize;
55
+ }
48
56
 
49
57
  //----------------------------------------------------------------
50
58
  // SVG
@@ -1,3 +1,3 @@
1
1
  module Uniform
2
- VERSION = "3.0.0.beta2"
2
+ VERSION = "3.0.0.beta10"
3
3
  end