semantic-ui-rails 0.0.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (90) hide show
  1. checksums.yaml +7 -0
  2. data/.gitignore +17 -0
  3. data/Gemfile +4 -0
  4. data/LICENSE.txt +22 -0
  5. data/README.md +26 -0
  6. data/Rakefile +1 -0
  7. data/lib/generators/semantic/install/install_generator.rb +38 -0
  8. data/lib/generators/semantic/install/templates/semantic-ui.js +21 -0
  9. data/lib/generators/semantic/install/templates/semantic-ui/collections.less +6 -0
  10. data/lib/generators/semantic/install/templates/semantic-ui/elements.less +11 -0
  11. data/lib/generators/semantic/install/templates/semantic-ui/modules.less +18 -0
  12. data/lib/generators/semantic/install/templates/semantic-ui/views.less +6 -0
  13. data/lib/semantic/ui/rails.rb +10 -0
  14. data/lib/semantic/ui/rails/engine.rb +8 -0
  15. data/lib/semantic/ui/rails/version.rb +7 -0
  16. data/semantic-ui-rails.gemspec +23 -0
  17. data/vendor/assets/fonts/icons.eot +0 -0
  18. data/vendor/assets/fonts/icons.svg +450 -0
  19. data/vendor/assets/fonts/icons.ttf +0 -0
  20. data/vendor/assets/fonts/icons.woff +0 -0
  21. data/vendor/assets/images/semantic-ui/loader-large-inverted.gif +0 -0
  22. data/vendor/assets/images/semantic-ui/loader-large.gif +0 -0
  23. data/vendor/assets/images/semantic-ui/loader-medium-inverted.gif +0 -0
  24. data/vendor/assets/images/semantic-ui/loader-medium.gif +0 -0
  25. data/vendor/assets/images/semantic-ui/loader-mini-inverted.gif +0 -0
  26. data/vendor/assets/images/semantic-ui/loader-mini.gif +0 -0
  27. data/vendor/assets/images/semantic-ui/loader-small-inverted.gif +0 -0
  28. data/vendor/assets/images/semantic-ui/loader-small.gif +0 -0
  29. data/vendor/assets/javascripts/semantic-ui/accordion.js +411 -0
  30. data/vendor/assets/javascripts/semantic-ui/behavior/api.js +666 -0
  31. data/vendor/assets/javascripts/semantic-ui/behavior/colorize.js +271 -0
  32. data/vendor/assets/javascripts/semantic-ui/behavior/form.js +657 -0
  33. data/vendor/assets/javascripts/semantic-ui/behavior/state.js +752 -0
  34. data/vendor/assets/javascripts/semantic-ui/carousel.js +327 -0
  35. data/vendor/assets/javascripts/semantic-ui/chatroom.js +766 -0
  36. data/vendor/assets/javascripts/semantic-ui/checkbox.js +348 -0
  37. data/vendor/assets/javascripts/semantic-ui/dimmer.js +525 -0
  38. data/vendor/assets/javascripts/semantic-ui/dropdown.js +697 -0
  39. data/vendor/assets/javascripts/semantic-ui/modal.js +478 -0
  40. data/vendor/assets/javascripts/semantic-ui/nag.js +542 -0
  41. data/vendor/assets/javascripts/semantic-ui/popup.js +721 -0
  42. data/vendor/assets/javascripts/semantic-ui/rating.js +358 -0
  43. data/vendor/assets/javascripts/semantic-ui/search.js +770 -0
  44. data/vendor/assets/javascripts/semantic-ui/shape.js +776 -0
  45. data/vendor/assets/javascripts/semantic-ui/sidebar.js +489 -0
  46. data/vendor/assets/javascripts/semantic-ui/tab.js +674 -0
  47. data/vendor/assets/javascripts/semantic-ui/transition.js +645 -0
  48. data/vendor/assets/javascripts/semantic-ui/video.js +459 -0
  49. data/vendor/assets/stylesheets/semantic-ui/collections/breadcrumb.less +79 -0
  50. data/vendor/assets/stylesheets/semantic-ui/collections/form.less +536 -0
  51. data/vendor/assets/stylesheets/semantic-ui/collections/grid.less +655 -0
  52. data/vendor/assets/stylesheets/semantic-ui/collections/menu.less +1736 -0
  53. data/vendor/assets/stylesheets/semantic-ui/collections/message.less +337 -0
  54. data/vendor/assets/stylesheets/semantic-ui/collections/table.less +526 -0
  55. data/vendor/assets/stylesheets/semantic-ui/elements/button.less +1294 -0
  56. data/vendor/assets/stylesheets/semantic-ui/elements/divider.less +200 -0
  57. data/vendor/assets/stylesheets/semantic-ui/elements/header.less +325 -0
  58. data/vendor/assets/stylesheets/semantic-ui/elements/icon.less +449 -0
  59. data/vendor/assets/stylesheets/semantic-ui/elements/image.less +170 -0
  60. data/vendor/assets/stylesheets/semantic-ui/elements/input.less +287 -0
  61. data/vendor/assets/stylesheets/semantic-ui/elements/label.less +805 -0
  62. data/vendor/assets/stylesheets/semantic-ui/elements/loader.less +178 -0
  63. data/vendor/assets/stylesheets/semantic-ui/elements/progress.less +353 -0
  64. data/vendor/assets/stylesheets/semantic-ui/elements/segment.less +465 -0
  65. data/vendor/assets/stylesheets/semantic-ui/elements/step.less +294 -0
  66. data/vendor/assets/stylesheets/semantic-ui/modules/accordion.less +135 -0
  67. data/vendor/assets/stylesheets/semantic-ui/modules/carousel.less +71 -0
  68. data/vendor/assets/stylesheets/semantic-ui/modules/chatroom.less +271 -0
  69. data/vendor/assets/stylesheets/semantic-ui/modules/checkbox.less +378 -0
  70. data/vendor/assets/stylesheets/semantic-ui/modules/dimmer.less +230 -0
  71. data/vendor/assets/stylesheets/semantic-ui/modules/dropdown.less +506 -0
  72. data/vendor/assets/stylesheets/semantic-ui/modules/extra.transition.less +1197 -0
  73. data/vendor/assets/stylesheets/semantic-ui/modules/modal.less +154 -0
  74. data/vendor/assets/stylesheets/semantic-ui/modules/nag.less +175 -0
  75. data/vendor/assets/stylesheets/semantic-ui/modules/popup.less +238 -0
  76. data/vendor/assets/stylesheets/semantic-ui/modules/rating.less +151 -0
  77. data/vendor/assets/stylesheets/semantic-ui/modules/reveal.less +367 -0
  78. data/vendor/assets/stylesheets/semantic-ui/modules/search.less +275 -0
  79. data/vendor/assets/stylesheets/semantic-ui/modules/shape.less +115 -0
  80. data/vendor/assets/stylesheets/semantic-ui/modules/sidebar.less +147 -0
  81. data/vendor/assets/stylesheets/semantic-ui/modules/tab.less +59 -0
  82. data/vendor/assets/stylesheets/semantic-ui/modules/transition.less +839 -0
  83. data/vendor/assets/stylesheets/semantic-ui/modules/video.less +99 -0
  84. data/vendor/assets/stylesheets/semantic-ui/views/comment.less +221 -0
  85. data/vendor/assets/stylesheets/semantic-ui/views/feed.less +151 -0
  86. data/vendor/assets/stylesheets/semantic-ui/views/item.less +641 -0
  87. data/vendor/assets/stylesheets/semantic-ui/views/list.less +491 -0
  88. data/vendor/assets/stylesheets/semantic-ui/views/sitemap.less +47 -0
  89. data/vendor/assets/stylesheets/semantic-ui/views/statistic.less +34 -0
  90. metadata +161 -0
@@ -0,0 +1,271 @@
1
+
2
+ /*******************************
3
+ Chat Room
4
+ *******************************/
5
+
6
+ .ui.chatroom {
7
+ background-color: #F8F8F8;
8
+ width: 330px;
9
+ height: 370px;
10
+ padding: 0px;
11
+ }
12
+ .ui.chatroom .room {
13
+ position: relative;
14
+ background-color: #FFFFFF;
15
+ overflow: hidden;
16
+ height: 286px;
17
+ border: 1px solid rgba(0, 0, 0, 0.1);
18
+ border-top: none;
19
+ border-bottom: none;
20
+ }
21
+ .ui.chatroom .room .loader {
22
+ display: none;
23
+ margin: -25px 0px 0px -25px;
24
+ }
25
+ /* Chat Room Actions */
26
+ .ui.chatroom .actions {
27
+ overflow: hidden;
28
+ background-color: #EEEEEE;
29
+ padding: 4px;
30
+ border: 1px solid rgba(0, 0, 0, 0.1);
31
+
32
+ -moz-border-radius: 5px 5px 0px 0px;
33
+ -webkit-border-radius: 5px 5px 0px 0px;
34
+ border-radius: 5px 5px 0px 0px;
35
+ }
36
+ .ui.chatroom .actions .button {
37
+ float: right;
38
+ margin-left: 3px;
39
+ }
40
+
41
+ /* Online User Count */
42
+ .ui.chatroom .actions .message {
43
+ float: left;
44
+ margin-left: 6px;
45
+ font-size: 11px;
46
+ color: #AAAAAA;
47
+ text-shadow: 0px -1px 0px rgba(255, 255, 255, 0.8);
48
+ line-height: 28px;
49
+ }
50
+ .ui.chatroom .actions .message .loader {
51
+ display: inline-block;
52
+ margin-right: 8px;
53
+ }
54
+
55
+
56
+ /* Chat Room Text Log */
57
+ .ui.chatroom .log {
58
+ float: left;
59
+
60
+ overflow: auto;
61
+ overflow-x: hidden;
62
+ overflow-y: auto;
63
+ }
64
+ .ui.chatroom .log .message {
65
+ padding: 3px 0px;
66
+ border-top: 1px dotted #DADADA;
67
+ }
68
+ .ui.chatroom .log .message:first-child {
69
+ border-top: none;
70
+ }
71
+ /* status event */
72
+ .ui.chatroom .status {
73
+ padding: 5px 0px;
74
+ color: #AAAAAA;
75
+
76
+ font-size: 12px;
77
+ font-style: italic;
78
+ line-height: 1.33;
79
+ border-top: 1px dotted #DADADA;
80
+ }
81
+ .ui.chatroom .log .status:first-child {
82
+ border-top: none;
83
+ }
84
+
85
+
86
+
87
+ .ui.chatroom .log .flag {
88
+ float: left;
89
+ }
90
+ .ui.chatroom .log p {
91
+ margin-left: 0px;
92
+ }
93
+ .ui.chatroom .log .author {
94
+ font-weight: bold;
95
+ -webkit-transition: color 0.3s ease-out;
96
+ -moz-transition: color 0.3s ease-out;
97
+ -o-transition: color 0.3s ease-out;
98
+ -ms-transition: color 0.3s ease-out;
99
+ transition: color 0.3s ease-out;
100
+ }
101
+ .ui.chatroom .log a.author:hover {
102
+ opacity: 0.8;
103
+ }
104
+
105
+ .ui.chatroom .log .message.admin p {
106
+ font-weight: bold;
107
+ margin: 1px 0px 0px 23px;
108
+ }
109
+ .ui.chatroom .log .divider {
110
+ margin: -1px 0px;
111
+ font-size: 11px;
112
+ padding: 10px 0px;
113
+ border-top: 1px solid #F8F8F8;
114
+ border-bottom: 1px solid #F8F8F8;
115
+ }
116
+ .ui.chatroom .log .divider .rule {
117
+ top: 50%;
118
+ width: 15%;
119
+ }
120
+
121
+ .ui.chatroom .log .divider .label {
122
+ color: #777777;
123
+ margin: 0px;
124
+ }
125
+
126
+ /* Chat Room User List */
127
+ .ui.chatroom .room .list {
128
+ position: relative;
129
+ overflow: auto;
130
+ overflow-x: hidden;
131
+ overflow-y: auto;
132
+
133
+ float: left;
134
+ background-color: #EEEEEE;
135
+ border-left: 1px solid #DDDDDD;
136
+ }
137
+ .ui.chatroom .room .list .user {
138
+ display: table;
139
+ padding: 3px 7px;
140
+ border-bottom: 1px solid #DDDDDD;
141
+ }
142
+ .ui.chatroom .room .list .user:hover {
143
+ background-color: #F8F8F8;
144
+ }
145
+ .ui.chatroom .room .list .image {
146
+ display: table-cell;
147
+ vertical-align: middle;
148
+ width: 20px;
149
+ }
150
+ .ui.chatroom .room .list .image img {
151
+ width: 20px;
152
+ height: 20px;
153
+ vertical-align: middle;
154
+ }
155
+ .ui.chatroom .room .list p {
156
+ display: table-cell;
157
+ vertical-align: middle;
158
+ padding-left: 7px;
159
+ padding-right: 14px;
160
+ font-size: 11px;
161
+ line-height: 1.2;
162
+ font-weight: bold;
163
+ }
164
+ .ui.chatroom .room .list a:hover {
165
+ opacity: 0.8;
166
+ }
167
+
168
+ /* User List Loading */
169
+ .ui.chatroom.loading .loader {
170
+ display: block;
171
+ }
172
+
173
+
174
+
175
+ /* Chat Room Talk Input */
176
+ .ui.chatroom .talk {
177
+ border: 1px solid rgba(0, 0, 0, 0.1);
178
+ padding: 5px 0px 0px;
179
+
180
+ background-color: #EEEEEE;
181
+
182
+ -webkit-border-radius: 0px 0px 5px 5px;
183
+ -moz-border-radius: 0px 0px 5px 5px;
184
+ border-radius: 0px 0px 5px 5px;
185
+ }
186
+ .ui.chatroom .talk .avatar,
187
+ .ui.chatroom .talk input,
188
+ .ui.chatroom .talk .button {
189
+ float: left;
190
+ }
191
+
192
+ .ui.chatroom .talk .avatar img {
193
+ display: block;
194
+ width: 30px;
195
+ height: 30px;
196
+ margin-right: 4px;
197
+ border-radius: 500rem;
198
+ }
199
+ .ui.chatroom .talk input {
200
+ border: 1px solid #CCCCCC;
201
+ margin: 0px;
202
+ width: 196px;
203
+ height: 14px;
204
+ padding: 8px 5px;
205
+ font-size: 12px;
206
+ color: #555555;
207
+ }
208
+ .ui.chatroom .talk input.focus {
209
+ border: 1px solid #AAAAAA;
210
+ }
211
+ .ui.chatroom .send {
212
+ width: 80px;
213
+ height: 32px;
214
+
215
+ margin-left: -1px;
216
+ padding: 4px 12px;
217
+ font-size: 12px;
218
+ line-height: 23px;
219
+
220
+ -webkit-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
221
+ -moz-box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
222
+ box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.1) inset;
223
+
224
+ border-radius: 0 5px 5px 0;
225
+ }
226
+ .ui.chatroom .talk .log-in.button {
227
+ display: block;
228
+ float: none;
229
+ margin-top: -6px;
230
+ height: 22px;
231
+ border-radius: 0px 0px 4px 4px;
232
+ }
233
+ .ui.chatroom .talk .log-in.button i {
234
+ vertical-align: text-top;
235
+ }
236
+
237
+ /* Quirky Flags */
238
+ .ui.chatroom .log .team.flag {
239
+ width: 18px;
240
+ }
241
+
242
+ /* Chat room Loaded */
243
+ .ui.chatroom.loading .loader {
244
+ display: block;
245
+ }
246
+
247
+
248
+ /* Standard Size */
249
+ .ui.chatroom {
250
+ width: 330px;
251
+ height: 370px;
252
+ }
253
+ .ui.chatroom .room .container {
254
+ width: 3000px;
255
+ }
256
+ .ui.chatroom .log {
257
+ width: 314px;
258
+ height: 278px;
259
+ padding: 4px 7px;
260
+ }
261
+ .ui.chatroom .room .list {
262
+ width: 124px;
263
+ height: 278px;
264
+ padding: 4px 0px;
265
+ }
266
+ .ui.chatroom .room .list .user {
267
+ width: 110px;
268
+ }
269
+ .ui.chatroom .talk {
270
+ height: 40px;
271
+ }
@@ -0,0 +1,378 @@
1
+ /*******************************
2
+ UI Checkbox
3
+ *******************************/
4
+
5
+ /*--------------
6
+ Standard
7
+ ---------------*/
8
+
9
+
10
+ /*--- Content ---*/
11
+ .ui.checkbox {
12
+ position: relative;
13
+ display: inline-block;
14
+ outline: none;
15
+
16
+ margin-right: 0.5em;
17
+ vertical-align: middle;
18
+ }
19
+ .ui.checkbox input {
20
+ visibility: hidden;
21
+ outline: none;
22
+ }
23
+
24
+
25
+ /*--- Box ---*/
26
+ .ui.checkbox .box,
27
+ .ui.checkbox label {
28
+ outline: none;
29
+ cursor: pointer;
30
+ position: absolute;
31
+
32
+ line-height: 1;
33
+ width: 1em;
34
+ height: 1em;
35
+ bottom: 0em;
36
+ left: 0em;
37
+ border-radius: 4px;
38
+
39
+ -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
40
+ -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
41
+ box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.2);
42
+
43
+ background: #FFFFFF;
44
+
45
+ -webkit-transition:
46
+ background-color 0.1s ease-out,
47
+ box-shadow 0.1s ease-out
48
+ ;
49
+ -moz-transition:
50
+ background-color 0.1s ease-out,
51
+ box-shadow 0.1s ease-out
52
+ ;
53
+ -o-transition:
54
+ background-color 0.1s ease-out,
55
+ box-shadow 0.1s ease-out
56
+ ;
57
+ -ms-transition:
58
+ background-color 0.1s ease-out,
59
+ box-shadow 0.1s ease-out
60
+ ;
61
+ transition:
62
+ background-color 0.1s ease-out,
63
+ box-shadow 0.1s ease-out
64
+ ;
65
+ }
66
+
67
+ /*--- Checkbox ---*/
68
+ .ui.checkbox .box:after,
69
+ .ui.checkbox label:after {
70
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
71
+ filter: alpha(opacity=0);
72
+ opacity: 0;
73
+ content: '';
74
+ position: absolute;
75
+ background: transparent;
76
+ border: 0.2em solid #333333;
77
+ border-top: none;
78
+ border-right: none;
79
+ -webkit-transform: rotate(-45deg);
80
+ -moz-transform: rotate(-45deg);
81
+ -o-transform: rotate(-45deg);
82
+ -ms-transform: rotate(-45deg);
83
+ transform: rotate(-45deg);
84
+ }
85
+ .ui.checkbox .box:after,
86
+ .ui.checkbox label:after {
87
+ top: 0.3em;
88
+ left: 0.2em;
89
+ width: 0.45em;
90
+ height: 0.15em;
91
+ }
92
+
93
+ /*--- Label ---*/
94
+ .ui.checkbox + label {
95
+ cursor: pointer;
96
+ opacity: 0.85;
97
+ vertical-align: middle;
98
+ }
99
+ .ui.checkbox + label:hover {
100
+ opacity: 1;
101
+ }
102
+
103
+ /*******************************
104
+ States
105
+ *******************************/
106
+
107
+
108
+ /*--- Hover ---*/
109
+ .ui.checkbox .box:hover,
110
+ .ui.checkbox label:hover {
111
+ background-color: #FAFAFA;
112
+ -webkit-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
113
+ -moz-box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
114
+ box-shadow: 0em 0em 0em 1px rgba(0, 0, 0, 0.3);
115
+ }
116
+
117
+
118
+ /*--- Down ---*/
119
+ .ui.checkbox .box:active,
120
+ .ui.checkbox label:active {
121
+ background-color: #F5F5F5;
122
+ }
123
+
124
+
125
+ /*--- Active ---*/
126
+ .ui.checkbox input:checked + .box:after,
127
+ .ui.checkbox input:checked + label:after {
128
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)";
129
+ filter: alpha(opacity=100);
130
+ opacity: 1;
131
+ }
132
+
133
+
134
+ /*--- Disabled ---*/
135
+ .ui.disabled.checkbox + .box:after,
136
+ .ui.checkbox input[disabled] + .box:after,
137
+ .ui.disabled.checkbox label,
138
+ .ui.checkbox input[disabled] + label {
139
+ opacity: 0.4;
140
+ }
141
+
142
+
143
+ /*******************************
144
+ Variations
145
+ *******************************/
146
+
147
+
148
+ /*--------------
149
+ Radio
150
+ ---------------*/
151
+
152
+ .ui.radio.checkbox {
153
+ width: 14px;
154
+ height: 16px;
155
+ }
156
+ .ui.radio.checkbox .box,
157
+ .ui.radio.checkbox label {
158
+ width: 14px;
159
+ height: 14px;
160
+ -webkit-border-radius: 500px;
161
+ -moz-border-radius: 500px;
162
+ border-radius: 500px;
163
+ }
164
+ .ui.radio.checkbox .box:after,
165
+ .ui.radio.checkbox label:after {
166
+ top: 3px;
167
+ left: 3px;
168
+
169
+ border: none;
170
+ width: 8px;
171
+ height: 8px;
172
+
173
+ background-color: #555555;
174
+
175
+ -webkit-border-radius: 500px;
176
+ -moz-border-radius: 500px;
177
+ border-radius: 500px;
178
+ }
179
+
180
+ /*--------------
181
+ Slider
182
+ ---------------*/
183
+
184
+ .ui.slider.checkbox {
185
+ width: 3em;
186
+ height: 2em;
187
+ }
188
+ /* Line */
189
+ .ui.slider.checkbox:after {
190
+ position: absolute;
191
+ top: 1em;
192
+ left: 0em;
193
+ content: '';
194
+
195
+ width: 100%;
196
+ height: 2px;
197
+ background-color: rgba(0, 0, 0, 0.1);
198
+ }
199
+ /* Button */
200
+ .ui.slider.checkbox .box,
201
+ .ui.slider.checkbox label {
202
+ cursor: pointer;
203
+ display: block;
204
+
205
+ position: absolute;
206
+ top: 0.25em;
207
+ left: 0;
208
+ z-index: 1;
209
+
210
+ width: 1.5em;
211
+ height: 1.5em;
212
+
213
+ -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
214
+ -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
215
+ box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
216
+
217
+ border-radius: 50rem;
218
+
219
+ -webkit-transition: left 0.3s ease 0s;
220
+ -moz-transition: left 0.3s ease 0s;
221
+ -o-transition: left 0.3s ease 0s;
222
+ -ms-transition: left 0.3s ease 0s;
223
+ transition: left 0.3s ease 0s;
224
+ }
225
+
226
+ /* Button Activation Light */
227
+ .ui.slider.checkbox .box:after,
228
+ .ui.slider.checkbox label:after {
229
+ opacity: 1;
230
+
231
+ position: absolute;
232
+ content: '';
233
+ top: 0.375em;
234
+ left: 0.375em;
235
+
236
+ border: none;
237
+ width: 0.75em;
238
+ height: 0.75em;
239
+
240
+ background-color: #D95C5C;
241
+
242
+ border-radius: 50rem;
243
+
244
+ -webkit-transition: background 0.3s ease 0s;
245
+ -moz-transition: background 0.3s ease 0s;
246
+ -o-transition: background 0.3s ease 0s;
247
+ -ms-transition: background 0.3s ease 0s;
248
+ transition: background 0.3s ease 0s;
249
+ }
250
+
251
+ /* Active Slider Toggle */
252
+ .ui.slider.checkbox input:checked + .box,
253
+ .ui.slider.checkbox input:checked + label {
254
+ left: 1.75em;
255
+ }
256
+ .ui.slider.checkbox input:checked + .box:after,
257
+ .ui.slider.checkbox input:checked + label:after {
258
+ background-color: #89B84C;
259
+ }
260
+
261
+
262
+
263
+ /*--------------
264
+ Toggle
265
+ ---------------*/
266
+
267
+ .ui.toggle.checkbox {
268
+ width: 3em;
269
+ height: 2em;
270
+ }
271
+ /* Line */
272
+ .ui.toggle.checkbox:after {
273
+ cursor: pointer;
274
+ display: block;
275
+
276
+ position: absolute;
277
+ content: '';
278
+ top: 0.25em;
279
+ left: 0em;
280
+ z-index: 1;
281
+
282
+ background-color: #FFFFFF;
283
+ width: 100%;
284
+ height: 1.5em;
285
+
286
+ -webkit-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
287
+ -moz-box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
288
+ box-shadow: 0px 0px 0px 1px rgba(0, 0, 0, 0.1) inset;
289
+
290
+ border-radius: 50rem;
291
+ }
292
+ .ui.toggle.checkbox .box,
293
+ .ui.toggle.checkbox label {
294
+ position: absolute;
295
+ top: 0.65em;
296
+ left: 0.5em;
297
+
298
+ -webkit-transition: left 0.3s ease 0s;
299
+ -moz-transition: left 0.3s ease 0s;
300
+ -o-transition: left 0.3s ease 0s;
301
+ -ms-transition: left 0.3s ease 0s;
302
+ transition: left 0.3s ease 0s;
303
+
304
+ background-color: transparent;
305
+ -webkit-box-shadow: none;
306
+ -moz-box-shadow: none;
307
+ box-shadow: none;
308
+ }
309
+ /* Button Activation Light */
310
+ .ui.toggle.checkbox .box:after,
311
+ .ui.toggle.checkbox label:after {
312
+ opacity: 1;
313
+
314
+ content: '';
315
+ position: absolute;
316
+ top: 0px;
317
+ left: 0px;
318
+ z-index: 2;
319
+
320
+ border: none;
321
+ width: 0.75em;
322
+ height: 0.75em;
323
+
324
+ background-color: #D95C5C;
325
+
326
+ border-radius: 50rem;
327
+
328
+ -webkit-transition: background 0.3s ease 0s;
329
+ -moz-transition: background 0.3s ease 0s;
330
+ -o-transition: background 0.3s ease 0s;
331
+ -ms-transition: background 0.3s ease 0s;
332
+ transition: background 0.3s ease 0s;
333
+ }
334
+
335
+ /* Active toggle Toggle */
336
+ .ui.toggle.checkbox input:checked + .box,
337
+ .ui.toggle.checkbox input:checked + label {
338
+ left: 1.75em;
339
+ }
340
+ .ui.toggle.checkbox input:checked + .box:after,
341
+ .ui.toggle.checkbox input:checked + label:after {
342
+ background-color: #89B84C;
343
+ }
344
+
345
+
346
+
347
+ /*--------------
348
+ Sizes
349
+ ---------------*/
350
+
351
+ .ui.checkbox {
352
+ width: 1em;
353
+ height: 1em;
354
+ }
355
+ .ui.checkbox,
356
+ .ui.checkbox .box,
357
+ .ui.checkbox label {
358
+ font-size: 1em;
359
+ }
360
+
361
+ .ui.large.checkbox {
362
+ width: 1.25em;
363
+ height: 1.25em;
364
+ }
365
+ .ui.large.checkbox,
366
+ .ui.large.checkbox .box,
367
+ .ui.large.checkbox label {
368
+ font-size: 1.25em;
369
+ }
370
+ .ui.huge.checkbox {
371
+ width: 1.5em;
372
+ height: 1.5em;
373
+ }
374
+ .ui.huge.checkbox,
375
+ .ui.huge.checkbox .box,
376
+ .ui.huge.checkbox label {
377
+ font-size: 1.5em;
378
+ }