uniform-ui 2.2.2 → 2.3.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (44) hide show
  1. checksums.yaml +4 -4
  2. data/lib/assets/javascripts/uniform/checkbox.js +2 -2
  3. data/lib/assets/javascripts/uniform/component.js +65 -9
  4. data/lib/assets/javascripts/uniform/dom-helpers.js +32 -10
  5. data/lib/assets/javascripts/uniform/dropdown.js +106 -38
  6. data/lib/assets/javascripts/uniform/floating-label.js +3 -3
  7. data/lib/assets/javascripts/uniform/modal.js +21 -14
  8. data/lib/assets/javascripts/uniform/popover.js +186 -0
  9. data/lib/assets/javascripts/uniform/resizer.js +1 -1
  10. data/lib/assets/javascripts/uniform/select.js +51 -24
  11. data/lib/assets/javascripts/uniform/tooltip.js +18 -71
  12. data/lib/assets/javascripts/uniform.es5.js +1 -1
  13. data/lib/assets/javascripts/uniform.jquery.js +28 -0
  14. data/lib/assets/javascripts/uniform.js +3 -1
  15. data/lib/assets/stylesheets/uniform/components/alert.scss +2 -2
  16. data/lib/assets/stylesheets/uniform/components/buttons.scss +31 -15
  17. data/lib/assets/stylesheets/uniform/components/card.scss +3 -3
  18. data/lib/assets/stylesheets/uniform/components/dropdown.scss +23 -22
  19. data/lib/assets/stylesheets/uniform/components/form/checkbox-collection.scss +4 -4
  20. data/lib/assets/stylesheets/uniform/components/form/checkbox.scss +1 -1
  21. data/lib/assets/stylesheets/uniform/components/form/floating-label.scss +2 -1
  22. data/lib/assets/stylesheets/uniform/components/form/input-group.scss +2 -2
  23. data/lib/assets/stylesheets/uniform/components/form/tristate.scss +88 -0
  24. data/lib/assets/stylesheets/uniform/components/form.scss +12 -6
  25. data/lib/assets/stylesheets/uniform/components/grid.scss +21 -0
  26. data/lib/assets/stylesheets/uniform/components/label.scss +9 -7
  27. data/lib/assets/stylesheets/uniform/components/loaders.scss +39 -39
  28. data/lib/assets/stylesheets/uniform/components/nav.scss +8 -4
  29. data/lib/assets/stylesheets/uniform/components/row.scss +18 -10
  30. data/lib/assets/stylesheets/uniform/components/select.scss +42 -5
  31. data/lib/assets/stylesheets/uniform/components/table.scss +43 -9
  32. data/lib/assets/stylesheets/uniform/components/thumb.scss +1 -1
  33. data/lib/assets/stylesheets/uniform/components/tooltip.scss +8 -30
  34. data/lib/assets/stylesheets/uniform/defaults.scss +1 -6
  35. data/lib/assets/stylesheets/uniform/functions.scss +34 -4
  36. data/lib/assets/stylesheets/uniform/helpers/border.scss +10 -1
  37. data/lib/assets/stylesheets/uniform/helpers/colors.scss +3 -2
  38. data/lib/assets/stylesheets/uniform/helpers/position.scss +6 -0
  39. data/lib/assets/stylesheets/uniform/helpers/text.scss +11 -0
  40. data/lib/assets/stylesheets/uniform/helpers.scss +9 -3
  41. data/lib/assets/stylesheets/uniform/variables.scss +8 -6
  42. data/lib/uniform/version.rb +1 -1
  43. data/lib/uniform.rb +11 -3
  44. metadata +5 -4
data/lib/assets/stylesheets/uniform/components/form/tristate.scss ADDED
@@ -0,0 +1,88 @@
1
+ .uniformTristate{
2
+ display: inline-block;
3
+ background: white;
4
+ border: 0.1em solid rgba(black, 0.2);
5
+ box-shadow: inset 0.1em 0.1em 0.2em rgba(black, 0.1);
6
+ line-height: 0.6;
7
+ border-radius: 10em;
8
+ padding: 0 0.1em;
9
+ position: relative;
10
+ height: 0.8em;
11
+ transition: background 0.1s ease-in-out;
12
+ &.-focus{
13
+ box-shadow: inset 0.1em 0.1em 0.2em rgba(black, 0.1), 0 0 0 0.1em #3b88fd;
14
+ }
15
+
16
+ &.-true{
17
+ background: #3b88fd;
18
+ input{
19
+ &:last-child {
20
+ opacity: 0.5;
21
+ content: icon-x-block(32, #FFFFFF);
22
+ }
23
+ &:first-child{
24
+ content: icon-check(#3b88fd);
25
+ }
26
+ }
27
+ &:before{
28
+ left: -6%;
29
+ transform: translate(0, -50%);
30
+ border-color: #306dca
31
+ }
32
+ }
33
+ &.-false{
34
+ background: #cccccc;
35
+ input{
36
+ &:first-child{
37
+ content: icon-check(#FFFFFF);
38
+ }
39
+ &:last-child{
40
+ content: icon-x-block(32, #a3a3a3);
41
+ }
42
+ }
43
+ &:before{
44
+ left: auto;
45
+ right: -6%;
46
+ transform: translate(0, -50%);
47
+ border-color: #a3a3a3;
48
+ }
49
+ }
50
+ &:before{
51
+ width: .9em;
52
+ height: .9em;
53
+ position: absolute;
54
+ left: 50%;
55
+ top: 50%;
56
+ transform: translate(-50%, -50%);
57
+ border: 0.1em solid #b3b3b3;
58
+ background: white;
59
+ content: "";
60
+ border-radius: 50%;
61
+ transition: left 0.1s ease-in-out;
62
+ z-index: 1;
63
+ }
64
+ input{
65
+ appearance: none;
66
+ -webkit-appearance: none;
67
+ outline: none;
68
+ width: 0.6em;
69
+ height: 0.6em;
70
+ vertical-align: top;
71
+ z-index: 2;
72
+ position: relative;
73
+ cursor: pointer;
74
+ &:focus{
75
+ outline: none;
76
+ }
77
+ &:not(:first-child):not(:last-child){
78
+ margin: 0 0.1em;
79
+ }
80
+
81
+ &:first-child{
82
+ content: icon-check(#b3b3b3);
83
+ }
84
+ &:last-child {
85
+ content: icon-x-block(32, #b3b3b3);
86
+ }
87
+ }
88
+ }
data/lib/assets/stylesheets/uniform/components/form.scss CHANGED
@@ -3,14 +3,15 @@
3
3
  //----------------------------------------------------------------
4
4
  @mixin uniformInput(){
5
5
  font-family: $system-font;
6
- border:1px solid lighten(color('gray'), 40);
6
+ border:1px solid color('gray');
7
7
  padding: 0.5em;
8
8
  line-height: 1.3;
9
9
  outline: none;
10
10
  appearance: none;
11
11
  transition: box-shadow 0.1s ease-in;
12
12
  &:focus{
13
- box-shadow: inset 0 -2px 0 color('green');
13
+ box-shadow: inset 0 -1px 0 color('green');
14
+ border-bottom-color: color('green');
14
15
  }
15
16
  &.-block{
16
17
  width: 100%;
@@ -20,9 +21,13 @@
20
21
  padding: 1em;
21
22
  }
22
23
  &.-invert{
23
- border-color: color('gray');
24
+ border-color: color('gray-dark');
24
25
  border-radius: 0.25em;
25
26
  }
27
+ &:disabled{
28
+ background: color('gray-lighter');
29
+ color: color('gray-dark');
30
+ }
26
31
  }
27
32
  .uniformInput,
28
33
  .uniformForm #{$text-inputs},
@@ -31,7 +36,8 @@
31
36
  }
32
37
 
33
38
  select.uniformInput{
34
- color: color('gray');
39
+ appearance: none;
40
+ color: color('gray-darker');
35
41
  background: white url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0idXRmLTgiPz48IURPQ1RZUEUgc3ZnIFBVQkxJQyAiLS8vVzNDLy9EVEQgU1ZHIDEuMS8vRU4iICJodHRwOi8vd3d3LnczLm9yZy9HcmFwaGljcy9TVkcvMS4xL0RURC9zdmcxMS5kdGQiPjxzdmcgdmVyc2lvbj0iMS4xIiBpZD0iTGF5ZXJfMSIgeG1sbnM9Imh0dHA6Ly93d3cudzMub3JnLzIwMDAvc3ZnIiB4bWxuczp4bGluaz0iaHR0cDovL3d3dy53My5vcmcvMTk5OS94bGluayIgeD0iMHB4IiB5PSIwcHgiIHdpZHRoPSIyNy4xNjdweCIgaGVpZ2h0PSIyOHB4IiB2aWV3Qm94PSIwIDAgMjcuMTY3IDI4IiBlbmFibGUtYmFja2dyb3VuZD0ibmV3IDAgMCAyNy4xNjcgMjgiIHhtbDpzcGFjZT0icHJlc2VydmUiPjxnIGlkPSJpY29tb29uLWlnbm9yZSI+PC9nPjxwYXRoIGZpbGw9IiM1MDUxNTMiIGQ9Ik0xNiwxMWMwLDAuMjcxLTAuMSwwLjUwNS0wLjI5NywwLjcwM2wtNyw3QzguNTA1LDE4LjksOC4yNzEsMTksOCwxOXMtMC41MDUtMC4xLTAuNzAzLTAuMjk3bC03LTdDMC4wOTksMTEuNTA1LDAsMTEuMjcxLDAsMTFzMC4wOTktMC41MDUsMC4yOTctMC43MDNDMC40OTUsMTAuMDk5LDAuNzI5LDEwLDEsMTBoMTRjMC4yNzEsMCwwLjUwNSwwLjA5OSwwLjcwMywwLjI5N0MxNS45LDEwLjQ5NSwxNiwxMC43MjksMTYsMTF6Ii8+PC9zdmc+);
36
42
  background-position: center right;
37
43
  background-repeat: no-repeat;
@@ -77,7 +83,7 @@ button.uniformInput{
77
83
  #{$text-inputs},
78
84
  textarea,
79
85
  .uniformFloatingLabel{
80
- border-color: color('gray');
86
+ border-color: color('gray-darker');
81
87
  border-radius: 0.25em;
82
88
  }
83
89
  [data-uniform-error]{
@@ -85,7 +91,7 @@ button.uniformInput{
85
91
  }
86
92
  .uniformInputGroup{
87
93
  overflow: hidden;
88
- border-color: color('gray');
94
+ border-color: color('gray-darker');
89
95
  border-radius: 0.25em;
90
96
  }
91
97
  }
data/lib/assets/stylesheets/uniform/components/grid.scss CHANGED
@@ -19,6 +19,12 @@
19
19
  padding-right: $grid-gutter;
20
20
  }
21
21
  }
22
+ &.grid-gutter-half {
23
+ & > * {
24
+ padding-left: $grid-gutter/4;
25
+ padding-right: $grid-gutter/4;
26
+ }
27
+ }
22
28
  }
23
29
  @include size-rule('md'){
24
30
  .grid,
@@ -37,6 +43,13 @@
37
43
  padding-right: $grid-gutter * 2;
38
44
  }
39
45
  }
46
+
47
+ .grid.grid-gutter-half {
48
+ & > * {
49
+ padding-left:$grid-gutter / 2;
50
+ padding-right: $grid-gutter / 2;
51
+ }
52
+ }
40
53
  }
41
54
 
42
55
  .grid-h-left {justify-content: flex-start;}
@@ -87,6 +100,10 @@
87
100
  margin-left: -$grid-gutter*2;
88
101
  margin-right: -$grid-gutter*2;
89
102
  }
103
+ &.grid-gutter-half{
104
+ margin-left: -$grid-gutter/2;
105
+ margin-right: -$grid-gutter/2;
106
+ }
90
107
  }
91
108
  .grid-nest-half{
92
109
  margin-left: -0.5em;
@@ -100,6 +117,10 @@
100
117
  margin-left: -$grid-gutter;
101
118
  margin-right: -$grid-gutter;
102
119
  }
120
+ &.grid-gutter-half{
121
+ margin-left: -$grid-gutter/4;
122
+ margin-right: -$grid-gutter/4;
123
+ }
103
124
  }
104
125
  }
105
126
 
data/lib/assets/stylesheets/uniform/components/label.scss CHANGED
@@ -2,14 +2,14 @@
2
2
  display:inline-block;
3
3
  vertical-align:baseline;
4
4
  padding: 0.0714em 0.357em 0.0714em;
5
- border: 0.1em solid color('gray');
6
- color: color('gray');
5
+ border: 0.1em solid color('gray-darker');
6
+ color: color('gray-darker');
7
7
  border-radius: 0.3em;
8
8
  line-height: 1.2;
9
9
  &.-fill{
10
10
  border: none;
11
- background: lighten(color('gray'), 20);
12
- color: white;
11
+ background: rgba(color('gray-darker'), 0.15);
12
+ color: color('gray-darker');
13
13
  padding: 0.1714em 0.457em 0.1714em;
14
14
  }
15
15
  &.-round{
@@ -21,6 +21,8 @@
21
21
  }
22
22
 
23
23
  @include colors('.uniformLabel.', ('border-color' 'color'));
24
- @include colors('.uniformLabel.-fill.', 'background-color'){
25
- color: white;
26
- };
24
+ @each $key, $value in $colors {
25
+ @include size-rules(".uniformLabel.-fill.-#{$key}"){
26
+ background-color: rgba($value, 0.15);
27
+ }
28
+ }
data/lib/assets/stylesheets/uniform/components/loaders.scss CHANGED
@@ -4,32 +4,34 @@
4
4
  white-space:nowrap;
5
5
  letter-spacing:-.05em;
6
6
  span{
7
- color:rgba(black, 1);
8
- text-shadow:-1px -1px 0 rgba(#FFFFFF, .2);
9
- animation: uniformLoader-light 1s infinite linear;
10
- animation-delay: 0.2s;
7
+ width: 1em;
8
+ display: inline-block;
9
+ 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
+ }
11
20
  }
12
- span:first-of-type{
21
+ span:first-of-type:before{
13
22
  animation-delay: 0s;
14
23
  }
15
- span:last-of-type{
16
- animation-delay: 0.4s;
24
+ span:last-of-type:before{
25
+ animation-delay: 0.6s;
17
26
  }
18
27
  .uniformLoader-container{
19
28
  white-space:nowrap;
20
29
  }
21
30
  &.-light{
22
31
  span{
23
- color:rgba(white, 1);
24
- text-shadow:-1px -1px 0 rgba(black, .2);
25
- animation: uniformLoader 1s infinite linear;
26
- animation-delay: 0.2s;
27
- }
28
- span:first-of-type{
29
- animation-delay: 0s;
30
- }
31
- span:last-of-type{
32
- animation-delay: 0.4s;
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
+ }
33
35
  }
34
36
  }
35
37
  &.-cover{
@@ -45,9 +47,12 @@
45
47
  position:absolute;
46
48
  @include position-center;
47
49
  }
48
- &.light{
50
+ &.-light{
49
51
  background:rgba(black, .5);
50
52
  }
53
+ &.transparent{
54
+ background: none;
55
+ }
51
56
  }
52
57
  &.-top{
53
58
  .uniformLoader-container{
@@ -55,26 +60,21 @@
55
60
  }
56
61
  }
57
62
  }
58
- @keyframes uniformLoader {
59
- 0% {
60
- color: rgba(255, 255, 255, 0);
61
- }
62
- 25% {
63
- color: white;
64
- }
65
- 100% {
66
- color: white;
67
- }
68
- }
69
63
 
70
- @keyframes uniformLoader-light {
71
- 0% {
72
- color: black;
73
- }
74
- 25% {
75
- color: rgba(0, 0, 0, 0.2);
76
- }
77
- 100% {
78
- color: rgba(0, 0, 0, 0.2);
79
- }
64
+ @keyframes uniformLoader {
65
+ 0% {
66
+ -webkit-transform: scale(0);
67
+ transform: scale(0);
68
+ opacity: 0;
69
+ }
70
+ 35%{
71
+ -webkit-transform: scale(1);
72
+ transform: scale(1);
73
+ opacity: 0.8;
74
+ }
75
+ 100%{
76
+ -webkit-transform: scale(0);
77
+ transform: scale(0);
78
+ opacity: 0;
79
+ }
80
80
  }
data/lib/assets/stylesheets/uniform/components/nav.scss CHANGED
@@ -73,12 +73,16 @@
73
73
  .uniformMainNav{
74
74
  position: relative;
75
75
  background: white;
76
- box-shadow:0 1px 0 0 rgba(black, 0.15);
76
+ box-shadow:inset 0 -1px 0 0 rgba(black, 0.10);
77
77
  color: color('gray');
78
78
  .uniformNav{
79
79
  & > * {
80
80
  padding-top: 0.25em;
81
81
  padding-bottom: 0.25em;
82
+ color: color('gray-dark');
83
+ &.active{
84
+ color: color('gray-darkest');
85
+ }
82
86
  }
83
87
  }
84
88
 
@@ -99,19 +103,19 @@
99
103
  }
100
104
 
101
105
  &.-invert{
102
- box-shadow:0 1px 0 0 rgba(white, 0.15);
106
+ box-shadow:inset 0 -1px 0 0 rgba(white, 0.10);
103
107
  background: none;
104
108
  color: rgba(white, 0.7);
105
109
  .uniformNav{
106
110
  & > a {
107
- color: rgba(white, 0.7);
111
+ color: rgba(white, 0.6);
108
112
  &:hover{
109
113
  color: white;
110
114
  border-bottom-color: color('blue-bright');
111
115
  }
112
116
  &.active{
113
117
  color: white;
114
- background: rgba(black, 0.1);
118
+ background: rgba(black, 0.15);
115
119
  border-bottom-color: color('green-light');
116
120
  }
117
121
  }
data/lib/assets/stylesheets/uniform/components/row.scss CHANGED
@@ -2,8 +2,8 @@
2
2
  background: white;
3
3
  display: block;
4
4
  text-decoration:none;
5
- color: color('gray');
6
- border: 1px solid color('gray-light');
5
+ color: color('gray-darker');
6
+ border: 1px solid color('gray');
7
7
  &:hover{
8
8
  background: lighten(color('blue'), 50);
9
9
  }
@@ -12,27 +12,35 @@
12
12
  .uniformRowContainer{
13
13
  display: table;
14
14
  width: 100%;
15
- border-left: 1px solid color('gray-light');
16
- border-right: 1px solid color('gray-light');
15
+ border-left: 1px solid color('gray');
16
+ border-right: 1px solid color('gray');
17
+ border-bottom: 1px solid color('gray');
17
18
  .uniformRow{
18
19
  display: table-row;
19
20
  }
21
+ &.-nest{
22
+ border-left: none;
23
+ border-right: none;
24
+ border-bottom: none;
25
+ }
20
26
  }
21
27
  .uniformRow{
22
28
  display: table;
23
29
  width: 100%;
24
- border-left: 1px solid color('gray-light');
25
- border-right: 1px solid color('gray-light');
26
- box-shadow: 0px 1px 0 color('gray-light');
30
+ border-left: 1px solid color('gray');
31
+ border-right: 1px solid color('gray');
32
+ box-shadow: 0px 1px 0 color('gray');
27
33
  &.-middle{
28
34
  & > * {
29
35
  vertical-align: middle;
30
36
  }
31
37
  }
32
38
  & > * {
33
- max-width: 0;
34
39
  display: table-cell;
35
- border-top: 1px solid color('gray-light');
40
+ border-top: 1px solid color('gray');
41
+ &.fix-overflow{
42
+ max-width: 0;
43
+ }
36
44
  }
37
45
  }
38
46
  }
@@ -48,7 +56,7 @@
48
56
  .uniformRow {
49
57
  margin: 0.5em 0;
50
58
  display: block;
51
- border: 1px solid color('gray-light');
59
+ border: 1px solid color('gray');
52
60
  box-shadow: none;
53
61
  & > * {
54
62
  max-width: inherit;
data/lib/assets/stylesheets/uniform/components/select.scss CHANGED
@@ -22,7 +22,7 @@ select.uniformSelect{
22
22
  z-index:0;
23
23
  line-height: 0;
24
24
  svg{
25
- fill: color('gray');
25
+ fill: color('gray-darker');
26
26
  transition: transform 0.2s;
27
27
  }
28
28
  }
@@ -36,6 +36,43 @@ select.uniformSelect{
36
36
  }
37
37
  }
38
38
  }
39
+ .uniformSelect-selection{
40
+ font-size: 0.8em;
41
+ padding: 0.1em;
42
+ padding-left: 0.2em;
43
+ border: 1px solid color('gray');
44
+ background: color('gray-lighter');
45
+ display:inline-block;
46
+ border-radius: 0.25em;
47
+ }
48
+ .uniformSelect-remove{
49
+ display: inline-block;
50
+ width: 1em;
51
+ height: 0.8em;
52
+ margin-left: 0.25em;
53
+ position: relative;
54
+ &:after,
55
+ &:before{
56
+ content: "";
57
+ width: 1px;
58
+ height: 1em;
59
+ transform-origin: 50% 50%;
60
+ transform: rotate(-45deg);
61
+ background: color('gray');
62
+ position:absolute;
63
+ left: 50%;
64
+ top: 0;
65
+ }
66
+ &:before{
67
+ transform: rotate(45deg);
68
+ }
69
+ &:hover{
70
+ &:after,
71
+ &:before{
72
+ background: color('red');
73
+ }
74
+ }
75
+ }
39
76
  }
40
77
 
41
78
  .uniformSelect-options{
@@ -57,8 +94,8 @@ select.uniformSelect{
57
94
  }
58
95
 
59
96
  .uniformSelect-options-actions{
60
- border-top: 1px solid color('gray-light');
61
- border-bottom: 1px solid color('gray-light');
97
+ border-top: 1px solid color('gray');
98
+ border-bottom: 1px solid color('gray');
62
99
  background: color('background');
63
100
  padding: 0.5em;
64
101
  &:empty{
@@ -74,7 +111,7 @@ select.uniformSelect{
74
111
  }
75
112
  .uniformSelect-done{
76
113
  border-radius: 0.25em;
77
- border: 1px solid color('gray-light');
114
+ border: 1px solid color('gray');
78
115
  background: white;
79
116
  }
80
117
  }
@@ -105,7 +142,7 @@ select.uniformSelect{
105
142
  padding: 1em;
106
143
  button{
107
144
  margin-bottom: 0.5em;
108
- border: 1px solid lighten(color('gray'), 40);
145
+ border: 1px solid color('gray');
109
146
  &.uniformSelect-done{
110
147
  margin-bottom: 0;
111
148
  }
data/lib/assets/stylesheets/uniform/components/table.scss CHANGED
@@ -16,6 +16,19 @@
16
16
  display:table-row;
17
17
  }
18
18
  }
19
+ .cell-top{
20
+ vertical-align: top;
21
+ td, th{
22
+ vertical-align: top;
23
+ }
24
+ }
25
+
26
+ .cell-middle{
27
+ vertical-align: middle;
28
+ td, th{
29
+ vertical-align: middle;
30
+ }
31
+ }
19
32
 
20
33
  .uniformTable{
21
34
  width:100%;
@@ -53,8 +66,8 @@
53
66
 
54
67
  .head > *,
55
68
  thead th{
56
- color: lighten(color('gray'), 20);
57
- border-bottom: 1px solid darken(color('gray-light'), 20) !important;
69
+ color: color('gray-dark');
70
+ border-bottom: 1px solid color('gray');
58
71
  }
59
72
 
60
73
  .head.dark > *,
@@ -68,6 +81,13 @@
68
81
  .middle{
69
82
  vertical-align:middle;
70
83
  }
84
+
85
+ tr.bottom > td,
86
+ td.bottom,
87
+ &.bottom > *,
88
+ .bottom{
89
+ vertical-align:bottom;
90
+ }
71
91
 
72
92
  tr.top > td,
73
93
  td.top,
@@ -99,15 +119,23 @@
99
119
  .uniformTableDotLeaders{
100
120
  line-height: 1;
101
121
  table-layout: fixed;
102
- td, th{
103
- padding: 0.3em 0;
104
- }
105
- td{
122
+ & > * > td,
123
+ & > * > * > td,
124
+ & > * > th,
125
+ & > * > * > th{
126
+ padding-top:0.3em;
127
+ padding-bottom: 0.3em;
106
128
  vertical-align:bottom;
129
+ }
130
+
131
+ & > * > td,
132
+ & > * > * > td{
107
133
  padding-left:0.5em;
108
134
  }
109
- th{
110
- background: url("data:image/svg+xml; utf8,#{icon-circle(6, 8, 1, color('gray'))}");
135
+
136
+ & > * > th,
137
+ & > * > * > th{
138
+ background: icon-circle(6, 8, 1, color('gray'));
111
139
  background-repeat: repeat-x;
112
140
  background-position: left bottom;
113
141
  span{
@@ -116,8 +144,14 @@
116
144
  position: relative;
117
145
  }
118
146
  }
147
+ & > thead{
148
+ & > * > th{
149
+ background:none;
150
+ }
151
+ }
119
152
  &.bg-background{
120
- th{
153
+ & > * > th,
154
+ & > * > * > th{
121
155
  background-image:radial-gradient(black 1px, color('background') 0px);
122
156
  span{
123
157
  background-color: color('background');
data/lib/assets/stylesheets/uniform/components/thumb.scss CHANGED
@@ -1,6 +1,6 @@
1
1
  .uniformThumb{
2
2
  display:inline-block;
3
- background: darken(color('gray-light'), 10);
3
+ background: color('gray-darker');
4
4
  position:relative;
5
5
  color: white;
6
6
  img{
data/lib/assets/stylesheets/uniform/components/tooltip.scss CHANGED
@@ -1,50 +1,28 @@
1
1
  .uniformTooltip{
2
2
  position:relative;
3
- cursor: pointer;
3
+ cursor: help;
4
4
  &.active{
5
5
  z-index:2;
6
6
  }
7
7
  }
8
8
  .uniformTooltip-popup{
9
- display:none;
10
- position: absolute;
9
+ position: relative;
11
10
  background: white;
12
- border: 1px solid color('gray-light');
11
+ border: 1px solid color('gray');
13
12
  padding: 0.5em;
14
- opacity: 0;
15
- bottom: 200%;
16
- left: -1.5em;
17
- margin: 0.5em;
18
- z-index: 1;
19
- color: color('gray');
13
+ color: color('gray-darkest');
20
14
  font-size:0.9em;
21
15
  border-radius: 0.25em;
22
16
  max-width: 30vw;
23
- transition: left 0.2s ease-in, top 0.2s ease-in, bottom 0.2s ease-in, opacity 0.2s ease-in;
24
- &.-reveal{
25
- bottom: 100%;
26
- opacity: 1;
27
- &.-align-bottom{
28
- top: 100%;
29
- }
30
- }
31
- &.-align-bottom{
32
- top: 200%;
33
- bottom: auto;
34
- .uniformTooltip-pointer{
35
- top: -1em;
36
- &:after{
37
- top: 85%;
38
- }
39
- }
40
- }
17
+ white-space: normal;
41
18
  p:last-child{
42
19
  margin-bottom: 0;
43
20
  }
44
21
  .uniformTooltip-pointer{
45
22
  position:absolute;
46
23
  top: 100%;
47
- left: 1em;
24
+ left: 50%;
25
+ transform: translateX(-50%);
48
26
  width: 1em;
49
27
  height: 1em;
50
28
  overflow: hidden;
@@ -57,7 +35,7 @@
57
35
  transform: rotate(-45deg);
58
36
  top: -85%;
59
37
  left: 0;
60
- border: 1px solid color('gray-light');
38
+ border: 1px solid color('gray');
61
39
  }
62
40
  }
63
41
  }