archare_ui 0.1.0

Sign up to get free protection for your applications and to get access to all the features.
checksums.yaml ADDED
@@ -0,0 +1,7 @@
1
+ ---
2
+ SHA1:
3
+ metadata.gz: 8966815e438365c742494b9c2db2b518d5cd9831
4
+ data.tar.gz: 4edbd15952ff740d6820291983a685ee025d8710
5
+ SHA512:
6
+ metadata.gz: 761ef9e323f44c67665d33f795fb98406a626f5ed44b821bb68ff287f86826b155feabc23df1c2b3687c85c2329e7ff5f89f83fc79bb8ce13cc0b350730eb0f5
7
+ data.tar.gz: eeaf352545e071524d17612087686a37f8cacfc89e37168a06fc77668804318880d11bed40aa5cfd6b459840f73a5727757d5b91bb67b63daff7eb8afb77e31b
data/.gitignore ADDED
@@ -0,0 +1,9 @@
1
+ /.bundle/
2
+ /.yardoc
3
+ /Gemfile.lock
4
+ /_yardoc/
5
+ /coverage/
6
+ /doc/
7
+ /pkg/
8
+ /spec/reports/
9
+ /tmp/
@@ -0,0 +1,49 @@
1
+ # Contributor Code of Conduct
2
+
3
+ As contributors and maintainers of this project, and in the interest of
4
+ fostering an open and welcoming community, we pledge to respect all people who
5
+ contribute through reporting issues, posting feature requests, updating
6
+ documentation, submitting pull requests or patches, and other activities.
7
+
8
+ We are committed to making participation in this project a harassment-free
9
+ experience for everyone, regardless of level of experience, gender, gender
10
+ identity and expression, sexual orientation, disability, personal appearance,
11
+ body size, race, ethnicity, age, religion, or nationality.
12
+
13
+ Examples of unacceptable behavior by participants include:
14
+
15
+ * The use of sexualized language or imagery
16
+ * Personal attacks
17
+ * Trolling or insulting/derogatory comments
18
+ * Public or private harassment
19
+ * Publishing other's private information, such as physical or electronic
20
+ addresses, without explicit permission
21
+ * Other unethical or unprofessional conduct
22
+
23
+ Project maintainers have the right and responsibility to remove, edit, or
24
+ reject comments, commits, code, wiki edits, issues, and other contributions
25
+ that are not aligned to this Code of Conduct, or to ban temporarily or
26
+ permanently any contributor for other behaviors that they deem inappropriate,
27
+ threatening, offensive, or harmful.
28
+
29
+ By adopting this Code of Conduct, project maintainers commit themselves to
30
+ fairly and consistently applying these principles to every aspect of managing
31
+ this project. Project maintainers who do not follow or enforce the Code of
32
+ Conduct may be permanently removed from the project team.
33
+
34
+ This code of conduct applies both within project spaces and in public spaces
35
+ when an individual is representing the project or its community.
36
+
37
+ Instances of abusive, harassing, or otherwise unacceptable behavior may be
38
+ reported by contacting a project maintainer at xhan@wpi.edu. All
39
+ complaints will be reviewed and investigated and will result in a response that
40
+ is deemed necessary and appropriate to the circumstances. Maintainers are
41
+ obligated to maintain confidentiality with regard to the reporter of an
42
+ incident.
43
+
44
+ This Code of Conduct is adapted from the [Contributor Covenant][homepage],
45
+ version 1.3.0, available at
46
+ [http://contributor-covenant.org/version/1/3/0/][version]
47
+
48
+ [homepage]: http://contributor-covenant.org
49
+ [version]: http://contributor-covenant.org/version/1/3/0/
data/Gemfile ADDED
@@ -0,0 +1,4 @@
1
+ source 'https://rubygems.org'
2
+
3
+ # Specify your gem's dependencies in archare_ui.gemspec
4
+ gemspec
data/README.md ADDED
@@ -0,0 +1,40 @@
1
+ <<<<<<< HEAD
2
+ # ArchareUi
3
+
4
+ Welcome to your new gem! In this directory, you'll find the files you need to be able to package up your Ruby library into a gem. Put your Ruby code in the file `lib/archare_ui`. To experiment with that code, run `bin/console` for an interactive prompt.
5
+
6
+ TODO: Delete this and the text above, and describe your gem
7
+
8
+ ## Installation
9
+
10
+ Add this line to your application's Gemfile:
11
+
12
+ ```ruby
13
+ gem 'archare_ui'
14
+ ```
15
+
16
+ And then execute:
17
+
18
+ $ bundle
19
+
20
+ Or install it yourself as:
21
+
22
+ $ gem install archare_ui
23
+
24
+ ## Usage
25
+
26
+ TODO: Write usage instructions here
27
+
28
+ ## Development
29
+
30
+ After checking out the repo, run `bin/setup` to install dependencies. You can also run `bin/console` for an interactive prompt that will allow you to experiment.
31
+
32
+ To install this gem onto your local machine, run `bundle exec rake install`. To release a new version, update the version number in `version.rb`, and then run `bundle exec rake release`, which will create a git tag for the version, push git commits and tags, and push the `.gem` file to [rubygems.org](https://rubygems.org).
33
+
34
+ ## Contributing
35
+
36
+ Bug reports and pull requests are welcome on GitHub at https://github.com/[USERNAME]/archare_ui. This project is intended to be a safe, welcoming space for collaboration, and contributors are expected to adhere to the [Contributor Covenant](http://contributor-covenant.org) code of conduct.
37
+
38
+ =======
39
+ # archare_ui
40
+ >>>>>>> 213fc7381e214c36b34038e5596cbba3d7218b15
data/Rakefile ADDED
@@ -0,0 +1,2 @@
1
+ require "bundler/gem_tasks"
2
+ task :default => :spec
@@ -0,0 +1 @@
1
+ //= require_tree .
@@ -0,0 +1,3 @@
1
+ $(document).ready(function(d){
2
+ console.log("archare-ui");
3
+ });
@@ -0,0 +1,554 @@
1
+ @import "bootstrap";
2
+
3
+ $tablet-width: 768px;
4
+ $desktop-width: 1024px;
5
+
6
+ @mixin tablet{
7
+ @media (min-width: $tablet-width) and (max-width: $desktop-width - 1px){
8
+ @content;
9
+ }
10
+ }
11
+
12
+ @mixin desktop{
13
+ @media (min-width: $desktop-width){
14
+ @content;
15
+ }
16
+ }
17
+
18
+
19
+ @mixin mobile{
20
+ @media (max-width: $tablet-width - 1px){
21
+ @content;
22
+ }
23
+ }
24
+
25
+ @mixin ah-animation($attribute, $duration){
26
+
27
+ @if not $attribute{
28
+ $attribute: all;
29
+ }
30
+
31
+ // transition animation
32
+ -webkit-transition: $attribute $duration ease;
33
+ -moz-transition: $attribute $duration ease;
34
+ -o-transition: $attribute $duration ease;
35
+ transition: $attribute $duration ease;
36
+
37
+ }
38
+
39
+
40
+
41
+
42
+
43
+ $mb-sidebar-width: 60px;
44
+ $sidebar-width: 100px;
45
+
46
+ $sidebar-bg-color: lighten(#000, 20%); // gray dark of bootstrap;
47
+
48
+
49
+
50
+
51
+ $cube-blue: #6666ff;
52
+ $cube-red: #ff3333;
53
+ $cube-green: #66ff66;
54
+
55
+ $cube-width: 50px;
56
+
57
+
58
+ .ah-wrapper.sb-collapsed {
59
+ // wrapper is in sidebar-collapsed mode
60
+
61
+ padding-left: 0px;
62
+ margin-left: 0px;
63
+
64
+ .ah-fixed-top-nav{
65
+
66
+ margin-left: 0px;
67
+ padding: 20px;
68
+ background-color: transparent;
69
+ }
70
+
71
+
72
+ .ah-sidebar-wrapper {
73
+ width: 0px;
74
+ }
75
+
76
+ .ah-page-content {
77
+
78
+ position: relative;
79
+ margin-right: -250px;
80
+
81
+ @include mobile{
82
+
83
+ position: relative;
84
+ margin-right: 0;
85
+ }
86
+ }
87
+ }
88
+
89
+
90
+ // normal, non-collapsed mode
91
+ .ah-wrapper {
92
+
93
+
94
+ margin-left: $sidebar-width;
95
+
96
+ @include mobile{
97
+ margin-left: $mb-sidebar-width;
98
+ }
99
+
100
+ @include ah-animation(all, 0.5s);
101
+ }
102
+
103
+ .ah-fixed-top-nav{
104
+
105
+ margin-left: $sidebar-width;
106
+ padding: 20px;
107
+ // background: white;
108
+ height: 60px;
109
+
110
+ @include ah-animation(all, 0.5s);
111
+
112
+ @include mobile{
113
+
114
+ margin-left: $mb-sidebar-width;
115
+ }
116
+ }
117
+
118
+
119
+ .ah-sidebar-wrapper {
120
+
121
+ position: fixed;
122
+
123
+
124
+ width: $sidebar-width;
125
+ left: $sidebar-width;
126
+ margin-left: -$sidebar-width;
127
+
128
+ @include mobile{
129
+
130
+ width: $mb-sidebar-width;
131
+ left: $mb-sidebar-width;
132
+ margin-left: -$mb-sidebar-width;
133
+ }
134
+
135
+ height: 100%;
136
+
137
+ overflow-y: auto;
138
+ background: $sidebar-bg-color;
139
+
140
+ @include ah-animation(all, 0.5s);
141
+ }
142
+
143
+ .ah-page-content {
144
+
145
+
146
+
147
+
148
+
149
+
150
+ width: 100%;
151
+ position: absolute;
152
+ // padding: 10px;
153
+
154
+ @include mobile {
155
+ padding: 0px;
156
+ position: absolute;
157
+ }
158
+ }
159
+
160
+
161
+ // sidebar
162
+ .ah-sidebar {
163
+
164
+ position: absolute;
165
+
166
+ top: 0;
167
+
168
+ width: $sidebar-width;
169
+
170
+ margin: 0;
171
+ padding: 0;
172
+
173
+ list-style: none;
174
+ text-align: center;
175
+ @include ah-animation(all, 0.5s);
176
+
177
+
178
+ @include mobile{
179
+ width: $mb-sidebar-width;
180
+ }
181
+ }
182
+
183
+
184
+
185
+ // ah sidebar brand
186
+ .ah-sidebar-brand {
187
+
188
+ height: 65px;
189
+
190
+
191
+ font-size: 20px;
192
+ font-weight: 600; //semi bold
193
+ font-family: 'Open Sans', sans-serif;
194
+ line-height: 60px;
195
+
196
+
197
+ @include mobile{
198
+ font-size: 15px;
199
+ }
200
+ }
201
+
202
+
203
+ .ah-sidebar li {
204
+
205
+ font-family: 'Varela Round', sans-serif;
206
+ }
207
+
208
+ .ah-sidebar li{
209
+ left-padding: 0;
210
+ }
211
+
212
+ .ah-sidebar > .ah-sidebar-brand a {
213
+ text-decoration: none;
214
+ color: #b3b3b3;
215
+ }
216
+
217
+ .ah-sidebar > .ah-sidebar-brand a:hover {
218
+ text-decoration: none;
219
+ color: #fff;
220
+ background: none;
221
+ }
222
+
223
+
224
+
225
+
226
+
227
+ // cube styles
228
+
229
+
230
+ $cube-font-size: 15px;
231
+ $cube-border-width: 2px;
232
+
233
+ $mobile-cube-ratio: 0.8;
234
+
235
+ // default cube style
236
+ .ah-nav-cube {
237
+
238
+ display: inline-block;
239
+
240
+ // text and fonts
241
+ text-decoration: none;
242
+ color: white;
243
+ font-size: $cube-font-size;
244
+
245
+ text-align: center;
246
+
247
+
248
+ // round rect border
249
+ border-radius: 5px;
250
+ border-style: solid;
251
+ border-width: $cube-border-width;
252
+ border-color: white;
253
+
254
+
255
+ z-index: 10;
256
+
257
+
258
+ // margin and padding
259
+ margin: 0 auto;
260
+ padding-top: ($cube-width - $cube-font-size)/2 - 2 * $cube-border-width; // a little bit less padding top
261
+
262
+ box-sizing: border-box;
263
+
264
+
265
+ width: $cube-width;
266
+ height: $cube-width;
267
+
268
+ @include mobile{
269
+
270
+ width: $mobile-cube-ratio * $cube-width;
271
+ height: $mobile-cube-ratio * $cube-width;
272
+ padding-top: $mobile-cube-ratio * ($cube-width - $cube-font-size)/2 - 2 * $cube-border-width; // a little bit less padding top
273
+ font-size: $cube-font-size * $mobile-cube-ratio;
274
+ }
275
+
276
+ @include ah-animation(background-color, 1s);
277
+ }
278
+
279
+
280
+
281
+ .ah-nav-cube{
282
+
283
+
284
+
285
+ // different states for cube
286
+ &:hover {
287
+
288
+ text-decoration: none;
289
+
290
+
291
+ // rotate
292
+ transform: rotate(360deg);
293
+ -webkit-transform: rotate(360deg);
294
+ transition-duration: 1s;
295
+ transition-property: transform;
296
+ }
297
+
298
+
299
+ &:active, &:focus {
300
+
301
+ text-decoration: none;
302
+ }
303
+
304
+
305
+ // styles ah blue cube
306
+ &.ah-blue-cube{
307
+
308
+ color: white;
309
+ border-color: $cube-blue;
310
+
311
+ &:hover{
312
+
313
+ color: white;
314
+ background-color: $cube-blue;
315
+ }
316
+ }
317
+
318
+
319
+ }
320
+
321
+
322
+
323
+
324
+
325
+
326
+
327
+
328
+
329
+
330
+
331
+
332
+
333
+
334
+
335
+
336
+ .ah-sb-sublist{
337
+
338
+ text-align: center;
339
+ // display: none;
340
+ opacity: 0;
341
+ visibility: hidden;
342
+ height: 0;
343
+
344
+ @include ah-animation(opacity, 1s);
345
+
346
+
347
+ &:hover{
348
+
349
+ display: block;
350
+ opacity: 1;
351
+ visibility: visible;
352
+ height: auto;
353
+ }
354
+ }
355
+
356
+ .ah-sb-sublist-btn{
357
+
358
+ &:hover,
359
+ &:active,
360
+ &:focus{
361
+ & ~ .ah-sb-sublist{
362
+ display: block;
363
+ opacity: 1;
364
+ visibility: visible;
365
+ height: auto;
366
+ }
367
+ }
368
+ }
369
+
370
+
371
+
372
+
373
+
374
+
375
+ $line-width: 2px;
376
+
377
+
378
+ // archare veritical line for connecting the cubes
379
+ .ah-ver-line {
380
+
381
+ display: block;
382
+ background-color: $cube-blue;
383
+
384
+ width: 2px;
385
+ height: 20px;
386
+ margin: 0 auto;
387
+
388
+
389
+ &.ah-blue-line{
390
+
391
+ background-color: $cube-blue;
392
+ }
393
+ }
394
+
395
+
396
+ // archare horizontal line for connecting the cubes
397
+ .ah-hor-line {
398
+
399
+ display: inline-block;
400
+
401
+ background-color: $cube-blue;
402
+
403
+ width: $cube-width/2;
404
+
405
+ margin-top: ($cube-width - $line-width)/2;
406
+
407
+ height: $line-width;
408
+ margin-bottom: $cube-width - ($cube-width - $line-width)/2;
409
+
410
+
411
+
412
+ &.ah-blue-line{
413
+
414
+ background-color: $cube-blue;
415
+ }
416
+ }
417
+
418
+
419
+ .ah-nav-cube:active,
420
+ .ah-nav-cube:focus{
421
+ & + .tooltip{
422
+ opacity: 0;
423
+ }
424
+ }
425
+
426
+
427
+ .ah-nav-cube.ah-blue-cube + .tooltip {
428
+
429
+ z-index: 100;
430
+
431
+ & > .tooltip-inner {
432
+ background-color: $cube-blue;
433
+ opacity: 0.8;
434
+ }
435
+ & > .tooltip-arrow {
436
+ border-top-color: $cube-blue;
437
+ opacity: 0.8;
438
+ }
439
+ }
440
+
441
+
442
+
443
+
444
+ // old ideas for horizontal cube list and vertical cubelist
445
+ /*
446
+
447
+
448
+ // horizontal cubelist
449
+ .ah-hor-cubelist {
450
+
451
+ position: fixed;
452
+ display: inline-block;
453
+
454
+
455
+ font-size: 0; //remove space between inline blocks
456
+
457
+ height: 50px;
458
+
459
+
460
+ opacity: 0;
461
+ visibility: hidden;
462
+
463
+ @include ah-animation(all, 0.3);
464
+
465
+
466
+ .ah-nav-cube{
467
+ // position: fixed;
468
+ margin: 0 auto;
469
+ // display: inline-block;
470
+ font-size: 15px;
471
+ color: $cube-blue;
472
+ z-index: 100;
473
+ }
474
+
475
+
476
+ > *{
477
+
478
+ vertical-align: middle;
479
+ }
480
+
481
+ }
482
+
483
+
484
+ .ah-hor-cubelist:hover,
485
+ .ah-cubelist-btn:hover + .ah-hor-cubelist,
486
+ .ah-cubelist-btn:active + .ah-hor-cubelist{
487
+
488
+ visibility: visible;
489
+ opacity: 1;
490
+ }
491
+
492
+ .ah-hor-cubelist .ah-nav-cube:hover{
493
+ color: #fff;
494
+ }
495
+
496
+
497
+
498
+
499
+
500
+ // vertical cubelist
501
+ .ah-ver-cubelist {
502
+
503
+ position: fixed;
504
+ display: block;
505
+
506
+
507
+
508
+ font-size: 0; //remove space between inline blocks
509
+
510
+ width: 50px;
511
+
512
+ text-align: center;
513
+
514
+ opacity: 0;
515
+ visibility: hidden;
516
+
517
+
518
+ @include ah-animation(all, 0.3s);
519
+
520
+ .ah-nav-cube{
521
+ // position: fixed;
522
+ margin: 0 auto;
523
+ display: block;
524
+ font-size: 15px;
525
+ color: $cube-blue;
526
+ z-index: 100;
527
+ }
528
+
529
+ }
530
+
531
+
532
+
533
+ .ah-ver-cubelist:hover,
534
+ .ah-cubelist-btn:hover + .ah-ver-cubelist,
535
+ .ah-cubelist-btn:active + .ah-ver-cubelist{
536
+
537
+ visibility: visible;
538
+ opacity: 1;
539
+ }
540
+
541
+ .ah-ver-cubelist .ah-nav-cube:hover{
542
+ color: #fff;
543
+ }
544
+
545
+
546
+
547
+
548
+ */
549
+
550
+
551
+
552
+
553
+
554
+