@semcore/data-table 2.2.6 → 2.2.9

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 (7) hide show
  1. package/CHANGELOG.md +24 -0
  2. package/lib/cjs/DataTable.js +37 -37
  3. package/lib/cjs/style/data-table.shadow.css +38 -41
  4. package/lib/es6/DataTable.js +37 -37
  5. package/lib/es6/style/data-table.shadow.css +38 -41
  6. package/package.json +1 -1
  7. package/src/style/data-table.shadow.css +38 -41
package/CHANGELOG.md CHANGED
@@ -2,6 +2,30 @@
2
2
 
3
3
  CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
4
4
 
5
+ ## [2.2.9] - 2022-05-16
6
+
7
+ ### Changed
8
+
9
+ - Version patch update due to children dependencies update (`@semcore/skeleton` [3.2.1 ~> 3.3.0]).
10
+
11
+ ## [3.0.0] - unreleased
12
+
13
+ ### BREAK
14
+
15
+ - Updated styles according to the library redesign policy.
16
+
17
+ ## [2.2.8] - 2022-05-16
18
+
19
+ ### Changed
20
+
21
+ - Version patch update due to children dependencies update (`@semcore/icon` [2.21.0 ~> 2.24.0], `@semcore/base-trigger` [2.6.4 ~> 2.6.5], `@semcore/accordion` [3.5.5 ~> 3.5.6]).
22
+
23
+ ## [2.2.7] - 2022-04-28
24
+
25
+ ### Changed
26
+
27
+ - Version patch update due to children dependencies update (`@semcore/icon` [2.20.0 ~> 2.21.0], `@semcore/base-trigger` [2.6.3 ~> 2.6.4], `@semcore/accordion` [3.5.4 ~> 3.5.5]).
28
+
5
29
  ## [2.2.6] - 2022-04-27
6
30
 
7
31
  ### Fixed
package/lib/cjs/DataTable.js CHANGED
@@ -69,46 +69,46 @@ var style = (
69
69
  /*__reshadow_css_start__*/
70
70
  _core.sstyled.insert(
71
71
  /*__inner_css_start__*/
72
- ".___SDataTable_1a59e_gg_{position:relative}.___SHeadWrapper_1a59e_gg_{position:relative}.___SHeadWrapper_1a59e_gg_.__sticky_1a59e_gg_{position:-webkit-sticky;position:sticky;top:0;z-index:2}.___SHead_1a59e_gg_{display:flex;position:relative;flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;z-index:0}.___SColumn_1a59e_gg_{display:flex;flex-grow:1;font-size:12px;line-height:18px;color:#333333;box-sizing:border-box;position:relative}.___SColumn_1a59e_gg_:focus{outline:none;box-shadow:inset 0 0 0 3px rgba(43,148,225,.3)}.___SColumn_1a59e_gg_.__hidden_1a59e_gg_{height:0!important;padding:0!important;overflow:hidden!important;border:none!important}.___SColumn_1a59e_gg_._use_primary_1a59e_gg_{padding:12px;border-right:1px solid #dee3e5;border-bottom:1px solid #dee3e5;background-color:#f2f3f4}.___SColumn_1a59e_gg_._use_secondary_1a59e_gg_{padding:8px;border-bottom:1px solid #a6b0b3;background-color:#fff}.___SColumn_1a59e_gg_.__use_1a59e_gg_:last-child{border-right:none}.___SColumn_1a59e_gg_.__group_1a59e_gg_.__use_1a59e_gg_{display:flex;flex-wrap:wrap;flex-direction:column;border-bottom:none;padding:0}.___SColumn_1a59e_gg_.__groupHead_1a59e_gg_.__use_1a59e_gg_{justify-content:center;border-right:none;z-index:1}.___SColumn_1a59e_gg_.__groupHead_1a59e_gg_._use_primary_1a59e_gg_{border-bottom:1px solid #dee3e5}.___SColumn_1a59e_gg_.__groupHead_1a59e_gg_._use_secondary_1a59e_gg_{border-bottom:1px solid #a6b0b3}.___SColumn_1a59e_gg_.__sortable_1a59e_gg_{cursor:pointer}.___SColumn_1a59e_gg_.__sortable_1a59e_gg_._use_primary_1a59e_gg_:hover{background-color:#e4e7e8}.___SColumn_1a59e_gg_.__active_1a59e_gg_._use_primary_1a59e_gg_{background-color:#e4e7e8}.___SColumn_1a59e_gg_.__resizable_1a59e_gg_:hover:after{background:#a6b0b3}.___SColumn_1a59e_gg_.__resizable_1a59e_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100vh;width:1px;background:transparent;cursor:col-resize}.___SColumn_1a59e_gg_.__fixed_1a59e_gg_{position:-webkit-sticky;position:sticky;z-index:2}.___SSortIcon_1a59e_gg_{margin-top:2px;margin-left:4px;color:#bdc4c6}.___SSortIcon_1a59e_gg_.__active_1a59e_gg_{fill:#64787e}.___SBodyWrapper_1a59e_gg_{position:relative}.___SBody_1a59e_gg_{display:flex;flex-direction:column;position:relative;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.___SRow_1a59e_gg_{display:flex;flex-direction:row;position:relative}.___SRow_1a59e_gg_:hover>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_.__active_1a59e_gg_>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_ .___SCell_1a59e_gg_:hover+.___SGroupCell_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#f6f7f7}.___SRow_1a59e_gg_._theme_muted_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#f2f3f4}.___SRow_1a59e_gg_:hover>.___SCell_1a59e_gg_._theme_muted_1a59e_gg_,.___SRow_1a59e_gg_._theme_muted_1a59e_gg_:hover>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_muted_1a59e_gg_.__active_1a59e_gg_>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_muted_1a59e_gg_ .___SCell_1a59e_gg_:hover+.___SGroupCell_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#f6f7f7}.___SRow_1a59e_gg_._theme_info_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#d5eaf9}.___SRow_1a59e_gg_:hover>.___SCell_1a59e_gg_._theme_info_1a59e_gg_,.___SRow_1a59e_gg_._theme_info_1a59e_gg_:hover>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_info_1a59e_gg_.__active_1a59e_gg_>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_info_1a59e_gg_ .___SCell_1a59e_gg_:hover+.___SGroupCell_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#cae4f8}.___SRow_1a59e_gg_._theme_success_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#e5f3e0}.___SRow_1a59e_gg_:hover>.___SCell_1a59e_gg_._theme_success_1a59e_gg_,.___SRow_1a59e_gg_._theme_success_1a59e_gg_:hover>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_success_1a59e_gg_.__active_1a59e_gg_>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_success_1a59e_gg_ .___SCell_1a59e_gg_:hover+.___SGroupCell_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#dcefd6}.___SRow_1a59e_gg_._theme_warning_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#fef3e6}.___SRow_1a59e_gg_:hover>.___SCell_1a59e_gg_._theme_warning_1a59e_gg_,.___SRow_1a59e_gg_._theme_warning_1a59e_gg_:hover>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_warning_1a59e_gg_.__active_1a59e_gg_>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_warning_1a59e_gg_ .___SCell_1a59e_gg_:hover+.___SGroupCell_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#feefde}.___SRow_1a59e_gg_._theme_danger_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#fdeaea}.___SRow_1a59e_gg_:hover>.___SCell_1a59e_gg_._theme_danger_1a59e_gg_,.___SRow_1a59e_gg_._theme_danger_1a59e_gg_:hover>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_danger_1a59e_gg_.__active_1a59e_gg_>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_danger_1a59e_gg_ .___SCell_1a59e_gg_:hover+.___SGroupCell_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#fce0e0}.___SRow_1a59e_gg_.__positioned_1a59e_gg_{position:absolute}.___SCell_1a59e_gg_{display:flex;flex:1;flex-basis:auto;font-size:14px;color:#333333;line-height:20px;box-sizing:border-box;border-bottom:1px solid #dee3e5;overflow:hidden;white-space:nowrap}.___SCell_1a59e_gg_._use_primary_1a59e_gg_{padding:12px;min-height:45px;background-color:#fff}.___SCell_1a59e_gg_._use_secondary_1a59e_gg_{padding:8px;min-height:37px;background-color:#fff}.___SCell_1a59e_gg_.__fixed_1a59e_gg_{position:-webkit-sticky;position:sticky;z-index:1}.___SCell_1a59e_gg_._theme_muted_1a59e_gg_{background-color:#f2f3f4}.___SCell_1a59e_gg_._theme_info_1a59e_gg_{background-color:#d5eaf9}.___SCell_1a59e_gg_._theme_success_1a59e_gg_{background-color:#e5f3e0}.___SCell_1a59e_gg_._theme_warning_1a59e_gg_{background-color:#fef3e6}.___SCell_1a59e_gg_._theme_danger_1a59e_gg_{background-color:#fdeaea}.___SScrollAreaBar_1a59e_gg_._orientation_horizontal_1a59e_gg_{position:-webkit-sticky;position:sticky;bottom:0;left:0;margin-top:-12px;z-index:2}.___SScrollAreaBar_1a59e_gg_._orientation_vertical_1a59e_gg_{width:12px}.___SScrollAreaBar_1a59e_gg_._orientation_horizontal_1a59e_gg_{margin-left:calc(var(--left_4k1pky) + 4px);margin-right:calc(var(--right_4k1pky) + 4px);width:calc(100% - var(--offsetSum_4k1pky) - 8px)}.___SHeightHold_1a59e_gg_{position:absolute;top:0;width:100px}"
72
+ ".___SDataTable_kbdr8_gg_{position:relative}.___SHeadWrapper_kbdr8_gg_{position:relative}.___SHeadWrapper_kbdr8_gg_.__sticky_kbdr8_gg_{position:-webkit-sticky;position:sticky;top:0;z-index:2}.___SHead_kbdr8_gg_{display:flex;position:relative;flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;z-index:0}.___SColumn_kbdr8_gg_{display:flex;align-items:center;flex-grow:1;font-size:12px;color:#191b23;box-sizing:border-box;position:relative}.___SColumn_kbdr8_gg_:focus{outline:none;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SColumn_kbdr8_gg_.__hidden_kbdr8_gg_{height:0!important;padding:0!important;overflow:hidden!important;border:none!important}.___SColumn_kbdr8_gg_._use_primary_kbdr8_gg_{padding:12px;border-right:1px solid #e0e1e9;border-bottom:1px solid #e0e1e9;background-color:#f4f5f9}.___SColumn_kbdr8_gg_._use_secondary_kbdr8_gg_{padding:8px;border-bottom:1px solid #a9abb6;background-color:#ffffff}.___SColumn_kbdr8_gg_.__use_kbdr8_gg_:last-child{border-right:none}.___SColumn_kbdr8_gg_.__group_kbdr8_gg_.__use_kbdr8_gg_{display:flex;flex-wrap:wrap;flex-direction:column;border-bottom:none;padding:0}.___SColumn_kbdr8_gg_.__groupHead_kbdr8_gg_.__use_kbdr8_gg_{justify-content:center;border-right:none;z-index:1}.___SColumn_kbdr8_gg_.__groupHead_kbdr8_gg_._use_primary_kbdr8_gg_{border-bottom:1px solid #e0e1e9}.___SColumn_kbdr8_gg_.__groupHead_kbdr8_gg_._use_secondary_kbdr8_gg_{border-bottom:1px solid #e0e1e9}.___SColumn_kbdr8_gg_.__sortable_kbdr8_gg_{cursor:pointer}.___SColumn_kbdr8_gg_.__sortable_kbdr8_gg_._use_primary_kbdr8_gg_:hover{background-color:#e0e1e9}.___SColumn_kbdr8_gg_.__active_kbdr8_gg_._use_primary_kbdr8_gg_{background-color:#e0e1e9}.___SColumn_kbdr8_gg_.__resizable_kbdr8_gg_:hover:after{background:#e0e1e9}.___SColumn_kbdr8_gg_.__resizable_kbdr8_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100vh;width:1px;background:transparent;cursor:col-resize}.___SColumn_kbdr8_gg_.__fixed_kbdr8_gg_{position:-webkit-sticky;position:sticky;z-index:2}.___SSortIcon_kbdr8_gg_{fill:#a9abb6;margin-left:6px}.___SSortIcon_kbdr8_gg_.__active_kbdr8_gg_{fill:#8a8e9b}.___SBodyWrapper_kbdr8_gg_{position:relative}.___SBody_kbdr8_gg_{display:flex;flex-direction:column;position:relative;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.___SRow_kbdr8_gg_{display:flex;flex-direction:row;position:relative}.___SRow_kbdr8_gg_:hover>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_.__active_kbdr8_gg_>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_ .___SCell_kbdr8_gg_:hover+.___SGroupCell_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#f0f0f4}.___SRow_kbdr8_gg_._theme_muted_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#f2f3f4}.___SRow_kbdr8_gg_:hover>.___SCell_kbdr8_gg_._theme_muted_kbdr8_gg_,.___SRow_kbdr8_gg_._theme_muted_kbdr8_gg_:hover>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_muted_kbdr8_gg_.__active_kbdr8_gg_>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_muted_kbdr8_gg_ .___SCell_kbdr8_gg_:hover+.___SGroupCell_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#f6f7f7}.___SRow_kbdr8_gg_._theme_info_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#e9f7ff}.___SRow_kbdr8_gg_:hover>.___SCell_kbdr8_gg_._theme_info_kbdr8_gg_,.___SRow_kbdr8_gg_._theme_info_kbdr8_gg_:hover>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_info_kbdr8_gg_.__active_kbdr8_gg_>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_info_kbdr8_gg_ .___SCell_kbdr8_gg_:hover+.___SGroupCell_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#c4e5fe}.___SRow_kbdr8_gg_._theme_success_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#dbfee8}.___SRow_kbdr8_gg_:hover>.___SCell_kbdr8_gg_._theme_success_kbdr8_gg_,.___SRow_kbdr8_gg_._theme_success_kbdr8_gg_:hover>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_success_kbdr8_gg_.__active_kbdr8_gg_>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_success_kbdr8_gg_ .___SCell_kbdr8_gg_:hover+.___SGroupCell_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#9ef2c9}.___SRow_kbdr8_gg_._theme_warning_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#fff3d9}.___SRow_kbdr8_gg_:hover>.___SCell_kbdr8_gg_._theme_warning_kbdr8_gg_,.___SRow_kbdr8_gg_._theme_warning_kbdr8_gg_:hover>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_warning_kbdr8_gg_.__active_kbdr8_gg_>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_warning_kbdr8_gg_ .___SCell_kbdr8_gg_:hover+.___SGroupCell_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#ffdca2}.___SRow_kbdr8_gg_._theme_danger_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#fff0f7}.___SRow_kbdr8_gg_:hover>.___SCell_kbdr8_gg_._theme_danger_kbdr8_gg_,.___SRow_kbdr8_gg_._theme_danger_kbdr8_gg_:hover>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_danger_kbdr8_gg_.__active_kbdr8_gg_>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_danger_kbdr8_gg_ .___SCell_kbdr8_gg_:hover+.___SGroupCell_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#ffd7df}.___SRow_kbdr8_gg_.__positioned_kbdr8_gg_{position:absolute}.___SCell_kbdr8_gg_{display:flex;flex:1;flex-basis:auto;font-size:14px;line-height:1.42;color:#191b23;box-sizing:border-box;border-bottom:1px solid #e0e1e9;overflow:hidden;white-space:nowrap}.___SCell_kbdr8_gg_._use_primary_kbdr8_gg_{padding:12px;min-height:45px;background-color:#ffffff}.___SCell_kbdr8_gg_._use_secondary_kbdr8_gg_{padding:8px;min-height:37px;background-color:#ffffff}.___SCell_kbdr8_gg_.__fixed_kbdr8_gg_{position:-webkit-sticky;position:sticky;z-index:1}.___SCell_kbdr8_gg_._theme_muted_kbdr8_gg_{background-color:#f2f3f4}.___SCell_kbdr8_gg_._theme_info_kbdr8_gg_{background-color:#e9f7ff}.___SCell_kbdr8_gg_._theme_success_kbdr8_gg_{background-color:#dbfee8}.___SCell_kbdr8_gg_._theme_warning_kbdr8_gg_{background-color:#fff3d9}.___SCell_kbdr8_gg_._theme_danger_kbdr8_gg_{background-color:#fff0f7}.___SScrollAreaBar_kbdr8_gg_._orientation_horizontal_kbdr8_gg_{position:-webkit-sticky;position:sticky;bottom:0;left:0;margin-top:-12px;z-index:2}.___SScrollAreaBar_kbdr8_gg_._orientation_vertical_kbdr8_gg_{width:12px}.___SScrollAreaBar_kbdr8_gg_._orientation_horizontal_kbdr8_gg_{margin-left:calc(var(--left_11mqozn) + 4px);margin-right:calc(var(--right_11mqozn) + 4px);width:calc(100% - var(--offsetSum_11mqozn) - 8px)}.___SHeightHold_kbdr8_gg_{position:absolute;top:0;width:0;pointer-events:none}"
73
73
  /*__inner_css_end__*/
74
- , "4k1pky_gg_")
74
+ , "11mqozn_gg_")
75
75
  /*__reshadow_css_end__*/
76
76
  , {
77
- "__SDataTable": "___SDataTable_1a59e_gg_",
78
- "__SHeadWrapper": "___SHeadWrapper_1a59e_gg_",
79
- "_sticky": "__sticky_1a59e_gg_",
80
- "__SHead": "___SHead_1a59e_gg_",
81
- "__SColumn": "___SColumn_1a59e_gg_",
82
- "_hidden": "__hidden_1a59e_gg_",
83
- "_use_primary": "_use_primary_1a59e_gg_",
84
- "_use_secondary": "_use_secondary_1a59e_gg_",
85
- "_use": "__use_1a59e_gg_",
86
- "_group": "__group_1a59e_gg_",
87
- "_groupHead": "__groupHead_1a59e_gg_",
88
- "_sortable": "__sortable_1a59e_gg_",
89
- "_active": "__active_1a59e_gg_",
90
- "_resizable": "__resizable_1a59e_gg_",
91
- "_fixed": "__fixed_1a59e_gg_",
92
- "__SSortIcon": "___SSortIcon_1a59e_gg_",
93
- "__SBodyWrapper": "___SBodyWrapper_1a59e_gg_",
94
- "__SBody": "___SBody_1a59e_gg_",
95
- "__SRow": "___SRow_1a59e_gg_",
96
- "__SCell": "___SCell_1a59e_gg_",
97
- "_theme": "__theme_1a59e_gg_",
98
- "__SGroupCell": "___SGroupCell_1a59e_gg_",
99
- "_theme_muted": "_theme_muted_1a59e_gg_",
100
- "_theme_info": "_theme_info_1a59e_gg_",
101
- "_theme_success": "_theme_success_1a59e_gg_",
102
- "_theme_warning": "_theme_warning_1a59e_gg_",
103
- "_theme_danger": "_theme_danger_1a59e_gg_",
104
- "_positioned": "__positioned_1a59e_gg_",
105
- "__SScrollAreaBar": "___SScrollAreaBar_1a59e_gg_",
106
- "_orientation_horizontal": "_orientation_horizontal_1a59e_gg_",
107
- "_orientation_vertical": "_orientation_vertical_1a59e_gg_",
108
- "--left": "--left_4k1pky",
109
- "--right": "--right_4k1pky",
110
- "--offsetSum": "--offsetSum_4k1pky",
111
- "__SHeightHold": "___SHeightHold_1a59e_gg_"
77
+ "__SDataTable": "___SDataTable_kbdr8_gg_",
78
+ "__SHeadWrapper": "___SHeadWrapper_kbdr8_gg_",
79
+ "_sticky": "__sticky_kbdr8_gg_",
80
+ "__SHead": "___SHead_kbdr8_gg_",
81
+ "__SColumn": "___SColumn_kbdr8_gg_",
82
+ "_hidden": "__hidden_kbdr8_gg_",
83
+ "_use_primary": "_use_primary_kbdr8_gg_",
84
+ "_use_secondary": "_use_secondary_kbdr8_gg_",
85
+ "_use": "__use_kbdr8_gg_",
86
+ "_group": "__group_kbdr8_gg_",
87
+ "_groupHead": "__groupHead_kbdr8_gg_",
88
+ "_sortable": "__sortable_kbdr8_gg_",
89
+ "_active": "__active_kbdr8_gg_",
90
+ "_resizable": "__resizable_kbdr8_gg_",
91
+ "_fixed": "__fixed_kbdr8_gg_",
92
+ "__SSortIcon": "___SSortIcon_kbdr8_gg_",
93
+ "__SBodyWrapper": "___SBodyWrapper_kbdr8_gg_",
94
+ "__SBody": "___SBody_kbdr8_gg_",
95
+ "__SRow": "___SRow_kbdr8_gg_",
96
+ "__SCell": "___SCell_kbdr8_gg_",
97
+ "_theme": "__theme_kbdr8_gg_",
98
+ "__SGroupCell": "___SGroupCell_kbdr8_gg_",
99
+ "_theme_muted": "_theme_muted_kbdr8_gg_",
100
+ "_theme_info": "_theme_info_kbdr8_gg_",
101
+ "_theme_success": "_theme_success_kbdr8_gg_",
102
+ "_theme_warning": "_theme_warning_kbdr8_gg_",
103
+ "_theme_danger": "_theme_danger_kbdr8_gg_",
104
+ "_positioned": "__positioned_kbdr8_gg_",
105
+ "__SScrollAreaBar": "___SScrollAreaBar_kbdr8_gg_",
106
+ "_orientation_horizontal": "_orientation_horizontal_kbdr8_gg_",
107
+ "_orientation_vertical": "_orientation_vertical_kbdr8_gg_",
108
+ "--left": "--left_11mqozn",
109
+ "--right": "--right_11mqozn",
110
+ "--offsetSum": "--offsetSum_11mqozn",
111
+ "__SHeightHold": "___SHeightHold_kbdr8_gg_"
112
112
  });
113
113
  var REVERSED_SORT_DIRECTION = {
114
114
  desc: 'asc',
package/lib/cjs/style/data-table.shadow.css CHANGED
@@ -24,18 +24,16 @@ SHead {
24
24
 
25
25
  SColumn {
26
26
  display: flex;
27
+ align-items: center;
27
28
  flex-grow: 1;
28
- /* Надо подумать можно ли уменьшать */
29
- /*flex-shrink: 0;*/
30
- font-size: 12px;
31
- line-height: 18px;
32
- color: var(--gray20);
29
+ font-size: var(--fs-100);
30
+ color: var(--gray-800);
33
31
  box-sizing: border-box;
34
32
  position: relative;
35
33
 
36
34
  &:focus {
37
35
  outline: none;
38
- box-shadow: inset 0 0 0 3px color-mod(var(--light-blue) a(30%));
36
+ box-shadow: var(--keyboard-focus);
39
37
  }
40
38
  }
41
39
 
@@ -48,15 +46,15 @@ SColumn[hidden] {
48
46
 
49
47
  SColumn[use='primary'] {
50
48
  padding: 12px;
51
- border-right: 1px solid var(--mercury);
52
- border-bottom: 1px solid var(--mercury);
53
- background-color: #f2f3f4;
49
+ border-right: 1px solid var(--gray-100);
50
+ border-bottom: 1px solid var(--gray-100);
51
+ background-color: var(--gray-50);
54
52
  }
55
53
 
56
54
  SColumn[use='secondary'] {
57
55
  padding: 8px;
58
- border-bottom: 1px solid var(--stone);
59
- background-color: #fff;
56
+ border-bottom: 1px solid var(--gray-300);
57
+ background-color: var(--white);
60
58
  }
61
59
 
62
60
  SColumn[use]:last-child {
@@ -79,28 +77,28 @@ SColumn[groupHead][use] {
79
77
  }
80
78
 
81
79
  SColumn[groupHead][use='primary'] {
82
- border-bottom: 1px solid var(--mercury);
80
+ border-bottom: 1px solid var(--gray-100);
83
81
  }
84
82
 
85
83
  SColumn[groupHead][use='secondary'] {
86
- border-bottom: 1px solid var(--stone);
84
+ border-bottom: 1px solid var(--gray-100);
87
85
  }
88
86
 
89
87
  SColumn[sortable] {
90
88
  cursor: pointer;
91
89
 
92
90
  &[use='primary']:hover {
93
- background-color: #e4e7e8;
91
+ background-color: var(--gray-100);
94
92
  }
95
93
  }
96
94
 
97
95
  SColumn[active][use='primary'] {
98
- background-color: #e4e7e8;
96
+ background-color: var(--gray-100);
99
97
  }
100
98
 
101
99
  SColumn[resizable] {
102
100
  &:hover:after {
103
- background: #a6b0b3;
101
+ background: var(--gray-100);
104
102
  }
105
103
 
106
104
  &:after {
@@ -122,13 +120,12 @@ SColumn[fixed] {
122
120
  }
123
121
 
124
122
  SSortIcon {
125
- margin-top: 2px;
126
- margin-left: 4px;
127
- color: var(--stone-light);
123
+ fill: var(--gray-300);
124
+ margin-left: 6px;
128
125
  }
129
126
 
130
127
  SSortIcon[active] {
131
- fill: var(--wall);
128
+ fill: var(--gray-400);
132
129
  }
133
130
 
134
131
  SBodyWrapper {
@@ -152,7 +149,7 @@ SRow {
152
149
  SRow[active] > SCell:not([theme]),
153
150
  SRow:hover > SCell:not([theme]),
154
151
  SRow SCell:hover + SGroupCell SCell:not([theme]) {
155
- background-color: #f6f7f7;
152
+ background-color: color-mod(var(--gray-100) blend(var(--white) 50%));
156
153
  }
157
154
 
158
155
  /* MUTED THEME */
@@ -169,50 +166,50 @@ SRow[theme='muted'] SCell:hover + SGroupCell SCell:not([theme]) {
169
166
 
170
167
  /* INFO THEME */
171
168
  SRow[theme='info'] SCell:not([theme]) {
172
- background-color: color-mod(var(--light-blue) blend(#fff 80%));
169
+ background-color: var(--blue-50);
173
170
  }
174
171
 
175
172
  SRow:hover > SCell[theme='info'],
176
173
  SRow[theme='info'][active] > SCell:not([theme]),
177
174
  SRow[theme='info']:hover > SCell:not([theme]),
178
175
  SRow[theme='info'] SCell:hover + SGroupCell SCell:not([theme]) {
179
- background-color: color-mod(var(--light-blue) blend(#fff 75%));
176
+ background-color: var(--blue-100);
180
177
  }
181
178
 
182
179
  /* SUCCESS THEME */
183
180
  SRow[theme='success'] SCell:not([theme]) {
184
- background-color: color-mod(var(--green) blend(#fff 85%));
181
+ background-color: var(--green-50);
185
182
  }
186
183
 
187
184
  SRow:hover > SCell[theme='success'],
188
185
  SRow[theme='success'][active] > SCell:not([theme]),
189
186
  SRow[theme='success']:hover > SCell:not([theme]),
190
187
  SRow[theme='success'] SCell:hover + SGroupCell SCell:not([theme]) {
191
- background-color: color-mod(var(--green) blend(#fff 80%));
188
+ background-color: var(--green-100);
192
189
  }
193
190
 
194
191
  /* WARNING THEME */
195
192
  SRow[theme='warning'] SCell:not([theme]) {
196
- background-color: color-mod(var(--light-orange) blend(#fff 85%));
193
+ background-color: var(--orange-50);
197
194
  }
198
195
 
199
196
  SRow:hover > SCell[theme='warning'],
200
197
  SRow[theme='warning'][active] > SCell:not([theme]),
201
198
  SRow[theme='warning']:hover > SCell:not([theme]),
202
199
  SRow[theme='warning'] SCell:hover + SGroupCell SCell:not([theme]) {
203
- background-color: color-mod(var(--light-orange) blend(#fff 80%));
200
+ background-color: var(--orange-100);
204
201
  }
205
202
 
206
203
  /* DANGER THEME */
207
204
  SRow[theme='danger'] SCell:not([theme]) {
208
- background-color: color-mod(var(--red) blend(#fff 90%));
205
+ background-color: var(--red-50);
209
206
  }
210
207
 
211
208
  SRow:hover > SCell[theme='danger'],
212
209
  SRow[theme='danger'][active] > SCell:not([theme]),
213
210
  SRow[theme='danger']:hover > SCell:not([theme]),
214
211
  SRow[theme='danger'] SCell:hover + SGroupCell SCell:not([theme]) {
215
- background-color: color-mod(var(--red) blend(#fff 85%));
212
+ background-color: var(--red-100);
216
213
  }
217
214
 
218
215
  SRow[positioned] {
@@ -223,11 +220,11 @@ SCell {
223
220
  display: flex;
224
221
  flex: 1;
225
222
  flex-basis: auto;
226
- font-size: 14px;
227
- color: var(--gray20);
228
- line-height: 20px;
223
+ font-size: var(--fs-200);
224
+ line-height: var(--lh-200);
225
+ color: var(--gray-800);
229
226
  box-sizing: border-box;
230
- border-bottom: 1px solid var(--mercury);
227
+ border-bottom: 1px solid var(--gray-100);
231
228
  overflow: hidden;
232
229
  white-space: nowrap;
233
230
  }
@@ -235,13 +232,13 @@ SCell {
235
232
  SCell[use='primary'] {
236
233
  padding: 12px;
237
234
  min-height: 45px;
238
- background-color: #fff;
235
+ background-color: var(--white);
239
236
  }
240
237
 
241
238
  SCell[use='secondary'] {
242
239
  padding: 8px;
243
240
  min-height: 37px;
244
- background-color: #fff;
241
+ background-color: var(--white);
245
242
  }
246
243
 
247
244
  SCell[fixed] {
@@ -254,19 +251,19 @@ SCell[theme='muted'] {
254
251
  }
255
252
 
256
253
  SCell[theme='info'] {
257
- background-color: color-mod(var(--light-blue) blend(#fff 80%));
254
+ background-color: var(--blue-50);
258
255
  }
259
256
 
260
257
  SCell[theme='success'] {
261
- background-color: color-mod(var(--green) blend(#fff 85%));
258
+ background-color: var(--green-50);
262
259
  }
263
260
 
264
261
  SCell[theme='warning'] {
265
- background-color: color-mod(var(--light-orange) blend(#fff 85%));
262
+ background-color: var(--orange-50);
266
263
  }
267
264
 
268
265
  SCell[theme='danger'] {
269
- background-color: color-mod(var(--red) blend(#fff 90%));
266
+ background-color: var(--red-50);
270
267
  }
271
268
 
272
269
  SScrollAreaBar[orientation='horizontal'] {
@@ -290,6 +287,6 @@ SScrollAreaBar[orientation='horizontal'] {
290
287
  SHeightHold {
291
288
  position: absolute;
292
289
  top: 0;
293
- width: 100px;
294
- /* pointer-events: none; */
290
+ width: 0;
291
+ pointer-events: none;
295
292
  }
package/lib/es6/DataTable.js CHANGED
@@ -40,46 +40,46 @@ var style = (
40
40
  /*__reshadow_css_start__*/
41
41
  _sstyled.insert(
42
42
  /*__inner_css_start__*/
43
- ".___SDataTable_1a59e_gg_{position:relative}.___SHeadWrapper_1a59e_gg_{position:relative}.___SHeadWrapper_1a59e_gg_.__sticky_1a59e_gg_{position:-webkit-sticky;position:sticky;top:0;z-index:2}.___SHead_1a59e_gg_{display:flex;position:relative;flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;z-index:0}.___SColumn_1a59e_gg_{display:flex;flex-grow:1;font-size:12px;line-height:18px;color:#333333;box-sizing:border-box;position:relative}.___SColumn_1a59e_gg_:focus{outline:none;box-shadow:inset 0 0 0 3px rgba(43,148,225,.3)}.___SColumn_1a59e_gg_.__hidden_1a59e_gg_{height:0!important;padding:0!important;overflow:hidden!important;border:none!important}.___SColumn_1a59e_gg_._use_primary_1a59e_gg_{padding:12px;border-right:1px solid #dee3e5;border-bottom:1px solid #dee3e5;background-color:#f2f3f4}.___SColumn_1a59e_gg_._use_secondary_1a59e_gg_{padding:8px;border-bottom:1px solid #a6b0b3;background-color:#fff}.___SColumn_1a59e_gg_.__use_1a59e_gg_:last-child{border-right:none}.___SColumn_1a59e_gg_.__group_1a59e_gg_.__use_1a59e_gg_{display:flex;flex-wrap:wrap;flex-direction:column;border-bottom:none;padding:0}.___SColumn_1a59e_gg_.__groupHead_1a59e_gg_.__use_1a59e_gg_{justify-content:center;border-right:none;z-index:1}.___SColumn_1a59e_gg_.__groupHead_1a59e_gg_._use_primary_1a59e_gg_{border-bottom:1px solid #dee3e5}.___SColumn_1a59e_gg_.__groupHead_1a59e_gg_._use_secondary_1a59e_gg_{border-bottom:1px solid #a6b0b3}.___SColumn_1a59e_gg_.__sortable_1a59e_gg_{cursor:pointer}.___SColumn_1a59e_gg_.__sortable_1a59e_gg_._use_primary_1a59e_gg_:hover{background-color:#e4e7e8}.___SColumn_1a59e_gg_.__active_1a59e_gg_._use_primary_1a59e_gg_{background-color:#e4e7e8}.___SColumn_1a59e_gg_.__resizable_1a59e_gg_:hover:after{background:#a6b0b3}.___SColumn_1a59e_gg_.__resizable_1a59e_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100vh;width:1px;background:transparent;cursor:col-resize}.___SColumn_1a59e_gg_.__fixed_1a59e_gg_{position:-webkit-sticky;position:sticky;z-index:2}.___SSortIcon_1a59e_gg_{margin-top:2px;margin-left:4px;color:#bdc4c6}.___SSortIcon_1a59e_gg_.__active_1a59e_gg_{fill:#64787e}.___SBodyWrapper_1a59e_gg_{position:relative}.___SBody_1a59e_gg_{display:flex;flex-direction:column;position:relative;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.___SRow_1a59e_gg_{display:flex;flex-direction:row;position:relative}.___SRow_1a59e_gg_:hover>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_.__active_1a59e_gg_>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_ .___SCell_1a59e_gg_:hover+.___SGroupCell_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#f6f7f7}.___SRow_1a59e_gg_._theme_muted_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#f2f3f4}.___SRow_1a59e_gg_:hover>.___SCell_1a59e_gg_._theme_muted_1a59e_gg_,.___SRow_1a59e_gg_._theme_muted_1a59e_gg_:hover>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_muted_1a59e_gg_.__active_1a59e_gg_>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_muted_1a59e_gg_ .___SCell_1a59e_gg_:hover+.___SGroupCell_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#f6f7f7}.___SRow_1a59e_gg_._theme_info_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#d5eaf9}.___SRow_1a59e_gg_:hover>.___SCell_1a59e_gg_._theme_info_1a59e_gg_,.___SRow_1a59e_gg_._theme_info_1a59e_gg_:hover>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_info_1a59e_gg_.__active_1a59e_gg_>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_info_1a59e_gg_ .___SCell_1a59e_gg_:hover+.___SGroupCell_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#cae4f8}.___SRow_1a59e_gg_._theme_success_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#e5f3e0}.___SRow_1a59e_gg_:hover>.___SCell_1a59e_gg_._theme_success_1a59e_gg_,.___SRow_1a59e_gg_._theme_success_1a59e_gg_:hover>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_success_1a59e_gg_.__active_1a59e_gg_>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_success_1a59e_gg_ .___SCell_1a59e_gg_:hover+.___SGroupCell_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#dcefd6}.___SRow_1a59e_gg_._theme_warning_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#fef3e6}.___SRow_1a59e_gg_:hover>.___SCell_1a59e_gg_._theme_warning_1a59e_gg_,.___SRow_1a59e_gg_._theme_warning_1a59e_gg_:hover>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_warning_1a59e_gg_.__active_1a59e_gg_>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_warning_1a59e_gg_ .___SCell_1a59e_gg_:hover+.___SGroupCell_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#feefde}.___SRow_1a59e_gg_._theme_danger_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#fdeaea}.___SRow_1a59e_gg_:hover>.___SCell_1a59e_gg_._theme_danger_1a59e_gg_,.___SRow_1a59e_gg_._theme_danger_1a59e_gg_:hover>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_danger_1a59e_gg_.__active_1a59e_gg_>.___SCell_1a59e_gg_:not(.__theme_1a59e_gg_),.___SRow_1a59e_gg_._theme_danger_1a59e_gg_ .___SCell_1a59e_gg_:hover+.___SGroupCell_1a59e_gg_ .___SCell_1a59e_gg_:not(.__theme_1a59e_gg_){background-color:#fce0e0}.___SRow_1a59e_gg_.__positioned_1a59e_gg_{position:absolute}.___SCell_1a59e_gg_{display:flex;flex:1;flex-basis:auto;font-size:14px;color:#333333;line-height:20px;box-sizing:border-box;border-bottom:1px solid #dee3e5;overflow:hidden;white-space:nowrap}.___SCell_1a59e_gg_._use_primary_1a59e_gg_{padding:12px;min-height:45px;background-color:#fff}.___SCell_1a59e_gg_._use_secondary_1a59e_gg_{padding:8px;min-height:37px;background-color:#fff}.___SCell_1a59e_gg_.__fixed_1a59e_gg_{position:-webkit-sticky;position:sticky;z-index:1}.___SCell_1a59e_gg_._theme_muted_1a59e_gg_{background-color:#f2f3f4}.___SCell_1a59e_gg_._theme_info_1a59e_gg_{background-color:#d5eaf9}.___SCell_1a59e_gg_._theme_success_1a59e_gg_{background-color:#e5f3e0}.___SCell_1a59e_gg_._theme_warning_1a59e_gg_{background-color:#fef3e6}.___SCell_1a59e_gg_._theme_danger_1a59e_gg_{background-color:#fdeaea}.___SScrollAreaBar_1a59e_gg_._orientation_horizontal_1a59e_gg_{position:-webkit-sticky;position:sticky;bottom:0;left:0;margin-top:-12px;z-index:2}.___SScrollAreaBar_1a59e_gg_._orientation_vertical_1a59e_gg_{width:12px}.___SScrollAreaBar_1a59e_gg_._orientation_horizontal_1a59e_gg_{margin-left:calc(var(--left_4k1pky) + 4px);margin-right:calc(var(--right_4k1pky) + 4px);width:calc(100% - var(--offsetSum_4k1pky) - 8px)}.___SHeightHold_1a59e_gg_{position:absolute;top:0;width:100px}"
43
+ ".___SDataTable_kbdr8_gg_{position:relative}.___SHeadWrapper_kbdr8_gg_{position:relative}.___SHeadWrapper_kbdr8_gg_.__sticky_kbdr8_gg_{position:-webkit-sticky;position:sticky;top:0;z-index:2}.___SHead_kbdr8_gg_{display:flex;position:relative;flex-direction:row;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content;z-index:0}.___SColumn_kbdr8_gg_{display:flex;align-items:center;flex-grow:1;font-size:12px;color:#191b23;box-sizing:border-box;position:relative}.___SColumn_kbdr8_gg_:focus{outline:none;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SColumn_kbdr8_gg_.__hidden_kbdr8_gg_{height:0!important;padding:0!important;overflow:hidden!important;border:none!important}.___SColumn_kbdr8_gg_._use_primary_kbdr8_gg_{padding:12px;border-right:1px solid #e0e1e9;border-bottom:1px solid #e0e1e9;background-color:#f4f5f9}.___SColumn_kbdr8_gg_._use_secondary_kbdr8_gg_{padding:8px;border-bottom:1px solid #a9abb6;background-color:#ffffff}.___SColumn_kbdr8_gg_.__use_kbdr8_gg_:last-child{border-right:none}.___SColumn_kbdr8_gg_.__group_kbdr8_gg_.__use_kbdr8_gg_{display:flex;flex-wrap:wrap;flex-direction:column;border-bottom:none;padding:0}.___SColumn_kbdr8_gg_.__groupHead_kbdr8_gg_.__use_kbdr8_gg_{justify-content:center;border-right:none;z-index:1}.___SColumn_kbdr8_gg_.__groupHead_kbdr8_gg_._use_primary_kbdr8_gg_{border-bottom:1px solid #e0e1e9}.___SColumn_kbdr8_gg_.__groupHead_kbdr8_gg_._use_secondary_kbdr8_gg_{border-bottom:1px solid #e0e1e9}.___SColumn_kbdr8_gg_.__sortable_kbdr8_gg_{cursor:pointer}.___SColumn_kbdr8_gg_.__sortable_kbdr8_gg_._use_primary_kbdr8_gg_:hover{background-color:#e0e1e9}.___SColumn_kbdr8_gg_.__active_kbdr8_gg_._use_primary_kbdr8_gg_{background-color:#e0e1e9}.___SColumn_kbdr8_gg_.__resizable_kbdr8_gg_:hover:after{background:#e0e1e9}.___SColumn_kbdr8_gg_.__resizable_kbdr8_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100vh;width:1px;background:transparent;cursor:col-resize}.___SColumn_kbdr8_gg_.__fixed_kbdr8_gg_{position:-webkit-sticky;position:sticky;z-index:2}.___SSortIcon_kbdr8_gg_{fill:#a9abb6;margin-left:6px}.___SSortIcon_kbdr8_gg_.__active_kbdr8_gg_{fill:#8a8e9b}.___SBodyWrapper_kbdr8_gg_{position:relative}.___SBody_kbdr8_gg_{display:flex;flex-direction:column;position:relative;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.___SRow_kbdr8_gg_{display:flex;flex-direction:row;position:relative}.___SRow_kbdr8_gg_:hover>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_.__active_kbdr8_gg_>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_ .___SCell_kbdr8_gg_:hover+.___SGroupCell_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#f0f0f4}.___SRow_kbdr8_gg_._theme_muted_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#f2f3f4}.___SRow_kbdr8_gg_:hover>.___SCell_kbdr8_gg_._theme_muted_kbdr8_gg_,.___SRow_kbdr8_gg_._theme_muted_kbdr8_gg_:hover>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_muted_kbdr8_gg_.__active_kbdr8_gg_>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_muted_kbdr8_gg_ .___SCell_kbdr8_gg_:hover+.___SGroupCell_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#f6f7f7}.___SRow_kbdr8_gg_._theme_info_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#e9f7ff}.___SRow_kbdr8_gg_:hover>.___SCell_kbdr8_gg_._theme_info_kbdr8_gg_,.___SRow_kbdr8_gg_._theme_info_kbdr8_gg_:hover>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_info_kbdr8_gg_.__active_kbdr8_gg_>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_info_kbdr8_gg_ .___SCell_kbdr8_gg_:hover+.___SGroupCell_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#c4e5fe}.___SRow_kbdr8_gg_._theme_success_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#dbfee8}.___SRow_kbdr8_gg_:hover>.___SCell_kbdr8_gg_._theme_success_kbdr8_gg_,.___SRow_kbdr8_gg_._theme_success_kbdr8_gg_:hover>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_success_kbdr8_gg_.__active_kbdr8_gg_>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_success_kbdr8_gg_ .___SCell_kbdr8_gg_:hover+.___SGroupCell_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#9ef2c9}.___SRow_kbdr8_gg_._theme_warning_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#fff3d9}.___SRow_kbdr8_gg_:hover>.___SCell_kbdr8_gg_._theme_warning_kbdr8_gg_,.___SRow_kbdr8_gg_._theme_warning_kbdr8_gg_:hover>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_warning_kbdr8_gg_.__active_kbdr8_gg_>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_warning_kbdr8_gg_ .___SCell_kbdr8_gg_:hover+.___SGroupCell_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#ffdca2}.___SRow_kbdr8_gg_._theme_danger_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#fff0f7}.___SRow_kbdr8_gg_:hover>.___SCell_kbdr8_gg_._theme_danger_kbdr8_gg_,.___SRow_kbdr8_gg_._theme_danger_kbdr8_gg_:hover>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_danger_kbdr8_gg_.__active_kbdr8_gg_>.___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_),.___SRow_kbdr8_gg_._theme_danger_kbdr8_gg_ .___SCell_kbdr8_gg_:hover+.___SGroupCell_kbdr8_gg_ .___SCell_kbdr8_gg_:not(.__theme_kbdr8_gg_){background-color:#ffd7df}.___SRow_kbdr8_gg_.__positioned_kbdr8_gg_{position:absolute}.___SCell_kbdr8_gg_{display:flex;flex:1;flex-basis:auto;font-size:14px;line-height:1.42;color:#191b23;box-sizing:border-box;border-bottom:1px solid #e0e1e9;overflow:hidden;white-space:nowrap}.___SCell_kbdr8_gg_._use_primary_kbdr8_gg_{padding:12px;min-height:45px;background-color:#ffffff}.___SCell_kbdr8_gg_._use_secondary_kbdr8_gg_{padding:8px;min-height:37px;background-color:#ffffff}.___SCell_kbdr8_gg_.__fixed_kbdr8_gg_{position:-webkit-sticky;position:sticky;z-index:1}.___SCell_kbdr8_gg_._theme_muted_kbdr8_gg_{background-color:#f2f3f4}.___SCell_kbdr8_gg_._theme_info_kbdr8_gg_{background-color:#e9f7ff}.___SCell_kbdr8_gg_._theme_success_kbdr8_gg_{background-color:#dbfee8}.___SCell_kbdr8_gg_._theme_warning_kbdr8_gg_{background-color:#fff3d9}.___SCell_kbdr8_gg_._theme_danger_kbdr8_gg_{background-color:#fff0f7}.___SScrollAreaBar_kbdr8_gg_._orientation_horizontal_kbdr8_gg_{position:-webkit-sticky;position:sticky;bottom:0;left:0;margin-top:-12px;z-index:2}.___SScrollAreaBar_kbdr8_gg_._orientation_vertical_kbdr8_gg_{width:12px}.___SScrollAreaBar_kbdr8_gg_._orientation_horizontal_kbdr8_gg_{margin-left:calc(var(--left_11mqozn) + 4px);margin-right:calc(var(--right_11mqozn) + 4px);width:calc(100% - var(--offsetSum_11mqozn) - 8px)}.___SHeightHold_kbdr8_gg_{position:absolute;top:0;width:0;pointer-events:none}"
44
44
  /*__inner_css_end__*/
45
- , "4k1pky_gg_")
45
+ , "11mqozn_gg_")
46
46
  /*__reshadow_css_end__*/
47
47
  , {
48
- "__SDataTable": "___SDataTable_1a59e_gg_",
49
- "__SHeadWrapper": "___SHeadWrapper_1a59e_gg_",
50
- "_sticky": "__sticky_1a59e_gg_",
51
- "__SHead": "___SHead_1a59e_gg_",
52
- "__SColumn": "___SColumn_1a59e_gg_",
53
- "_hidden": "__hidden_1a59e_gg_",
54
- "_use_primary": "_use_primary_1a59e_gg_",
55
- "_use_secondary": "_use_secondary_1a59e_gg_",
56
- "_use": "__use_1a59e_gg_",
57
- "_group": "__group_1a59e_gg_",
58
- "_groupHead": "__groupHead_1a59e_gg_",
59
- "_sortable": "__sortable_1a59e_gg_",
60
- "_active": "__active_1a59e_gg_",
61
- "_resizable": "__resizable_1a59e_gg_",
62
- "_fixed": "__fixed_1a59e_gg_",
63
- "__SSortIcon": "___SSortIcon_1a59e_gg_",
64
- "__SBodyWrapper": "___SBodyWrapper_1a59e_gg_",
65
- "__SBody": "___SBody_1a59e_gg_",
66
- "__SRow": "___SRow_1a59e_gg_",
67
- "__SCell": "___SCell_1a59e_gg_",
68
- "_theme": "__theme_1a59e_gg_",
69
- "__SGroupCell": "___SGroupCell_1a59e_gg_",
70
- "_theme_muted": "_theme_muted_1a59e_gg_",
71
- "_theme_info": "_theme_info_1a59e_gg_",
72
- "_theme_success": "_theme_success_1a59e_gg_",
73
- "_theme_warning": "_theme_warning_1a59e_gg_",
74
- "_theme_danger": "_theme_danger_1a59e_gg_",
75
- "_positioned": "__positioned_1a59e_gg_",
76
- "__SScrollAreaBar": "___SScrollAreaBar_1a59e_gg_",
77
- "_orientation_horizontal": "_orientation_horizontal_1a59e_gg_",
78
- "_orientation_vertical": "_orientation_vertical_1a59e_gg_",
79
- "--left": "--left_4k1pky",
80
- "--right": "--right_4k1pky",
81
- "--offsetSum": "--offsetSum_4k1pky",
82
- "__SHeightHold": "___SHeightHold_1a59e_gg_"
48
+ "__SDataTable": "___SDataTable_kbdr8_gg_",
49
+ "__SHeadWrapper": "___SHeadWrapper_kbdr8_gg_",
50
+ "_sticky": "__sticky_kbdr8_gg_",
51
+ "__SHead": "___SHead_kbdr8_gg_",
52
+ "__SColumn": "___SColumn_kbdr8_gg_",
53
+ "_hidden": "__hidden_kbdr8_gg_",
54
+ "_use_primary": "_use_primary_kbdr8_gg_",
55
+ "_use_secondary": "_use_secondary_kbdr8_gg_",
56
+ "_use": "__use_kbdr8_gg_",
57
+ "_group": "__group_kbdr8_gg_",
58
+ "_groupHead": "__groupHead_kbdr8_gg_",
59
+ "_sortable": "__sortable_kbdr8_gg_",
60
+ "_active": "__active_kbdr8_gg_",
61
+ "_resizable": "__resizable_kbdr8_gg_",
62
+ "_fixed": "__fixed_kbdr8_gg_",
63
+ "__SSortIcon": "___SSortIcon_kbdr8_gg_",
64
+ "__SBodyWrapper": "___SBodyWrapper_kbdr8_gg_",
65
+ "__SBody": "___SBody_kbdr8_gg_",
66
+ "__SRow": "___SRow_kbdr8_gg_",
67
+ "__SCell": "___SCell_kbdr8_gg_",
68
+ "_theme": "__theme_kbdr8_gg_",
69
+ "__SGroupCell": "___SGroupCell_kbdr8_gg_",
70
+ "_theme_muted": "_theme_muted_kbdr8_gg_",
71
+ "_theme_info": "_theme_info_kbdr8_gg_",
72
+ "_theme_success": "_theme_success_kbdr8_gg_",
73
+ "_theme_warning": "_theme_warning_kbdr8_gg_",
74
+ "_theme_danger": "_theme_danger_kbdr8_gg_",
75
+ "_positioned": "__positioned_kbdr8_gg_",
76
+ "__SScrollAreaBar": "___SScrollAreaBar_kbdr8_gg_",
77
+ "_orientation_horizontal": "_orientation_horizontal_kbdr8_gg_",
78
+ "_orientation_vertical": "_orientation_vertical_kbdr8_gg_",
79
+ "--left": "--left_11mqozn",
80
+ "--right": "--right_11mqozn",
81
+ "--offsetSum": "--offsetSum_11mqozn",
82
+ "__SHeightHold": "___SHeightHold_kbdr8_gg_"
83
83
  });
84
84
  var REVERSED_SORT_DIRECTION = {
85
85
  desc: 'asc',
package/lib/es6/style/data-table.shadow.css CHANGED
@@ -24,18 +24,16 @@ SHead {
24
24
 
25
25
  SColumn {
26
26
  display: flex;
27
+ align-items: center;
27
28
  flex-grow: 1;
28
- /* Надо подумать можно ли уменьшать */
29
- /*flex-shrink: 0;*/
30
- font-size: 12px;
31
- line-height: 18px;
32
- color: var(--gray20);
29
+ font-size: var(--fs-100);
30
+ color: var(--gray-800);
33
31
  box-sizing: border-box;
34
32
  position: relative;
35
33
 
36
34
  &:focus {
37
35
  outline: none;
38
- box-shadow: inset 0 0 0 3px color-mod(var(--light-blue) a(30%));
36
+ box-shadow: var(--keyboard-focus);
39
37
  }
40
38
  }
41
39
 
@@ -48,15 +46,15 @@ SColumn[hidden] {
48
46
 
49
47
  SColumn[use='primary'] {
50
48
  padding: 12px;
51
- border-right: 1px solid var(--mercury);
52
- border-bottom: 1px solid var(--mercury);
53
- background-color: #f2f3f4;
49
+ border-right: 1px solid var(--gray-100);
50
+ border-bottom: 1px solid var(--gray-100);
51
+ background-color: var(--gray-50);
54
52
  }
55
53
 
56
54
  SColumn[use='secondary'] {
57
55
  padding: 8px;
58
- border-bottom: 1px solid var(--stone);
59
- background-color: #fff;
56
+ border-bottom: 1px solid var(--gray-300);
57
+ background-color: var(--white);
60
58
  }
61
59
 
62
60
  SColumn[use]:last-child {
@@ -79,28 +77,28 @@ SColumn[groupHead][use] {
79
77
  }
80
78
 
81
79
  SColumn[groupHead][use='primary'] {
82
- border-bottom: 1px solid var(--mercury);
80
+ border-bottom: 1px solid var(--gray-100);
83
81
  }
84
82
 
85
83
  SColumn[groupHead][use='secondary'] {
86
- border-bottom: 1px solid var(--stone);
84
+ border-bottom: 1px solid var(--gray-100);
87
85
  }
88
86
 
89
87
  SColumn[sortable] {
90
88
  cursor: pointer;
91
89
 
92
90
  &[use='primary']:hover {
93
- background-color: #e4e7e8;
91
+ background-color: var(--gray-100);
94
92
  }
95
93
  }
96
94
 
97
95
  SColumn[active][use='primary'] {
98
- background-color: #e4e7e8;
96
+ background-color: var(--gray-100);
99
97
  }
100
98
 
101
99
  SColumn[resizable] {
102
100
  &:hover:after {
103
- background: #a6b0b3;
101
+ background: var(--gray-100);
104
102
  }
105
103
 
106
104
  &:after {
@@ -122,13 +120,12 @@ SColumn[fixed] {
122
120
  }
123
121
 
124
122
  SSortIcon {
125
- margin-top: 2px;
126
- margin-left: 4px;
127
- color: var(--stone-light);
123
+ fill: var(--gray-300);
124
+ margin-left: 6px;
128
125
  }
129
126
 
130
127
  SSortIcon[active] {
131
- fill: var(--wall);
128
+ fill: var(--gray-400);
132
129
  }
133
130
 
134
131
  SBodyWrapper {
@@ -152,7 +149,7 @@ SRow {
152
149
  SRow[active] > SCell:not([theme]),
153
150
  SRow:hover > SCell:not([theme]),
154
151
  SRow SCell:hover + SGroupCell SCell:not([theme]) {
155
- background-color: #f6f7f7;
152
+ background-color: color-mod(var(--gray-100) blend(var(--white) 50%));
156
153
  }
157
154
 
158
155
  /* MUTED THEME */
@@ -169,50 +166,50 @@ SRow[theme='muted'] SCell:hover + SGroupCell SCell:not([theme]) {
169
166
 
170
167
  /* INFO THEME */
171
168
  SRow[theme='info'] SCell:not([theme]) {
172
- background-color: color-mod(var(--light-blue) blend(#fff 80%));
169
+ background-color: var(--blue-50);
173
170
  }
174
171
 
175
172
  SRow:hover > SCell[theme='info'],
176
173
  SRow[theme='info'][active] > SCell:not([theme]),
177
174
  SRow[theme='info']:hover > SCell:not([theme]),
178
175
  SRow[theme='info'] SCell:hover + SGroupCell SCell:not([theme]) {
179
- background-color: color-mod(var(--light-blue) blend(#fff 75%));
176
+ background-color: var(--blue-100);
180
177
  }
181
178
 
182
179
  /* SUCCESS THEME */
183
180
  SRow[theme='success'] SCell:not([theme]) {
184
- background-color: color-mod(var(--green) blend(#fff 85%));
181
+ background-color: var(--green-50);
185
182
  }
186
183
 
187
184
  SRow:hover > SCell[theme='success'],
188
185
  SRow[theme='success'][active] > SCell:not([theme]),
189
186
  SRow[theme='success']:hover > SCell:not([theme]),
190
187
  SRow[theme='success'] SCell:hover + SGroupCell SCell:not([theme]) {
191
- background-color: color-mod(var(--green) blend(#fff 80%));
188
+ background-color: var(--green-100);
192
189
  }
193
190
 
194
191
  /* WARNING THEME */
195
192
  SRow[theme='warning'] SCell:not([theme]) {
196
- background-color: color-mod(var(--light-orange) blend(#fff 85%));
193
+ background-color: var(--orange-50);
197
194
  }
198
195
 
199
196
  SRow:hover > SCell[theme='warning'],
200
197
  SRow[theme='warning'][active] > SCell:not([theme]),
201
198
  SRow[theme='warning']:hover > SCell:not([theme]),
202
199
  SRow[theme='warning'] SCell:hover + SGroupCell SCell:not([theme]) {
203
- background-color: color-mod(var(--light-orange) blend(#fff 80%));
200
+ background-color: var(--orange-100);
204
201
  }
205
202
 
206
203
  /* DANGER THEME */
207
204
  SRow[theme='danger'] SCell:not([theme]) {
208
- background-color: color-mod(var(--red) blend(#fff 90%));
205
+ background-color: var(--red-50);
209
206
  }
210
207
 
211
208
  SRow:hover > SCell[theme='danger'],
212
209
  SRow[theme='danger'][active] > SCell:not([theme]),
213
210
  SRow[theme='danger']:hover > SCell:not([theme]),
214
211
  SRow[theme='danger'] SCell:hover + SGroupCell SCell:not([theme]) {
215
- background-color: color-mod(var(--red) blend(#fff 85%));
212
+ background-color: var(--red-100);
216
213
  }
217
214
 
218
215
  SRow[positioned] {
@@ -223,11 +220,11 @@ SCell {
223
220
  display: flex;
224
221
  flex: 1;
225
222
  flex-basis: auto;
226
- font-size: 14px;
227
- color: var(--gray20);
228
- line-height: 20px;
223
+ font-size: var(--fs-200);
224
+ line-height: var(--lh-200);
225
+ color: var(--gray-800);
229
226
  box-sizing: border-box;
230
- border-bottom: 1px solid var(--mercury);
227
+ border-bottom: 1px solid var(--gray-100);
231
228
  overflow: hidden;
232
229
  white-space: nowrap;
233
230
  }
@@ -235,13 +232,13 @@ SCell {
235
232
  SCell[use='primary'] {
236
233
  padding: 12px;
237
234
  min-height: 45px;
238
- background-color: #fff;
235
+ background-color: var(--white);
239
236
  }
240
237
 
241
238
  SCell[use='secondary'] {
242
239
  padding: 8px;
243
240
  min-height: 37px;
244
- background-color: #fff;
241
+ background-color: var(--white);
245
242
  }
246
243
 
247
244
  SCell[fixed] {
@@ -254,19 +251,19 @@ SCell[theme='muted'] {
254
251
  }
255
252
 
256
253
  SCell[theme='info'] {
257
- background-color: color-mod(var(--light-blue) blend(#fff 80%));
254
+ background-color: var(--blue-50);
258
255
  }
259
256
 
260
257
  SCell[theme='success'] {
261
- background-color: color-mod(var(--green) blend(#fff 85%));
258
+ background-color: var(--green-50);
262
259
  }
263
260
 
264
261
  SCell[theme='warning'] {
265
- background-color: color-mod(var(--light-orange) blend(#fff 85%));
262
+ background-color: var(--orange-50);
266
263
  }
267
264
 
268
265
  SCell[theme='danger'] {
269
- background-color: color-mod(var(--red) blend(#fff 90%));
266
+ background-color: var(--red-50);
270
267
  }
271
268
 
272
269
  SScrollAreaBar[orientation='horizontal'] {
@@ -290,6 +287,6 @@ SScrollAreaBar[orientation='horizontal'] {
290
287
  SHeightHold {
291
288
  position: absolute;
292
289
  top: 0;
293
- width: 100px;
294
- /* pointer-events: none; */
290
+ width: 0;
291
+ pointer-events: none;
295
292
  }
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/data-table",
3
3
  "description": "SEMRush DataTable Component",
4
- "version": "2.2.6",
4
+ "version": "2.2.9",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
package/src/style/data-table.shadow.css CHANGED
@@ -24,18 +24,16 @@ SHead {
24
24
 
25
25
  SColumn {
26
26
  display: flex;
27
+ align-items: center;
27
28
  flex-grow: 1;
28
- /* Надо подумать можно ли уменьшать */
29
- /*flex-shrink: 0;*/
30
- font-size: 12px;
31
- line-height: 18px;
32
- color: var(--gray20);
29
+ font-size: var(--fs-100);
30
+ color: var(--gray-800);
33
31
  box-sizing: border-box;
34
32
  position: relative;
35
33
 
36
34
  &:focus {
37
35
  outline: none;
38
- box-shadow: inset 0 0 0 3px color-mod(var(--light-blue) a(30%));
36
+ box-shadow: var(--keyboard-focus);
39
37
  }
40
38
  }
41
39
 
@@ -48,15 +46,15 @@ SColumn[hidden] {
48
46
 
49
47
  SColumn[use='primary'] {
50
48
  padding: 12px;
51
- border-right: 1px solid var(--mercury);
52
- border-bottom: 1px solid var(--mercury);
53
- background-color: #f2f3f4;
49
+ border-right: 1px solid var(--gray-100);
50
+ border-bottom: 1px solid var(--gray-100);
51
+ background-color: var(--gray-50);
54
52
  }
55
53
 
56
54
  SColumn[use='secondary'] {
57
55
  padding: 8px;
58
- border-bottom: 1px solid var(--stone);
59
- background-color: #fff;
56
+ border-bottom: 1px solid var(--gray-300);
57
+ background-color: var(--white);
60
58
  }
61
59
 
62
60
  SColumn[use]:last-child {
@@ -79,28 +77,28 @@ SColumn[groupHead][use] {
79
77
  }
80
78
 
81
79
  SColumn[groupHead][use='primary'] {
82
- border-bottom: 1px solid var(--mercury);
80
+ border-bottom: 1px solid var(--gray-100);
83
81
  }
84
82
 
85
83
  SColumn[groupHead][use='secondary'] {
86
- border-bottom: 1px solid var(--stone);
84
+ border-bottom: 1px solid var(--gray-100);
87
85
  }
88
86
 
89
87
  SColumn[sortable] {
90
88
  cursor: pointer;
91
89
 
92
90
  &[use='primary']:hover {
93
- background-color: #e4e7e8;
91
+ background-color: var(--gray-100);
94
92
  }
95
93
  }
96
94
 
97
95
  SColumn[active][use='primary'] {
98
- background-color: #e4e7e8;
96
+ background-color: var(--gray-100);
99
97
  }
100
98
 
101
99
  SColumn[resizable] {
102
100
  &:hover:after {
103
- background: #a6b0b3;
101
+ background: var(--gray-100);
104
102
  }
105
103
 
106
104
  &:after {
@@ -122,13 +120,12 @@ SColumn[fixed] {
122
120
  }
123
121
 
124
122
  SSortIcon {
125
- margin-top: 2px;
126
- margin-left: 4px;
127
- color: var(--stone-light);
123
+ fill: var(--gray-300);
124
+ margin-left: 6px;
128
125
  }
129
126
 
130
127
  SSortIcon[active] {
131
- fill: var(--wall);
128
+ fill: var(--gray-400);
132
129
  }
133
130
 
134
131
  SBodyWrapper {
@@ -152,7 +149,7 @@ SRow {
152
149
  SRow[active] > SCell:not([theme]),
153
150
  SRow:hover > SCell:not([theme]),
154
151
  SRow SCell:hover + SGroupCell SCell:not([theme]) {
155
- background-color: #f6f7f7;
152
+ background-color: color-mod(var(--gray-100) blend(var(--white) 50%));
156
153
  }
157
154
 
158
155
  /* MUTED THEME */
@@ -169,50 +166,50 @@ SRow[theme='muted'] SCell:hover + SGroupCell SCell:not([theme]) {
169
166
 
170
167
  /* INFO THEME */
171
168
  SRow[theme='info'] SCell:not([theme]) {
172
- background-color: color-mod(var(--light-blue) blend(#fff 80%));
169
+ background-color: var(--blue-50);
173
170
  }
174
171
 
175
172
  SRow:hover > SCell[theme='info'],
176
173
  SRow[theme='info'][active] > SCell:not([theme]),
177
174
  SRow[theme='info']:hover > SCell:not([theme]),
178
175
  SRow[theme='info'] SCell:hover + SGroupCell SCell:not([theme]) {
179
- background-color: color-mod(var(--light-blue) blend(#fff 75%));
176
+ background-color: var(--blue-100);
180
177
  }
181
178
 
182
179
  /* SUCCESS THEME */
183
180
  SRow[theme='success'] SCell:not([theme]) {
184
- background-color: color-mod(var(--green) blend(#fff 85%));
181
+ background-color: var(--green-50);
185
182
  }
186
183
 
187
184
  SRow:hover > SCell[theme='success'],
188
185
  SRow[theme='success'][active] > SCell:not([theme]),
189
186
  SRow[theme='success']:hover > SCell:not([theme]),
190
187
  SRow[theme='success'] SCell:hover + SGroupCell SCell:not([theme]) {
191
- background-color: color-mod(var(--green) blend(#fff 80%));
188
+ background-color: var(--green-100);
192
189
  }
193
190
 
194
191
  /* WARNING THEME */
195
192
  SRow[theme='warning'] SCell:not([theme]) {
196
- background-color: color-mod(var(--light-orange) blend(#fff 85%));
193
+ background-color: var(--orange-50);
197
194
  }
198
195
 
199
196
  SRow:hover > SCell[theme='warning'],
200
197
  SRow[theme='warning'][active] > SCell:not([theme]),
201
198
  SRow[theme='warning']:hover > SCell:not([theme]),
202
199
  SRow[theme='warning'] SCell:hover + SGroupCell SCell:not([theme]) {
203
- background-color: color-mod(var(--light-orange) blend(#fff 80%));
200
+ background-color: var(--orange-100);
204
201
  }
205
202
 
206
203
  /* DANGER THEME */
207
204
  SRow[theme='danger'] SCell:not([theme]) {
208
- background-color: color-mod(var(--red) blend(#fff 90%));
205
+ background-color: var(--red-50);
209
206
  }
210
207
 
211
208
  SRow:hover > SCell[theme='danger'],
212
209
  SRow[theme='danger'][active] > SCell:not([theme]),
213
210
  SRow[theme='danger']:hover > SCell:not([theme]),
214
211
  SRow[theme='danger'] SCell:hover + SGroupCell SCell:not([theme]) {
215
- background-color: color-mod(var(--red) blend(#fff 85%));
212
+ background-color: var(--red-100);
216
213
  }
217
214
 
218
215
  SRow[positioned] {
@@ -223,11 +220,11 @@ SCell {
223
220
  display: flex;
224
221
  flex: 1;
225
222
  flex-basis: auto;
226
- font-size: 14px;
227
- color: var(--gray20);
228
- line-height: 20px;
223
+ font-size: var(--fs-200);
224
+ line-height: var(--lh-200);
225
+ color: var(--gray-800);
229
226
  box-sizing: border-box;
230
- border-bottom: 1px solid var(--mercury);
227
+ border-bottom: 1px solid var(--gray-100);
231
228
  overflow: hidden;
232
229
  white-space: nowrap;
233
230
  }
@@ -235,13 +232,13 @@ SCell {
235
232
  SCell[use='primary'] {
236
233
  padding: 12px;
237
234
  min-height: 45px;
238
- background-color: #fff;
235
+ background-color: var(--white);
239
236
  }
240
237
 
241
238
  SCell[use='secondary'] {
242
239
  padding: 8px;
243
240
  min-height: 37px;
244
- background-color: #fff;
241
+ background-color: var(--white);
245
242
  }
246
243
 
247
244
  SCell[fixed] {
@@ -254,19 +251,19 @@ SCell[theme='muted'] {
254
251
  }
255
252
 
256
253
  SCell[theme='info'] {
257
- background-color: color-mod(var(--light-blue) blend(#fff 80%));
254
+ background-color: var(--blue-50);
258
255
  }
259
256
 
260
257
  SCell[theme='success'] {
261
- background-color: color-mod(var(--green) blend(#fff 85%));
258
+ background-color: var(--green-50);
262
259
  }
263
260
 
264
261
  SCell[theme='warning'] {
265
- background-color: color-mod(var(--light-orange) blend(#fff 85%));
262
+ background-color: var(--orange-50);
266
263
  }
267
264
 
268
265
  SCell[theme='danger'] {
269
- background-color: color-mod(var(--red) blend(#fff 90%));
266
+ background-color: var(--red-50);
270
267
  }
271
268
 
272
269
  SScrollAreaBar[orientation='horizontal'] {
@@ -290,6 +287,6 @@ SScrollAreaBar[orientation='horizontal'] {
290
287
  SHeightHold {
291
288
  position: absolute;
292
289
  top: 0;
293
- width: 100px;
294
- /* pointer-events: none; */
290
+ width: 0;
291
+ pointer-events: none;
295
292
  }