@mtvh/mtvh-design-system 0.0.26 → 0.0.28

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 (15) hide show
  1. package/assets/scss/components/_all.scss +2 -0
  2. package/assets/scss/components/_card-list.scss +2 -5
  3. package/assets/scss/components/_content-block.scss +6 -1
  4. package/assets/scss/components/_form.scss +2 -2
  5. package/assets/scss/components/_good-to-know.scss +62 -0
  6. package/assets/scss/components/_pagination.scss +53 -1
  7. package/assets/scss/components/_space-selection.scss +66 -0
  8. package/assets/scss/config/_icon-list.scss +54 -47
  9. package/assets/scss/config/_variables.scss +15 -3
  10. package/assets/scss/core/typography/_typography.scss +20 -9
  11. package/assets/scss/forms/_credit-card-form.scss +16 -0
  12. package/assets/scss/forms/_stripe.scss +15 -0
  13. package/assets/scss/mixins/_form.scss +2 -2
  14. package/dist/mtvh.min.css +5 -3
  15. package/package.json +1 -1
package/assets/scss/components/_all.scss CHANGED
@@ -14,3 +14,5 @@
14
14
  @import "_pagination";
15
15
  @import "_payment";
16
16
  @import "_card-list";
17
+ @import "_space-selection";
18
+ @import "_good-to-know";
package/assets/scss/components/_card-list.scss CHANGED
@@ -1,5 +1,4 @@
1
1
  .card-list {
2
-
3
2
  &-item {
4
3
  display: flex;
5
4
  flex-direction: row;
@@ -24,7 +23,8 @@
24
23
  }
25
24
  }
26
25
 
27
- label, .label {
26
+ label,
27
+ .label {
28
28
  flex: 1 100px;
29
29
  display: flex;
30
30
 
@@ -51,9 +51,6 @@
51
51
 
52
52
  button {
53
53
  align-self: flex-start;
54
- @include media-breakpoint-up(sm) {
55
- align-self: start;
56
- }
57
54
  }
58
55
 
59
56
  .invali-feedback {
package/assets/scss/components/_content-block.scss CHANGED
@@ -3,7 +3,7 @@
3
3
  position: relative;
4
4
  padding: $mtvh-spacing-6 $mtvh-spacing-5 $mtvh-spacing-5 $mtvh-spacing-5;
5
5
  @include media-breakpoint-up(md) {
6
- padding: $mtvh-spacing-6;
6
+ padding: $mtvh-spacing-6 $mtvh-spacing-6 $mtvh-spacing-5 $mtvh-spacing-6;
7
7
  }
8
8
 
9
9
  &:last-of-type {
@@ -227,5 +227,10 @@
227
227
  @each $state, $variable in $content-block-theme-colors {
228
228
  .mtvh-content-block-bg--#{$state} {
229
229
  --#{$prefix}content-block-bg: #{$variable};
230
+ @if ($state == "grey-02" or $state == "yellow-02") {
231
+ a {
232
+ color: var(--#{$prefix}black);
233
+ }
234
+ }
230
235
  }
231
236
  }
package/assets/scss/components/_form.scss CHANGED
@@ -6,6 +6,8 @@
6
6
  @import "../forms/form-date-input";
7
7
  @import "../forms/input-group";
8
8
  @import "../forms/validation";
9
+ @import "../forms/stripe";
10
+ @import "../forms/credit-card-form";
9
11
 
10
12
  .formio-form {
11
13
  @import "../forms/formio";
@@ -16,7 +18,6 @@
16
18
  .mtvh-form,
17
19
  .mtvh-formio,
18
20
  formio {
19
-
20
21
  --#{$prefix}form-group-padding-y: #{$mtvh-spacing-6};
21
22
  @include media-breakpoint-up("lg") {
22
23
  --#{$prefix}form-group-padding-y: #{$mtvh-spacing-7};
@@ -110,7 +111,6 @@ formio {
110
111
  margin: 0;
111
112
  padding-left: 0;
112
113
  padding-right: 0;
113
-
114
114
  }
115
115
  &--md {
116
116
  --#{$prefix}form-control-input-width: #{$input-width-size-l};
package/assets/scss/components/_good-to-know.scss ADDED
@@ -0,0 +1,62 @@
1
+ .mtvh-good-to-know-block {
2
+ $spacing-unit: $mtvh-spacing-5;
3
+
4
+ --mtvh-btn-close-focus-outline-color: var(--mtvh-dark-outline-color);
5
+ --mtvh-btn-close-hover-bg-color: var(--mtvh-btn-close-warning-hover-bg);
6
+
7
+ @extend .mtvh-content-block;
8
+ @extend .mtvh-content-block-bg;
9
+ @extend .mtvh-content-block-bg--yellow-02;
10
+
11
+ padding: unset;
12
+ margin: unset;
13
+
14
+ .list-group-item {
15
+ display: flex;
16
+ border: none;
17
+ margin: unset;
18
+ padding: unset;
19
+ }
20
+
21
+ .list-group-item > .content {
22
+ flex: 1;
23
+ padding-bottom: $spacing-unit;
24
+ margin-left: $spacing-unit;
25
+ margin-top: $spacing-unit;
26
+ margin-right: $spacing-unit;
27
+ border-bottom: 1px solid var(--mtvh-yellow-03);
28
+
29
+ h3,
30
+ h4,
31
+ h5,
32
+ h6 {
33
+ font-family: $font-family-sans-serif;
34
+ font-size: $font-size-base;
35
+ font-weight: $mtvh-font-weight-bold;
36
+ line-height: $line-height-base;
37
+ margin: unset;
38
+ }
39
+
40
+ p {
41
+ font-family: $font-family-sans-serif;
42
+ font-size: $font-size-base;
43
+ line-height: $line-height-base;
44
+ }
45
+
46
+ a {
47
+ display: flex;
48
+ flex-direction: column;
49
+ font-weight: $mtvh-font-weight-normal;
50
+ }
51
+ }
52
+
53
+ .list-group-item.dismissable > .content {
54
+ margin-right: unset;
55
+ }
56
+
57
+ .list-group-item:last-child > .content {
58
+ border: none;
59
+ padding: unset;
60
+ margin-bottom: $spacing-unit;
61
+ }
62
+ }
package/assets/scss/components/_pagination.scss CHANGED
@@ -1,18 +1,70 @@
1
1
  .pagination {
2
+ $size: 44px;
3
+ margin: 0;
4
+
5
+ @include media-breakpoint-down("lg") {
6
+ justify-content: center;
7
+ }
2
8
  .page-link {
9
+ border-radius: $border-radius-sm;
10
+ min-width: $size;
11
+ height: $size;
12
+ display: block;
13
+ text-align: center;
14
+
3
15
  &:has(.mtvh-icon) {
4
- --#{$prefix}pagination-padding-x: 8px;
16
+ --#{$prefix}pagination-padding-x: 12px;
5
17
  .mtvh-icon:before,
6
18
  .mtvh-icon:after {
7
19
  margin-right: 0;
8
20
  margin-left: 0;
9
21
  }
10
22
  }
23
+
24
+ &:active:not(:disabled):not(.disabled) {
25
+ color: var(--#{$prefix}blue-05);
26
+ background-color: var(--#{$prefix}grey-03);
27
+ }
11
28
  @include field-focus();
29
+ &:focus {
30
+ color: var(--#{$prefix}blue-05);
31
+ }
12
32
  }
13
33
 
14
34
  .page-item {
15
35
  margin-right: 4px;
16
36
  margin-bottom: 0;
37
+
38
+ &:last-child {
39
+ margin-right: 0;
40
+ }
41
+ &.active {
42
+ font-weight: $font-weight-bold;
43
+ }
44
+
45
+ &-ellipsis {
46
+ align-self: center;
47
+ text-align: center;
48
+ padding: var(--#{$prefix}pagination-padding-y);
49
+ min-width: $size;
50
+ height: $size;
51
+ }
52
+ }
53
+ }
54
+ .pagination-container {
55
+ text-align: center;
56
+ select.form-control {
57
+ width: $input-width-size-sm;
58
+ margin-left: $mtvh-spacing-3;
59
+ margin-right: $mtvh-spacing-3;
60
+ }
61
+ }
62
+
63
+ .pagination-select {
64
+ align-items: center;
65
+ display: flex;
66
+ @include media-breakpoint-down("lg") {
67
+ margin-top: $mtvh-spacing-7;
68
+ justify-content: center;
17
69
  }
18
70
  }
package/assets/scss/components/_space-selection.scss ADDED
@@ -0,0 +1,66 @@
1
+ fieldset.space-selection {
2
+ input {
3
+ @extend .btn-check;
4
+ }
5
+
6
+ input + label {
7
+ display: flex;
8
+ align-items: center;
9
+ padding: $mtvh-spacing-3 $mtvh-spacing-6;
10
+ border: 1px solid var(--mtvh-grey-06);
11
+ border-radius: 0.5rem;
12
+ background-color: var(--mtvh-grey-02);
13
+ width: 100%;
14
+ min-height: 4.3rem;
15
+ font-size: $font-size-sm;
16
+
17
+ .form-text {
18
+ margin: unset;
19
+ font-size: $font-size-xs;
20
+ color: var(--mtvh-grey-06);
21
+ }
22
+
23
+ div {
24
+ flex-direction: column;
25
+ }
26
+ }
27
+
28
+ input:checked + label {
29
+ background-color: $form-check-input-checked-bg-color;
30
+ color: $form-check-input-checked-color;
31
+
32
+ .form-text {
33
+ color: var(--mtvh-white);
34
+ }
35
+
36
+ .mtvh-icon {
37
+ color: var(--mtvh-white);
38
+ }
39
+ }
40
+
41
+ input:focus + label {
42
+ @include focus-style();
43
+ color: var(--mtvh-white);
44
+ }
45
+
46
+ .form-check {
47
+ padding-left: unset;
48
+ }
49
+
50
+ h2,
51
+ h3,
52
+ h4,
53
+ h5,
54
+ h6 {
55
+ font-size: $font-size-xs;
56
+ font-family: $font-family-sans-serif;
57
+ margin-bottom: $mtvh-spacing-3;
58
+ font-weight: $mtvh-font-weight-bold;
59
+ }
60
+
61
+ legend {
62
+ font-family: $font-family-sans-serif;
63
+ font-size: $font-size-md;
64
+ font-weight: $mtvh-font-weight-bold;
65
+ }
66
+ }
package/assets/scss/config/_icon-list.scss CHANGED
@@ -77,7 +77,10 @@ $icons: (
77
77
  "space-shared-facility":
78
78
  '<svg width="28" height="28" viewBox="0 0 28 21" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M4.85976 20.5C4.64684 20.5 4.45487 20.4145 4.28385 20.2436C4.11283 20.0727 4.02732 19.8609 4.02732 19.6083V18.3344H3.51425C2.68052 18.3344 1.96971 18.0407 1.38183 17.4532C0.793943 16.8659 0.5 16.1406 0.5 15.2771V8.78026C0.5 7.88854 0.809976 7.16667 1.42993 6.61465C2.04988 6.06263 2.74466 5.78662 3.51425 5.78662V3.55732C3.51425 2.69384 3.81001 1.96847 4.40153 1.38121C4.99284 0.793736 5.72321 0.5 6.59264 0.5H21.4074C22.2768 0.5 23.0072 0.793736 23.5985 1.38121C24.19 1.96847 24.4857 2.69384 24.4857 3.55732V5.78662C25.2767 5.78662 25.9768 6.06794 26.5861 6.63057C27.1954 7.19321 27.5 7.90977 27.5 8.78026V15.2771C27.5 16.1406 27.2061 16.8659 26.6182 17.4532C26.0303 18.0407 25.3195 18.3344 24.4857 18.3344H23.9727V19.6083C23.9727 19.8609 23.8975 20.0727 23.7473 20.2436C23.5972 20.4145 23.3948 20.5 23.1402 20.5C22.9271 20.5 22.7347 20.4145 22.563 20.2436C22.3912 20.0727 22.3052 19.8609 22.3052 19.6083V18.3344H5.75891V19.6083C5.75891 19.8631 5.67276 20.0754 5.50045 20.2452C5.32815 20.4151 5.11458 20.5 4.85976 20.5ZM3.51425 16.6147H24.4742C24.8453 16.6147 25.1538 16.4864 25.3996 16.2299C25.6455 15.9737 25.7684 15.6561 25.7684 15.2771V8.79013C25.7684 8.42261 25.6455 8.11677 25.3996 7.87261C25.1538 7.62845 24.8492 7.50637 24.4857 7.50637C24.1042 7.50637 23.7843 7.62845 23.5263 7.87261C23.2681 8.11677 23.139 8.41932 23.139 8.78026V13.5573H4.86105V8.78026C4.86105 8.41932 4.73203 8.11677 4.474 7.87261C4.21576 7.62845 3.89584 7.50637 3.51425 7.50637C3.15083 7.50637 2.8462 7.62845 2.60036 7.87261C2.35451 8.11677 2.23159 8.41932 2.23159 8.78026V15.2771C2.23159 15.6561 2.35451 15.9737 2.60036 16.2299C2.8462 16.4864 3.15083 16.6147 3.51425 16.6147ZM6.59264 11.8376H21.4074V8.78026C21.4074 8.29108 21.5249 7.8397 21.7601 7.42611C21.9953 7.01253 22.3266 6.68163 22.7542 6.43344V3.55732C22.7542 3.17834 22.625 2.86072 22.3668 2.60446C22.1088 2.34798 21.789 2.21975 21.4074 2.21975H6.59264C6.21105 2.21975 5.89113 2.34798 5.63289 2.60446C5.37486 2.86072 5.24584 3.17834 5.24584 3.55732V6.43344C5.6734 6.68163 6.00475 7.01253 6.23991 7.42611C6.47506 7.8397 6.59264 8.29108 6.59264 8.78026V11.8376Z" fill="black"/></svg>',
79
79
  "printer":
80
- '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="#000" d="M5.928 19c-.532 0-.987-.19-1.365-.567a1.859 1.859 0 0 1-.568-1.364v-2.112H1.933c-.532 0-.987-.189-1.365-.567A1.859 1.859 0 0 1 0 13.026v-4.12c0-.824.286-1.52.857-2.086a2.846 2.846 0 0 1 2.081-.85h14.124c.825 0 1.52.283 2.087.85.567.566.851 1.262.851 2.086v4.12c0 .53-.19.986-.568 1.364a1.862 1.862 0 0 1-1.365.567h-2.062v2.112c0 .53-.19.986-.568 1.364a1.862 1.862 0 0 1-1.365.567H5.928Zm-3.995-5.974h2.062v-.078c0-.53.19-.985.568-1.364a1.862 1.862 0 0 1 1.365-.567h8.144c.532 0 .987.19 1.365.568.379.378.568.832.568 1.363v.078h2.062v-4.12a.97.97 0 0 0-.29-.716.978.978 0 0 0-.718-.289H2.94a.978.978 0 0 0-.718.289.97.97 0 0 0-.29.716v4.12Zm12.14-7.056V2.931H5.927V5.97H3.995V2.931c0-.53.19-.986.568-1.364A1.862 1.862 0 0 1 5.928 1h8.144c.532 0 .987.19 1.365.567.379.378.568.833.568 1.364V5.97h-1.933Zm1.984 4.416a.932.932 0 0 0 .683-.283.93.93 0 0 0 .283-.682.93.93 0 0 0-.283-.683.931.931 0 0 0-.683-.283.931.931 0 0 0-.683.283.93.93 0 0 0-.284.683.93.93 0 0 0 .284.682.932.932 0 0 0 .683.283Zm-1.985 6.683v-4.12H5.928v4.12h8.144Z"/></svg>'
80
+ '<svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 20 20"><path fill="#000" d="M5.928 19c-.532 0-.987-.19-1.365-.567a1.859 1.859 0 0 1-.568-1.364v-2.112H1.933c-.532 0-.987-.189-1.365-.567A1.859 1.859 0 0 1 0 13.026v-4.12c0-.824.286-1.52.857-2.086a2.846 2.846 0 0 1 2.081-.85h14.124c.825 0 1.52.283 2.087.85.567.566.851 1.262.851 2.086v4.12c0 .53-.19.986-.568 1.364a1.862 1.862 0 0 1-1.365.567h-2.062v2.112c0 .53-.19.986-.568 1.364a1.862 1.862 0 0 1-1.365.567H5.928Zm-3.995-5.974h2.062v-.078c0-.53.19-.985.568-1.364a1.862 1.862 0 0 1 1.365-.567h8.144c.532 0 .987.19 1.365.568.379.378.568.832.568 1.363v.078h2.062v-4.12a.97.97 0 0 0-.29-.716.978.978 0 0 0-.718-.289H2.94a.978.978 0 0 0-.718.289.97.97 0 0 0-.29.716v4.12Zm12.14-7.056V2.931H5.927V5.97H3.995V2.931c0-.53.19-.986.568-1.364A1.862 1.862 0 0 1 5.928 1h8.144c.532 0 .987.19 1.365.567.379.378.568.833.568 1.364V5.97h-1.933Zm1.984 4.416a.932.932 0 0 0 .683-.283.93.93 0 0 0 .283-.682.93.93 0 0 0-.283-.683.931.931 0 0 0-.683-.283.931.931 0 0 0-.683.283.93.93 0 0 0-.284.683.93.93 0 0 0 .284.682.932.932 0 0 0 .683.283Zm-1.985 6.683v-4.12H5.928v4.12h8.144Z"/></svg>',
81
+ "space-sub-block":
82
+ '<svg width="28" height="28" viewBox="0 0 14 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1.52481 12C1.24033 12 0.998404 11.8987 0.799042 11.6961C0.599681 11.4933 0.5 11.2474 0.5 10.9582V1.0416C0.5 0.752457 0.599681 0.506571 0.799042 0.303943C0.998404 0.101314 1.24033 0 1.52481 0H5.88428C6.16876 0 6.41069 0.101314 6.61005 0.303943C6.80941 0.506571 6.90909 0.752457 6.90909 1.0416V2.74286H12.4752C12.7597 2.74286 13.0016 2.84417 13.201 3.0468C13.4003 3.24943 13.5 3.49531 13.5 3.78446V10.9582C13.5 11.2474 13.4003 11.4933 13.201 11.6961C13.0016 11.8987 12.7597 12 12.4752 12H1.52481ZM1.51182 10.9714H5.89727V9.25714H1.51182V10.9714ZM1.51182 8.22857H5.89727V6.51429H1.51182V8.22857ZM1.51182 5.48571H5.89727V3.77143H1.51182V5.48571ZM1.51182 2.74286H5.89727V1.02857H1.51182V2.74286ZM6.90909 10.9714H12.4882V3.77143H6.90909V10.9714ZM8.89427 6.51429C8.75091 6.51429 8.63071 6.46497 8.53367 6.36634C8.43674 6.26771 8.38828 6.14548 8.38828 5.99966C8.38828 5.85394 8.43674 5.73183 8.53367 5.63331C8.63071 5.53491 8.75091 5.48571 8.89427 5.48571H10.3733C10.5167 5.48571 10.6368 5.53503 10.7337 5.63366C10.8308 5.73217 10.8793 5.85434 10.8793 6.00017C10.8793 6.146 10.8308 6.26811 10.7337 6.36651C10.6368 6.46503 10.5167 6.51429 10.3733 6.51429H8.89427ZM8.89427 9.25714C8.75091 9.25714 8.63071 9.20783 8.53367 9.1092C8.43674 9.01057 8.38828 8.88834 8.38828 8.74251C8.38828 8.5968 8.43674 8.47468 8.53367 8.37617C8.63071 8.27777 8.75091 8.22857 8.89427 8.22857H10.3733C10.5167 8.22857 10.6368 8.27788 10.7337 8.37651C10.8308 8.47503 10.8793 8.5972 10.8793 8.74303C10.8793 8.88886 10.8308 9.01097 10.7337 9.10937C10.6368 9.20789 10.5167 9.25714 10.3733 9.25714H8.89427Z" fill="#9A9A9A"/>
83
+ </svg>',
81
84
  );
82
85
 
83
86
  /**
@@ -383,227 +386,227 @@ $mtvh-icons: (
383
386
  height: $icon-size-scale-xl,
384
387
  svg-path: "#{$asset-icon-path}tick-list-with-cross.svg",
385
388
  ),
386
- 'call': (
389
+ "call": (
387
390
  width: $icon-size-scale-xl,
388
391
  height: $icon-size-scale-xl,
389
392
  svg-path: "#{$asset-icon-path}call.svg",
390
393
  ),
391
- 'phone-with-speech': (
394
+ "phone-with-speech": (
392
395
  width: $icon-size-scale-xl,
393
396
  height: $icon-size-scale-xl,
394
397
  svg-path: "#{$asset-icon-path}phone-with-speech.svg",
395
398
  ),
396
- 'ringing': (
399
+ "ringing": (
397
400
  width: $icon-size-scale-xl,
398
401
  height: $icon-size-scale-xl,
399
402
  svg-path: "#{$asset-icon-path}ringing.svg",
400
403
  ),
401
- 'location-pointer': (
404
+ "location-pointer": (
402
405
  width: $icon-size-scale-xl,
403
406
  height: $icon-size-scale-xl,
404
407
  svg-path: "#{$asset-icon-path}location-pointer.svg",
405
408
  ),
406
- 'signposts': (
409
+ "signposts": (
407
410
  width: $icon-size-scale-xl,
408
411
  height: $icon-size-scale-xl,
409
412
  svg-path: "#{$asset-icon-path}signposts.svg",
410
413
  ),
411
- 'map-with-pointer': (
414
+ "map-with-pointer": (
412
415
  width: $icon-size-scale-xl,
413
416
  height: $icon-size-scale-xl,
414
417
  svg-path: "#{$asset-icon-path}map-with-pointer.svg",
415
418
  ),
416
- 'checkmark': (
419
+ "checkmark": (
417
420
  width: $icon-size-scale-xl,
418
421
  height: $icon-size-scale-xl,
419
422
  svg-path: "#{$asset-icon-path}checkmark.svg",
420
423
  ),
421
- 'heart': (
424
+ "heart": (
422
425
  width: $icon-size-scale-xl,
423
426
  height: $icon-size-scale-xl,
424
427
  svg-path: "#{$asset-icon-path}heart.svg",
425
428
  ),
426
- 'star': (
429
+ "star": (
427
430
  width: $icon-size-scale-xl,
428
431
  height: $icon-size-scale-xl,
429
432
  svg-path: "#{$asset-icon-path}star.svg",
430
433
  ),
431
- 'clipboard': (
434
+ "clipboard": (
432
435
  width: $icon-size-scale-xl,
433
436
  height: $icon-size-scale-xl,
434
437
  svg-path: "#{$asset-icon-path}clipboard.svg",
435
438
  ),
436
- 'clipboard-alt': (
439
+ "clipboard-alt": (
437
440
  width: $icon-size-scale-xl,
438
441
  height: $icon-size-scale-xl,
439
442
  svg-path: "#{$asset-icon-path}clipboard-alt.svg",
440
443
  ),
441
- 'hanging-picture': (
444
+ "hanging-picture": (
442
445
  width: $icon-size-scale-xl,
443
446
  height: $icon-size-scale-xl,
444
447
  svg-path: "#{$asset-icon-path}hanging-picture.svg",
445
448
  ),
446
- 'envelop-closed': (
449
+ "envelop-closed": (
447
450
  width: $icon-size-scale-xl,
448
451
  height: $icon-size-scale-xl,
449
452
  svg-path: "#{$asset-icon-path}envelop-closed.svg",
450
453
  ),
451
- 'envelop-open': (
454
+ "envelop-open": (
452
455
  width: $icon-size-scale-xl,
453
456
  height: $icon-size-scale-xl,
454
457
  svg-path: "#{$asset-icon-path}envelop-open.svg",
455
458
  ),
456
- 'envelop-with-letter': (
459
+ "envelop-with-letter": (
457
460
  width: $icon-size-scale-xl,
458
461
  height: $icon-size-scale-xl,
459
462
  svg-path: "#{$asset-icon-path}envelop-with-letter.svg",
460
463
  ),
461
- 'pie-chart': (
464
+ "pie-chart": (
462
465
  width: $icon-size-scale-xl,
463
466
  height: $icon-size-scale-xl,
464
467
  svg-path: "#{$asset-icon-path}pie-chart.svg",
465
468
  ),
466
- 'frame': (
469
+ "frame": (
467
470
  width: $icon-size-scale-xl,
468
471
  height: $icon-size-scale-xl,
469
472
  svg-path: "#{$asset-icon-path}frame.svg",
470
473
  ),
471
- 'flower': (
474
+ "flower": (
472
475
  width: $icon-size-scale-xl,
473
476
  height: $icon-size-scale-xl,
474
477
  svg-path: "#{$asset-icon-path}flower.svg",
475
478
  ),
476
- 'chart-with-up-arrow': (
479
+ "chart-with-up-arrow": (
477
480
  width: $icon-size-scale-xl,
478
481
  height: $icon-size-scale-xl,
479
482
  svg-path: "#{$asset-icon-path}chart-with-up-arrow.svg",
480
483
  ),
481
- 'chart-with-down-arrow': (
484
+ "chart-with-down-arrow": (
482
485
  width: $icon-size-scale-xl,
483
486
  height: $icon-size-scale-xl,
484
487
  svg-path: "#{$asset-icon-path}chart-with-down-arrow.svg",
485
488
  ),
486
- 'tree': (
489
+ "tree": (
487
490
  width: $icon-size-scale-xl,
488
491
  height: $icon-size-scale-xl,
489
492
  svg-path: "#{$asset-icon-path}tree.svg",
490
493
  ),
491
- 'leaf': (
494
+ "leaf": (
492
495
  width: $icon-size-scale-xl,
493
496
  height: $icon-size-scale-xl,
494
497
  svg-path: "#{$asset-icon-path}leaf.svg",
495
498
  ),
496
- 'cup': (
499
+ "cup": (
497
500
  width: $icon-size-scale-xl,
498
501
  height: $icon-size-scale-xl,
499
502
  svg-path: "#{$asset-icon-path}cup.svg",
500
503
  ),
501
- 'jigsaw': (
504
+ "jigsaw": (
502
505
  width: $icon-size-scale-xl,
503
506
  height: $icon-size-scale-xl,
504
507
  svg-path: "#{$asset-icon-path}jigsaw.svg",
505
508
  ),
506
- 'hourglass': (
509
+ "hourglass": (
507
510
  width: $icon-size-scale-xl,
508
511
  height: $icon-size-scale-xl,
509
512
  svg-path: "#{$asset-icon-path}hourglass.svg",
510
513
  ),
511
- 'recycle': (
514
+ "recycle": (
512
515
  width: $icon-size-scale-xl,
513
516
  height: $icon-size-scale-xl,
514
517
  svg-path: "#{$asset-icon-path}recycle.svg",
515
518
  ),
516
- 'shield': (
519
+ "shield": (
517
520
  width: $icon-size-scale-xl,
518
521
  height: $icon-size-scale-xl,
519
522
  svg-path: "#{$asset-icon-path}shield.svg",
520
523
  ),
521
- 'presentation-board': (
524
+ "presentation-board": (
522
525
  width: $icon-size-scale-xl,
523
526
  height: $icon-size-scale-xl,
524
527
  svg-path: "#{$asset-icon-path}presentation-board.svg",
525
528
  ),
526
- 'printer-colour': (
529
+ "printer-colour": (
527
530
  width: $icon-size-scale-xl,
528
531
  height: $icon-size-scale-xl,
529
532
  svg-path: "#{$asset-icon-path}printer.svg",
530
533
  ),
531
- 'padlock': (
534
+ "padlock": (
532
535
  width: $icon-size-scale-xl,
533
536
  height: $icon-size-scale-xl,
534
537
  svg-path: "#{$asset-icon-path}padlock.svg",
535
538
  ),
536
- 'house': (
539
+ "house": (
537
540
  width: $icon-size-scale-xl,
538
541
  height: $icon-size-scale-xl,
539
542
  svg-path: "#{$asset-icon-path}house.svg",
540
543
  ),
541
- 'keys': (
544
+ "keys": (
542
545
  width: $icon-size-scale-xl,
543
546
  height: $icon-size-scale-xl,
544
547
  svg-path: "#{$asset-icon-path}keys.svg",
545
548
  ),
546
- 'shield-with-tick': (
549
+ "shield-with-tick": (
547
550
  width: $icon-size-scale-xl,
548
551
  height: $icon-size-scale-xl,
549
552
  svg-path: "#{$asset-icon-path}shield-with-tick.svg",
550
553
  ),
551
- 'wallet-with-notes': (
554
+ "wallet-with-notes": (
552
555
  width: $icon-size-scale-xl,
553
556
  height: $icon-size-scale-xl,
554
557
  svg-path: "#{$asset-icon-path}wallet-with-notes.svg",
555
558
  ),
556
- 'page': (
559
+ "page": (
557
560
  width: $icon-size-scale-xl,
558
561
  height: $icon-size-scale-xl,
559
562
  svg-path: "#{$asset-icon-path}page.svg",
560
563
  ),
561
- 'box-open': (
564
+ "box-open": (
562
565
  width: $icon-size-scale-xl,
563
566
  height: $icon-size-scale-xl,
564
567
  svg-path: "#{$asset-icon-path}box-open.svg",
565
568
  ),
566
- 'alarm-clock': (
569
+ "alarm-clock": (
567
570
  width: $icon-size-scale-xl,
568
571
  height: $icon-size-scale-xl,
569
572
  svg-path: "#{$asset-icon-path}alarm-clock.svg",
570
573
  ),
571
- 'calculator': (
574
+ "calculator": (
572
575
  width: $icon-size-scale-xl,
573
576
  height: $icon-size-scale-xl,
574
577
  svg-path: "#{$asset-icon-path}calculator.svg",
575
578
  ),
576
- 'cog-purple': (
579
+ "cog-purple": (
577
580
  width: $icon-size-scale-xl,
578
581
  height: $icon-size-scale-xl,
579
582
  svg-path: "#{$asset-icon-path}cog-purple.svg",
580
583
  ),
581
- 'stopwatch': (
584
+ "stopwatch": (
582
585
  width: $icon-size-scale-xl,
583
586
  height: $icon-size-scale-xl,
584
587
  svg-path: "#{$asset-icon-path}stopwatch.svg",
585
588
  ),
586
- 'bell': (
589
+ "bell": (
587
590
  width: $icon-size-scale-xl,
588
591
  height: $icon-size-scale-xl,
589
592
  svg-path: "#{$asset-icon-path}bell.svg",
590
593
  ),
591
- 'clock': (
594
+ "clock": (
592
595
  width: $icon-size-scale-xl,
593
596
  height: $icon-size-scale-xl,
594
597
  svg-path: "#{$asset-icon-path}clock.svg",
595
598
  ),
596
- 'speech-bubbles': (
599
+ "speech-bubbles": (
597
600
  width: $icon-size-scale-xl,
598
601
  height: $icon-size-scale-xl,
599
602
  svg-path: "#{$asset-icon-path}speech-bubbles.svg",
600
603
  ),
601
- 'calendar': (
604
+ "calendar": (
602
605
  width: $icon-size-scale-xl,
603
606
  height: $icon-size-scale-xl,
604
607
  svg-path: "#{$asset-icon-path}calendar.svg",
605
608
  ),
606
- 'line-graph': (
609
+ "line-graph": (
607
610
  width: $icon-size-scale-xl,
608
611
  height: $icon-size-scale-xl,
609
612
  svg-path: "#{$asset-icon-path}line-graph.svg",
@@ -663,7 +666,7 @@ $mtvh-icons: (
663
666
  height: $icon-size-scale-lg,
664
667
  svg-path: "#{$asset-icon-path}santander.svg",
665
668
  ),
666
- "visacard": (
669
+ "visa": (
667
670
  width: $icon-size-scale-lg,
668
671
  height: $icon-size-scale-lg,
669
672
  svg-path: "#{$asset-icon-path}visacard.svg",
@@ -697,4 +700,8 @@ $mtvh-icons: (
697
700
  width: $icon-size-scale-md,
698
701
  height: $icon-size-scale-md,
699
702
  ),
703
+ "space-sub-block": (
704
+ width: $icon-size-scale-md,
705
+ height: $icon-size-scale-md,
706
+ ),
700
707
  );
package/assets/scss/config/_variables.scss CHANGED
@@ -32,6 +32,7 @@ $link-color: #0072bf;
32
32
  $link-hover-color: #005792;
33
33
  $body-color: #000;
34
34
  $font-family-sans-serif: Arial, sans-serif;
35
+ $font-family-paralucent: var(--mtvh-font), sans-serif;
35
36
 
36
37
  // MTVH Font
37
38
  $mtvh-base-font-size: $font-size-base;
@@ -101,13 +102,14 @@ $mtvh-spacing-8: 2.5rem;
101
102
  $mtvh-spacing-9: 3rem;
102
103
  $mtvh-spacing-10: 3.5rem;
103
104
  $mtvh-spacing-11: 3.75rem;
105
+ $mtvh-spacing-12: 5rem;
104
106
  // custom added bs spacing value
105
107
 
106
108
  $spacer: 1rem;
107
109
  $spacers: (
108
110
  0: 0,
109
111
  1: $spacer * 0.25,
110
- 2: $spacer * 0.5,
112
+ 2: $spacer * 0.375,
111
113
  3: $spacer,
112
114
  4: $spacer * 1.5,
113
115
  5: $spacer * 3,
@@ -119,6 +121,10 @@ $spacers: (
119
121
  16: $mtvh-spacing-6,
120
122
  17: $mtvh-spacing-7,
121
123
  18: $mtvh-spacing-8,
124
+ 19: $mtvh-spacing-9,
125
+ 20: $mtvh-spacing-10,
126
+ 21: $mtvh-spacing-11,
127
+ 22: $mtvh-spacing-12,
122
128
  );
123
129
 
124
130
  $icon-size-scale-xs: 16px !default;
@@ -248,6 +254,7 @@ $content-block-theme-colors: (
248
254
  "purple-01": var(--#{$prefix}purple-01),
249
255
  "purple-02": var(--#{$prefix}purple-02),
250
256
  "stone-02": var(--#{$prefix}stone-02),
257
+ "grey-02": var(--#{$prefix}grey-02),
251
258
  );
252
259
 
253
260
  $content-block-theme-border: (
@@ -333,11 +340,16 @@ $notification-text-color: var(--#{$prefix}white);
333
340
  $box-shadow: 0 0.125rem 0.225rem rgba(0, 0, 0, 0.12);
334
341
 
335
342
  /* pagination */
336
- $pagination-padding-x: 18px;
337
- $pagination-padding-y: 10px;
343
+ $pagination-padding-x: 0;
344
+ $pagination-padding-y: 8px;
338
345
  $pagination-border-radius: 4px;
346
+ $pagination-color: var(--#{$prefix}blue-04);
347
+ $pagination-hover-color: var(--#{$prefix}blue-05);
348
+ $pagination-hover-bg: var(--#{$prefix}white);
339
349
  $pagination-active-bg: var(--#{$prefix}purple-04);
340
350
  $pagination-active-color: var(--#{$prefix}white);
351
+ $pagination-focus-color: var(--#{$prefix}blue-04);
352
+ $pagination-focus-bg: transparent;
341
353
  $pagination-font-size: $font-size-sm;
342
354
  $pagination-focus-box-shadow: unset;
343
355
  $pagination-border-width: 0;