semantic-ui-rails 0.1.0 → 0.1.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (41) hide show
  1. checksums.yaml +4 -4
  2. data/lib/generators/semantic/install/install_generator.rb +3 -3
  3. data/lib/generators/semantic/install/templates/semantic-ui.css.less +47 -0
  4. data/lib/semantic/ui/rails/version.rb +1 -1
  5. data/semantic.thor +29 -25
  6. data/vendor/assets/javascripts/semantic-ui/modules/accordion.js +7 -0
  7. data/vendor/assets/javascripts/semantic-ui/modules/chatroom.js +1 -1
  8. data/vendor/assets/javascripts/semantic-ui/modules/checkbox.js +2 -5
  9. data/vendor/assets/javascripts/semantic-ui/modules/dimmer.js +73 -49
  10. data/vendor/assets/javascripts/semantic-ui/modules/dropdown.js +135 -136
  11. data/vendor/assets/javascripts/semantic-ui/modules/modal.js +196 -125
  12. data/vendor/assets/javascripts/semantic-ui/modules/popup.js +3 -6
  13. data/vendor/assets/javascripts/semantic-ui/modules/rating.js +80 -38
  14. data/vendor/assets/javascripts/semantic-ui/modules/sidebar.js +17 -20
  15. data/vendor/assets/javascripts/semantic-ui/modules/tab.js +32 -20
  16. data/vendor/assets/javascripts/semantic-ui/modules/transition.js +2 -0
  17. data/vendor/assets/stylesheets/semantic-ui/collections/form.less +15 -2
  18. data/vendor/assets/stylesheets/semantic-ui/collections/grid.less +20 -39
  19. data/vendor/assets/stylesheets/semantic-ui/collections/menu.less +12 -12
  20. data/vendor/assets/stylesheets/semantic-ui/elements/basic.icon.less +203 -198
  21. data/vendor/assets/stylesheets/semantic-ui/elements/button.less +17 -6
  22. data/vendor/assets/stylesheets/semantic-ui/elements/header.less +49 -31
  23. data/vendor/assets/stylesheets/semantic-ui/elements/icon.less +9 -13
  24. data/vendor/assets/stylesheets/semantic-ui/elements/image.less +13 -1
  25. data/vendor/assets/stylesheets/semantic-ui/elements/input.less +1 -1
  26. data/vendor/assets/stylesheets/semantic-ui/elements/loader.less +8 -8
  27. data/vendor/assets/stylesheets/semantic-ui/modules/checkbox.less +1 -1
  28. data/vendor/assets/stylesheets/semantic-ui/modules/dimmer.less +13 -5
  29. data/vendor/assets/stylesheets/semantic-ui/modules/dropdown.less +48 -8
  30. data/vendor/assets/stylesheets/semantic-ui/modules/modal.less +72 -13
  31. data/vendor/assets/stylesheets/semantic-ui/modules/rating.less +38 -35
  32. data/vendor/assets/stylesheets/semantic-ui/modules/search.less +1 -1
  33. data/vendor/assets/stylesheets/semantic-ui/modules/tab.less +1 -1
  34. data/vendor/assets/stylesheets/semantic-ui/modules/transition.less +283 -25
  35. data/vendor/assets/stylesheets/semantic-ui/views/list.less +24 -2
  36. metadata +3 -7
  37. data/lib/generators/semantic/install/templates/semantic-ui/collections.less +0 -6
  38. data/lib/generators/semantic/install/templates/semantic-ui/elements.less +0 -12
  39. data/lib/generators/semantic/install/templates/semantic-ui/modules.less +0 -16
  40. data/lib/generators/semantic/install/templates/semantic-ui/views.less +0 -6
  41. data/vendor/assets/stylesheets/semantic-ui/views/statistic.css +0 -27
@@ -313,7 +313,7 @@
313
313
  width: 100%;
314
314
  height: 100%;
315
315
  content: '';
316
- background: transparent url(../images/loader-mini.gif) no-repeat 50% 50%;
316
+ background: transparent url(/assets/semantic-ui/loader-mini.gif) no-repeat 50% 50%;
317
317
  }
318
318
 
319
319
  .ui.labeled.icon.loading.button .icon {
@@ -413,18 +413,18 @@
413
413
 
414
414
  /* loading */
415
415
  .ui.huge.loading.button:after {
416
- background-image: url(../images/loader-small.gif);
416
+ background-image: url(/assets/semantic-ui/loader-small.gif);
417
417
  }
418
418
  .ui.massive.buttons .loading.button:after,
419
419
  .ui.gigantic.buttons .loading.button:after,
420
420
  .ui.massive.loading.button:after,
421
421
  .ui.gigantic.loading.button:after {
422
- background-image: url(../images/loader-medium.gif);
422
+ background-image: url(/assets/semantic-ui/loader-medium.gif);
423
423
  }
424
424
 
425
425
  .ui.huge.loading.button:after,
426
426
  .ui.huge.loading.button.active:after {
427
- background-image: url(../images/loader-small.gif);
427
+ background-image: url(/assets/semantic-ui/loader-small.gif);
428
428
  }
429
429
  .ui.massive.buttons .loading.button:after,
430
430
  .ui.gigantic.buttons .loading.button:after,
@@ -434,7 +434,7 @@
434
434
  .ui.gigantic.buttons .loading.button.active:after,
435
435
  .ui.massive.loading.button.active:after,
436
436
  .ui.gigantic.loading.button.active:after {
437
- background-image: url(../images/loader-medium.gif);
437
+ background-image: url(/assets/semantic-ui/loader-medium.gif);
438
438
  }
439
439
 
440
440
  /*--------------
@@ -929,6 +929,17 @@
929
929
  Colors
930
930
  --------------------*/
931
931
 
932
+ /*--- White ---*/
933
+ .ui.white.buttons .button,
934
+ .ui.white.button {
935
+ background-color: #FFFFFF;
936
+ }
937
+
938
+ .ui.white.buttons .button:hover,
939
+ .ui.white.button:hover {
940
+ background-color: #A4A4A4;
941
+ }
942
+
932
943
  /*--- Black ---*/
933
944
  .ui.black.buttons .button,
934
945
  .ui.black.button {
@@ -1173,4 +1184,4 @@
1173
1184
  -moz-border-radius: 0px 0px 0.2em 0.2em;
1174
1185
  -webkit-border-radius: 0px 0px 0.2em 0.2em;
1175
1186
  border-radius: 0px 0px 0.2em 0.2em;
1176
- }
1187
+ }
@@ -24,7 +24,6 @@
24
24
  line-height: 1.33;
25
25
  }
26
26
 
27
-
28
27
  .ui.header .sub.header {
29
28
  font-size: 1rem;
30
29
  font-weight: normal;
@@ -35,12 +34,22 @@
35
34
  color: rgba(0, 0, 0, 0.5);
36
35
  }
37
36
 
37
+ .ui.header .icon {
38
+ display: table-cell;
39
+ vertical-align: middle;
40
+ padding-right: 0.5em;
41
+ }
42
+ .ui.header .icon:only-child {
43
+ display: inline-block;
44
+ }
45
+
38
46
  .ui.header .content {
39
47
  display: inline-block;
40
48
  vertical-align: top;
41
49
  }
42
- .ui.header .icon {
43
- margin-right: 0.5em;
50
+ .ui.header .icon + .content {
51
+ padding-left: 0.5em;
52
+ display: table-cell;
44
53
  }
45
54
 
46
55
  /* Positioning */
@@ -102,6 +111,43 @@ h5.ui.header {
102
111
  font-size: 1em;
103
112
  }
104
113
 
114
+
115
+ /*******************************
116
+ Types
117
+ *******************************/
118
+
119
+
120
+ /*-------------------
121
+ Icon
122
+ --------------------*/
123
+
124
+ .ui.icon.header {
125
+ display: inline-block;
126
+ text-align: center;
127
+ }
128
+ .ui.icon.header .icon {
129
+ float: none;
130
+ display: block;
131
+ font-size: 3em;
132
+ margin: 0em auto 0.2em;
133
+ padding: 0em;
134
+ }
135
+ .ui.icon.header .content {
136
+ display: block;
137
+ }
138
+ .ui.icon.header .circular.icon,
139
+ .ui.icon.header .square.icon {
140
+ font-size: 2em;
141
+ }
142
+ .ui.block.icon.header .icon {
143
+ margin-bottom: 0em;
144
+ }
145
+ .ui.icon.header.aligned {
146
+ margin-left: auto;
147
+ margin-right: auto;
148
+ display: block;
149
+ }
150
+
105
151
  /*******************************
106
152
  States
107
153
  *******************************/
@@ -294,31 +340,3 @@ h5.ui.header {
294
340
  border-radius: 0em 0em 0.3125em 0.3125em;
295
341
  }
296
342
 
297
-
298
- /*-------------------
299
- Icon
300
- --------------------*/
301
-
302
- .ui.icon.header {
303
- display: inline-block;
304
- text-align: center;
305
- }
306
- .ui.icon.header .icon {
307
- float: none;
308
- display: block;
309
- font-size: 3em;
310
- margin: 0em auto 0.2em;
311
- }
312
- .ui.icon.header .circular.icon,
313
- .ui.icon.header .square.icon {
314
- font-size: 2em;
315
- }
316
- .ui.block.icon.header .icon {
317
- margin-bottom: 0em;
318
- }
319
-
320
- .ui.icon.header.aligned {
321
- margin-left: auto;
322
- margin-right: auto;
323
- display: block;
324
- }
@@ -442,19 +442,14 @@ i.icon.check:before { content: "\f00c"; }
442
442
  i.icon.close:before { content: "\f00d"; }
443
443
  i.icon.delete:before { content: "\f00d"; }
444
444
  i.icon.like:before { content: "\f004"; }
445
+ i.icon.plus:before { content: "\f067"; }
445
446
  i.icon.signup:before { content: "\f044"; }
446
- i.icon.dropdown:before { content: "\f0d7"; }
447
447
 
448
448
 
449
449
  /*--------------
450
450
  Spacing Fix
451
451
  ---------------*/
452
452
 
453
- /* dropdown arrows are to the right */
454
- i.dropdown.icon {
455
- margin: 0em 0em 0em 0.5em;
456
- }
457
-
458
453
  /* stars are usually consecutive */
459
454
  i.icon.star {
460
455
  width: auto;
@@ -494,7 +489,7 @@ i.icon.loading {
494
489
  -o-animation: icon-loading 2s linear infinite;
495
490
  animation: icon-loading 2s linear infinite;
496
491
  }
497
- @keyframes "icon-loading" {
492
+ @keyframes icon-loading {
498
493
  from {
499
494
  -webkit-transform: rotate(0deg);
500
495
  -moz-transform: rotate(0deg);
@@ -520,7 +515,7 @@ i.icon.loading {
520
515
  transform: rotate(360deg);
521
516
  }
522
517
  }
523
- @-webkit-keyframes "icon-loading" {
518
+ @-webkit-keyframes icon-loading {
524
519
  from {
525
520
  -webkit-transform: rotate(0deg);
526
521
  transform: rotate(0deg);
@@ -530,7 +525,7 @@ i.icon.loading {
530
525
  transform: rotate(360deg);
531
526
  }
532
527
  }
533
- @-ms-keyframes "icon-loading" {
528
+ @-ms-keyframes icon-loading {
534
529
  from {
535
530
  -ms-transform: rotate(0deg);
536
531
  transform: rotate(0deg);
@@ -540,7 +535,7 @@ i.icon.loading {
540
535
  transform: rotate(360deg);
541
536
  }
542
537
  }
543
- @-o-keyframes "icon-loading" {
538
+ @-o-keyframes icon-loading {
544
539
  from {
545
540
  -o-transform: rotate(0deg);
546
541
  transform: rotate(0deg);
@@ -760,17 +755,18 @@ i.icon {
760
755
  font-size: 1em;
761
756
  }
762
757
  i.large.icon {
758
+ font-size: 1.5em;
759
+ vertical-align: middle;
760
+ }
761
+ i.big.icon {
763
762
  font-size: 2em;
764
- margin-right: 0.5em;
765
763
  vertical-align: middle;
766
764
  }
767
765
  i.huge.icon {
768
766
  font-size: 4em;
769
- margin-right: 0.75em;
770
767
  vertical-align: middle;
771
768
  }
772
769
  i.massive.icon {
773
770
  font-size: 8em;
774
- margin-right: 1em;
775
771
  vertical-align: middle;
776
772
  }
@@ -73,9 +73,21 @@ img.ui.image {
73
73
  }
74
74
 
75
75
  /*--------------
76
- Avatar
76
+ Fluid
77
77
  ---------------*/
78
78
 
79
+ .ui.fluid.images,
80
+ .ui.fluid.image,
81
+ .ui.fluid.images img,
82
+ .ui.fluid.image img {
83
+ display: block;
84
+ width: 100%;
85
+ }
86
+
87
+
88
+ /*--------------
89
+ Avatar
90
+ ---------------*/
79
91
 
80
92
  .ui.avatar.images .image,
81
93
  .ui.avatar.images img,
@@ -108,7 +108,7 @@
108
108
  ---------------------*/
109
109
 
110
110
  .ui.loading.input > .icon {
111
- background: url(../images/loader-mini.gif) no-repeat 50% 50%;
111
+ background: url(/assets/semantic-ui/loader-mini.gif) no-repeat 50% 50%;
112
112
  }
113
113
  .ui.loading.input > .icon:before,
114
114
  .ui.loading.input > .icon:after {
@@ -105,25 +105,25 @@
105
105
  /* Tiny Size */
106
106
  .ui.dimmer .mini.ui.loader,
107
107
  .ui.inverted .mini.ui.loader {
108
- background-image: url(../images/loader-mini-inverted.gif);
108
+ background-image: url(/assets/semantic-ui/loader-mini-inverted.gif);
109
109
  }
110
110
 
111
111
  /* Small Size */
112
112
  .ui.dimmer .small.ui.loader,
113
113
  .ui.inverted .small.ui.loader {
114
- background-image: url(../images/loader-small-inverted.gif);
114
+ background-image: url(/assets/semantic-ui/loader-small-inverted.gif);
115
115
  }
116
116
 
117
117
  /* Standard Size */
118
118
  .ui.dimmer .ui.loader,
119
119
  .ui.inverted.loader {
120
- background-image: url(../images/loader-medium-inverted.gif);
120
+ background-image: url(/assets/semantic-ui/loader-medium-inverted.gif);
121
121
  }
122
122
 
123
123
  /* Large Size */
124
124
  .ui.dimmer .large.ui.loader,
125
125
  .ui.inverted .large.ui.loader {
126
- background-image: url(../images/loader-large-inverted.gif);
126
+ background-image: url(/assets/semantic-ui/loader-large-inverted.gif);
127
127
  }
128
128
 
129
129
  /*-------------------
@@ -135,7 +135,7 @@
135
135
  .ui.mini.loader {
136
136
  width: 16px;
137
137
  height: 16px;
138
- background-image: url(../images/loader-mini.gif);
138
+ background-image: url(/assets/semantic-ui/loader-mini.gif);
139
139
  }
140
140
 
141
141
  /* Small Size */
@@ -143,14 +143,14 @@
143
143
  .ui.small.loader {
144
144
  width: 24px;
145
145
  height: 24px;
146
- background-image: url(../images/loader-small.gif);
146
+ background-image: url(/assets/semantic-ui/loader-small.gif);
147
147
  }
148
148
 
149
149
  .ui.inverted.dimmer .ui.loader,
150
150
  .ui.loader {
151
151
  width: 32px;
152
152
  height: 32px;
153
- background: url(../images/loader-medium.gif) no-repeat;
153
+ background: url(/assets/semantic-ui/loader-medium.gif) no-repeat;
154
154
  background-position: 48% 0px;
155
155
  }
156
156
 
@@ -159,7 +159,7 @@
159
159
  .ui.loader.large {
160
160
  width: 64px;
161
161
  height: 64px;
162
- background-image: url(../images/loader-large.gif);
162
+ background-image: url(/assets/semantic-ui/loader-large.gif);
163
163
  }
164
164
 
165
165
 
@@ -28,7 +28,7 @@
28
28
  vertical-align: middle;
29
29
  }
30
30
  .ui.checkbox input {
31
- visibility: hidden;
31
+ opacity: 0;
32
32
  outline: none;
33
33
  }
34
34
 
@@ -160,15 +160,23 @@
160
160
  .ui.page.dimmer {
161
161
  position: fixed;
162
162
 
163
+ -webkit-transform-style: preserve-3d;
164
+ -moz-transform-style: preserve-3d;
165
+ -ms-transform-style: preserve-3d;
166
+ transform-style: preserve-3d;
167
+
163
168
  -webkit-perspective: 2000px;
164
169
  -moz-perspective: 2000px;
165
170
  perspective: 2000px;
166
171
 
167
- -webkit-transform-origin: top center;
168
- -moz-transform-origin: top center;
169
- -o-transform-origin: top center;
170
- -ms-transform-origin: top center;
171
- transform-origin: top center;
172
+ -webkit-transform-origin: center center;
173
+ -moz-transform-origin: center center;
174
+ -o-transform-origin: center center;
175
+ -ms-transform-origin: center center;
176
+ transform-origin: center center;
177
+ }
178
+ .ui.scrolling.page.dimmer {
179
+ position: absolute;
172
180
  }
173
181
  /*
174
182
  body.ui.dimmed.dimmable > :not(.dimmer){
@@ -41,6 +41,15 @@
41
41
  ;
42
42
  }
43
43
 
44
+
45
+ /*******************************
46
+ Content
47
+ *******************************/
48
+
49
+ /*--------------
50
+ Menu
51
+ ---------------*/
52
+
44
53
  .ui.dropdown .menu {
45
54
  position: absolute;
46
55
  display: none;
@@ -70,12 +79,33 @@
70
79
  z-index: 11;
71
80
  }
72
81
 
73
- /* Dropdown Icon */
82
+ /*--------------
83
+ Icon
84
+ ---------------*/
85
+
74
86
  .ui.dropdown > .dropdown.icon {
75
87
  width: auto;
88
+ margin: 0em 0em 0em 0.5em;
89
+ }
90
+
91
+ .ui.dropdown > .dropdown.icon:before {
92
+ content: "\f0d7";
76
93
  }
77
94
 
78
- /* Dropdown Text */
95
+ .ui.dropdown .menu .item .dropdown.icon {
96
+ width: auto;
97
+ float: right;
98
+ margin: 0em 0em 0em 0.5em;
99
+ }
100
+ .ui.dropdown .menu .item .dropdown.icon:before {
101
+ content: "\f0da";
102
+ }
103
+
104
+
105
+ /*--------------
106
+ Text
107
+ ---------------*/
108
+
79
109
  .ui.dropdown > .text {
80
110
  cursor: pointer;
81
111
  display: inline-block;
@@ -91,13 +121,12 @@
91
121
  .ui.dropdown .menu {
92
122
  left: 0px;
93
123
  }
94
- .ui.menu .dropdown:last-child .menu,
95
- .ui > .ui.dropdown:last-child .menu {
96
- left: auto;
97
- right: 0px;
98
- }
99
124
 
100
- /* Sub Menu Position */
125
+
126
+ /*--------------
127
+ Sub Menu
128
+ ---------------*/
129
+
101
130
  .ui.dropdown .menu .menu {
102
131
  top: 0% !important;
103
132
  left: 100% !important;
@@ -137,6 +166,17 @@
137
166
  border-top: none;
138
167
  }
139
168
 
169
+ /*******************************
170
+ Coupling
171
+ *******************************/
172
+
173
+ /* Opposite on last menu on right */
174
+ .ui.menu .right.menu .dropdown:last-child .menu,
175
+ .ui.buttons > .ui.dropdown:last-child .menu {
176
+ left: auto;
177
+ right: 0px;
178
+ }
179
+
140
180
 
141
181
  /*******************************
142
182
  States