uniform-ui 2.3.8 → 3.0.0.beta5

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 (69) hide show
  1. checksums.yaml +4 -4
  2. data/lib/assets/javascripts/uniform.js +19 -19
  3. data/lib/assets/javascripts/uniform/checkbox.js +59 -16
  4. data/lib/assets/javascripts/uniform/component.js +20 -4
  5. data/lib/assets/javascripts/uniform/dropdown.js +78 -209
  6. data/lib/assets/javascripts/uniform/floating-label-input.js +63 -0
  7. data/lib/assets/javascripts/uniform/icons.js +12 -3
  8. data/lib/assets/javascripts/uniform/modal.js +15 -18
  9. data/lib/assets/javascripts/uniform/popover.js +42 -25
  10. data/lib/assets/javascripts/uniform/resizer.js +26 -30
  11. data/lib/assets/javascripts/uniform/select.js +188 -222
  12. data/lib/assets/javascripts/uniform/tooltip.js +11 -11
  13. data/lib/assets/stylesheets/uniform.scss +3 -7
  14. data/lib/assets/stylesheets/uniform/base.scss +20 -1
  15. data/lib/assets/stylesheets/uniform/components/buttons.scss +171 -184
  16. data/lib/assets/stylesheets/uniform/components/checkbox.scss +104 -0
  17. data/lib/assets/stylesheets/uniform/components/container.scss +3 -2
  18. data/lib/assets/stylesheets/uniform/components/dropdown.scss +8 -5
  19. data/lib/assets/stylesheets/uniform/components/floating-label-input.scss +29 -0
  20. data/lib/assets/stylesheets/uniform/components/input-group.scss +30 -0
  21. data/lib/assets/stylesheets/uniform/components/label.scss +21 -16
  22. data/lib/assets/stylesheets/uniform/components/loaders.scss +28 -54
  23. data/lib/assets/stylesheets/uniform/components/nav.scss +50 -87
  24. data/lib/assets/stylesheets/uniform/components/pointer.scss +83 -0
  25. data/lib/assets/stylesheets/uniform/components/select.scss +97 -107
  26. data/lib/assets/stylesheets/uniform/components/table.scss +31 -138
  27. data/lib/assets/stylesheets/uniform/components/thumb.scss +40 -25
  28. data/lib/assets/stylesheets/uniform/components/z-input.scss +20 -0
  29. data/lib/assets/stylesheets/uniform/defaults.scss +31 -10
  30. data/lib/assets/stylesheets/uniform/functions.scss +32 -7
  31. data/lib/assets/stylesheets/uniform/mixins.scss +110 -57
  32. data/lib/assets/stylesheets/uniform/utilities.scss +55 -0
  33. data/lib/assets/stylesheets/uniform/utilities/background.scss +9 -0
  34. data/lib/assets/stylesheets/uniform/utilities/borders.scss +84 -0
  35. data/lib/assets/stylesheets/uniform/utilities/effects.scss +172 -0
  36. data/lib/assets/stylesheets/uniform/utilities/layout.scss +177 -0
  37. data/lib/assets/stylesheets/uniform/utilities/position.scss +42 -0
  38. data/lib/assets/stylesheets/uniform/utilities/sizing.scss +54 -0
  39. data/lib/assets/stylesheets/uniform/utilities/spacing.scss +62 -0
  40. data/lib/assets/stylesheets/uniform/utilities/svg.scss +5 -0
  41. data/lib/assets/stylesheets/uniform/utilities/text.scss +158 -0
  42. data/lib/assets/stylesheets/uniform/variables.scss +111 -42
  43. data/lib/uniform/version.rb +1 -1
  44. metadata +25 -48
  45. data/lib/assets/javascripts/uniform.jquery.js +0 -152
  46. data/lib/assets/javascripts/uniform/dom-helpers.js +0 -158
  47. data/lib/assets/javascripts/uniform/floating-label.js +0 -54
  48. data/lib/assets/stylesheets/uniform-print.scss +0 -1
  49. data/lib/assets/stylesheets/uniform/components.scss +0 -11
  50. data/lib/assets/stylesheets/uniform/components/alert.scss +0 -72
  51. data/lib/assets/stylesheets/uniform/components/card.scss +0 -93
  52. data/lib/assets/stylesheets/uniform/components/form.scss +0 -149
  53. data/lib/assets/stylesheets/uniform/components/form/checkbox-collection.scss +0 -103
  54. data/lib/assets/stylesheets/uniform/components/form/checkbox.scss +0 -58
  55. data/lib/assets/stylesheets/uniform/components/form/floating-label.scss +0 -65
  56. data/lib/assets/stylesheets/uniform/components/form/input-group.scss +0 -56
  57. data/lib/assets/stylesheets/uniform/components/form/tristate.scss +0 -88
  58. data/lib/assets/stylesheets/uniform/components/grid.scss +0 -179
  59. data/lib/assets/stylesheets/uniform/components/row.scss +0 -67
  60. data/lib/assets/stylesheets/uniform/components/tooltip.scss +0 -41
  61. data/lib/assets/stylesheets/uniform/helpers.scss +0 -133
  62. data/lib/assets/stylesheets/uniform/helpers/border.scss +0 -28
  63. data/lib/assets/stylesheets/uniform/helpers/colors.scss +0 -24
  64. data/lib/assets/stylesheets/uniform/helpers/margin.scss +0 -27
  65. data/lib/assets/stylesheets/uniform/helpers/padding.scss +0 -9
  66. data/lib/assets/stylesheets/uniform/helpers/position.scss +0 -20
  67. data/lib/assets/stylesheets/uniform/helpers/sizes.scss +0 -38
  68. data/lib/assets/stylesheets/uniform/helpers/text.scss +0 -152
  69. data/lib/assets/stylesheets/uniform/print/grid.scss +0 -50
@@ -0,0 +1,54 @@
1
+ @import 'uniform/mixins';
2
+
3
+ //----------------------------------------------------------------
4
+ // Fractionals
5
+ //----------------------------------------------------------------
6
+ @for $denominator from 1 through 12 {
7
+ @for $numerator from 1 through $denominator {
8
+ @include responsive-rule(".width-#{$numerator}\\\/#{$denominator}"){ width: $numerator/$denominator * 100% };
9
+ @include responsive-rule(".min-width-#{$numerator}\\\/#{$denominator}"){ min-width: $numerator/$denominator * 100% };
10
+ @include responsive-rule(".max-width-#{$numerator}\\\/#{$denominator}"){ max-width: $numerator/$denominator * 100% };
11
+ }
12
+ }
13
+
14
+ //----------------------------------------------------------------
15
+ // Pixels
16
+ //----------------------------------------------------------------
17
+ @for $i from 0 through 100 {
18
+ @include responsive-rule(".width-#{$i * 5}-px"){ width: $i * 5px };
19
+ @include responsive-rule(".max-width-#{$i * 5}-px"){ max-width: $i * 5px };
20
+ @include responsive-rule(".min-width-#{$i * 5}-px"){ min-width: $i * 5px };
21
+
22
+ @include responsive-rule(".height-#{$i * 5}-px"){ height: $i * 5px };
23
+ @include responsive-rule(".min-height-#{$i * 5}-px"){ min-height: $i * 5px };
24
+ @include responsive-rule(".max-height-#{$i * 5}-px"){ max-height: $i * 5px };
25
+ }
26
+
27
+ //----------------------------------------------------------------
28
+ // Viewport
29
+ //----------------------------------------------------------------
30
+ @for $i from 0 through 20 {
31
+ @include responsive-rule(".width-#{$i * 5}-vw"){ width: $i * 5vw };
32
+ @include responsive-rule(".min-width-#{$i * 5}-vw"){ min-width: $i * 5vw };
33
+ @include responsive-rule(".max-width-#{$i * 5}-vw"){ max-width: $i * 5vw };
34
+ }
35
+ @include responsive-rule(".height-100-vh"){ height: 100vh; };
36
+ @include responsive-rule(".min-height-100-vh"){ min-height: 100vh; };
37
+ @include responsive-rule(".max-height-100-vh"){ max-height: 100vh; };
38
+
39
+ //----------------------------------------------------------------
40
+ // Full
41
+ //----------------------------------------------------------------
42
+ @include responsive-rule(".height-auto"){ height: auto; };
43
+ @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%; };
48
+
49
+ @include responsive-rule(".width-auto"){ width: auto; };
50
+ @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%; };
@@ -0,0 +1,62 @@
1
+ @import 'uniform/mixins';
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
+
17
+ //----------------------------------------------------------------
18
+ // Margin
19
+ //----------------------------------------------------------------
20
+
21
+ @include size-rule('.margin') using ($size) {
22
+ margin: $size;
23
+ }
24
+ @include size-rule('.margin-v') using ($size) {
25
+ margin-top: $size;
26
+ margin-bottom: $size;
27
+ }
28
+ @include size-rule('.margin-h') using ($size) {
29
+ margin-left: $size;
30
+ margin-right: $size;
31
+ }
32
+ @include size-rule('.margin-nest') using ($size) {
33
+ margin: -$size;
34
+ }
35
+ @include size-rule('.margin-v-nest') using ($size) {
36
+ margin-top: -$size;
37
+ margin-bottom: -$size;
38
+ }
39
+ @include size-rule('.margin-h-nest') using ($size) {
40
+ margin-left: -$size;
41
+ margin-right: -$size;
42
+ }
43
+ @each $direction in 'top' 'right' 'bottom' 'left' {
44
+ @include size-rule('.margin-#{$direction}') using ($size) {
45
+ margin-#{$direction}: $size;
46
+ };
47
+ @include size-rule('.margin-#{$direction}-nest') using ($size) {
48
+ margin-#{$direction}: -$size;
49
+ };
50
+ }
51
+
52
+
53
+
54
+ //----------------------------------------------------------------
55
+ // Pad
56
+ //----------------------------------------------------------------
57
+ @include size-rule('.pad') using ($size) { padding: $size;}
58
+ @include size-rule('.pad-v') using ($size) { padding-top: $size; padding-bottom: $size;}
59
+ @include size-rule('.pad-h') using ($size) { padding-left: $size; padding-right: $size;}
60
+ @each $direction in 'top' 'right' 'bottom' 'left' {
61
+ @include size-rule('.pad-#{$direction}') using ($size) {padding-#{$direction}: $size;};
62
+ }
@@ -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;}
@@ -0,0 +1,158 @@
1
+ @import 'uniform/mixins';
2
+
3
+ //----------------------------------------------------------------
4
+ // Color
5
+ //----------------------------------------------------------------
6
+
7
+ @include color-rule('.text') using ($color){
8
+ --text-opacity: 1.0;
9
+ color: rgba($color, var(--text-opacity));
10
+ }
11
+ @include responsive-rule('.text-md') { font-size: 1rem; }
12
+ @include color-rule('.placeholder') using ($color){
13
+ &::placeholder{
14
+ --placeholder-opacity: 1.0;
15
+ color: rgba($color, var(--placeholder-opacity));
16
+ }
17
+ }
18
+
19
+
20
+
21
+ //----------------------------------------------------------------
22
+ // Size
23
+ //----------------------------------------------------------------
24
+ @include size-rule('.text') using ($size) {font-size: $size;}
25
+
26
+
27
+ //----------------------------------------------------------------
28
+ // Style
29
+ //----------------------------------------------------------------
30
+ @include responsive-rule('.text-mono') { font-family: monospace, monospace; }
31
+ @include responsive-rule('.text-uppercase') { text-transform: uppercase; }
32
+ @include responsive-rule('.text-lowercase') { text-transform: lowercase; }
33
+ @include responsive-rule('.text-capitalize') { text-transform: capitalize; }
34
+ @include responsive-rule('.text-normal-case') { text-transform: none; }
35
+ @include responsive-rule('.text-italic') { font-style: italic; }
36
+ @include pseudo-class-rule('text-underline') { text-decoration: underline; }
37
+ @include responsive-rule('.text-no-underline') { text-decoration: none; }
38
+ @include responsive-rule('.text-line-through') { text-decoration: line-through; }
39
+
40
+ @each $class, $weight in (
41
+ hairline: 100,
42
+ thin: 200,
43
+ light: 300,
44
+ normal: 400,
45
+ medium: 500,
46
+ semibold: 600,
47
+ bold: 700,
48
+ extrabold: 800,
49
+ black: 900
50
+ ) {
51
+ @include responsive-rule('.text-#{$weight}') { font-weight: $weight; }
52
+ @include responsive-rule('.text-#{$class}') { font-weight: $weight; }
53
+ }
54
+
55
+ //----------------------------------------------------------------
56
+ // Positioning
57
+ //----------------------------------------------------------------
58
+ @include responsive-rule('.text-left'){
59
+ text-align: left;
60
+ }
61
+ @include responsive-rule('.text-right'){
62
+ text-align: right;
63
+ }
64
+ @include responsive-rule('.text-center'){
65
+ text-align: center;
66
+ }
67
+ @include responsive-rule('.text-justify'){
68
+ text-align: justify;
69
+ }
70
+
71
+
72
+ //----------------------------------------------------------------
73
+ // Leading
74
+ //----------------------------------------------------------------
75
+ @each $style, $height in (
76
+ none: 1,
77
+ tight: 1.25,
78
+ snug: 1.375,
79
+ normal: 1.5,
80
+ relaxed: 1.625,
81
+ loose: 2
82
+ ) {
83
+ @include responsive-rule('leading-#{$style}') {
84
+ line-height: $height;
85
+ }
86
+ }
87
+
88
+ //----------------------------------------------------------------
89
+ // Tracking
90
+ //----------------------------------------------------------------
91
+ @each $style, $height in (
92
+ tighter: -0.05em,
93
+ tight: -0.025em,
94
+ normal: 0,
95
+ wide: 0.025em,
96
+ wider: 0.05em,
97
+ widest: 0.1em
98
+ ) {
99
+ @include responsive-rule('tracking-#{$style}') {
100
+ letter-spacing: $height;
101
+ }
102
+ }
103
+
104
+ //----------------------------------------------------------------
105
+ // Columns
106
+ //----------------------------------------------------------------
107
+
108
+ @include responsive-rule('.text-col-2'){
109
+ column-count: 2;
110
+ column-gap: 5em;
111
+ }
112
+ @include responsive-rule('.text-col-3'){
113
+ column-count: 3;
114
+ column-gap: 5em;
115
+ }
116
+
117
+
118
+ //----------------------------------------------------------------
119
+ // Breaking
120
+ //----------------------------------------------------------------
121
+ .text-no-break{
122
+ break-inside: avoid-column;
123
+ }
124
+ .text-break{
125
+ word-break: break-all;
126
+ }
127
+ .text-nowrap,
128
+ .text-no-wrap{
129
+ white-space: nowrap;
130
+ }
131
+ .text-overflow-hidden{
132
+ text-overflow: ellipsis;
133
+ overflow: hidden;
134
+ }
135
+
136
+ //----------------------------------------------------------------
137
+ // Lists
138
+ //----------------------------------------------------------------
139
+ @include responsive-rule('text-list-none'){ list-style-type: none; }
140
+ @include responsive-rule('text-list-disc'){ list-style-type: disc; }
141
+ @include responsive-rule('text-list-decimal'){ list-style-type: decimal; }
142
+ @include responsive-rule('text-list-inside'){ list-style-position: inside; }
143
+ @include responsive-rule('text-list-outside'){ list-style-position: outside; }
144
+
145
+
146
+ //----------------------------------------------------------------
147
+ // Select
148
+ //----------------------------------------------------------------
149
+ @each $type in (
150
+ none
151
+ text
152
+ all
153
+ auto
154
+ ) {
155
+ .select-#{$type}{
156
+ user-select: $type;
157
+ }
158
+ }
@@ -3,72 +3,141 @@
3
3
  //----------------------------------------------------------------
4
4
  $text-inputs: "input:not([type=search]):not([type=submit]):not([type=checkbox]):not([type=radio])";
5
5
  $system-font: -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Oxygen-Sans,Ubuntu,Cantarell,"Helvetica Neue",sans-serif;
6
+ $base-font: $system-font;
6
7
 
8
+ $base-font: if(variable-exists('base-font'), $base-font, $system-font);
9
+
10
+
11
+ //----------------------------------------------------------------
12
+ // Includes
13
+ //----------------------------------------------------------------
14
+ $include_child_utilities: if(variable-exists('include_child_utilities'), $include_child_utilities, false);
15
+ $include_breakpoint_container: if(variable-exists('include_breakpoint_container'), $include_breakpoint_container, false);
16
+ $include_pseudo_utilities: if(variable-exists('include_pseudo_utilities'), $include_pseudo_utilities, [hover]);
7
17
 
8
18
  //----------------------------------------------------------------
9
19
  // Colors
10
20
  //----------------------------------------------------------------
11
- $colors: (
12
- 'background': #f2f2f2,
13
- 'gray-lightest': #F8FAFC,
14
- 'gray-lighter': #F1F5F8,
15
- 'gray-light': #DAE1E7,
16
- 'gray': #B8C2CC,
17
- 'gray-dark': #8795A1,
18
- 'gray-darker': #606F7B,
19
- 'gray-darkest': #3D4852,
21
+
22
+ $colors: if(variable-exists('colors'), $colors, (
23
+ 'gray': #505152,
20
24
  'green': #97C848,
21
- 'green-light': #BBFF00,
22
- 'green-dark': #709239,
23
25
  'blue': #0994E2,
24
- 'blue-bright': #1fa9ff,
25
- 'blue-light': #A7CDF2,
26
- 'blue-dark': #167DBA,
27
26
  'red': #E1563E,
28
- 'red-light': #E5766C,
29
- 'red-dark': #971710,
30
- 'red-bright': #ffab9b,
31
27
  'yellow': #D7E542,
32
- 'yellow-dark': #BBC02C,
33
- 'yellow-light': #E9F75A,
34
- 'black': #000000,
35
- 'white': #FFFFFF
28
+ 'purple': #9461b9
29
+ ));
30
+ $color_spectrum: (
31
+ 'white': #FFFFFF,
36
32
  );
33
+ @each $name, $color in $colors {
34
+ $color_spectrum: map-merge($color_spectrum, ("#{$name}": $color));
35
+ @for $index from 1 through 9 {
36
+ $saturation_adjustment: 0;
37
+ @if saturation($color) > 20% {
38
+ $saturation_adjustment: ((100 - saturation($color)) / 4) * abs(5 - $index);
39
+ }
40
+ $color_spectrum: map-merge($color_spectrum, ("#{$name}-#{(10 - $index) * 10}": change-color($color, $lightness: $index * 10, $saturation: saturation($color) + $saturation_adjustment)));
41
+ }
42
+ }
37
43
 
38
44
 
39
45
  //----------------------------------------------------------------
40
46
  // Breakpoints
41
47
  //----------------------------------------------------------------
42
48
  // 720, 1080, 1440
43
- $breakpoints: (
49
+ $include_breakpoint_container: if(variable-exists('include_breakpoint_container'), $include_breakpoint_container, false);
50
+ $breakpoints: if(variable-exists('breakpoints'), $breakpoints, (
44
51
  sm: "max-width: 719px",
45
52
  md: "min-width: 720px",
46
53
  lg: "min-width: 1080px",
47
54
  xl: "min-width: 1440px"
48
- );
55
+ ));
49
56
 
50
57
 
51
58
  //----------------------------------------------------------------
52
59
  // Sizes
53
60
  //----------------------------------------------------------------
54
- $sizes: (
55
- quarter: 0.25em,
56
- half: 0.5em,
57
- smaller: 0.8em,
58
- small: 0.9em,
59
- base: 1em,
60
- large: 1.2em,
61
- larger: 1.4em,
62
- 2x: 2em,
63
- 4x: 4em,
64
- 8x: 8em
65
- );
66
-
67
-
68
- //----------------------------------------------------------------
69
- // Grid
70
- //----------------------------------------------------------------
71
- $grid-columns: 12;
72
- $grid-gutter: 1em;
61
+ $sizes: map-merge((
62
+ border: (
63
+ '': 1px,
64
+ 'none': 0,
65
+ '2px': 2px,
66
+ '3px': 3px,
67
+ '4px': 4px
68
+ ),
69
+ divide: (
70
+ '': 1px,
71
+ 'none': 0,
72
+ '2px': 2px,
73
+ '3px': 3px,
74
+ '4px': 4px
75
+ ),
76
+ rounded: (
77
+ '': 0.25rem,
78
+ 'none': 0,
79
+ "xs": 0.1rem,
80
+ "sm": 0.2rem,
81
+ "lg": 0.5rem,
82
+ "xl": 1rem,
83
+ ),
84
+ margin: (
85
+ '': 1rem,
86
+ 'none': 0,
87
+ "1\\/4x": 0.25rem,
88
+ "1\\/2x": 0.5rem,
89
+ "3\\/4x": 0.75rem,
90
+ "xs": 0.8rem,
91
+ "sm": 0.9rem,
92
+ "lg": 1.2rem,
93
+ "xl": 1.4rem,
94
+ "2x": 2rem,
95
+ ),
96
+ gap: (
97
+ '': 1rem,
98
+ 'none': 0,
99
+ "xs": 0.8rem,
100
+ "sm": 0.9rem,
101
+ "lg": 1.2rem,
102
+ "xl": 1.4rem,
103
+ ),
104
+ space: (
105
+ '': 1rem,
106
+ 'none': 0,
107
+ "xs": 0.8rem,
108
+ "sm": 0.9rem,
109
+ "lg": 1.2rem,
110
+ "xl": 1.4rem,
111
+ ),
112
+ pad: (
113
+ '' : 1rem,
114
+ 'none' : 0,
115
+ "1\\/4x" : 0.25rem,
116
+ "1\\/2x" : 0.5rem,
117
+ "3\\/4x" : 0.75rem,
118
+ "xs" : 0.8rem,
119
+ "sm" : 0.9rem,
120
+ "lg" : 1.2rem,
121
+ "xl" : 1.4rem,
122
+ "2x" : 2rem,
73
123
 
124
+ ),
125
+ text: (
126
+ '': 1rem,
127
+ "xs" : 0.8rem,
128
+ "sm" : 0.9rem,
129
+ "lg" : 1.2rem,
130
+ "xl" : 1.4rem,
131
+ "2x" : 2rem,
132
+ "4x" : 4rem,
133
+ "8x" : 8rem
74
134
 
135
+ ),
136
+ stroke: (
137
+ "sm" : 0.5px,
138
+ "md" : 1px,
139
+ "lg" : 1.5px,
140
+ "2x" : 2px,
141
+ "3x" : 3px
142
+ )
143
+ ), if(variable-exists('sizes'), $sizes, ()));