uniform-ui 2.4.1 → 3.0.0.beta8

Sign up to get free protection for your applications and to get access to all the features.
Files changed (70) hide show
  1. checksums.yaml +4 -4
  2. data/lib/assets/javascripts/uniform.js +13 -13
  3. data/lib/assets/javascripts/uniform/checkbox.js +59 -16
  4. data/lib/assets/javascripts/uniform/component.js +27 -4
  5. data/lib/assets/javascripts/uniform/dropdown.js +78 -209
  6. data/lib/assets/javascripts/uniform/floating-label-input.js +65 -0
  7. data/lib/assets/javascripts/uniform/icons.js +12 -3
  8. data/lib/assets/javascripts/uniform/modal.js +29 -30
  9. data/lib/assets/javascripts/uniform/popover.js +26 -24
  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 +39 -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/modal.scss +21 -36
  24. data/lib/assets/stylesheets/uniform/components/nav.scss +50 -87
  25. data/lib/assets/stylesheets/uniform/components/pointer.scss +83 -0
  26. data/lib/assets/stylesheets/uniform/components/select.scss +97 -107
  27. data/lib/assets/stylesheets/uniform/components/table.scss +31 -138
  28. data/lib/assets/stylesheets/uniform/components/thumb.scss +40 -25
  29. data/lib/assets/stylesheets/uniform/components/z-input.scss +26 -0
  30. data/lib/assets/stylesheets/uniform/defaults.scss +31 -10
  31. data/lib/assets/stylesheets/uniform/functions.scss +32 -7
  32. data/lib/assets/stylesheets/uniform/mixins.scss +110 -57
  33. data/lib/assets/stylesheets/uniform/utilities.scss +55 -0
  34. data/lib/assets/stylesheets/uniform/utilities/background.scss +9 -0
  35. data/lib/assets/stylesheets/uniform/utilities/borders.scss +84 -0
  36. data/lib/assets/stylesheets/uniform/utilities/effects.scss +172 -0
  37. data/lib/assets/stylesheets/uniform/utilities/layout.scss +181 -0
  38. data/lib/assets/stylesheets/uniform/utilities/position.scss +42 -0
  39. data/lib/assets/stylesheets/uniform/utilities/sizing.scss +60 -0
  40. data/lib/assets/stylesheets/uniform/utilities/spacing.scss +68 -0
  41. data/lib/assets/stylesheets/uniform/utilities/svg.scss +5 -0
  42. data/lib/assets/stylesheets/uniform/utilities/text.scss +158 -0
  43. data/lib/assets/stylesheets/uniform/variables.scss +113 -42
  44. data/lib/uniform/version.rb +1 -1
  45. metadata +22 -45
  46. data/lib/assets/javascripts/uniform.jquery.js +0 -152
  47. data/lib/assets/javascripts/uniform/dom-helpers.js +0 -158
  48. data/lib/assets/javascripts/uniform/floating-label.js +0 -54
  49. data/lib/assets/stylesheets/uniform-print.scss +0 -1
  50. data/lib/assets/stylesheets/uniform/components.scss +0 -11
  51. data/lib/assets/stylesheets/uniform/components/alert.scss +0 -72
  52. data/lib/assets/stylesheets/uniform/components/card.scss +0 -93
  53. data/lib/assets/stylesheets/uniform/components/form.scss +0 -149
  54. data/lib/assets/stylesheets/uniform/components/form/checkbox-collection.scss +0 -103
  55. data/lib/assets/stylesheets/uniform/components/form/checkbox.scss +0 -58
  56. data/lib/assets/stylesheets/uniform/components/form/floating-label.scss +0 -65
  57. data/lib/assets/stylesheets/uniform/components/form/input-group.scss +0 -56
  58. data/lib/assets/stylesheets/uniform/components/form/tristate.scss +0 -88
  59. data/lib/assets/stylesheets/uniform/components/grid.scss +0 -179
  60. data/lib/assets/stylesheets/uniform/components/row.scss +0 -67
  61. data/lib/assets/stylesheets/uniform/components/tooltip.scss +0 -41
  62. data/lib/assets/stylesheets/uniform/helpers.scss +0 -133
  63. data/lib/assets/stylesheets/uniform/helpers/border.scss +0 -28
  64. data/lib/assets/stylesheets/uniform/helpers/colors.scss +0 -24
  65. data/lib/assets/stylesheets/uniform/helpers/margin.scss +0 -27
  66. data/lib/assets/stylesheets/uniform/helpers/padding.scss +0 -9
  67. data/lib/assets/stylesheets/uniform/helpers/position.scss +0 -20
  68. data/lib/assets/stylesheets/uniform/helpers/sizes.scss +0 -38
  69. data/lib/assets/stylesheets/uniform/helpers/text.scss +0 -152
  70. data/lib/assets/stylesheets/uniform/print/grid.scss +0 -50
@@ -1,9 +1,9 @@
1
1
  import Component from './component';
2
2
  import Popover from './popover';
3
- import * as Helpers from './dom-helpers';
4
3
 
5
4
  /*
6
- message: html
5
+ anchor: element
6
+ content: html
7
7
  align: top|bottom (default: top)
8
8
  container: document.body
9
9
 
@@ -16,43 +16,42 @@ import * as Helpers from './dom-helpers';
16
16
  */
17
17
  export default class Tooltip extends Component {
18
18
  initialize (options) {
19
+ this.el = options.anchor;
19
20
  options = options || {}
20
21
  this.options = {
21
22
  align: 'top',
22
- container: false
23
+ container: document.body
23
24
  };
24
25
  Object.assign(this.options, this.pick(options, Object.keys(this.options)));
25
26
 
26
27
  this.enabled = true;
27
- this.message = options.message;
28
- options.el.tooltip = this;
28
+ this.content = options.content;
29
+ this.el.tooltip = this;
29
30
 
30
31
  this.listenTo(this.el, 'mouseenter', this.show);
31
32
  this.listenTo(this.el, 'mouseleave', this.hide);
32
33
  }
33
34
 
34
35
  render () {
35
-
36
36
  return this;
37
37
  }
38
38
 
39
39
  show () {
40
40
  if(!this.enabled) return;
41
41
  clearTimeout(this.hide_timeout);
42
+ this.el.classList.add('-active');
42
43
  if (this.popup) {
43
44
  this.popup.show()
44
45
  } else {
45
46
  this.popup = new Popover({
46
- content: `<div class="uniformTooltip-popup">
47
- <div class='uniformTooltip-pointer'></div>
48
- ${this.message}
49
- </div>`,
47
+ content: this.content,
48
+ class: 'uniformPointer -bottom bg-gray-70 bg-opacity-85 text-white rounded pad-1/2x text-sm max-width-300-px',
50
49
  anchor: this.el,
51
50
  align: this.options.align == "top" ? `center top` : 'center 100%',
52
51
  offset: {
53
52
  top: -7
54
53
  },
55
- container: this.options.container || document.body
54
+ container: this.options.container
56
55
  }).render();
57
56
  }
58
57
  }
@@ -60,6 +59,7 @@ export default class Tooltip extends Component {
60
59
  hide () {
61
60
  this.hide_timeout = setTimeout(() => {
62
61
  this.popup.remove();
62
+ this.el.classList.remove('-active');
63
63
  delete this.popup;
64
64
  }, 300)
65
65
  }
@@ -1,11 +1,7 @@
1
- @import 'uniform/functions';
2
- @import 'uniform/variables';
3
-
4
- @import 'uniform/mixins';
1
+ @import 'uniform/base';
5
2
  @import 'uniform/defaults';
6
3
 
7
- @import 'uniform/components';
8
4
  @import 'uniform/components/*';
9
5
 
10
- @import 'uniform/helpers';
11
- @import 'uniform/helpers/*';
6
+ @import 'uniform/utilities';
7
+ @import 'uniform/utilities/*';
@@ -1,3 +1,22 @@
1
1
  @import 'uniform/functions';
2
2
  @import 'uniform/variables';
3
- @import 'uniform/mixins';
3
+ @import 'uniform/mixins';
4
+ *{
5
+ border-width: 0;
6
+ border-style: solid;
7
+ border-color: rgba(var(--border-color), var(--border-opacity));
8
+ }
9
+
10
+ .uniformInput,
11
+ .uniformInputGroup,
12
+ .uniformSelect{
13
+ --focus-color: #{red(color('blue'))}, #{green(color('blue'))}, #{blue(color('blue'))};
14
+ }
15
+
16
+ body{
17
+ --breakpoints: #{mapToString($breakpoints)};
18
+ --bg-opacity: 1.0;
19
+ --shadow-opacity: 0.1;
20
+ --border-opacity: 1.0;
21
+ --border-color: #{red(color('gray'))}, #{green(color('gray'))}, #{blue(color('gray'))};
22
+ }
@@ -1,235 +1,222 @@
1
+ @import 'uniform/functions';
2
+ @import 'uniform/mixins';
3
+
1
4
  //----------------------------------------------------------------
2
5
  // Buttons
3
6
  //----------------------------------------------------------------
4
- .uniformButtonGroup a,
5
- .uniformButton{
7
+ .uniformButton,
8
+ .uniformButtonGroup > *{
9
+ --bg-opacity: 1;
10
+ --text-opacity: 1;
11
+ --border-opacity: 0.6;
12
+ --active-opacity: 0.2;
13
+ --border-radius: 0.35em;
14
+ --pad-v: 0.5em;
15
+ --pad-h: 0.85em;
16
+
17
+ position:relative; // for adding loaders to buttons which have position:absolute
18
+ z-index: 1;
6
19
  outline: none;
7
20
  appearance: none;
8
- cursor: pointer;
9
21
  display: inline-block;
10
22
  text-decoration: none;
23
+ user-select: none;
11
24
 
12
- padding: 0.5em 0.75em;
25
+ padding: var(--pad-v) var(--pad-h);
13
26
  vertical-align: middle;
14
27
  text-align: center;
15
28
  line-height:1;
16
- position:relative; // for adding loaders to buttons which have position:absolute
17
- transition: all 0.2s;
18
-
19
- color:color('gray-darkest');
20
- background-color: white;
21
- background-image: linear-gradient(white 33%, darken(white, 7));
22
- border-radius: 0.25em;
23
- border:1px solid lighten(color('gray-darkest'), 40);
29
+ border-radius: var(--border-radius);
30
+ border-style: solid;
31
+ border-width: 1px;
24
32
 
25
- &.input-height{
26
- line-height: 1.4;
27
- }
33
+ color: rgba(color('gray-80'), var(--text-opacity));
34
+ background-color: rgba(white, var(--bg-opacity));
35
+ background-image: linear-gradient(rgba(black, 0) 33%, rgba(black, 0.1));
36
+ background-blend-mode: multiply;
37
+ border-color: rgba(color('gray-50'), var(--border-opacity));
38
+
39
+ transition: color 100ms, box-shadow 100ms, background 100ms, padding 100ms;
40
+ box-shadow: var(--box-shadow);
41
+ }
28
42
 
29
- &:visited{
30
- color:color('gray-darkest');
43
+
44
+ //----------------------------------------------------------------
45
+ // Color
46
+ //----------------------------------------------------------------
47
+ @each $name, $color in $color_spectrum {
48
+ .uniformButton.-#{$name},
49
+ .uniformButtonGroup.-#{$name} > *{
50
+ background-color: rgba($color, var(--bg-opacity));
51
+ background-image: linear-gradient(rgba(black, 0) 33%, rgba(black, 0.3));
52
+ background-blend-mode: overlay;
53
+ border-color: rgba(darken($color, 30), var(--border-opacity));
54
+ @if lightness($color) > 65% {
55
+ color: rgba(change-color($color, $lightness: 30), var(--text-opacity));
56
+ } @else {
57
+ color: rgba(white, var(--text-opacity));
58
+ }
59
+ @if lightness($color) < 35% {
60
+ --active-opacity: 0.5;
61
+ }
62
+ }
63
+ .uniformButton.-#{$name}.-outline{
64
+ border-color: rgba($color, var(--border-opacity));
65
+ color: rgba($color, var(--text-opacity));
66
+ }
67
+ .uniformButtonGroup.-outline.-#{$name} > * {
68
+ border-color: rgba($color, var(--border-opacity));
69
+ color: rgba($color, var(--text-opacity));
31
70
  }
71
+ }
32
72
 
73
+ .uniformButton,
74
+ .uniformButtonGroup > *{
75
+ //----------------------------------------------------------------
76
+ // States
77
+ //----------------------------------------------------------------
33
78
  &:hover,
79
+ &.-hover{
80
+ --bg-opacity: 1;
81
+ --border-opacity: 1;
82
+ background-image: linear-gradient(rgba(white, 0.2) 33%, rgba(white, 0));
83
+ }
84
+
34
85
  &:focus,
35
- &.hover{
36
- box-shadow: inset 0 0 10px rgba(black, 0.1);
86
+ &.-focus{
87
+ box-shadow: 0 0 0 2px rgba(color('blue'), 0.7);
88
+ z-index: 2;
89
+ &.-active,
90
+ &:active{
91
+ box-shadow: 0 0 0 2px rgba(color('blue'), 0.7), inset 1px 1px 3px rgba(black, 0.2);
92
+ }
37
93
  }
94
+
38
95
  &:active,
39
- &.active{
96
+ &.-active{
97
+ box-shadow: inset 1px 1px 3px rgba(black, var(--active-opacity));
98
+ padding-top: calc(var(--pad-v) + 1px);
99
+ padding-bottom: calc(var(--pad-v) - 1px);
40
100
  }
41
101
 
42
- &.-green,
43
- &.-blue,
44
- &.-red {
45
- color: white;
46
- }
47
- &.-green { background: color('green');}
48
- &.-blue { background: color('blue');}
49
- &.-red { background: color('red');}
50
- &.-green { background: color('green');}
51
- &.-blue { background: color('blue');}
52
- &.-red { background: color('red');}
53
-
102
+ &:disabled,
103
+ &.-disabled{
104
+ --text-opacity: 0.5;
105
+ cursor: not-allowed;
106
+ background-image:
107
+ linear-gradient(rgba(black, .5), rgba(black, 0.5)),
108
+ linear-gradient(hsla(0,0%,50%, .5), hsla(0,0%,50%, .5));
109
+ background-blend-mode: saturation, luminosity;
110
+ }
54
111
 
112
+ &:visited{
113
+ color: currentColor;
114
+ }
115
+ }
116
+
117
+ .uniformButton{
55
118
  //----------------------------------------------------------------
56
- // styles
119
+ // Styles
57
120
  //----------------------------------------------------------------
58
121
  &.-clear{
59
122
  background: none;
60
123
  border-color: transparent;
61
124
  }
62
125
  &.-outline{
63
- border-color: color('gray-darkest');
64
- background:none !important;
65
- text-shadow:none !important;
66
- &.-dashed{
67
- border-style:dashed;
68
- }
69
- }
70
- &.-small{
71
- padding: 0.3em 0.5em;
72
- font-size: 0.8em;
73
- }
74
- &.-large{
75
- padding: 1em 2em;
76
- font-weight:bold;
77
- }
78
- &.-input {
79
- padding-top: 0.65em;
80
- padding-bottom: 0.65em;
81
- }
82
-
83
- &.-warn:hover{
84
- border-color:color('red');
85
- background: color('red');
86
- color: white;
87
- &.clear{
88
- color: color('red');
89
- background: none;
90
- }
91
- &.-outline{
92
- color: color('red');
93
- border-color: lighten(color('gray-darkest'), 30);
94
- }
126
+ --bg-opacity: 0;
127
+ --border-opacity: 1;
128
+ border-width: 0.1429em;
129
+ background-image: none;
95
130
  }
96
131
 
97
132
  &.-block{
98
- padding-left:0.5em !important;
99
- padding-right:0.5em !important;
100
133
  display:block;
101
134
  width:100%;
102
135
  }
103
-
104
- &.-raw{
105
- background: none;
106
- border: none;
107
- text-shadow: none;
108
- font-weight: normal;
109
- box-shadow: none;
110
- }
111
136
 
112
137
 
113
138
  //----------------------------------------------------------------
114
- // colors
139
+ // Size
115
140
  //----------------------------------------------------------------
116
-
117
- &.-green{
118
- background-color: darken(color('green'), 3);
119
- background-image: linear-gradient(lighten(color('green'), 5), darken(color('green'), 3));
120
- border-color: darken(color('green'), 3);
121
-
122
- &.-outline{
123
- border-color: color('green-dark');
124
- color:color('green-dark');
125
- }
126
- }
127
-
128
- &.-green,
129
- &.-red,
130
- &.-blue{
131
- color:white;
132
- text-shadow:0 1px 2px rgba(black, 0.1);
133
- }
134
-
135
- &.-red{
136
- background-color: darken(color('red'), 3);
137
- background-image: linear-gradient(color('red'), darken(color('red'), 3));
138
- border-color: darken(color('red'), 3);
139
- &.-outline{
140
- color:color('red-dark');
141
- border-color:color('red-dark');
142
- }
141
+ &.-xs{
142
+ --pad-v: 0.1em;
143
+ --pad-h: 0.3em;
143
144
  }
144
-
145
- &.-blue{
146
- background-color: darken(color('blue'), 3);
147
- background-image: linear-gradient(color('blue'), darken(color('blue'), 3));
148
- border-color:darken(color('blue'), 3);
149
-
150
- &.-outline{
151
- color:color('blue');
152
- border-color: color('blue');
153
- }
145
+ &.-sm{
146
+ --pad-v: 0.25em;
147
+ --pad-h: 0.5em;
154
148
  }
155
- &.-white{
156
- &.-outline{
157
- color:white;
158
- border-color:white;
159
- }
149
+ &.-lg{
150
+ --pad-v: 1em;
151
+ --pad-h: 2em;
160
152
  }
161
-
162
- &.-gray{
163
- color: color('gray-darker');
164
- &.-outline{
165
- color: color('gray-darker');
166
- border-color: color('gray-dark');
167
- }
153
+ &.-xl{
154
+ --pad-v: 1.5em;
155
+ --pad-h: 3em;
156
+ --border-radius: 0.5em;
168
157
  }
169
-
170
- &.-gray-dark{
171
- color: white;
172
- background-color: darken(color('gray-dark'), 3);
173
- background-image: linear-gradient(color('gray-dark'), darken(color('gray-dark'), 3));
174
- border-color: darken(color('gray-dark'), 3);
175
- &.-outline{
176
- color: lighten(color('gray'), 20);
177
- border-color: lighten(color('gray'), 30);
178
- }
179
- }
180
-
181
- &:disabled,
182
- &.disabled,
183
- &:disabled:hover,
184
- &.disabled:hover{
185
- cursor: not-allowed;
186
- color: color('gray');
187
- background-image:none !important;
188
- background-color: color('gray-light');
189
- border-color: color('gray');
190
- text-shadow: none;
191
- &.disabled-dark{
192
- background-color: color('gray-darker');
193
- color: color('gray-darkest');
194
- border-color: color('gray-darkest');
195
- opacity: 0.75;
196
- }
197
- }
198
- }
199
- span.uniformButton{
200
- cursor: auto;
201
- }
202
- a.uniformButton{
203
- user-select: none;
204
158
  }
205
159
 
160
+
161
+
162
+ //----------------------------------------------------------------
163
+ // Button Group
164
+ //----------------------------------------------------------------
165
+
206
166
  .uniformButtonGroup {
207
- font-size: 0;
208
- a, button{
209
- outline: none;
210
- appearance: none;
211
- cursor: pointer;
212
- font-size: 1rem;
213
- position:relative;
214
- z-index: 1;
215
- margin-right: -1px;
167
+ display: inline-flex;
168
+ & > * {
216
169
  border-radius: 0;
217
- &:last-of-type{
218
- border-radius: 0 0.25em 0.25em 0;
219
- }
220
- &:first-of-type{
221
- border-radius: 0.25em 0 0 0.25em;
222
- }
223
- &.active{
224
- background-color: darken(color('green'), 3);
225
- background-image: linear-gradient(lighten(color('green'), 5), darken(color('green'), 3));
226
- border-color: darken(color('green'), 3);
227
- color: white;
170
+ margin-right: -1px;
171
+ &:first-child{
172
+ border-top-left-radius: var(--border-radius);
173
+ border-bottom-left-radius: var(--border-radius);
228
174
  }
229
- &:disabled{
230
- background: color('background');
231
- color: color('gray-light');
232
- cursor: not-allowed;
175
+ &:last-child{
176
+ border-top-right-radius: var(--border-radius);
177
+ border-bottom-right-radius: var(--border-radius);
233
178
  }
234
179
  }
180
+
181
+
182
+ //----------------------------------------------------------------
183
+ // Styles
184
+ //----------------------------------------------------------------
185
+ &.-clear > * {
186
+ background: none;
187
+ border-color: transparent;
188
+ }
189
+ &.-outline > *{
190
+ --bg-opacity: 0;
191
+ --border-opacity: 1;
192
+ border-width: 0.1429em;
193
+ margin-right: -0.1429em;
194
+ background-image: none;
195
+ }
196
+ &.block,
197
+ &.-block{
198
+ display: flex;
199
+ }
200
+
201
+
202
+ //----------------------------------------------------------------
203
+ // Size
204
+ //----------------------------------------------------------------
205
+ &.-xs > *{
206
+ --pad-v: 0.1em;
207
+ --pad-h: 0.3em;
208
+ }
209
+ &.-sm > *{
210
+ --pad-v: 0.25em;
211
+ --pad-h: 0.5em;
212
+ }
213
+ &.-lg > *{
214
+ --pad-v: 1em;
215
+ --pad-h: 2em;
216
+ }
217
+ &.-xl > *{
218
+ --pad-v: 1.5em;
219
+ --pad-h: 3em;
220
+ --border-radius: 0.5em;
221
+ }
235
222
  }