blue-react 7.8.3 → 7.9.0

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.
package/dist/style.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Blue React v7.8.3 (https://bruegmann.github.io/blue-react)
2
+ * Blue React v7.9.0 (https://bruegmann.github.io/blue-react)
3
3
  * Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-react/blob/master/LICENSE).
4
4
  */
5
5
 
@@ -1,106 +1,106 @@
1
- /**
2
- * This will overwrite button-variant mixin from Bootstrap: On hover buttons will get lighter instead of darker
3
- */
4
-
5
- @mixin button-variant(
6
- $background,
7
- $border,
8
- $color: color-contrast($background),
9
- $hover-background:
10
- if(
11
- $color == $color-contrast-light,
12
- tint-color($background, $btn-hover-bg-tint-amount),
13
- shade-color($background, $btn-hover-bg-shade-amount)
14
- ),
15
- $hover-border:
16
- if(
17
- $color == $color-contrast-light,
18
- tint-color($border, $btn-hover-border-tint-amount),
19
- shade-color($border, $btn-hover-border-shade-amount)
20
- ),
21
- $hover-color: color-contrast($background),
22
- $active-background:
23
- if(
24
- $color == $color-contrast-light,
25
- shade-color($background, $btn-active-bg-shade-amount),
26
- tint-color($background, $btn-active-bg-tint-amount)
27
- ),
28
- $active-border:
29
- if(
30
- $color == $color-contrast-light,
31
- shade-color($border, $btn-active-border-shade-amount),
32
- tint-color($border, $btn-active-border-tint-amount)
33
- ),
34
- $active-color: color-contrast($active-background),
35
- $disabled-background: $background,
36
- $disabled-border: $border,
37
- $disabled-color: color-contrast($disabled-background)
38
- ) {
39
- color: $color;
40
- @include gradient-bg($background);
41
- border-color: $border;
42
- @include box-shadow($btn-box-shadow);
43
-
44
- &:hover {
45
- color: $hover-color;
46
- @include gradient-bg($hover-background);
47
- border-color: $hover-border;
48
- }
49
-
50
- .btn-check:focus + &,
51
- &:focus {
52
- color: $hover-color;
53
- @include gradient-bg($hover-background);
54
- border-color: $hover-border;
55
- @if $enable-shadows {
56
- @include box-shadow(
57
- $btn-box-shadow,
58
- 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5)
59
- );
60
- } @else {
61
- // Avoid using mixin so we can pass custom focus shadow properly
62
- box-shadow: 0
63
- 0
64
- 0
65
- $btn-focus-width
66
- rgba(mix($color, $border, 15%), 0.5);
67
- }
68
- }
69
-
70
- .btn-check:checked + &,
71
- .btn-check:active + &,
72
- &:active,
73
- &.active,
74
- .show > &.dropdown-toggle {
75
- color: $active-color;
76
- background-color: $active-background;
77
- // Remove CSS gradients if they're enabled
78
- background-image: if($enable-gradients, none, null);
79
- border-color: $active-border;
80
-
81
- &:focus {
82
- @if $enable-shadows {
83
- @include box-shadow(
84
- $btn-active-box-shadow,
85
- 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5)
86
- );
87
- } @else {
88
- // Avoid using mixin so we can pass custom focus shadow properly
89
- box-shadow: 0
90
- 0
91
- 0
92
- $btn-focus-width
93
- rgba(mix($color, $border, 15%), 0.5);
94
- }
95
- }
96
- }
97
-
98
- &:disabled,
99
- &.disabled {
100
- color: $disabled-color;
101
- background-color: $disabled-background;
102
- // Remove CSS gradients if they're enabled
103
- background-image: if($enable-gradients, none, null);
104
- border-color: $disabled-border;
105
- }
106
- }
1
+ /**
2
+ * This will overwrite button-variant mixin from Bootstrap: On hover buttons will get lighter instead of darker
3
+ */
4
+
5
+ @mixin button-variant(
6
+ $background,
7
+ $border,
8
+ $color: color-contrast($background),
9
+ $hover-background:
10
+ if(
11
+ $color == $color-contrast-light,
12
+ tint-color($background, $btn-hover-bg-tint-amount),
13
+ shade-color($background, $btn-hover-bg-shade-amount)
14
+ ),
15
+ $hover-border:
16
+ if(
17
+ $color == $color-contrast-light,
18
+ tint-color($border, $btn-hover-border-tint-amount),
19
+ shade-color($border, $btn-hover-border-shade-amount)
20
+ ),
21
+ $hover-color: color-contrast($background),
22
+ $active-background:
23
+ if(
24
+ $color == $color-contrast-light,
25
+ shade-color($background, $btn-active-bg-shade-amount),
26
+ tint-color($background, $btn-active-bg-tint-amount)
27
+ ),
28
+ $active-border:
29
+ if(
30
+ $color == $color-contrast-light,
31
+ shade-color($border, $btn-active-border-shade-amount),
32
+ tint-color($border, $btn-active-border-tint-amount)
33
+ ),
34
+ $active-color: color-contrast($active-background),
35
+ $disabled-background: $background,
36
+ $disabled-border: $border,
37
+ $disabled-color: color-contrast($disabled-background)
38
+ ) {
39
+ color: $color;
40
+ @include gradient-bg($background);
41
+ border-color: $border;
42
+ @include box-shadow($btn-box-shadow);
43
+
44
+ &:hover {
45
+ color: $hover-color;
46
+ @include gradient-bg($hover-background);
47
+ border-color: $hover-border;
48
+ }
49
+
50
+ .btn-check:focus + &,
51
+ &:focus {
52
+ color: $hover-color;
53
+ @include gradient-bg($hover-background);
54
+ border-color: $hover-border;
55
+ @if $enable-shadows {
56
+ @include box-shadow(
57
+ $btn-box-shadow,
58
+ 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5)
59
+ );
60
+ } @else {
61
+ // Avoid using mixin so we can pass custom focus shadow properly
62
+ box-shadow: 0
63
+ 0
64
+ 0
65
+ $btn-focus-width
66
+ rgba(mix($color, $border, 15%), 0.5);
67
+ }
68
+ }
69
+
70
+ .btn-check:checked + &,
71
+ .btn-check:active + &,
72
+ &:active,
73
+ &.active,
74
+ .show > &.dropdown-toggle {
75
+ color: $active-color;
76
+ background-color: $active-background;
77
+ // Remove CSS gradients if they're enabled
78
+ background-image: if($enable-gradients, none, null);
79
+ border-color: $active-border;
80
+
81
+ &:focus {
82
+ @if $enable-shadows {
83
+ @include box-shadow(
84
+ $btn-active-box-shadow,
85
+ 0 0 0 $btn-focus-width rgba(mix($color, $border, 15%), 0.5)
86
+ );
87
+ } @else {
88
+ // Avoid using mixin so we can pass custom focus shadow properly
89
+ box-shadow: 0
90
+ 0
91
+ 0
92
+ $btn-focus-width
93
+ rgba(mix($color, $border, 15%), 0.5);
94
+ }
95
+ }
96
+ }
97
+
98
+ &:disabled,
99
+ &.disabled {
100
+ color: $disabled-color;
101
+ background-color: $disabled-background;
102
+ // Remove CSS gradients if they're enabled
103
+ background-image: if($enable-gradients, none, null);
104
+ border-color: $disabled-border;
105
+ }
106
+ }
@@ -1,13 +1,13 @@
1
- .container,
2
- .container-fluid {
3
- &:before {
4
- content: "";
5
- display: table;
6
- }
7
- }
8
-
9
- @include media-breakpoint-up(sm) {
10
- .form-horizontal .col-form-label {
11
- text-align: right;
12
- }
13
- }
1
+ .container,
2
+ .container-fluid {
3
+ &:before {
4
+ content: "";
5
+ display: table;
6
+ }
7
+ }
8
+
9
+ @include media-breakpoint-up(sm) {
10
+ .form-horizontal .col-form-label {
11
+ text-align: right;
12
+ }
13
+ }
@@ -1,13 +1,13 @@
1
- $light: #ecedf0 !default;
2
-
3
- // Components
4
- //
5
-
6
- $border-radius: 0.5rem !default;
7
- $border-radius-lg: 0.7rem !default;
8
- $border-radius-sm: 0.3rem !default;
9
-
10
- $custom-checkbox-indicator-border-radius: $border-radius-sm !default;
11
-
12
- $link-decoration: none !default;
13
- $link-hover-decoration: underline !default;
1
+ $light: #ecedf0 !default;
2
+
3
+ // Components
4
+ //
5
+
6
+ $border-radius: 0.5rem !default;
7
+ $border-radius-lg: 0.7rem !default;
8
+ $border-radius-sm: 0.3rem !default;
9
+
10
+ $custom-checkbox-indicator-border-radius: $border-radius-sm !default;
11
+
12
+ $link-decoration: none !default;
13
+ $link-hover-decoration: underline !default;
@@ -1,56 +1,56 @@
1
- /*!
2
- * Bootstrap v5.0.1 (https://getbootstrap.com/)
3
- * Copyright 2011-2021 The Bootstrap Authors
4
- * Copyright 2011-2021 Twitter, Inc.
5
- * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
6
- */
7
-
8
- // scss-docs-start import-stack
9
- // Configuration
10
- @import "node_modules/bootstrap/scss/functions";
11
- @import "node_modules/bootstrap/scss/variables";
12
- @import "node_modules/bootstrap/scss/mixins";
13
-
14
- @import "./_bootstrap-mixins_overwritten.scss";
15
-
16
- @import "node_modules/bootstrap/scss/utilities";
17
-
18
- // Layout & components
19
- @import "node_modules/bootstrap/scss/root";
20
-
21
- @import "node_modules/bootstrap/scss/reboot";
22
- @import "node_modules/bootstrap/scss/type";
23
- @import "node_modules/bootstrap/scss/images";
24
- @import "node_modules/bootstrap/scss/containers";
25
- @import "node_modules/bootstrap/scss/grid";
26
- @import "node_modules/bootstrap/scss/tables";
27
- @import "node_modules/bootstrap/scss/forms";
28
- @import "node_modules/bootstrap/scss/buttons";
29
- @import "node_modules/bootstrap/scss/transitions";
30
- @import "node_modules/bootstrap/scss/dropdown";
31
- @import "node_modules/bootstrap/scss/button-group";
32
- @import "node_modules/bootstrap/scss/nav";
33
- @import "node_modules/bootstrap/scss/navbar";
34
- @import "node_modules/bootstrap/scss/card";
35
- @import "node_modules/bootstrap/scss/accordion";
36
- @import "node_modules/bootstrap/scss/breadcrumb";
37
- @import "node_modules/bootstrap/scss/pagination";
38
- @import "node_modules/bootstrap/scss/badge";
39
- @import "node_modules/bootstrap/scss/alert";
40
- @import "node_modules/bootstrap/scss/progress";
41
- @import "node_modules/bootstrap/scss/list-group";
42
- @import "node_modules/bootstrap/scss/close";
43
- @import "node_modules/bootstrap/scss/toasts";
44
- @import "node_modules/bootstrap/scss/modal";
45
- @import "node_modules/bootstrap/scss/tooltip";
46
- @import "node_modules/bootstrap/scss/popover";
47
- @import "node_modules/bootstrap/scss/carousel";
48
- @import "node_modules/bootstrap/scss/spinners";
49
- @import "node_modules/bootstrap/scss/offcanvas";
50
-
51
- // Helpers
52
- @import "node_modules/bootstrap/scss/helpers";
53
-
54
- // Utilities
55
- @import "node_modules/bootstrap/scss/utilities/api";
56
- // scss-docs-end import-stack
1
+ /*!
2
+ * Bootstrap v5.0.1 (https://getbootstrap.com/)
3
+ * Copyright 2011-2021 The Bootstrap Authors
4
+ * Copyright 2011-2021 Twitter, Inc.
5
+ * Licensed under MIT (https://github.com/twbs/bootstrap/blob/main/LICENSE)
6
+ */
7
+
8
+ // scss-docs-start import-stack
9
+ // Configuration
10
+ @import "node_modules/bootstrap/scss/functions";
11
+ @import "node_modules/bootstrap/scss/variables";
12
+ @import "node_modules/bootstrap/scss/mixins";
13
+
14
+ @import "./_bootstrap-mixins_overwritten.scss";
15
+
16
+ @import "node_modules/bootstrap/scss/utilities";
17
+
18
+ // Layout & components
19
+ @import "node_modules/bootstrap/scss/root";
20
+
21
+ @import "node_modules/bootstrap/scss/reboot";
22
+ @import "node_modules/bootstrap/scss/type";
23
+ @import "node_modules/bootstrap/scss/images";
24
+ @import "node_modules/bootstrap/scss/containers";
25
+ @import "node_modules/bootstrap/scss/grid";
26
+ @import "node_modules/bootstrap/scss/tables";
27
+ @import "node_modules/bootstrap/scss/forms";
28
+ @import "node_modules/bootstrap/scss/buttons";
29
+ @import "node_modules/bootstrap/scss/transitions";
30
+ @import "node_modules/bootstrap/scss/dropdown";
31
+ @import "node_modules/bootstrap/scss/button-group";
32
+ @import "node_modules/bootstrap/scss/nav";
33
+ @import "node_modules/bootstrap/scss/navbar";
34
+ @import "node_modules/bootstrap/scss/card";
35
+ @import "node_modules/bootstrap/scss/accordion";
36
+ @import "node_modules/bootstrap/scss/breadcrumb";
37
+ @import "node_modules/bootstrap/scss/pagination";
38
+ @import "node_modules/bootstrap/scss/badge";
39
+ @import "node_modules/bootstrap/scss/alert";
40
+ @import "node_modules/bootstrap/scss/progress";
41
+ @import "node_modules/bootstrap/scss/list-group";
42
+ @import "node_modules/bootstrap/scss/close";
43
+ @import "node_modules/bootstrap/scss/toasts";
44
+ @import "node_modules/bootstrap/scss/modal";
45
+ @import "node_modules/bootstrap/scss/tooltip";
46
+ @import "node_modules/bootstrap/scss/popover";
47
+ @import "node_modules/bootstrap/scss/carousel";
48
+ @import "node_modules/bootstrap/scss/spinners";
49
+ @import "node_modules/bootstrap/scss/offcanvas";
50
+
51
+ // Helpers
52
+ @import "node_modules/bootstrap/scss/helpers";
53
+
54
+ // Utilities
55
+ @import "node_modules/bootstrap/scss/utilities/api";
56
+ // scss-docs-end import-stack
@@ -1,50 +1,50 @@
1
- .caret {
2
- /* treat like a font icon */
3
- font-family: "blueicon" !important;
4
- speak: none;
5
- font-style: normal;
6
- font-weight: normal;
7
- font-variant: normal;
8
- text-transform: none;
9
- line-height: 1;
10
- -webkit-font-smoothing: antialiased;
11
- -moz-osx-font-smoothing: grayscale;
12
-
13
- font-size: 1.15em;
14
- position: relative;
15
- top: 0.063rem;
16
- display: inline-block;
17
- /* END treat like a font icon */
18
-
19
- --caret-size: 0.5em;
20
- --caret-strength: 0.09em;
21
-
22
- width: 1em;
23
-
24
- &::before {
25
- content: "";
26
- display: block;
27
- position: absolute;
28
- top: 50%;
29
- left: 50%;
30
- width: var(--caret-size);
31
- height: var(--caret-size);
32
- background: transparent;
33
- box-shadow: var(--caret-strength) var(--caret-strength) 0 currentColor;
34
- transform: rotate(-45deg) translate(-50%, -50%);
35
- margin-top: calc((var(--caret-size) + var(--caret-strength)) * -1);
36
- transition: all 0.2s;
37
- }
38
-
39
- &.caret-mirrored {
40
- &::before {
41
- transform: rotate(135deg) translate(-50%, -50%);
42
- }
43
- }
44
-
45
- &.caret-open {
46
- &::before {
47
- transform: rotate(45deg) translate(-50%, -50%);
48
- }
49
- }
50
- }
1
+ .caret {
2
+ /* treat like a font icon */
3
+ font-family: "blueicon" !important;
4
+ speak: none;
5
+ font-style: normal;
6
+ font-weight: normal;
7
+ font-variant: normal;
8
+ text-transform: none;
9
+ line-height: 1;
10
+ -webkit-font-smoothing: antialiased;
11
+ -moz-osx-font-smoothing: grayscale;
12
+
13
+ font-size: 1.15em;
14
+ position: relative;
15
+ top: 0.063rem;
16
+ display: inline-block;
17
+ /* END treat like a font icon */
18
+
19
+ --caret-size: 0.5em;
20
+ --caret-strength: 0.09em;
21
+
22
+ width: 1em;
23
+
24
+ &::before {
25
+ content: "";
26
+ display: block;
27
+ position: absolute;
28
+ top: 50%;
29
+ left: 50%;
30
+ width: var(--caret-size);
31
+ height: var(--caret-size);
32
+ background: transparent;
33
+ box-shadow: var(--caret-strength) var(--caret-strength) 0 currentColor;
34
+ transform: rotate(-45deg) translate(-50%, -50%);
35
+ margin-top: calc((var(--caret-size) + var(--caret-strength)) * -1);
36
+ transition: all 0.2s;
37
+ }
38
+
39
+ &.caret-mirrored {
40
+ &::before {
41
+ transform: rotate(135deg) translate(-50%, -50%);
42
+ }
43
+ }
44
+
45
+ &.caret-open {
46
+ &::before {
47
+ transform: rotate(45deg) translate(-50%, -50%);
48
+ }
49
+ }
50
+ }
@@ -1,6 +1,6 @@
1
- .document-view-iframe {
2
- border: none;
3
- width: 100%;
4
- height: calc(100vh - 6.875rem);
5
- display: block;
6
- }
1
+ .document-view-iframe {
2
+ border: none;
3
+ width: 100%;
4
+ height: calc(100vh - 6.875rem);
5
+ display: block;
6
+ }
@@ -1,42 +1,42 @@
1
- .blue-btn-silent {
2
- &:not(:hover):not(:focus):not(:active) {
3
- border-color: transparent;
4
- color: inherit;
5
- }
6
- }
7
-
8
- @media (hover: hover) {
9
- .blue-d-hover {
10
- &:not(:hover):not(:focus):not(:active):not(.active) {
11
- .blue-d-hover-content-active {
12
- display: none;
13
- }
14
- }
15
-
16
- &:hover,
17
- &:focus,
18
- &:active,
19
- &.active {
20
- .blue-d-hover-content-default {
21
- display: none;
22
- }
23
- }
24
- }
25
-
26
- .blue-opacity-hover {
27
- &:not(:hover):not(:focus):not(:active):not(.active) {
28
- .blue-opacity-hover-content-active {
29
- opacity: 0;
30
- }
31
- }
32
-
33
- &:hover,
34
- &:focus,
35
- &:active,
36
- &.active {
37
- .blue-opacity-hover-content-default {
38
- opacity: 0;
39
- }
40
- }
41
- }
42
- }
1
+ .blue-btn-silent {
2
+ &:not(:hover):not(:focus):not(:active) {
3
+ border-color: transparent;
4
+ color: inherit;
5
+ }
6
+ }
7
+
8
+ @media (hover: hover) {
9
+ .blue-d-hover {
10
+ &:not(:hover):not(:focus):not(:active):not(.active) {
11
+ .blue-d-hover-content-active {
12
+ display: none;
13
+ }
14
+ }
15
+
16
+ &:hover,
17
+ &:focus,
18
+ &:active,
19
+ &.active {
20
+ .blue-d-hover-content-default {
21
+ display: none;
22
+ }
23
+ }
24
+ }
25
+
26
+ .blue-opacity-hover {
27
+ &:not(:hover):not(:focus):not(:active):not(.active) {
28
+ .blue-opacity-hover-content-active {
29
+ opacity: 0;
30
+ }
31
+ }
32
+
33
+ &:hover,
34
+ &:focus,
35
+ &:active,
36
+ &.active {
37
+ .blue-opacity-hover-content-default {
38
+ opacity: 0;
39
+ }
40
+ }
41
+ }
42
+ }
@@ -1,18 +1,18 @@
1
- body {
2
- overflow: hidden;
3
- }
4
-
5
- .router-page {
6
- /* This is nessesary, because scrolling on iOS devices would not be smooth without it */
7
- -webkit-overflow-scrolling: touch;
8
-
9
- overflow-y: scroll;
10
- overflow-x: hidden;
11
- position: absolute;
12
- width: 100vw;
13
- height: 100vh;
14
-
15
- &:not(.active) {
16
- display: none;
17
- }
18
- }
1
+ body {
2
+ overflow: hidden;
3
+ }
4
+
5
+ .router-page {
6
+ /* This is nessesary, because scrolling on iOS devices would not be smooth without it */
7
+ -webkit-overflow-scrolling: touch;
8
+
9
+ overflow-y: scroll;
10
+ overflow-x: hidden;
11
+ position: absolute;
12
+ width: 100vw;
13
+ height: 100vh;
14
+
15
+ &:not(.active) {
16
+ display: none;
17
+ }
18
+ }
@@ -1,21 +1,21 @@
1
- $width: 2.188rem;
2
- $height: 1.25rem;
3
- $padding: 0.188rem;
4
-
5
- $switch-active-color: $success;
6
-
7
- .switch {
8
- @include switch();
9
-
10
- &.lg {
11
- @include switch(100px, 30px);
12
- }
13
- }
14
-
15
- /* Rounded sliders */
16
- .slider.round {
17
- border-radius: $height;
18
- }
19
- .slider.round:before {
20
- border-radius: 50%;
21
- }
1
+ $width: 2.188rem;
2
+ $height: 1.25rem;
3
+ $padding: 0.188rem;
4
+
5
+ $switch-active-color: $success;
6
+
7
+ .switch {
8
+ @include switch();
9
+
10
+ &.lg {
11
+ @include switch(100px, 30px);
12
+ }
13
+ }
14
+
15
+ /* Rounded sliders */
16
+ .slider.round {
17
+ border-radius: $height;
18
+ }
19
+ .slider.round:before {
20
+ border-radius: 50%;
21
+ }