uniform-ui 0.6 → 1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (106) hide show
  1. checksums.yaml +4 -4
  2. data/CHANGELOG.md +27 -0
  3. data/CNAME +1 -0
  4. data/Gemfile +0 -4
  5. data/Gemfile.lock +1 -11
  6. data/README.md +2 -3
  7. data/Rakefile +34 -24
  8. data/index.html +240 -1160
  9. data/preview/{_tables.html.erb → alerts.html.erb} +0 -0
  10. data/preview/buttons.html.erb +62 -0
  11. data/preview/cards.html.erb +23 -0
  12. data/preview/colors.html.erb +22 -0
  13. data/preview/{_tabs.html.erb → dropdown.html.erb} +0 -0
  14. data/preview/form.html.erb +233 -0
  15. data/preview/grid.html.erb +304 -0
  16. data/preview/helpers.html.erb +225 -0
  17. data/preview/index.html.erb +74 -50
  18. data/preview/{_tiles.html.erb → labels.html.erb} +0 -0
  19. data/preview/layout.html.erb +63 -0
  20. data/preview/loaders.html.erb +83 -0
  21. data/preview/modal.html.erb +1 -0
  22. data/preview/nav.html.erb +77 -0
  23. data/preview/preview.scss +39 -10
  24. data/preview/rows.html.erb +36 -0
  25. data/preview/select.html.erb +1 -0
  26. data/preview/tables.html.erb +1 -0
  27. data/preview/tabs.html.erb +17 -0
  28. data/preview/tiles.html.erb +1 -0
  29. data/preview/tooltip.erb +1 -0
  30. data/site/alerts.html +157 -0
  31. data/site/alerts.html copy +133 -0
  32. data/site/buttons.html +286 -0
  33. data/site/cards.html +177 -0
  34. data/site/colors.html +275 -0
  35. data/site/dropdown.html +157 -0
  36. data/site/dropdown.html copy +141 -0
  37. data/site/form.html +369 -0
  38. data/site/grid.html +716 -0
  39. data/site/helpers.html +1008 -0
  40. data/site/index.html +208 -617
  41. data/site/labels.html +157 -0
  42. data/site/layout.html +313 -0
  43. data/site/loaders.html +233 -0
  44. data/site/modal.html +157 -0
  45. data/site/nav.html +229 -0
  46. data/site/preview.css +1 -1
  47. data/site/preview.js +59 -0
  48. data/site/rows.html +190 -0
  49. data/site/select.html +157 -0
  50. data/site/tables.html +157 -0
  51. data/site/tabs.html +171 -0
  52. data/site/tiles.html +157 -0
  53. data/site/tiles.html copy +109 -0
  54. data/site/tooltip +157 -0
  55. data/site/uniform.css +1 -1
  56. data/uniform.gemspec +2 -8
  57. data/vendor/assets/stylesheets/uniform.scss +4 -4
  58. data/vendor/assets/stylesheets/uniform/base.scss +2 -0
  59. data/vendor/assets/stylesheets/uniform/components/alert.scss +27 -0
  60. data/vendor/assets/stylesheets/uniform/components/buttons.scss +135 -86
  61. data/vendor/assets/stylesheets/uniform/components/card.scss +69 -67
  62. data/vendor/assets/stylesheets/uniform/components/dropdown.scss +69 -0
  63. data/vendor/assets/stylesheets/uniform/components/form.scss +268 -85
  64. data/vendor/assets/stylesheets/uniform/components/grid.scss +214 -72
  65. data/vendor/assets/stylesheets/uniform/components/label.scss +63 -0
  66. data/vendor/assets/stylesheets/uniform/components/loaders.scss +38 -18
  67. data/vendor/assets/stylesheets/uniform/components/modal.scss +51 -0
  68. data/vendor/assets/stylesheets/uniform/components/nav.scss +171 -54
  69. data/vendor/assets/stylesheets/uniform/components/row.scss +69 -101
  70. data/vendor/assets/stylesheets/uniform/components/select.scss +98 -0
  71. data/vendor/assets/stylesheets/uniform/components/table.scss +83 -0
  72. data/vendor/assets/stylesheets/uniform/components/tabs.scss +39 -26
  73. data/vendor/assets/stylesheets/uniform/components/tile.scss +15 -27
  74. data/vendor/assets/stylesheets/uniform/components/tooltip.scss +46 -0
  75. data/vendor/assets/stylesheets/uniform/defaults.scss +85 -19
  76. data/vendor/assets/stylesheets/uniform/helpers.scss +82 -81
  77. data/vendor/assets/stylesheets/uniform/helpers/colors.scss +37 -0
  78. data/vendor/assets/stylesheets/uniform/helpers/margin.scss +44 -0
  79. data/vendor/assets/stylesheets/uniform/helpers/padding.scss +74 -0
  80. data/vendor/assets/stylesheets/uniform/helpers/sizes.scss +31 -0
  81. data/vendor/assets/stylesheets/uniform/helpers/text.scss +121 -0
  82. data/vendor/assets/stylesheets/uniform/mixins.scss +25 -48
  83. data/vendor/assets/stylesheets/uniform/variables.scss +10 -28
  84. metadata +61 -85
  85. data/preview/_buttons.html.erb +0 -59
  86. data/preview/_cards.html.erb +0 -82
  87. data/preview/_colors.html.erb +0 -12
  88. data/preview/_forms.html.erb +0 -196
  89. data/preview/_grid.html.erb +0 -49
  90. data/preview/_helpers.html.erb +0 -158
  91. data/preview/_inputs.html.erb +0 -93
  92. data/preview/_installation.html.erb +0 -4
  93. data/preview/_lists.html.erb +0 -53
  94. data/preview/_loaders.html.erb +0 -72
  95. data/preview/_nav.html.erb +0 -46
  96. data/preview/_philosophy.html.erb +0 -33
  97. data/preview/_rows.html.erb +0 -35
  98. data/preview/_uniform.html.erb +0 -4
  99. data/site/site/logo.png +0 -0
  100. data/site/site/preview.css +0 -1
  101. data/site/site/uniform.css +0 -1
  102. data/vendor/assets/stylesheets/uniform/components/inputs.scss +0 -131
  103. data/vendor/assets/stylesheets/uniform/components/lists.scss +0 -62
  104. data/vendor/assets/stylesheets/uniform/components/table-container.scss +0 -44
  105. data/vendor/assets/stylesheets/uniform/components/table-form.scss +0 -159
  106. 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
-