activeadmin_blaze_theme 0.3.0 → 0.4.0
Sign up to get free protection for your applications and to get access to all the features.
- checksums.yaml +4 -4
- data/README.md +30 -27
- data/app/assets/stylesheets/activeadmin_blaze_theme/theme.scss +81 -36
- data/lib/activeadmin_blaze_theme/version.rb +1 -1
- data/screenshot1.jpg +0 -0
- data/screenshot2.jpg +0 -0
- data/screenshot3.jpg +0 -0
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA1:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 2f0e29972847ff9e930543c5d1e478ddaeeb04f8
|
4
|
+
data.tar.gz: 437f97aa3a05465316be0392794e24031faf4936
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 6c52edfb877579a8cf9a12d9c670729e4d610173acff8340f3e0ce056734f492c584aa5c6989b53481506f01c078e8873d37de22aae9586dc1343c400eb7ba20
|
7
|
+
data.tar.gz: 4d35b6143888bb954f682f0d1a33f72f77ed8286ec4299dd3deda28a42af261cff44e9630b8503b2a14bb917835d39fb80fba34578ce219fbef1a0909b643694
|
data/README.md
CHANGED
@@ -6,7 +6,7 @@ Features:
|
|
6
6
|
|
7
7
|
- CSS only theme with clean UI
|
8
8
|
- compact nested forms
|
9
|
-
- [customizable](#customize): colors, sidebar position,
|
9
|
+
- [customizable](#customize): colors, sidebar position, scroll on cells
|
10
10
|
- custom boolean input: [toggle](#toggle)
|
11
11
|
- Blaze CSS [widgets](#blaze-widgets)
|
12
12
|
|
@@ -27,31 +27,35 @@ Features:
|
|
27
27
|
- To change colors add before your ActiveAdmin styles (_app/assets/stylesheets/active_admin.scss_):
|
28
28
|
|
29
29
|
```css
|
30
|
-
|
30
|
+
// blaze colors
|
31
31
|
$color-brand: #2C3E50;
|
32
32
|
$color-info: #4dabf5;
|
33
33
|
$color-warning: #ff9800;
|
34
34
|
$color-success: #4caf50;
|
35
35
|
$color-error: #f44336;
|
36
|
-
|
37
|
-
$bg-
|
38
|
-
$bg-
|
39
|
-
$bg-
|
40
|
-
$bg-
|
41
|
-
$bg-
|
42
|
-
$bg-
|
43
|
-
$bg-
|
44
|
-
$bg-
|
45
|
-
$
|
46
|
-
$
|
47
|
-
$fg-
|
48
|
-
$fg-
|
49
|
-
$fg-
|
50
|
-
|
51
|
-
$
|
52
|
-
|
53
|
-
$
|
54
|
-
$
|
36
|
+
// main variables
|
37
|
+
$bg-footer: #dfdfdf !default; // bg footer bar
|
38
|
+
$bg-form1: #f4f4f4 !default; // bg 1st level forms
|
39
|
+
$bg-form2: darken($bg-form1, 3%) !default; // bg 2nd level forms (nested)
|
40
|
+
$bg-form3: darken($bg-form1, 6%) !default; // bg 3rd level forms (nested)
|
41
|
+
$bg-form4: darken($bg-form1, 9%) !default; // bg 4th level forms (nested)
|
42
|
+
$bg-form-sub-headings: lighten( $color-brand, 64% ) !default; // bg nested forms title
|
43
|
+
$bg-header: $color-brand !default; // bg header bar
|
44
|
+
$bg-inputs: #fff !default; // bg forms inputs
|
45
|
+
$bg-menu-active: #7b929e !default; // bg menu item current / hover
|
46
|
+
$bg-sidebar: #efefef; // bg sidebar
|
47
|
+
$fg-box-title: #fff !default;
|
48
|
+
$fg-button-link: #fff !default;
|
49
|
+
$fg-menu-items: #f8f8f8 !default;
|
50
|
+
$fg-table-borders: #e4e4e4 !default;
|
51
|
+
$fg-table-link: #eee !default;
|
52
|
+
// other variables
|
53
|
+
$form-padding: 10px !default;
|
54
|
+
$inputs-spacing: 10px !default;
|
55
|
+
$height-inputs: 26px !default;
|
56
|
+
$height-topbar: 40px !default;
|
57
|
+
$height-titlebar: 38px !default;
|
58
|
+
$text-shadow: #000 !default;
|
55
59
|
```
|
56
60
|
|
57
61
|
- To move sidebar on the left add to your ActiveAdmin styles (after blaze theme import):
|
@@ -65,11 +69,6 @@ $text-shadow: #000;
|
|
65
69
|
- More options:
|
66
70
|
|
67
71
|
```css
|
68
|
-
// compact title bar
|
69
|
-
#title_bar {
|
70
|
-
@extend .compact_titlebar;
|
71
|
-
}
|
72
|
-
|
73
72
|
// scrollable table cells
|
74
73
|
.index_content table {
|
75
74
|
@extend .scoll_cells;
|
@@ -120,10 +119,14 @@ Index:
|
|
120
119
|
|
121
120
|
![index](screenshot1.jpg)
|
122
121
|
|
123
|
-
Edit
|
122
|
+
Edit:
|
124
123
|
|
125
124
|
![edit](screenshot2.jpg)
|
126
125
|
|
126
|
+
Show - sidebar on the left:
|
127
|
+
|
128
|
+
![edit](screenshot3.jpg)
|
129
|
+
|
127
130
|
## Contributors
|
128
131
|
|
129
132
|
- [Mattia Roccoberton](http://blocknot.es) - creator, maintainer
|
@@ -2,6 +2,7 @@
|
|
2
2
|
@import url('https://fonts.googleapis.com/css?family=Roboto');
|
3
3
|
|
4
4
|
// main variables
|
5
|
+
$bg-footer: #dfdfdf !default; // bg footer bar
|
5
6
|
$bg-form1: #f4f4f4 !default; // bg 1st level forms
|
6
7
|
$bg-form2: darken($bg-form1, 3%) !default; // bg 2nd level forms (nested)
|
7
8
|
$bg-form3: darken($bg-form1, 6%) !default; // bg 3rd level forms (nested)
|
@@ -10,6 +11,7 @@ $bg-form-sub-headings: lighten( $color-brand, 64% ) !default; // bg nested form
|
|
10
11
|
$bg-header: $color-brand !default; // bg header bar
|
11
12
|
$bg-inputs: #fff !default; // bg forms inputs
|
12
13
|
$bg-menu-active: #7b929e !default; // bg menu item current / hover
|
14
|
+
$bg-sidebar: #efefef; // bg sidebar
|
13
15
|
$fg-box-title: #fff !default;
|
14
16
|
$fg-button-link: #fff !default;
|
15
17
|
$fg-menu-items: #f8f8f8 !default;
|
@@ -20,11 +22,15 @@ $fg-table-link: #eee !default;
|
|
20
22
|
$form-padding: 10px !default;
|
21
23
|
$inputs-spacing: 10px !default;
|
22
24
|
$height-inputs: 26px !default;
|
25
|
+
$height-topbar: 40px !default;
|
26
|
+
$height-titlebar: 38px !default;
|
23
27
|
$text-shadow: #000 !default;
|
24
28
|
|
25
29
|
// active_admin theme styles
|
26
30
|
body.active_admin {
|
27
31
|
font-family: 'Roboto', sans-serif;
|
32
|
+
font-size: 12px;
|
33
|
+
min-height: 100vh;
|
28
34
|
|
29
35
|
// generics
|
30
36
|
.button-base {
|
@@ -106,6 +112,9 @@ body.active_admin {
|
|
106
112
|
fieldset.actions li.cancel a:hover {
|
107
113
|
background-image: none;
|
108
114
|
}
|
115
|
+
> .actions {
|
116
|
+
margin: 5px 0 0 0;
|
117
|
+
}
|
109
118
|
|
110
119
|
// submits
|
111
120
|
input[type='submit'] {
|
@@ -281,8 +290,7 @@ body.active_admin {
|
|
281
290
|
@extend .c-card__item;
|
282
291
|
// @extend .c-card__item--info;
|
283
292
|
background: $bg-form-sub-headings;
|
284
|
-
|
285
|
-
padding-left: 10px;
|
293
|
+
padding: 10px;
|
286
294
|
}
|
287
295
|
.inputs {
|
288
296
|
padding: $form-padding;
|
@@ -323,16 +331,24 @@ body.active_admin {
|
|
323
331
|
}
|
324
332
|
.site_title {
|
325
333
|
color: $fg-menu-items;
|
334
|
+
padding-top: 0;
|
335
|
+
padding-bottom: 0;
|
326
336
|
img {
|
327
|
-
max-height:
|
337
|
+
max-height: $height-topbar;
|
328
338
|
max-width: 250px;
|
329
|
-
top: -1px;
|
339
|
+
// top: -1px;
|
330
340
|
vertical-align: middle;
|
331
341
|
}
|
332
342
|
}
|
333
343
|
ul.tabs {
|
344
|
+
li {
|
345
|
+
height: $height-topbar;
|
346
|
+
line-height: $height-topbar;
|
347
|
+
}
|
334
348
|
li > a {
|
335
349
|
color: $fg-menu-items;
|
350
|
+
height: $height-topbar;
|
351
|
+
line-height: $height-topbar;
|
336
352
|
}
|
337
353
|
li:hover, li.current {
|
338
354
|
background: $bg-menu-active;
|
@@ -403,6 +419,14 @@ body.active_admin {
|
|
403
419
|
&.current:hover {
|
404
420
|
background-image: none;
|
405
421
|
}
|
422
|
+
&.gap {
|
423
|
+
border: 0 none;
|
424
|
+
}
|
425
|
+
&.gap:hover {
|
426
|
+
background-color: transparent;
|
427
|
+
color: initial;
|
428
|
+
cursor: default;
|
429
|
+
}
|
406
430
|
}
|
407
431
|
}
|
408
432
|
|
@@ -441,12 +465,16 @@ body.active_admin {
|
|
441
465
|
|
442
466
|
// sidebars
|
443
467
|
#sidebar {
|
444
|
-
background:
|
468
|
+
background: $bg-sidebar;
|
469
|
+
min-height: calc(100vh - #{$height-topbar + $height-titlebar + 2 + 40});
|
445
470
|
padding: 0 15px;
|
446
471
|
.sidebar_section {
|
447
472
|
margin-bottom: 20px;
|
448
473
|
}
|
449
474
|
}
|
475
|
+
#active_admin_content > #sidebar, #active_admin_content > #main_content_wrapper {
|
476
|
+
float: none;
|
477
|
+
}
|
450
478
|
.sidebar_section {
|
451
479
|
@extend .c-card;
|
452
480
|
@extend .u-high;
|
@@ -564,6 +592,18 @@ body.active_admin {
|
|
564
592
|
#title_bar {
|
565
593
|
background-image: none;
|
566
594
|
box-shadow: none;
|
595
|
+
padding-top: 0;
|
596
|
+
padding-bottom: 0;
|
597
|
+
.breadcrumb {
|
598
|
+
float: left;
|
599
|
+
font-size: 1em;
|
600
|
+
line-height: initial;
|
601
|
+
margin: 0;
|
602
|
+
padding: 0;
|
603
|
+
> a, > a:link, > a:visited, > a:active {
|
604
|
+
opacity: 0.7;
|
605
|
+
}
|
606
|
+
}
|
567
607
|
.action_items span.action_item {
|
568
608
|
> a,
|
569
609
|
> .dropdown_menu > a {
|
@@ -578,11 +618,24 @@ body.active_admin {
|
|
578
618
|
@extend .c-button--error;
|
579
619
|
}
|
580
620
|
}
|
621
|
+
#page_title {
|
622
|
+
display: inline-block;
|
623
|
+
float: left;
|
624
|
+
font-size: 1em;
|
625
|
+
// font-size: 2em;
|
626
|
+
line-height: initial;
|
627
|
+
margin-left: 5px;
|
628
|
+
}
|
629
|
+
#titlebar_left, #titlebar_right {
|
630
|
+
height: $height-titlebar;
|
631
|
+
}
|
581
632
|
}
|
582
633
|
|
583
634
|
// main content
|
584
635
|
#main_content {
|
585
|
-
|
636
|
+
margin: 0;
|
637
|
+
padding: 25px 20px;
|
638
|
+
width: calc(100% - 270px);
|
586
639
|
> .panel {
|
587
640
|
@extend .c-card;
|
588
641
|
@extend .u-high;
|
@@ -606,6 +659,7 @@ body.active_admin {
|
|
606
659
|
|
607
660
|
// admin content
|
608
661
|
#active_admin_content {
|
662
|
+
display: flex;
|
609
663
|
padding: 0;
|
610
664
|
}
|
611
665
|
|
@@ -620,8 +674,11 @@ body.active_admin {
|
|
620
674
|
|
621
675
|
// footer
|
622
676
|
#footer {
|
623
|
-
|
624
|
-
|
677
|
+
bottom: 0;
|
678
|
+
position: absolute;
|
679
|
+
background-color: $bg-footer;
|
680
|
+
line-height: 20px;
|
681
|
+
padding: 10px;
|
625
682
|
text-align: center;
|
626
683
|
width: 100%;
|
627
684
|
> p {
|
@@ -631,6 +688,11 @@ body.active_admin {
|
|
631
688
|
}
|
632
689
|
|
633
690
|
// misc
|
691
|
+
.download_links > a {
|
692
|
+
@extend .c-button;
|
693
|
+
@extend .c-button--info;
|
694
|
+
@extend .u-small;
|
695
|
+
}
|
634
696
|
.ui-datepicker {
|
635
697
|
> .ui-datepicker-header {
|
636
698
|
border-bottom: 0 none;
|
@@ -658,40 +720,18 @@ body.active_admin {
|
|
658
720
|
|
659
721
|
// optional customizations
|
660
722
|
.compact_titlebar {
|
661
|
-
|
662
|
-
padding-bottom: 0;
|
663
|
-
.breadcrumb {
|
664
|
-
float: left;
|
665
|
-
font-size: 1em;
|
666
|
-
line-height: initial;
|
667
|
-
margin: 0;
|
668
|
-
padding: 0;
|
669
|
-
> a, > a:link, > a:visited, > a:active {
|
670
|
-
opacity: 0.5;
|
671
|
-
}
|
672
|
-
}
|
673
|
-
#page_title {
|
674
|
-
display: inline-block;
|
675
|
-
float: left;
|
676
|
-
font-size: 1em;
|
677
|
-
// font-size: 2em;
|
678
|
-
line-height: initial;
|
679
|
-
margin-left: 5px;
|
680
|
-
}
|
681
|
-
#titlebar_left, #titlebar_right {
|
682
|
-
height: 36px;
|
683
|
-
}
|
723
|
+
white-space: initial;
|
684
724
|
}
|
685
725
|
.sidebar_left {
|
686
726
|
#main_content_wrapper {
|
687
|
-
|
688
|
-
width: calc( 100% -
|
727
|
+
order: 2;
|
728
|
+
width: calc( 100% - 270px );
|
689
729
|
#main_content {
|
690
|
-
|
691
|
-
padding: 35px 30px 35px 0;
|
730
|
+
width: 100%;
|
692
731
|
}
|
693
732
|
}
|
694
733
|
#sidebar {
|
734
|
+
order: 1;
|
695
735
|
margin-left: 0;
|
696
736
|
}
|
697
737
|
}
|
@@ -703,6 +743,11 @@ body.active_admin {
|
|
703
743
|
}
|
704
744
|
|
705
745
|
#active_admin_content.without_sidebar #main_content_wrapper #main_content {
|
706
|
-
|
746
|
+
width: 100%;
|
747
|
+
}
|
748
|
+
#wrapper {
|
749
|
+
min-height: 100vh;
|
750
|
+
padding-bottom: 40px; // footer height
|
751
|
+
position: relative;
|
707
752
|
}
|
708
753
|
}
|
data/screenshot1.jpg
CHANGED
Binary file
|
data/screenshot2.jpg
CHANGED
Binary file
|
data/screenshot3.jpg
ADDED
Binary file
|
metadata
CHANGED
@@ -1,14 +1,14 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: activeadmin_blaze_theme
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.4.0
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Mattia Roccoberton
|
8
8
|
autorequire:
|
9
9
|
bindir: bin
|
10
10
|
cert_chain: []
|
11
|
-
date: 2017-06-
|
11
|
+
date: 2017-06-02 00:00:00.000000000 Z
|
12
12
|
dependencies:
|
13
13
|
- !ruby/object:Gem::Dependency
|
14
14
|
name: activeadmin
|
@@ -104,6 +104,7 @@ files:
|
|
104
104
|
- lib/formtastic/inputs/blaze_toggle_input.rb
|
105
105
|
- screenshot1.jpg
|
106
106
|
- screenshot2.jpg
|
107
|
+
- screenshot3.jpg
|
107
108
|
homepage: https://github.com/blocknotes/activeadmin_blaze_theme
|
108
109
|
licenses:
|
109
110
|
- MIT
|