blue-react 7.8.0-next.1 → 7.8.2

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.
@@ -1,68 +1,68 @@
1
- @mixin show-action-menu-again() {
2
- max-height: initial;
3
- overflow: initial;
4
-
5
- .blue-app-actions-menu {
6
- max-width: initial;
7
- }
8
- }
9
-
10
- @mixin actions($breakpoint) {
11
- @media screen and (max-width: $breakpoint + 1px) {
12
- &.open {
13
- --action-link-bg-color: #{darken($theme, 30%)};
14
-
15
- display: block;
16
- background-color: var(--action-link-bg-color);
17
- width: 100%;
18
- position: absolute;
19
- z-index: 1;
20
- left: 0;
21
- top: 0;
22
- box-shadow: 0.6rem 6rem 6rem rgba(0, 0, 0, 0.3);
23
- animation: fadeInDown 0.5s;
24
-
25
- @include show-action-menu-again();
26
-
27
- .navbar-nav {
28
- display: flex;
29
- flex-wrap: wrap;
30
- justify-content: center;
31
- flex-direction: row;
32
-
33
- > li {
34
- text-align: center;
35
- height: $actions-height;
36
- display: flex;
37
- align-items: center;
38
- }
39
- }
40
-
41
- .blue-app-actions-menu-item:not(.blue-app-actions-menu-toggle) {
42
- display: flex;
43
- }
44
-
45
- .blue-app-actions-menu {
46
- .blue-app-sidebar-dropdown {
47
- --sidebar-bg: #{darken($theme, 34%)};
48
- }
49
- }
50
- }
51
-
52
- .blue-app-actions-menu-item:not(.blue-app-actions-menu-toggle) {
53
- display: none;
54
- }
55
- }
56
-
57
- @media screen and (min-width: $breakpoint) {
58
- @include show-action-menu-again();
59
-
60
- .blue-app-actions-menu .blue-app-actions-label {
61
- display: inline;
62
- }
63
-
64
- .blue-app-actions-menu-toggle {
65
- display: none;
66
- }
67
- }
68
- }
1
+ @mixin show-action-menu-again() {
2
+ max-height: initial;
3
+ overflow: initial;
4
+
5
+ .blue-app-actions-menu {
6
+ max-width: initial;
7
+ }
8
+ }
9
+
10
+ @mixin actions($breakpoint) {
11
+ @media screen and (max-width: $breakpoint + 1px) {
12
+ &.open {
13
+ --action-link-bg-color: #{darken($theme, 30%)};
14
+
15
+ display: block;
16
+ background-color: var(--action-link-bg-color);
17
+ width: 100%;
18
+ position: absolute;
19
+ z-index: 1;
20
+ left: 0;
21
+ top: 0;
22
+ box-shadow: 0.6rem 6rem 6rem rgba(0, 0, 0, 0.3);
23
+ animation: fadeInDown 0.5s;
24
+
25
+ @include show-action-menu-again();
26
+
27
+ .navbar-nav {
28
+ display: flex;
29
+ flex-wrap: wrap;
30
+ justify-content: center;
31
+ flex-direction: row;
32
+
33
+ > li {
34
+ text-align: center;
35
+ height: $actions-height;
36
+ display: flex;
37
+ align-items: center;
38
+ }
39
+ }
40
+
41
+ .blue-app-actions-menu-item:not(.blue-app-actions-menu-toggle) {
42
+ display: flex;
43
+ }
44
+
45
+ .blue-app-actions-menu {
46
+ .blue-app-sidebar-dropdown {
47
+ --sidebar-bg: #{darken($theme, 34%)};
48
+ }
49
+ }
50
+ }
51
+
52
+ .blue-app-actions-menu-item:not(.blue-app-actions-menu-toggle) {
53
+ display: none;
54
+ }
55
+ }
56
+
57
+ @media screen and (min-width: $breakpoint) {
58
+ @include show-action-menu-again();
59
+
60
+ .blue-app-actions-menu .blue-app-actions-label {
61
+ display: inline;
62
+ }
63
+
64
+ .blue-app-actions-menu-toggle {
65
+ display: none;
66
+ }
67
+ }
68
+ }
@@ -1,55 +1,55 @@
1
- @mixin actions-break($width) {
2
- @media screen and (max-width: $width) {
3
- top: 0;
4
- border-radius: $blue-actions-indicator-height / 2;
5
- box-shadow: $box-shadow;
6
- background-color: $header-bg;
7
-
8
- .blue-actions-controls {
9
- & > * {
10
- margin-top: $spacer / 2;
11
- margin-bottom: $spacer / 2;
12
- }
13
- }
14
-
15
- &.open {
16
- flex-direction: column;
17
- }
18
-
19
- &.closed {
20
- @include header-bg();
21
-
22
- .blue-actions-controls {
23
- display: none;
24
- }
25
- }
26
- }
27
-
28
- @media screen and (min-width: $width) {
29
- top: 0;
30
-
31
- .blue-actions-controls {
32
- background: transparent;
33
- display: flex;
34
- margin-left: -$spacer / 2;
35
- margin-right: -$spacer / 2;
36
- padding-right: $spacer;
37
-
38
- & > * {
39
- margin-left: $spacer / 2;
40
- margin-right: $spacer / 2;
41
- }
42
- }
43
-
44
- .blue-app-sidebar-btn {
45
- margin-top: 0;
46
- margin-bottom: 0;
47
- }
48
- }
49
- }
50
-
51
- @mixin has-actions($width) {
52
- @media screen and (max-width: $width) {
53
- padding-bottom: calc(5.25rem + 1rem);
54
- }
55
- }
1
+ @mixin actions-break($width) {
2
+ @media screen and (max-width: $width) {
3
+ top: 0;
4
+ border-radius: $blue-actions-indicator-height / 2;
5
+ box-shadow: $box-shadow;
6
+ background-color: $header-bg;
7
+
8
+ .blue-actions-controls {
9
+ & > * {
10
+ margin-top: $spacer / 2;
11
+ margin-bottom: $spacer / 2;
12
+ }
13
+ }
14
+
15
+ &.open {
16
+ flex-direction: column;
17
+ }
18
+
19
+ &.closed {
20
+ @include header-bg();
21
+
22
+ .blue-actions-controls {
23
+ display: none;
24
+ }
25
+ }
26
+ }
27
+
28
+ @media screen and (min-width: $width) {
29
+ top: 0;
30
+
31
+ .blue-actions-controls {
32
+ background: transparent;
33
+ display: flex;
34
+ margin-left: -$spacer / 2;
35
+ margin-right: -$spacer / 2;
36
+ padding-right: $spacer;
37
+
38
+ & > * {
39
+ margin-left: $spacer / 2;
40
+ margin-right: $spacer / 2;
41
+ }
42
+ }
43
+
44
+ .blue-app-sidebar-btn {
45
+ margin-top: 0;
46
+ margin-bottom: 0;
47
+ }
48
+ }
49
+ }
50
+
51
+ @mixin has-actions($width) {
52
+ @media screen and (max-width: $width) {
53
+ padding-bottom: calc(5.25rem + 1rem);
54
+ }
55
+ }
@@ -1,142 +1,142 @@
1
- @mixin openSidebarMenu() {
2
- .blue-app-sidebar-hidden-on-open {
3
- display: none;
4
- }
5
-
6
- .blue-app-sidebar-visible-on-open {
7
- animation: fade-in 1s;
8
- display: flex;
9
- }
10
-
11
- .blue-app-sidebar-label {
12
- display: inline-block;
13
- }
14
-
15
- .blue-app-sidebar {
16
- z-index: 42;
17
- box-shadow: 0.6rem 6rem 6rem rgba(0, 0, 0, 0.4);
18
- // background-color: darken($theme, 30%);
19
- }
20
-
21
- .blue-app-sidebar,
22
- .blue-app-sidebar .blue-app-sidebar-btn {
23
- width: $bla-sidebar-width;
24
- }
25
-
26
- .blue-app-sidebar .blue-app-sidebar-btn {
27
- & > * {
28
- width: auto;
29
- }
30
- }
31
-
32
- .blue-app-sub-sidebar {
33
- left: $bla-sidebar-width;
34
- }
35
-
36
- .blue-app-sidebar-dropdown-caret.caret {
37
- display: flex;
38
- }
39
-
40
- .blue-app-sidebar-dropdown {
41
- .blue-app-sidebar-btn {
42
- width: 100%;
43
- }
44
- }
45
-
46
- /* search */
47
- .blue-app-search {
48
- background-color: $sidebar-search-bg;
49
- }
50
-
51
- .blue-app-search-btn {
52
- display: none;
53
- }
54
-
55
- .blue-app-search-input-group {
56
- display: flex;
57
- align-items: center;
58
- }
59
-
60
- .blue-app-header-logo.sidebar {
61
- transform: translateX(0);
62
- }
63
- }
64
-
65
- @mixin blue-app-sidebar($width) {
66
- .blue-app-sidebar-btn {
67
- color: $sidebar-color;
68
- width: $normal-size;
69
- height: $normal-size;
70
- padding: 0.25rem 0.75rem;
71
- font-size: $bla-btn-font-size;
72
- display: flex;
73
- align-items: center;
74
- border-color: transparent;
75
- @include slide-transition();
76
-
77
- &:hover,
78
- &:active {
79
- color: $sidebar-color;
80
- background-color: $sidebar-control-bg-hover !important;
81
- border-color: transparent;
82
- }
83
-
84
- &.active::before {
85
- content: "";
86
- position: absolute;
87
- top: 0.625rem;
88
- bottom: 0.625rem;
89
- left: 0;
90
- width: 0.25rem;
91
- background-color: $sidebar-indicator-color;
92
- border-top-right-radius: 1rem;
93
- border-bottom-right-radius: 1rem;
94
- animation: sidebar-menu-item-indicator-in 0.2s ease-in-out;
95
- }
96
-
97
- & > * + .blue-app-sidebar-label {
98
- margin-left: 0.5rem;
99
- }
100
- }
101
-
102
- .blue-app-sidebar {
103
- width: $width;
104
- color: $sidebar-color;
105
- background: var(--sidebar-bg);
106
- position: fixed;
107
- left: 0;
108
- top: $normal-size;
109
- bottom: 0;
110
- z-index: 3;
111
- display: flex;
112
- flex-direction: column;
113
- @include slide-transition();
114
-
115
- .blue-app-menu {
116
- overflow-y: auto;
117
- flex: 1;
118
- @include scroll-shadow(var(--sidebar-bg), $sidebar-bg);
119
- }
120
-
121
- &:hover {
122
- .blue-app-sidebar-btn {
123
- background-color: var(--sidebar-bg);
124
- }
125
- }
126
-
127
- .blue-app-sidebar-btn {
128
- & > * {
129
- width: 100%;
130
- }
131
- }
132
- }
133
- }
134
-
135
- @keyframes sidebar-menu-item-indicator-in {
136
- from {
137
- transform: translateX(-100%);
138
- }
139
- to {
140
- transform: translateX(1);
141
- }
142
- }
1
+ @mixin openSidebarMenu() {
2
+ .blue-app-sidebar-hidden-on-open {
3
+ display: none;
4
+ }
5
+
6
+ .blue-app-sidebar-visible-on-open {
7
+ animation: fade-in 1s;
8
+ display: flex;
9
+ }
10
+
11
+ .blue-app-sidebar-label {
12
+ display: inline-block;
13
+ }
14
+
15
+ .blue-app-sidebar {
16
+ z-index: 42;
17
+ box-shadow: 0.6rem 6rem 6rem rgba(0, 0, 0, 0.4);
18
+ // background-color: darken($theme, 30%);
19
+ }
20
+
21
+ .blue-app-sidebar,
22
+ .blue-app-sidebar .blue-app-sidebar-btn {
23
+ width: $bla-sidebar-width;
24
+ }
25
+
26
+ .blue-app-sidebar .blue-app-sidebar-btn {
27
+ & > * {
28
+ width: auto;
29
+ }
30
+ }
31
+
32
+ .blue-app-sub-sidebar {
33
+ left: $bla-sidebar-width;
34
+ }
35
+
36
+ .blue-app-sidebar-dropdown-caret.caret {
37
+ display: flex;
38
+ }
39
+
40
+ .blue-app-sidebar-dropdown {
41
+ .blue-app-sidebar-btn {
42
+ width: 100%;
43
+ }
44
+ }
45
+
46
+ /* search */
47
+ .blue-app-search {
48
+ background-color: $sidebar-search-bg;
49
+ }
50
+
51
+ .blue-app-search-btn {
52
+ display: none;
53
+ }
54
+
55
+ .blue-app-search-input-group {
56
+ display: flex;
57
+ align-items: center;
58
+ }
59
+
60
+ .blue-app-header-logo.sidebar {
61
+ transform: translateX(0);
62
+ }
63
+ }
64
+
65
+ @mixin blue-app-sidebar($width) {
66
+ .blue-app-sidebar-btn {
67
+ color: $sidebar-color;
68
+ width: $normal-size;
69
+ height: $normal-size;
70
+ padding: 0.25rem 0.75rem;
71
+ font-size: $bla-btn-font-size;
72
+ display: flex;
73
+ align-items: center;
74
+ border-color: transparent;
75
+ @include slide-transition();
76
+
77
+ &:hover,
78
+ &:active {
79
+ color: $sidebar-color;
80
+ background-color: $sidebar-control-bg-hover !important;
81
+ border-color: transparent;
82
+ }
83
+
84
+ &.active::before {
85
+ content: "";
86
+ position: absolute;
87
+ top: 0.625rem;
88
+ bottom: 0.625rem;
89
+ left: 0;
90
+ width: 0.25rem;
91
+ background-color: $sidebar-indicator-color;
92
+ border-top-right-radius: 1rem;
93
+ border-bottom-right-radius: 1rem;
94
+ animation: sidebar-menu-item-indicator-in 0.2s ease-in-out;
95
+ }
96
+
97
+ & > * + .blue-app-sidebar-label {
98
+ margin-left: 0.5rem;
99
+ }
100
+ }
101
+
102
+ .blue-app-sidebar {
103
+ width: $width;
104
+ color: $sidebar-color;
105
+ background: var(--sidebar-bg);
106
+ position: fixed;
107
+ left: 0;
108
+ top: $normal-size;
109
+ bottom: 0;
110
+ z-index: 3;
111
+ display: flex;
112
+ flex-direction: column;
113
+ @include slide-transition();
114
+
115
+ .blue-app-menu {
116
+ overflow-y: auto;
117
+ flex: 1;
118
+ @include scroll-shadow(var(--sidebar-bg), $sidebar-bg);
119
+ }
120
+
121
+ &:hover {
122
+ .blue-app-sidebar-btn {
123
+ background-color: var(--sidebar-bg);
124
+ }
125
+ }
126
+
127
+ .blue-app-sidebar-btn {
128
+ & > * {
129
+ width: 100%;
130
+ }
131
+ }
132
+ }
133
+ }
134
+
135
+ @keyframes sidebar-menu-item-indicator-in {
136
+ from {
137
+ transform: translateX(-100%);
138
+ }
139
+ to {
140
+ transform: translateX(1);
141
+ }
142
+ }
@@ -7,6 +7,7 @@ export interface DropdownMenuItemProps {
7
7
  children?: any;
8
8
  }
9
9
  /**
10
+ * @deprecated Use nested `MenuItem`s instead.
10
11
  * Dropdown with button for sidebar.
11
12
  */
12
13
  export default function DropdownMenuItem(props: DropdownMenuItemProps): JSX.Element;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "blue-react",
3
- "version": "7.8.0-next.1",
3
+ "version": "7.8.2",
4
4
  "description": "Blue React Components",
5
5
  "license": "LGPL-3.0-or-later",
6
6
  "main": "index.js",
@@ -85,4 +85,4 @@
85
85
  "last 1 safari version"
86
86
  ]
87
87
  }
88
- }
88
+ }