uniform-ui 0.6 → 1.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/CHANGELOG.md +27 -0
- data/CNAME +1 -0
- data/Gemfile +0 -4
- data/Gemfile.lock +1 -11
- data/README.md +2 -3
- data/Rakefile +34 -24
- data/index.html +240 -1160
- data/preview/{_tables.html.erb → alerts.html.erb} +0 -0
- data/preview/buttons.html.erb +62 -0
- data/preview/cards.html.erb +23 -0
- data/preview/colors.html.erb +22 -0
- data/preview/{_tabs.html.erb → dropdown.html.erb} +0 -0
- data/preview/form.html.erb +233 -0
- data/preview/grid.html.erb +304 -0
- data/preview/helpers.html.erb +225 -0
- data/preview/index.html.erb +74 -50
- data/preview/{_tiles.html.erb → labels.html.erb} +0 -0
- data/preview/layout.html.erb +63 -0
- data/preview/loaders.html.erb +83 -0
- data/preview/modal.html.erb +1 -0
- data/preview/nav.html.erb +77 -0
- data/preview/preview.scss +39 -10
- data/preview/rows.html.erb +36 -0
- data/preview/select.html.erb +1 -0
- data/preview/tables.html.erb +1 -0
- data/preview/tabs.html.erb +17 -0
- data/preview/tiles.html.erb +1 -0
- data/preview/tooltip.erb +1 -0
- data/site/alerts.html +157 -0
- data/site/alerts.html copy +133 -0
- data/site/buttons.html +286 -0
- data/site/cards.html +177 -0
- data/site/colors.html +275 -0
- data/site/dropdown.html +157 -0
- data/site/dropdown.html copy +141 -0
- data/site/form.html +369 -0
- data/site/grid.html +716 -0
- data/site/helpers.html +1008 -0
- data/site/index.html +208 -617
- data/site/labels.html +157 -0
- data/site/layout.html +313 -0
- data/site/loaders.html +233 -0
- data/site/modal.html +157 -0
- data/site/nav.html +229 -0
- data/site/preview.css +1 -1
- data/site/preview.js +59 -0
- data/site/rows.html +190 -0
- data/site/select.html +157 -0
- data/site/tables.html +157 -0
- data/site/tabs.html +171 -0
- data/site/tiles.html +157 -0
- data/site/tiles.html copy +109 -0
- data/site/tooltip +157 -0
- data/site/uniform.css +1 -1
- data/uniform.gemspec +2 -8
- data/vendor/assets/stylesheets/uniform.scss +4 -4
- data/vendor/assets/stylesheets/uniform/base.scss +2 -0
- data/vendor/assets/stylesheets/uniform/components/alert.scss +27 -0
- data/vendor/assets/stylesheets/uniform/components/buttons.scss +135 -86
- data/vendor/assets/stylesheets/uniform/components/card.scss +69 -67
- data/vendor/assets/stylesheets/uniform/components/dropdown.scss +69 -0
- data/vendor/assets/stylesheets/uniform/components/form.scss +268 -85
- data/vendor/assets/stylesheets/uniform/components/grid.scss +214 -72
- data/vendor/assets/stylesheets/uniform/components/label.scss +63 -0
- data/vendor/assets/stylesheets/uniform/components/loaders.scss +38 -18
- data/vendor/assets/stylesheets/uniform/components/modal.scss +51 -0
- data/vendor/assets/stylesheets/uniform/components/nav.scss +171 -54
- data/vendor/assets/stylesheets/uniform/components/row.scss +69 -101
- data/vendor/assets/stylesheets/uniform/components/select.scss +98 -0
- data/vendor/assets/stylesheets/uniform/components/table.scss +83 -0
- data/vendor/assets/stylesheets/uniform/components/tabs.scss +39 -26
- data/vendor/assets/stylesheets/uniform/components/tile.scss +15 -27
- data/vendor/assets/stylesheets/uniform/components/tooltip.scss +46 -0
- data/vendor/assets/stylesheets/uniform/defaults.scss +85 -19
- data/vendor/assets/stylesheets/uniform/helpers.scss +82 -81
- data/vendor/assets/stylesheets/uniform/helpers/colors.scss +37 -0
- data/vendor/assets/stylesheets/uniform/helpers/margin.scss +44 -0
- data/vendor/assets/stylesheets/uniform/helpers/padding.scss +74 -0
- data/vendor/assets/stylesheets/uniform/helpers/sizes.scss +31 -0
- data/vendor/assets/stylesheets/uniform/helpers/text.scss +121 -0
- data/vendor/assets/stylesheets/uniform/mixins.scss +25 -48
- data/vendor/assets/stylesheets/uniform/variables.scss +10 -28
- metadata +61 -85
- data/preview/_buttons.html.erb +0 -59
- data/preview/_cards.html.erb +0 -82
- data/preview/_colors.html.erb +0 -12
- data/preview/_forms.html.erb +0 -196
- data/preview/_grid.html.erb +0 -49
- data/preview/_helpers.html.erb +0 -158
- data/preview/_inputs.html.erb +0 -93
- data/preview/_installation.html.erb +0 -4
- data/preview/_lists.html.erb +0 -53
- data/preview/_loaders.html.erb +0 -72
- data/preview/_nav.html.erb +0 -46
- data/preview/_philosophy.html.erb +0 -33
- data/preview/_rows.html.erb +0 -35
- data/preview/_uniform.html.erb +0 -4
- data/site/site/logo.png +0 -0
- data/site/site/preview.css +0 -1
- data/site/site/uniform.css +0 -1
- data/vendor/assets/stylesheets/uniform/components/inputs.scss +0 -131
- data/vendor/assets/stylesheets/uniform/components/lists.scss +0 -62
- data/vendor/assets/stylesheets/uniform/components/table-container.scss +0 -44
- data/vendor/assets/stylesheets/uniform/components/table-form.scss +0 -159
- data/vendor/assets/stylesheets/uniform/mixins/grid-framework.scss +0 -142
@@ -1,62 +0,0 @@
|
|
1
|
-
ul.uniform-checks,
|
2
|
-
ol.uniform-step,
|
3
|
-
ul.uniform-icons {
|
4
|
-
list-style:none;
|
5
|
-
margin: 0;
|
6
|
-
padding: 0;
|
7
|
-
li{
|
8
|
-
margin: 0.2em 0;
|
9
|
-
text-indent: -2em;
|
10
|
-
margin-left: 2em;
|
11
|
-
&:before{
|
12
|
-
margin-right: 0.5em;
|
13
|
-
}
|
14
|
-
}
|
15
|
-
}
|
16
|
-
|
17
|
-
ol.uniform-step{
|
18
|
-
counter-reset: item;
|
19
|
-
li {
|
20
|
-
counter-increment: item;
|
21
|
-
&:before{
|
22
|
-
content: counter(item);
|
23
|
-
color:$green;
|
24
|
-
font-size:1em;
|
25
|
-
border-radius:50%;
|
26
|
-
border:0.15em solid $green;
|
27
|
-
width:1.35em;
|
28
|
-
height:1.35em;
|
29
|
-
|
30
|
-
font-weight:normal;
|
31
|
-
line-height:1.1;
|
32
|
-
text-align:center;
|
33
|
-
text-indent: 0;
|
34
|
-
|
35
|
-
display:inline-block;
|
36
|
-
margin-right: 0.5em;
|
37
|
-
}
|
38
|
-
}
|
39
|
-
}
|
40
|
-
|
41
|
-
ul.uniform-checks {
|
42
|
-
li {
|
43
|
-
&:before {
|
44
|
-
font-family: $fortycons;
|
45
|
-
content: $fortycon-check;
|
46
|
-
color: $green;
|
47
|
-
font-size:1.3em;
|
48
|
-
vertical-align: -0.1em;
|
49
|
-
}
|
50
|
-
}
|
51
|
-
}
|
52
|
-
|
53
|
-
ul.uniform-icons {
|
54
|
-
li {
|
55
|
-
&:before {
|
56
|
-
font-family: $fortycons;
|
57
|
-
content: attr(data-icon);
|
58
|
-
font-size:1.3em;
|
59
|
-
vertical-align: -0.1em;
|
60
|
-
}
|
61
|
-
}
|
62
|
-
}
|
@@ -1,44 +0,0 @@
|
|
1
|
-
.table-container{
|
2
|
-
display:table;
|
3
|
-
width:100%;
|
4
|
-
& > *,
|
5
|
-
.table-row > *{
|
6
|
-
display:table-cell;
|
7
|
-
float:none;
|
8
|
-
&.top{
|
9
|
-
vertical-align:top;
|
10
|
-
}
|
11
|
-
&.middle > *{
|
12
|
-
vertical-align:middle;
|
13
|
-
}
|
14
|
-
}
|
15
|
-
.table-row{
|
16
|
-
display:table-row;
|
17
|
-
}
|
18
|
-
&.middle > *,
|
19
|
-
.middle{
|
20
|
-
vertical-align:middle;
|
21
|
-
}
|
22
|
-
&.top > *,
|
23
|
-
.top{
|
24
|
-
vertical-align:top;
|
25
|
-
}
|
26
|
-
@include media($xs){
|
27
|
-
&.break-xs{
|
28
|
-
& > *,
|
29
|
-
.table-row > *{
|
30
|
-
display:block;
|
31
|
-
float:inherit;
|
32
|
-
}
|
33
|
-
.table-row{
|
34
|
-
display:block;
|
35
|
-
}
|
36
|
-
}
|
37
|
-
}
|
38
|
-
|
39
|
-
}
|
40
|
-
@include media($xs){
|
41
|
-
.block-xs{
|
42
|
-
display:block;
|
43
|
-
}
|
44
|
-
}
|
@@ -1,159 +0,0 @@
|
|
1
|
-
.uniform-form-table{
|
2
|
-
border:1px solid darken(white, 20);
|
3
|
-
.row{
|
4
|
-
margin: 0;
|
5
|
-
display:table;
|
6
|
-
width: 100%;
|
7
|
-
&:not(:last-of-type){
|
8
|
-
& > * {
|
9
|
-
border-bottom:1px solid darken(white, 20);
|
10
|
-
}
|
11
|
-
}
|
12
|
-
& > * {
|
13
|
-
float: none;
|
14
|
-
display: table-cell;
|
15
|
-
padding: 0;
|
16
|
-
&:not(:last-of-type){
|
17
|
-
border-right:1px solid darken(white, 20);
|
18
|
-
}
|
19
|
-
textarea{
|
20
|
-
width:100%;
|
21
|
-
max-width:100%;
|
22
|
-
min-width:100%;
|
23
|
-
height: 100%;
|
24
|
-
}
|
25
|
-
&.col-span-2 {
|
26
|
-
column-span: 2;
|
27
|
-
}
|
28
|
-
}
|
29
|
-
.has-error,
|
30
|
-
& > * {
|
31
|
-
& > #{$text-inputs},
|
32
|
-
& > .textbox,
|
33
|
-
textarea{
|
34
|
-
border:none;
|
35
|
-
display:block;
|
36
|
-
width:100%;
|
37
|
-
}
|
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
|
-
}
|
47
|
-
}
|
48
|
-
}
|
49
|
-
.has-error{
|
50
|
-
box-shadow: 0 0 0 1px $red;
|
51
|
-
z-index: 2;
|
52
|
-
position: relative;
|
53
|
-
}
|
54
|
-
}
|
55
|
-
|
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
|
-
// }
|
114
|
-
|
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
|
-
|
159
|
-
}
|
@@ -1,142 +0,0 @@
|
|
1
|
-
//----------------------------------------------------------------
|
2
|
-
// Borrowed from Bootstrap
|
3
|
-
//----------------------------------------------------------------
|
4
|
-
|
5
|
-
$screen-xs: 480px !default;
|
6
|
-
$screen-sm: 768px !default;
|
7
|
-
$screen-md: 992px !default;
|
8
|
-
$screen-lg: 1200px !default;
|
9
|
-
|
10
|
-
$grid-columns: 12 !default;
|
11
|
-
$grid-gutter-width: 30px !default;
|
12
|
-
$container-sm: (720px + $grid-gutter-width);
|
13
|
-
$container-md: (940px + $grid-gutter-width);
|
14
|
-
$container-lg: (1140px + $grid-gutter-width);
|
15
|
-
|
16
|
-
$xs: new-breakpoint(max-width 767px);
|
17
|
-
$sm: new-breakpoint(min-width 768px max-width 991px);
|
18
|
-
$md: new-breakpoint(min-width 992px max-width 1199px);
|
19
|
-
$lg: new-breakpoint(min-width 1200px);
|
20
|
-
$max-xs: new-breakpoint(max-width 767px);
|
21
|
-
$max-sm: new-breakpoint(max-width 991px);
|
22
|
-
$max-md: new-breakpoint(max-width 1199px);
|
23
|
-
$max-lg: new-breakpoint(min-width 1200px);
|
24
|
-
$min-xs: new-breakpoint(min-width 480px);
|
25
|
-
$min-sm: new-breakpoint(min-width 768px);
|
26
|
-
$min-md: new-breakpoint(min-width 992px);
|
27
|
-
$min-lg: new-breakpoint( min-width 1200px);
|
28
|
-
|
29
|
-
@mixin clearfix() {
|
30
|
-
&:before,
|
31
|
-
&:after {
|
32
|
-
content: " "; // 1
|
33
|
-
display: table; // 2
|
34
|
-
}
|
35
|
-
&:after {
|
36
|
-
clear: both;
|
37
|
-
}
|
38
|
-
}
|
39
|
-
|
40
|
-
// Grid system
|
41
|
-
//
|
42
|
-
// Generate semantic grid columns with these mixins.
|
43
|
-
|
44
|
-
// Centered container element
|
45
|
-
@mixin container-fixed($gutter: $grid-gutter-width) {
|
46
|
-
margin-right: auto;
|
47
|
-
margin-left: auto;
|
48
|
-
padding-left: floor(($gutter / 2));
|
49
|
-
padding-right: ceil(($gutter / 2));
|
50
|
-
@include clearfix;
|
51
|
-
}
|
52
|
-
|
53
|
-
// Creates a wrapper for a series of columns
|
54
|
-
@mixin make-row($gutter: $grid-gutter-width) {
|
55
|
-
margin-left: ceil(($gutter / -2));
|
56
|
-
margin-right: floor(($gutter / -2));
|
57
|
-
@include clearfix;
|
58
|
-
}
|
59
|
-
|
60
|
-
// Framework grid generation
|
61
|
-
//
|
62
|
-
// Used only by Bootstrap to generate the correct number of grid classes given
|
63
|
-
// any value of `$grid-columns`.
|
64
|
-
|
65
|
-
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
66
|
-
@mixin make-grid-columns($i: 1, $list: ".col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}") {
|
67
|
-
@for $i from (1 + 1) through $grid-columns {
|
68
|
-
$list: "#{$list}, .col-xs-#{$i}, .col-sm-#{$i}, .col-md-#{$i}, .col-lg-#{$i}";
|
69
|
-
}
|
70
|
-
#{$list} {
|
71
|
-
position: relative;
|
72
|
-
// Prevent columns from collapsing when empty
|
73
|
-
min-height: 1px;
|
74
|
-
// Inner gutter via padding
|
75
|
-
padding-left: ceil(($grid-gutter-width / 2));
|
76
|
-
padding-right: floor(($grid-gutter-width / 2));
|
77
|
-
}
|
78
|
-
}
|
79
|
-
|
80
|
-
|
81
|
-
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
82
|
-
@mixin float-grid-columns($class, $i: 1, $list: ".col-#{$class}-#{$i}") {
|
83
|
-
@for $i from (1 + 1) through $grid-columns {
|
84
|
-
$list: "#{$list}, .col-#{$class}-#{$i}";
|
85
|
-
}
|
86
|
-
#{$list} {
|
87
|
-
float: left;
|
88
|
-
}
|
89
|
-
}
|
90
|
-
|
91
|
-
|
92
|
-
@mixin calc-grid-column($index, $class, $type) {
|
93
|
-
@if ($type == width) and ($index > 0) {
|
94
|
-
.col-#{$class}-#{$index} {
|
95
|
-
width: percentage(($index / $grid-columns));
|
96
|
-
}
|
97
|
-
}
|
98
|
-
@if ($type == push) and ($index > 0) {
|
99
|
-
.col-#{$class}-push-#{$index} {
|
100
|
-
left: percentage(($index / $grid-columns));
|
101
|
-
}
|
102
|
-
}
|
103
|
-
@if ($type == push) and ($index == 0) {
|
104
|
-
.col-#{$class}-push-0 {
|
105
|
-
left: auto;
|
106
|
-
}
|
107
|
-
}
|
108
|
-
@if ($type == pull) and ($index > 0) {
|
109
|
-
.col-#{$class}-pull-#{$index} {
|
110
|
-
right: percentage(($index / $grid-columns));
|
111
|
-
}
|
112
|
-
}
|
113
|
-
@if ($type == pull) and ($index == 0) {
|
114
|
-
.col-#{$class}-pull-0 {
|
115
|
-
right: auto;
|
116
|
-
}
|
117
|
-
}
|
118
|
-
@if ($type == offset) {
|
119
|
-
.col-#{$class}-offset-#{$index} {
|
120
|
-
margin-left: percentage(($index / $grid-columns));
|
121
|
-
}
|
122
|
-
}
|
123
|
-
}
|
124
|
-
|
125
|
-
// [converter] This is defined recursively in LESS, but Sass supports real loops
|
126
|
-
@mixin loop-grid-columns($columns, $class, $type) {
|
127
|
-
@for $i from 0 through $columns {
|
128
|
-
@include calc-grid-column($i, $class, $type);
|
129
|
-
}
|
130
|
-
}
|
131
|
-
|
132
|
-
|
133
|
-
// Create grid for specific class
|
134
|
-
@mixin make-grid($class) {
|
135
|
-
@include float-grid-columns($class);
|
136
|
-
@include loop-grid-columns($grid-columns, $class, width);
|
137
|
-
@include loop-grid-columns($grid-columns, $class, pull);
|
138
|
-
@include loop-grid-columns($grid-columns, $class, push);
|
139
|
-
@include loop-grid-columns($grid-columns, $class, offset);
|
140
|
-
}
|
141
|
-
|
142
|
-
|