uniform-ui 0.5.1 → 0.6

Sign up to get free protection for your applications and to get access to all the features.
Files changed (39) hide show
  1. checksums.yaml +4 -4
  2. data/index.html +900 -389
  3. data/preview/_buttons.html.erb +59 -0
  4. data/preview/_cards.html.erb +82 -0
  5. data/preview/_colors.html.erb +12 -0
  6. data/preview/_forms.html.erb +196 -0
  7. data/preview/_grid.html.erb +49 -0
  8. data/preview/_helpers.html.erb +158 -0
  9. data/preview/_inputs.html.erb +93 -0
  10. data/preview/_installation.html.erb +4 -0
  11. data/preview/_lists.html.erb +53 -0
  12. data/preview/_loaders.html.erb +72 -0
  13. data/preview/_nav.html.erb +46 -0
  14. data/preview/_philosophy.html.erb +33 -0
  15. data/preview/_rows.html.erb +35 -0
  16. data/preview/_tables.html.erb +1 -0
  17. data/preview/_tabs.html.erb +1 -0
  18. data/preview/_tiles.html.erb +1 -0
  19. data/preview/_uniform.html.erb +4 -0
  20. data/preview/index.html.erb +39 -473
  21. data/preview/preview.scss +5 -0
  22. data/site/index.html +23 -23
  23. data/site/preview.css +1 -1
  24. data/site/site/uniform.css +1 -1
  25. data/site/uniform.css +1 -1
  26. data/uniform.gemspec +1 -1
  27. data/vendor/assets/stylesheets/uniform/components/buttons.scss +9 -9
  28. data/vendor/assets/stylesheets/uniform/components/card.scss +1 -1
  29. data/vendor/assets/stylesheets/uniform/components/form.scss +16 -130
  30. data/vendor/assets/stylesheets/uniform/components/inputs.scss +21 -0
  31. data/vendor/assets/stylesheets/uniform/components/lists.scss +52 -52
  32. data/vendor/assets/stylesheets/uniform/components/nav.scss +65 -29
  33. data/vendor/assets/stylesheets/uniform/components/row.scss +20 -61
  34. data/vendor/assets/stylesheets/uniform/components/table-form.scss +141 -246
  35. data/vendor/assets/stylesheets/uniform/components/tabs.scss +1 -1
  36. data/vendor/assets/stylesheets/uniform/components/tile.scss +1 -1
  37. data/vendor/assets/stylesheets/uniform/helpers.scss +1 -6
  38. data/vendor/assets/stylesheets/uniform/mixins.scss +38 -0
  39. metadata +20 -3
@@ -1,44 +1,80 @@
1
1
  .uniform-nav{
2
- list-style: none;
3
- margin: 0;
4
- padding: 0;
2
+ position:relative;
3
+ background: white;
4
+ box-shadow:0 1px 0 0 rgba(black, 0.15);
5
+ color: $gray;
6
+ z-index: 2;
7
+ position: relative;
8
+ .brand{
9
+ padding:7px 0;
10
+ margin-right:10px;
11
+ }
12
+ .container {
13
+ & > * {
14
+ display:inline-block;
15
+ vertical-align:bottom;
16
+ }
17
+
18
+ }
19
+ & > * {
20
+ display:inline-block;
21
+ vertical-align:bottom;
22
+ }
23
+ a{
24
+ color: $gray;
25
+ }
26
+ img{
27
+ display: inline-block;
28
+ }
5
29
  ul {
6
- list-style: none;
7
30
  margin: 0;
8
31
  padding: 0;
9
- }
10
- li{
11
- display:block;
12
- & > *{
13
- display:block;
14
- padding: 10px 20px;
15
- text-decoration:none;
16
- &:hover{
17
- color: black;
18
- background:rgba($green-light, 0.3);
32
+ list-style: none;
33
+ & > li {
34
+ display:inline-block;
35
+ & > *{
36
+ display:inline-block;
37
+ text-decoration:none;
38
+ padding: 16px 10px;
39
+ padding-top:17px;
40
+ background:none;
41
+ &:hover{
42
+ color: $blue;
43
+ }
19
44
  }
20
45
  }
21
46
  }
47
+ .uniform-nav-right {
48
+ float: right;
49
+ }
22
50
 
23
- &.horizontal{
24
-
25
- .uniform-nav-container{
26
- display:table;
27
- & > * {
28
- display:table-cell;
51
+ &.uniform-nav-subnav{
52
+ z-index:1;
53
+ ul {
54
+ & > li {
29
55
  vertical-align:middle;
56
+ & > *{
57
+ padding-top: 6px;
58
+ padding-bottom: 5px;
59
+ }
30
60
  }
31
61
  }
32
- .right{
33
- text-align:right;
34
- float:none;
35
- }
36
62
  }
37
-
38
- &.main{
39
- border-bottom: 1px solid $gray-light;
40
- .uniform-nav-container{
41
- width: 100%;
63
+ }
64
+
65
+ .uniform-nav.vertical{
66
+ ul {
67
+ width: 100%;
68
+ li {
69
+ display:block;
70
+ & > * {
71
+ display:block;
72
+ padding: 10px 20px;
73
+ &:hover{
74
+ color: black;
75
+ background:rgba($green-light, 0.3);
76
+ }
77
+ }
42
78
  }
43
79
  }
44
80
  }
@@ -1,104 +1,63 @@
1
- .uniformRow{
1
+ .uniform-row{
2
2
  line-height:1.3;
3
3
  font-size: 13px;
4
- border-bottom:1px solid $gray-light;
4
+ border:1px solid $gray-light;
5
+ border-bottom:none;
5
6
  min-height: 49px; // two text lines with padding
6
7
  position:relative;
7
8
  overflow:hidden;
9
+ display:block;
10
+ color: $gray;
8
11
  &:hover{
9
12
  background-color: lighten($blue-light, 15);
10
13
  }
11
- &.archived{
12
- color:lighten($gray, 30);
13
- a{
14
- color:lighten($gray, 30);
15
- }
16
- }
17
14
  a:visited{
18
15
  color:#6738e4;
19
16
  }
20
- .btn.outline{
21
- background:white !important;
17
+ &:last-of-type{
18
+ border-bottom:1px solid $gray-light;
22
19
  }
23
- time{
24
- display:none;
25
- }
26
- .highlight{
27
- position:absolute;
28
- right:0;
29
- top: 0;
30
- bottom:0;
31
- width:10px;
32
- background:$green;
33
- }
34
- .details{
20
+ .uniform-row-container{
35
21
  overflow:hidden;
36
- & > div{
37
- padding:0;
22
+ display: block;
23
+ & > *{
24
+ display:block;
25
+ padding: 8px 12px;
38
26
  overflow:hidden;
39
27
  & > .pad {
40
28
  display:block;
41
29
  padding:8px 0;
42
30
  }
43
- & > a:not(.btn){
44
- display:block;
45
- padding:8px 12px;
46
- text-decoration:none;
47
- }
48
31
  }
49
32
  }
50
- .secondary{
33
+ .uniform-row-secondary{
51
34
  font-weight:normal;
52
35
  display:block;
53
36
  font-size:0.9em;
54
37
  color:lighten($gray, 30);
38
+ display: block;
55
39
  }
56
- .actions{
57
- padding-right:10px;
58
- a:visited{
59
- color:inherit;
60
- }
61
- }
62
- .title{
63
- font-weight:bold;
64
- }
65
- .avatar{
40
+ .uniform-row-avatar{
66
41
  vertical-align:top;
67
42
  text-align:center;
68
43
  position:relative;
69
44
  color:darken($background, 30);
70
45
  background-color:darken($background, 30);
71
- a{
72
- padding:0;
73
- }
46
+ float:left;
74
47
  img{
75
48
  min-width:70px;
76
49
  background-color: $gray;
77
- display: inline-block;
78
- }
79
- .label{
80
- min-width:70px;
81
- min-height:63px;
82
- display:block;
83
- padding-top: 26px;
84
- color:white !important;
85
- font-size:10px;
50
+ display: block;
86
51
  }
87
52
  }
88
53
  @include media($xs){
89
- .details{
54
+ .uniform-row-container{
90
55
  & > div > a {
91
56
  padding-top:0;
92
57
  padding-bottom:8px;
93
58
  }
94
- .title a{
95
- padding-top:8px;
96
- }
97
- .address .unit {
98
- display:block;
99
- }
100
59
  }
101
- .avatar{
60
+ .uniform-row-avatar{
102
61
  width:33%;
103
62
  img {
104
63
  width: 100%;
@@ -108,7 +67,7 @@
108
67
  }
109
68
  }
110
69
 
111
- .uniformRow-header{
70
+ .uniform-row-header{
112
71
  position:relative;
113
72
  overflow:visible !important;
114
73
  line-height:1em;
@@ -1,264 +1,159 @@
1
- .table-form #{$text-inputs},
2
- .table-form .textbox,
3
- .table-form textarea{
4
- @include appearance(none);
5
- outline:none;
6
- font-size:1.3em;
7
- font-weight:300;
8
- border:1px solid darken($background, 10);
9
- display:inline-block;
10
- width:100%;
11
- padding:10px;
12
- @include transition(box-shadow 0.2s ease-in);
13
- &:focus{
14
- box-shadow:inset 0 -3px 0 $green;
15
- }
16
- }
17
- .table-form select{
18
- &:focus{
19
- box-shadow:inset 0 -3px 0 $green;
20
- }
21
- }
22
- .table-form .inline-input{
23
- .split{
24
- font-size:1.6em;
25
- text-align:center;
26
- font-weight:300;
27
- }
28
- select{
29
- font-size:1.3em;
30
- font-weight:300;
31
- }
32
- }
33
- .table-form .select2-container{
34
- font-weight:300;
35
- font-size:1.3em;
36
- }
37
- .table-form select{
38
- font-size: 17px;
39
- font-weight:300;
40
- background:none;
41
- color:$gray;
42
- }
43
- .table-form .dropzone{
44
- border:dashed 2px lighten($gray, 20);
45
- margin: 5px;
46
- .dz-message{
47
- font-size:17px;
48
- font-weight:300;
49
- }
50
- }
51
- .table-form{
52
- position:relative;
53
- display:block;
54
- &.bordered{
55
- border:1px solid darken(white, 20);
56
- }
57
- .table-form-container {
1
+ .uniform-form-table{
2
+ border:1px solid darken(white, 20);
3
+ .row{
4
+ margin: 0;
58
5
  display:table;
59
- width:100%;
60
- border-radius:3px;
61
- border:1px solid darken(white, 20);
62
- background:white;
63
- overflow:hidden;
64
- .form-group{
65
- display:table-row;
66
- }
67
- }
68
- label{
69
- font-weight:bold;
70
- display:block;
71
- padding:10px;
72
- width:100%;
73
- text-transform:uppercase;
74
- color:lighten($gray, 30);
75
- .hint {
76
- text-transform: none;
77
- font-weight:normal;
78
- }
79
- &.no-pad{
80
- padding:0;
81
- }
82
- &.input{
83
- padding: 5px !important;
84
- font-size:1em;
85
- font-weight:normal;
86
- padding-left:25px !important;
87
- text-indent:-20px;
88
- input[type="checkbox"]{
89
- margin-right:5px;
6
+ width: 100%;
7
+ &:not(:last-of-type){
8
+ & > * {
9
+ border-bottom:1px solid darken(white, 20);
90
10
  }
91
11
  }
92
- }
93
- [class^=select2]{
94
- border:none !important;
95
- border-radius:0;
96
- }
97
- #{$text-inputs},
98
- textarea{
99
- border:none !important;
100
- display:block !important;
101
- }
102
- textarea{
103
- width:100%;
104
- max-width:100%;
105
- min-width:100%;
106
- }
107
- .inline-input{
108
- display:table;
109
- width:100%;
110
- margin:0;
111
- border:none;
112
12
  & > * {
113
- border:none !important;
114
- padding: 0 !important;
115
- }
116
- label{
117
- font-size: 1em;
118
- font-weight:normal;
119
- }
120
- select{
121
- padding-left:5px;
122
- font-size:13px;
123
- font-weight:normal;
124
- }
125
- }
126
- .form-group{
127
- display:table;
128
- width:100%;
129
- margin:0;
130
- border:none;
131
- label{
132
- padding-bottom:0;
133
- }
134
- &>div:not([class ^= "col-"]){
135
- width:auto;
136
- }
137
- &>*{
138
- background:none;
139
- border-left:none !important;
140
- border-bottom:1px solid darken(white, 20);
13
+ float: none;
14
+ display: table-cell;
15
+ padding: 0;
141
16
  &:not(:last-of-type){
142
17
  border-right:1px solid darken(white, 20);
143
18
  }
144
- }
145
- &:last-of-type{
146
- &>div{
147
- border-bottom-style:none;
148
- }
149
- }
150
- &.bordered{
151
- &>div{
152
- border-bottom-style:solid;
153
- }
154
- }
155
- &.has-error,
156
- .has-error{
157
- label{
158
- color: $red;
19
+ textarea{
20
+ width:100%;
21
+ max-width:100%;
22
+ min-width:100%;
23
+ height: 100%;
159
24
  }
160
- input,
161
- textarea,
162
- select{
163
- box-shadow:inset 0 -3px 0 $red !important;
25
+ &.col-span-2 {
26
+ column-span: 2;
164
27
  }
165
28
  }
166
- input[type="checkbox"]{
167
- font-size:14px;
168
- }
169
- a.action{
170
- display:block;
171
- width:100%;
172
- padding: 10px 0;
173
- text-decoration:none;
174
- &.red{
175
- color:$red;
29
+ .has-error,
30
+ & > * {
31
+ & > #{$text-inputs},
32
+ & > .textbox,
33
+ textarea{
34
+ border:none;
35
+ display:block;
36
+ width:100%;
176
37
  }
177
- &.disabled{
178
- color:$gray-light;
179
- cursor:help;
38
+ & > label {
39
+ padding: 7px;
40
+ padding-bottom: 0;
41
+ font-weight:bold;
42
+ font-size:0.8em;
43
+ &:not(:first-of-type){
44
+ margin: 0;
45
+ border-top: 1px solid darken(white, 20);
46
+ }
180
47
  }
181
48
  }
182
- }
183
- &.no-align{
184
- display:block;
185
- .form-group{
186
- display:table;
187
- width:100%;
49
+ .has-error{
50
+ box-shadow: 0 0 0 1px $red;
51
+ z-index: 2;
52
+ position: relative;
188
53
  }
189
54
  }
190
- .error{
191
- white-space:nowrap;
192
- }
193
- .submit{
194
- text-align:center;
195
- margin-top:10px;
196
- }
197
- .submit2{
198
- text-align:center;
199
- padding:5px;
200
- }
201
55
 
202
- .footer{
203
- border-top:1px solid darken(white, 20);
204
- background:white;
205
- padding:10px;
206
- text-align:center;
207
- }
56
+ // .uniform-table-form-group{
57
+ // display:table;
58
+ // width:100%;
59
+ // margin:0;
60
+ // border:none;
61
+ // label{
62
+ // padding-bottom:0;
63
+ // }
64
+ // &>div:not([class ^= "col-"]){
65
+ // width:auto;
66
+ // }
67
+ // &>*{
68
+ // background:none;
69
+ // border-left:none !important;
70
+ // border-bottom:1px solid darken(white, 20);
71
+ // &:not(:last-of-type){
72
+ // border-right:1px solid darken(white, 20);
73
+ // }
74
+ // }
75
+ // &:last-of-type{
76
+ // &>div{
77
+ // border-bottom-style:none;
78
+ // }
79
+ // }
80
+ // &.bordered{
81
+ // &>div{
82
+ // border-bottom-style:solid;
83
+ // }
84
+ // }
85
+ // &.has-error,
86
+ // .has-error{
87
+ // label{
88
+ // color: $red;
89
+ // }
90
+ // input,
91
+ // textarea,
92
+ // select{
93
+ // box-shadow:inset 0 -3px 0 $red !important;
94
+ // }
95
+ // }
96
+ // input[type="checkbox"]{
97
+ // font-size:14px;
98
+ // }
99
+ // }
100
+ //
101
+ // .uniform-table-form-footer{
102
+ // border-top:1px solid darken(white, 20);
103
+ // background:white;
104
+ // padding:10px;
105
+ // text-align:center;
106
+ // }
107
+ //
108
+ // .uniform-table-form-section-head{
109
+ // background:darken(white, 3);
110
+ // padding:5px 7px;
111
+ // font-size:1.4em;
112
+ // font-weight:300;
113
+ // }
208
114
 
209
- .control-label{
210
- white-space:normal;
211
- text-align:center;
212
- }
213
- input.has-error{
214
- box-shadow:inset 0 -3px 0 $red !important;
215
- }
216
- .section-head{
217
- background:darken(white, 3);
218
- padding:5px 7px;
219
- font-size:1.4em;
220
- font-weight:300;
221
- }
222
- .form-group{
223
- .section-head{
224
- .action{
225
- display:inline-block;
226
- width:auto;
227
- padding: 0;
228
- font-size:12px;
229
- color:$green;
230
- }
231
- }
232
- }
233
- .radio-table{
234
- width:100%;
235
- .label{
236
- background:none;
237
- font-weight:normal;
238
- color:$gray;
239
- border:none;
240
- text-align:left;
241
- }
242
- td, th{
243
- padding:0 3px;
244
- text-align:center;
245
- vertical-align:middle;
246
- }
247
- }
248
- .alert{
249
- border-left:0;
250
- border-right:0;
251
- border-radius:0;
252
- margin:0;
253
- &.alert-danger{
254
- border-color:$red;
255
- color:$red;
256
- background-color:#FFEBEE;
257
- }
258
- }
259
- }
260
- .table-form{
261
- .select2-container{
262
- width:100% !important;
263
- }
115
+ // label{
116
+ // font-weight:bold;
117
+ // display:block;
118
+ // padding:10px;
119
+ // width:100%;
120
+ // text-transform:uppercase;
121
+ // color:lighten($gray, 30);
122
+ // &.no-pad{
123
+ // padding:0;
124
+ // }
125
+ //// &.input{
126
+ //// padding: 5px !important;
127
+ //// font-size:1em;
128
+ //// font-weight:normal;
129
+ //// padding-left:25px !important;
130
+ //// text-indent:-20px;
131
+ //// input[type="checkbox"]{
132
+ //// margin-right:5px;
133
+ //// }
134
+ //// }
135
+ // }
136
+
137
+ // .inline-input{
138
+ // display:table;
139
+ // width:100%;
140
+ // margin:0;
141
+ // border:none;
142
+ // & > * {
143
+ // border:none !important;
144
+ // padding: 0 !important;
145
+ // }
146
+ // label{
147
+ // font-size: 1em;
148
+ // font-weight:normal;
149
+ // }
150
+ // select{
151
+ // padding-left:5px;
152
+ // font-size:13px;
153
+ // font-weight:normal;
154
+ // }
155
+ // }
156
+
157
+
158
+
264
159
  }