@beterdichtbij/component-library 0.7.2 → 0.11.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.
Files changed (46) hide show
  1. package/dist/bd-component-lib.cjs.js +30 -30
  2. package/dist/bd-component-lib.es.js +3599 -3456
  3. package/dist/bd-component-lib.umd.js +30 -35
  4. package/dist/components/atoms/BDCollapsableCard/BDCollapsableCard.vue.d.ts +50 -0
  5. package/dist/components/atoms/BDCollapsableCard/BDCollapsableCard.vue.d.ts.map +1 -0
  6. package/dist/components/atoms/BDForm/BDForm.vue.d.ts +2 -1
  7. package/dist/components/atoms/BDInputGroup/BDInputGroup.vue.d.ts +28 -2
  8. package/dist/components/atoms/BDInputGroup/BDInputGroup.vue.d.ts.map +1 -1
  9. package/dist/components/atoms/BDToast/BDToast.vue.d.ts +75 -0
  10. package/dist/components/atoms/BDToast/BDToast.vue.d.ts.map +1 -0
  11. package/dist/components/atoms/icons/IconCaretDown.vue.d.ts +2 -0
  12. package/dist/components/atoms/icons/IconCaretDown.vue.d.ts.map +1 -0
  13. package/dist/components/atoms/icons/index.d.ts +2 -1
  14. package/dist/components/molecules/BDUser/BDUser.vue.d.ts +5 -13
  15. package/dist/index.d.ts +4 -2
  16. package/dist/interfaces/BDCollapsableCardProps.d.ts +7 -0
  17. package/dist/interfaces/BDInputGroupProps.d.ts +4 -0
  18. package/dist/interfaces/BDToastProps.d.ts +10 -0
  19. package/dist/interfaces/BDUserProps.d.ts +2 -3
  20. package/dist/layout/BDContainer.vue.d.ts +4 -3
  21. package/dist/scss/_alert.scss +11 -0
  22. package/dist/scss/_article.scss +24 -0
  23. package/dist/scss/_base.scss +2 -0
  24. package/dist/scss/_button.scss +54 -0
  25. package/dist/scss/_card.scss +83 -0
  26. package/dist/scss/_collapsable-card.scss +119 -0
  27. package/dist/scss/_dropdown.scss +102 -0
  28. package/dist/scss/_dropzone.scss +72 -0
  29. package/dist/scss/_forms.scss +2 -0
  30. package/dist/scss/_icons.scss +53 -0
  31. package/dist/scss/_markdown-editor.scss +48 -0
  32. package/dist/scss/_modal.scss +16 -0
  33. package/dist/scss/_pagination.scss +29 -0
  34. package/dist/scss/_profile-image.scss +47 -0
  35. package/dist/scss/_toast.scss +84 -0
  36. package/dist/scss/_user.scss +6 -0
  37. package/dist/scss/_zoomslider.scss +72 -0
  38. package/dist/scss/base/typography.scss +16 -0
  39. package/dist/scss/base/variables.scss +162 -0
  40. package/dist/scss/component-library-styling.scss +18 -0
  41. package/dist/scss/forms/_form-check.scss +12 -0
  42. package/dist/scss/forms/_form-input.scss +4 -0
  43. package/dist/scss/mixins.scss +46 -0
  44. package/dist/types/ToastVariants.d.ts +8 -0
  45. package/package.json +3 -1
  46. package/dist/bd-component-lib.css +0 -5
@@ -0,0 +1,50 @@
1
+ import type { PropType as __PropType } from 'vue';
2
+ declare const _sfc_main: import("vue").DefineComponent<{
3
+ title: {
4
+ type: __PropType<string>;
5
+ required: true;
6
+ default: string;
7
+ };
8
+ disabled: {
9
+ type: __PropType<boolean>;
10
+ required: true;
11
+ default: boolean;
12
+ };
13
+ showOn: {
14
+ type: __PropType<import('../../../types/BootstrapSizes').bootstrapSizes>;
15
+ required: true;
16
+ default: string;
17
+ };
18
+ visible: {
19
+ type: __PropType<boolean>;
20
+ required: true;
21
+ default: boolean;
22
+ };
23
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
24
+ title: {
25
+ type: __PropType<string>;
26
+ required: true;
27
+ default: string;
28
+ };
29
+ disabled: {
30
+ type: __PropType<boolean>;
31
+ required: true;
32
+ default: boolean;
33
+ };
34
+ showOn: {
35
+ type: __PropType<import('../../../types/BootstrapSizes').bootstrapSizes>;
36
+ required: true;
37
+ default: string;
38
+ };
39
+ visible: {
40
+ type: __PropType<boolean>;
41
+ required: true;
42
+ default: boolean;
43
+ };
44
+ }>>, {
45
+ disabled: boolean;
46
+ title: string;
47
+ showOn: import('../../../types/BootstrapSizes').bootstrapSizes;
48
+ visible: boolean;
49
+ }, {}>;
50
+ export default _sfc_main;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BDCollapsableCard.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/BDCollapsableCard/BDCollapsableCard.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,qHAAqH,CAAC;AAC5I,cAAc,qHAAqH,CAAC;AACpI,eAAe,SAAS,CAAC"}
@@ -1,4 +1,5 @@
1
- declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, "submit"[], "submit", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
1
+ declare const _sfc_main: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, ("submit" | "reset")[], "submit" | "reset", import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>> & {
2
2
  onSubmit?: ((...args: any[]) => any) | undefined;
3
+ onReset?: ((...args: any[]) => any) | undefined;
3
4
  }, {}, {}>;
4
5
  export default _sfc_main;
@@ -1,2 +1,28 @@
1
- declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
2
- export default _default;
1
+ import type { PropType as __PropType } from 'vue';
2
+ declare const _sfc_main: import("vue").DefineComponent<{
3
+ label: {
4
+ type: __PropType<string | null | undefined>;
5
+ required: false;
6
+ default: undefined;
7
+ };
8
+ labelForId: {
9
+ type: __PropType<string | undefined>;
10
+ required: false;
11
+ default: undefined;
12
+ };
13
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
14
+ label: {
15
+ type: __PropType<string | null | undefined>;
16
+ required: false;
17
+ default: undefined;
18
+ };
19
+ labelForId: {
20
+ type: __PropType<string | undefined>;
21
+ required: false;
22
+ default: undefined;
23
+ };
24
+ }>>, {
25
+ label: string | null | undefined;
26
+ labelForId: string | undefined;
27
+ }, {}>;
28
+ export default _sfc_main;
@@ -1 +1 @@
1
- {"version":3,"file":"BDInputGroup.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/BDInputGroup/BDInputGroup.vue"],"names":[],"mappings":";AAaA,wBAA4E"}
1
+ {"version":3,"file":"BDInputGroup.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/BDInputGroup/BDInputGroup.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,2GAA2G,CAAC;AAClI,cAAc,2GAA2G,CAAC;AAC1H,eAAe,SAAS,CAAC"}
@@ -0,0 +1,75 @@
1
+ import type { PropType as __PropType } from 'vue';
2
+ declare const _sfc_main: import("vue").DefineComponent<{
3
+ id: {
4
+ type: __PropType<string | undefined>;
5
+ required: false;
6
+ };
7
+ show: {
8
+ type: __PropType<boolean | undefined>;
9
+ required: false;
10
+ default: boolean;
11
+ };
12
+ variant: {
13
+ type: __PropType<import('../../../types/ToastVariants').toastVariants | undefined>;
14
+ required: false;
15
+ default: "info";
16
+ };
17
+ teleport: {
18
+ type: __PropType<import("vue").TeleportProps | undefined>;
19
+ required: false;
20
+ default: {
21
+ to: string;
22
+ disabled: boolean;
23
+ };
24
+ };
25
+ title: {
26
+ type: __PropType<string | undefined>;
27
+ required: false;
28
+ default: string;
29
+ };
30
+ text: {
31
+ type: __PropType<string | undefined>;
32
+ required: false;
33
+ default: string;
34
+ };
35
+ }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
36
+ id: {
37
+ type: __PropType<string | undefined>;
38
+ required: false;
39
+ };
40
+ show: {
41
+ type: __PropType<boolean | undefined>;
42
+ required: false;
43
+ default: boolean;
44
+ };
45
+ variant: {
46
+ type: __PropType<import('../../../types/ToastVariants').toastVariants | undefined>;
47
+ required: false;
48
+ default: "info";
49
+ };
50
+ teleport: {
51
+ type: __PropType<import("vue").TeleportProps | undefined>;
52
+ required: false;
53
+ default: {
54
+ to: string;
55
+ disabled: boolean;
56
+ };
57
+ };
58
+ title: {
59
+ type: __PropType<string | undefined>;
60
+ required: false;
61
+ default: string;
62
+ };
63
+ text: {
64
+ type: __PropType<string | undefined>;
65
+ required: false;
66
+ default: string;
67
+ };
68
+ }>>, {
69
+ variant: import('../../../types/ToastVariants').toastVariants | undefined;
70
+ text: string | undefined;
71
+ title: string | undefined;
72
+ show: boolean | undefined;
73
+ teleport: import("vue").TeleportProps | undefined;
74
+ }, {}>;
75
+ export default _sfc_main;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"BDToast.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/BDToast/BDToast.vue"],"names":[],"mappings":"AAAA,OAAO,SAAS,MAAM,iGAAiG,CAAC;AACxH,cAAc,iGAAiG,CAAC;AAChH,eAAe,SAAS,CAAC"}
@@ -0,0 +1,2 @@
1
+ declare const _default: import("vue").DefineComponent<{}, {}, {}, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{}>>, {}, {}>;
2
+ export default _default;
@@ -0,0 +1 @@
1
+ {"version":3,"file":"IconCaretDown.vue.d.ts","sourceRoot":"","sources":["../../../../src/components/atoms/icons/IconCaretDown.vue"],"names":[],"mappings":";AAsBA,wBAA4E"}
@@ -4,6 +4,7 @@ import IconAttachment from "./IconAttachment.vue";
4
4
  import IconInfo from "./IconInfo.vue";
5
5
  import IconRemove from "./IconRemove.vue";
6
6
  import IconFile from "./IconFile.vue";
7
+ import IconCaretDown from "./IconCaretDown.vue";
7
8
  import IconCaretRight from "./IconCaretRight.vue";
8
9
  import IconCaretLeft from "./IconCaretLeft.vue";
9
10
  import IconClose from "./IconClose.vue";
@@ -13,4 +14,4 @@ import IconUnderline from "./IconUnderline.vue";
13
14
  import IconBulletList from "./IconBulletList.vue";
14
15
  import IconOrderedList from "./IconOrderedList.vue";
15
16
  import IconHyperlink from "./IconHyperlink.vue";
16
- export { IconAttachment, IconCheck, IconError, IconInfo, IconRemove, IconFile, IconCaretRight, IconCaretLeft, IconClose, IconItalic, IconBold, IconUnderline, IconBulletList, IconOrderedList, IconHyperlink, };
17
+ export { IconAttachment, IconCheck, IconError, IconInfo, IconRemove, IconFile, IconCaretDown, IconCaretRight, IconCaretLeft, IconClose, IconItalic, IconBold, IconUnderline, IconBulletList, IconOrderedList, IconHyperlink, };
@@ -14,19 +14,15 @@ declare const _sfc_main: import("vue").DefineComponent<{
14
14
  };
15
15
  };
16
16
  details: {
17
- type: __PropType<string[]>;
17
+ type: __PropType<string | string[]>;
18
18
  required: true;
19
- default: never[];
19
+ default: undefined;
20
20
  };
21
21
  hideImage: {
22
22
  type: __PropType<boolean>;
23
23
  required: true;
24
24
  default: boolean;
25
25
  };
26
- identifier: {
27
- type: __PropType<string | number>;
28
- required: true;
29
- };
30
26
  }, {}, unknown, {}, {}, import("vue").ComponentOptionsMixin, import("vue").ComponentOptionsMixin, {}, string, import("vue").VNodeProps & import("vue").AllowedComponentProps & import("vue").ComponentCustomProps, Readonly<import("vue").ExtractPropTypes<{
31
27
  name: {
32
28
  type: __PropType<string>;
@@ -42,23 +38,19 @@ declare const _sfc_main: import("vue").DefineComponent<{
42
38
  };
43
39
  };
44
40
  details: {
45
- type: __PropType<string[]>;
41
+ type: __PropType<string | string[]>;
46
42
  required: true;
47
- default: never[];
43
+ default: undefined;
48
44
  };
49
45
  hideImage: {
50
46
  type: __PropType<boolean>;
51
47
  required: true;
52
48
  default: boolean;
53
49
  };
54
- identifier: {
55
- type: __PropType<string | number>;
56
- required: true;
57
- };
58
50
  }>>, {
59
51
  name: string;
60
52
  img: import("../../../interfaces/BDImage").ImageProps;
61
- details: string[];
53
+ details: string | string[];
62
54
  hideImage: boolean;
63
55
  }, {}>;
64
56
  export default _sfc_main;
package/dist/index.d.ts CHANGED
@@ -1,7 +1,7 @@
1
1
  import BDCol from "./layout/BDCol.vue";
2
2
  import BDContainer from "./layout/BDContainer.vue";
3
3
  import BDRow from "./layout/BDRow.vue";
4
- import { IconAttachment, IconBold, IconBulletList, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline } from "./components/atoms/icons/index";
4
+ import { IconAttachment, IconBold, IconBulletList, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline } from "./components/atoms/icons/index";
5
5
  import BDButton from "./components/atoms/BDButton/BDButton.vue";
6
6
  import BDLogo from "./components/atoms/BDLogo/BDLogo.vue";
7
7
  import BDLink from "./components/atoms/BDLink/BDLink.vue";
@@ -9,6 +9,7 @@ import BDAlert from "./components/atoms/BDAlert/BDAlert.vue";
9
9
  import BDProfileImage from "./components/atoms/BDProfileImage/BDProfileImage.vue";
10
10
  import BDZoomslider from "./components/atoms/BDZoomslider/BDZoomslider.vue";
11
11
  import BDCard from "./components/atoms/BDCard/BDCard.vue";
12
+ import BDCollapsableCard from "./components/atoms/BDCollapsableCard/BDCollapsableCard.vue";
12
13
  import BDFormInput from "./components/atoms/BDFormInput/BDFormInput.vue";
13
14
  import BDInputGroup from "./components/atoms/BDInputGroup/BDInputGroup.vue";
14
15
  import BDFormInvalidFeedback from "./components/atoms/BDFormInvalidFeedback/BDFormInvalidFeedback.vue";
@@ -18,10 +19,11 @@ import BDPagination from "./components/atoms/BDPagination/BDPagination.vue";
18
19
  import BDFormSelect from "./components/atoms/BDFormSelect/BDFormSelect.vue";
19
20
  import BDFormCheckbox from "./components/atoms/BDFormCheckbox/BDFormCheckbox.vue";
20
21
  import BDArticle from "./components/atoms/BDArticle/BDArticle.vue";
22
+ import BDToast from "./components/atoms/BDToast/BDToast.vue";
21
23
  import BDDropdownItem from "./components/molecules/BDDropdownItem/BDDropdownItem.vue";
22
24
  import BDDropzone from "./components/molecules/BDDropzone/BDDropzone.vue";
23
25
  import BDMarkdownEditor from "./components/molecules/BDMarkdownEditor/BDMarkdownEditor.vue";
24
26
  import BDUser from "./components/molecules/BDUser/BDUser.vue";
25
27
  import BDDropdown from "./components/organisms/BDDropdown/BDDropdown.vue";
26
28
  import BDModal from "./components/organisms/BDModal/BDModal.vue";
27
- export { BDCol, BDContainer, BDRow, BDButton, BDLogo, BDLink, BDDropdownItem, BDDropdown, BDAlert, BDProfileImage, BDZoomslider, BDCard, BDModal, BDFormInput, BDFormInvalidFeedback, BDInputGroup, BDBadge, BDForm, BDPagination, BDDropzone, BDMarkdownEditor, BDFormSelect, BDFormCheckbox, IconAttachment, IconBold, IconBulletList, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline, BDArticle, BDUser, };
29
+ export { BDCol, BDContainer, BDRow, BDButton, BDLogo, BDLink, BDDropdownItem, BDDropdown, BDAlert, BDProfileImage, BDZoomslider, BDCard, BDCollapsableCard, BDModal, BDFormInput, BDFormInvalidFeedback, BDInputGroup, BDBadge, BDForm, BDPagination, BDDropzone, BDMarkdownEditor, BDFormSelect, BDFormCheckbox, IconAttachment, IconBold, IconBulletList, IconCaretDown, IconCaretLeft, IconCaretRight, IconCheck, IconClose, IconError, IconFile, IconHyperlink, IconInfo, IconItalic, IconOrderedList, IconRemove, IconUnderline, BDArticle, BDUser, BDToast };
@@ -0,0 +1,7 @@
1
+ import { bootstrapSizes } from '../types/BootstrapSizes';
2
+ export interface BDCollapsableCardProps {
3
+ title: string;
4
+ disabled: boolean;
5
+ showOn: bootstrapSizes;
6
+ visible: boolean;
7
+ }
@@ -0,0 +1,4 @@
1
+ export interface BDInputGroupProps {
2
+ label?: string | null;
3
+ labelForId?: string;
4
+ }
@@ -0,0 +1,10 @@
1
+ import { toastVariants } from '../types/ToastVariants';
2
+ import { TeleportProps } from "vue";
3
+ export interface BDToastProps {
4
+ id?: string;
5
+ show?: boolean;
6
+ variant?: toastVariants;
7
+ teleport?: TeleportProps;
8
+ title?: string;
9
+ text?: string;
10
+ }
@@ -1,8 +1,7 @@
1
- import { identifierProp } from '../types/Identifier';
2
1
  import { ImageProps } from "./BDImage";
3
- export interface BDUserProps extends identifierProp {
2
+ export interface BDUserProps {
4
3
  name: string;
5
4
  img: ImageProps;
6
- details: string[];
5
+ details: string[] | string;
7
6
  hideImage: boolean;
8
7
  }
@@ -1,4 +1,5 @@
1
1
  import type { PropType as __PropType } from 'vue';
2
+ import { bootstrapSizes } from '../types/BootstrapSizes';
2
3
  declare const _sfc_main: import("vue").DefineComponent<{
3
4
  class: {
4
5
  type: __PropType<string | undefined>;
@@ -6,7 +7,7 @@ declare const _sfc_main: import("vue").DefineComponent<{
6
7
  default: string;
7
8
  };
8
9
  fluid: {
9
- type: __PropType<any>;
10
+ type: __PropType<boolean | bootstrapSizes | undefined>;
10
11
  required: false;
11
12
  skipCheck: boolean;
12
13
  default: boolean;
@@ -18,13 +19,13 @@ declare const _sfc_main: import("vue").DefineComponent<{
18
19
  default: string;
19
20
  };
20
21
  fluid: {
21
- type: __PropType<any>;
22
+ type: __PropType<boolean | bootstrapSizes | undefined>;
22
23
  required: false;
23
24
  skipCheck: boolean;
24
25
  default: boolean;
25
26
  };
26
27
  }>>, {
27
28
  class: string | undefined;
28
- fluid: any;
29
+ fluid: boolean | bootstrapSizes | undefined;
29
30
  }, {}>;
30
31
  export default _sfc_main;
@@ -0,0 +1,11 @@
1
+ @each $variant, $color in $theme-colors {
2
+ $bg-color: tint-color($color, 90%);
3
+ .alert-#{$variant} {
4
+ @include alert($color, $bg-color);
5
+ }
6
+ }
7
+
8
+ .alert-warning {
9
+ color: $color-darkblue;
10
+ }
11
+
@@ -0,0 +1,24 @@
1
+
2
+ article{
3
+
4
+ &.bd-article{
5
+ display:flex;
6
+ flex-direction: column;
7
+ padding: 1.125rem;
8
+ width:100%;
9
+ gap: 1rem;
10
+ background-color: $white;
11
+ border-radius: 8px;
12
+
13
+ header{
14
+ display: flex;
15
+ justify-content: space-between;
16
+ }
17
+
18
+ footer {
19
+ display:flex;
20
+ justify-content: space-between;
21
+ }
22
+ }
23
+
24
+ }
@@ -0,0 +1,2 @@
1
+ @import "base/typography.scss";
2
+ @import "base/variables.scss";
@@ -0,0 +1,54 @@
1
+ .btn {
2
+ font-weight: 500;
3
+ border: none;
4
+ border-radius: $border-radius-default;
5
+ text-align: center;
6
+ margin: 0;
7
+ transition: all .5s cubic-bezier(.36,.03,.28,.99);
8
+ }
9
+
10
+ // $variant, $color, $bg-color, $hover-color, $hover-bg-color, $border $solid $border-color
11
+ $btn-variants:
12
+ "primary" $white $primary $primary $color-lightblue none,
13
+ "secondary" $primary $color-lightblue $color-lightblue $primary none,
14
+ "danger" $white $danger $danger $white none,
15
+ "colleague" $white $color-colleague $color-colleague #ccf2e2 none,
16
+ "outline-primary" $color-blue $white $white $color-blue 1px solid $color-blue,
17
+ "outline-primary-dark" $color-blue transparent $white $color-blue 1px solid $color-blue,
18
+ "outline-tertiary" $black $white $black $white 1px solid #abb0be,
19
+ "link" $primary transparent $primary transparent none,
20
+ "white" $white transparent $white transparent none;
21
+
22
+ @each $variant, $color, $bg-color, $hover-color, $hover-bg-color, $border, $solid, $border-color in $btn-variants {
23
+ .btn-#{$variant} {
24
+ @include button($variant, $color, $bg-color, $hover-color, $hover-bg-color, $border, $solid, $border-color)
25
+ }
26
+ }
27
+
28
+ .btn-link {
29
+ text-decoration: none;
30
+
31
+ &:hover {
32
+ text-decoration: underline;
33
+ }
34
+ }
35
+
36
+ .btn-outline-tertiary {
37
+ &.disabled{
38
+ opacity: 1;
39
+ color: #afb8cc;
40
+ background-color: #f2f3f5;
41
+ }
42
+ }
43
+
44
+ .btn-close{
45
+ .modal & {
46
+ background-image: initial;
47
+ }
48
+ }
49
+
50
+
51
+
52
+
53
+
54
+
@@ -0,0 +1,83 @@
1
+ .card {
2
+ border:none;
3
+ border-radius: $border-radius-default;
4
+
5
+ .card-header {
6
+ background-color:$primary;
7
+ color:$white;
8
+ display: flex;
9
+ align-items: center;
10
+ justify-content: space-between;
11
+ position: relative;
12
+
13
+ &.colleague {
14
+ background-color: $color-colleague;
15
+ }
16
+ }
17
+
18
+ .card-body {
19
+ padding: 20px;
20
+
21
+ ul {
22
+ list-style: none;
23
+ padding: 0px;
24
+ margin: 0px;
25
+
26
+ &:not(:last-of-type) {
27
+ border-bottom: 2px solid $color-bg;
28
+ margin-bottom: 20px;
29
+ }
30
+
31
+ li &:not(.autocomplete-result) {
32
+ color: $color-darkblue;
33
+ font-size: 16px;
34
+ font-weight: $font-bold;
35
+
36
+ label {
37
+ font-weight: $font-normal;
38
+ margin-right: 5px;
39
+ }
40
+
41
+ a:not(.attachment-link) {
42
+ text-decoration: underline;
43
+ color: $color-darkblue;
44
+ font-weight: $font-bold;
45
+
46
+ &:active,
47
+ &:focus {
48
+ text-decoration: none;
49
+ }
50
+
51
+ @include media-breakpoint-up(md) {
52
+ &:hover {
53
+ text-decoration: none;
54
+ }
55
+ }
56
+ }
57
+ }
58
+ }
59
+
60
+ .alert {
61
+ ul {
62
+ padding-top: 10px;
63
+ }
64
+ }
65
+
66
+ .btn-container {
67
+ margin-top: 10px;
68
+ }
69
+ }
70
+
71
+ &.no-body .card-header {
72
+ background-color: $white;
73
+ color: $font-color-primary;
74
+ border:none;
75
+ border-radius: $border-radius-default;
76
+ padding: 20px;
77
+
78
+ h2 {
79
+ font-weight: $font-normal;
80
+ font-family: $font-secondary;
81
+ }
82
+ }
83
+ }
@@ -0,0 +1,119 @@
1
+ .bd-collapsable-card {
2
+ margin-bottom: 1rem;
3
+
4
+ &__actions {
5
+ display: flex;
6
+ gap: 8px;
7
+ }
8
+
9
+ .card-header {
10
+ border-radius: $border-radius-default;
11
+
12
+ .patient-detail-template &{
13
+ &.is-disabled{
14
+ border-radius: $border-radius-default;
15
+ padding: 10px 20px;
16
+ }
17
+ }
18
+
19
+ >.btn-caret.collapsed {
20
+ border-radius: $border-radius-default;
21
+ }
22
+
23
+ &.no-title {
24
+ justify-content: flex-end;
25
+ }
26
+
27
+ .btn-caret.btn {
28
+ width: fit-content;
29
+ padding: 0px 6px 0px 6px;
30
+ background: transparent;
31
+
32
+ svg {
33
+ margin: revert;
34
+ fill: $color-white;
35
+ }
36
+
37
+ &:focus,
38
+ &:hover {
39
+ border: none;
40
+ box-shadow: revert;
41
+ background: transparent;
42
+
43
+ svg {
44
+ fill: $color-white;
45
+ }
46
+ }
47
+
48
+ &[aria-expanded="true"] {
49
+ svg {
50
+ transform: rotate(-180deg);
51
+ }
52
+ }
53
+ }
54
+
55
+ &.round-corners {
56
+ border-radius: $border-radius-default;
57
+ }
58
+
59
+ @include media-breakpoint-down(md) {
60
+ min-height: revert;
61
+ height: 60px;
62
+
63
+ &.round-corners-md {
64
+ border-radius: $border-radius-default;
65
+ }
66
+ }
67
+
68
+ @include media-breakpoint-down(sm) {
69
+ &.round-corners-sm {
70
+ border-radius: $border-radius-default;
71
+ }
72
+ }
73
+ }
74
+
75
+ .card-body {
76
+ &.display-none {
77
+ display: none;
78
+ }
79
+
80
+ .collapse {
81
+ @include media-breakpoint-up(lg) {
82
+ &.open-collapse-lg {
83
+ display: block !important
84
+ }
85
+ }
86
+
87
+ @include media-breakpoint-up(md) {
88
+ &.open-collapse-md {
89
+ display: block !important
90
+ }
91
+ }
92
+ }
93
+
94
+ .collapse-body {
95
+ padding: 20px;
96
+
97
+ ul {
98
+ list-style: none;
99
+ padding: 0px;
100
+ margin: 0px;
101
+
102
+ &:not(:last-of-type) {
103
+ border-bottom: 1px solid $color-bg;
104
+ margin-bottom: 20px;
105
+ }
106
+ }
107
+
108
+ li {
109
+ font-size: 1rem;
110
+ line-height: 1.375rem;
111
+ word-wrap: break-word;
112
+ }
113
+
114
+ label {
115
+ margin-right: 0.4rem;
116
+ }
117
+ }
118
+ }
119
+ }