uniform-ui 2.4.1 → 3.0.0.beta2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (68) hide show
  1. checksums.yaml +4 -4
  2. data/lib/assets/javascripts/uniform.js +8 -21
  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 +13 -12
  9. data/lib/assets/javascripts/uniform/popover.js +24 -20
  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 -51
  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 -7
  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 +53 -0
  33. data/lib/assets/stylesheets/uniform/utilities/background.scss +9 -0
  34. data/lib/assets/stylesheets/uniform/utilities/borders.scss +85 -0
  35. data/lib/assets/stylesheets/uniform/utilities/effects.scss +172 -0
  36. data/lib/assets/stylesheets/uniform/utilities/layout.scss +174 -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/text.scss +158 -0
  41. data/lib/assets/stylesheets/uniform/variables.scss +104 -44
  42. data/lib/uniform/version.rb +1 -1
  43. metadata +21 -45
  44. data/lib/assets/javascripts/uniform.jquery.js +0 -152
  45. data/lib/assets/javascripts/uniform/dom-helpers.js +0 -158
  46. data/lib/assets/javascripts/uniform/floating-label.js +0 -54
  47. data/lib/assets/stylesheets/uniform-print.scss +0 -1
  48. data/lib/assets/stylesheets/uniform/components.scss +0 -11
  49. data/lib/assets/stylesheets/uniform/components/alert.scss +0 -72
  50. data/lib/assets/stylesheets/uniform/components/card.scss +0 -93
  51. data/lib/assets/stylesheets/uniform/components/form.scss +0 -149
  52. data/lib/assets/stylesheets/uniform/components/form/checkbox-collection.scss +0 -103
  53. data/lib/assets/stylesheets/uniform/components/form/checkbox.scss +0 -58
  54. data/lib/assets/stylesheets/uniform/components/form/floating-label.scss +0 -65
  55. data/lib/assets/stylesheets/uniform/components/form/input-group.scss +0 -56
  56. data/lib/assets/stylesheets/uniform/components/form/tristate.scss +0 -88
  57. data/lib/assets/stylesheets/uniform/components/grid.scss +0 -179
  58. data/lib/assets/stylesheets/uniform/components/row.scss +0 -67
  59. data/lib/assets/stylesheets/uniform/components/tooltip.scss +0 -41
  60. data/lib/assets/stylesheets/uniform/helpers.scss +0 -133
  61. data/lib/assets/stylesheets/uniform/helpers/border.scss +0 -28
  62. data/lib/assets/stylesheets/uniform/helpers/colors.scss +0 -24
  63. data/lib/assets/stylesheets/uniform/helpers/margin.scss +0 -27
  64. data/lib/assets/stylesheets/uniform/helpers/padding.scss +0 -9
  65. data/lib/assets/stylesheets/uniform/helpers/position.scss +0 -20
  66. data/lib/assets/stylesheets/uniform/helpers/sizes.scss +0 -38
  67. data/lib/assets/stylesheets/uniform/helpers/text.scss +0 -152
  68. 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
+ // Margin
5
+ //----------------------------------------------------------------
6
+
7
+ @include size-rule('.margin') using ($size) {
8
+ margin: $size;
9
+ }
10
+ @include size-rule('.margin-v') using ($size) {
11
+ margin-top: $size;
12
+ margin-bottom: $size;
13
+ }
14
+ @include size-rule('.margin-h') using ($size) {
15
+ margin-left: $size;
16
+ margin-right: $size;
17
+ }
18
+ @include size-rule('.margin-nest') using ($size) {
19
+ margin: -$size;
20
+ }
21
+ @include size-rule('.margin-v-nest') using ($size) {
22
+ margin-top: -$size;
23
+ margin-bottom: -$size;
24
+ }
25
+ @include size-rule('.margin-h-nest') using ($size) {
26
+ margin-left: -$size;
27
+ margin-right: -$size;
28
+ }
29
+ @each $direction in 'top' 'right' 'bottom' 'left' {
30
+ @include size-rule('.margin-#{$direction}') using ($size) {
31
+ margin-#{$direction}: $size;
32
+ };
33
+ @include size-rule('.margin-#{$direction}-nest') using ($size) {
34
+ margin-#{$direction}: -$size;
35
+ };
36
+ }
37
+
38
+
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
+
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,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,132 @@
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;
73
-
74
-
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
+ '': 1rem,
78
+ 'none': 0,
79
+ "xs": 0.8rem,
80
+ "sm": 0.9rem,
81
+ "lg": 1.2rem,
82
+ "xl": 1.4rem,
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,
123
+ ),
124
+ text: (
125
+ '': 1rem,
126
+ "xs": 0.8rem,
127
+ "sm": 0.9rem,
128
+ "lg": 1.2rem,
129
+ "xl": 1.4rem,
130
+ "2x": 2rem,
131
+ "4x": 4rem,
132
+ "8x": 8rem
133
+ )
134
+ ), if(variable-exists('sizes'), $sizes, ()));