uniform-ui 0.6 → 1.0

Sign up to get free protection for your applications and to get access to all the features.
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
-