robeaux 0.2.0 → 0.3.0

Sign up to get free protection for your applications and to get access to all the features.
Files changed (87) hide show
  1. checksums.yaml +4 -4
  2. data/Gruntfile.js +43 -0
  3. data/Makefile +11 -2
  4. data/README.markdown +2 -0
  5. data/css/main.css +1 -0
  6. data/css/style.css +113 -24
  7. data/css/themes/blackboard.css +1 -0
  8. data/css/themes/dark.css +1 -0
  9. data/css/themes/gray.css +1 -0
  10. data/css/themes/whiteboard.css +1 -0
  11. data/images/bullet-connections-2.png +0 -0
  12. data/images/bullet-connections.png +0 -0
  13. data/images/bullet-devices-2.png +0 -0
  14. data/images/bullet-devices.png +0 -0
  15. data/images/devices-image-2.png +0 -0
  16. data/images/devices-image.png +0 -0
  17. data/images/logo-robeaux.png +0 -0
  18. data/images/robots-icon_03.png +0 -0
  19. data/index.html +15 -8
  20. data/js/controllers/widget_editor_ctrl.js +44 -0
  21. data/js/controllers/widgets_ctrl.js +40 -0
  22. data/js/directives/widget.js +50 -0
  23. data/js/router.js +5 -0
  24. data/js/services/themes.js +9 -5
  25. data/js/services/widgets.js +86 -0
  26. data/js/vendor/angular-route.min.js +1 -2
  27. data/js/vendor/angular.min.js +208 -206
  28. data/js/widgets/attitude.html +32 -0
  29. data/js/widgets/attitude.js +27 -0
  30. data/js/widgets/mindwave.html +51 -0
  31. data/js/widgets/mindwave.js +23 -0
  32. data/less/app.less +21 -0
  33. data/less/objects/buttons.less +32 -0
  34. data/less/objects/connections.less +28 -0
  35. data/less/objects/device.less +30 -0
  36. data/less/objects/forms.less +29 -0
  37. data/less/objects/list.less +27 -0
  38. data/less/objects/nav.less +33 -0
  39. data/less/objects/robot.less +43 -0
  40. data/less/objects/themes.less +18 -0
  41. data/less/objects/widgets.less +85 -0
  42. data/less/support/buttons.less +39 -0
  43. data/less/support/container.less +9 -0
  44. data/less/support/forms.less +18 -0
  45. data/less/support/mixins.less +3 -0
  46. data/less/themes/blackboard.less +158 -0
  47. data/less/themes/dark.less +148 -0
  48. data/less/themes/default.less +52 -0
  49. data/less/themes/gray.less +121 -0
  50. data/less/themes/whiteboard.less +152 -0
  51. data/less/vendor/elements.less +156 -0
  52. data/less/vendor/normalize.less +425 -0
  53. data/less/vendor/semantic-grid.less +67 -0
  54. data/less/views/devices.less +47 -0
  55. data/less/views/robots.less +132 -0
  56. data/less/views/themes.less +31 -0
  57. data/less/views/widgets.less +50 -0
  58. data/package.json +6 -3
  59. data/partials/device.html +66 -57
  60. data/partials/index.html +12 -6
  61. data/partials/robot.html +104 -51
  62. data/partials/themes.html +32 -29
  63. data/partials/widget_editor.html +68 -0
  64. data/robeaux.gemspec +1 -1
  65. data/test/controllers/device_commands_ctrl.js +129 -0
  66. data/test/controllers/device_events_ctrl.js +82 -0
  67. data/test/controllers/index_ctrl.js +48 -0
  68. data/test/controllers/nav_ctrl.js +40 -0
  69. data/test/controllers/robot_commands_ctrl.js +127 -0
  70. data/test/controllers/robot_ctrl.js +62 -0
  71. data/test/controllers/themes_ctrl.js +96 -0
  72. data/test/controllers/widget_editor_ctrl.js +111 -0
  73. data/test/controllers/widgets_ctrl.js +74 -0
  74. data/test/functions/functions.js +30 -0
  75. data/test/karma.conf.js +3 -7
  76. data/test/karma_test_all.conf.js +23 -0
  77. data/test/karma_test_controllers.conf.js +19 -0
  78. data/test/karma_test_functions.conf.js +14 -0
  79. data/test/karma_test_services.conf.js +17 -0
  80. data/test/services/themes.js +122 -0
  81. data/test/services/widgets.js +104 -0
  82. data/test/support/themes.json +9 -0
  83. data/test/support/widgets.json +18 -0
  84. data/test/vendor/angular-mocks.js +13 -13
  85. data/test/vendor/jquery.js +8 -8
  86. metadata +69 -3
  87. data/test/main.js +0 -248
@@ -0,0 +1,156 @@
1
+ /*---------------------------------------------------
2
+ LESS Elements 0.9
3
+ ---------------------------------------------------
4
+ A set of useful LESS mixins
5
+ More info at: http://lesselements.com
6
+ ---------------------------------------------------*/
7
+
8
+ .gradient(@color: #F5F5F5, @start: #EEE, @stop: #FFF) {
9
+ background: @color;
10
+ background: -webkit-gradient(linear,
11
+ left bottom,
12
+ left top,
13
+ color-stop(0, @start),
14
+ color-stop(1, @stop));
15
+ background: -ms-linear-gradient(bottom,
16
+ @start,
17
+ @stop);
18
+ background: -moz-linear-gradient(center bottom,
19
+ @start 0%,
20
+ @stop 100%);
21
+ background: -o-linear-gradient(@stop,
22
+ @start);
23
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",@stop,@start));
24
+ }
25
+ .bw-gradient(@color: #F5F5F5, @start: 0, @stop: 255) {
26
+ background: @color;
27
+ background: -webkit-gradient(linear,
28
+ left bottom,
29
+ left top,
30
+ color-stop(0, rgb(@start,@start,@start)),
31
+ color-stop(1, rgb(@stop,@stop,@stop)));
32
+ background: -ms-linear-gradient(bottom,
33
+ rgb(@start,@start,@start) 0%,
34
+ rgb(@stop,@stop,@stop) 100%);
35
+ background: -moz-linear-gradient(center bottom,
36
+ rgb(@start,@start,@start) 0%,
37
+ rgb(@stop,@stop,@stop) 100%);
38
+ background: -o-linear-gradient(rgb(@stop,@stop,@stop),
39
+ rgb(@start,@start,@start));
40
+ filter: e(%("progid:DXImageTransform.Microsoft.gradient(startColorstr='%d', endColorstr='%d', GradientType=0)",rgb(@stop,@stop,@stop),rgb(@start,@start,@start)));
41
+ }
42
+ .bordered(@top-color: #EEE, @right-color: #EEE, @bottom-color: #EEE, @left-color: #EEE) {
43
+ border-top: solid 1px @top-color;
44
+ border-left: solid 1px @left-color;
45
+ border-right: solid 1px @right-color;
46
+ border-bottom: solid 1px @bottom-color;
47
+ }
48
+ .drop-shadow(@x-axis: 0, @y-axis: 1px, @blur: 2px, @alpha: 0.1) {
49
+ -webkit-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
50
+ -moz-box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
51
+ box-shadow: @x-axis @y-axis @blur rgba(0, 0, 0, @alpha);
52
+ }
53
+ .rounded(@radius: 2px) {
54
+ -webkit-border-radius: @radius;
55
+ -moz-border-radius: @radius;
56
+ border-radius: @radius;
57
+ }
58
+ .border-radius(@topright: 0, @bottomright: 0, @bottomleft: 0, @topleft: 0) {
59
+ -webkit-border-top-right-radius: @topright;
60
+ -webkit-border-bottom-right-radius: @bottomright;
61
+ -webkit-border-bottom-left-radius: @bottomleft;
62
+ -webkit-border-top-left-radius: @topleft;
63
+ -moz-border-radius-topright: @topright;
64
+ -moz-border-radius-bottomright: @bottomright;
65
+ -moz-border-radius-bottomleft: @bottomleft;
66
+ -moz-border-radius-topleft: @topleft;
67
+ border-top-right-radius: @topright;
68
+ border-bottom-right-radius: @bottomright;
69
+ border-bottom-left-radius: @bottomleft;
70
+ border-top-left-radius: @topleft;
71
+ .background-clip(padding-box);
72
+ }
73
+ .opacity(@opacity: 0.5) {
74
+ -moz-opacity: @opacity;
75
+ -khtml-opacity: @opacity;
76
+ -webkit-opacity: @opacity;
77
+ opacity: @opacity;
78
+ @opperc: @opacity * 100;
79
+ -ms-filter: ~"progid:DXImageTransform.Microsoft.Alpha(opacity=@{opperc})";
80
+ filter: ~"alpha(opacity=@{opperc})";
81
+ }
82
+ .transition-duration(@duration: 0.2s) {
83
+ -moz-transition-duration: @duration;
84
+ -webkit-transition-duration: @duration;
85
+ -o-transition-duration: @duration;
86
+ transition-duration: @duration;
87
+ }
88
+ .transform(...) {
89
+ -webkit-transform: @arguments;
90
+ -moz-transform: @arguments;
91
+ -o-transform: @arguments;
92
+ -ms-transform: @arguments;
93
+ transform: @arguments;
94
+ }
95
+ .rotation(@deg:5deg){
96
+ .transform(rotate(@deg));
97
+ }
98
+ .scale(@ratio:1.5){
99
+ .transform(scale(@ratio));
100
+ }
101
+ .transition(@duration:0.2s, @ease:ease-out) {
102
+ -webkit-transition: all @duration @ease;
103
+ -moz-transition: all @duration @ease;
104
+ -o-transition: all @duration @ease;
105
+ transition: all @duration @ease;
106
+ }
107
+ .inner-shadow(@horizontal:0, @vertical:1px, @blur:2px, @alpha: 0.4) {
108
+ -webkit-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
109
+ -moz-box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
110
+ box-shadow: inset @horizontal @vertical @blur rgba(0, 0, 0, @alpha);
111
+ }
112
+ .box-shadow(@arguments) {
113
+ -webkit-box-shadow: @arguments;
114
+ -moz-box-shadow: @arguments;
115
+ box-shadow: @arguments;
116
+ }
117
+ .box-sizing(@sizing: border-box) {
118
+ -ms-box-sizing: @sizing;
119
+ -moz-box-sizing: @sizing;
120
+ -webkit-box-sizing: @sizing;
121
+ box-sizing: @sizing;
122
+ }
123
+ .user-select(@argument: none) {
124
+ -webkit-user-select: @argument;
125
+ -moz-user-select: @argument;
126
+ -ms-user-select: @argument;
127
+ user-select: @argument;
128
+ }
129
+ .columns(@colwidth: 250px, @colcount: 0, @colgap: 50px, @columnRuleColor: #EEE, @columnRuleStyle: solid, @columnRuleWidth: 1px) {
130
+ -moz-column-width: @colwidth;
131
+ -moz-column-count: @colcount;
132
+ -moz-column-gap: @colgap;
133
+ -moz-column-rule-color: @columnRuleColor;
134
+ -moz-column-rule-style: @columnRuleStyle;
135
+ -moz-column-rule-width: @columnRuleWidth;
136
+ -webkit-column-width: @colwidth;
137
+ -webkit-column-count: @colcount;
138
+ -webkit-column-gap: @colgap;
139
+ -webkit-column-rule-color: @columnRuleColor;
140
+ -webkit-column-rule-style: @columnRuleStyle;
141
+ -webkit-column-rule-width: @columnRuleWidth;
142
+ column-width: @colwidth;
143
+ column-count: @colcount;
144
+ column-gap: @colgap;
145
+ column-rule-color: @columnRuleColor;
146
+ column-rule-style: @columnRuleStyle;
147
+ column-rule-width: @columnRuleWidth;
148
+ }
149
+ .translate(@x:0, @y:0) {
150
+ .transform(translate(@x, @y));
151
+ }
152
+ .background-clip(@argument: padding-box) {
153
+ -moz-background-clip: @argument;
154
+ -webkit-background-clip: @argument;
155
+ background-clip: @argument;
156
+ }
@@ -0,0 +1,425 @@
1
+ /*! normalize.css v3.0.1 | MIT License | git.io/normalize */
2
+
3
+ //
4
+ // 1. Set default font family to sans-serif.
5
+ // 2. Prevent iOS text size adjust after orientation change, without disabling
6
+ // user zoom.
7
+ //
8
+
9
+ html {
10
+ font-family: sans-serif; // 1
11
+ -ms-text-size-adjust: 100%; // 2
12
+ -webkit-text-size-adjust: 100%; // 2
13
+ }
14
+
15
+ //
16
+ // Remove default margin.
17
+ //
18
+
19
+ body {
20
+ margin: 0;
21
+ }
22
+
23
+ // HTML5 display definitions
24
+ // ==========================================================================
25
+
26
+ //
27
+ // Correct `block` display not defined for any HTML5 element in IE 8/9.
28
+ // Correct `block` display not defined for `details` or `summary` in IE 10/11 and Firefox.
29
+ // Correct `block` display not defined for `main` in IE 11.
30
+ //
31
+
32
+ article,
33
+ aside,
34
+ details,
35
+ figcaption,
36
+ figure,
37
+ footer,
38
+ header,
39
+ hgroup,
40
+ main,
41
+ nav,
42
+ section,
43
+ summary {
44
+ display: block;
45
+ }
46
+
47
+ //
48
+ // 1. Correct `inline-block` display not defined in IE 8/9.
49
+ // 2. Normalize vertical alignment of `progress` in Chrome, Firefox, and Opera.
50
+ //
51
+
52
+ audio,
53
+ canvas,
54
+ progress,
55
+ video {
56
+ display: inline-block; // 1
57
+ vertical-align: baseline; // 2
58
+ }
59
+
60
+ //
61
+ // Prevent modern browsers from displaying `audio` without controls.
62
+ // Remove excess height in iOS 5 devices.
63
+ //
64
+
65
+ audio:not([controls]) {
66
+ display: none;
67
+ height: 0;
68
+ }
69
+
70
+ //
71
+ // Address `[hidden]` styling not present in IE 8/9/10.
72
+ // Hide the `template` element in IE 8/9/11, Safari, and Firefox < 22.
73
+ //
74
+
75
+ [hidden],
76
+ template {
77
+ display: none;
78
+ }
79
+
80
+ // Links
81
+ // ==========================================================================
82
+
83
+ //
84
+ // Remove the gray background color from active links in IE 10.
85
+ //
86
+
87
+ a {
88
+ background: transparent;
89
+ }
90
+
91
+ //
92
+ // Improve readability when focused and also mouse hovered in all browsers.
93
+ //
94
+
95
+ a:active,
96
+ a:hover {
97
+ outline: 0;
98
+ }
99
+
100
+ // Text-level semantics
101
+ // ==========================================================================
102
+
103
+ //
104
+ // Address styling not present in IE 8/9/10/11, Safari, and Chrome.
105
+ //
106
+
107
+ abbr[title] {
108
+ border-bottom: 1px dotted;
109
+ }
110
+
111
+ //
112
+ // Address style set to `bolder` in Firefox 4+, Safari, and Chrome.
113
+ //
114
+
115
+ b,
116
+ strong {
117
+ font-weight: bold;
118
+ }
119
+
120
+ //
121
+ // Address styling not present in Safari and Chrome.
122
+ //
123
+
124
+ dfn {
125
+ font-style: italic;
126
+ }
127
+
128
+ //
129
+ // Address variable `h1` font-size and margin within `section` and `article`
130
+ // contexts in Firefox 4+, Safari, and Chrome.
131
+ //
132
+
133
+ h1 {
134
+ font-size: 2em;
135
+ margin: 0.67em 0;
136
+ }
137
+
138
+ //
139
+ // Address styling not present in IE 8/9.
140
+ //
141
+
142
+ mark {
143
+ background: #ff0;
144
+ color: #000;
145
+ }
146
+
147
+ //
148
+ // Address inconsistent and variable font size in all browsers.
149
+ //
150
+
151
+ small {
152
+ font-size: 80%;
153
+ }
154
+
155
+ //
156
+ // Prevent `sub` and `sup` affecting `line-height` in all browsers.
157
+ //
158
+
159
+ sub,
160
+ sup {
161
+ font-size: 75%;
162
+ line-height: 0;
163
+ position: relative;
164
+ vertical-align: baseline;
165
+ }
166
+
167
+ sup {
168
+ top: -0.5em;
169
+ }
170
+
171
+ sub {
172
+ bottom: -0.25em;
173
+ }
174
+
175
+ // Embedded content
176
+ // ==========================================================================
177
+
178
+ //
179
+ // Remove border when inside `a` element in IE 8/9/10.
180
+ //
181
+
182
+ img {
183
+ border: 0;
184
+ }
185
+
186
+ //
187
+ // Correct overflow not hidden in IE 9/10/11.
188
+ //
189
+
190
+ svg:not(:root) {
191
+ overflow: hidden;
192
+ }
193
+
194
+ // Grouping content
195
+ // ==========================================================================
196
+
197
+ //
198
+ // Address margin not present in IE 8/9 and Safari.
199
+ //
200
+
201
+ figure {
202
+ margin: 1em 40px;
203
+ }
204
+
205
+ //
206
+ // Address differences between Firefox and other browsers.
207
+ //
208
+
209
+ hr {
210
+ -moz-box-sizing: content-box;
211
+ box-sizing: content-box;
212
+ height: 0;
213
+ }
214
+
215
+ //
216
+ // Contain overflow in all browsers.
217
+ //
218
+
219
+ pre {
220
+ overflow: auto;
221
+ }
222
+
223
+ //
224
+ // Address odd `em`-unit font size rendering in all browsers.
225
+ //
226
+
227
+ code,
228
+ kbd,
229
+ pre,
230
+ samp {
231
+ font-family: monospace, monospace;
232
+ font-size: 1em;
233
+ }
234
+
235
+ // Forms
236
+ // ==========================================================================
237
+
238
+ //
239
+ // Known limitation: by default, Chrome and Safari on OS X allow very limited
240
+ // styling of `select`, unless a `border` property is set.
241
+ //
242
+
243
+ //
244
+ // 1. Correct color not being inherited.
245
+ // Known issue: affects color of disabled elements.
246
+ // 2. Correct font properties not being inherited.
247
+ // 3. Address margins set differently in Firefox 4+, Safari, and Chrome.
248
+ //
249
+
250
+ button,
251
+ input,
252
+ optgroup,
253
+ select,
254
+ textarea {
255
+ color: inherit; // 1
256
+ font: inherit; // 2
257
+ margin: 0; // 3
258
+ }
259
+
260
+ //
261
+ // Address `overflow` set to `hidden` in IE 8/9/10/11.
262
+ //
263
+
264
+ button {
265
+ overflow: visible;
266
+ }
267
+
268
+ //
269
+ // Address inconsistent `text-transform` inheritance for `button` and `select`.
270
+ // All other form control elements do not inherit `text-transform` values.
271
+ // Correct `button` style inheritance in Firefox, IE 8/9/10/11, and Opera.
272
+ // Correct `select` style inheritance in Firefox.
273
+ //
274
+
275
+ button,
276
+ select {
277
+ text-transform: none;
278
+ }
279
+
280
+ //
281
+ // 1. Avoid the WebKit bug in Android 4.0.* where (2) destroys native `audio`
282
+ // and `video` controls.
283
+ // 2. Correct inability to style clickable `input` types in iOS.
284
+ // 3. Improve usability and consistency of cursor style between image-type
285
+ // `input` and others.
286
+ //
287
+
288
+ button,
289
+ html input[type="button"], // 1
290
+ input[type="reset"],
291
+ input[type="submit"] {
292
+ -webkit-appearance: button; // 2
293
+ cursor: pointer; // 3
294
+ }
295
+
296
+ //
297
+ // Re-set default cursor for disabled elements.
298
+ //
299
+
300
+ button[disabled],
301
+ html input[disabled] {
302
+ cursor: default;
303
+ }
304
+
305
+ //
306
+ // Remove inner padding and border in Firefox 4+.
307
+ //
308
+
309
+ button::-moz-focus-inner,
310
+ input::-moz-focus-inner {
311
+ border: 0;
312
+ padding: 0;
313
+ }
314
+
315
+ //
316
+ // Address Firefox 4+ setting `line-height` on `input` using `!important` in
317
+ // the UA stylesheet.
318
+ //
319
+
320
+ input {
321
+ line-height: normal;
322
+ }
323
+
324
+ //
325
+ // It's recommended that you don't attempt to style these elements.
326
+ // Firefox's implementation doesn't respect box-sizing, padding, or width.
327
+ //
328
+ // 1. Address box sizing set to `content-box` in IE 8/9/10.
329
+ // 2. Remove excess padding in IE 8/9/10.
330
+ //
331
+
332
+ input[type="checkbox"],
333
+ input[type="radio"] {
334
+ box-sizing: border-box; // 1
335
+ padding: 0; // 2
336
+ }
337
+
338
+ //
339
+ // Fix the cursor style for Chrome's increment/decrement buttons. For certain
340
+ // `font-size` values of the `input`, it causes the cursor style of the
341
+ // decrement button to change from `default` to `text`.
342
+ //
343
+
344
+ input[type="number"]::-webkit-inner-spin-button,
345
+ input[type="number"]::-webkit-outer-spin-button {
346
+ height: auto;
347
+ }
348
+
349
+ //
350
+ // 1. Address `appearance` set to `searchfield` in Safari and Chrome.
351
+ // 2. Address `box-sizing` set to `border-box` in Safari and Chrome
352
+ // (include `-moz` to future-proof).
353
+ //
354
+
355
+ input[type="search"] {
356
+ -webkit-appearance: textfield; // 1
357
+ -moz-box-sizing: content-box;
358
+ -webkit-box-sizing: content-box; // 2
359
+ box-sizing: content-box;
360
+ }
361
+
362
+ //
363
+ // Remove inner padding and search cancel button in Safari and Chrome on OS X.
364
+ // Safari (but not Chrome) clips the cancel button when the search input has
365
+ // padding (and `textfield` appearance).
366
+ //
367
+
368
+ input[type="search"]::-webkit-search-cancel-button,
369
+ input[type="search"]::-webkit-search-decoration {
370
+ -webkit-appearance: none;
371
+ }
372
+
373
+ //
374
+ // Define consistent border, margin, and padding.
375
+ //
376
+
377
+ fieldset {
378
+ border: 1px solid #c0c0c0;
379
+ margin: 0 2px;
380
+ padding: 0.35em 0.625em 0.75em;
381
+ }
382
+
383
+ //
384
+ // 1. Correct `color` not being inherited in IE 8/9/10/11.
385
+ // 2. Remove padding so people aren't caught out if they zero out fieldsets.
386
+ //
387
+
388
+ legend {
389
+ border: 0; // 1
390
+ padding: 0; // 2
391
+ }
392
+
393
+ //
394
+ // Remove default vertical scrollbar in IE 8/9/10/11.
395
+ //
396
+
397
+ textarea {
398
+ overflow: auto;
399
+ }
400
+
401
+ //
402
+ // Don't inherit the `font-weight` (applied by a rule above).
403
+ // NOTE: the default cannot safely be changed in Chrome and Safari on OS X.
404
+ //
405
+
406
+ optgroup {
407
+ font-weight: bold;
408
+ }
409
+
410
+ // Tables
411
+ // ==========================================================================
412
+
413
+ //
414
+ // Remove most spacing between table cells.
415
+ //
416
+
417
+ table {
418
+ border-collapse: collapse;
419
+ border-spacing: 0;
420
+ }
421
+
422
+ td,
423
+ th {
424
+ padding: 0;
425
+ }
@@ -0,0 +1,67 @@
1
+ /////////////////
2
+ // Semantic.gs // for LESS: http://lesscss.org/
3
+ /////////////////
4
+
5
+ // Defaults which you can freely override
6
+ // @column-width: 60;
7
+ // @gutter-width: 20;
8
+ // @columns: 12;
9
+
10
+ // Utility variable — you should never need to modify this
11
+ // @gridsystem-width: (@column-width*@columns) + (@gutter-width*@columns) * 1px;
12
+
13
+ // Set @total-width to 100% for a fluid layout
14
+ // @total-width: @gridsystem-width;
15
+
16
+ // Uncomment these two lines and the star-hack width/margin lines below to enable sub-pixel fix for IE6 & 7. See http://tylertate.com/blog/2012/01/05/subpixel-rounding.html
17
+ // @min-width: 960;
18
+ // @correction: 0.5 / @min-width * 100 * 1%;
19
+
20
+ // The micro clearfix http://nicolasgallagher.com/micro-clearfix-hack/
21
+ .clearfix() {
22
+ *zoom:1;
23
+
24
+ &:before,
25
+ &:after {
26
+ content:"";
27
+ display:table;
28
+ }
29
+ &:after {
30
+ clear:both;
31
+ }
32
+ }
33
+
34
+
35
+ //////////
36
+ // GRID //
37
+ //////////
38
+
39
+ /*
40
+ body {
41
+ width: 100%;
42
+ .clearfix;
43
+ }
44
+ */
45
+
46
+ .row(@columns:@columns) {
47
+ display: block;
48
+ width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width);
49
+ margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1);
50
+ // *width: @total-width*((@gutter-width + @gridsystem-width)/@gridsystem-width)-@correction;
51
+ // *margin: 0 @total-width*(((@gutter-width*.5)/@gridsystem-width)*-1)-@correction;
52
+ .clearfix();
53
+ }
54
+ .column(@x,@columns:@columns) {
55
+ display: inline;
56
+ float: left;
57
+ width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width);
58
+ margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width);
59
+ // *width: @total-width*((((@gutter-width+@column-width)*@x)-@gutter-width) / @gridsystem-width)-@correction;
60
+ // *margin: 0 @total-width*((@gutter-width*.5)/@gridsystem-width)-@correction;
61
+ }
62
+ .push(@offset:1) {
63
+ margin-left: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width);
64
+ }
65
+ .pull(@offset:1) {
66
+ margin-right: @total-width*(((@gutter-width+@column-width)*@offset) / @gridsystem-width) + @total-width*((@gutter-width*.5)/@gridsystem-width);
67
+ }
@@ -0,0 +1,47 @@
1
+ .device-detail {
2
+ .device-header {
3
+ .container();
4
+ h2{
5
+ .column(6);
6
+ }
7
+ }
8
+
9
+ .device-commands {
10
+ .column(6);
11
+ }
12
+
13
+ .device-events {
14
+ .column(6);
15
+
16
+ .input {
17
+ .column(6);
18
+
19
+ input {
20
+ .column(7);
21
+ padding: 8px 12px;
22
+ margin: 0 2.08166667% 0 0;
23
+ }
24
+
25
+ button {
26
+ .column(5);
27
+ }
28
+ }
29
+
30
+ .listeners-div {
31
+ .column(6);
32
+ margin-bottom: 30px;
33
+ table {
34
+ width: 100%;
35
+ }
36
+
37
+ }
38
+
39
+ .events {
40
+ width: 100%;
41
+ }
42
+ }
43
+
44
+ .remove {
45
+ width: 10%;
46
+ }
47
+ }