@kms-ngx-ui/presentational 18.0.0 → 18.0.2

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 (12) hide show
  1. package/package.json +1 -1
  2. package/src/lib/ui/back-to-top/back-to-top.component.scss +1 -1
  3. package/src/lib/ui/card/card.component.scss +4 -5
  4. package/src/lib/ui/confirmation-dialog/confirmation-dialog.component.scss +1 -1
  5. package/src/lib/ui/dropdown-from-data/dropdown-from-data.component.scss +4 -4
  6. package/src/lib/ui/flyout/flyout.component.scss +32 -32
  7. package/src/lib/ui/icon/icon.component.scss +6 -6
  8. package/src/lib/ui/image-slider/image-slider.component.scss +3 -3
  9. package/src/lib/ui/kms-accordion-item/kms-accordion-item.component.scss +80 -81
  10. package/src/lib/ui/slider/slider.component.scss +8 -8
  11. package/src/lib/ui/yes-no-radiogroup/yes-no-radiogroup.component.scss +2 -2
  12. package/src/styles/tooltip.scss +6 -6
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@kms-ngx-ui/presentational",
3
- "version": "18.0.0",
3
+ "version": "18.0.2",
4
4
  "peerDependencies": {
5
5
  "@angular-slider/ngx-slider": "18.0.0",
6
6
  "@angular/cdk": "~18.2.14",
package/src/lib/ui/back-to-top/back-to-top.component.scss CHANGED
@@ -18,7 +18,7 @@
18
18
 
19
19
  &-inner {
20
20
  border-radius: 50%;
21
- background-color: var(--primaryColor);
21
+ background-color: var(--kms-primary-100);
22
22
  border: 2px solid white;
23
23
  width: calc(#{$size} - 4px);
24
24
  height: calc(#{$size} - 4px);
package/src/lib/ui/card/card.component.scss CHANGED
@@ -1,9 +1,9 @@
1
1
  @mixin card-theme() {
2
2
  .card {
3
- --card-shadow-color: #00000029;
3
+ --card-shadow-color: var(--kms-tertiary-500);
4
4
  --card-shadow: 0px 3px 4px 0px var(--card-shadow-color);
5
- --card-background-color: #fff;
6
- --card-hover-border-color: #000;
5
+ --card-background-color: var(--kms-white)
6
+ --card-hover-border-color: var(--kms-black);
7
7
  --card-image-height: 180px;
8
8
 
9
9
  overflow: hidden;
@@ -18,14 +18,13 @@
18
18
 
19
19
  &.hoverEffect {
20
20
  &:hover {
21
- outline: 1px solid #000;
21
+ outline: 1px solid var(--kms-black);
22
22
  }
23
23
  }
24
24
 
25
25
  &-image {
26
26
  background-color: var(--card-hover-border-color);
27
27
  height: var(--card-image-height);
28
-
29
28
  background-size: cover;
30
29
  justify-content: center;
31
30
  width: auto;
package/src/lib/ui/confirmation-dialog/confirmation-dialog.component.scss CHANGED
@@ -24,7 +24,7 @@
24
24
  }
25
25
  }
26
26
  h4 {
27
- color: var(--accentColor01) !important;
27
+ color: var(--kms-tertiary-100) !important;
28
28
  }
29
29
 
30
30
  // possible sizes
package/src/lib/ui/dropdown-from-data/dropdown-from-data.component.scss CHANGED
@@ -20,15 +20,15 @@
20
20
 
21
21
  &.mat-mdc-checkbox-checked {
22
22
  .mdc-checkbox__background {
23
- background: var(--primaryColor05) !important;
24
- border-color: var(--primaryColor05) !important;
23
+ background: var(--kms-primary-500) !important;
24
+ border-color: var(--kms-primary-500) !important;
25
25
  svg {
26
- color: #fafafa !important;
26
+ color: var(--kms-white) !important;
27
27
  }
28
28
  }
29
29
 
30
30
  .mdc-label {
31
- color: var(--primaryColor05) !important;
31
+ color: var(--kms-primary-500) !important;
32
32
  }
33
33
  }
34
34
  }
package/src/lib/ui/flyout/flyout.component.scss CHANGED
@@ -1,35 +1,35 @@
1
- @mixin flyout-theme(){
2
- .flyout{
3
- position: relative;
4
- display: block;
5
- padding: 20px 45px;
6
-
7
- &-header{
8
- &-more{
9
- font: normal normal normal 16px/25px var(--fontName-text03);
10
- letter-spacing: 0.26px;
11
- color: var(--primaryColor);
12
- cursor: pointer;
13
- kms-icon{
14
- .icon{
15
- width: 16px !important;
16
- height: 20px !important;
17
- svg {
18
- width: 16px !important;
19
- height: 20px !important;
20
- use{
21
- fill: var(--primaryColor);
22
- }
23
- }
24
- }
25
- }
1
+ @mixin flyout-theme() {
2
+ .flyout {
3
+ position: relative;
4
+ display: block;
5
+ padding: 20px 45px;
6
+
7
+ &-header {
8
+ &-more {
9
+ font: normal normal normal 16px/25px var(--fontName-text03);
10
+ letter-spacing: 0.26px;
11
+ color: var(--kms-primary-100);
12
+ cursor: pointer;
13
+ kms-icon {
14
+ .icon {
15
+ width: 16px !important;
16
+ height: 20px !important;
17
+ svg {
18
+ width: 16px !important;
19
+ height: 20px !important;
20
+ use {
21
+ fill: var(--kms-primary-100);
22
+ }
26
23
  }
24
+ }
27
25
  }
28
- &-body {
29
- padding: 0;
30
- margin: 0;
31
- overflow: hidden;
32
- outline: none;
33
- }
26
+ }
27
+ }
28
+ &-body {
29
+ padding: 0;
30
+ margin: 0;
31
+ overflow: hidden;
32
+ outline: none;
34
33
  }
35
- }
34
+ }
35
+ }
package/src/lib/ui/icon/icon.component.scss CHANGED
@@ -42,25 +42,25 @@
42
42
 
43
43
  &_active {
44
44
  cursor: pointer;
45
- fill: var(--primaryColor) !important;
45
+ fill: var(--kms-primary-100) !important;
46
46
 
47
47
  &:hover,
48
48
  &:focus {
49
- fill: var(--primaryColor02) !important;
49
+ fill: var(--kms-primary-200) !important;
50
50
  }
51
51
  }
52
52
 
53
53
  &.color {
54
54
  &-primary {
55
- color: var(--primaryColor);
55
+ color: var(--kms-primary-100);
56
56
  svg use {
57
- fill: var(--primaryColor);
57
+ fill: var(--kms-primary-100);
58
58
  }
59
59
  }
60
60
  &-accent {
61
- color: var(--accentColor);
61
+ color: var(--kms-tertiary-100);
62
62
  svg use {
63
- fill: var(--accentColor);
63
+ fill: var(--kms-tertiary-100);
64
64
  }
65
65
  }
66
66
  &-disabled {
package/src/lib/ui/image-slider/image-slider.component.scss CHANGED
@@ -3,8 +3,8 @@
3
3
  swiper-container {
4
4
  max-width: 800px;
5
5
 
6
- --swiper-navigation-color: #43403e;
7
- --swiper-pagination-color: #43403e;
6
+ --swiper-navigation-color: var(--kms-secondary);
7
+ --swiper-pagination-color: var(--kms-secondary);
8
8
  }
9
9
 
10
10
  swiper-container.swiper-main-view-container {
@@ -53,7 +53,7 @@
53
53
  }
54
54
  &-default {
55
55
  img {
56
- border-color: var(--accentColor);
56
+ border-color: var(--kms-tertiary-100);
57
57
  }
58
58
 
59
59
  .swiper-slide-default-text {
package/src/lib/ui/kms-accordion-item/kms-accordion-item.component.scss CHANGED
@@ -1,95 +1,94 @@
1
1
  @mixin kms-accordion-item-theme() {
2
- .accordion-item {
3
- &.showFlat{
4
- background-color: transparent;
5
- box-shadow: none !important;
6
- border-radius: unset !important;
7
- border-top: solid rgba(189, 188, 187, 0.5);
2
+ .accordion-item {
3
+ &.showFlat {
4
+ background-color: transparent;
5
+ box-shadow: none !important;
6
+ border-radius: unset !important;
7
+ border-top: solid rgba(189, 188, 187, 0.5);
8
+ }
9
+ &.isSmall {
10
+ .accordion-item-header {
11
+ height: 42px;
12
+ padding-top: 0;
13
+ padding-bottom: 0;
14
+
15
+ .accordion-item-title {
16
+ font-size: 16px !important;
17
+ font-weight: 300;
8
18
  }
9
- &.isSmall{
10
- .accordion-item-header{
11
- height: 42px;
12
- padding-top: 0;
13
- padding-bottom: 0;
14
-
15
- .accordion-item-title{
16
- font-size: 16px !important;
17
- font-weight: 300;
18
- }
19
-
20
- .accordion-item-header-icon-wrapper{
21
- kms-icon{
22
-
23
- svg{
24
- height: 16px;
25
- width: 16px;
26
- }
27
- }
28
- }
19
+
20
+ .accordion-item-header-icon-wrapper {
21
+ kms-icon {
22
+ svg {
23
+ height: 16px;
24
+ width: 16px;
29
25
  }
26
+ }
27
+ }
28
+ }
29
+ }
30
+
31
+ .accordion-item-header {
32
+ height: auto;
33
+ padding-top: $base-spacing-hoz;
34
+ padding-bottom: $base-spacing-hoz;
35
+
36
+ .accordion-item-title {
37
+ text-align: left;
38
+ font: 600 22px/38px var(--fontName-text);
39
+ letter-spacing: 0.53px;
40
+ color: var(--gray09);
41
+ margin: 0px;
42
+
43
+ @media (max-width: $responsive-breakpoint) {
44
+ font: 15 18px/23px var(--fontName-text);
45
+ letter-spacing: 0.29px;
46
+ color: var(--gray10);
47
+ //height: 3em;
30
48
  }
31
49
 
32
- .accordion-item-header{
33
- height: auto;
34
- padding-top: $base-spacing-hoz;
35
- padding-bottom: $base-spacing-hoz;
50
+ span {
51
+ display: inline;
36
52
 
37
- .accordion-item-title{
38
- text-align: left;
39
- font: 600 22px/38px var(--fontName-text);
40
- letter-spacing: 0.53px;
41
- color: var(--gray09);
42
- margin: 0px;
43
-
44
- @media (max-width: $responsive-breakpoint) {
45
- font: 15 18px/23px var(--fontName-text);
46
- letter-spacing: 0.29px;
47
- color: var(--gray10);
48
- //height: 3em;
49
- }
53
+ @media (max-width: $responsive-breakpoint) {
54
+ display: block;
55
+ }
56
+ }
57
+ }
50
58
 
51
- span{
52
- display: inline;
59
+ .accordion-item-header-icon-wrapper {
60
+ align-self: center;
53
61
 
54
- @media (max-width: $responsive-breakpoint) {
55
- display: block;
56
- }
57
- }
58
- }
59
-
60
- .accordion-item-header-icon-wrapper{
61
- align-self: center;
62
-
63
- kms-icon{
64
- svg {
65
- height: 22px;
66
- width: 22px;
67
- use{
68
- fill: var(--primaryColor);
69
- }
70
- }
71
- }
72
-
73
- &-desktop{
74
- display: block;
75
- @media (max-width: $responsive-breakpoint) {
76
- display: none;
77
- }
78
- }
79
-
80
- &-mobile{
81
- display: none;
82
- @media (max-width: $responsive-breakpoint) {
83
- display: block;
84
- }
85
- }
62
+ kms-icon {
63
+ svg {
64
+ height: 22px;
65
+ width: 22px;
66
+ use {
67
+ fill: var(--kms-primary-100);
86
68
  }
69
+ }
87
70
  }
88
- }
89
71
 
90
- mat-expansion-panel-header{
91
- @media (max-width: $responsive-breakpoint) {
92
- height: auto !important;
72
+ &-desktop {
73
+ display: block;
74
+ @media (max-width: $responsive-breakpoint) {
75
+ display: none;
76
+ }
93
77
  }
78
+
79
+ &-mobile {
80
+ display: none;
81
+ @media (max-width: $responsive-breakpoint) {
82
+ display: block;
83
+ }
84
+ }
85
+ }
86
+ }
87
+ }
88
+
89
+ mat-expansion-panel-header {
90
+ @media (max-width: $responsive-breakpoint) {
91
+ height: auto !important;
94
92
  }
93
+ }
95
94
  }
package/src/lib/ui/slider/slider.component.scss CHANGED
@@ -8,29 +8,29 @@
8
8
 
9
9
  .ngx-slider {
10
10
  &[disabled] .ngx-slider-pointer {
11
- background-color: #dcdcdc;
11
+ background-color: var(--kms-disabled);
12
12
  &:after {
13
- background-color: #dcdcdc;
13
+ background-color: var(--kms-disabled);
14
14
  }
15
15
  }
16
16
 
17
17
  .ngx-slider {
18
18
  &-pointer {
19
- background-color: #fff;
19
+ background-color: var(--kms-white);
20
20
  &:after {
21
- background-color: #fff;
21
+ background-color: var(--kms-white);
22
22
  visibility: hidden;
23
23
  }
24
- box-shadow: 0px 1px 3px #000;
24
+ box-shadow: 0px 1px 3px var(--kms-black);
25
25
  }
26
26
  &-active {
27
- background-color: var(--primaryColor);
27
+ background-color: var(--kms-primary-100);
28
28
  &:after {
29
- background-color: var(--primaryColor);
29
+ background-color: var(--kms-primary-100);
30
30
  }
31
31
  }
32
32
  &-selection {
33
- background-color: var(--primaryColor);
33
+ background-color: var(--kms-primary-100);
34
34
  visibility: visible;
35
35
  }
36
36
  }
package/src/lib/ui/yes-no-radiogroup/yes-no-radiogroup.component.scss CHANGED
@@ -3,10 +3,10 @@
3
3
  display: flex;
4
4
  .mat-mdc-radio-button {
5
5
  padding-right: 16px;
6
- color: var(--primaryColor01);
6
+ color: var(--kms-primary-100);
7
7
 
8
8
  &.disabled {
9
- color: var(--primaryColor04);
9
+ color: var(--kms-primary-400);
10
10
  }
11
11
  }
12
12
  .mat-radio-button-vertical {
package/src/styles/tooltip.scss CHANGED
@@ -7,8 +7,8 @@
7
7
  left: 0;
8
8
  border-radius: 10px;
9
9
  padding: 16px;
10
- background-color: white;
11
- box-shadow: 0px 6px 4px #00000033;
10
+ background-color: var(--kms-white);
11
+ box-shadow: 0px 6px 4px var(--kms-tertiary-500);
12
12
  max-width: 200px;
13
13
  z-index: 999;
14
14
  text-wrap: wrap;
@@ -19,19 +19,19 @@
19
19
 
20
20
  &__arrow {
21
21
  position: absolute;
22
- background-color: white;
22
+ background-color: var(--kms-white);
23
23
  height: 15px;
24
24
  width: 15px;
25
25
  &--right {
26
- box-shadow: 7px 2px 4px -4px #00000033;
26
+ box-shadow: 7px 2px 4px -4px var(--kms-tertiary-500);
27
27
  }
28
28
 
29
29
  &--left {
30
- box-shadow: 2px 7px 4px -4px #00000033;
30
+ box-shadow: 2px 7px 4px -4px var(--kms-tertiary-500);
31
31
  }
32
32
 
33
33
  &--bottom {
34
- box-shadow: 5px 7px 4px -4px #00000033;
34
+ box-shadow: 5px 7px 4px -4px var(--kms-tertiary-500);
35
35
  }
36
36
  }
37
37
  }