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 CHANGED
@@ -1,7 +1,7 @@
1
1
  ---
2
2
  SHA256:
3
- metadata.gz: 546dcb0ade52cea03999f68b2f8866e0d5c34cd714ccda4818f231db0e6996ea
4
- data.tar.gz: bb27504cda97798e8b9e47ce98ec7efc73e664d3c727b3685ab5e4d77338b5ff
3
+ metadata.gz: 8090819de67a4cd59730d513d833430cb0314693d92614a40b150603e9e569bc
4
+ data.tar.gz: 447fc7161eda427ad167d616265322f33db7f42bf232c9dd642f900f730a1afa
5
5
  SHA512:
6
- metadata.gz: a76c13a79e053ff43dddb6d0bbf4d6c87fec754d2cf710b19cd375b89864b09e178665dcda6b9bbad5d6f60ae9abb492d2187eea98ac3a02b2d561ae7fc229ef
7
- data.tar.gz: e6ecbdff28acf32f5414998b62f810379cc2d8a8796ad8b501480eca9ef2d93587fe94ef3c44c4baaa9b5da82bf76ff40995b75a30c43143434eaa1c3920be87
6
+ metadata.gz: e99a7527ad594aa9c3805d6d422c13030252e0c8b9d614bc3bef1c29bbef358093bebfffe80f6dad4e1799345ce38835ed2398e70eed6b4eef5babb5c5ffba5c
7
+ data.tar.gz: 7f725871fca780a660973273cae8b4102d98f1f9f49633e4b9ed2a496e23388a7aac61e8940575f023ab213cca894be65d6e6e2ca1e4db16577a30997091d435
data/README.md CHANGED
@@ -3,59 +3,17 @@
3
3
  ![Gem Version](https://img.shields.io/gem/v/beyond_canvas?label=gem%20version)
4
4
  ![License](https://img.shields.io/github/license/ePages-de/beyond_canvas)
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
- TBD
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
- ## Changelog
14
+ ## Change log
57
15
 
58
- Beyond Canvas's changelog is available [here](https://github.com/ePages-de/beyond_canvas/blob/master/CHANGELOG.md).
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
 
@@ -81,7 +81,7 @@
81
81
  $(".flash").addClass("flash--shown");
82
82
  }, 100);
83
83
  };
84
- $(document).on("click", ".flash", function() {
84
+ $(document).on("click", ".flash__close", function() {
85
85
  closeAlert();
86
86
  });
87
87
  $(document).on("ready page:load turbolinks:load", onDOMReady);
@@ -30,6 +30,7 @@
30
30
  @import "components/notices";
31
31
  @import "components/relative";
32
32
  @import "components/scrollbox";
33
+ @import "components/select2";
33
34
  @import "components/sidebar";
34
35
  @import "components/spinner";
35
36
  @import "components/statuses";
@@ -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
  }
@@ -40,7 +40,8 @@
40
40
  background-color: $flash-warning;
41
41
  }
42
42
 
43
- &--error {
43
+ &--error,
44
+ &--alert {
44
45
  background-color: $flash-error;
45
46
  }
46
47
  }
@@ -9,6 +9,12 @@ select {
9
9
  outline: none;
10
10
  padding: 6px 8px;
11
11
  width: 100%;
12
+
13
+ &:disabled {
14
+ background-color: $input-disabled-background !important;
15
+ color: $input-disabled-color;
16
+ opacity: 1;
17
+ }
12
18
  }
13
19
 
14
20
  #{$all-text-inputs} {
@@ -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;
@@ -46,7 +46,7 @@ module BeyondCanvas
46
46
  inline_svg_tag 'icons/flash_info.svg'
47
47
  when 'warning'
48
48
  inline_svg_tag 'icons/flash_warning.svg'
49
- when 'error'
49
+ when 'error', 'alert'
50
50
  inline_svg_tag 'icons/flash_error.svg'
51
51
  else
52
52
  inline_svg_tag 'icons/flash_info.svg'
@@ -9,7 +9,7 @@
9
9
  }, 100);
10
10
  };
11
11
 
12
- $(document).on('click', '.flash', function () {
12
+ $(document).on('click', '.flash__close', function () {
13
13
  closeAlert();
14
14
  });
15
15
 
@@ -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
 
@@ -1,5 +1,5 @@
1
1
  # frozen_string_literal: true
2
2
 
3
3
  module BeyondCanvas
4
- VERSION = '0.20.0.pre'
4
+ VERSION = '0.21.0.pre'
5
5
  end
@@ -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.20.0.pre
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-04 00:00:00.000000000 Z
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