@itfin/components 1.5.0 → 1.5.1

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/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itfin/components",
3
- "version": "1.5.0",
3
+ "version": "1.5.1",
4
4
  "author": "Vitalii Savchuk <esvit666@gmail.com>",
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve",
@@ -1,14 +1,19 @@
1
1
  @import './variables.scss';
2
2
  @import './bootstrap.scss';
3
3
 
4
- $color-income: #398241;
5
- $color-outcome: #C33737;
4
+ $color-income: #0d935b;
5
+ $color-outcome: #b91e1e;
6
6
 
7
7
  :root {
8
8
  --color-income: #{$color-income};
9
9
  --color-outcome: #{$color-outcome};
10
10
  --color-primary: #{$primary};
11
11
  --body-bg: #{$body-bg};
12
+
13
+ .modal-backdrop {
14
+ --bs-backdrop-bg: #{$body-bg};
15
+ --bs-backdrop-opacity: 0.75;
16
+ }
12
17
  }
13
18
 
14
19
  [data-theme="dark"] {
@@ -9,6 +9,16 @@ body[data-theme="dark"] {
9
9
  --bs-link-color: #{$dark-link-color};
10
10
  --bs-link-hover-color: #{darken($dark-link-color, 10%)};
11
11
 
12
+ .color-project-tnm {
13
+ color: lighten($project-tnm, 50%);
14
+ }
15
+ .color-project-fixed {
16
+ color: $project-fixed;
17
+ }
18
+ .color-project-nonprofit {
19
+ color: $project-nonprofit;
20
+ }
21
+
12
22
  .form-control {
13
23
  background-color: $dark-input-bg;
14
24
  border-color: $dark-input-bg;
@@ -50,7 +60,7 @@ body[data-theme="dark"] {
50
60
 
51
61
  .dropdown-menu {
52
62
  --bs-dropdown-link-color: #{$dark-link-color};
53
- --bs-dropdown-link-hover-color: #1e2125;
54
- --bs-dropdown-link-hover-bg: #{$dark-link-color};
63
+ --bs-dropdown-link-hover-bg: rgba(var(--bs-primary-rgb), .15);
64
+ --bs-dropdown-link-active-bg: rgba(var(--bs-primary-rgb), .5);
55
65
  }
56
66
  }
@@ -1,6 +1,6 @@
1
1
  // Include any default variable overrides here
2
- $font-family-base: 'Recht', sans-serif;
3
- $headings-font-family: 'Recht', sans-serif;
2
+ $font-family-base: 'Fira Sans', sans-serif;
3
+ $headings-font-family: 'Fira Sans', sans-serif;
4
4
  $font-family-monospace: "Fira Mono", "Courier New", monospace;
5
5
 
6
6
  $headings-font-size-base: 1rem;
@@ -11,8 +11,7 @@ $h4-font-size: $headings-font-size-base * 1.25;
11
11
  $h5-font-size: $headings-font-size-base * 1.125;
12
12
  $h6-font-size: $headings-font-size-base;
13
13
 
14
- $border-width: 1px;
15
- $zindex-toaster: 1071 !default;
14
+ $zindex-toaster: 1071 !default;
16
15
 
17
16
  $border-radius: .5rem;
18
17
  $border-radius-sm: .375rem;
@@ -28,7 +27,6 @@ $warning: #cda277;
28
27
  $danger: #cb4839;
29
28
 
30
29
  $primary: #0B314F !default;
31
- $secondary: #dfe1e6;
32
30
  $link-color: #0B314F !default;
33
31
  $input-btn-focus-width: .125rem;
34
32
 
@@ -38,7 +36,6 @@ $input-border-radius: 10px;
38
36
  $input-font-size: 0.875rem;
39
37
  $input-font-family: "Fira Mono", "Courier New", monospace;
40
38
 
41
- $input-placeholder-color: #A7AFBB;
42
39
  $input-focus-bg: #fff;
43
40
  $input-focus-border-color: #fff;
44
41
 
@@ -48,13 +45,14 @@ $input-focus-border: rgb(11 49 79 / 25%);
48
45
  $form-check-input-border: 1px solid rgba(#000, .08);
49
46
  $form-switch-focus-color: tint-color($primary, 50%);
50
47
 
51
- $modal-backdrop-bg: #222;
52
- $modal-backdrop-opacity: .5;
53
- $modal-content-border-width: 0;
54
- $modal-footer-border-color: 0;
48
+ $modal-backdrop-bg: #999;
49
+ $modal-backdrop-opacity: .25;
50
+ $modal-content-border-radius: 0;
51
+
52
+ $secondary: #dfe1e6;
55
53
 
56
54
  // popover
57
- $popover-border-width: 1px;
55
+ $popover-border-width: 2px;
58
56
 
59
57
  // dropdown
60
58
 
@@ -89,26 +87,3 @@ $primaryColor15: #DAE0E5;
89
87
  $baseText: #1e1e1e;
90
88
  $gray5: #F0F0F1;
91
89
  $gray50: #787885;
92
-
93
- //$theme-colors: (
94
- // "primary": $primary,
95
- // "secondary": $secondary,
96
- // "success": $success,
97
- // "info": $info,
98
- // "warning": $warning,
99
- // "danger": $danger,
100
- // "blue": $link-color
101
- //);
102
-
103
- // згідно з дизайном
104
- //$body-color: #22222B;
105
- //$dropdown-border-radius: .75rem;
106
- //$dropdown-padding-x: .5rem;
107
- //$dropdown-item-padding-x: .5rem;
108
- //$dropdown-link-hover-bg: #F1F2F4;
109
- //$border-color-translucent: #00000014;
110
- //$dropdown-header-color: #A5A5A9;
111
- //$input-group-addon-bg: $input-bg;
112
- //$form-check-input-checked-bg-color: #22222B;
113
- //$form-check-input-indeterminate-bg-color: #22222B;
114
- //$nav-link-color: $primary;
@@ -45,22 +45,6 @@
45
45
  }
46
46
  }
47
47
 
48
- @supports (-webkit-mask-image:paint(id)) or (-webkit-mask-image:paint(id)) or (mask-image:paint(id)) or (-webkit-mask-image:paint(id)) {
49
- button.itf-button.btn.btn-squircle {
50
- -webkit-mask-image: paint(squircle);
51
- --squircle-smooth: 0.6;
52
- --squircle-radius: 10px;
53
- --squircle-outline: 0px;
54
- --squircle-corners: top-left top-right bottom-left bottom-right;
55
- }
56
- .itf-button.btn-squircle.btn:not(.dropdown-toggle):focus:after {
57
- -webkit-mask-image: paint(squircle);
58
- --squircle-smooth: 0.6;
59
- --squircle-radius: 10px;
60
- --squircle-outline: 3px;
61
- --squircle-corners: top-left top-right bottom-left bottom-right;
62
- }
63
- }
64
48
  .itf-button.btn {
65
49
  display: inline-flex;
66
50
  align-items: center;
@@ -71,20 +55,17 @@
71
55
  &:focus {
72
56
  -webkit-mask-image: none!important;
73
57
  }
74
- &.btn-squircle:focus:after {
75
- border-color: rgb(103, 146, 244);
58
+ &:not(.dropdown-toggle):focus:after {
59
+ border: 3px solid #6792f4;
60
+ border-radius: .5rem;
61
+ content: '';
62
+ position: absolute;
63
+ top: -3px;
64
+ left: -3px;
65
+ right: -3px;
66
+ bottom: -3px;
67
+ outline: none;
76
68
  }
77
- // &:not(.dropdown-toggle):focus:after {
78
- // border: 3px solid #6792f4;
79
- // border-radius: .5rem;
80
- // content: '';
81
- // position: absolute;
82
- // top: -3px;
83
- // left: -3px;
84
- // right: -3px;
85
- // bottom: -3px;
86
- // outline: none;
87
- // }
88
69
  &.itf-button__block {
89
70
  display: block;
90
71
  width: 100%;
@@ -1,14 +1,5 @@
1
1
  @import '../variables';
2
2
 
3
- .itf-checkbox, .itf-radio {
4
-
5
- .form-check-input {
6
- --checkbox-border-color: #d0d4dc;
7
- --bs-form-check-bg: #f5f6f8;
8
- border-color: var(--checkbox-border-color);
9
- }
10
- }
11
-
12
3
  .itf-checkbox {
13
4
  .form-check-input, .form-check-label {
14
5
  cursor: pointer;
@@ -114,7 +114,7 @@
114
114
  --adp-transition-ease: ease-out;
115
115
  --adp-transition-offset: 8px;
116
116
 
117
- --adp-background-color: transparent;
117
+ --adp-background-color: #{$body-bg};
118
118
  --adp-background-color-hover: #f0f0f0;
119
119
  --adp-background-color-active: #eaeaea;
120
120
  --adp-background-color-in-range: rgba(92, 196, 239, .1);
@@ -123,7 +123,7 @@
123
123
  --adp-background-color-selected-other-month: #a2ddf6;
124
124
 
125
125
  --adp-color: #4a4a4a;
126
- --adp-color-secondary: #A5A5A9;
126
+ --adp-color-secondary: #9c9c9c;
127
127
  --adp-accent-color: #4eb5e6;
128
128
  --adp-color-current-date: #{$primary};
129
129
  --adp-color-other-month: #dedede;
@@ -132,7 +132,7 @@
132
132
  --adp-color-other-month-hover: #c5c5c5;
133
133
 
134
134
  --adp-border-color: #dbdbdb;
135
- --adp-border-color-inner: #00000014;
135
+ --adp-border-color-inner: #efefef;
136
136
  --adp-border-radius: 4px;
137
137
  //--adp-border-color-inline: #d7d7d7;
138
138
  --adp-border-color-inline: transparent;
@@ -2,14 +2,11 @@
2
2
 
3
3
  .itf-pagination.pagination {
4
4
  padding-left: 0;
5
- display: flex;
6
- align-items: center;
7
- gap: .5rem;
8
5
 
9
6
  .page-item {
7
+ margin-right: 3px;
10
8
  .page-link {
11
9
  border-radius: .5rem;
12
- padding: .125rem .25rem
13
10
  }
14
11
 
15
12
  &.disabled .page-link {
@@ -35,25 +35,3 @@
35
35
  .nopadding .popover-body {
36
36
  padding: 0;
37
37
  }
38
-
39
- .popover.onboarding-popover {
40
- --bs-popover-max-width: 317px;
41
- --bs-popover-bg: var(--primary);
42
- --bs-popover-border-width: 0px;
43
- --bs-popover-border-color: var(--primary);
44
- --bs-border-radius-lg: 0.5rem;
45
- --bs-popover-body-color: var(--white);
46
- --bs-popover-body-padding-x: 0;
47
- --bs-popover-body-padding-y: 0;
48
- --bs-secondary-rgb: 255, 255, 255;
49
-
50
- a {
51
- --bs-link-color-rgb: 255, 255, 255;
52
- --bs-link-hover-color-rgb: 255, 255, 255;
53
- --bs-link-active-color-rgb: 255, 255, 255;
54
- }
55
-
56
- .border-secondary {
57
- --bs-border-opacity: 0.5;
58
- }
59
- }
@@ -1,18 +1,15 @@
1
1
  @import '../variables';
2
2
 
3
3
  .itf-segmeneted-control {
4
- --itf-segmeneted-control--background: #f5f6f8;
4
+ --itf-segmeneted-control--background: #{$input-bg};
5
5
  --itf-segmeneted-control--border-radius: #{$border-radius};
6
- // --itf-segmeneted-control--shadow: 0 1px 3px rgba(0,0,0,0.1);
7
- --itf-segmeneted-control--shadow: none;
8
- --itf-segmeneted-control--selection-bg: rgba(26, 74, 151, 0.1);
9
- --itf-segmeneted-control--text-active: #1A4A97;
6
+ --itf-segmeneted-control--shadow: 0 1px 3px rgba(0,0,0,0.1);
10
7
 
11
8
  cursor: pointer;
12
9
  background: var(--itf-segmeneted-control--background);
13
- border-radius: $border-radius-lg;
10
+ border-radius: var(--itf-segmeneted-control--border-radius);
14
11
  margin: 0;
15
- padding: 4px;
12
+ padding: 2px;
16
13
  border: none;
17
14
  outline: none;
18
15
  display: inline-grid;
@@ -37,11 +34,9 @@
37
34
  }
38
35
  }
39
36
 
40
- &.small .option label {
41
- padding: 0.125rem 0.25rem;
42
- }
43
37
  .option {
44
38
  position: relative;
39
+ cursor: pointer;
45
40
 
46
41
  &:hover input:not(:checked) + label span,
47
42
  &:active input:not(:checked) + label span,
@@ -81,10 +76,6 @@
81
76
  background: rgba(255, 255, 255, 0);
82
77
  color: rgba(0, 0, 0, 1);
83
78
 
84
- &.disabled {
85
- cursor: not-allowed;
86
- color: rgba(0, 0, 0, .25);
87
- }
88
79
  &::before,
89
80
  &::after {
90
81
  content: '';
@@ -138,9 +129,6 @@
138
129
  &:checked + label {
139
130
  cursor: default;
140
131
  }
141
- &:checked + span {
142
- color: var(--itf-segmeneted-control--text-active);
143
- }
144
132
  &:checked + label::before,
145
133
  &:checked + label::after {
146
134
  background: var(--itf-segmeneted-control--background);
@@ -149,8 +137,9 @@
149
137
  }
150
138
  }
151
139
  .selection {
152
- background: var(--itf-segmeneted-control--selection-bg);
153
- // border: .5px solid rgba(0, 0, 0, 0.04);
140
+ margin-right: 1px;
141
+ background: rgba(255, 255, 255, 1);
142
+ border: .5px solid rgba(0, 0, 0, 0.04);
154
143
  box-shadow: var(--itf-segmeneted-control--shadow);
155
144
  /*box-shadow: 0 3px 8px 0 rgba(0,0,0,0.12), 0 3px 1px 0 rgba(0,0,0,0.04);*/
156
145
  border-radius: var(--itf-segmeneted-control--border-radius);
@@ -29,8 +29,8 @@
29
29
  color: $dark-body-color;
30
30
 
31
31
  &.active, &:active {
32
- background-color: $dark-primary;
33
- color: $dark-body-bg;
32
+ background-color: var(--bs-dropdown-link-active-bg);
33
+ color: var(--bs-dropdown-link-color);
34
34
  }
35
35
  }
36
36
  }
@@ -41,7 +41,7 @@
41
41
  cursor: pointer;
42
42
 
43
43
  .form-control {
44
- padding: 0.125rem 0.75rem;
44
+ padding: 0.3125rem 0.75rem;
45
45
 
46
46
  &.is-valid, &.is-invalid {
47
47
  background-image: none;
@@ -58,14 +58,16 @@
58
58
  padding-bottom: 0.125rem;
59
59
  }
60
60
  &.vs--open .form-control {
61
- //box-shadow: 0 0 0 0.125rem $input-focus-border;
62
- //border-color: $body-bg;
63
- //background: $body-bg;
61
+ box-shadow: 0 0 0 0.125rem $input-focus-border;
62
+ border-color: $body-bg;
63
+ background: $body-bg;
64
64
  }
65
65
  &__dropdown-menu {
66
66
  background-color: $body-bg;
67
67
  //border: 2px solid $input-focus-border;
68
68
  border: 0 none;
69
+ padding-left: 0.125rem !important;
70
+ padding-right: 0.125rem !important;
69
71
  left: -2px;
70
72
  right: -2px;
71
73
  width: auto;
@@ -26,17 +26,15 @@
26
26
  padding-left: .325rem;
27
27
  }
28
28
  }
29
- &.is-valid .input-group-text {
30
- color: var(--bs-form-valid-border-color);
31
- }
32
- &.is-invalid .input-group-text {
33
- color: var(--bs-form-invalid-border-color);
34
- }
35
- .was-validated &.form-control:valid, &.form-control.is-valid,
36
- .was-validated &.form-control:invalid, &.form-control.is-invalid {
37
- background-image: none;
29
+ .addon-end {
30
+ pointer-events: all;
31
+ padding-right: 0.25rem;
38
32
  }
39
33
  }
34
+ .itf-text-field.input-group > .form-control {
35
+ box-shadow: none !important;
36
+ border: 0 none !important;
37
+ }
40
38
 
41
39
  .itf-textarea {
42
40
  &.input-group {
@@ -25,7 +25,6 @@ $max-height: $vs-dropdown-max-height;
25
25
  min-width: $min-width;
26
26
  text-align: left;
27
27
  list-style: none;
28
- background-color: $bg-color;
29
28
  }
30
29
 
31
30
  .vs__no-options {
@@ -42,6 +42,7 @@ $border-radius: $vs-border-radius;
42
42
  margin-right: -9px;
43
43
  align-items: center;
44
44
  padding: 1px 0 0;
45
+ min-width: 33px;
45
46
 
46
47
  .itf-button {
47
48
  margin: -0.25rem 0;
@@ -1,35 +1,30 @@
1
1
  @import '../variables';
2
2
  @import '../bootstrap';
3
3
 
4
- $tooltip-color: #22222B;
4
+ $tooltip-color: #fff9ae;
5
5
  $dark-tooltip-color: #7b52eb;
6
6
 
7
7
  :root {
8
8
  --itf-tooltip-shadow: 0 0 20px 4px rgba(154, 161, 177, .15), 0 4px 80px -8px rgba(36, 40, 47, .25), 0 4px 4px -2px rgba(91, 94, 105, .15);
9
- --itf-tooltip-color: #FFF;
9
+ --itf-tooltip-color: #{$body-color};
10
10
  --itf-tooltip-bg-color: #{$tooltip-color};
11
- --itf-tooltip-font-size: 14px;
12
11
  }
13
12
 
14
13
  [data-theme="dark"] {
15
14
  --itf-tooltip-shadow: 0 0 20px 4px rgba(87, 78, 101, 0.15), 0 4px 80px -8px rgba(211, 208, 219, 0.25), 0 4px 4px -2px rgba(156, 150, 164, 0.15);
16
15
  --itf-tooltip-color: #{$dark-body-color};
17
16
  --itf-tooltip-bg-color: #{$dark-tooltip-color};
18
- --itf-tooltip-font-size: 14px;
17
+ --itf-tooltip-font-size: 0.875rem;
19
18
  }
20
19
 
21
20
  .tippy-box[data-theme~=itfin] {
22
21
  color: var(--itf-tooltip-color);
23
22
  background-color: var(--itf-tooltip-bg-color);
24
23
  font-size: var(--itf-tooltip-font-size);
25
- border-radius: 0.5rem;
24
+ border-radius: 5px;
26
25
  box-shadow: var(--itf-tooltip-shadow);
27
- padding: .25rem .5rem;
26
+ padding: 5px;
28
27
  cursor: default;
29
- a {
30
- color: var(--itf-tooltip-color);
31
- text-decoration: underline;
32
- }
33
28
 
34
29
  &[data-placement^=top] > .tippy-arrow:before {
35
30
  border-top-color: var(--itf-tooltip-bg-color);
@@ -60,51 +60,3 @@ kbd {
60
60
  color: var(--bs-primary-color) !important
61
61
  }
62
62
  }
63
-
64
- // згідно з дизайном
65
- .dropdown-header {
66
- font-size: .75rem;
67
- padding: .75rem .5rem .25rem;
68
-
69
- &:first-child {
70
- padding-top: .25rem;
71
- }
72
- }
73
- //.dropdown-item {
74
- // --bs-dropdown-link-active-bg: #F1F2F4;
75
- // --bs-dropdown-link-active-color: var(--bs-body-color);
76
- // &:not(:last-child) {
77
- // margin-bottom: 1px;
78
- // }
79
- //
80
- // svg {
81
- // color: #8E97A5;
82
- // }
83
- // &:hover svg {
84
- // color: var(--bs-body-color);
85
- // }
86
- //}
87
- body .form-check-input:checked[type=checkbox] {
88
- --bs-form-check-bg-image: url("data:image/svg+xml,%3Csvg width='8' height='5' viewBox='0 0 10 8' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M9 1L3.5 6.5L1 4' stroke='white' stroke-width='1.2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E%0A");
89
- box-shadow: 0px 2px 3px 0px #00000026;
90
- }
91
- body .form-check-input:indeterminate[type=checkbox] {
92
- box-shadow: 0px 2px 3px 0px #00000026;
93
- }
94
- body .text-muted {
95
- color: #7A818E !important;
96
- }
97
- body .form-control {
98
- &:focus {
99
- box-shadow: none !important;
100
- }
101
- }
102
-
103
- @keyframes pulse-shadow {
104
- 0% { box-shadow: 0 0 0 0 rgba(26, 74, 151, 0) }
105
- 50% { box-shadow: 0 0 0 4px rgba(26, 74, 151, 0.15) }
106
- 100% { box-shadow: 0 0 0 0 rgba(26, 74, 151, 0) }
107
- }
108
- .pulsing {
109
- animation: pulse-shadow 3s ease-in-out infinite;
110
- }