semantic-ui-rails 0.1.0 → 0.1.0.1

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 (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