ode-bootstrap 1.3.8-develop-mozo.202408081713 → 1.3.8-develop.202408201058
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/version.txt +1 -1
- package/package.json +1 -1
- package/scss/components/widget/_flash.scss +42 -150
package/dist/version.txt
CHANGED
|
@@ -1 +1 @@
|
|
|
1
|
-
ode-bootstrap
|
|
1
|
+
ode-bootstrap 20/08/2024 10:58:21
|
package/package.json
CHANGED
|
@@ -1,133 +1,33 @@
|
|
|
1
|
-
@use "sass:map";
|
|
2
|
-
|
|
3
1
|
// Array Widget Flash Colors
|
|
4
|
-
// Global colors are wrong according to figma palette, so I redeclare them here....
|
|
5
2
|
$widget-flash-colors: (
|
|
6
|
-
"red":
|
|
7
|
-
|
|
8
|
-
|
|
9
|
-
|
|
10
|
-
|
|
11
|
-
"orange": (
|
|
12
|
-
"background": #FFEFE3,
|
|
13
|
-
"shadow": #FFCBA0,
|
|
14
|
-
"badge": #FF8D2E
|
|
15
|
-
),
|
|
16
|
-
"green": (
|
|
17
|
-
"background": #E6F9F8,
|
|
18
|
-
"shadow": #B6EDE5,
|
|
19
|
-
"badge": #46BFAF
|
|
20
|
-
),
|
|
21
|
-
"blue": (
|
|
22
|
-
"background": #E5F5FF,
|
|
23
|
-
"shadow": #B9E3F8,
|
|
24
|
-
"badge": #2A9CC8
|
|
25
|
-
),
|
|
26
|
-
"grey-dark": (
|
|
27
|
-
"background": $gray-300,
|
|
28
|
-
"shadow": $gray-400,
|
|
29
|
-
"badge": $gray-600
|
|
30
|
-
),
|
|
3
|
+
"red": $red,
|
|
4
|
+
"orange": $orange,
|
|
5
|
+
"green": $green,
|
|
6
|
+
"blue": $blue,
|
|
7
|
+
"grey-dark": $gray-700,
|
|
31
8
|
);
|
|
32
9
|
|
|
33
10
|
.widget-flash {
|
|
34
|
-
background: $secondary;
|
|
35
|
-
|
|
36
|
-
padding: 36px 24px 24px;
|
|
37
11
|
position: relative;
|
|
38
|
-
|
|
39
|
-
|
|
40
|
-
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
margin-bottom: 28px;
|
|
44
|
-
}
|
|
45
|
-
|
|
12
|
+
padding: $widget-padding-x;
|
|
13
|
+
overflow: hidden;
|
|
14
|
+
color: $white;
|
|
15
|
+
background: $secondary;
|
|
16
|
+
|
|
46
17
|
@each $key, $value in $widget-flash-colors {
|
|
47
18
|
&.#{$key} {
|
|
48
|
-
--custom-message-color: #{
|
|
49
|
-
background-color:
|
|
50
|
-
box-shadow: map.get($value, "shadow") -4px 0px,
|
|
51
|
-
map.get($value, "shadow") 0px 4px,
|
|
52
|
-
map.get($value, "shadow") -2px 2px 0 2px;
|
|
53
|
-
|
|
54
|
-
&::before {
|
|
55
|
-
background-color: map.get($value, "badge");
|
|
56
|
-
border-color: map.get($value, "shadow");
|
|
57
|
-
box-shadow: 0 0 0 4px map.get($value, "background");
|
|
58
|
-
}
|
|
59
|
-
|
|
60
|
-
.btn-expand-inner {
|
|
61
|
-
background-color: map.get($value, "background");
|
|
62
|
-
}
|
|
63
|
-
|
|
64
|
-
.flash-content:not(.flash-content-is-expandable) .btn-expand-inner::before {
|
|
65
|
-
background: linear-gradient(to right,
|
|
66
|
-
rgba(map.get($value, "background"), 0),
|
|
67
|
-
rgba(map.get($value, "background"), 0.5) 30%,
|
|
68
|
-
rgba(map.get($value, "background"), 0.8) 50%,
|
|
69
|
-
rgba(map.get($value, "background"), 0.95) 75%,
|
|
70
|
-
map.get($value, "background") 100%);
|
|
71
|
-
}
|
|
19
|
+
--custom-message-color: #{$value};
|
|
20
|
+
background-color: $value;
|
|
72
21
|
}
|
|
73
22
|
}
|
|
74
23
|
|
|
75
|
-
&::before {
|
|
76
|
-
content: '';
|
|
77
|
-
position: absolute;
|
|
78
|
-
display: block;
|
|
79
|
-
top: 4px-52px+24px + 8px;
|
|
80
|
-
left: 4px+24px;
|
|
81
|
-
width: 36px;
|
|
82
|
-
height: 36px;
|
|
83
|
-
border-radius: 100%;
|
|
84
|
-
border-width: 4px;
|
|
85
|
-
border-style: solid;
|
|
86
|
-
box-sizing: content-box;
|
|
87
|
-
}
|
|
88
|
-
|
|
89
|
-
.flash-icon {
|
|
90
|
-
position: absolute;
|
|
91
|
-
display: block;
|
|
92
|
-
top: 4px-52px+24px + 8px + 10px;
|
|
93
|
-
left: 4px+24px + 10px;
|
|
94
|
-
width: 24px;
|
|
95
|
-
height: 24px;
|
|
96
|
-
color: $white;
|
|
97
|
-
}
|
|
98
|
-
&.red .flash-icon{
|
|
99
|
-
// 'alert-triangle' icon seems vertically misaligned.
|
|
100
|
-
transform: translateY(-1px);
|
|
101
|
-
}
|
|
102
|
-
|
|
103
24
|
.btn {
|
|
104
25
|
&-close {
|
|
105
26
|
position: absolute;
|
|
106
|
-
top:
|
|
107
|
-
right:
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
padding: 8px;
|
|
111
|
-
box-sizing: border-box;
|
|
112
|
-
border-radius: 8px;
|
|
113
|
-
color: $text-color;
|
|
114
|
-
background-color: initial;
|
|
115
|
-
background-image: initial;
|
|
116
|
-
opacity: initial;
|
|
117
|
-
|
|
118
|
-
&:hover {
|
|
119
|
-
background-color: $gray-300;
|
|
120
|
-
}
|
|
121
|
-
|
|
122
|
-
&:active {
|
|
123
|
-
background-color: $gray-400;
|
|
124
|
-
color: $black;
|
|
125
|
-
}
|
|
126
|
-
|
|
127
|
-
&:focus {
|
|
128
|
-
background-color: $gray-300;
|
|
129
|
-
border: solid 1px $gray-400;
|
|
130
|
-
}
|
|
27
|
+
top: 10px;
|
|
28
|
+
right: 10px;
|
|
29
|
+
color: var(--ode-dark);
|
|
30
|
+
text-shadow: none;
|
|
131
31
|
}
|
|
132
32
|
|
|
133
33
|
&-expand {
|
|
@@ -136,22 +36,17 @@ $widget-flash-colors: (
|
|
|
136
36
|
&-inner {
|
|
137
37
|
position: absolute;
|
|
138
38
|
z-index: 2;
|
|
139
|
-
bottom:
|
|
140
|
-
|
|
39
|
+
bottom: 0;
|
|
40
|
+
left: 0;
|
|
141
41
|
display: block;
|
|
142
|
-
|
|
42
|
+
width: 100%;
|
|
43
|
+
padding: 5px;
|
|
44
|
+
font-size: 0.8em;
|
|
45
|
+
color: $white;
|
|
143
46
|
text-align: center;
|
|
144
|
-
|
|
47
|
+
background: rgba(#000, 0.1);
|
|
145
48
|
|
|
146
|
-
|
|
147
|
-
content: '';
|
|
148
|
-
display: block;
|
|
149
|
-
position: absolute;
|
|
150
|
-
width: 64px;
|
|
151
|
-
height: 100%;
|
|
152
|
-
// background: linear-gradient(to right, rgba($flash-red, 0), rgba($flash-red, 0.5) 30%, rgba($flash-red, 0.8) 50%, rgba($flash-red, 0.95) 75%, $flash-red 100%);
|
|
153
|
-
left: -64px;
|
|
154
|
-
}
|
|
49
|
+
@include background-color-to(rgba(#000, 0.2));
|
|
155
50
|
}
|
|
156
51
|
}
|
|
157
52
|
}
|
|
@@ -159,32 +54,31 @@ $widget-flash-colors: (
|
|
|
159
54
|
.flash-content {
|
|
160
55
|
padding-right: 1rem;
|
|
161
56
|
|
|
162
|
-
|
|
163
|
-
|
|
164
|
-
& > br:first-child, & > br:not(:not(br)+br) {
|
|
57
|
+
p {
|
|
58
|
+
> br:first-child {
|
|
165
59
|
display: none;
|
|
166
60
|
}
|
|
167
61
|
}
|
|
168
62
|
|
|
169
|
-
a {
|
|
170
|
-
color: inherit;
|
|
171
|
-
text-decoration: underline;
|
|
172
|
-
font-weight: bold;
|
|
173
|
-
|
|
174
|
-
&:hover {
|
|
175
|
-
color: $black;
|
|
176
|
-
}
|
|
177
|
-
|
|
178
|
-
&:active {
|
|
179
|
-
color: #550070;
|
|
180
|
-
}
|
|
181
|
-
}
|
|
182
|
-
|
|
183
63
|
&.can-be-truncated {
|
|
184
64
|
&:not(.flash-content-is-expandable) {
|
|
185
65
|
p {
|
|
186
66
|
@include has-text-truncated(4);
|
|
187
|
-
|
|
67
|
+
}
|
|
68
|
+
|
|
69
|
+
&::after {
|
|
70
|
+
content: "";
|
|
71
|
+
position: absolute;
|
|
72
|
+
z-index: 1;
|
|
73
|
+
bottom: 2em;
|
|
74
|
+
right: 0;
|
|
75
|
+
left: 0;
|
|
76
|
+
height: 4em;
|
|
77
|
+
background: linear-gradient(
|
|
78
|
+
to bottom,
|
|
79
|
+
rgba(255, 255, 255, 0),
|
|
80
|
+
var(--custom-message-color)
|
|
81
|
+
);
|
|
188
82
|
}
|
|
189
83
|
|
|
190
84
|
@media not all and (min-resolution: 0.001dpcm) {
|
|
@@ -199,9 +93,7 @@ $widget-flash-colors: (
|
|
|
199
93
|
}
|
|
200
94
|
|
|
201
95
|
.flash-content-signature {
|
|
202
|
-
|
|
203
|
-
margin-top: 22px !important;
|
|
204
|
-
margin-right: 12em;
|
|
96
|
+
padding-bottom: 1rem;
|
|
205
97
|
}
|
|
206
98
|
}
|
|
207
99
|
|