activeadmin_dark_color_scheme 0.1.2 → 0.1.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- checksums.yaml +4 -4
- data/Gemfile.lock +1 -1
- data/README.md +54 -19
- data/activeadmin_dark_color_scheme.gemspec +1 -1
- data/app/assets/stylesheets/_activeadmin-dark-color-scheme.sass +1 -0
- data/app/assets/stylesheets/activeadmin-dark-color-scheme/mixins/_buttons.sass +15 -1
- data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_flash.sass +17 -9
- data/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_tabs.sass +11 -0
- data/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_all.sass +24 -0
- data/lib/activeadmin/dark_color_scheme/engine.rb +1 -4
- data/lib/activeadmin/dark_color_scheme/version.rb +1 -1
- data/lib/activeadmin/dark_color_scheme.rb +2 -0
- data/lib/activeadmin_dark_color_scheme.rb +3 -0
- metadata +4 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: f98d9beefd66f62baf67cefa1f6a1bd9dddba36f498866de62c63b0cdb237434
|
4
|
+
data.tar.gz: 640e2b08ccef1d1401ac2f216aeba3f937e1e431c5aa8bb94f1b793509aad372
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: 7038435573277a48a44d32da29984b2ef31c687a946dba193b8629dbc58b8a09222a1f9d1a9de5d08bc76ae4ef836cf812caad5a51c224104b6e722913957931
|
7
|
+
data.tar.gz: 4597f5ad0611bfa38919726724ceb988272f1a9479593dc9aabf71647b56469e8fd37523a7764c5c7a64ef82604983dab43b1e2970a82df68a67547f4e2f336e
|
data/Gemfile.lock
CHANGED
data/README.md
CHANGED
@@ -1,39 +1,74 @@
|
|
1
|
-
# Activeadmin
|
2
|
-
|
3
|
-
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/activeadmin/dark_color_scheme`. To experiment with that code, run `bin/console` for an interactive prompt.
|
4
|
-
|
5
|
-
TODO: Delete this and the text above, and describe your gem
|
1
|
+
# Dark color scheme for Activeadmin
|
6
2
|
|
7
3
|
## Installation
|
8
4
|
|
9
5
|
Add this line to your application's Gemfile:
|
10
6
|
|
11
7
|
```ruby
|
12
|
-
gem
|
8
|
+
gem "activeadmin_dark_color_scheme"
|
13
9
|
```
|
14
10
|
|
15
|
-
|
11
|
+
Import our Sass file “activeadmin-dark-color-scheme” in your CSS entrypoint that compiles ActiveAdmin CSS files:
|
16
12
|
|
17
|
-
|
13
|
+
```sass
|
14
|
+
// app/assets/stylesheets/active_admin.sass
|
18
15
|
|
19
|
-
|
16
|
+
// Your regular ActiveAdmin files
|
17
|
+
@import "active_admin/mixins"
|
18
|
+
@import "active_admin/base"
|
20
19
|
|
21
|
-
|
20
|
+
// Dark scheme
|
21
|
+
@import "activeadmin-dark-color-scheme"
|
22
|
+
```
|
22
23
|
|
23
|
-
##
|
24
|
+
## Customization
|
24
25
|
|
25
|
-
|
26
|
+
All [Sass variables we use](https://github.com/sergeypedan/activeadmin-dark-color-scheme/blob/master/app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_all.sass) have `!default`:
|
26
27
|
|
27
|
-
|
28
|
+
```sass
|
29
|
+
$link-color-1: hsl(210, 70%, 73%) !default
|
30
|
+
```
|
28
31
|
|
29
|
-
|
32
|
+
which means you can override them just by declaring your own Sass variable somewhere before.
|
30
33
|
|
31
|
-
|
34
|
+
You could technically do it right in your entrypoint:
|
32
35
|
|
33
|
-
|
36
|
+
```sass
|
37
|
+
// app/assets/stylesheets/active_admin.sass
|
38
|
+
|
39
|
+
// Your regular ActiveAdmin files
|
40
|
+
@import "active_admin/mixins"
|
41
|
+
@import "active_admin/base"
|
42
|
+
|
43
|
+
// Dark scheme
|
44
|
+
$link-color-1: crimson
|
45
|
+
@import "activeadmin-dark-color-scheme"
|
46
|
+
```
|
34
47
|
|
35
|
-
|
48
|
+
Or you could put your variables in a separate file and `@import` it.
|
49
|
+
|
50
|
+
## How it works
|
51
|
+
|
52
|
+
You import additional CSS, all of which is scoped under `@media (prefers-color-scheme: dark)` media declaration that matches your system (or browser) color scheme setting.
|
53
|
+
|
54
|
+
Here is an example from [_table-index.sass](https://github.com/sergeypedan/activeadmin-dark-color-scheme/blob/master/app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_table-index.sass):
|
55
|
+
|
56
|
+
```sass
|
57
|
+
@media (prefers-color-scheme: dark)
|
58
|
+
|
59
|
+
table.index_table
|
60
|
+
th
|
61
|
+
background-color: $panel-bg-color-solid
|
62
|
+
background-image: $panel-head-gradient
|
63
|
+
border-top-color: $th-border-color-top
|
64
|
+
border-right-color: $th-border-color-right !important
|
65
|
+
border-bottom-color: $th-border-color-bottom
|
66
|
+
border-left-color: $th-border-color-left
|
67
|
+
box-shadow: none
|
68
|
+
color: hsl(0, 0%, 95%)
|
69
|
+
text-shadow: none
|
70
|
+
```
|
36
71
|
|
37
|
-
##
|
72
|
+
## How to disable
|
38
73
|
|
39
|
-
|
74
|
+
Switch to light color scheme in you system preferences or your browser developer tools.
|
@@ -17,5 +17,6 @@
|
|
17
17
|
@import "./activeadmin-dark-color-scheme/modules/sidebar"
|
18
18
|
@import "./activeadmin-dark-color-scheme/modules/table-attributes"
|
19
19
|
@import "./activeadmin-dark-color-scheme/modules/table-index"
|
20
|
+
@import "./activeadmin-dark-color-scheme/modules/tabs"
|
20
21
|
@import "./activeadmin-dark-color-scheme/modules/title-bar"
|
21
22
|
@import "./activeadmin-dark-color-scheme/modules/top-level"
|
@@ -10,7 +10,21 @@
|
|
10
10
|
text-shadow: none
|
11
11
|
|
12
12
|
&:not(.disabled):hover
|
13
|
-
background-image: linear-gradient(to bottom, lighten($btn-dark-1-gradient-stop-top,
|
13
|
+
background-image: linear-gradient(to bottom, lighten($btn-dark-1-gradient-stop-top, 2%), lighten($btn-dark-1-gradient-stop-bottom, 2%))
|
14
|
+
|
15
|
+
@mixin btn-dark-1-inset
|
16
|
+
background-color: $btn-dark-1-inset-bg
|
17
|
+
background-image: linear-gradient($btn-dark-1-inset-gradient-stop-top, $btn-dark-1-inset-gradient-stop-bottom)
|
18
|
+
border-top-color: $btn-datk-1-inset-border-top-color
|
19
|
+
border-right-color: lighten($btn-dark-1-bg, 10%)
|
20
|
+
border-bottom-color: darken($btn-dark-1-gradient-stop-bottom, 10%)
|
21
|
+
border-left-color: $btn-dark-1-inset-color
|
22
|
+
box-shadow: 0 1px 3px 0 hsla(0, 0%, 0%, 0.3) inset
|
23
|
+
color: $btn-dark-1-color
|
24
|
+
text-shadow: none
|
25
|
+
|
26
|
+
&:not(.disabled):hover
|
27
|
+
background-image: linear-gradient(to bottom, lighten($btn-dark-1-inset-gradient-stop-top, 2%), lighten($btn-dark-1-inset-gradient-stop-bottom, 2%))
|
14
28
|
|
15
29
|
@mixin btn-light-1
|
16
30
|
background-color: $btn-light-1-bg
|
@@ -1,16 +1,24 @@
|
|
1
1
|
@media (prefers-color-scheme: dark)
|
2
|
+
body.logged_out
|
3
|
+
.flash
|
4
|
+
-webkit-font-smoothing: antialiased
|
5
|
+
text-shadow: none
|
2
6
|
|
3
7
|
body.logged_in
|
4
8
|
.flash
|
5
|
-
background-color:
|
6
|
-
background-image: linear-gradient(
|
7
|
-
border-bottom-color:
|
8
|
-
color:
|
9
|
+
background-color: $alert-default-bg-color
|
10
|
+
background-image: linear-gradient($alert-default-gradient-stop-top, $alert-default-gradient-stop-bottom)
|
11
|
+
border-bottom-color: $alert-default-border-bottom-color !important
|
12
|
+
color: $alert-default-text-color
|
9
13
|
text-shadow: none
|
10
14
|
|
11
15
|
&.flash_notice
|
12
|
-
background-color:
|
13
|
-
background-image: linear-gradient(
|
14
|
-
border-bottom-color:
|
15
|
-
|
16
|
-
|
16
|
+
background-color: $alert-success-bg-color
|
17
|
+
background-image: linear-gradient($alert-success-gradient-stop-top, $alert-success-gradient-stop-bottom)
|
18
|
+
border-bottom-color: $alert-success-border-bottom-color !important
|
19
|
+
color: $alert-success-text-color
|
20
|
+
|
21
|
+
.active_admin.logged_out
|
22
|
+
.flash
|
23
|
+
&.flash_alert
|
24
|
+
color: $alert-danger-text-color
|
@@ -38,7 +38,31 @@ $btn-dark-1-gradient-stop-top: hsl(0, 0%, 33%) !default
|
|
38
38
|
$btn-dark-1-gradient-stop-bottom: hsl(0, 0%, 29%) !default
|
39
39
|
$btn-dark-1-color: white !default
|
40
40
|
|
41
|
+
$btn-dark-1-inset-bg: #3b3b3b
|
42
|
+
$btn-datk-1-inset-border-top-color: hsla(0, 0%, 0%, .01)
|
43
|
+
$btn-dark-1-inset-gradient-stop-top: #3b3b3b !default
|
44
|
+
$btn-dark-1-inset-gradient-stop-bottom: #414141 !default
|
45
|
+
$btn-dark-1-inset-color: lighten($btn-dark-1-bg, 10%)
|
46
|
+
|
41
47
|
$btn-light-1-bg: hsl(208, 15%, 87%) !default
|
42
48
|
$btn-light-1-gradient-stop-top: hsl(208, 15%, 87%) !default
|
43
49
|
$btn-light-1-gradient-stop-bottom: hsl(210, 2%, 68%) !default
|
44
50
|
$btn-light-1-color: hsl(0, 0%, 7%) !default
|
51
|
+
|
52
|
+
// Tab
|
53
|
+
$tab-border-color: hsla(0, 0%, 100%, .1) !default
|
54
|
+
|
55
|
+
// Alerts
|
56
|
+
$alert-danger-text-color: hsl(349, 57%, 53%) !default
|
57
|
+
|
58
|
+
$alert-success-bg-color: hsl(131, 39%, 33%) !default
|
59
|
+
$alert-success-gradient-stop-top: hsl(131, 39%, 33%) !default
|
60
|
+
$alert-success-gradient-stop-bottom: hsl(123, 41%, 25%) !default
|
61
|
+
$alert-success-text-color: #daeec8 !default
|
62
|
+
$alert-success-border-bottom-color: hsl(123, 45%, 26%) !default
|
63
|
+
|
64
|
+
$alert-default-bg-color: #c2b36c !default
|
65
|
+
$alert-default-gradient-stop-top: #a38e35 !default
|
66
|
+
$alert-default-gradient-stop-bottom: #a99847 !default
|
67
|
+
$alert-default-text-color: white !default
|
68
|
+
$alert-default-border-bottom-color: #958118 !default
|
@@ -1,6 +1,5 @@
|
|
1
1
|
# frozen_string_literal: true
|
2
2
|
|
3
|
-
require "autoprefixer-rails"
|
4
3
|
require "sassc-rails"
|
5
4
|
|
6
5
|
module FormtasticTristateRadio
|
@@ -8,12 +7,10 @@ module FormtasticTristateRadio
|
|
8
7
|
# This is standard Rails way to autoload gem’s contents dynamically as an “engine”
|
9
8
|
# @see https://guides.rubyonrails.org/engines.html Rails guide on engines
|
10
9
|
#
|
11
|
-
# module Rails
|
12
10
|
class Engine < ::Rails::Engine
|
13
|
-
initializer "
|
11
|
+
initializer "activeadmin_dark_color_scheme.assets" do |app|
|
14
12
|
app.config.assets.paths << root.join("assets", "stylesheets").to_s
|
15
13
|
end
|
16
14
|
end
|
17
|
-
# end
|
18
15
|
|
19
16
|
end
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: activeadmin_dark_color_scheme
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.1.
|
4
|
+
version: 0.1.4
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Sergey Pedan
|
@@ -131,12 +131,14 @@ files:
|
|
131
131
|
- app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_sidebar.sass
|
132
132
|
- app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_table-attributes.sass
|
133
133
|
- app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_table-index.sass
|
134
|
+
- app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_tabs.sass
|
134
135
|
- app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_title-bar.sass
|
135
136
|
- app/assets/stylesheets/activeadmin-dark-color-scheme/modules/_top-level.sass
|
136
137
|
- app/assets/stylesheets/activeadmin-dark-color-scheme/variables/_all.sass
|
137
138
|
- lib/activeadmin/dark_color_scheme.rb
|
138
139
|
- lib/activeadmin/dark_color_scheme/engine.rb
|
139
140
|
- lib/activeadmin/dark_color_scheme/version.rb
|
141
|
+
- lib/activeadmin_dark_color_scheme.rb
|
140
142
|
homepage: https://github.com/sergeypedan/activeadmin-dark-color-scheme
|
141
143
|
licenses:
|
142
144
|
- MIT
|
@@ -150,7 +152,7 @@ rdoc_options:
|
|
150
152
|
- "--charset=UTF-8"
|
151
153
|
require_paths:
|
152
154
|
- app
|
153
|
-
- lib
|
155
|
+
- lib
|
154
156
|
required_ruby_version: !ruby/object:Gem::Requirement
|
155
157
|
requirements:
|
156
158
|
- - ">="
|