@beterdichtbij/component-library 0.31.6 → 0.33.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/bd-component-lib.cjs.js +29 -29
- package/dist/bd-component-lib.es.js +1919 -1912
- package/dist/bd-component-lib.umd.js +23 -23
- package/dist/scss/_badge.scss +15 -8
- package/dist/scss/_button.scss +1 -7
- package/dist/scss/_card.scss +25 -7
- package/dist/scss/_chatcloud.scss +5 -36
- package/dist/scss/_collapsable-card.scss +17 -3
- package/dist/scss/_modal.scss +15 -0
- package/dist/scss/base/variables.scss +17 -6
- package/dist/scss/mixins.scss +19 -0
- package/dist/types/BootstrapVariants.d.ts +1 -0
- package/package.json +1 -1
package/dist/scss/_badge.scss
CHANGED
|
@@ -1,8 +1,15 @@
|
|
|
1
|
-
|
|
2
|
-
|
|
3
|
-
|
|
4
|
-
|
|
5
|
-
|
|
6
|
-
|
|
7
|
-
|
|
8
|
-
|
|
1
|
+
|
|
2
|
+
@each $variant, $color in $theme-colors {
|
|
3
|
+
$bg-color: tint-color($color, 90%);
|
|
4
|
+
.bd-badge-#{$variant} {
|
|
5
|
+
@include badge($color, $bg-color);
|
|
6
|
+
}
|
|
7
|
+
}
|
|
8
|
+
|
|
9
|
+
.bd-badge-warning {
|
|
10
|
+
color: $color-darkblue;
|
|
11
|
+
}
|
|
12
|
+
|
|
13
|
+
.bd-badge-warning {
|
|
14
|
+
color: $color-darkblue;
|
|
15
|
+
}
|
package/dist/scss/_button.scss
CHANGED
|
@@ -11,7 +11,7 @@
|
|
|
11
11
|
$btn-variants:
|
|
12
12
|
"primary" $white $blue-text $white $blue-dark none,
|
|
13
13
|
"secondary" $font-color-primary $white $font-color-primary $gray-7 $gray 1px solid $gray,
|
|
14
|
-
"danger" $white $
|
|
14
|
+
"danger" $white $red-text $white $red-dark none,
|
|
15
15
|
"colleague" $white $green-text $white $green-dark none,
|
|
16
16
|
"outline-primary" $font-color-primary $white $white $font-color-primary $gray-primary 1px solid $gray-primary,
|
|
17
17
|
"outline-primary-dark" $font-color-primary transparent $white $font-color-primary $gray-primary 1px solid $gray-primary,
|
|
@@ -49,12 +49,6 @@ $btn-variants:
|
|
|
49
49
|
}
|
|
50
50
|
}
|
|
51
51
|
|
|
52
|
-
.btn-close {
|
|
53
|
-
.modal & {
|
|
54
|
-
background-image: initial;
|
|
55
|
-
}
|
|
56
|
-
}
|
|
57
|
-
|
|
58
52
|
button {
|
|
59
53
|
&.btn-remove {
|
|
60
54
|
position: absolute;
|
package/dist/scss/_card.scss
CHANGED
|
@@ -1,18 +1,29 @@
|
|
|
1
1
|
.card {
|
|
2
|
-
border:none;
|
|
2
|
+
border: none;
|
|
3
3
|
border-radius: $border-radius-default;
|
|
4
4
|
|
|
5
5
|
.card-header {
|
|
6
|
-
background-color
|
|
7
|
-
color:$white;
|
|
6
|
+
background-color: $primary;
|
|
8
7
|
display: flex;
|
|
9
8
|
align-items: center;
|
|
10
9
|
justify-content: space-between;
|
|
11
10
|
position: relative;
|
|
12
|
-
|
|
11
|
+
|
|
12
|
+
&.danger {
|
|
13
|
+
background-color: $red-header;
|
|
14
|
+
}
|
|
15
|
+
|
|
13
16
|
&.colleague {
|
|
14
17
|
background-color: $color-colleague;
|
|
15
|
-
}
|
|
18
|
+
}
|
|
19
|
+
|
|
20
|
+
h2 {
|
|
21
|
+
color: $white;
|
|
22
|
+
font-weight: 600;
|
|
23
|
+
margin-bottom: 0;
|
|
24
|
+
font-size: 1.25rem;
|
|
25
|
+
line-height: 23px;
|
|
26
|
+
}
|
|
16
27
|
}
|
|
17
28
|
|
|
18
29
|
.card-body {
|
|
@@ -71,9 +82,16 @@
|
|
|
71
82
|
&.no-body .card-header {
|
|
72
83
|
background-color: $white;
|
|
73
84
|
color: $font-color-primary;
|
|
74
|
-
border:none;
|
|
85
|
+
border: none;
|
|
75
86
|
border-radius: $border-radius-default;
|
|
76
|
-
|
|
87
|
+
|
|
88
|
+
&.danger {
|
|
89
|
+
background-color: #dc3545;
|
|
90
|
+
}
|
|
91
|
+
|
|
92
|
+
&.colleague {
|
|
93
|
+
background-color: $color-colleague;
|
|
94
|
+
}
|
|
77
95
|
|
|
78
96
|
h2 {
|
|
79
97
|
font-weight: $font-normal;
|
|
@@ -7,13 +7,9 @@
|
|
|
7
7
|
&-card {
|
|
8
8
|
flex: 1;
|
|
9
9
|
background-color: $color-bg;
|
|
10
|
-
padding:
|
|
11
|
-
border-radius:
|
|
10
|
+
padding: 20px;
|
|
11
|
+
border-radius: 8px;
|
|
12
12
|
position: relative;
|
|
13
|
-
|
|
14
|
-
.sender & {
|
|
15
|
-
border-radius: 8px 0px 8px 8px;
|
|
16
|
-
}
|
|
17
13
|
|
|
18
14
|
&__header {
|
|
19
15
|
display: flex;
|
|
@@ -58,8 +54,8 @@
|
|
|
58
54
|
margin-bottom: 0;
|
|
59
55
|
}
|
|
60
56
|
|
|
61
|
-
.card-body &{
|
|
62
|
-
|
|
57
|
+
.card-body & {
|
|
58
|
+
margin-top: 1.25rem;
|
|
63
59
|
}
|
|
64
60
|
}
|
|
65
61
|
}
|
|
@@ -68,32 +64,9 @@
|
|
|
68
64
|
background-color: $color-chatcloud;
|
|
69
65
|
}
|
|
70
66
|
|
|
71
|
-
&::before {
|
|
72
|
-
content: "";
|
|
73
|
-
position: absolute;
|
|
74
|
-
border-left: 8px solid transparent;
|
|
75
|
-
border-right: 8px solid $color-bg;
|
|
76
|
-
border-top: 8px solid $color-bg;
|
|
77
|
-
border-bottom: 8px solid transparent;
|
|
78
|
-
left: -14px;
|
|
79
|
-
top: 0px;
|
|
80
|
-
border-radius: 4px;
|
|
81
|
-
transform: scaleZ(-1);
|
|
82
|
-
|
|
83
|
-
.sender & {
|
|
84
|
-
border-right: 8px solid transparent;
|
|
85
|
-
border-top: 8px solid $color-chatcloud;
|
|
86
|
-
border-left: 8px solid $color-chatcloud;
|
|
87
|
-
transform: revert;
|
|
88
|
-
right: -12px;
|
|
89
|
-
left: revert;
|
|
90
|
-
}
|
|
91
|
-
}
|
|
92
|
-
|
|
93
67
|
@include media-breakpoint-down(md) {
|
|
94
68
|
padding: 8px;
|
|
95
69
|
}
|
|
96
|
-
|
|
97
70
|
}
|
|
98
71
|
|
|
99
72
|
|
|
@@ -117,9 +90,5 @@
|
|
|
117
90
|
@include media-breakpoint-down(md) {
|
|
118
91
|
display: none;
|
|
119
92
|
}
|
|
120
|
-
|
|
121
93
|
}
|
|
122
|
-
}
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
94
|
+
}
|
|
@@ -7,10 +7,22 @@
|
|
|
7
7
|
}
|
|
8
8
|
|
|
9
9
|
.card-header {
|
|
10
|
-
border-radius: $border-radius-default;
|
|
10
|
+
border-radius: $border-radius-default $border-radius-default 0 0;
|
|
11
|
+
align-items: center;
|
|
12
|
+
border-bottom: none;
|
|
13
|
+
padding: 0 16px;
|
|
14
|
+
height: 60px;
|
|
15
|
+
|
|
16
|
+
h2 {
|
|
17
|
+
color: #fff;
|
|
18
|
+
font-weight: 600;
|
|
19
|
+
margin-bottom: 0;
|
|
20
|
+
font-size: 1.25rem;
|
|
21
|
+
line-height: 23px;
|
|
22
|
+
}
|
|
11
23
|
|
|
12
|
-
.patient-detail-template &{
|
|
13
|
-
&.is-disabled{
|
|
24
|
+
.patient-detail-template & {
|
|
25
|
+
&.is-disabled {
|
|
14
26
|
border-radius: $border-radius-default;
|
|
15
27
|
padding: 10px 20px;
|
|
16
28
|
}
|
|
@@ -73,6 +85,8 @@
|
|
|
73
85
|
}
|
|
74
86
|
|
|
75
87
|
.card-body {
|
|
88
|
+
font-size: 1rem;
|
|
89
|
+
|
|
76
90
|
&.display-none {
|
|
77
91
|
display: none;
|
|
78
92
|
}
|
package/dist/scss/_modal.scss
CHANGED
|
@@ -20,11 +20,26 @@
|
|
|
20
20
|
display: flex;
|
|
21
21
|
gap: 4px;
|
|
22
22
|
background: transparent;
|
|
23
|
+
background-image: initial;
|
|
23
24
|
color: $gray-primary;
|
|
24
25
|
|
|
25
26
|
.icon-close {
|
|
26
27
|
width: 24px;
|
|
27
28
|
height: 24px;
|
|
29
|
+
background-color: $blue-text;
|
|
30
|
+
display: inline-block;
|
|
31
|
+
padding: 4px;
|
|
32
|
+
border-radius: 50%;
|
|
33
|
+
path {
|
|
34
|
+
fill: $color-white;
|
|
35
|
+
}
|
|
36
|
+
|
|
37
|
+
&:hover {
|
|
38
|
+
background-color: $color-lightblue;
|
|
39
|
+
path {
|
|
40
|
+
fill: $blue-text;
|
|
41
|
+
}
|
|
42
|
+
}
|
|
28
43
|
}
|
|
29
44
|
}
|
|
30
45
|
|
|
@@ -50,6 +50,11 @@ $gray-7: #F7F8FA; // grijs 7: button secondary bg-color hover /borde
|
|
|
50
50
|
$gray-secondary: #6B758A; // grijs secondair: subtitles, date cardview
|
|
51
51
|
$gray-primary: #394156; // grijs primair: headings default tekst color
|
|
52
52
|
|
|
53
|
+
// red colors direved from Evers + de Gier colorscheme 2024
|
|
54
|
+
$red-header: #DE4141; // red header
|
|
55
|
+
$red-text: #C32222; // button variant danger
|
|
56
|
+
$red-dark: #AE1E1E; // hover button danger
|
|
57
|
+
|
|
53
58
|
// theme colors
|
|
54
59
|
$danger:$red;
|
|
55
60
|
$primary:$blue;
|
|
@@ -61,10 +66,11 @@ $light:$gray-200;
|
|
|
61
66
|
$dark:$gray-900;
|
|
62
67
|
|
|
63
68
|
$grid-breakpoints: (xs: 0,
|
|
64
|
-
|
|
65
|
-
|
|
66
|
-
|
|
67
|
-
|
|
69
|
+
sm: 576px, // Small screen / phone
|
|
70
|
+
md: 768px, // Medium screen / tablet
|
|
71
|
+
lg: 850px, // Large screen / desktop
|
|
72
|
+
xl: 1200px // Extra large screen / wide desktop
|
|
73
|
+
);
|
|
68
74
|
|
|
69
75
|
$container-max-widths: (
|
|
70
76
|
sm: 540px,
|
|
@@ -82,7 +88,8 @@ $theme-colors: (
|
|
|
82
88
|
"danger": $danger,
|
|
83
89
|
"success": $success,
|
|
84
90
|
"light": $light,
|
|
85
|
-
"dark" : $dark
|
|
91
|
+
"dark" : $dark,
|
|
92
|
+
"gray": $secondary,
|
|
86
93
|
);
|
|
87
94
|
|
|
88
95
|
//variables font
|
|
@@ -190,4 +197,8 @@ $form-range-track-border-radius: 1rem;
|
|
|
190
197
|
$form-range-thumb-border-radius: 1rem;
|
|
191
198
|
$form-range-track-height: .5rem;
|
|
192
199
|
$form-range-thumb-width: 1rem;
|
|
193
|
-
$form-range-thumb-height: $form-range-thumb-width;
|
|
200
|
+
$form-range-thumb-height: $form-range-thumb-width;
|
|
201
|
+
|
|
202
|
+
//focus ring
|
|
203
|
+
$focus-ring-width: 0px;
|
|
204
|
+
$focus-ring-color: $color-white;
|
package/dist/scss/mixins.scss
CHANGED
|
@@ -13,6 +13,25 @@
|
|
|
13
13
|
}
|
|
14
14
|
}
|
|
15
15
|
|
|
16
|
+
@mixin badge($color, $bg-color) {
|
|
17
|
+
border-radius: 8px;
|
|
18
|
+
padding: 5px 8px;
|
|
19
|
+
font-weight: 500;
|
|
20
|
+
font-style: normal;
|
|
21
|
+
font-size: 0.75rem;
|
|
22
|
+
line-height: 0.875rem;
|
|
23
|
+
background-color: $bg-color;
|
|
24
|
+
color: $color;
|
|
25
|
+
svg {
|
|
26
|
+
fill: $color;
|
|
27
|
+
height: 12px;
|
|
28
|
+
width: 12px;
|
|
29
|
+
&.icon{
|
|
30
|
+
margin-right:8px;
|
|
31
|
+
}
|
|
32
|
+
}
|
|
33
|
+
}
|
|
34
|
+
|
|
16
35
|
@mixin button($variant, $color, $bg-color, $hover-color, $hover-bg-color, $hover-border-color, $border, $solid, $border-color) {
|
|
17
36
|
color: $color;
|
|
18
37
|
background-color: $bg-color;
|