ros.grant.common 2.0.1460 → 2.0.1462

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 (26) hide show
  1. package/Shared/Styles/Themes/_Fonts/OpenSans&Montserrat.less +8 -0
  2. package/Shared/Styles/Themes/_Fonts/ProximaNova.less +8 -0
  3. package/Shared/Styles/Themes/_Fonts/PtSans.less +8 -0
  4. package/Shared/Styles/Themes/_Fonts/VTBGroup.less +8 -0
  5. package/Shared/Styles/Themes/_Fonts/tenorfonts.less +8 -0
  6. package/Shared/Styles/myrtex-lib/components/alert/alert.less +13 -10
  7. package/Shared/Styles/myrtex-lib/components/checkbox/checkbox-indeterminate.less +2 -2
  8. package/Shared/Styles/myrtex-lib/components/checkbox/checkbox-mark.less +1 -1
  9. package/Shared/Styles/myrtex-lib/components/checkbox/checkbox.less +3 -3
  10. package/Shared/Styles/myrtex-lib/components/datepicker/air-datepicker.less +68 -88
  11. package/Shared/Styles/myrtex-lib/components/datepicker/input-datepicker-error.less +8 -9
  12. package/Shared/Styles/myrtex-lib/components/datepicker/input-datepicker-icons.less +19 -1
  13. package/Shared/Styles/myrtex-lib/components/datepicker/input-datepicker-sizes.less +23 -18
  14. package/Shared/Styles/myrtex-lib/components/datepicker/input-datepicker.less +10 -43
  15. package/Shared/Styles/myrtex-lib/components/editor/editor-borders.less +45 -0
  16. package/Shared/Styles/myrtex-lib/components/editor/editor-disabled.less +16 -2
  17. package/Shared/Styles/myrtex-lib/components/editor/editor-error.less +94 -9
  18. package/Shared/Styles/myrtex-lib/components/editor/editor-icons.less +5 -85
  19. package/Shared/Styles/myrtex-lib/components/editor/editor.less +17 -6
  20. package/Shared/Styles/myrtex-lib/components/input-textarea/input-textarea-disabled-block.less +10 -6
  21. package/Shared/Styles/myrtex-lib/components/input-textarea/input-textarea-error.less +5 -5
  22. package/Shared/Styles/myrtex-lib/components/input-textarea/input-textarea-sizes.less +18 -15
  23. package/Shared/Styles/myrtex-lib/components/input-textarea/input-textarea.less +11 -5
  24. package/Shared/Styles/myrtex-lib/components/link/link-monochrome.less +21 -0
  25. package/Shared/Styles/myrtex-lib/components/link/link.less +39 -0
  26. package/package.json +1 -1
package/Shared/Styles/Themes/_Fonts/OpenSans&Montserrat.less CHANGED
@@ -11,6 +11,14 @@
11
11
  }
12
12
 
13
13
  .Open_Montserrat {
14
+ --body-extra-lg-font-family: @body-extra-lg-font-family;
15
+ --body-extra-lg-font-weight: @body-extra-lg-font-weight;
16
+ --body-extra-lg-line-height: @body-extra-lg-line-height;
17
+ --body-extra-lg-font-size: @body-extra-lg-font-size;
18
+ --body-extra-lg-letter-spacing: @body-extra-lg-letter-spacing;
19
+ --body-extra-lg-paragraph-spacing: @body-extra-lg-paragraph-spacing;
20
+ --body-extra-lg-text-case: @body-extra-lg-text-case;
21
+ --body-extra-lg-text-decoration: @body-extra-lg-text-decoration;
14
22
  --body-lg-font-family: @body-lg-font-family;
15
23
  --body-lg-font-weight: @body-lg-font-weight;
16
24
  --body-lg-line-height: @body-lg-line-height;
package/Shared/Styles/Themes/_Fonts/ProximaNova.less CHANGED
@@ -11,6 +11,14 @@
11
11
  }
12
12
 
13
13
  .ProximaNova {
14
+ --body-extra-lg-font-family: @body-extra-lg-font-family;
15
+ --body-extra-lg-font-weight: @body-extra-lg-font-weight;
16
+ --body-extra-lg-line-height: @body-extra-lg-line-height;
17
+ --body-extra-lg-font-size: @body-extra-lg-font-size;
18
+ --body-extra-lg-letter-spacing: @body-extra-lg-letter-spacing;
19
+ --body-extra-lg-paragraph-spacing: @body-extra-lg-paragraph-spacing;
20
+ --body-extra-lg-text-case: @body-extra-lg-text-case;
21
+ --body-extra-lg-text-decoration: @body-extra-lg-text-decoration;
14
22
  --body-lg-font-family: @body-lg-font-family;
15
23
  --body-lg-font-weight: @body-lg-font-weight;
16
24
  --body-lg-line-height: @body-lg-line-height;
package/Shared/Styles/Themes/_Fonts/PtSans.less CHANGED
@@ -11,6 +11,14 @@
11
11
  }
12
12
 
13
13
  .PtSans {
14
+ --body-extra-lg-font-family: @body-extra-lg-font-family;
15
+ --body-extra-lg-font-weight: @body-extra-lg-font-weight;
16
+ --body-extra-lg-line-height: @body-extra-lg-line-height;
17
+ --body-extra-lg-font-size: @body-extra-lg-font-size;
18
+ --body-extra-lg-letter-spacing: @body-extra-lg-letter-spacing;
19
+ --body-extra-lg-paragraph-spacing: @body-extra-lg-paragraph-spacing;
20
+ --body-extra-lg-text-case: @body-extra-lg-text-case;
21
+ --body-extra-lg-text-decoration: @body-extra-lg-text-decoration;
14
22
  --body-lg-font-family: @body-lg-font-family;
15
23
  --body-lg-font-weight: @body-lg-font-weight;
16
24
  --body-lg-line-height: @body-lg-line-height;
package/Shared/Styles/Themes/_Fonts/VTBGroup.less CHANGED
@@ -17,6 +17,14 @@
17
17
  }
18
18
 
19
19
  .VTBGroup {
20
+ --body-extra-lg-font-family: @body-extra-lg-font-family;
21
+ --body-extra-lg-font-weight: @body-extra-lg-font-weight;
22
+ --body-extra-lg-line-height: @body-extra-lg-line-height;
23
+ --body-extra-lg-font-size: @body-extra-lg-font-size;
24
+ --body-extra-lg-letter-spacing: @body-extra-lg-letter-spacing;
25
+ --body-extra-lg-paragraph-spacing: @body-extra-lg-paragraph-spacing;
26
+ --body-extra-lg-text-case: @body-extra-lg-text-case;
27
+ --body-extra-lg-text-decoration: @body-extra-lg-text-decoration;
20
28
  --body-lg-font-family: @body-lg-font-family;
21
29
  --body-lg-font-weight: @body-lg-font-weight;
22
30
  --body-lg-line-height: @body-lg-line-height;
package/Shared/Styles/Themes/_Fonts/tenorfonts.less CHANGED
@@ -11,6 +11,14 @@
11
11
  }
12
12
 
13
13
  .TenorFonts {
14
+ --body-extra-lg-font-family: @body-extra-lg-font-family;
15
+ --body-extra-lg-font-weight: @body-extra-lg-font-weight;
16
+ --body-extra-lg-line-height: @body-extra-lg-line-height;
17
+ --body-extra-lg-font-size: @body-extra-lg-font-size;
18
+ --body-extra-lg-letter-spacing: @body-extra-lg-letter-spacing;
19
+ --body-extra-lg-paragraph-spacing: @body-extra-lg-paragraph-spacing;
20
+ --body-extra-lg-text-case: @body-extra-lg-text-case;
21
+ --body-extra-lg-text-decoration: @body-extra-lg-text-decoration;
14
22
  --body-lg-font-family: @body-lg-font-family;
15
23
  --body-lg-font-weight: @body-lg-font-weight;
16
24
  --body-lg-line-height: @body-lg-line-height;
package/Shared/Styles/myrtex-lib/components/alert/alert.less CHANGED
@@ -1,22 +1,25 @@
1
1
  .mrx-alert {
2
- border-radius: 4px;
3
- padding: 12px 16px;
2
+ border-radius: var(--border-radius-1);
3
+ padding: var(--spacing-3) var(--spacing-4);
4
4
  position: relative;
5
- color: var(--Main1);
6
- font-size: 14px;
7
- line-height: 20px;
5
+ color: var(--neutral-text-primary);
6
+ font-family: var(--body-md-font-family);
7
+ font-size: var(--body-md-font-size);
8
+ font-weight: var(--body-md-font-weight);
9
+ line-height: var(--body-md-line-height);
8
10
 
9
11
  &-title{
10
- font-weight: 700;
11
- font-size: 16px;
12
- line-height: 20px;
13
12
  display: flex;
14
13
  align-items: center;
14
+ font-family: var(--body-lg-bold-font-family);
15
+ font-size: var(--body-lg-bold-font-size);
16
+ font-weight: var(--body-lg-bold-font-weight);
17
+ line-height: var(--body-lg-bold-line-height);
15
18
  }
16
19
 
17
20
  .icon-close{
18
21
  position: absolute;
19
- top: 8px;
20
- right: 8px;
22
+ top: calc(var(--spacing-module) * 2);
23
+ right: calc(var(--spacing-module) * 2);
21
24
  }
22
25
  }
package/Shared/Styles/myrtex-lib/components/checkbox/checkbox-indeterminate.less CHANGED
@@ -6,7 +6,7 @@
6
6
  height: var(--sizing-4);
7
7
  width: var(--sizing-4);
8
8
  min-width: var(--sizing-4);
9
- border: 2px solid var(--neutral-bg-stroke-default);
9
+ border: var(--border-width-checkbox) solid var(--neutral-bg-stroke-default);
10
10
  border-radius: var(--border-radius-1);
11
11
  transition: 0.2s;
12
12
  position: relative;
@@ -17,7 +17,7 @@
17
17
  width: 6px;
18
18
  height: 2px;
19
19
  background-color: var(--brand-bg-primary-default);
20
- border-radius: 2px;
20
+ border-radius: var(--border-radius-1);
21
21
  }
22
22
 
23
23
  &:hover {
package/Shared/Styles/myrtex-lib/components/checkbox/checkbox-mark.less CHANGED
@@ -5,7 +5,7 @@
5
5
  height: var(--sizing-4);
6
6
  width: var(--sizing-4);
7
7
  min-width: var(--sizing-4);
8
- border: 2px solid var(--neutral-bg-stroke-default);
8
+ border: var(--border-width-checkbox) solid var(--neutral-bg-stroke-default);
9
9
  border-radius: var(--border-radius-1);
10
10
  transition: 0.2s;
11
11
  position: relative;
package/Shared/Styles/myrtex-lib/components/checkbox/checkbox.less CHANGED
@@ -1,8 +1,8 @@
1
1
  .mrx-checkbox {
2
- display: flex;
2
+ display: flex !important;
3
3
  align-items: center;
4
- min-height: auto;
5
- margin-bottom: 0;
4
+ min-height: auto !important;
5
+ margin-bottom: 0 !important;
6
6
  overflow: visible;
7
7
  background-color: transparent;
8
8
  cursor: pointer;
package/Shared/Styles/myrtex-lib/components/datepicker/air-datepicker.less CHANGED
@@ -1,31 +1,31 @@
1
1
  .air-datepicker-cell.-day-.-other-month-, .air-datepicker-cell.-year-.-other-decade- {
2
- color: var(--adp-color-other-month)
2
+ color: var(--neutral-text-tertiary)
3
3
  }
4
4
 
5
5
  .air-datepicker-cell.-day-.-other-month-:hover, .air-datepicker-cell.-year-.-other-decade-:hover {
6
- color: var(--adp-color-other-month-hover)
6
+ color: var(--neutral-text-tertiary)
7
7
  }
8
8
 
9
9
  .-disabled-.-focus-.air-datepicker-cell.-day-.-other-month-, .-disabled-.-focus-.air-datepicker-cell.-year-.-other-decade- {
10
- color: var(--adp-color-other-month)
10
+ color: var(--neutral-text-tertiary)
11
11
  }
12
12
 
13
13
  .-selected-.air-datepicker-cell.-day-.-other-month-, .-selected-.air-datepicker-cell.-year-.-other-decade- {
14
- color: #fff;
15
- background: var(--adp-background-color-selected-other-month)
14
+ color: var(--neutral-text-inverse);
15
+ background: var(--brand-bg-secondary-default);
16
16
  }
17
-
17
+
18
18
  .-selected-.-focus-.air-datepicker-cell.-day-.-other-month-, .-selected-.-focus-.air-datepicker-cell.-year-.-other-decade- {
19
- background: var(--adp-background-color-selected-other-month-focused)
19
+ background: var(--brand-bg-secondary-hover);
20
20
  }
21
21
 
22
22
  .-in-range-.air-datepicker-cell.-day-.-other-month-, .-in-range-.air-datepicker-cell.-year-.-other-decade- {
23
- background-color: var(--adp-background-color-in-range);
24
- color: var(--adp-color)
23
+ background-color: var(--neutral-bg-island-default);
24
+ color: var(--neutral-text-primary);
25
25
  }
26
26
 
27
27
  .-in-range-.-focus-.air-datepicker-cell.-day-.-other-month-, .-in-range-.-focus-.air-datepicker-cell.-year-.-other-decade- {
28
- background-color: var(--adp-background-color-in-range-focused)
28
+ background-color: var(--neutral-bg-island-hover)
29
29
  }
30
30
 
31
31
  .air-datepicker-cell.-day-.-other-month-:empty, .air-datepicker-cell.-year-.-other-decade-:empty {
@@ -34,7 +34,7 @@
34
34
  }
35
35
 
36
36
  .air-datepicker-cell {
37
- border-radius: var(--adp-cell-border-radius);
37
+ border-radius: var(--border-radius-1);
38
38
  box-sizing: border-box;
39
39
  cursor: pointer;
40
40
  display: flex;
@@ -45,28 +45,28 @@
45
45
  }
46
46
 
47
47
  .air-datepicker-cell.-focus- {
48
- background: var(--adp-background-color-hover)
48
+ background: var(--neutral-bg-island-default)
49
49
  }
50
50
 
51
51
  .air-datepicker-cell.-current- {
52
- color: var(--adp-color-current-date)
52
+ color: var(--brand-bg-primary-default);
53
53
  }
54
54
 
55
55
  .air-datepicker-cell.-current-.-focus- {
56
- color: var(--adp-color)
56
+ color: var(--neutral-text-primary);
57
57
  }
58
-
58
+
59
59
  .air-datepicker-cell.-current-.-in-range- {
60
- color: var(--adp-color-current-date)
60
+ color: var(--brand-bg-primary-default);
61
61
  }
62
62
 
63
63
  .air-datepicker-cell.-disabled- {
64
64
  cursor: default;
65
- color: var(--adp-color-disabled)
65
+ color: var(--neutral-text-tertiary);
66
66
  }
67
67
 
68
68
  .air-datepicker-cell.-disabled-.-focus- {
69
- color: var(--adp-color-disabled)
69
+ color: var(--neutral-text-tertiary);
70
70
  }
71
71
 
72
72
  .air-datepicker-cell.-disabled-.-in-range- {
@@ -74,47 +74,45 @@
74
74
  }
75
75
 
76
76
  .air-datepicker-cell.-disabled-.-current-.-focus- {
77
- color: var(--adp-color-disabled)
77
+ color: var(--neutral-text-tertiary);
78
78
  }
79
79
 
80
80
  .air-datepicker-cell.-in-range- {
81
- background: var(--adp-cell-background-color-in-range);
81
+ background: var(--brand-bg-secondary-default);
82
82
  border-radius: 0
83
83
  }
84
84
 
85
85
  .air-datepicker-cell.-in-range-:hover {
86
- background: var(--adp-cell-background-color-in-range-hover)
86
+ background: var(--brand-bg-secondary-hover)
87
87
  }
88
88
 
89
89
  .air-datepicker-cell.-range-from- {
90
- border: 1px solid var(--adp-cell-border-color-in-range);
91
- background-color: var(--adp-cell-background-color-in-range);
92
- border-radius: var(--adp-cell-border-radius) 0 0 var(--adp-cell-border-radius)
90
+ background-color: var(--brand-bg-secondary-default);
91
+ border-radius: var(--border-radius-1) 0 0 var(--border-radius-1)
93
92
  }
94
93
 
95
94
  .air-datepicker-cell.-range-to- {
96
- border: 1px solid var(--adp-cell-border-color-in-range);
97
- background-color: var(--adp-cell-background-color-in-range);
98
- border-radius: 0 var(--adp-cell-border-radius) var(--adp-cell-border-radius) 0
95
+ background-color: var(--brand-bg-secondary-hover);
96
+ border-radius: 0 var(--border-radius-1) var(--border-radius-1) 0
99
97
  }
100
98
 
101
99
  .air-datepicker-cell.-range-to-.-range-from- {
102
- border-radius: var(--adp-cell-border-radius)
100
+ border-radius: var(--border-radius-1)
103
101
  }
104
102
 
105
103
  .air-datepicker-cell.-selected- {
106
- color: #fff;
104
+ color: var(--neutral-text-inverse);
107
105
  border: none;
108
- background: var(--adp-cell-background-color-selected)
106
+ background: var(--brand-bg-primary-default)
109
107
  }
110
108
 
111
109
  .air-datepicker-cell.-selected-.-current- {
112
- color: #fff;
113
- background: var(--adp-cell-background-color-selected)
110
+ color: var(--neutral-text-inverse);
111
+ background: var(--brand-bg-primary-default)
114
112
  }
115
113
 
116
114
  .air-datepicker-cell.-selected-.-focus- {
117
- background: var(--adp-cell-background-color-selected-hover)
115
+ background: var(--brand-bg-primary-hover)
118
116
  }
119
117
 
120
118
  .air-datepicker-body {
@@ -132,7 +130,7 @@
132
130
  }
133
131
 
134
132
  .air-datepicker-body--day-name {
135
- color: var(--adp-day-name-color);
133
+ color: var(--brand-text-accent);
136
134
  display: flex;
137
135
  align-items: center;
138
136
  justify-content: center;
@@ -174,7 +172,7 @@
174
172
  justify-content: space-between;
175
173
  border-bottom: 1px solid var(--adp-border-color-inner);
176
174
  min-height: var(--adp-nav-height);
177
- padding: var(--adp-padding);
175
+ padding: var(--adp-padding-small);
178
176
  box-sizing: content-box
179
177
  }
180
178
 
@@ -198,13 +196,13 @@
198
196
  }
199
197
 
200
198
  .air-datepicker-nav--action:hover {
201
- background: var(--adp-background-color-hover)
199
+ background: var(--brand-bg-tertiary-hover);
202
200
  }
203
201
 
204
202
  .air-datepicker-nav--action:active {
205
- background: var(--adp-background-color-active)
203
+ background: var(--brand-bg-tertiary-hover);
206
204
  }
207
-
205
+
208
206
  .air-datepicker-nav--action.-disabled- {
209
207
  visibility: hidden
210
208
  }
@@ -232,11 +230,11 @@
232
230
  }
233
231
 
234
232
  .air-datepicker-nav--title:hover {
235
- background: var(--adp-background-color-hover)
233
+ background: var(--brand-bg-tertiary-hover);
236
234
  }
237
235
 
238
236
  .air-datepicker-nav--title:active {
239
- background: var(--adp-background-color-active)
237
+ background: var(--brand-bg-tertiary-hover);
240
238
  }
241
239
 
242
240
  .air-datepicker-nav--title.-disabled- {
@@ -261,13 +259,13 @@
261
259
  }
262
260
 
263
261
  .air-datepicker-button:hover {
264
- color: var(--adp-btn-color-hover);
265
- background: var(--adp-btn-background-color-hover)
262
+ color: var(--neutral-text-primary);
263
+ background: var(--neutral-bg-island-default)
266
264
  }
267
265
 
268
266
  .air-datepicker-button:focus {
269
- color: var(--adp-btn-color-hover);
270
- background: var(--adp-btn-background-color-hover);
267
+ color: var(--neutral-text-primary);
268
+ background: var(--neutral-bg-island-default);
271
269
  outline: none
272
270
  }
273
271
 
@@ -288,7 +286,7 @@
288
286
  display: grid;
289
287
  grid-template-columns:-webkit-max-content 1fr;
290
288
  grid-template-columns:max-content 1fr;
291
- grid-column-gap: 12px;
289
+ grid-column-gap: var(--spacing-3);
292
290
  align-items: center;
293
291
  position: relative;
294
292
  padding: 0 var(--adp-time-padding-inner)
@@ -312,16 +310,17 @@
312
310
  }
313
311
 
314
312
  .air-datepicker-time--current-hours, .air-datepicker-time--current-minutes {
315
- line-height: 1;
316
- font-size: 19px;
317
- font-family: "Century Gothic", CenturyGothic, AppleGothic, sans-serif;
313
+ font-family: var(--body-extra-lg-font-family);
314
+ font-size: var(--body-extra-lg-font-size);
315
+ font-weight: var(--body-extra-lg-font-weight);
316
+ line-height: var(--body-extra-lg-line-height);
318
317
  position: relative;
319
318
  z-index: 1
320
319
  }
321
320
 
322
321
  .air-datepicker-time--current-hours:after, .air-datepicker-time--current-minutes:after {
323
322
  content: '';
324
- background: var(--adp-background-color-hover);
323
+ background: var(--brand-bg-tertiary-hover);
325
324
  border-radius: var(--adp-border-radius);
326
325
  position: absolute;
327
326
  left: -2px;
@@ -393,24 +392,24 @@
393
392
  }
394
393
 
395
394
  .air-datepicker-time--row input[type='range']:focus::-webkit-slider-thumb {
396
- background: var(--adp-cell-background-color-selected);
397
- border-color: var(--adp-cell-background-color-selected)
395
+ background: var(--brand-bg-primary-default);
396
+ border-color: var(--brand-bg-primary-default)
398
397
  }
399
398
 
400
399
  .air-datepicker-time--row input[type='range']:focus::-moz-range-thumb {
401
- background: var(--adp-cell-background-color-selected);
402
- border-color: var(--adp-cell-background-color-selected)
400
+ background: var(--brand-bg-primary-default);
401
+ border-color: var(--brand-bg-primary-default)
403
402
  }
404
403
 
405
404
  .air-datepicker-time--row input[type='range']:focus::-ms-thumb {
406
- background: var(--adp-cell-background-color-selected);
407
- border-color: var(--adp-cell-background-color-selected)
405
+ background: var(--brand-bg-primary-default);
406
+ border-color: var(--brand-bg-primary-default)
408
407
  }
409
408
 
410
409
  .air-datepicker-time--row input[type='range']::-webkit-slider-thumb {
411
410
  box-sizing: border-box;
412
- height: 12px;
413
- width: 12px;
411
+ height: var(--sizing-3);
412
+ width: var(--sizing-3);
414
413
  border-radius: 3px;
415
414
  border: 1px solid var(--adp-time-track-color);
416
415
  background: #fff;
@@ -421,8 +420,8 @@
421
420
 
422
421
  .air-datepicker-time--row input[type='range']::-moz-range-thumb {
423
422
  box-sizing: border-box;
424
- height: 12px;
425
- width: 12px;
423
+ height: var(--sizing-3);
424
+ width: var(--sizing-3);
426
425
  border-radius: 3px;
427
426
  border: 1px solid var(--adp-time-track-color);
428
427
  background: #fff;
@@ -433,8 +432,8 @@
433
432
 
434
433
  .air-datepicker-time--row input[type='range']::-ms-thumb {
435
434
  box-sizing: border-box;
436
- height: 12px;
437
- width: 12px;
435
+ height: var(--sizing-3);
436
+ width: var(--sizing-3);
438
437
  border-radius: 3px;
439
438
  border: 1px solid var(--adp-time-track-color);
440
439
  background: #fff;
@@ -480,30 +479,20 @@
480
479
  }
481
480
 
482
481
  .air-datepicker {
483
- --adp-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif, "Apple Color Emoji", "Segoe UI Emoji", "Segoe UI Symbol";
484
- --adp-font-size: 14px;
485
- --adp-width: 246px;
482
+ --adp-font-family: var(--body-md-font-family);
483
+ --adp-font-size: var(--body-md-font-size);
484
+ --adp-width: 248px;
486
485
  --adp-z-index: 100;
487
- --adp-padding: 4px;
486
+ --adp-padding: 12px;
487
+ --adp-padding-small: 8px;
488
488
  --adp-grid-areas: 'nav' 'body' 'timepicker' 'buttons';
489
489
  --adp-transition-duration: .3s;
490
490
  --adp-transition-ease: ease-out;
491
491
  --adp-transition-offset: 8px;
492
492
  --adp-background-color: #fff;
493
- --adp-background-color-hover: #f0f0f0;
494
- --adp-background-color-active: #eaeaea;
495
- --adp-background-color-in-range: rgba(92, 196, 239, .1);
496
- --adp-background-color-in-range-focused: rgba(92, 196, 239, .2);
497
- --adp-background-color-selected-other-month-focused: #8ad5f4;
498
- --adp-background-color-selected-other-month: #a2ddf6;
499
- --adp-color: #4a4a4a;
500
493
  --adp-color-secondary: #9c9c9c;
501
494
  --adp-accent-color: #4eb5e6;
502
- --adp-color-current-date: var(--adp-accent-color);
503
- --adp-color-other-month: #dedede;
504
- --adp-color-disabled: #aeaeae;
505
495
  --adp-color-disabled-in-range: #939393;
506
- --adp-color-other-month-hover: #c5c5c5;
507
496
  --adp-border-color: #dbdbdb;
508
497
  --adp-border-color-inner: #efefef;
509
498
  --adp-border-radius: 4px;
@@ -514,25 +503,16 @@
514
503
  --adp-nav-color-secondary: var(--adp-color-secondary);
515
504
  --adp-day-name-color: #ff9a19;
516
505
  --adp-day-name-color-hover: #8ad5f4;
517
- --adp-day-cell-width: 1fr;
506
+ --adp-day-cell-width: 32px;
518
507
  --adp-day-cell-height: 32px;
519
508
  --adp-month-cell-height: 42px;
520
509
  --adp-year-cell-height: 56px;
521
510
  --adp-pointer-size: 10px;
522
511
  --adp-poiner-border-radius: 2px;
523
512
  --adp-pointer-offset: 14px;
524
- --adp-cell-border-radius: 4px;
525
- --adp-cell-background-color-selected: #5cc4ef;
526
- --adp-cell-background-color-selected-hover: #45bced;
527
- --adp-cell-background-color-in-range: rgba(92, 196, 239, 0.1);
528
- --adp-cell-background-color-in-range-hover: rgba(92, 196, 239, 0.2);
529
- --adp-cell-border-color-in-range: var(--adp-cell-background-color-selected);
530
513
  --adp-btn-height: 32px;
531
514
  --adp-btn-color: var(--adp-accent-color);
532
- --adp-btn-color-hover: var(--adp-color);
533
515
  --adp-btn-border-radius: var(--adp-border-radius);
534
- --adp-btn-background-color-hover: var(--adp-background-color-hover);
535
- --adp-btn-background-color-active: var(--adp-background-color-active);
536
516
  --adp-time-track-height: 1px;
537
517
  --adp-time-track-color: #dedede;
538
518
  --adp-time-track-color-hover: #b1b1b1;
@@ -567,7 +547,7 @@
567
547
  grid-template-areas:var(--adp-grid-areas);
568
548
  font-family: var(--adp-font-family), sans-serif;
569
549
  font-size: var(--adp-font-size);
570
- color: var(--adp-color);
550
+ color: var(--neutral-text-primary);
571
551
  width: var(--adp-width);
572
552
  position: absolute;
573
553
  transition: opacity var(--adp-transition-duration) var(--adp-transition-ease), transform var(--adp-transition-duration) var(--adp-transition-ease);
@@ -754,7 +734,7 @@
754
734
  }
755
735
 
756
736
  .air-datepicker--buttons, .air-datepicker--time {
757
- padding: var(--adp-padding);
737
+ padding: var(--spacing-2) var(--spacing-3);
758
738
  border-top: 1px solid var(--adp-border-color-inner);
759
739
  }
760
740
 
package/Shared/Styles/myrtex-lib/components/datepicker/input-datepicker-error.less CHANGED
@@ -1,22 +1,21 @@
1
1
  .mrx-input-datepicker {
2
-
3
2
  &.mrx-input-error {
4
- input {
5
- border-color: var(--Red);
3
+ .mrx-input-datepicker__input {
4
+ border-color: var(--system-bg-controls-negative-default);
6
5
  }
7
6
  }
8
7
 
9
8
  &.mrx-input-checked-error {
10
- input {
11
- border-color: var(--Red);
12
- background-color: var(--Warning);
9
+ .mrx-input-datepicker__input {
10
+ border-color: var(--system-bg-controls-negative-default);
11
+ background-color: var(--system-bg-negative-secondary);
13
12
  }
14
13
  }
15
14
 
16
15
  &.mrx-input-checked-success {
17
- input {
18
- background-color: var(--Good);
19
- border: 1px solid #60A772;
16
+ .mrx-input-datepicker__input {
17
+ background-color: var(--system-bg-positive-secondary);
18
+ border-color: var(--system-bg-controls-positive-default);
20
19
  }
21
20
  }
22
21
  }
package/Shared/Styles/myrtex-lib/components/datepicker/input-datepicker-icons.less CHANGED
@@ -3,7 +3,6 @@
3
3
  position: absolute;
4
4
  top: 0;
5
5
  right: 0;
6
- height: 100%;
7
6
  display: flex;
8
7
  align-items: center;
9
8
 
@@ -15,4 +14,23 @@
15
14
  cursor: pointer;
16
15
  }
17
16
  }
17
+
18
+ &.mrx-input-datepicker-lg {
19
+ .mrx-icon {
20
+ margin-top: calc(var(--spacing-3) - var(--border-width-default));
21
+ margin-right: var(--spacing-3);
22
+ }
23
+ }
24
+ &.mrx-input-datepicker-md {
25
+ .mrx-icon {
26
+ margin-top: calc(var(--spacing-2) - var(--border-width-default));
27
+ margin-right: var(--spacing-3);
28
+ }
29
+ }
30
+ &.mrx-input-datepicker-sm {
31
+ .mrx-icon {
32
+ margin-top: calc(var(--spacing-2) - var(--border-width-default));
33
+ margin-right: var(--spacing-2);
34
+ }
35
+ }
18
36
  }
package/Shared/Styles/myrtex-lib/components/datepicker/input-datepicker-sizes.less CHANGED
@@ -1,31 +1,36 @@
1
1
  .mrx-input-datepicker {
2
2
  &.mrx-input-datepicker-lg {
3
- input {
4
- font-weight: 400;
5
- font-size: 14px;
6
- line-height: 20px;
7
- border-radius: 4px;
8
- padding: 13px 16px;
3
+ .mrx-input-datepicker__input {
4
+ // 15px = 12px(3 шага отступа) + 2px(половина шага) - 1px(ширина бордера)
5
+ padding: calc(var(--spacing-3) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-4) - var(--border-width-default));
6
+ font-family: var(--body-md-font-family);
7
+ font-size: var(--body-md-font-size);
8
+ font-weight: var(--body-md-font-weight);
9
+ line-height: var(--body-md-line-height);
10
+
11
+ .with-cancel {
12
+
13
+ }
9
14
  }
10
15
  }
11
16
 
12
17
  &.mrx-input-datepicker-md {
13
- input {
14
- font-weight: 400;
15
- font-size: 14px;
16
- line-height: 20px;
17
- border-radius: 4px;
18
- padding: 9px 12px;
18
+ .mrx-input-datepicker__input {
19
+ padding: calc(var(--spacing-2) + var(--spacing-helf) - var(--border-width-default)) calc(var(--spacing-3) - var(--border-width-default));
20
+ font-family: var(--body-md-font-family);
21
+ font-size: var(--body-md-font-size);
22
+ font-weight: var(--body-md-font-weight);
23
+ line-height: var(--body-md-line-height);
19
24
  }
20
25
  }
21
26
 
22
27
  &.mrx-input-datepicker-sm {
23
- input {
24
- font-weight: 400;
25
- font-size: 12px;
26
- line-height: 16px;
27
- border-radius: 4px;
28
- padding: 7px 8px;
28
+ .mrx-input-datepicker__input {
29
+ padding: calc(var(--spacing-2) - var(--border-width-default)) calc(var(--spacing-2) - var(--border-width-default));
30
+ font-family: var(--body-sm-font-family);
31
+ font-size: var(--body-sm-font-size);
32
+ font-weight: var(--body-sm-font-weight);
33
+ line-height: var(--body-sm-line-height);
29
34
  }
30
35
  }
31
36
  }
package/Shared/Styles/myrtex-lib/components/datepicker/input-datepicker.less CHANGED
@@ -1,26 +1,3 @@
1
- .mrx-input-datepicker {
2
- &__wrapper {
3
- position: relative;
4
- }
5
-
6
- .inputbox-icons {
7
- position: absolute;
8
- top: 0;
9
- right: 0;
10
- height: 100%;
11
- display: flex;
12
- align-items: center;
13
- padding-right: 15px;
14
- }
15
-
16
- .inputbox-icon {
17
- cursor: pointer;
18
- &:not(:last-child) {
19
- padding-right: 15px;
20
- }
21
- }
22
- }
23
-
24
1
  .mrx-input-datepicker {
25
2
  width: 100%;
26
3
  position: relative;
@@ -29,32 +6,22 @@
29
6
  position: relative;
30
7
  }
31
8
 
32
- input {
33
- border: 1px solid var(--Stroke);
9
+ .mrx-input-datepicker__input {
10
+ border: var(--border-width-default) solid var(--neutral-bg-stroke-default);
11
+ border-radius: var(--border-radius-1);
34
12
  width: 100%;
35
- outline: none;
36
- transition: 0.2s;
37
-
38
- &:focus {
39
- box-shadow: 0px 0px 0px 4px var(--Bg1);
40
- }
13
+ transition: outline-width 0.2s, border 0.2s;
41
14
 
42
- &:disabled {
43
- background-color: var(--Disabled);
15
+ &:focus, &:active {
16
+ outline: var(--neutral-bg-island-default) solid var(--border-width-focused);
44
17
  }
45
- }
46
18
 
47
- &.mrx-input__readonly {
48
- input[type=tel] {
49
- &:disabled {
50
- background-color: inherit;
51
- }
19
+ &:hover {
20
+ border: var(--border-width-default) solid var(--neutral-bg-stroke-hover);
52
21
  }
53
- }
54
22
 
55
- &.mrx-input__readonly {
56
- input {
57
- background-color: inherit;
23
+ &:disabled {
24
+ background-color: var(--neutral-bg-disabled);
58
25
  }
59
26
  }
60
27
  }
package/Shared/Styles/myrtex-lib/components/editor/editor-borders.less ADDED
@@ -0,0 +1,45 @@
1
+ .mrx-editor {
2
+ .ck.ck-reset.ck-editor.ck-rounded-corners {
3
+ .ck.ck-toolbar.ck-toolbar_grouping {
4
+ transition: border .2s;
5
+ border-top: var(--border-width-default) solid var(--neutral-bg-stroke-default);
6
+ border-left: var(--border-width-default) solid var(--neutral-bg-stroke-default);
7
+ border-right: var(--border-width-default) solid var(--neutral-bg-stroke-default);
8
+ }
9
+
10
+ .ck.ck-editor__editable_inline {
11
+ transition: border .2s;
12
+ border: var(--border-width-default) solid var(--neutral-bg-stroke-default);
13
+ }
14
+
15
+ &.focused {
16
+ outline: var(--neutral-bg-island-default) solid var(--border-width-focused);
17
+
18
+ .ck.ck-toolbar.ck-toolbar_grouping {
19
+ border-top: var(--border-width-default) solid var(--neutral-bg-stroke-hover);
20
+ border-left: var(--border-width-default) solid var(--neutral-bg-stroke-hover);
21
+ border-right: var(--border-width-default) solid var(--neutral-bg-stroke-hover);
22
+ }
23
+
24
+ .ck.ck-editor__editable_inline {
25
+ border: var(--border-width-default) solid var(--neutral-bg-stroke-hover);
26
+ }
27
+ }
28
+
29
+ &:hover {
30
+ .ck.ck-toolbar.ck-toolbar_grouping {
31
+ border-top: var(--border-width-default) solid var(--neutral-bg-stroke-hover);
32
+ border-left: var(--border-width-default) solid var(--neutral-bg-stroke-hover);
33
+ border-right: var(--border-width-default) solid var(--neutral-bg-stroke-hover);
34
+ }
35
+
36
+ .ck.ck-editor__editable_inline {
37
+ border: var(--border-width-default) solid var(--neutral-bg-stroke-hover) !important;
38
+ }
39
+ }
40
+ }
41
+
42
+ .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
43
+ box-shadow: none;
44
+ }
45
+ }
package/Shared/Styles/myrtex-lib/components/editor/editor-disabled.less CHANGED
@@ -1,7 +1,21 @@
1
1
  .mrx-editor {
2
+ &.mrx-editor-disabled {
3
+ * {
4
+ color: var(--neutral-text-tertiary);
5
+ }
6
+
7
+ .ck.ck-reset.ck-editor.ck-rounded-corners {
8
+ .ck.ck-editor__editable_inline {
9
+ background-color: var(--neutral-bg-disabled) !important;
10
+ }
11
+ }
12
+ }
13
+
2
14
  &.mrx-editor-readonly {
3
- .ck.ck-button.ck-disabled .ck-button__icon, .ck.ck-button.ck-disabled .ck-button__label, a.ck.ck-button.ck-disabled .ck-button__icon, a.ck.ck-button.ck-disabled .ck-button__label {
4
- opacity: 1 !important;
15
+ .ck.ck-reset.ck-editor.ck-rounded-corners {
16
+ .ck.ck-editor__editable_inline {
17
+ background-color: var(--neutral-bg-disabled) !important;
18
+ }
5
19
  }
6
20
  }
7
21
  }
package/Shared/Styles/myrtex-lib/components/editor/editor-error.less CHANGED
@@ -1,22 +1,107 @@
1
1
  .mrx-editor {
2
+ &.mrx-input-error, &.mrx-input-checked-error {
3
+ .ck.ck-reset.ck-editor.ck-rounded-corners {
4
+ .ck.ck-toolbar.ck-toolbar_grouping {
5
+ transition: border .2s;
6
+ border-top: var(--border-width-default) solid var(--system-bg-controls-negative-default) !important;
7
+ border-left: var(--border-width-default) solid var(--system-bg-controls-negative-default) !important;
8
+ border-right: var(--border-width-default) solid var(--system-bg-controls-negative-default) !important;
9
+ }
2
10
 
3
- &.mrx-input-error {
4
- .ck.ck-editor__main>.ck-editor__editable {
5
- border-color: var(--Red) !important;
11
+ .ck.ck-editor__editable_inline {
12
+ transition: border .2s;
13
+ border: var(--border-width-default) solid var(--system-bg-controls-negative-default) !important;
14
+ }
15
+
16
+ &.focused {
17
+ outline: var(--neutral-bg-island-default) solid var(--border-width-focused);
18
+
19
+ .ck.ck-toolbar.ck-toolbar_grouping {
20
+ border-top: var(--border-width-default) solid var(--system-bg-controls-negative-default) !important;
21
+ border-left: var(--border-width-default) solid var(--system-bg-controls-negative-default) !important;
22
+ border-right: var(--border-width-default) solid var(--system-bg-controls-negative-default) !important;
23
+ }
24
+
25
+ .ck.ck-editor__editable_inline {
26
+ border: var(--border-width-default) solid var(--system-bg-controls-negative-default) !important;
27
+ }
28
+ }
29
+
30
+ &:hover {
31
+ .ck.ck-toolbar.ck-toolbar_grouping {
32
+ border-top: var(--border-width-default) solid var(--system-bg-controls-negative-default) !important;
33
+ border-left: var(--border-width-default) solid var(--system-bg-controls-negative-default) !important;
34
+ border-right: var(--border-width-default) solid var(--system-bg-controls-negative-default) !important;
35
+ }
36
+ .ck.ck-editor__editable_inline {
37
+ border: var(--border-width-default) solid var(--system-bg-controls-negative-default) !important;
38
+ }
39
+ }
40
+ }
41
+
42
+ .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
43
+ box-shadow: none;
44
+ }
45
+ }
46
+
47
+ &.mrx-input-success, &.mrx-input-checked-success {
48
+ .ck.ck-reset.ck-editor.ck-rounded-corners {
49
+ .ck.ck-toolbar.ck-toolbar_grouping {
50
+ transition: border .2s;
51
+ border-top: var(--border-width-default) solid var(--system-bg-controls-positive-default) !important;
52
+ border-left: var(--border-width-default) solid var(--system-bg-controls-positive-default) !important;
53
+ border-right: var(--border-width-default) solid var(--system-bg-controls-positive-default) !important;
54
+ }
55
+
56
+ .ck.ck-editor__editable_inline {
57
+ transition: border .2s;
58
+ border: var(--border-width-default) solid var(--system-bg-controls-positive-default) !important;
59
+ }
60
+
61
+ &.focused {
62
+ outline: var(--neutral-bg-island-default) solid var(--border-width-focused);
63
+
64
+ .ck.ck-toolbar.ck-toolbar_grouping {
65
+ border-top: var(--border-width-default) solid var(--system-bg-controls-positive-default) !important;
66
+ border-left: var(--border-width-default) solid var(--system-bg-controls-positive-default) !important;
67
+ border-right: var(--border-width-default) solid var(--system-bg-controls-positive-default) !important;
68
+ }
69
+
70
+ .ck.ck-editor__editable_inline {
71
+ border: var(--border-width-default) solid var(--system-bg-controls-positive-default) !important;
72
+ }
73
+ }
74
+
75
+ &:hover {
76
+ .ck.ck-toolbar.ck-toolbar_grouping {
77
+ border-top: var(--border-width-default) solid var(--system-bg-controls-positive-default) !important;
78
+ border-left: var(--border-width-default) solid var(--system-bg-controls-positive-default) !important;
79
+ border-right: var(--border-width-default) solid var(--system-bg-controls-positive-default) !important;
80
+ }
81
+ .ck.ck-editor__editable_inline {
82
+ border: var(--border-width-default) solid var(--system-bg-controls-positive-default) !important;
83
+ }
84
+ }
85
+ }
86
+
87
+ .ck.ck-editor__editable.ck-focused:not(.ck-editor__nested-editable) {
88
+ box-shadow: none;
6
89
  }
7
90
  }
8
91
 
9
92
  &.mrx-input-checked-error {
10
- .ck.ck-editor__main>.ck-editor__editable {
11
- border-color: var(--Red) !important;
12
- background-color: var(--Warning) !important;
93
+ .ck.ck-reset.ck-editor.ck-rounded-corners {
94
+ .ck.ck-editor__editable_inline {
95
+ background-color: var(--system-bg-negative-secondary) !important;
96
+ }
13
97
  }
14
98
  }
15
99
 
16
100
  &.mrx-input-checked-success {
17
- .ck.ck-editor__main>.ck-editor__editable {
18
- background-color: var(--Good) !important;
19
- border: 1px solid #60A772 !important;
101
+ .ck.ck-reset.ck-editor.ck-rounded-corners {
102
+ .ck.ck-editor__editable_inline {
103
+ background-color: var(--system-bg-positive-secondary) !important;
104
+ }
20
105
  }
21
106
  }
22
107
  }
package/Shared/Styles/myrtex-lib/components/editor/editor-icons.less CHANGED
@@ -1,7 +1,7 @@
1
1
  .mrx-editor {
2
2
  .ck.ck-button:not(.ck-splitbutton__arrow) {
3
3
  .ck.ck-icon:not(.ck-dropdown__arrow) {
4
- width: 25px;
4
+ width: calc(var(--sizing-6) + 1px);
5
5
  height: 100%;
6
6
  will-change: auto;
7
7
  }
@@ -9,99 +9,19 @@
9
9
 
10
10
  &:not(.mrx-editor-theme-default) {
11
11
  .ck.ck-button:not(.ck-disabled):hover, a.ck.ck-button:not(.ck-disabled):hover {
12
- background-color: var(--Bg2);
13
-
14
- svg {
15
- path, rect {
16
- &.fill {
17
- fill: var(--Subsidiary);
18
- }
19
- &.stroke {
20
- stroke: var(--Subsidiary);
21
- }
22
- &.back {
23
- fill: var(--Bg2);
24
- }
25
- }
26
- }
27
- }
28
-
29
- .ck.ck-splitbutton.ck-splitbutton_open>.ck-button:not(.ck-on):not(.ck-disabled):not(:hover), .ck.ck-splitbutton:hover>.ck-button:not(.ck-on):not(.ck-disabled):not(:hover) {
30
- background-color: var(--Bg2);
31
-
32
- svg {
33
- path, rect {
34
- &.fill {
35
- fill: var(--Subsidiary);
36
- }
37
- &.stroke {
38
- stroke: var(--Subsidiary);
39
- }
40
- &.back {
41
- fill: var(--Bg2);
42
- }
43
- }
44
- }
45
- }
46
-
47
- .ck.ck-button.ck-on, a.ck.ck-button.ck-on {
48
- background-color: var(--Bg2);
49
-
50
- svg {
51
- path, rect {
52
- &.fill {
53
- fill: var(--Subsidiary);
54
- }
55
- &.stroke {
56
- stroke: var(--Subsidiary);
57
- }
58
- &.back {
59
- fill: var(--Bg2);
60
- }
61
- }
62
- }
63
- }
64
-
65
- .ck.ck-button.ck-on, a.ck.ck-button.ck-on {
66
- svg.ck-dropdown__arrow {
67
- path {
68
- fill: var(--Subsidiary);
69
- }
70
- }
71
- }
72
-
73
-
74
-
75
- .ck.ck-button.ck-on:not(.ck-disabled):hover, a.ck.ck-button.ck-on:not(.ck-disabled):hover {
76
- background-color: var(--Bg2)
77
- }
78
- }
79
-
80
- &.mrx-editor-theme-default {
81
- .ck.ck-button:not(.ck-disabled):hover, a.ck.ck-button:not(.ck-disabled):hover {
82
- background-color: #FBF5EE;
12
+ background-color: var(--brand-bg-tertiary-selected);
83
13
  }
84
14
 
85
15
  .ck.ck-splitbutton.ck-splitbutton_open>.ck-button:not(.ck-on):not(.ck-disabled):not(:hover), .ck.ck-splitbutton:hover>.ck-button:not(.ck-on):not(.ck-disabled):not(:hover) {
86
- background-color: #FBF5EE;
87
- }
88
-
89
- .ck.ck-button.ck-on, a.ck.ck-button.ck-on {
90
- background-color: #FBF5EE;
16
+ background-color: var(--brand-bg-tertiary-selected);
91
17
  }
92
18
 
93
19
  .ck.ck-button.ck-on, a.ck.ck-button.ck-on {
94
- svg.ck-dropdown__arrow {
95
- path {
96
- fill: var(--Subsidiary);
97
- }
98
- }
20
+ background-color: var(--brand-bg-tertiary-selected);
99
21
  }
100
22
 
101
-
102
-
103
23
  .ck.ck-button.ck-on:not(.ck-disabled):hover, a.ck.ck-button.ck-on:not(.ck-disabled):hover {
104
- background-color: #FBF5EE;
24
+ background-color: var(--brand-bg-tertiary-selected);
105
25
  }
106
26
  }
107
27
 
package/Shared/Styles/myrtex-lib/components/editor/editor.less CHANGED
@@ -1,5 +1,9 @@
1
1
  .mrx-editor {
2
2
  position: relative;
3
+ font-family: var(--body-md-font-family);
4
+ font-size: var(--body-md-font-size);
5
+ font-weight: var(--body-md-font-weight);
6
+ line-height: var(--body-md-line-height);
3
7
 
4
8
  .ck-editor {
5
9
  label.ck-label.ck-voice-label {
@@ -16,13 +20,13 @@
16
20
  }
17
21
 
18
22
  .ck-rounded-corners .ck.ck-editor__top .ck-sticky-panel .ck-toolbar, .ck.ck-editor__top .ck-sticky-panel .ck-toolbar.ck-rounded-corners {
19
- border-top-right-radius: 4px !important;
20
- border-top-left-radius: 4px !important;
23
+ border-top-right-radius: var(--border-radius-1) !important;
24
+ border-top-left-radius: var(--border-radius-1) !important;
21
25
  }
22
26
 
23
27
  .ck-rounded-corners .ck.ck-editor__main>.ck-editor__editable, .ck.ck-editor__main>.ck-editor__editable.ck-rounded-corners {
24
- border-bottom-right-radius: 4px !important;
25
- border-bottom-left-radius: 4px !important;
28
+ border-bottom-right-radius: var(--border-radius-1) !important;
29
+ border-bottom-left-radius: var(--border-radius-1) !important;
26
30
  }
27
31
 
28
32
  .ck.ck-toolbar {
@@ -30,8 +34,15 @@
30
34
  }
31
35
 
32
36
  .ck.ck-editor__editable_inline {
33
- padding: 12px 16px;
34
- border: 1px solid #DAD5CE !important;
37
+ padding: var(--spacing-3) var(--spacing-4);
35
38
  margin-bottom: 0 !important;
36
39
  }
40
+
41
+ .ck.ck-editor__editable_inline>:first-child {
42
+ margin-top: var(--spacing-helf);
43
+ }
44
+
45
+ .ck.ck-editor__editable_inline>:last-child {
46
+ margin-bottom: var(--spacing-helf);
47
+ }
37
48
  }
package/Shared/Styles/myrtex-lib/components/input-textarea/input-textarea-disabled-block.less CHANGED
@@ -1,12 +1,16 @@
1
1
  .mrx-input-textarea {
2
2
  &__disabled-block {
3
- background-color: var(--Disabled);
4
- color: var(--Main1);
5
- border: solid 1px var(--Stroke);
6
- border-radius: 4px;
7
- line-height: 160%;
3
+ min-height: var(--spacing-12);
4
+ background-color: var(--neutral-bg-disabled);
5
+ font-family: var(--body-md-font-family);
6
+ font-size: var(--body-md-font-size);
7
+ font-weight: var(--body-md-font-weight);
8
+ line-height: var(--body-md-line-height);
9
+ color: var(--neutral-text-tertiary);
10
+ padding: calc(var(--spacing-3) + 1px) var(--spacing-4);
11
+ border: var(--border-width-default) solid var(--neutral-bg-stroke-default);
12
+ border-radius: var(--border-radius-1);
8
13
  resize: none;
9
- padding: 12px 16px;
10
14
  z-index: 1;
11
15
  }
12
16
  }
package/Shared/Styles/myrtex-lib/components/input-textarea/input-textarea-error.less CHANGED
@@ -2,21 +2,21 @@
2
2
 
3
3
  &.mrx-input-error {
4
4
  textarea {
5
- border-color: var(--Red);
5
+ border-color: var(--system-bg-controls-negative-default);
6
6
  }
7
7
  }
8
8
 
9
9
  &.mrx-input-checked-error {
10
10
  textarea {
11
- border-color: var(--Red);
12
- background-color: var(--Warning);
11
+ border-color: var(--system-bg-controls-negative-default);
12
+ background-color: var(--system-bg-negative-secondary);
13
13
  }
14
14
  }
15
15
 
16
16
  &.mrx-input-checked-success {
17
17
  textarea {
18
- background-color: var(--Good);
19
- border: 1px solid #60A772;
18
+ background-color: var(--system-bg-positive-secondary);
19
+ border-color: var(--system-bg-controls-positive-default);
20
20
  }
21
21
  }
22
22
  }
package/Shared/Styles/myrtex-lib/components/input-textarea/input-textarea-sizes.less CHANGED
@@ -1,31 +1,34 @@
1
1
  .mrx-input-textarea {
2
2
  &.mrx-input-lg {
3
3
  textarea {
4
- font-weight: 400;
5
- font-size: 14px;
6
- line-height: 20px;
7
- border-radius: 4px;
8
- padding: 13px 16px;
4
+ padding: calc(var(--spacing-3) + 1px) var(--spacing-4);
5
+ border-radius: var(--border-radius-1);
6
+ font-family: var(--body-md-font-family);
7
+ font-size: var(--body-md-font-size);
8
+ font-weight: var(--body-md-font-weight);
9
+ line-height: var(--body-md-line-height);
9
10
  }
10
11
  }
11
12
 
12
13
  &.mrx-input-md {
13
14
  textarea {
14
- font-weight: 400;
15
- font-size: 14px;
16
- line-height: 20px;
17
- border-radius: 4px;
18
- padding: 9px 12px;
15
+ padding: calc(var(--sizing-2) + 1px) var(--spacing-3);
16
+ border-radius: var(--border-radius-1);
17
+ font-family: var(--body-md-font-family);
18
+ font-size: var(--body-md-font-size);
19
+ font-weight: var(--body-md-font-weight);
20
+ line-height: var(--body-md-line-height);
19
21
  }
20
22
  }
21
23
 
22
24
  &.mrx-input-sm {
23
25
  textarea {
24
- font-weight: 400;
25
- font-size: 12px;
26
- line-height: 16px;
27
- border-radius: 4px;
28
- padding: 7px 8px;
26
+ padding: calc(var(--sizing-2) - 1px) var(--spacing-2);
27
+ border-radius: var(--border-radius-1);
28
+ font-family: var(--body-sm-font-family);
29
+ font-size: var(--body-sm-font-size);
30
+ font-weight: var(--body-sm-font-weight);
31
+ line-height: var(--body-sm-line-height);
29
32
  }
30
33
  }
31
34
  }
package/Shared/Styles/myrtex-lib/components/input-textarea/input-textarea.less CHANGED
@@ -2,13 +2,19 @@
2
2
  textarea {
3
3
  display: block;
4
4
  box-sizing: border-box;
5
- border: solid 1px var(--Stroke);
6
- border-radius: 4px;
7
- color: var(--Main1);
5
+ border: var(--border-width-default) solid var(--neutral-bg-stroke-default);
6
+ color: var(--neutral-text-primary);
8
7
  width: 100%;
9
- font-family: 'PT Sans',sans-serif;
10
- transition: all .3s ease-in-out;
11
8
  overflow: auto;
12
9
  resize: none;
10
+ transition: outline-width 0.2s, border 0.2s;
11
+
12
+ &:focus, &:active {
13
+ outline: var(--neutral-bg-island-default) solid var(--border-width-focused);
14
+ }
15
+
16
+ &:hover {
17
+ border: var(--border-width-default) solid var(--neutral-bg-stroke-hover);
18
+ }
13
19
  }
14
20
  }
package/Shared/Styles/myrtex-lib/components/link/link-monochrome.less ADDED
@@ -0,0 +1,21 @@
1
+ .mrx-link {
2
+ &.mrx-link-monochrome {
3
+ &.mrx-link-navigational {
4
+ color: var(--neutral-text-primary);
5
+ border-bottom: var(--border-width-default) solid var(--neutral-bg-stroke-default);
6
+
7
+ &:hover {
8
+ border-bottom: var(--border-width-default) solid var(--neutral-text-primary);
9
+ }
10
+ }
11
+
12
+ &.mrx-link-pseudo {
13
+ color: var(--neutral-text-primary);
14
+ border-bottom: var(--border-width-default) dashed var(--neutral-bg-stroke-default);
15
+
16
+ &:hover {
17
+ border-bottom: var(--border-width-default) dashed var(--neutral-text-primary);
18
+ }
19
+ }
20
+ }
21
+ }
package/Shared/Styles/myrtex-lib/components/link/link.less ADDED
@@ -0,0 +1,39 @@
1
+ .mrx-link {
2
+ display: inline;
3
+ position: relative;
4
+
5
+ &.mrx-link-colored {
6
+ &.mrx-link-default {
7
+ color: var(--system-text-link-default);
8
+
9
+ &:hover {
10
+ border-bottom: var(--border-width-default) solid var(--system-text-link-default);
11
+ }
12
+
13
+ &:visited {
14
+ color: var(--system-text-link-visited);
15
+
16
+ &:hover {
17
+ border-bottom: var(--border-width-default) solid var(--system-text-link-visited);
18
+ }
19
+ }
20
+ }
21
+ //dash10б gap5
22
+ &.mrx-link-navigational {
23
+ color: var(--brand-text-nav-link);
24
+
25
+ &:hover {
26
+ border-bottom: var(--border-width-default) solid var(--brand-bg-primary-default);
27
+ }
28
+ }
29
+
30
+ &.mrx-link-pseudo {
31
+ color: var(--brand-text-nav-link);
32
+ border-bottom: var(--border-width-default) dashed var(--neutral-bg-stroke-default);
33
+
34
+ &:hover {
35
+ border-bottom: var(--border-width-default) dashed var(--brand-bg-primary-default);
36
+ }
37
+ }
38
+ }
39
+ }
package/package.json CHANGED
@@ -1,5 +1,5 @@
1
1
  {
2
- "version": "2.0.1460",
2
+ "version": "2.0.1462",
3
3
  "name": "ros.grant.common",
4
4
  "private": false,
5
5
  "scripts": {