fuelux-rails 2.4.2 → 2.5.0

Sign up to get free protection for your applications and to get access to all the features.
@@ -52,7 +52,13 @@
52
52
  var sizer = $('<div/>').addClass('select-sizer');
53
53
  var width = 0;
54
54
 
55
- $('body').append(sizer);
55
+ if( Boolean( $(document).find( 'html' ).hasClass( 'fuelux' ) ) ) {
56
+ // default behavior for fuel ux setup. means fuelux was a class on the html tag
57
+ $( document.body ).append( sizer );
58
+ } else {
59
+ // fuelux is not a class on the html tag. So we'll look for the first one we find so the correct styles get applied to the sizer
60
+ $( '.fuelux:first' ).append( sizer );
61
+ }
56
62
 
57
63
  // iterate through each item to find longest string
58
64
  this.$element.find('a').each(function () {
@@ -2,12 +2,20 @@
2
2
  // --------------------------------------------------
3
3
  @treeBackgroundHover: #DFEEF5;
4
4
  @treeBackgroundSelect: #B9DFF1;
5
+ // Backup Variables
6
+ // --------------------------------------------------
7
+ @white: #FFFFFF;
8
+ @grayLight: #999999;
9
+ @grayLighter: #EEEEEE;
5
10
  @import "fuelux/checkbox.less";
6
11
  @import "fuelux/combobox.less";
7
12
  @import "fuelux/datagrid.less";
13
+ @import "fuelux/datepicker.less";
8
14
  @import "fuelux/intelligent-dropdown.less";
9
15
  @import "fuelux/pillbox.less";
16
+ @import "fuelux/preloader.less";
10
17
  @import "fuelux/radio.less";
18
+ @import "fuelux/scheduler.less";
11
19
  @import "fuelux/search.less";
12
20
  @import "fuelux/select.less";
13
21
  @import "fuelux/spinner.less";
@@ -0,0 +1,240 @@
1
+ @dropdownBorderRadius: 6px;
2
+ @headerHeight: 24px;
3
+ @selectedDayBg: #68ACE7;
4
+ @hoverDayBg: #DFEEF5;
5
+ @todayBg: #E6E6E6;
6
+
7
+
8
+ .datepicker {
9
+
10
+ .input-append, .input-group {
11
+ margin-bottom: 1px;
12
+
13
+ button {
14
+ outline: none;
15
+ }
16
+ }
17
+
18
+ .calendar {
19
+ float: left;
20
+ background: @white;
21
+ background-color: @dropdownBackground;
22
+ border: 1px solid #ccc; // Fallback for IE7-8
23
+ border: 1px solid @dropdownBorder;
24
+ *border-right-width: 2px;
25
+ *border-bottom-width: 2px;
26
+ .border-radius(@dropdownBorderRadius);
27
+ .box-shadow(0 5px 10px rgba(0,0,0,.2));
28
+ -webkit-background-clip: padding-box;
29
+ -moz-background-clip: padding;
30
+ background-clip: padding-box;
31
+
32
+ .header {
33
+ height: @headerHeight;
34
+
35
+ .left {
36
+ float: left;
37
+ height: @headerHeight;
38
+ padding-top: 2px;
39
+ padding-right: 8px;
40
+ //padding-bottom: 2px;
41
+ padding-left: 10px;
42
+ cursor: pointer;
43
+ .border-top-left-radius(@dropdownBorderRadius);
44
+ .border-bottom-right-radius(@dropdownBorderRadius);
45
+
46
+ .leftArrow {
47
+ margin-top: 5px;
48
+ margin-bottom: 5px;
49
+ width: 7px;
50
+ height: 7px;
51
+ border-left: 3px solid @grayDark;
52
+ border-bottom: 3px solid @grayDark;
53
+ -webkit-transform: rotate(45deg);
54
+ -moz-transform: rotate(45deg);
55
+ -o-transform: rotate(45deg);
56
+ -ms-transform: rotate(45deg);
57
+ transform: rotate(45deg);
58
+ }
59
+ }
60
+
61
+ .right {
62
+ float: right;
63
+ height: @headerHeight;
64
+ padding-top: 2px;
65
+ padding-right: 10px;
66
+ //padding-bottom: 2px;
67
+ padding-left: 8px;
68
+ cursor: pointer;
69
+ .border-top-right-radius(@dropdownBorderRadius);
70
+ .border-bottom-left-radius(@dropdownBorderRadius);
71
+
72
+ .rightArrow {
73
+ margin-top: 5px;
74
+ margin-bottom: 5px;
75
+ width: 7px;
76
+ height: 7px;
77
+ border-right: 3px solid @grayDark;
78
+ border-top: 3px solid @grayDark;
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
+ }
86
+
87
+ .center {
88
+ height: @headerHeight + 2px;
89
+ font-size: 13px;
90
+ line-height: 1.9em;
91
+ margin: 0 auto;
92
+ text-align: center;
93
+ cursor: pointer;
94
+ .border-bottom-radius(@dropdownBorderRadius);
95
+ }
96
+ }
97
+
98
+ .header, .footer {
99
+ //background-color: #474949;
100
+ line-height: 20px;
101
+ font-weight: bold;
102
+ }
103
+
104
+ .footer {
105
+ .border-bottom-radius(@dropdownBorderRadius);
106
+ }
107
+
108
+ .footer, .header {
109
+ .hover {
110
+ &:hover {
111
+ background-color: #f1f6fc;
112
+ cursor: pointer;
113
+ }
114
+ }
115
+ }
116
+
117
+ * {
118
+ font-size: 13px;
119
+ color: @grayDark;
120
+ text-align: center;
121
+ -webkit-touch-callout: none;
122
+ -webkit-user-select: none;
123
+ -khtml-user-select: none;
124
+ -moz-user-select: none;
125
+ -ms-user-select: none;
126
+ user-select: none;
127
+ }
128
+
129
+ .monthsView, .yearsView {
130
+ div {
131
+ font-size: 17px;
132
+ float: left;
133
+ }
134
+ }
135
+
136
+ .daysView, .footer, .monthsView, .yearsView {
137
+ //background-color: #474949;
138
+ overflow: auto;
139
+ }
140
+
141
+ .daysView {
142
+ div {
143
+ div {
144
+ float: left;
145
+ }
146
+ }
147
+ }
148
+
149
+ .weekdays {
150
+ div {
151
+ color: #666;
152
+ font-weight: bold;
153
+ box-sizing: border-box;
154
+ -moz-box-sizing: border-box;
155
+ -ms-box-sizing: border-box;
156
+ -webkit-box-sizing: border-box;
157
+ border-bottom: 1px solid #777;
158
+ }
159
+ }
160
+
161
+ .lastmonth, .thismonth, .nextmonth, .monthsView, .yearsView {
162
+ div {
163
+ border: 1px solid @white;
164
+
165
+ &:not(.restrict) {
166
+ &:hover {
167
+ background-color: @hoverDayBg;
168
+ border: 1px solid #98D2EE;
169
+ //font-weight: bold;
170
+ cursor: pointer;
171
+ }
172
+ }
173
+ }
174
+ }
175
+
176
+ .lastmonth, .nextmonth {
177
+ div {
178
+ color: #a3a4a4;
179
+ background-color: @grayLighter;
180
+ border: 1px solid @grayLighter;
181
+ }
182
+ }
183
+
184
+ .yearsView {
185
+ .previous, .next {
186
+ color: #a3a4a4;
187
+ //background-color: #333;
188
+ }
189
+ }
190
+
191
+ .today, .today:hover {
192
+ background-color: @todayBg !important;
193
+ color: #333;
194
+ border: 1px solid #999 !important;
195
+ opacity: .7;
196
+ }
197
+
198
+ .selected, .selected:hover {
199
+ color: @white !important;
200
+ background-color: @selectedDayBg !important;
201
+ border-color: @selectedDayBg !important;
202
+ box-shadow: inset 0px 2px 8px -5px #000;
203
+ font-weight: bold;
204
+ }
205
+ .restrict {
206
+ color: @grayLight !important;
207
+ cursor: default;
208
+ }
209
+ .past {
210
+ color: @grayLight !important;
211
+
212
+ &.selected {
213
+ color: @white !important;
214
+ }
215
+ }
216
+ .range {
217
+ background-color: #648182;
218
+ color: #ddd !important;
219
+ }
220
+ }
221
+
222
+
223
+
224
+ .dropdown-menu {
225
+ margin: 0;
226
+ padding: 0;
227
+ border: 0;
228
+ margin-top: 1px;
229
+ background: none;
230
+ }
231
+
232
+ input, input:focus {
233
+ outline: 0 !important;
234
+ }
235
+
236
+ input {
237
+ margin-bottom: 0;
238
+ //width: 173px !important;
239
+ }
240
+ }
@@ -0,0 +1,308 @@
1
+ @charset "UTF-8";
2
+
3
+ @font-face {
4
+ font-family: "fuelux-preloader";
5
+ src:font-url('fuelux/fuelux-preloader.eot');
6
+ src:font-url('fuelux/fuelux-preloader.eot?#iefix') format("embedded-opentype"),
7
+ font-url('fuelux/fuelux-preloader.ttf') format("truetype"),
8
+ font-url('fuelux/fuelux-preloader.svg#fuelux-preloader') format("svg"),
9
+ font-url('fuelux/fuelux-preloader.woff') format("woff");
10
+ font-weight: normal;
11
+ font-style: normal;
12
+ }
13
+
14
+
15
+ @keyframes fuelux-preloader-1
16
+ {
17
+ 0% {opacity: 1;}
18
+ 12.4% {opacity: 1;}
19
+ 12.5% {opacity: 0;}
20
+ 100% {opacity: 0;}
21
+ }
22
+ @-webkit-keyframes fuelux-preloader-1
23
+ {
24
+ 0% {opacity: 1;}
25
+ 12.4% {opacity: 1;}
26
+ 12.5% {opacity: 0;}
27
+ 100% {opacity: 0;}
28
+ }
29
+
30
+
31
+ @keyframes fuelux-preloader-2
32
+ {
33
+ 0% {opacity: 0;}
34
+ 12.4% {opacity: 0;}
35
+ 12.5% {opacity: 1;}
36
+ 24.9% {opacity: 1;}
37
+ 25% {opacity: 0;}
38
+ 100% {opacity: 0;}
39
+ }
40
+ @-webkit-keyframes fuelux-preloader-2
41
+ {
42
+ 0% {opacity: 0;}
43
+ 12.4% {opacity: 0;}
44
+ 12.5% {opacity: 1;}
45
+ 24.9% {opacity: 1;}
46
+ 25% {opacity: 0;}
47
+ 100% {opacity: 0;}
48
+ }
49
+
50
+
51
+ @keyframes fuelux-preloader-3
52
+ {
53
+ 0% {opacity: 0;}
54
+ 24.9% {opacity: 0;}
55
+ 25% {opacity: 1;}
56
+ 37.4% {opacity: 1;}
57
+ 37.5% {opacity: 0;}
58
+ 100% {opacity: 0;}
59
+ }
60
+ @-webkit-keyframes fuelux-preloader-3
61
+ {
62
+ 0% {opacity: 0;}
63
+ 24.9% {opacity: 0;}
64
+ 25% {opacity: 1;}
65
+ 37.4% {opacity: 1;}
66
+ 37.5% {opacity: 0;}
67
+ 100% {opacity: 0;}
68
+ }
69
+
70
+
71
+ @keyframes fuelux-preloader-4
72
+ {
73
+ 0% {opacity: 0;}
74
+ 37.4% {opacity: 0;}
75
+ 37.5% {opacity: 1;}
76
+ 49.4% {opacity: 1;}
77
+ 50% {opacity: 0;}
78
+ 100% {opacity: 0;}
79
+ }
80
+ @-webkit-keyframes fuelux-preloader-4
81
+ {
82
+ 0% {opacity: 0;}
83
+ 37.4% {opacity: 0;}
84
+ 37.5% {opacity: 1;}
85
+ 49.4% {opacity: 1;}
86
+ 50% {opacity: 0;}
87
+ 100% {opacity: 0;}
88
+ }
89
+
90
+
91
+ @keyframes fuelux-preloader-5
92
+ {
93
+ 0% {opacity: 0;}
94
+ 49.4% {opacity: 0;}
95
+ 50% {opacity: 1;}
96
+ 62.4% {opacity: 1;}
97
+ 62.5% {opacity: 0;}
98
+ 100% {opacity: 0;}
99
+ }
100
+ @-webkit-keyframes fuelux-preloader-5
101
+ {
102
+ 0% {opacity: 0;}
103
+ 49.4% {opacity: 0;}
104
+ 50% {opacity: 1;}
105
+ 62.4% {opacity: 1;}
106
+ 62.5% {opacity: 0;}
107
+ 100% {opacity: 0;}
108
+ }
109
+
110
+
111
+ @keyframes fuelux-preloader-6
112
+ {
113
+ 0% {opacity: 0;}
114
+ 62.4% {opacity: 0;}
115
+ 62.5% {opacity: 1;}
116
+ 74.9% {opacity: 1;}
117
+ 75% {opacity: 0;}
118
+ 100% {opacity: 0;}
119
+ }
120
+ @-webkit-keyframes fuelux-preloader-6
121
+ {
122
+ 0% {opacity: 0;}
123
+ 62.4% {opacity: 0;}
124
+ 62.5% {opacity: 1;}
125
+ 74.9% {opacity: 1;}
126
+ 75% {opacity: 0;}
127
+ 100% {opacity: 0;}
128
+ }
129
+
130
+
131
+ @keyframes fuelux-preloader-7
132
+ {
133
+ 0% {opacity: 0;}
134
+ 74.9% {opacity: 0;}
135
+ 75% {opacity: 1;}
136
+ 87.4% {opacity: 1;}
137
+ 87.5% {opacity: 0;}
138
+ 100% {opacity: 0;}
139
+ }
140
+ @-webkit-keyframes fuelux-preloader-7
141
+ {
142
+ 0% {opacity: 0;}
143
+ 74.9% {opacity: 0;}
144
+ 75% {opacity: 1;}
145
+ 87.4% {opacity: 1;}
146
+ 87.5% {opacity: 0;}
147
+ 100% {opacity: 0;}
148
+ }
149
+
150
+
151
+ @keyframes fuelux-preloader-8
152
+ {
153
+ 0% {opacity: 0;}
154
+ 87.4% {opacity: 0;}
155
+ 87.5% {opacity: 1;}
156
+ 87.6% {opacity: 1;}
157
+ 100% {opacity: 0;}
158
+ 100% {opacity: 0;}
159
+ }
160
+ @-webkit-keyframes fuelux-preloader-8
161
+ {
162
+ 0% {opacity: 0;}
163
+ 87.4% {opacity: 0;}
164
+ 87.5% {opacity: 1;}
165
+ 87.6% {opacity: 1;}
166
+ 100% {opacity: 0;}
167
+ 100% {opacity: 0;}
168
+ }
169
+
170
+
171
+ .preloader {
172
+ height: 64px;
173
+ font-size: 64px;
174
+ position: relative;
175
+ width: 64px;
176
+
177
+ &.iefix span, &:before, b, i {
178
+ font-family: "fuelux-preloader" !important;
179
+ font-style: normal !important;
180
+ font-weight: normal !important;
181
+ font-variant: normal !important;
182
+ text-transform: none !important;
183
+ speak: none;
184
+ line-height: 1;
185
+ -webkit-font-smoothing: antialiased;
186
+ -moz-osx-font-smoothing: grayscale;
187
+ }
188
+
189
+ &:before {
190
+ content: "0";
191
+ left: 0;
192
+ opacity: 0.33;
193
+ position: absolute;
194
+ top: 0;
195
+ }
196
+
197
+ &.iefix {
198
+ &:before {
199
+ display: none;
200
+ }
201
+
202
+ b {
203
+ display: block;
204
+ left: 0;
205
+ position: absolute;
206
+ top: 0;
207
+ }
208
+
209
+ i {
210
+ display: none;
211
+
212
+ &:after,
213
+ &:before
214
+ {
215
+ display: none;
216
+ }
217
+ }
218
+
219
+ span {
220
+ display: block;
221
+ font-size: inherit;
222
+ height: 100%;
223
+ left: 0;
224
+ opacity: 0.33;
225
+ position: absolute;
226
+ top: 0;
227
+ width: 100%;
228
+
229
+ -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=33)";
230
+ filter: alpha(opacity=33);
231
+ }
232
+ }
233
+
234
+ i {
235
+ &:after,
236
+ &:before
237
+ {
238
+ display: block;
239
+ left: 0;
240
+ opacity: 0;
241
+ position: absolute;
242
+ top: 0;
243
+
244
+ animation: 1s steps(8) infinite normal running;
245
+ animation-timing-function: linear;
246
+ animation-play-state: running;
247
+ -webkit-animation: 1s steps(8) infinite normal running;
248
+ -webkit-animation-timing-function: linear;
249
+ -webkit-animation-play-state: running;
250
+ }
251
+
252
+ &:nth-child(1){
253
+ &:before {
254
+ content: "1";
255
+ animation-name: fuelux-preloader-1;
256
+ -webkit-animation-name: fuelux-preloader-1;
257
+ }
258
+
259
+ &:after {
260
+ content: "2";
261
+ animation-name: fuelux-preloader-2;
262
+ -webkit-animation-name: fuelux-preloader-2;
263
+ }
264
+ }
265
+
266
+ &:nth-child(2){
267
+ &:before {
268
+ content: "3";
269
+ animation-name: fuelux-preloader-3;
270
+ -webkit-animation-name: fuelux-preloader-3;
271
+ }
272
+
273
+ &:after {
274
+ content: "4";
275
+ animation-name: fuelux-preloader-4;
276
+ -webkit-animation-name: fuelux-preloader-4;
277
+ }
278
+ }
279
+
280
+ &:nth-child(3){
281
+ &:before {
282
+ content: "5";
283
+ animation-name: fuelux-preloader-5;
284
+ -webkit-animation-name: fuelux-preloader-5;
285
+ }
286
+
287
+ &:after {
288
+ content: "6";
289
+ animation-name: fuelux-preloader-6;
290
+ -webkit-animation-name: fuelux-preloader-6;
291
+ }
292
+ }
293
+
294
+ &:nth-child(4){
295
+ &:before {
296
+ content: "7";
297
+ animation-name: fuelux-preloader-7;
298
+ -webkit-animation-name: fuelux-preloader-7;
299
+ }
300
+
301
+ &:after {
302
+ content: "8";
303
+ animation-name: fuelux-preloader-8;
304
+ -webkit-animation-name: fuelux-preloader-8;
305
+ }
306
+ }
307
+ }
308
+ }