blue-web 1.7.0 → 1.8.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/js/side-layout.bundle.js +1 -1
- package/dist/js/side-layout.js +1 -1
- package/dist/legacy-styles/mixins/_sidebar.scss +0 -2
- package/dist/style.css +86 -123
- package/dist/style.css.map +1 -1
- package/dist/style.min.css +4 -4
- package/dist/style.scss +2 -1
- package/dist/styles/_action-menu.scss +14 -16
- package/dist/styles/_bootstrap-variables.scss +9 -0
- package/dist/styles/_menu-item.scss +5 -6
- package/dist/styles/_variables.scss +6 -1
- package/dist/styles/mixins/_action-menu.scss +9 -17
- package/package.json +7 -6
package/dist/style.scss
CHANGED
|
@@ -1,9 +1,10 @@
|
|
|
1
1
|
/*!
|
|
2
|
-
* Blue Web v1.
|
|
2
|
+
* Blue Web v1.8.0 (https://bruegmann.github.io/blue-web)
|
|
3
3
|
* Licensed under GNU General Public License v3.0 (https://github.com/bruegmann/blue-web/blob/master/LICENSE).
|
|
4
4
|
*/
|
|
5
5
|
|
|
6
6
|
@import "./styles/bootstrap-variables";
|
|
7
|
+
|
|
7
8
|
@import "node_modules/bootstrap/scss/functions";
|
|
8
9
|
@import "node_modules/bootstrap/scss/variables";
|
|
9
10
|
@import "./styles/variables";
|
|
@@ -1,6 +1,11 @@
|
|
|
1
1
|
.blue-actions {
|
|
2
|
+
--max-width: calc(
|
|
3
|
+
var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-x, 0.75rem) +
|
|
4
|
+
(var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) + var(--bs-btn-padding-x, 0.75rem) +
|
|
5
|
+
var(--bs-btn-border-width, 1px)
|
|
6
|
+
);
|
|
7
|
+
|
|
2
8
|
display: inline;
|
|
3
|
-
position: absolute;
|
|
4
9
|
left: 0;
|
|
5
10
|
right: 0;
|
|
6
11
|
top: 0;
|
|
@@ -9,20 +14,15 @@
|
|
|
9
14
|
overflow: hidden;
|
|
10
15
|
|
|
11
16
|
.blue-actions-menu {
|
|
12
|
-
max-width:
|
|
17
|
+
max-width: var(--max-width);
|
|
18
|
+
& > .blue-menu-item-wrapper {
|
|
19
|
+
display: block;
|
|
20
|
+
position: relative;
|
|
21
|
+
}
|
|
13
22
|
}
|
|
14
23
|
|
|
15
24
|
&.open {
|
|
16
|
-
|
|
17
|
-
width: calc(100% + #{$normal-size});
|
|
18
|
-
}
|
|
19
|
-
|
|
20
|
-
.navbar-nav > li > a {
|
|
21
|
-
animation: fadeInDown 0.5s;
|
|
22
|
-
|
|
23
|
-
@media (prefers-reduced-motion) {
|
|
24
|
-
animation-duration: 0s;
|
|
25
|
-
}
|
|
25
|
+
background-color: var(--blue-menu-item-dropdown-bg);
|
|
26
26
|
}
|
|
27
27
|
|
|
28
28
|
&.none {
|
|
@@ -60,10 +60,8 @@
|
|
|
60
60
|
}
|
|
61
61
|
}
|
|
62
62
|
|
|
63
|
-
.blue-actions-menu-toggle {
|
|
64
|
-
|
|
65
|
-
transform: rotate(90deg);
|
|
66
|
-
}
|
|
63
|
+
.blue-actions-menu-toggle > span:first-child {
|
|
64
|
+
transform: rotate(90deg);
|
|
67
65
|
}
|
|
68
66
|
|
|
69
67
|
.blue-actions-menu-item {
|
|
@@ -3,6 +3,15 @@ $light: #ecedf0 !default;
|
|
|
3
3
|
// Components
|
|
4
4
|
//
|
|
5
5
|
|
|
6
|
+
$font-size-base: 1rem !default;
|
|
7
|
+
|
|
8
|
+
$h1-font-size: $font-size-base * 2 !default;
|
|
9
|
+
$h2-font-size: $font-size-base * 1.5 !default;
|
|
10
|
+
$h3-font-size: $font-size-base * 1.25 !default;
|
|
11
|
+
$h4-font-size: $font-size-base * 1.125 !default;
|
|
12
|
+
$h5-font-size: $font-size-base * 1.1 !default;
|
|
13
|
+
$h6-font-size: $font-size-base !default;
|
|
14
|
+
|
|
6
15
|
$border-radius: 0.5rem !default;
|
|
7
16
|
$border-radius-lg: 0.7rem !default;
|
|
8
17
|
$border-radius-sm: 0.3rem !default;
|
|
@@ -23,7 +23,6 @@
|
|
|
23
23
|
transition: none !important;
|
|
24
24
|
}
|
|
25
25
|
|
|
26
|
-
padding: 0.5rem 0.75rem;
|
|
27
26
|
border: none;
|
|
28
27
|
|
|
29
28
|
&:focus {
|
|
@@ -80,6 +79,7 @@
|
|
|
80
79
|
border-radius: $border-radius;
|
|
81
80
|
box-shadow: $box-shadow;
|
|
82
81
|
border: 1px solid color-mix(in srgb, currentColor 15%, transparent);
|
|
82
|
+
background-color: var(--blue-menu-item-dropdown-bg);
|
|
83
83
|
}
|
|
84
84
|
}
|
|
85
85
|
|
|
@@ -155,7 +155,6 @@
|
|
|
155
155
|
color: inherit;
|
|
156
156
|
width: auto;
|
|
157
157
|
height: $normal-size;
|
|
158
|
-
padding: 0.25rem 0.75rem;
|
|
159
158
|
font-size: $bla-btn-font-size;
|
|
160
159
|
display: flex;
|
|
161
160
|
align-items: center;
|
|
@@ -165,10 +164,10 @@
|
|
|
165
164
|
&::before {
|
|
166
165
|
content: "";
|
|
167
166
|
position: absolute;
|
|
168
|
-
top: 0.
|
|
169
|
-
right: 0.
|
|
170
|
-
bottom: 0.
|
|
171
|
-
left: 0.
|
|
167
|
+
top: 0.125rem;
|
|
168
|
+
right: 0.125rem;
|
|
169
|
+
bottom: 0.125rem;
|
|
170
|
+
left: 0.125rem;
|
|
172
171
|
background-color: currentColor;
|
|
173
172
|
border-radius: $border-radius;
|
|
174
173
|
transform: scale(0.9);
|
|
@@ -30,7 +30,11 @@ $scrollbar-thumb-color: white !default;
|
|
|
30
30
|
$scrollbar-thumb-color-rgb: red($scrollbar-thumb-color), green($scrollbar-thumb-color), blue($scrollbar-thumb-color) !default;
|
|
31
31
|
|
|
32
32
|
// Default size for many components, like sidebar menu items.
|
|
33
|
-
$normal-size:
|
|
33
|
+
$normal-size: calc(
|
|
34
|
+
var(--bs-btn-border-width, 1px) + var(--bs-btn-padding-y, 0.375rem) +
|
|
35
|
+
(var(--bs-btn-font-size, 1rem) * var(--bs-btn-line-height, 1.5)) + var(--bs-btn-padding-y, 0.375rem) +
|
|
36
|
+
var(--bs-btn-border-width, 1px)
|
|
37
|
+
) !default;
|
|
34
38
|
|
|
35
39
|
// Height of actions menu when it is expanded, like on mobile devices.
|
|
36
40
|
$actions-height: 7.5rem !default;
|
|
@@ -129,4 +133,5 @@ $sidebar-expanded-breakpoint: 1400px !default;
|
|
|
129
133
|
--blue-header-color: #{$header-color};
|
|
130
134
|
--blue-action-link-bg-color: var(--blue-theme);
|
|
131
135
|
--blue-menu-item-indicator-bg: #{$sidebar-indicator-color};
|
|
136
|
+
--blue-menu-item-height: #{$normal-size};
|
|
132
137
|
}
|
|
@@ -8,10 +8,9 @@
|
|
|
8
8
|
}
|
|
9
9
|
|
|
10
10
|
@mixin actions($breakpoint) {
|
|
11
|
-
@media
|
|
11
|
+
@media (max-width: #{$breakpoint + 1px}) {
|
|
12
12
|
&.open {
|
|
13
13
|
display: block;
|
|
14
|
-
background-color: var(--blue-header-depth-1-bg, #{darken($theme, 30%)});
|
|
15
14
|
width: auto;
|
|
16
15
|
position: absolute;
|
|
17
16
|
z-index: 1;
|
|
@@ -28,25 +27,12 @@
|
|
|
28
27
|
|
|
29
28
|
@include show-action-menu-again();
|
|
30
29
|
|
|
31
|
-
.navbar-nav {
|
|
32
|
-
display: flex;
|
|
33
|
-
flex-wrap: wrap;
|
|
34
|
-
justify-content: center;
|
|
35
|
-
flex-direction: column;
|
|
36
|
-
|
|
37
|
-
> li {
|
|
38
|
-
text-align: center;
|
|
39
|
-
height: $actions-height;
|
|
40
|
-
display: flex;
|
|
41
|
-
align-items: center;
|
|
42
|
-
}
|
|
43
|
-
}
|
|
44
|
-
|
|
45
30
|
.blue-actions-menu-item:not(.blue-actions-menu-toggle) {
|
|
46
31
|
display: flex;
|
|
47
32
|
}
|
|
48
33
|
|
|
49
34
|
.blue-actions-menu {
|
|
35
|
+
flex-direction: column;
|
|
50
36
|
.blue-menu-item-dropdown {
|
|
51
37
|
--blue-sidebar-bg: #{darken($theme, 34%)};
|
|
52
38
|
}
|
|
@@ -58,7 +44,7 @@
|
|
|
58
44
|
}
|
|
59
45
|
}
|
|
60
46
|
|
|
61
|
-
@media
|
|
47
|
+
@media (min-width: $breakpoint) {
|
|
62
48
|
@include show-action-menu-again();
|
|
63
49
|
|
|
64
50
|
.blue-actions-menu .blue-actions-label {
|
|
@@ -68,5 +54,11 @@
|
|
|
68
54
|
.blue-actions-menu-toggle {
|
|
69
55
|
display: none;
|
|
70
56
|
}
|
|
57
|
+
|
|
58
|
+
.blue-actions-menu > .blue-menu-item-wrapper > .blue-menu-item-dropdown,
|
|
59
|
+
.blue-actions-menu > .blue-menu-item-wrapper > * > .blue-menu-item-dropdown {
|
|
60
|
+
position: absolute;
|
|
61
|
+
right: 0;
|
|
62
|
+
}
|
|
71
63
|
}
|
|
72
64
|
}
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "blue-web",
|
|
3
|
-
"version": "1.
|
|
3
|
+
"version": "1.8.0",
|
|
4
4
|
"description": "UI components built on top of Bootstrap 5",
|
|
5
5
|
"license": "LGPL-3.0-or-later",
|
|
6
6
|
"homepage": "https://bruegmann.github.io/blue-web/v1",
|
|
@@ -12,8 +12,8 @@
|
|
|
12
12
|
"url": "https://github.com/bruegmann/blue-react/issues"
|
|
13
13
|
},
|
|
14
14
|
"scripts": {
|
|
15
|
-
"start": "
|
|
16
|
-
"build-docs": "
|
|
15
|
+
"start": "craco start",
|
|
16
|
+
"build-docs": "craco build && node indexCssSections.js && node indexJsSections.js",
|
|
17
17
|
"build-types": "tsc --declaration --emitDeclarationOnly --declarationDir ./dist/js --noEmit false --project tsconfig.build.json",
|
|
18
18
|
"build": "babel ./src/js --out-dir ./dist/js --extensions \".tsx,.js,.ts\"",
|
|
19
19
|
"build-bundles": "webpack",
|
|
@@ -22,8 +22,8 @@
|
|
|
22
22
|
"build-neu-css-legacy": "node-sass ./dist/neu.scss ./dist/neu.css && npx postcss ./dist/neu.css --use autoprefixer -r && npx postcss ./dist/neu.css --use postcss-minify -o ./dist/neu.min.css",
|
|
23
23
|
"build-neu-css": "sass --load-path=. ./dist/neu.scss:./dist/neu.css && npx postcss ./dist/neu.css --use autoprefixer -r && npx postcss ./dist/neu.css --use postcss-minify -o ./dist/neu.min.css",
|
|
24
24
|
"build-release": "npm run build-types && npm run build && npm run build-bundles && npm run build-css",
|
|
25
|
-
"test": "
|
|
26
|
-
"eject": "
|
|
25
|
+
"test": "craco test",
|
|
26
|
+
"eject": "craco eject",
|
|
27
27
|
"predeploy": "npm run build-docs",
|
|
28
28
|
"deploy": "gh-pages --dist build --dest v1",
|
|
29
29
|
"prepublishOnly": "npm i && npm run build-release",
|
|
@@ -40,6 +40,7 @@
|
|
|
40
40
|
"@babel/preset-env": "^7.10.4",
|
|
41
41
|
"@babel/preset-react": "^7.10.4",
|
|
42
42
|
"@babel/preset-typescript": "^7.9.0",
|
|
43
|
+
"@craco/craco": "^7.1.0",
|
|
43
44
|
"@testing-library/jest-dom": "^4.2.4",
|
|
44
45
|
"@testing-library/react": "^9.5.0",
|
|
45
46
|
"@testing-library/user-event": "^7.2.1",
|
|
@@ -51,7 +52,7 @@
|
|
|
51
52
|
"@types/react-router-dom": "^5.3.3",
|
|
52
53
|
"@types/react-syntax-highlighter": "^13.5.0",
|
|
53
54
|
"autoprefixer": "^10.3.6",
|
|
54
|
-
"blue-react": "file:../blue-react/blue-react-10.0.0.tgz",
|
|
55
|
+
"blue-react": "file:../blue-react/blue-react-10.0.0-rc5.tgz",
|
|
55
56
|
"gh-pages": "^3.1.0",
|
|
56
57
|
"license-report": "^6.2.0",
|
|
57
58
|
"lint-staged": "^11.1.2",
|