uniform-ui 2.3.6 → 3.0.0.beta2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (69) hide show
  1. checksums.yaml +4 -4
  2. data/lib/assets/javascripts/uniform.es5.js +1 -1
  3. data/lib/assets/javascripts/uniform.js +8 -21
  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 +13 -12
  10. data/lib/assets/javascripts/uniform/popover.js +45 -26
  11. data/lib/assets/javascripts/uniform/resizer.js +26 -30
  12. data/lib/assets/javascripts/uniform/select.js +188 -220
  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 -7
  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 +53 -0
  34. data/lib/assets/stylesheets/uniform/utilities/background.scss +9 -0
  35. data/lib/assets/stylesheets/uniform/utilities/borders.scss +85 -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/text.scss +158 -0
  42. data/lib/assets/stylesheets/uniform/variables.scss +104 -44
  43. data/lib/uniform/version.rb +1 -1
  44. metadata +24 -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,104 @@
1
+ .uniformRadio,
2
+ .uniformCheckbox{
3
+ display:inline-block;
4
+ width: 1em;
5
+ height: 1em;
6
+ border: 0.0714em solid color('gray-50');
7
+ vertical-align:middle;
8
+ margin-top: -0.15em;
9
+ border-radius: 0.2856em;
10
+ position:relative;
11
+ transition: border-color 0.05s ease-in;
12
+ box-shadow: inset 0.0714em 0.0714em 0 0 white, inset 0.1428em 0.1428em 0.1428em rgba(black, 0.2);
13
+ color: color('blue');
14
+ outline: 0;
15
+ &::before{
16
+ position:absolute;
17
+ left:50%;
18
+ top:50%;
19
+ transform: translate(-50%, -50%);
20
+ border-radius: 0.25em;
21
+ content:"";
22
+ width: 0em;
23
+ height: 0em;
24
+ transition: width 0.05s ease-in, height 0.05s ease-in;
25
+ background: currentColor;
26
+ }
27
+ &.checked{
28
+ border-color: currentColor;
29
+ &::before{
30
+ width: 1em;
31
+ height: 1em;
32
+ }
33
+ }
34
+ &.-toggle {
35
+ width: 2em;
36
+ height: 1em;
37
+ border-radius: 50%;
38
+ background: color('gray-10');
39
+ box-shadow: inset 1px 1px 2px rgba(black, 0.2);
40
+ }
41
+ &:focus {
42
+ box-shadow: inset 0.0714em 0.0714em 0.0714em rgba(black, 0.2), 0 0 0 0.1428em rgba(color('blue'), 0.7);
43
+ }
44
+ }
45
+ .uniformCheckbox{
46
+ &::before{
47
+ background-image: icon-check(#FFFFFF);
48
+ background-position: center center;
49
+ background-repeat: no-repeat;
50
+ background-size: 80%;
51
+ }
52
+ }
53
+
54
+ .uniformRadio{
55
+ border-radius: 50%;
56
+ &::before{
57
+ border-radius: 50%;
58
+ }
59
+
60
+ &.checked{
61
+ &::before{
62
+ width: 0.5712em;
63
+ height: 0.5712em;
64
+ }
65
+ }
66
+ }
67
+
68
+ .uniformToggle {
69
+ width: 1.4284em;
70
+ height: 0.8572em;
71
+ vertical-align:middle;
72
+ margin-top: -0.1428em;
73
+ background: color('gray-20');
74
+ border-radius: 1em;
75
+ box-shadow: inset 0.0714em 0.0714em 0.0714em rgba(black, 0.2);
76
+ display: inline-block;
77
+ position: relative;
78
+ transition: background 50ms ease-in-out;
79
+ color: color('blue');
80
+ outline: 0;
81
+ &::before{
82
+ content: "";
83
+ transition: right 50ms ease-in-out;
84
+ width: 0.5716em; // 12/14
85
+ height: 0.5716em;
86
+ margin: 0.1428em;
87
+ background: white;
88
+ border-radius: 50%;
89
+ position: absolute;
90
+ right: calc(100% - 0.8398em);
91
+ top: 0;
92
+ box-shadow: 0.0714em 0.0714em 0.0714em rgba(black, 0.2);
93
+ }
94
+ &.checked{
95
+ justify-content: end;
96
+ background: currentColor;
97
+ &::before{
98
+ right: 0;
99
+ }
100
+ }
101
+ &:focus {
102
+ box-shadow: inset 0.0714em 0.0714em 0.0714em rgba(black, 0.2), 0 0 0 0.1428em rgba(color('blue'), 0.7);
103
+ }
104
+ }
@@ -7,12 +7,13 @@
7
7
  padding-right: 1em;
8
8
  }
9
9
 
10
- @include size-rule('lg'){
10
+ @include breakpoint('lg'){
11
11
  .container{
12
12
  max-width: 1080px;
13
13
  }
14
14
  }
15
- @include size-rule('xl'){
15
+
16
+ @include breakpoint('xl'){
16
17
  .container{
17
18
  max-width: 1440px;
18
19
  }
@@ -25,15 +25,18 @@
25
25
  &.square{
26
26
  border-radius: 0;
27
27
  }
28
- &.has-pointer{
29
- @include size-rule('md'){
28
+ }
29
+
30
+ @include breakpoint('md'){
31
+ .uniformDropdown-dropdown{
32
+ &.has-pointer{
30
33
  margin-top:1em;
31
34
  }
32
35
  }
33
36
  }
34
37
 
35
- .uniformDropdown-pointer{
36
- @include size-rule('md'){
38
+ @include breakpoint('md'){
39
+ .uniformDropdown-pointer{
37
40
  position:absolute;
38
41
  bottom: 100%;
39
42
  left: 50%;
@@ -55,7 +58,7 @@
55
58
  }
56
59
  }
57
60
 
58
- @include size-rule('sm'){
61
+ @include breakpoint('sm'){
59
62
  .uniformOverlay{
60
63
  position: fixed;
61
64
  top:0;
@@ -0,0 +1,29 @@
1
+ .uniformFloatingLabelInput{
2
+ position:relative;
3
+
4
+ label {
5
+ --font-size: 1em;
6
+ font-size: var(--font-size);
7
+ display: block;
8
+ position: absolute;
9
+ top: 50%;
10
+ left: 0;
11
+ transform: translateY(-50%);
12
+ transition: font-size 100ms, top 100ms, transform 100ms;
13
+ }
14
+ &.present {
15
+ label {
16
+ opacity: 0.8;
17
+ font-size: calc(var(--font-size) * 0.7);
18
+ top: 0;
19
+ transform: none;
20
+ }
21
+ }
22
+
23
+ &:focus-within{
24
+ color: color('green-60');
25
+ label {
26
+ opacity: 1;
27
+ }
28
+ }
29
+ }
@@ -0,0 +1,30 @@
1
+ .uniformInputGroup{
2
+ background: white;
3
+ border-width: 1px;
4
+ display: flex;
5
+ align-items: center;
6
+ transition: box-shadow 100ms ease-in;
7
+
8
+ &:focus-within{
9
+ border-color: rgba(var(--focus-color), 1);
10
+ box-shadow: 0 0 0 2px rgba(var(--focus-color), 1);
11
+ }
12
+
13
+ & > * {
14
+ flex: 0 1 auto;
15
+ padding-left: 0.5em;
16
+ &:last-child{
17
+ padding-right: 0.5em;
18
+ }
19
+ }
20
+ input,
21
+ .input{
22
+ flex: 1 1 auto;
23
+ border: none !important;
24
+ background:none;
25
+ appearance: none;
26
+ outline: none;
27
+ padding: 0.5em;
28
+ box-shadow: none;
29
+ }
30
+ }
@@ -1,28 +1,33 @@
1
+ @include color-rule('.uniformLabel.') using ($color) {
2
+ color: $color;
3
+ background-color: rgba($color, 0.2);
4
+ }
5
+
1
6
  .uniformLabel{
7
+ --pad-v: 0.1428em;
8
+ --pad-h: 0.357em;
2
9
  display:inline-block;
3
10
  vertical-align:baseline;
4
- padding: 0.0714em 0.357em 0.0714em;
5
- border: 0.1em solid color('gray-darker');
6
- color: color('gray-darker');
11
+ padding: var(--pad-v) var(--pad-h);
7
12
  border-radius: 0.3em;
8
13
  line-height: 1.2;
9
- &.-fill{
10
- border: none;
11
- background: rgba(color('gray-darker'), 0.15);
12
- color: color('gray-darker');
13
- padding: 0.1714em 0.457em 0.1714em;
14
+ background: rgba(color('gray-80'), 0.15);
15
+ &.-outline{
16
+ border: 0.1em solid currentColor;
17
+ background: transparent;
14
18
  }
15
19
  &.-round{
16
20
  border-radius: 1em;
21
+ padding-left: calc(var(--pad-h) * 1.5);
22
+ padding-right: calc(var(--pad-h) * 1.5);
17
23
  }
18
- &.pad-more{
19
- padding: 0.0714em 0.5em;
24
+ &.-lg{
25
+ --pad-v: 0.215em;
26
+ --pad-h: 0.54em;
27
+ }
28
+ &.-xl{
29
+ --pad-v: 0.43em;
30
+ --pad-h: 1.071em;
20
31
  }
21
32
  }
22
33
 
23
- @include colors('.uniformLabel.', ('border-color' 'color'));
24
- @each $key, $value in $colors {
25
- @include size-rules(".uniformLabel.-fill.-#{$key}"){
26
- background-color: rgba($value, 0.15);
27
- }
28
- }
@@ -2,62 +2,39 @@
2
2
  line-height:1em;
3
3
  display:inline-block;
4
4
  white-space:nowrap;
5
- letter-spacing:-.05em;
6
- span{
7
- width: 1em;
5
+ &:before,
6
+ &:after{
7
+ margin: 0 0.2em;
8
+ width: 0.8em;
9
+ height: 0.8em;
10
+ border-radius: 50%;
11
+ background-color: currentColor;
8
12
  display: inline-block;
9
13
  vertical-align: middle;
10
- text-align: center;
11
- &:before{
12
- animation: uniformLoader 1.4s infinite ease both;
13
- animation-delay: 0.3s;
14
- line-height: 0;
15
- vertical-align: middle;
16
- display: inline-block;
17
- width: 80%;
18
- content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 104'><circle cx='52' cy='52' r='52' fill='white'/><circle cx='50' cy='50' r='50' fill='black'/></svg>")
19
- }
20
- }
21
- span:first-of-type:before{
22
- animation-delay: 0s;
23
- }
24
- span:last-of-type:before{
25
- animation-delay: 0.6s;
14
+ line-height: 0;
15
+ animation: uniformLoader 1.4s infinite cubic-bezier(0.65,0,0.35,1);
16
+ content: "";
26
17
  }
27
- .uniformLoader-container{
28
- white-space:nowrap;
29
- }
30
- &.-light{
31
- span{
32
- &:before{
33
- content: url("data:image/svg+xml; utf8, <svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 104 104'><circle cx='52' cy='52' r='52' fill='black'/><circle cx='54' cy='54' r='50' fill='white'/></svg>")
34
- }
35
- }
18
+ &:after{
19
+ animation-delay: 0.7s;
36
20
  }
21
+
37
22
  &.-cover{
38
- display:block;
39
- background:rgba(white, 0.5);
40
23
  position:absolute;
41
- top:0;
42
- left:0;
43
- width:100%;
44
- height:100%;
45
- z-index:999999999;
46
- .uniformLoader-container{
47
- position:absolute;
48
- @include position-center;
49
- }
50
- &.-light{
51
- background:rgba(black, .5);
52
- }
53
- &.transparent{
54
- background: none;
55
- }
56
- }
57
- &.-top{
58
- .uniformLoader-container{
59
- top: 20px;
24
+ top: 0;
25
+ bottom: 0;
26
+ left: 0;
27
+ right: 0;
28
+ &:before,
29
+ &:after{
30
+ position: absolute;
31
+ top: 50%;
32
+ left: 50%;
33
+ margin-top: -0.4em;
34
+ margin-left: -0.4em;
60
35
  }
36
+ &:before {margin-right: 1.2em;}
37
+ &:after { margin-left: 0.8em;}
61
38
  }
62
39
  }
63
40
 
@@ -67,10 +44,10 @@
67
44
  transform: scale(0);
68
45
  opacity: 0;
69
46
  }
70
- 35%{
47
+ 50%{
71
48
  -webkit-transform: scale(1);
72
49
  transform: scale(1);
73
- opacity: 0.8;
50
+ opacity: 1;
74
51
  }
75
52
  100%{
76
53
  -webkit-transform: scale(0);
@@ -1,24 +1,11 @@
1
- @mixin uniformNav-vertical(){
2
- flex-direction: column;
3
- align-items: stretch;
4
- & > * {
5
- padding: 0.5em 0.5em;
6
- }
7
- & > a{
8
- border: none !important; // TODO remove !important
9
- padding-bottom: 0.5em !important; // TODO remove !important
10
- &:hover{
11
- color: color('blue');
12
- background: rgba(black, 0.05);
13
- }
14
- &.active{
15
- color: white;
16
- background: color('green');
17
- }
18
- }
19
- }
20
-
21
1
  .uniformNav{
2
+ --border-opacity: 1;
3
+ --text-opacity: 1;
4
+ --bg-opacity: 0;
5
+
6
+ --hover-color: #{toRGB(color('blue'))};
7
+ --active-color: #{toRGB(color('green-60'))};
8
+ --color: #{toRGB(color('blue'))};
22
9
  display: flex;
23
10
  flex-wrap: wrap;
24
11
  align-items: stretch;
@@ -29,100 +16,76 @@
29
16
  }
30
17
 
31
18
  & > * {
19
+ --text-opacity: 1;
32
20
  flex: 0 0 auto;
33
21
  display: flex;
34
22
  align-items: center;
35
23
  padding: 0 1em;
36
- border-style: solid none;
37
24
  border-color: transparent;
38
25
  border-top-width: 2px;
39
26
  border-bottom-width: 2px;
40
- &.col-fill{
27
+ &.flex-fill{
41
28
  flex: 1 1 auto;
42
29
  }
43
30
  }
44
31
  & > a{
45
32
  text-decoration: none;
33
+ color: rgba(var(--color), var(--text-opacity));
46
34
  &:hover{
47
- color: color('blue');
48
- border-bottom-color: color('blue');
35
+ color: rgba(var(--hover-color), 1);
36
+ border-left-color: rgba(var(--hover-color), var(--border-opacity));
37
+ border-bottom-color: rgba(var(--hover-color), var(--border-opacity));
49
38
  }
50
39
  &.active{
51
- color: color('green-dark');
52
- border-bottom-color: color('green-dark');
40
+ color: rgba(var(--active-color), 1);
41
+ border-left-color: rgba(var(--active-color), 1);
42
+ border-bottom-color: rgba(var(--active-color), 1);
53
43
  }
54
44
  }
55
- &.-pad{
45
+
46
+ &.-pills{
56
47
  & > * {
57
- padding-top: 0.25em;
58
- padding-bottom: 0.25em;
48
+ border: none;
49
+ border-radius: 0.25em;
50
+ padding: 0.25em 0.5em;
59
51
  }
60
- }
61
- &.-pad-more{
62
- & > * {
63
- padding-top: 0.5em;
64
- padding-bottom: 0.5em;
52
+ & > * + * {
53
+ margin-left: 0.25em;
65
54
  }
66
- }
67
-
68
- &.-vertical{
69
- @include uniformNav-vertical();
70
- }
71
- }
72
-
73
- .uniformMainNav{
74
- position: relative;
75
- background: white;
76
- box-shadow:inset 0 -1px 0 0 rgba(black, 0.10);
77
- color: color('gray');
78
- .uniformNav{
79
- & > * {
80
- padding-top: 0.25em;
81
- padding-bottom: 0.25em;
82
- color: color('gray-dark');
55
+ & > a {
56
+ &:hover,
57
+ &.active{
58
+ --bg-opacity: 0.15;
59
+ background-color: rgba(var(--hover-color), var(--bg-opacity));
60
+ }
83
61
  &.active{
84
- color: color('gray-darkest');
62
+ background-color: rgba(var(--active-color), var(--bg-opacity));
85
63
  }
86
64
  }
87
65
  }
88
-
89
- &.bg-none{
90
- background: none;
91
- }
92
-
93
- &.border-bottom-none,
94
- &.border-none{
95
- box-shadow: none;
96
- }
97
-
66
+
98
67
  &.-vertical{
99
- box-shadow: none;
100
- .uniformNav{
101
- @include uniformNav-vertical();
68
+ flex-direction: column;
69
+ align-items: stretch;
70
+ & > * {
71
+ padding: 0.5em;
72
+ border-top-width: 0;
73
+ border-bottom-width: 0;
74
+ border-left-width: 2px;
75
+ border-right-width: 2px;
102
76
  }
103
- }
104
-
105
- &.-invert{
106
- box-shadow:inset 0 -1px 0 0 rgba(white, 0.10);
107
- background: none;
108
- color: rgba(white, 0.7);
109
- .uniformNav{
110
- & > a {
111
- color: rgba(white, 0.6);
112
- &:hover{
113
- color: white;
114
- border-bottom-color: color('blue-bright');
115
- }
116
- &.active{
117
- color: white;
118
- background: rgba(black, 0.15);
119
- border-bottom-color: color('green-light');
120
- }
77
+ &.-pills{
78
+ & > * + * {
79
+ margin-left: 0;
80
+ margin-top: 0.1em;
121
81
  }
122
82
  }
123
- &.border-bottom-none,
124
- &.border-none{
125
- box-shadow: none;
126
- }
127
83
  }
84
+ }
85
+
86
+ @include color-rule('.uniformNav.-active') using ($color) {
87
+ --active-color: #{toRGB($color)};
88
+ }
89
+ @include color-rule('.uniformNav.') using ($color) {
90
+ --color: #{toRGB($color)};
128
91
  }