uniform-ui 2.4.1 → 3.0.0.beta8

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 (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
@@ -0,0 +1,55 @@
1
+ //----------------------------------------------------------------
2
+ // Overflow
3
+ //----------------------------------------------------------------
4
+ .overflow-hidden{
5
+ overflow: hidden;
6
+ }
7
+ .overflow-y{
8
+ overflow-y: auto;
9
+ }
10
+ .overflow-y-scroll{
11
+ overflow-y: scroll;
12
+ }
13
+ .overflow-x{
14
+ overflow-x: auto;
15
+ }
16
+
17
+ //----------------------------------------------------------------
18
+ // Element Reset
19
+ //----------------------------------------------------------------
20
+ .reset{
21
+ outline: none;
22
+ appearance: none;
23
+ border: none;
24
+ background:none;
25
+ padding: 0;
26
+ margin: 0;
27
+ list-style:none;
28
+ text-decoration: none;
29
+ color: inherit;
30
+ }
31
+
32
+ //----------------------------------------------------------------
33
+ // Cursor
34
+ //----------------------------------------------------------------
35
+ @each $type in (
36
+ auto
37
+ default
38
+ pointer
39
+ wait
40
+ text
41
+ move
42
+ not-allowed
43
+ help
44
+ grab
45
+ ) {
46
+ .cursor-#{$type}{
47
+ cursor: $type;
48
+ }
49
+ }
50
+
51
+ //----------------------------------------------------------------
52
+ // SVG
53
+ //----------------------------------------------------------------
54
+ @include responsive-rule('fill-current'){ fill: currentColor;}
55
+ @include responsive-rule('stroke-current'){ stroke: currentColor;}
@@ -0,0 +1,9 @@
1
+ @import 'uniform/mixins';
2
+
3
+ @include color-rule('.bg') using ($color){
4
+ background-color: rgba(#{red($color)}, #{green($color)}, #{blue($color)}, var(--bg-opacity));
5
+ }
6
+
7
+ @include responsive-rule('bg-none') {
8
+ background: transparent;
9
+ }
@@ -0,0 +1,84 @@
1
+ @import 'uniform/mixins';
2
+
3
+ //----------------------------------------------------------------
4
+ // Border
5
+ //----------------------------------------------------------------
6
+ @include size-rule('.border') using ($size) {
7
+ border-width: $size;
8
+ }
9
+
10
+ @include color-rule('.border') using ($color) {
11
+ --border-color: #{red($color)}, #{green($color)}, #{blue($color)};
12
+ }
13
+
14
+ @include responsive-rule('.border-dashed') {
15
+ border-style: dashed;
16
+ }
17
+
18
+ @each $direction in 'top' 'right' 'bottom' 'left' {
19
+ @include responsive-rule('.border-#{$direction}'){
20
+ border-#{$direction}-width: 1px;
21
+ }
22
+ @include size-rule('.border-#{$direction}') using ($size){
23
+ border-#{$direction}-width: $size;
24
+ }
25
+ @include color-rule('.border-#{$direction}') using ($color) {
26
+ border-#{$direction}-color: rgba(#{red($color)}, #{green($color)}, #{blue($color)}, var(--border-opacity));
27
+ }
28
+ }
29
+
30
+ //----------------------------------------------------------------
31
+ // Border Radius
32
+ //----------------------------------------------------------------
33
+ @include size-rule('.rounded') using ($size){ border-radius: $size;}
34
+ @include size-rule('.rounded-top') using ($size){
35
+ border-top-right-radius: $size;
36
+ border-top-left-radius: $size;
37
+ }
38
+ @include size-rule('.rounded-bottom') using ($size){
39
+ border-bottom-right-radius: $size;
40
+ border-bottom-left-radius: $size;
41
+ }
42
+ @include size-rule('.rounded-left') using ($size){
43
+ border-top-left-radius: $size;
44
+ border-bottom-left-radius: $size;
45
+ }
46
+ @include size-rule('.rounded-right') using ($size){
47
+ border-top-right-radius: $size;
48
+ border-bottom-right-radius: $size;
49
+ }
50
+
51
+ @include responsive-rule('.square') { border-radius: 0;}
52
+ @include responsive-rule('.square-top') {
53
+ border-top-right-radius: 0;
54
+ border-top-left-radius: 0;
55
+ }
56
+ @include responsive-rule('.square-bottom') {
57
+ border-bottom-right-radius: 0;
58
+ border-bottom-left-radius: 0;
59
+ }
60
+ @include responsive-rule('.square-left') {
61
+ border-top-left-radius: 0;
62
+ border-bottom-left-radius: 0;
63
+ }
64
+ @include responsive-rule('.square-right') {
65
+ border-top-right-radius: 0;
66
+ border-bottom-right-radius: 0;
67
+ }
68
+
69
+ @include responsive-rule('.round') { border-radius: 50%;}
70
+
71
+
72
+ //----------------------------------------------------------------
73
+ // Divide
74
+ //----------------------------------------------------------------
75
+ @include size-rule('.divide-h') using ($size) {
76
+ & > * + * {
77
+ border-left-width: $size;
78
+ }
79
+ }
80
+ @include size-rule('.divide-v') using ($size) {
81
+ & > * + * {
82
+ border-top-width: $size;
83
+ }
84
+ }
@@ -0,0 +1,172 @@
1
+ @import 'uniform/mixins';
2
+
3
+ //----------------------------------------------------------------
4
+ // Shadow
5
+ //----------------------------------------------------------------
6
+
7
+ @include pseudo-class-rule('shadow-xs') { box-shadow: 0 1px 0 1px rgba(black, var(--shadow-opacity)); }
8
+ @include pseudo-class-rule('shadow-sm') { box-shadow: 0 1px 2px rgba(black, var(--shadow-opacity)); }
9
+ @include pseudo-class-rule('shadow') { box-shadow: 0 1px 3px rgba(black, var(--shadow-opacity)); }
10
+ @include pseudo-class-rule('shadow-md') { box-shadow: 0 2px 6px rgba(black, var(--shadow-opacity)); }
11
+ @include pseudo-class-rule('shadow-lg') { box-shadow: 0 2px 12px rgba(black, var(--shadow-opacity)); }
12
+ @include pseudo-class-rule('shadow-outline') { box-shadow: 0 0 0 1px rgba(black, var(--shadow-opacity)); }
13
+ @include pseudo-class-rule('shadow-inset') { box-shadow: inset 0 2px 4px rgba(black, var(--shadow-opacity)); }
14
+ @include pseudo-class-rule('shadow-inline') { box-shadow: inset 0 0 0 1px rgba(black, var(--shadow-opacity)); }
15
+
16
+ //----------------------------------------------------------------
17
+ // Opacity
18
+ //----------------------------------------------------------------
19
+ @for $i from 0 through 10 {
20
+
21
+ @include pseudo-class-rule('opacity-#{$i * 10}'){
22
+ opacity: $i / 10;
23
+ }
24
+ @include pseudo-class-rule('shadow-opacity-#{$i * 10}'){
25
+ --shadow-opacity: #{$i / 10};
26
+ }
27
+ @include pseudo-class-rule('text-opacity-#{$i * 10}'){
28
+ --text-opacity: #{$i / 10};
29
+ }
30
+ @include pseudo-class-rule('bg-opacity-#{$i * 10}'){
31
+ --bg-opacity: #{$i / 10};
32
+ }
33
+ @include pseudo-class-rule('border-opacity-#{$i * 10}'){
34
+ --border-opacity: #{$i / 10};
35
+ }
36
+ @include pseudo-class-rule('placeholder-opacity-#{$i * 10}'){
37
+ --placeholder-opacity: #{$i / 10};
38
+ }
39
+ }
40
+
41
+ //----------------------------------------------------------------
42
+ // Transitions
43
+ //----------------------------------------------------------------
44
+ @each $selector, $properties in (
45
+ none: none,
46
+ all: all,
47
+ colors: "background-color, border-color, color, fill, stroke",
48
+ opacity: opacity,
49
+ shadow: box-shadow,
50
+ transform: transform
51
+ ) {
52
+ .transition-#{$selector}{
53
+ transition-property: $properties;
54
+ }
55
+ }
56
+
57
+ @for $i from 0 through 10 {
58
+ .transition-#{$i*100}{
59
+ transition-duration: $i * 100ms;
60
+ }
61
+ }
62
+
63
+
64
+ //----------------------------------------------------------------
65
+ // Transforms
66
+ //----------------------------------------------------------------
67
+ @include responsive-rule('.transform') {
68
+ --transform-translate-x: 0;
69
+ --transform-translate-y: 0;
70
+ --transform-rotate: 0;
71
+ --transform-skew-x: 0;
72
+ --transform-skew-y: 0;
73
+ --transform-scale-x: 1;
74
+ --transform-scale-y: 1;
75
+ transform: translateX(var(--transform-translate-x))
76
+ translateY(var(--transform-translate-y))
77
+ rotate(var(--transform-rotate))
78
+ skewX(var(--transform-skew-x))
79
+ skewY(var(--transform-skew-y))
80
+ scaleX(var(--transform-scale-x))
81
+ scaleY(var(--transform-scale-y)) !important;
82
+ }
83
+ @each $deg in (0 1 2 3 6 12 45 90 180) {
84
+ @include responsive-rule('.rotate-#{$deg}') {
85
+ --transform-rotate: #{$deg}deg;
86
+ }
87
+ @include responsive-rule('.-rotate-#{$deg}') {
88
+ --transform-rotate: -#{$deg}deg;
89
+ }
90
+ }
91
+
92
+
93
+ //----------------------------------------------------------------
94
+ // Animations
95
+ //----------------------------------------------------------------
96
+ //spin pulse ping bounce shimmer blink
97
+
98
+ @each $animation in (
99
+ spin
100
+ ping
101
+ pulse
102
+ bounce
103
+ blink
104
+ ) {
105
+ .animate-#{$animation} {
106
+ --animation-duration: 1s;
107
+ animation: $animation var(--animation-duration) linear infinite;
108
+ }
109
+ }
110
+ @for $i from 0 through 20 {
111
+ .animation-#{$i*100}{
112
+ --animation-duration: $i * 100ms;
113
+ }
114
+ }
115
+ @keyframes spin {
116
+ 0% {
117
+ transform: rotate(0deg);
118
+ }
119
+ 100% {
120
+ transform: rotate(360deg);
121
+ }
122
+ }
123
+ @keyframes ping {
124
+ 0% {
125
+ transform: scale(1);
126
+ opacity: 1;
127
+ }
128
+ 75%, 100% {
129
+ transform: scale(2);
130
+ opacity: 0;
131
+ }
132
+ }
133
+
134
+ @keyframes pulse {
135
+ 0%, 100% {
136
+ opacity: 1;
137
+ }
138
+ 50% {
139
+ opacity: .5;
140
+ }
141
+ }
142
+
143
+ @keyframes bounce {
144
+ 0%, 100% {
145
+ transform: translateY(-25%);
146
+ animationTimingFunction: cubic-bezier(0.8, 0, 1, 1);
147
+ }
148
+ 50% {
149
+ transform: translateY(0);
150
+ animationTimingFunction: cubic-bezier(0, 0, 0.2, 1);
151
+ }
152
+ }
153
+
154
+ @keyframes shimmer {
155
+ 0%, 100% {
156
+ transform: translateY(-25%);
157
+ animationTimingFunction: cubic-bezier(0.8, 0, 1, 1);
158
+ }
159
+ 50% {
160
+ transform: translateY(0);
161
+ animationTimingFunction: cubic-bezier(0, 0, 0.2, 1);
162
+ }
163
+ }
164
+
165
+ @keyframes blink {
166
+ 0% {
167
+ opacity: 0;
168
+ }
169
+ 100%{
170
+ opacity: 1;
171
+ }
172
+ }
@@ -0,0 +1,181 @@
1
+ @import 'uniform/mixins';
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
+ //----------------------------------------------------------------
22
+ // Display
23
+ //----------------------------------------------------------------
24
+ @each $type in (
25
+ inline
26
+ block
27
+ inline-block
28
+ grid
29
+ inline-grid
30
+ flex
31
+ inline-flex
32
+ table
33
+ table-cell
34
+ table-row
35
+ contents
36
+ ){
37
+ @include responsive-rule($type){ display: $type; }
38
+ }
39
+ @include responsive-rule('hide'){ display: none; }
40
+ @include pseudo-class-rule('hide', false){ display: none;}
41
+ @include responsive-rule('show'){ display: inherit; }
42
+ @include pseudo-class-rule('show', false){ display: inherit;}
43
+ @include responsive-rule('hide-empty:empty'){ display: none; }
44
+ @include pseudo-class-rule('hide-empty:empty', false){ display: none;}
45
+
46
+
47
+ //----------------------------------------------------------------
48
+ // Float
49
+ //----------------------------------------------------------------
50
+ @include responsive-rule('.float-right'){
51
+ float:right;
52
+ }
53
+ @include responsive-rule('.float-left'){
54
+ float: left;
55
+ }
56
+ @include responsive-rule('.clear'){
57
+ clear:both;
58
+ }
59
+
60
+
61
+ //----------------------------------------------------------------
62
+ // Flex
63
+ //----------------------------------------------------------------
64
+ @include responsive-rule('flex-col'){ flex-direction: column; }
65
+ @include responsive-rule('flex-nowrap'){ flex-wrap: nowrap; }
66
+ @include responsive-rule('flex-wrap'){ flex-wrap: wrap; }
67
+
68
+ @include responsive-rule('flex-initial'){ flex: 0 1 auto; }
69
+ @include responsive-rule('flex-fill'){ flex: 1 1 auto; }
70
+ @include responsive-rule('flex-none'){ flex: none; }
71
+
72
+ @for $i from 1 through 12 {
73
+ @include responsive-rule('order-#{$i}'){ order: $i; }
74
+ }
75
+
76
+
77
+ //----------------------------------------------------------------
78
+ // Grid
79
+ //----------------------------------------------------------------
80
+ @for $i from 1 through 12 {
81
+ @include responsive-rule('cols-#{$i}'){ grid-template-columns: repeat($i, minmax(0, 1fr)); }
82
+ @include responsive-rule('col-span-#{$i}'){ grid-column: span $i / span $i; }
83
+ @include responsive-rule('col-start-#{$i}'){ grid-column-start: $i; }
84
+ @include responsive-rule('col-end-#{$i}'){ grid-column-end: $i; }
85
+ }
86
+ @for $i from 1 through 6 {
87
+ @include responsive-rule('rows-#{$i}'){ grid-template-rows: repeat($i, minmax(0, 1fr)); }
88
+ @include responsive-rule('row-span-#{$i}'){ grid-row: span $i / span $i; }
89
+ @include responsive-rule('row-start-#{$i}'){ grid-row-start: $i; }
90
+ @include responsive-rule('row-end-#{$i}'){ grid-row-end: $i; }
91
+ }
92
+ @include responsive-rule('grid-flow-row'){ grid-auto-flow: row; }
93
+ @include responsive-rule('grid-flow-row-dense'){ grid-auto-flow: row dense; }
94
+ @include responsive-rule('grid-flow-col'){ grid-auto-flow: column; }
95
+ @include responsive-rule('grid-flow-column-dense'){ grid-auto-flow: column dense; }
96
+
97
+ @include size-rule('gap') using ($size) { gap: $size;}
98
+ @include size-rule('gap-h') using ($size) { column-gap: $size;}
99
+ @include size-rule('gap-v') using ($size) { row-gap: $size;}
100
+
101
+
102
+ //----------------------------------------------------------------
103
+ // Alignment
104
+ //----------------------------------------------------------------
105
+ @each $selector, $value in (
106
+ start: flex-start,
107
+ end: flex-end,
108
+ center: center,
109
+ between: space-between,
110
+ around: space-around,
111
+ evenly: space-evenly
112
+ ) {
113
+ @include responsive-rule('justify-content-#{$selector}') {
114
+ justify-content: $value;
115
+ }
116
+ @include responsive-rule('align-content-#{$selector}') {
117
+ align-content: $value;
118
+ }
119
+ }
120
+ @each $selector, $value in (
121
+ auto
122
+ start
123
+ end
124
+ center
125
+ stretch
126
+ baseline
127
+ flex-start
128
+ flex-end
129
+ ) {
130
+ @include responsive-rule('justify-#{$selector}') {
131
+ justify-items: $selector;
132
+ }
133
+ @include responsive-rule('align-#{$selector}') {
134
+ align-items: $selector;
135
+ }
136
+ }
137
+
138
+ @each $selector, $value in (
139
+ auto
140
+ start
141
+ end
142
+ center
143
+ stretch
144
+ flex-start
145
+ flex-end
146
+ ) {
147
+ .flex,
148
+ .grid{
149
+ @include responsive-rule('justify-self-#{$selector}') {
150
+ justify-self: $selector;
151
+ }
152
+ @include responsive-rule('align-self-#{$selector}') {
153
+ align-self: $selector;
154
+ }
155
+ }
156
+ }
157
+
158
+
159
+ //----------------------------------------------------------------
160
+ // Object
161
+ //----------------------------------------------------------------
162
+ @include responsive-rule('object-cover') { object-fit: cover;}
163
+ @include responsive-rule('object-contain') { object-fit: contain;}
164
+ @include responsive-rule('object-center') { object-position: center;}
165
+
166
+
167
+ //----------------------------------------------------------------
168
+ // Alignment
169
+ //----------------------------------------------------------------
170
+ @each $position in (
171
+ baseline
172
+ middle
173
+ top
174
+ bottom
175
+ text-top
176
+ text-bottom
177
+ ) {
178
+ @include responsive-rule('align-#{$position}') {
179
+ vertical-align: $position;
180
+ }
181
+ }