blue-web 1.19.1 → 1.21.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.
@@ -1,136 +1,136 @@
1
- @mixin blue-menu-item-background() {
2
- content: "";
3
- position: absolute;
4
- top: 0.125rem;
5
- right: 0.125rem;
6
- bottom: 0.125rem;
7
- left: 0.125rem;
8
- background-color: currentColor;
9
- border-radius: $border-radius;
10
- transform: scale(0.9);
11
- opacity: 0;
12
- transition: all 0.2s;
13
-
14
- @media (prefers-reduced-motion) {
15
- transition: none;
16
- }
17
- }
18
-
19
- @mixin blue-menu-item-indicator() {
20
- content: "";
21
- position: absolute;
22
- top: 0.625rem;
23
- bottom: 0.625rem;
24
- left: 0.125rem;
25
- right: initial;
26
- width: 0.25rem;
27
- height: auto;
28
- background-color: var(--blue-menu-item-indicator-bg);
29
- border-radius: 1rem;
30
- animation: blue-menu-item-indicator-in-from-side 0.2s ease-in-out;
31
-
32
- @media (prefers-reduced-motion) {
33
- animation-duration: 0s;
34
- }
35
- }
36
-
37
- @mixin blue-menu-item-indicator-horizontal() {
38
- top: initial;
39
- bottom: 0.125rem;
40
- left: 0.625rem;
41
- right: 0.625rem;
42
- width: auto;
43
- height: 0.25rem;
44
- animation: blue-menu-item-indicator-in-from-below 0.2s ease-in-out;
45
-
46
- @media (prefers-reduced-motion) {
47
- animation-duration: 0s;
48
- }
49
- }
50
-
51
- @mixin blue-menu-item-dropdown-for-shrunk-sidebar() {
52
- & > .blue-menu-item-wrapper {
53
- display: block;
54
- position: relative;
55
-
56
- &:not(:has(.blue-menu-item-dropdown)) > .blue-menu-item:hover {
57
- .blue-menu-item-label {
58
- &::before,
59
- & {
60
- animation: tips-horz 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
61
-
62
- @media (prefers-reduced-motion) {
63
- animation-duration: 0s;
64
- }
65
- }
66
-
67
- &::before {
68
- content: "";
69
- display: block;
70
- position: absolute;
71
- border: 5px solid transparent;
72
- z-index: 1001;
73
-
74
- top: 50%;
75
- border-left-width: 0;
76
- border-right-color: var(--bs-tooltip-bg, #353539);
77
- left: calc(0em - 5px);
78
- transform: translate(0.5em, -50%);
79
- opacity: 0;
80
- }
81
-
82
- display: block;
83
- text-transform: none;
84
- line-height: 1;
85
- font-size: 0.9em;
86
- -webkit-user-select: none;
87
- user-select: none;
88
- pointer-events: none;
89
- position: absolute;
90
- font-family: var(--bs-font-sans-serif);
91
- text-align: center;
92
- min-width: 3em;
93
- max-width: var(--bs-tooltip-max-width, 21em);
94
- padding: var(--bs-tooltip-padding-y, 1ch) var(--bs-tooltip-padding-x, 1.5ch);
95
- border-radius: var(--bs-tooltip-border-radius, 0.3em);
96
- box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
97
- background: var(--bs-tooltip-bg, #353539);
98
- color: var(--bs-tooltip-color, #fff);
99
- z-index: 1000;
100
- width: auto;
101
- top: 50%;
102
- left: calc(100% + 5px);
103
- transform: translate(-0.5em, -50%);
104
- overflow: visible;
105
- opacity: 0;
106
- }
107
- }
108
-
109
- & > .blue-menu-item-dropdown,
110
- & > .blue-outside > .blue-menu-item-dropdown {
111
- @extend .ms-1;
112
- @extend .rounded;
113
- @extend .shadow;
114
- @extend .blue-menu-item-dropdown-from-start;
115
-
116
- position: absolute;
117
- top: 0;
118
- width: $bla-sidebar-width;
119
- left: $normal-size;
120
- max-height: calc(100vh - (var(--offset-top, 0px) + 1rem));
121
- overflow-y: auto;
122
- overflow-x: hidden;
123
- background-color: var(--blue-sidebar-bg);
124
-
125
- &::before {
126
- content: none;
127
- }
128
- }
129
-
130
- &:has(.blue-menu-item-dropdown) {
131
- & > .blue-menu-item {
132
- @extend .highlighted;
133
- }
134
- }
135
- }
136
- }
1
+ @mixin blue-menu-item-background() {
2
+ content: "";
3
+ position: absolute;
4
+ top: 0.125rem;
5
+ right: 0.125rem;
6
+ bottom: 0.125rem;
7
+ left: 0.125rem;
8
+ background-color: currentColor;
9
+ border-radius: $border-radius;
10
+ transform: scale(0.9);
11
+ opacity: 0;
12
+ transition: all 0.2s;
13
+
14
+ @media (prefers-reduced-motion) {
15
+ transition: none;
16
+ }
17
+ }
18
+
19
+ @mixin blue-menu-item-indicator() {
20
+ content: "";
21
+ position: absolute;
22
+ top: 0.625rem;
23
+ bottom: 0.625rem;
24
+ left: 0.125rem;
25
+ right: initial;
26
+ width: 3px;
27
+ height: auto;
28
+ background-color: var(--blue-menu-item-indicator-bg);
29
+ border-radius: 1rem;
30
+ animation: blue-menu-item-indicator-in-from-side 0.2s ease-in-out;
31
+
32
+ @media (prefers-reduced-motion) {
33
+ animation-duration: 0s;
34
+ }
35
+ }
36
+
37
+ @mixin blue-menu-item-indicator-horizontal() {
38
+ top: initial;
39
+ bottom: 0.125rem;
40
+ left: 50%;
41
+ transform: translateX(-50%);
42
+ width: 2em;
43
+ height: 3px;
44
+ animation: blue-menu-item-indicator-in-from-below 0.2s ease-in-out;
45
+
46
+ @media (prefers-reduced-motion) {
47
+ animation-duration: 0s;
48
+ }
49
+ }
50
+
51
+ @mixin blue-menu-item-dropdown-for-shrunk-sidebar() {
52
+ & > .blue-menu-item-wrapper {
53
+ display: block;
54
+ position: relative;
55
+
56
+ &:not(:has(.blue-menu-item-dropdown)) > .blue-menu-item:hover {
57
+ .blue-menu-item-label {
58
+ &::before,
59
+ & {
60
+ animation: tips-horz 150ms cubic-bezier(0.5, 0, 0.6, 1.3) 1ms forwards;
61
+
62
+ @media (prefers-reduced-motion) {
63
+ animation-duration: 0s;
64
+ }
65
+ }
66
+
67
+ &::before {
68
+ content: "";
69
+ display: block;
70
+ position: absolute;
71
+ border: 5px solid transparent;
72
+ z-index: 1001;
73
+
74
+ top: 50%;
75
+ border-left-width: 0;
76
+ border-right-color: var(--bs-tooltip-bg, #353539);
77
+ left: calc(0em - 5px);
78
+ transform: translate(0.5em, -50%);
79
+ opacity: 0;
80
+ }
81
+
82
+ display: block;
83
+ text-transform: none;
84
+ line-height: 1;
85
+ font-size: 0.9em;
86
+ -webkit-user-select: none;
87
+ user-select: none;
88
+ pointer-events: none;
89
+ position: absolute;
90
+ font-family: var(--bs-font-sans-serif);
91
+ text-align: center;
92
+ min-width: 3em;
93
+ max-width: var(--bs-tooltip-max-width, 21em);
94
+ padding: var(--bs-tooltip-padding-y, 1ch) var(--bs-tooltip-padding-x, 1.5ch);
95
+ border-radius: var(--bs-tooltip-border-radius, 0.3em);
96
+ box-shadow: 0 1em 2em -0.5em rgba(0, 0, 0, 0.35);
97
+ background: var(--bs-tooltip-bg, #353539);
98
+ color: var(--bs-tooltip-color, #fff);
99
+ z-index: 1000;
100
+ width: auto;
101
+ top: 50%;
102
+ left: calc(100% + 5px);
103
+ transform: translate(-0.5em, -50%);
104
+ overflow: visible;
105
+ opacity: 0;
106
+ }
107
+ }
108
+
109
+ & > .blue-menu-item-dropdown,
110
+ & > .blue-outside > .blue-menu-item-dropdown {
111
+ @extend .ms-1;
112
+ @extend .rounded;
113
+ @extend .shadow;
114
+ @extend .blue-menu-item-dropdown-from-start;
115
+
116
+ position: absolute;
117
+ top: 0;
118
+ width: $bla-sidebar-width;
119
+ left: $normal-size;
120
+ max-height: calc(100vh - (var(--offset-top, 0px) + 1rem));
121
+ overflow-y: auto;
122
+ overflow-x: hidden;
123
+ background-color: var(--blue-sidebar-bg);
124
+
125
+ &::before {
126
+ content: none;
127
+ }
128
+ }
129
+
130
+ &:has(.blue-menu-item-dropdown) {
131
+ & > .blue-menu-item {
132
+ @extend .highlighted;
133
+ }
134
+ }
135
+ }
136
+ }
@@ -1,16 +1,3 @@
1
- @mixin slide-transition() {
2
- $slide-transition: width 0.5s;
3
- transition: $slide-transition;
4
-
5
- @media (prefers-reduced-motion) {
6
- transition: none;
7
- }
8
-
9
- @media (prefers-reduced-motion) {
10
- transition: none;
11
- }
12
- }
13
-
14
1
  @mixin header-bg() {
15
2
  background-image: linear-gradient(
16
3
  var(--blue-header-bg, $header-bg),