blue-react 8.0.0-next.3 → 8.0.1

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.
Files changed (39) hide show
  1. package/README.md +59 -59
  2. package/dist/components/ActionMenuSwitch.js +2 -2
  3. package/dist/components/BodyRounded.js +41 -41
  4. package/dist/components/Caret.js +2 -2
  5. package/dist/components/DocumentView.js +3 -3
  6. package/dist/components/Grid.js +275 -275
  7. package/dist/components/Header.js +2 -2
  8. package/dist/components/HeaderTitle.js +3 -3
  9. package/dist/components/Intro.js +2 -2
  10. package/dist/components/Layout.js +35 -7
  11. package/dist/components/Outside.js +6 -6
  12. package/dist/components/Page.js +2 -2
  13. package/dist/components/Search.js +1 -1
  14. package/dist/components/SidebarMenu.js +2 -2
  15. package/dist/components/Switch.js +2 -2
  16. package/dist/style.css +9 -10
  17. package/dist/style.min.css +8 -8
  18. package/dist/style.scss +1 -1
  19. package/dist/styles/_action-menu.scss +81 -81
  20. package/dist/styles/_bootstrap-mixins_overwritten.scss +106 -106
  21. package/dist/styles/_bootstrap-optimizations.scss +13 -13
  22. package/dist/styles/_bootstrap-variables.scss +13 -13
  23. package/dist/styles/_bootstrap.scss +56 -56
  24. package/dist/styles/_caret.scss +50 -50
  25. package/dist/styles/_document-view.scss +6 -6
  26. package/dist/styles/_hover.scss +42 -42
  27. package/dist/styles/_keyframes.scss +73 -73
  28. package/dist/styles/_mixins.scss +6 -6
  29. package/dist/styles/_router.scss +18 -18
  30. package/dist/styles/_search.scss +0 -1
  31. package/dist/styles/_switch.scss +21 -21
  32. package/dist/styles/mixins/_action-menu.scss +68 -68
  33. package/dist/styles/mixins/_custom-property.scss +10 -10
  34. package/dist/styles/mixins/_misc.scss +33 -33
  35. package/dist/styles/mixins/_scroll-shadow.scss +9 -9
  36. package/dist/styles/mixins/_sidebar.scss +142 -142
  37. package/dist/styles/mixins/_switch.scss +85 -85
  38. package/dist/types/components/Layout.d.ts +15 -6
  39. package/package.json +88 -88
package/dist/style.scss CHANGED
@@ -1,5 +1,5 @@
1
1
  /*!
2
- * Blue React v8.0.0-next.3 (https://bruegmann.github.io/blue-react)
2
+ * Blue React v8.0.1 (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,81 +1,81 @@
1
- .blue-actions-menu {
2
- .nav-link {
3
- position: relative;
4
- margin-left: 2px;
5
-
6
- background-color: var(--action-link-bg-color);
7
-
8
- &:hover {
9
- background-color: $bla-button-bg-hover;
10
- }
11
- }
12
- }
13
-
14
- .blue-actions {
15
- display: inline;
16
- transition: background-color 0.5s linear;
17
- position: absolute;
18
- left: 0;
19
- right: 0;
20
- top: 0;
21
- padding: 0;
22
- max-height: $normal-size;
23
- overflow: hidden;
24
-
25
- .blue-actions-menu {
26
- max-width: $normal-size;
27
- }
28
-
29
- &.open {
30
- left: -#{$normal-size};
31
- width: calc(100% + #{$normal-size});
32
- }
33
-
34
- .navbar-nav > li > a {
35
- animation: fadeInDown 0.5s;
36
- }
37
-
38
- &.none {
39
- @include actions(0px);
40
- }
41
-
42
- &.sm {
43
- @include actions(768px);
44
- }
45
-
46
- &.md {
47
- @include actions(992px);
48
- }
49
-
50
- &.lg {
51
- @include actions(1200px);
52
- }
53
-
54
- // Support for MenuItems
55
- .blue-menu-item {
56
- width: auto;
57
- margin-top: 0;
58
- margin-bottom: 0;
59
- }
60
-
61
- .blue-menu-item-dropdown-toggle .blue-menu-item-label {
62
- margin-right: 2rem;
63
- }
64
-
65
- .blue-menu-item-label,
66
- .blue-menu-item-dropdown-caret.caret {
67
- display: initial;
68
- }
69
- }
70
-
71
- .blue-actions-menu-toggle {
72
- & > span:first-child {
73
- transform: rotate(90deg);
74
- }
75
- }
76
-
77
- .blue-actions-menu-item {
78
- display: flex;
79
- align-items: center;
80
- color: inherit;
81
- }
1
+ .blue-actions-menu {
2
+ .nav-link {
3
+ position: relative;
4
+ margin-left: 2px;
5
+
6
+ background-color: var(--action-link-bg-color);
7
+
8
+ &:hover {
9
+ background-color: $bla-button-bg-hover;
10
+ }
11
+ }
12
+ }
13
+
14
+ .blue-actions {
15
+ display: inline;
16
+ transition: background-color 0.5s linear;
17
+ position: absolute;
18
+ left: 0;
19
+ right: 0;
20
+ top: 0;
21
+ padding: 0;
22
+ max-height: $normal-size;
23
+ overflow: hidden;
24
+
25
+ .blue-actions-menu {
26
+ max-width: $normal-size;
27
+ }
28
+
29
+ &.open {
30
+ left: -#{$normal-size};
31
+ width: calc(100% + #{$normal-size});
32
+ }
33
+
34
+ .navbar-nav > li > a {
35
+ animation: fadeInDown 0.5s;
36
+ }
37
+
38
+ &.none {
39
+ @include actions(0px);
40
+ }
41
+
42
+ &.sm {
43
+ @include actions(768px);
44
+ }
45
+
46
+ &.md {
47
+ @include actions(992px);
48
+ }
49
+
50
+ &.lg {
51
+ @include actions(1200px);
52
+ }
53
+
54
+ // Support for MenuItems
55
+ .blue-menu-item {
56
+ width: auto;
57
+ margin-top: 0;
58
+ margin-bottom: 0;
59
+ }
60
+
61
+ .blue-menu-item-dropdown-toggle .blue-menu-item-label {
62
+ margin-right: 2rem;
63
+ }
64
+
65
+ .blue-menu-item-label,
66
+ .blue-menu-item-dropdown-caret.caret {
67
+ display: initial;
68
+ }
69
+ }
70
+
71
+ .blue-actions-menu-toggle {
72
+ & > span:first-child {
73
+ transform: rotate(90deg);
74
+ }
75
+ }
76
+
77
+ .blue-actions-menu-item {
78
+ display: flex;
79
+ align-items: center;
80
+ color: inherit;
81
+ }
@@ -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
+ }