@epam/uui 4.11.0-alpha.0 → 4.11.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (210) hide show
  1. package/assets/styles/buttonLayout.scss +66 -66
  2. package/assets/styles/controlLayout.scss +27 -27
  3. package/assets/styles/effects.scss +9 -9
  4. package/assets/styles/font-faces.scss +51 -51
  5. package/assets/styles/icons.scss +18 -18
  6. package/assets/styles/index.scss +7 -7
  7. package/assets/styles/inputs.scss +69 -69
  8. package/assets/styles/layout-mixins.scss +8 -8
  9. package/assets/styles/prettifyScrollBar.scss +52 -52
  10. package/assets/styles/text-layout.scss +80 -80
  11. package/assets/styles/text-size.scss +37 -37
  12. package/assets/styles/typography-mixins.scss +159 -0
  13. package/assets/styles/typography.scss +38 -3
  14. package/assets/styles/variables/widgets/badge.scss +50 -50
  15. package/components/buttons/Button/Button.d.ts +12 -12
  16. package/components/buttons/Button/Button.test.d.ts +1 -1
  17. package/components/buttons/Button/index.d.ts +1 -1
  18. package/components/buttons/IconButton.d.ts +9 -9
  19. package/components/buttons/LinkButton.d.ts +7 -7
  20. package/components/buttons/TabButton.d.ts +7 -7
  21. package/components/buttons/VerticalTabButton.d.ts +4 -4
  22. package/components/buttons/helper.d.ts +2 -2
  23. package/components/buttons/index.d.ts +5 -5
  24. package/components/datePickers/Calendar.d.ts +4 -4
  25. package/components/datePickers/CalendarPresets.d.ts +3 -3
  26. package/components/datePickers/DatePicker.d.ts +12 -12
  27. package/components/datePickers/DatePickerBody.d.ts +3 -3
  28. package/components/datePickers/RangeDatePicker.d.ts +12 -12
  29. package/components/datePickers/RangeDatePickerBody.d.ts +3 -3
  30. package/components/datePickers/index.d.ts +5 -5
  31. package/components/dnd/DropMarker.d.ts +8 -8
  32. package/components/dnd/index.d.ts +1 -1
  33. package/components/filters/FilterDataPickerBody.d.ts +14 -0
  34. package/components/filters/FilterDataPickerBody.d.ts.map +1 -0
  35. package/components/filters/FilterItemBody.d.ts +3 -0
  36. package/components/filters/FilterItemBody.d.ts.map +1 -0
  37. package/components/filters/FilterNumericBody.d.ts +13 -0
  38. package/components/filters/FilterNumericBody.d.ts.map +1 -0
  39. package/components/filters/FilterPanelItemToggler.d.ts +13 -0
  40. package/components/filters/FilterPanelItemToggler.d.ts.map +1 -0
  41. package/components/filters/FilterPickerBody.d.ts +20 -0
  42. package/components/filters/FilterPickerBody.d.ts.map +1 -0
  43. package/components/filters/FilterRangeDatePickerBody.d.ts +19 -0
  44. package/components/filters/FilterRangeDatePickerBody.d.ts.map +1 -0
  45. package/components/filters/FiltersPanel.d.ts +9 -0
  46. package/components/filters/FiltersPanel.d.ts.map +1 -0
  47. package/components/filters/FiltersPanelItem.d.ts +8 -0
  48. package/components/filters/FiltersPanelItem.d.ts.map +1 -0
  49. package/components/filters/PresetPanel/Preset.d.ts +9 -0
  50. package/components/filters/PresetPanel/Preset.d.ts.map +1 -0
  51. package/components/filters/PresetPanel/PresetActionsDropdown.d.ts +10 -0
  52. package/components/filters/PresetPanel/PresetActionsDropdown.d.ts.map +1 -0
  53. package/components/filters/PresetPanel/PresetInput.d.ts +9 -0
  54. package/components/filters/PresetPanel/PresetInput.d.ts.map +1 -0
  55. package/components/filters/PresetPanel/PresetsPanel.d.ts +7 -0
  56. package/components/filters/PresetPanel/PresetsPanel.d.ts.map +1 -0
  57. package/components/filters/PresetPanel/index.d.ts +2 -0
  58. package/components/filters/PresetPanel/index.d.ts.map +1 -0
  59. package/components/filters/defaultPredicates.d.ts +5 -0
  60. package/components/filters/defaultPredicates.d.ts.map +1 -0
  61. package/components/filters/index.d.ts +5 -0
  62. package/components/filters/index.d.ts.map +1 -0
  63. package/components/forms/Form.d.ts +4 -0
  64. package/components/forms/Form.d.ts.map +1 -0
  65. package/components/forms/index.d.ts +3 -0
  66. package/components/forms/index.d.ts.map +1 -0
  67. package/components/forms/useForm.d.ts +3 -0
  68. package/components/forms/useForm.d.ts.map +1 -0
  69. package/components/index.d.ts +14 -11
  70. package/components/index.d.ts.map +1 -1
  71. package/components/inputs/Checkbox.d.ts +8 -8
  72. package/components/inputs/MultiSwitch.d.ts +15 -15
  73. package/components/inputs/NumericInput.d.ts +8 -8
  74. package/components/inputs/RadioInput.d.ts +6 -6
  75. package/components/inputs/Switch.d.ts +6 -6
  76. package/components/inputs/TextArea.d.ts +9 -9
  77. package/components/inputs/TextInput.d.ts +12 -12
  78. package/components/inputs/index.d.ts +7 -7
  79. package/components/layout/Accordion.d.ts +6 -7
  80. package/components/layout/Accordion.d.ts.map +1 -1
  81. package/components/layout/Blocker.d.ts +4 -0
  82. package/components/layout/Blocker.d.ts.map +1 -0
  83. package/components/layout/CheckboxGroup.d.ts +3 -0
  84. package/components/layout/CheckboxGroup.d.ts.map +1 -0
  85. package/components/layout/ControlGroup.d.ts +2 -2
  86. package/components/layout/FlexItems/FlexCell.d.ts +11 -11
  87. package/components/layout/FlexItems/FlexRow.d.ts +16 -16
  88. package/components/layout/FlexItems/FlexSpacer.d.ts +4 -4
  89. package/components/layout/FlexItems/Panel.d.ts +7 -7
  90. package/components/layout/FlexItems/index.d.ts +4 -4
  91. package/components/layout/LabeledInput.d.ts +5 -5
  92. package/components/layout/RadioGroup.d.ts +2 -2
  93. package/components/layout/ScrollBars.d.ts +3 -3
  94. package/components/layout/VirtualList.d.ts +2 -2
  95. package/components/layout/index.d.ts +10 -8
  96. package/components/layout/index.d.ts.map +1 -1
  97. package/components/navigation/MainMenu/Burger/Burger.d.ts +6 -0
  98. package/components/navigation/MainMenu/Burger/Burger.d.ts.map +1 -0
  99. package/components/navigation/MainMenu/Burger/BurgerButton.d.ts +8 -0
  100. package/components/navigation/MainMenu/Burger/BurgerButton.d.ts.map +1 -0
  101. package/components/navigation/MainMenu/Burger/BurgerGroupHeader.d.ts +5 -0
  102. package/components/navigation/MainMenu/Burger/BurgerGroupHeader.d.ts.map +1 -0
  103. package/components/navigation/MainMenu/Burger/BurgerSearch.d.ts +5 -0
  104. package/components/navigation/MainMenu/Burger/BurgerSearch.d.ts.map +1 -0
  105. package/components/navigation/MainMenu/Burger/index.d.ts +5 -0
  106. package/components/navigation/MainMenu/Burger/index.d.ts.map +1 -0
  107. package/components/navigation/MainMenu/GlobalMenu.d.ts +6 -0
  108. package/components/navigation/MainMenu/GlobalMenu.d.ts.map +1 -0
  109. package/components/navigation/MainMenu/MainMenu.d.ts +5 -0
  110. package/components/navigation/MainMenu/MainMenu.d.ts.map +1 -0
  111. package/components/navigation/MainMenu/MainMenuAvatar.d.ts +8 -0
  112. package/components/navigation/MainMenu/MainMenuAvatar.d.ts.map +1 -0
  113. package/components/navigation/MainMenu/MainMenuButton.d.ts +7 -0
  114. package/components/navigation/MainMenu/MainMenuButton.d.ts.map +1 -0
  115. package/components/navigation/MainMenu/MainMenuDropdown.d.ts +6 -0
  116. package/components/navigation/MainMenu/MainMenuDropdown.d.ts.map +1 -0
  117. package/components/navigation/MainMenu/MainMenuIcon.d.ts +8 -0
  118. package/components/navigation/MainMenu/MainMenuIcon.d.ts.map +1 -0
  119. package/components/navigation/MainMenu/MainMenuSearch.d.ts +7 -0
  120. package/components/navigation/MainMenu/MainMenuSearch.d.ts.map +1 -0
  121. package/components/navigation/MainMenu/index.d.ts +9 -0
  122. package/components/navigation/MainMenu/index.d.ts.map +1 -0
  123. package/components/navigation/index.d.ts +2 -0
  124. package/components/navigation/index.d.ts.map +1 -0
  125. package/components/overlays/Alert.d.ts +24 -0
  126. package/components/overlays/Alert.d.ts.map +1 -0
  127. package/components/overlays/ConfirmationModal.d.ts +11 -0
  128. package/components/overlays/ConfirmationModal.d.ts.map +1 -0
  129. package/components/overlays/Dropdown.d.ts +5 -5
  130. package/components/overlays/DropdownContainer.d.ts +8 -5
  131. package/components/overlays/DropdownContainer.d.ts.map +1 -1
  132. package/components/overlays/DropdownMenu.d.ts +33 -33
  133. package/components/overlays/Modals.d.ts +19 -22
  134. package/components/overlays/Modals.d.ts.map +1 -1
  135. package/components/overlays/NotificationCard.d.ts +25 -30
  136. package/components/overlays/NotificationCard.d.ts.map +1 -1
  137. package/components/overlays/Tooltip.d.ts +5 -5
  138. package/components/overlays/index.d.ts +7 -6
  139. package/components/overlays/index.d.ts.map +1 -1
  140. package/components/pickers/DataPickerBody.d.ts +16 -16
  141. package/components/pickers/DataPickerFooter.d.ts +8 -8
  142. package/components/pickers/DataPickerHeader.d.ts +7 -7
  143. package/components/pickers/DataPickerRow.d.ts +15 -15
  144. package/components/pickers/MobileDropdownWrapper.d.ts +10 -10
  145. package/components/pickers/PickerInput.d.ts +16 -16
  146. package/components/pickers/PickerItem.d.ts +13 -13
  147. package/components/pickers/PickerList.d.ts +17 -17
  148. package/components/pickers/PickerList.d.ts.map +1 -1
  149. package/components/pickers/PickerListItem.d.ts +8 -8
  150. package/components/pickers/PickerModal.d.ts +16 -16
  151. package/components/pickers/PickerToggler.d.ts +7 -7
  152. package/components/pickers/index.d.ts +11 -11
  153. package/components/tables/ColumnHeaderDropdown/ColumnHeaderDropdown.d.ts +13 -13
  154. package/components/tables/ColumnHeaderDropdown/SortingPanel.d.ts +7 -7
  155. package/components/tables/ColumnHeaderDropdown/index.d.ts +1 -1
  156. package/components/tables/DataTable.d.ts +15 -15
  157. package/components/tables/DataTable.d.ts.map +1 -1
  158. package/components/tables/DataTableCell.d.ts +4 -4
  159. package/components/tables/DataTableCell.d.ts.map +1 -1
  160. package/components/tables/DataTableHeaderCell.d.ts +18 -18
  161. package/components/tables/DataTableHeaderRow.d.ts +4 -4
  162. package/components/tables/DataTableRow.d.ts +10 -10
  163. package/components/tables/columnsConfigurationModal/ColumnRow.d.ts +6 -6
  164. package/components/tables/columnsConfigurationModal/ColumnsConfigurationModal.d.ts +9 -9
  165. package/components/tables/columnsConfigurationModal/PinIconButton.d.ts +9 -9
  166. package/components/tables/columnsConfigurationModal/index.d.ts +1 -1
  167. package/components/tables/index.d.ts +8 -8
  168. package/components/tables/types.d.ts +31 -31
  169. package/components/types.d.ts +34 -32
  170. package/components/types.d.ts.map +1 -1
  171. package/components/typography/RichTextView.d.ts +7 -0
  172. package/components/typography/RichTextView.d.ts.map +1 -0
  173. package/components/typography/Text.d.ts +11 -11
  174. package/components/typography/Text.d.ts.map +1 -1
  175. package/components/typography/TextPlaceholder.d.ts +9 -7
  176. package/components/typography/TextPlaceholder.d.ts.map +1 -1
  177. package/components/typography/index.d.ts +3 -2
  178. package/components/typography/index.d.ts.map +1 -1
  179. package/components/widgets/Avatar.d.ts +2 -2
  180. package/components/widgets/Badge.d.ts +14 -14
  181. package/components/widgets/Spinner.d.ts +6 -0
  182. package/components/widgets/Spinner.d.ts.map +1 -0
  183. package/components/widgets/Tag.d.ts +8 -8
  184. package/components/widgets/index.d.ts +4 -3
  185. package/components/widgets/index.d.ts.map +1 -1
  186. package/helpers/index.d.ts +3 -0
  187. package/helpers/index.d.ts.map +1 -0
  188. package/helpers/textLayout.d.ts +8 -8
  189. package/helpers/useColumnsWithFilters.d.ts +3 -0
  190. package/helpers/useColumnsWithFilters.d.ts.map +1 -0
  191. package/i18n.d.ts +103 -90
  192. package/i18n.d.ts.map +1 -1
  193. package/icons/icons.d.ts +3 -3
  194. package/index.d.ts +4 -3
  195. package/index.d.ts.map +1 -1
  196. package/index.js +2771 -1684
  197. package/index.js.map +1 -1
  198. package/package.json +5 -5
  199. package/readme.md +4 -4
  200. package/stats.html +1 -1
  201. package/styles.css +8578 -2507
  202. package/styles.css.map +1 -1
  203. package/assets/styles/fonts-variables.scss +0 -24
  204. package/assets/styles/variables/layout/accordion.scss +0 -10
  205. package/assets/styles/variables/overlays/dropdownContainer.scss +0 -5
  206. package/assets/styles/variables/overlays/notificationCard.scss +0 -28
  207. package/assets/styles/variables/typography/text.scss +0 -19
  208. package/assets/styles/variables/typography/textPlaceholder.scss +0 -4
  209. package/components/layout/IconContainer.d.ts +0 -8
  210. package/components/layout/IconContainer.d.ts.map +0 -1
@@ -1,66 +1,66 @@
1
- @use './text-size' as *;
2
-
3
- @mixin button-layout($size, $borderWidth) {
4
- @include button-horizontal-layout($size, $borderWidth);
5
- @include button-vertical-layout($size, $borderWidth);
6
- }
7
-
8
- @mixin link-button-layout($size) {
9
- @include link-button-horizontal-layout($size);
10
- @include button-vertical-layout($size, 0);
11
- }
12
-
13
- @mixin button-vertical-layout($size, $borderWidth) {
14
- &:global(.uui-button-box) {
15
- min-height: $size;
16
- border-width: $borderWidth;
17
- }
18
-
19
- :global(.uui-caption) {
20
- @include text-size($size, $borderWidth);
21
-
22
- @if ($size == 42px or $size == 48px) {
23
- font-size: 14px;
24
- }
25
- }
26
- }
27
-
28
- @mixin button-horizontal-layout($size, $borderWidth) {
29
- min-width: $size;
30
-
31
- @if ($size == 24px) {
32
- @include button-padding(6px, 6px, $borderWidth);
33
- } @else if ($size == 30px) {
34
- @include button-padding(6px, 6px, $borderWidth);
35
- } @else if ($size == 36px) {
36
- @include button-padding(6px, 6px, $borderWidth);
37
- } @else if ($size == 42px) {
38
- @include button-padding(12px, 6px, $borderWidth);
39
- } @else if ($size == 48px) {
40
- @include button-padding(12px, 6px, $borderWidth);
41
- } @else {
42
- @include button-padding(6px, 6px, $borderWidth)
43
- }
44
- }
45
-
46
- @mixin button-padding($controlPadding, $captionPadding, $borderWidth) {
47
- padding-left: $controlPadding - $borderWidth;
48
- padding-right: $controlPadding - $borderWidth;
49
-
50
- :global(.uui-caption) {
51
- padding-left: $captionPadding;
52
- padding-right: $captionPadding;
53
- }
54
- }
55
-
56
- @mixin link-button-horizontal-layout($size) {
57
- min-width: $size;
58
-
59
- &:global(.uui-has-left-icon) :global(.uui-caption) {
60
- padding-left: 6px;
61
- }
62
-
63
- &:global(.uui-has-right-icon) :global(.uui-caption) {
64
- padding-right: 6px;
65
- }
66
- }
1
+ @use './text-size' as *;
2
+
3
+ @mixin button-layout($size, $borderWidth) {
4
+ @include button-horizontal-layout($size, $borderWidth);
5
+ @include button-vertical-layout($size, $borderWidth);
6
+ }
7
+
8
+ @mixin link-button-layout($size) {
9
+ @include link-button-horizontal-layout($size);
10
+ @include button-vertical-layout($size, 0);
11
+ }
12
+
13
+ @mixin button-vertical-layout($size, $borderWidth) {
14
+ &:global(.uui-button-box) {
15
+ min-height: $size;
16
+ border-width: $borderWidth;
17
+ }
18
+
19
+ :global(.uui-caption) {
20
+ @include text-size($size, $borderWidth);
21
+
22
+ @if ($size == 42px or $size == 48px) {
23
+ font-size: 14px;
24
+ }
25
+ }
26
+ }
27
+
28
+ @mixin button-horizontal-layout($size, $borderWidth) {
29
+ min-width: $size;
30
+
31
+ @if ($size == 24px) {
32
+ @include button-padding(6px, 6px, $borderWidth);
33
+ } @else if ($size == 30px) {
34
+ @include button-padding(6px, 6px, $borderWidth);
35
+ } @else if ($size == 36px) {
36
+ @include button-padding(6px, 6px, $borderWidth);
37
+ } @else if ($size == 42px) {
38
+ @include button-padding(12px, 6px, $borderWidth);
39
+ } @else if ($size == 48px) {
40
+ @include button-padding(12px, 6px, $borderWidth);
41
+ } @else {
42
+ @include button-padding(6px, 6px, $borderWidth)
43
+ }
44
+ }
45
+
46
+ @mixin button-padding($controlPadding, $captionPadding, $borderWidth) {
47
+ padding-left: $controlPadding - $borderWidth;
48
+ padding-right: $controlPadding - $borderWidth;
49
+
50
+ :global(.uui-caption) {
51
+ padding-left: $captionPadding;
52
+ padding-right: $captionPadding;
53
+ }
54
+ }
55
+
56
+ @mixin link-button-horizontal-layout($size) {
57
+ min-width: $size;
58
+
59
+ &:global(.uui-has-left-icon) :global(.uui-caption) {
60
+ padding-left: 6px;
61
+ }
62
+
63
+ &:global(.uui-has-right-icon) :global(.uui-caption) {
64
+ padding-right: 6px;
65
+ }
66
+ }
@@ -1,28 +1,28 @@
1
- @use 'text-size' as *;
2
-
3
- @mixin control-vertical-layout($size, $borderWidth) {
4
- :global(.uui-caption), :global(.uui-input) {
5
- @include text-size($size, $borderWidth);
6
- }
7
-
8
- &:global(.uui-button-box), &:global(.uui-input-box) {
9
- min-height: $size;
10
- border-width: $borderWidth;
11
- }
12
- }
13
-
14
- @mixin control-box-layout($size, $borderWidth) {
15
- min-width: $size;
16
- padding-left: 5px;
17
- padding-right: 5px;
18
-
19
- :global(.uui-caption), :global(.uui-input) {
20
- padding-left: 6px;
21
- padding-right: 6px;
22
- }
23
-
24
- &:global(.uui-button-box), &:global(.uui-input-box) {
25
- min-height: $size;
26
- border-width: $borderWidth;
27
- }
1
+ @use 'text-size' as *;
2
+
3
+ @mixin control-vertical-layout($size, $borderWidth) {
4
+ :global(.uui-caption), :global(.uui-input) {
5
+ @include text-size($size, $borderWidth);
6
+ }
7
+
8
+ &:global(.uui-button-box), &:global(.uui-input-box) {
9
+ min-height: $size;
10
+ border-width: $borderWidth;
11
+ }
12
+ }
13
+
14
+ @mixin control-box-layout($size, $borderWidth) {
15
+ min-width: $size;
16
+ padding-left: 5px;
17
+ padding-right: 5px;
18
+
19
+ :global(.uui-caption), :global(.uui-input) {
20
+ padding-left: 6px;
21
+ padding-right: 6px;
22
+ }
23
+
24
+ &:global(.uui-button-box), &:global(.uui-input-box) {
25
+ min-height: $size;
26
+ border-width: $borderWidth;
27
+ }
28
28
  }
@@ -1,10 +1,10 @@
1
- @mixin panel-shadow() { box-shadow: var(--uui-panel-shadow); }
2
-
3
- @mixin panel-top-shadow() { box-shadow: inset 0 10px 5px -10px rgba(51, 51, 51, 0.2); }
4
-
5
- //@mixin button-focus-shadow() { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); } // TODO: design?
6
-
7
- @mixin dnd-ghost-shadow() { box-shadow: 0 6px 18px 0 rgba(29,30,38,0.05), 0 3px 12px 0 rgba(29,30,38,0.05); }
8
-
9
- //@mixin control-focus-effect($name) { box-shadow: 0 0 0 2px fade-out($name, 0.6); } // TODO: design?
1
+ @mixin panel-shadow() { box-shadow: var(--uui-panel-shadow); }
2
+
3
+ @mixin panel-top-shadow() { box-shadow: inset 0 10px 5px -10px rgba(51, 51, 51, 0.2); }
4
+
5
+ //@mixin button-focus-shadow() { box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1); } // TODO: design?
6
+
7
+ @mixin dnd-ghost-shadow() { box-shadow: 0 6px 18px 0 rgba(29,30,38,0.05), 0 3px 12px 0 rgba(29,30,38,0.05); }
8
+
9
+ //@mixin control-focus-effect($name) { box-shadow: 0 0 0 2px fade-out($name, 0.6); } // TODO: design?
10
10
  @mixin control-focus-effect() { box-shadow: 0 0 0 2px rgba(0, 137 ,204, 0.40); }
@@ -1,52 +1,52 @@
1
- @font-face {
2
- font-family: 'Sans Regular';
3
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Regular.ttf.woff2') format('woff2'),
4
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Regular.otf.woff') format('woff'),
5
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Regular.otf') format('opentype'),
6
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Regular.ttf') format('truetype');
7
- font-weight: normal;
8
- font-style: normal;
9
- }
10
-
11
- @font-face {
12
- font-family: 'Sans Semibold';
13
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Semibold.ttf.woff2') format('woff2'),
14
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Semibold.otf.woff') format('woff'),
15
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Semibold.otf') format('opentype'),
16
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Semibold.ttf') format('truetype');
17
- font-weight: normal;
18
- font-style: normal;
19
- }
20
-
21
- @font-face {
22
- font-family: 'Sans Italic';
23
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-It.ttf.woff2') format('woff2'),
24
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-It.otf.woff') format('woff'),
25
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-It.otf') format('opentype'),
26
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-It.ttf') format('truetype');
27
- font-weight: normal;
28
- font-style: normal;
29
- }
30
-
31
- @font-face {
32
- font-family: 'Redacted';
33
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.eot');
34
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.woff2') format('woff2'),
35
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.woff') format('woff'),
36
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.otf') format('opentype'),
37
- url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.svg#filename') format('svg');
38
- }
39
-
40
- @font-face {
41
- font-family: 'Roboto Mono';
42
- font-style: normal;
43
- font-weight: normal;
44
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/RobotoMono-Regular.ttf') format('truetype');
45
- }
46
-
47
- @font-face {
48
- font-family: 'Roboto Slab';
49
- font-style: normal;
50
- font-weight: normal;
51
- src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/RobotoSlab-Regular.ttf') format('truetype');
1
+ @font-face {
2
+ font-family: 'Sans Regular';
3
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Regular.ttf.woff2') format('woff2'),
4
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Regular.otf.woff') format('woff'),
5
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Regular.otf') format('opentype'),
6
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Regular.ttf') format('truetype');
7
+ font-weight: normal;
8
+ font-style: normal;
9
+ }
10
+
11
+ @font-face {
12
+ font-family: 'Sans Semibold';
13
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-Semibold.ttf.woff2') format('woff2'),
14
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-Semibold.otf.woff') format('woff'),
15
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-Semibold.otf') format('opentype'),
16
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-Semibold.ttf') format('truetype');
17
+ font-weight: normal;
18
+ font-style: normal;
19
+ }
20
+
21
+ @font-face {
22
+ font-family: 'Sans Italic';
23
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff2/ttf/SourceSansPro-It.ttf.woff2') format('woff2'),
24
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/woff/otf/SourceSansPro-It.otf.woff') format('woff'),
25
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/otf/SourceSansPro-It.otf') format('opentype'),
26
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/source-sans-pro/ttf/SourceSansPro-It.ttf') format('truetype');
27
+ font-weight: normal;
28
+ font-style: normal;
29
+ }
30
+
31
+ @font-face {
32
+ font-family: 'Redacted';
33
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.eot');
34
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.woff2') format('woff2'),
35
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.woff') format('woff'),
36
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.otf') format('opentype'),
37
+ url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/redacted/redacted-regular.svg#filename') format('svg');
38
+ }
39
+
40
+ @font-face {
41
+ font-family: 'Roboto Mono';
42
+ font-style: normal;
43
+ font-weight: normal;
44
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/RobotoMono-Regular.ttf') format('truetype');
45
+ }
46
+
47
+ @font-face {
48
+ font-family: 'Roboto Slab';
49
+ font-style: normal;
50
+ font-weight: normal;
51
+ src: url('https://static.cdn.epam.com/uploads/690afa39a93c88c4dd13758fe1d869d5/EPM-UUI/fonts/RobotoSlab-Regular.ttf') format('truetype');
52
52
  }
@@ -1,19 +1,19 @@
1
- @use "sass:math";
2
-
3
- @mixin icon-layout($size) {
4
- :global(.uui-icon) {
5
- svg {
6
- height: math.div($size, 36) * 24;
7
- max-width: math.div($size, 36) * 24;
8
- }
9
- }
10
- }
11
-
12
- @mixin icon-size($size) {
13
- :global(.uui-icon) {
14
- svg {
15
- height: $size;
16
- max-width: $size;
17
- }
18
- }
1
+ @use "sass:math";
2
+
3
+ @mixin icon-layout($size) {
4
+ :global(.uui-icon) {
5
+ svg {
6
+ height: math.div($size, 36) * 24;
7
+ max-width: math.div($size, 36) * 24;
8
+ }
9
+ }
10
+ }
11
+
12
+ @mixin icon-size($size) {
13
+ :global(.uui-icon) {
14
+ svg {
15
+ height: $size;
16
+ max-width: $size;
17
+ }
18
+ }
19
19
  }
@@ -1,8 +1,8 @@
1
- @forward 'buttonLayout';
2
- @forward 'controlLayout';
3
- @forward 'effects';
4
- @forward 'icons';
5
- @forward 'inputs';
6
- @forward 'layout-mixins';
7
- @forward 'text-size';
1
+ @forward 'buttonLayout';
2
+ @forward 'controlLayout';
3
+ @forward 'effects';
4
+ @forward 'icons';
5
+ @forward 'inputs';
6
+ @forward 'layout-mixins';
7
+ @forward 'text-size';
8
8
  @forward 'typography';
@@ -1,70 +1,70 @@
1
- @mixin disabled-input() {
2
- &.mode-form {
3
- @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled));
4
- cursor: default;
5
- pointer-events: none;
6
-
7
- &:hover, &:active, &:focus {
8
- @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled));
9
- box-shadow: none;
10
- }
11
-
12
- &::placeholder {
13
- color: var(--uui-control-placeholder-disabled);
14
- }
15
- }
16
-
17
- &.mode-cell {
18
- @include input-colors(transparent, var(--uui-control-text-disabled), transparent);
19
- cursor: default;
20
- pointer-events: none;
21
-
22
- &:hover, &:active, &:focus {
23
- @include input-colors(transparent, var(--uui-control-text-disabled), transparent);
24
- box-shadow: none;
25
- }
26
-
27
- &::placeholder {
28
- color: var(--uui-control-placeholder-disabled);
29
- }
30
- }
31
- }
32
-
33
- @mixin readonly-input() {
34
- &.mode-form {
35
- background-color: var(--uui-control-bg-readonly);
36
- border-color: var(--uui-control-border-readonly);
37
- pointer-events: none;
38
-
39
- &:hover {
40
- border-color: var(--uui-control-border-readonly);
41
- }
42
- }
43
-
44
- &.mode-cell {
45
- background-color: transparent;
46
- border-color: transparent;
47
- pointer-events: none;
48
-
49
- &:hover {
50
- background-color: transparent;
51
- border-color: transparent;
52
- }
53
- }
54
- }
55
-
56
- @mixin input-colors($bg, $fg, $brd) {
57
- background-color: $bg;
58
- color: $fg;
59
- fill: $fg;
60
- border-color: $brd;
61
-
62
- // override more selective selector on input tag in browsers stylesheets
63
- :global(.uui-input) {
64
- color: $fg;
65
-
66
- &::placeholder {
67
- color: var(--uui-control-placeholder-disabled);
68
- }
69
- }
1
+ @mixin disabled-input() {
2
+ &.mode-form {
3
+ @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled));
4
+ cursor: default;
5
+ pointer-events: none;
6
+
7
+ &:hover, &:active, &:focus {
8
+ @include input-colors(var(--uui-control-bg-disabled), var(--uui-control-text-disabled), var(--uui-control-border-disabled));
9
+ box-shadow: none;
10
+ }
11
+
12
+ &::placeholder {
13
+ color: var(--uui-control-placeholder-disabled);
14
+ }
15
+ }
16
+
17
+ &.mode-cell {
18
+ @include input-colors(transparent, var(--uui-control-text-disabled), transparent);
19
+ cursor: default;
20
+ pointer-events: none;
21
+
22
+ &:hover, &:active, &:focus {
23
+ @include input-colors(transparent, var(--uui-control-text-disabled), transparent);
24
+ box-shadow: none;
25
+ }
26
+
27
+ &::placeholder {
28
+ color: var(--uui-control-placeholder-disabled);
29
+ }
30
+ }
31
+ }
32
+
33
+ @mixin readonly-input() {
34
+ &.mode-form {
35
+ background-color: var(--uui-control-bg-readonly);
36
+ border-color: var(--uui-control-border-readonly);
37
+ pointer-events: none;
38
+
39
+ &:hover {
40
+ border-color: var(--uui-control-border-readonly);
41
+ }
42
+ }
43
+
44
+ &.mode-cell {
45
+ background-color: transparent;
46
+ border-color: transparent;
47
+ pointer-events: none;
48
+
49
+ &:hover {
50
+ background-color: transparent;
51
+ border-color: transparent;
52
+ }
53
+ }
54
+ }
55
+
56
+ @mixin input-colors($bg, $fg, $brd) {
57
+ background-color: $bg;
58
+ color: $fg;
59
+ fill: $fg;
60
+ border-color: $brd;
61
+
62
+ // override more selective selector on input tag in browsers stylesheets
63
+ :global(.uui-input) {
64
+ color: $fg;
65
+
66
+ &::placeholder {
67
+ color: var(--uui-control-placeholder-disabled);
68
+ }
69
+ }
70
70
  }
@@ -1,9 +1,9 @@
1
- @mixin padding($size) {
2
- padding-left: $size + px;
3
- padding-right: $size + px;
4
- }
5
-
6
- @mixin vPadding($size) {
7
- padding-top: $size + px;
8
- padding-bottom: $size + px;
1
+ @mixin padding($size) {
2
+ padding-left: $size + px;
3
+ padding-right: $size + px;
4
+ }
5
+
6
+ @mixin vPadding($size) {
7
+ padding-top: $size + px;
8
+ padding-bottom: $size + px;
9
9
  }
@@ -1,53 +1,53 @@
1
- @mixin prettifyCustomScroll() {
2
- :global(.uui-shadow-top)::before {
3
- background: var(--scroll-bars-shadow);
4
- }
5
-
6
- :global(.uui-shadow-bottom)::after {
7
- background: var(--scroll-bars-shadow);
8
- }
9
-
10
- :global(.uui-thumb-vertical), :global(.uui-thumb-horizontal) {
11
- background: var(--uui-scroll-bars-bg);
12
- border-radius: 1.5px;
13
-
14
- &:hover {
15
- border-radius: 3px;
16
- }
17
-
18
- &:active {
19
- border-radius: 3px;
20
- background: var(--uui-scroll-bars-bg-active);
21
- }
22
- }
23
-
24
- :global(.uui-thumb-vertical) {
25
- width: 3px;
26
- margin-left: 3px;
27
-
28
- &:hover {
29
- width: 6px;
30
- margin-left: 0;
31
- }
32
-
33
- &:active {
34
- width: 6px;
35
- margin-left: 0;
36
- }
37
- }
38
-
39
- :global(.uui-thumb-horizontal) {
40
- height: 3px;
41
- margin-top: 3px;
42
-
43
- &:hover {
44
- height: 6px;
45
- margin-top: 0;
46
- }
47
-
48
- &:active {
49
- height: 6px;
50
- margin-top: 0;
51
- }
52
- }
1
+ @mixin prettifyCustomScroll() {
2
+ :global(.uui-shadow-top)::before {
3
+ background: var(--scroll-bars-shadow);
4
+ }
5
+
6
+ :global(.uui-shadow-bottom)::after {
7
+ background: var(--scroll-bars-shadow);
8
+ }
9
+
10
+ :global(.uui-thumb-vertical), :global(.uui-thumb-horizontal) {
11
+ background: var(--uui-scroll-bars-bg);
12
+ border-radius: 1.5px;
13
+
14
+ &:hover {
15
+ border-radius: 3px;
16
+ }
17
+
18
+ &:active {
19
+ border-radius: 3px;
20
+ background: var(--uui-scroll-bars-bg-active);
21
+ }
22
+ }
23
+
24
+ :global(.uui-thumb-vertical) {
25
+ width: 3px;
26
+ margin-left: 3px;
27
+
28
+ &:hover {
29
+ width: 6px;
30
+ margin-left: 0;
31
+ }
32
+
33
+ &:active {
34
+ width: 6px;
35
+ margin-left: 0;
36
+ }
37
+ }
38
+
39
+ :global(.uui-thumb-horizontal) {
40
+ height: 3px;
41
+ margin-top: 3px;
42
+
43
+ &:hover {
44
+ height: 6px;
45
+ margin-top: 0;
46
+ }
47
+
48
+ &:active {
49
+ height: 6px;
50
+ margin-top: 0;
51
+ }
52
+ }
53
53
  }