beyond_canvas 0.20.0.pre → 0.21.0.pre
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/README.md +3 -45
- data/app/assets/javascripts/beyond_canvas/base.js +1 -1
- data/app/assets/stylesheets/beyond_canvas/base.scss +1 -0
- data/app/assets/stylesheets/beyond_canvas/components/_buttons.scss +44 -0
- data/app/assets/stylesheets/beyond_canvas/components/_flash.scss +2 -1
- data/app/assets/stylesheets/beyond_canvas/components/_inputs.scss +6 -0
- data/app/assets/stylesheets/beyond_canvas/components/_select2.scss +65 -0
- data/app/assets/stylesheets/beyond_canvas/settings/_variables.scss +20 -0
- data/app/helpers/beyond_canvas/application_helper.rb +1 -1
- data/app/javascript/beyond_canvas/initializers/flash.js +1 -1
- data/app/views/layouts/beyond_canvas/application.html.erb +1 -1
- data/lib/beyond_canvas/version.rb +1 -1
- data/lib/generators/beyond_canvas/custom_styles/templates/beyond_canvas_custom_styles.scss +20 -0
- metadata +3 -2
checksums.yaml
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
---
|
2
2
|
SHA256:
|
3
|
-
metadata.gz:
|
4
|
-
data.tar.gz:
|
3
|
+
metadata.gz: 8090819de67a4cd59730d513d833430cb0314693d92614a40b150603e9e569bc
|
4
|
+
data.tar.gz: 447fc7161eda427ad167d616265322f33db7f42bf232c9dd642f900f730a1afa
|
5
5
|
SHA512:
|
6
|
-
metadata.gz:
|
7
|
-
data.tar.gz:
|
6
|
+
metadata.gz: e99a7527ad594aa9c3805d6d422c13030252e0c8b9d614bc3bef1c29bbef358093bebfffe80f6dad4e1799345ce38835ed2398e70eed6b4eef5babb5c5ffba5c
|
7
|
+
data.tar.gz: 7f725871fca780a660973273cae8b4102d98f1f9f49633e4b9ed2a496e23388a7aac61e8940575f023ab213cca894be65d6e6e2ca1e4db16577a30997091d435
|
data/README.md
CHANGED
@@ -3,59 +3,17 @@
|
|
3
3
|

|
4
4
|

|
5
5
|
|
6
|
-
## Installation
|
7
|
-
|
8
|
-
1. Add this line to your application's Gemfile:
|
9
|
-
|
10
|
-
```ruby
|
11
|
-
gem "beyond_canvas"
|
12
|
-
```
|
13
|
-
|
14
|
-
1. Then execute:
|
15
|
-
|
16
|
-
```bash
|
17
|
-
$ bundle install
|
18
|
-
```
|
19
|
-
|
20
|
-
1. Restart your server and rename `application.css` to `application.scss` or `application.sass` (in case you prefer to use the `sass` syntax):
|
21
|
-
|
22
|
-
```bash
|
23
|
-
$ mv app/assets/stylesheets/application.css app/assets/stylesheets/application.scss
|
24
|
-
```
|
25
|
-
|
26
|
-
1. Delete _all_ Sprockets directives in `application.scss` (`require`, `require_tree` and `require_self`) and use Sass’s native `@import` instead ([Here's why?](https://content.pivotal.io/blog/structure-your-sass-files-with-import)).
|
27
|
-
|
28
|
-
1. Import Beyond Canvas at the beginning of `application.scss`. Any other styles must be imported after Beyond Canvas to avoid issues:
|
29
|
-
|
30
|
-
```scss
|
31
|
-
@import 'beyond_canvas'
|
32
|
-
```
|
33
|
-
|
34
|
-
1. Add the following to `application.js`:
|
35
|
-
|
36
|
-
```js
|
37
|
-
//= require beyond_canvas
|
38
|
-
```
|
39
|
-
|
40
|
-
1. Run the generator:
|
41
|
-
|
42
|
-
```bash
|
43
|
-
$ rails g beyond_canvas:install
|
44
|
-
```
|
45
|
-
|
46
|
-
This will generate `config/initializers/beyond_canvas.rb` file, used for general Beyond Canvas configuration. Read [this wiki entry](https://github.com/ePages-de/beyond_canvas/wiki/Initializer) to get more information about the different configuration options.
|
47
|
-
|
48
6
|
## Documentation
|
49
7
|
|
50
|
-
|
8
|
+
Please see the [Beyond Canvas wiki](https://github.com/ePages-de/beyond_canvas/wiki) for additional information about the gem and its features.
|
51
9
|
|
52
10
|
## Contributing
|
53
11
|
|
54
12
|
Please see [CONTRIBUTING](https://github.com/ePages-de/beyond_canvas/blob/master/CONTRIBUTING.md).
|
55
13
|
|
56
|
-
##
|
14
|
+
## Change log
|
57
15
|
|
58
|
-
Beyond Canvas's
|
16
|
+
Beyond Canvas's change log is available [here](https://github.com/ePages-de/beyond_canvas/blob/master/CHANGELOG.md).
|
59
17
|
|
60
18
|
## License
|
61
19
|
|
@@ -18,6 +18,16 @@
|
|
18
18
|
transition: $main-transition;
|
19
19
|
}
|
20
20
|
|
21
|
+
%button_disabled {
|
22
|
+
border-color: $button-disabled-background;
|
23
|
+
background-color: $button-disabled-background;
|
24
|
+
pointer-events: none;
|
25
|
+
color: $button-disabled-color;
|
26
|
+
text-shadow: $button-disabled-text-shadow;
|
27
|
+
border-bottom-color: #aaaaaa;
|
28
|
+
}
|
29
|
+
|
30
|
+
|
21
31
|
@mixin button-solid($background, $color) {
|
22
32
|
@include background-color-darken($background, 10%);
|
23
33
|
|
@@ -63,6 +73,10 @@
|
|
63
73
|
}
|
64
74
|
}
|
65
75
|
|
76
|
+
input[type=file][disabled] ~ .button__transparent--primary {
|
77
|
+
@extend %button_disabled;
|
78
|
+
}
|
79
|
+
|
66
80
|
.button {
|
67
81
|
&__solid {
|
68
82
|
&--primary {
|
@@ -70,6 +84,11 @@
|
|
70
84
|
|
71
85
|
@include button-solid($button-primary-background, $button-primary-color);
|
72
86
|
@include button-border($button-primary-background);
|
87
|
+
|
88
|
+
&:disabled,
|
89
|
+
&[disabled] {
|
90
|
+
@extend %button_disabled;
|
91
|
+
}
|
73
92
|
}
|
74
93
|
|
75
94
|
&--secondary {
|
@@ -77,6 +96,11 @@
|
|
77
96
|
|
78
97
|
@include button-solid($button-secondary-background, $button-secondary-color);
|
79
98
|
@include button-border($button-secondary-background);
|
99
|
+
|
100
|
+
&:disabled,
|
101
|
+
&[disabled] {
|
102
|
+
@extend %button_disabled;
|
103
|
+
}
|
80
104
|
}
|
81
105
|
|
82
106
|
&--danger {
|
@@ -84,6 +108,11 @@
|
|
84
108
|
|
85
109
|
@include button-solid($button-danger-background, $button-danger-color);
|
86
110
|
@include button-border($button-danger-background);
|
111
|
+
|
112
|
+
&:disabled,
|
113
|
+
&[disabled] {
|
114
|
+
@extend %button_disabled;
|
115
|
+
}
|
87
116
|
}
|
88
117
|
}
|
89
118
|
|
@@ -93,6 +122,11 @@
|
|
93
122
|
|
94
123
|
@include button-transparent($button-primary-background);
|
95
124
|
@include button-border($button-primary-background);
|
125
|
+
|
126
|
+
&:disabled,
|
127
|
+
&[disabled] {
|
128
|
+
@extend %button_disabled;
|
129
|
+
}
|
96
130
|
}
|
97
131
|
|
98
132
|
&--secondary {
|
@@ -100,6 +134,11 @@
|
|
100
134
|
|
101
135
|
@include button-transparent($button-secondary-background);
|
102
136
|
@include button-border($button-secondary-background);
|
137
|
+
|
138
|
+
&:disabled,
|
139
|
+
&[disabled] {
|
140
|
+
@extend %button_disabled;
|
141
|
+
}
|
103
142
|
}
|
104
143
|
|
105
144
|
&--danger {
|
@@ -107,6 +146,11 @@
|
|
107
146
|
|
108
147
|
@include button-transparent($button-danger-background);
|
109
148
|
@include button-border($button-danger-background);
|
149
|
+
|
150
|
+
&:disabled,
|
151
|
+
&[disabled] {
|
152
|
+
@extend %button_disabled;
|
153
|
+
}
|
110
154
|
}
|
111
155
|
}
|
112
156
|
}
|
@@ -0,0 +1,65 @@
|
|
1
|
+
.beyond-canvas {
|
2
|
+
|
3
|
+
.select2-container--default .select2-selection--multiple {
|
4
|
+
border: 1px solid $select2-border-color;
|
5
|
+
border-radius: 3px;
|
6
|
+
}
|
7
|
+
|
8
|
+
.select2-container--default.select2-container--focus .select2-selection--multiple{
|
9
|
+
border: 1px solid $select2-border-color-focus;
|
10
|
+
}
|
11
|
+
|
12
|
+
.select2-container--default.select2-container--open.select2-container--below .select2-selection--single,
|
13
|
+
.select2-container--default.select2-container--open.select2-container--below .select2-selection--multiple {
|
14
|
+
border-bottom-left-radius: 0;
|
15
|
+
border-bottom-right-radius: 0;
|
16
|
+
border-color: $select2-border-color-focus;
|
17
|
+
}
|
18
|
+
|
19
|
+
.select2-container--default.select2-container--disabled .select2-selection--multiple {
|
20
|
+
background-color: $select2-disabled-background;
|
21
|
+
pointer-events: none;
|
22
|
+
}
|
23
|
+
|
24
|
+
.select2-container--default .select2-results__option--highlighted[aria-selected] {
|
25
|
+
background-color: $select2-option-hover-background;
|
26
|
+
color: $select2-option-hover-color;
|
27
|
+
}
|
28
|
+
|
29
|
+
.select2-container--default .select2-selection--multiple .select2-selection__choice {
|
30
|
+
background-color: $select2-tag-background;
|
31
|
+
color: $select2-tag-color;
|
32
|
+
font-weight: bold;
|
33
|
+
font-size: 11px;
|
34
|
+
border-radius: 3px;
|
35
|
+
border: none;
|
36
|
+
padding: 3px 7px 4px;
|
37
|
+
display: flex;
|
38
|
+
align-items: center;
|
39
|
+
flex-direction: row-reverse;
|
40
|
+
}
|
41
|
+
|
42
|
+
.select2-container--default .select2-selection--multiple .select2-selection__choice__remove {
|
43
|
+
margin-left: 8px;
|
44
|
+
color: $select2-close-icon-color;
|
45
|
+
font-size: 18px;
|
46
|
+
line-height: 0;
|
47
|
+
|
48
|
+
&:hover {
|
49
|
+
color: $select2-close-icon-color-hover;
|
50
|
+
}
|
51
|
+
}
|
52
|
+
|
53
|
+
.select2-dropdown{
|
54
|
+
border: 1px solid $input-border-color-focus;
|
55
|
+
border-top: none;
|
56
|
+
}
|
57
|
+
|
58
|
+
.select2-results__option {
|
59
|
+
font-weight: 700;
|
60
|
+
}
|
61
|
+
|
62
|
+
.select2-results__option[aria-selected=true] {
|
63
|
+
display: none;
|
64
|
+
}
|
65
|
+
}
|
@@ -54,6 +54,10 @@ $button-secondary-color: $white !default;
|
|
54
54
|
$button-danger-background: $palette-danger !default;
|
55
55
|
$button-danger-color: $white !default;
|
56
56
|
|
57
|
+
$button-disabled-background: rgb(208,208,208) !default;
|
58
|
+
$button-disabled-color: rgb(144,144,144) !default;
|
59
|
+
$button-disabled-text-shadow: 1px 1px 0 $white !default;
|
60
|
+
|
57
61
|
$button-border-radius: 3px !default;
|
58
62
|
$button-box-shadow: true !default;
|
59
63
|
$button-font-weight: 700;
|
@@ -90,6 +94,8 @@ $label-color: rgb(128, 128, 128) !default;
|
|
90
94
|
$input-border-color: rgb(217, 216, 195) !default;
|
91
95
|
$input-border-color-focus: $palette-primary !default;
|
92
96
|
$input-errors-color: $palette-danger !default;
|
97
|
+
$input-disabled-background: rgb(245,244,239) !default;
|
98
|
+
$input-disabled-color: rgb(163,161,137) !default;
|
93
99
|
|
94
100
|
// ************************************************************
|
95
101
|
// Checkboxes
|
@@ -237,3 +243,17 @@ $modal-padding: 10px;
|
|
237
243
|
$modal-width: 650px;
|
238
244
|
$modal-close-icon-color: #8b8b8b !default;
|
239
245
|
$modal-background-color: rgba(0, 0, 0, 0.5) !default;
|
246
|
+
|
247
|
+
// ************************************************************
|
248
|
+
// Select2
|
249
|
+
// ************************************************************
|
250
|
+
|
251
|
+
$select2-border-color: $input-border-color !default;
|
252
|
+
$select2-border-color-focus: $input-border-color-focus !default;
|
253
|
+
$select2-close-icon-color: #79764b !default;
|
254
|
+
$select2-close-icon-color-hover: darken($select2-close-icon-color, 15%) !default;
|
255
|
+
$select2-tag-background: rgb(223, 222, 204) !default;
|
256
|
+
$select2-tag-color: rgb(122, 118, 76) !default;
|
257
|
+
$select2-disabled-background: rgb(245, 244, 239) !default;
|
258
|
+
$select2-option-hover-background: rgb(229, 241, 240) !default;
|
259
|
+
$select2-option-hover-color: rgb(62, 62, 62) !default;
|
@@ -3,7 +3,7 @@
|
|
3
3
|
<html>
|
4
4
|
<%= render 'beyond_canvas/shared/head' %>
|
5
5
|
|
6
|
-
<body class="body--application"<% if is_cockpit_app? && Rails.env.development? %> style="display: flex;"<% end %>>
|
6
|
+
<body class="beyond-canvas body--application"<% if is_cockpit_app? && Rails.env.development? %> style="display: flex;"<% end %>>
|
7
7
|
|
8
8
|
<%= render 'beyond_canvas/shared/sidebar' %>
|
9
9
|
|
@@ -47,6 +47,10 @@
|
|
47
47
|
// $button-danger-background: $palette-danger;
|
48
48
|
// $button-danger-color: $white;
|
49
49
|
|
50
|
+
// $button-disabled-background: rgb(208,208,208);
|
51
|
+
// $button-disabled-color: rgb(144,144,144);
|
52
|
+
// $button-disabled-text-shadow: 1px 1px 0 $white;
|
53
|
+
|
50
54
|
// $button-border-radius: 3px;
|
51
55
|
// $button-box-shadow: true;
|
52
56
|
|
@@ -77,6 +81,8 @@
|
|
77
81
|
// $input-border-color: rgb(217, 216, 195);
|
78
82
|
// $input-border-color-focus: $palette-primary;
|
79
83
|
// $input-errors-color: $palette-danger;
|
84
|
+
// $input-disabled-background: rgb(245,244,239);
|
85
|
+
// $input-disabled-color: rgb(163,161,137);
|
80
86
|
|
81
87
|
// ************************************************************
|
82
88
|
// Checkboxes
|
@@ -210,3 +216,17 @@
|
|
210
216
|
|
211
217
|
// $modal-close-icon-color: #8b8b8b;
|
212
218
|
// $modal-background-color: rgba(0, 0, 0, 0.5);
|
219
|
+
|
220
|
+
// ************************************************************
|
221
|
+
// Select2
|
222
|
+
// ************************************************************
|
223
|
+
|
224
|
+
// $select2-border-color: $input-border-color;
|
225
|
+
// $select2-border-color-focus: $input-border-color-focus;
|
226
|
+
// $select2-close-icon-color: #79764b;
|
227
|
+
// $select2-close-icon-color-hover: darken($select2-close-icon-color, 15%);
|
228
|
+
// $select2-tag-background: rgb(223, 222, 204);
|
229
|
+
// $select2-tag-color: rgb(122, 118, 76);
|
230
|
+
// $select2-disabled-background: rgb(245, 244, 239);
|
231
|
+
// $select2-option-hover-background: rgb(229, 241, 240);
|
232
|
+
// $select2-option-hover-color: rgb(62, 62, 62);
|
metadata
CHANGED
@@ -1,7 +1,7 @@
|
|
1
1
|
--- !ruby/object:Gem::Specification
|
2
2
|
name: beyond_canvas
|
3
3
|
version: !ruby/object:Gem::Version
|
4
|
-
version: 0.
|
4
|
+
version: 0.21.0.pre
|
5
5
|
platform: ruby
|
6
6
|
authors:
|
7
7
|
- Unai Abrisketa
|
@@ -10,7 +10,7 @@ authors:
|
|
10
10
|
autorequire:
|
11
11
|
bindir: bin
|
12
12
|
cert_chain: []
|
13
|
-
date: 2020-11-
|
13
|
+
date: 2020-11-13 00:00:00.000000000 Z
|
14
14
|
dependencies:
|
15
15
|
- !ruby/object:Gem::Dependency
|
16
16
|
name: attr_encrypted
|
@@ -252,6 +252,7 @@ files:
|
|
252
252
|
- app/assets/stylesheets/beyond_canvas/components/_notices.scss
|
253
253
|
- app/assets/stylesheets/beyond_canvas/components/_relative.scss
|
254
254
|
- app/assets/stylesheets/beyond_canvas/components/_scrollbox.scss
|
255
|
+
- app/assets/stylesheets/beyond_canvas/components/_select2.scss
|
255
256
|
- app/assets/stylesheets/beyond_canvas/components/_sidebar.scss
|
256
257
|
- app/assets/stylesheets/beyond_canvas/components/_spinner.scss
|
257
258
|
- app/assets/stylesheets/beyond_canvas/components/_statuses.scss
|