uniform-ui 2.3.7 → 3.0.0.beta4

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.es5.js +1 -1
  3. data/lib/assets/javascripts/uniform.js +19 -19
  4. data/lib/assets/javascripts/uniform/checkbox.js +59 -16
  5. data/lib/assets/javascripts/uniform/component.js +20 -4
  6. data/lib/assets/javascripts/uniform/dropdown.js +78 -209
  7. data/lib/assets/javascripts/uniform/floating-label-input.js +63 -0
  8. data/lib/assets/javascripts/uniform/icons.js +12 -3
  9. data/lib/assets/javascripts/uniform/modal.js +15 -18
  10. data/lib/assets/javascripts/uniform/popover.js +45 -29
  11. data/lib/assets/javascripts/uniform/resizer.js +26 -30
  12. data/lib/assets/javascripts/uniform/select.js +188 -218
  13. data/lib/assets/javascripts/uniform/tooltip.js +11 -11
  14. data/lib/assets/stylesheets/uniform.scss +3 -7
  15. data/lib/assets/stylesheets/uniform/base.scss +20 -1
  16. data/lib/assets/stylesheets/uniform/components/buttons.scss +171 -184
  17. data/lib/assets/stylesheets/uniform/components/checkbox.scss +104 -0
  18. data/lib/assets/stylesheets/uniform/components/container.scss +3 -2
  19. data/lib/assets/stylesheets/uniform/components/dropdown.scss +8 -5
  20. data/lib/assets/stylesheets/uniform/components/floating-label-input.scss +29 -0
  21. data/lib/assets/stylesheets/uniform/components/input-group.scss +30 -0
  22. data/lib/assets/stylesheets/uniform/components/label.scss +21 -16
  23. data/lib/assets/stylesheets/uniform/components/loaders.scss +28 -51
  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 +20 -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 +174 -0
  38. data/lib/assets/stylesheets/uniform/utilities/position.scss +42 -0
  39. data/lib/assets/stylesheets/uniform/utilities/sizing.scss +54 -0
  40. data/lib/assets/stylesheets/uniform/utilities/spacing.scss +62 -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 +111 -42
  44. data/lib/uniform/version.rb +1 -1
  45. metadata +25 -48
  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,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,174 @@
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 responsive-rule('show'){ display: inherit; }
41
+ @include responsive-rule('hide-empty:empty'){ display: none; }
42
+
43
+
44
+ //----------------------------------------------------------------
45
+ // Float
46
+ //----------------------------------------------------------------
47
+ @include responsive-rule('.float-right'){
48
+ float:right;
49
+ }
50
+ @include responsive-rule('.float-left'){
51
+ float: left;
52
+ }
53
+ @include responsive-rule('.clear'){
54
+ clear:both;
55
+ }
56
+
57
+
58
+ //----------------------------------------------------------------
59
+ // Flex
60
+ //----------------------------------------------------------------
61
+ @include responsive-rule('flex-col'){ flex-direction: column; }
62
+ @include responsive-rule('flex-nowrap'){ flex-wrap: nowrap; }
63
+ @include responsive-rule('flex-wrap'){ flex-wrap: wrap; }
64
+
65
+ @include responsive-rule('flex-initial'){ flex: 0 1 auto; }
66
+ @include responsive-rule('flex-fill'){ flex: 1 1 auto; }
67
+ @include responsive-rule('flex-none'){ flex: none; }
68
+
69
+ @for $i from 1 through 12 {
70
+ @include responsive-rule('order-#{$i}'){ order: $i; }
71
+ }
72
+
73
+
74
+ //----------------------------------------------------------------
75
+ // Grid
76
+ //----------------------------------------------------------------
77
+ @for $i from 1 through 12 {
78
+ @include responsive-rule('cols-#{$i}'){ grid-template-columns: repeat($i, minmax(0, 1fr)); }
79
+ @include responsive-rule('col-span-#{$i}'){ grid-column: span $i / span $i; }
80
+ @include responsive-rule('col-start-#{$i}'){ grid-column-start: $i; }
81
+ @include responsive-rule('col-end-#{$i}'){ grid-column-end: $i; }
82
+ }
83
+ @for $i from 1 through 6 {
84
+ @include responsive-rule('rows-#{$i}'){ grid-template-rows: repeat($i, minmax(0, 1fr)); }
85
+ @include responsive-rule('row-span-#{$i}'){ grid-row: span $i / span $i; }
86
+ @include responsive-rule('row-start-#{$i}'){ grid-row-start: $i; }
87
+ @include responsive-rule('row-end-#{$i}'){ grid-row-end: $i; }
88
+ }
89
+ @include responsive-rule('grid-flow-row'){ grid-auto-flow: row; }
90
+ @include responsive-rule('grid-flow-row-dense'){ grid-auto-flow: row dense; }
91
+ @include responsive-rule('grid-flow-col'){ grid-auto-flow: column; }
92
+ @include responsive-rule('grid-flow-column-dense'){ grid-auto-flow: column dense; }
93
+
94
+ @include size-rule('gap') using ($size) { gap: $size;}
95
+ @include size-rule('gap-h') using ($size) { column-gap: $size;}
96
+ @include size-rule('gap-v') using ($size) { row-gap: $size;}
97
+
98
+
99
+ //----------------------------------------------------------------
100
+ // Alignment
101
+ //----------------------------------------------------------------
102
+ @each $selector, $value in (
103
+ start: flex-start,
104
+ end: flex-end,
105
+ center: center,
106
+ between: space-between,
107
+ around: space-around,
108
+ evenly: space-evenly
109
+ ) {
110
+ @include responsive-rule('justify-content-#{$selector}') {
111
+ justify-content: $value;
112
+ }
113
+ @include responsive-rule('align-content-#{$selector}') {
114
+ align-content: $value;
115
+ }
116
+ }
117
+ @each $selector, $value in (
118
+ auto
119
+ start
120
+ end
121
+ center
122
+ stretch
123
+ baseline
124
+ ) {
125
+ @include responsive-rule('justify-#{$selector}') {
126
+ justify-items: $selector;
127
+ }
128
+ @include responsive-rule('align-#{$selector}') {
129
+ align-items: $selector;
130
+ }
131
+ }
132
+
133
+ @each $selector, $value in (
134
+ auto
135
+ start
136
+ end
137
+ center
138
+ stretch
139
+ ) {
140
+ .flex,
141
+ .grid{
142
+ @include responsive-rule('justify-#{$selector}') {
143
+ justify-self: $selector;
144
+ }
145
+ @include responsive-rule('align-#{$selector}') {
146
+ align-self: $selector;
147
+ }
148
+ }
149
+ }
150
+
151
+
152
+ //----------------------------------------------------------------
153
+ // Object
154
+ //----------------------------------------------------------------
155
+ @include responsive-rule('object-cover') { object-fit: cover;}
156
+ @include responsive-rule('object-contain') { object-fit: contain;}
157
+ @include responsive-rule('object-center') { object-position: center;}
158
+
159
+
160
+ //----------------------------------------------------------------
161
+ // Alignment
162
+ //----------------------------------------------------------------
163
+ @each $position in (
164
+ baseline
165
+ middle
166
+ top
167
+ bottom
168
+ text-top
169
+ text-bottom
170
+ ) {
171
+ @include responsive-rule('align-#{$position}') {
172
+ vertical-align: $position;
173
+ }
174
+ }
@@ -0,0 +1,42 @@
1
+ @import 'uniform/mixins';
2
+
3
+ @each $type in (
4
+ relative
5
+ absolute
6
+ sticky
7
+ fixed
8
+ static
9
+ ){
10
+ @include responsive-rule($type){ position: $type; }
11
+ }
12
+
13
+ @each $direction in 'top' 'right' 'bottom' 'left' {
14
+ @include responsive-rule('.#{$direction}-0'){ #{$direction}: 0; }
15
+ @include responsive-rule('.#{$direction}-auto'){ #{$direction}: auto; }
16
+ }
17
+ @include responsive-rule('position-fill'){
18
+ position:absolute;
19
+ top: 0;
20
+ bottom: 0;
21
+ left: 0;
22
+ right: 0;
23
+ }
24
+ @include responsive-rule('position-center'){
25
+ position:absolute;
26
+ left:50%;
27
+ top:50%;
28
+ transform: translate(-50%, -50%);
29
+ }
30
+ @include responsive-rule('position-v-center'){
31
+ position:absolute;
32
+ top:50%;
33
+ transform: translateY(-50%);
34
+ }
35
+ @include responsive-rule('position-h-center'){
36
+ position:absolute;
37
+ left:50%;
38
+ transform: translateX(-50%);
39
+ }
40
+ @for $i from 1 through 100 {
41
+ .z-#{$i} { z-index: #{$i}; }
42
+ }