@semcore/data-table 2.2.8 → 3.0.2

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (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 +39 -41
  4. package/lib/es6/DataTable.js +37 -37
  5. package/lib/es6/style/data-table.shadow.css +39 -41
  6. package/package.json +3 -3
  7. package/src/style/data-table.shadow.css +39 -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
+ ## [3.0.2] - 2022-05-18
6
+
7
+ ### Changed
8
+
9
+ - Version patch update due to children dependencies update (`@semcore/icon` [2.24.0 ~> 2.25.0], `@semcore/base-trigger` [3.0.0 ~> 3.0.1], `@semcore/accordion` [4.0.0 ~> 4.0.1]).
10
+
11
+ ## [3.0.1] - 2022-05-17
12
+
13
+ ### Fixed
14
+
15
+ - Fixed collapsing of header grouped cells.
16
+
17
+ ## [3.0.0] - 2022-05-17
18
+
19
+ ### BREAK
20
+
21
+ - Updated styles according to the library redesign policy.
22
+
23
+ ## [2.2.9] - 2022-05-16
24
+
25
+ ### Changed
26
+
27
+ - Version patch update due to children dependencies update (`@semcore/skeleton` [3.2.1 ~> 3.3.0]).
28
+
5
29
  ## [2.2.8] - 2022-05-16
6
30
 
7
31
  ### Changed
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_1pz37_gg_{position:relative}.___SHeadWrapper_1pz37_gg_{position:relative}.___SHeadWrapper_1pz37_gg_.__sticky_1pz37_gg_{position:-webkit-sticky;position:sticky;top:0;z-index:2}.___SHead_1pz37_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_1pz37_gg_{display:flex;align-items:center;flex-grow:1;font-size:12px;color:#191b23;box-sizing:border-box;position:relative}.___SColumn_1pz37_gg_:focus{outline:none;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SColumn_1pz37_gg_.__hidden_1pz37_gg_{height:0!important;padding:0!important;overflow:hidden!important;border:none!important}.___SColumn_1pz37_gg_._use_primary_1pz37_gg_{padding:12px;border-right:1px solid #e0e1e9;border-bottom:1px solid #e0e1e9;background-color:#f4f5f9}.___SColumn_1pz37_gg_._use_secondary_1pz37_gg_{padding:8px;border-bottom:1px solid #a9abb6;background-color:#ffffff}.___SColumn_1pz37_gg_.__use_1pz37_gg_:last-child{border-right:none}.___SColumn_1pz37_gg_.__group_1pz37_gg_.__use_1pz37_gg_{display:flex;flex-wrap:wrap;flex-direction:column;align-items:normal;border-bottom:none;padding:0}.___SColumn_1pz37_gg_.__groupHead_1pz37_gg_.__use_1pz37_gg_{justify-content:center;border-right:none;z-index:1}.___SColumn_1pz37_gg_.__groupHead_1pz37_gg_._use_primary_1pz37_gg_{border-bottom:1px solid #e0e1e9}.___SColumn_1pz37_gg_.__groupHead_1pz37_gg_._use_secondary_1pz37_gg_{border-bottom:1px solid #e0e1e9}.___SColumn_1pz37_gg_.__sortable_1pz37_gg_{cursor:pointer}.___SColumn_1pz37_gg_.__sortable_1pz37_gg_._use_primary_1pz37_gg_:hover{background-color:#e0e1e9}.___SColumn_1pz37_gg_.__active_1pz37_gg_._use_primary_1pz37_gg_{background-color:#e0e1e9}.___SColumn_1pz37_gg_.__resizable_1pz37_gg_:hover:after{background:#e0e1e9}.___SColumn_1pz37_gg_.__resizable_1pz37_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100vh;width:1px;background:transparent;cursor:col-resize}.___SColumn_1pz37_gg_.__fixed_1pz37_gg_{position:-webkit-sticky;position:sticky;z-index:2}.___SSortIcon_1pz37_gg_{fill:#a9abb6;margin-left:6px}.___SSortIcon_1pz37_gg_.__active_1pz37_gg_{fill:#8a8e9b}.___SBodyWrapper_1pz37_gg_{position:relative}.___SBody_1pz37_gg_{display:flex;flex-direction:column;position:relative;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.___SRow_1pz37_gg_{display:flex;flex-direction:row;position:relative}.___SRow_1pz37_gg_:hover>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_.__active_1pz37_gg_>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_ .___SCell_1pz37_gg_:hover+.___SGroupCell_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#f0f0f4}.___SRow_1pz37_gg_._theme_muted_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#f2f3f4}.___SRow_1pz37_gg_:hover>.___SCell_1pz37_gg_._theme_muted_1pz37_gg_,.___SRow_1pz37_gg_._theme_muted_1pz37_gg_:hover>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_muted_1pz37_gg_.__active_1pz37_gg_>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_muted_1pz37_gg_ .___SCell_1pz37_gg_:hover+.___SGroupCell_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#f6f7f7}.___SRow_1pz37_gg_._theme_info_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#e9f7ff}.___SRow_1pz37_gg_:hover>.___SCell_1pz37_gg_._theme_info_1pz37_gg_,.___SRow_1pz37_gg_._theme_info_1pz37_gg_:hover>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_info_1pz37_gg_.__active_1pz37_gg_>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_info_1pz37_gg_ .___SCell_1pz37_gg_:hover+.___SGroupCell_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#c4e5fe}.___SRow_1pz37_gg_._theme_success_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#dbfee8}.___SRow_1pz37_gg_:hover>.___SCell_1pz37_gg_._theme_success_1pz37_gg_,.___SRow_1pz37_gg_._theme_success_1pz37_gg_:hover>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_success_1pz37_gg_.__active_1pz37_gg_>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_success_1pz37_gg_ .___SCell_1pz37_gg_:hover+.___SGroupCell_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#9ef2c9}.___SRow_1pz37_gg_._theme_warning_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#fff3d9}.___SRow_1pz37_gg_:hover>.___SCell_1pz37_gg_._theme_warning_1pz37_gg_,.___SRow_1pz37_gg_._theme_warning_1pz37_gg_:hover>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_warning_1pz37_gg_.__active_1pz37_gg_>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_warning_1pz37_gg_ .___SCell_1pz37_gg_:hover+.___SGroupCell_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#ffdca2}.___SRow_1pz37_gg_._theme_danger_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#fff0f7}.___SRow_1pz37_gg_:hover>.___SCell_1pz37_gg_._theme_danger_1pz37_gg_,.___SRow_1pz37_gg_._theme_danger_1pz37_gg_:hover>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_danger_1pz37_gg_.__active_1pz37_gg_>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_danger_1pz37_gg_ .___SCell_1pz37_gg_:hover+.___SGroupCell_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#ffd7df}.___SRow_1pz37_gg_.__positioned_1pz37_gg_{position:absolute}.___SCell_1pz37_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_1pz37_gg_._use_primary_1pz37_gg_{padding:12px;min-height:45px;background-color:#ffffff}.___SCell_1pz37_gg_._use_secondary_1pz37_gg_{padding:8px;min-height:37px;background-color:#ffffff}.___SCell_1pz37_gg_.__fixed_1pz37_gg_{position:-webkit-sticky;position:sticky;z-index:1}.___SCell_1pz37_gg_._theme_muted_1pz37_gg_{background-color:#f2f3f4}.___SCell_1pz37_gg_._theme_info_1pz37_gg_{background-color:#e9f7ff}.___SCell_1pz37_gg_._theme_success_1pz37_gg_{background-color:#dbfee8}.___SCell_1pz37_gg_._theme_warning_1pz37_gg_{background-color:#fff3d9}.___SCell_1pz37_gg_._theme_danger_1pz37_gg_{background-color:#fff0f7}.___SScrollAreaBar_1pz37_gg_._orientation_horizontal_1pz37_gg_{position:-webkit-sticky;position:sticky;bottom:0;left:0;margin-top:-12px;z-index:2}.___SScrollAreaBar_1pz37_gg_._orientation_vertical_1pz37_gg_{width:12px}.___SScrollAreaBar_1pz37_gg_._orientation_horizontal_1pz37_gg_{margin-left:calc(var(--left_jppxj1) + 4px);margin-right:calc(var(--right_jppxj1) + 4px);width:calc(100% - var(--offsetSum_jppxj1) - 8px)}.___SHeightHold_1pz37_gg_{position:absolute;top:0;width:0;pointer-events:none}"
73
73
  /*__inner_css_end__*/
74
- , "4k1pky_gg_")
74
+ , "jppxj1_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_1pz37_gg_",
78
+ "__SHeadWrapper": "___SHeadWrapper_1pz37_gg_",
79
+ "_sticky": "__sticky_1pz37_gg_",
80
+ "__SHead": "___SHead_1pz37_gg_",
81
+ "__SColumn": "___SColumn_1pz37_gg_",
82
+ "_hidden": "__hidden_1pz37_gg_",
83
+ "_use_primary": "_use_primary_1pz37_gg_",
84
+ "_use_secondary": "_use_secondary_1pz37_gg_",
85
+ "_use": "__use_1pz37_gg_",
86
+ "_group": "__group_1pz37_gg_",
87
+ "_groupHead": "__groupHead_1pz37_gg_",
88
+ "_sortable": "__sortable_1pz37_gg_",
89
+ "_active": "__active_1pz37_gg_",
90
+ "_resizable": "__resizable_1pz37_gg_",
91
+ "_fixed": "__fixed_1pz37_gg_",
92
+ "__SSortIcon": "___SSortIcon_1pz37_gg_",
93
+ "__SBodyWrapper": "___SBodyWrapper_1pz37_gg_",
94
+ "__SBody": "___SBody_1pz37_gg_",
95
+ "__SRow": "___SRow_1pz37_gg_",
96
+ "__SCell": "___SCell_1pz37_gg_",
97
+ "_theme": "__theme_1pz37_gg_",
98
+ "__SGroupCell": "___SGroupCell_1pz37_gg_",
99
+ "_theme_muted": "_theme_muted_1pz37_gg_",
100
+ "_theme_info": "_theme_info_1pz37_gg_",
101
+ "_theme_success": "_theme_success_1pz37_gg_",
102
+ "_theme_warning": "_theme_warning_1pz37_gg_",
103
+ "_theme_danger": "_theme_danger_1pz37_gg_",
104
+ "_positioned": "__positioned_1pz37_gg_",
105
+ "__SScrollAreaBar": "___SScrollAreaBar_1pz37_gg_",
106
+ "_orientation_horizontal": "_orientation_horizontal_1pz37_gg_",
107
+ "_orientation_vertical": "_orientation_vertical_1pz37_gg_",
108
+ "--left": "--left_jppxj1",
109
+ "--right": "--right_jppxj1",
110
+ "--offsetSum": "--offsetSum_jppxj1",
111
+ "__SHeightHold": "___SHeightHold_1pz37_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 {
@@ -67,6 +65,7 @@ SColumn[group][use] {
67
65
  display: flex;
68
66
  flex-wrap: wrap;
69
67
  flex-direction: column;
68
+ align-items: normal;
70
69
  border-bottom: none;
71
70
  padding: 0;
72
71
  }
@@ -79,28 +78,28 @@ SColumn[groupHead][use] {
79
78
  }
80
79
 
81
80
  SColumn[groupHead][use='primary'] {
82
- border-bottom: 1px solid var(--mercury);
81
+ border-bottom: 1px solid var(--gray-100);
83
82
  }
84
83
 
85
84
  SColumn[groupHead][use='secondary'] {
86
- border-bottom: 1px solid var(--stone);
85
+ border-bottom: 1px solid var(--gray-100);
87
86
  }
88
87
 
89
88
  SColumn[sortable] {
90
89
  cursor: pointer;
91
90
 
92
91
  &[use='primary']:hover {
93
- background-color: #e4e7e8;
92
+ background-color: var(--gray-100);
94
93
  }
95
94
  }
96
95
 
97
96
  SColumn[active][use='primary'] {
98
- background-color: #e4e7e8;
97
+ background-color: var(--gray-100);
99
98
  }
100
99
 
101
100
  SColumn[resizable] {
102
101
  &:hover:after {
103
- background: #a6b0b3;
102
+ background: var(--gray-100);
104
103
  }
105
104
 
106
105
  &:after {
@@ -122,13 +121,12 @@ SColumn[fixed] {
122
121
  }
123
122
 
124
123
  SSortIcon {
125
- margin-top: 2px;
126
- margin-left: 4px;
127
- color: var(--stone-light);
124
+ fill: var(--gray-300);
125
+ margin-left: 6px;
128
126
  }
129
127
 
130
128
  SSortIcon[active] {
131
- fill: var(--wall);
129
+ fill: var(--gray-400);
132
130
  }
133
131
 
134
132
  SBodyWrapper {
@@ -152,7 +150,7 @@ SRow {
152
150
  SRow[active] > SCell:not([theme]),
153
151
  SRow:hover > SCell:not([theme]),
154
152
  SRow SCell:hover + SGroupCell SCell:not([theme]) {
155
- background-color: #f6f7f7;
153
+ background-color: color-mod(var(--gray-100) blend(var(--white) 50%));
156
154
  }
157
155
 
158
156
  /* MUTED THEME */
@@ -169,50 +167,50 @@ SRow[theme='muted'] SCell:hover + SGroupCell SCell:not([theme]) {
169
167
 
170
168
  /* INFO THEME */
171
169
  SRow[theme='info'] SCell:not([theme]) {
172
- background-color: color-mod(var(--light-blue) blend(#fff 80%));
170
+ background-color: var(--blue-50);
173
171
  }
174
172
 
175
173
  SRow:hover > SCell[theme='info'],
176
174
  SRow[theme='info'][active] > SCell:not([theme]),
177
175
  SRow[theme='info']:hover > SCell:not([theme]),
178
176
  SRow[theme='info'] SCell:hover + SGroupCell SCell:not([theme]) {
179
- background-color: color-mod(var(--light-blue) blend(#fff 75%));
177
+ background-color: var(--blue-100);
180
178
  }
181
179
 
182
180
  /* SUCCESS THEME */
183
181
  SRow[theme='success'] SCell:not([theme]) {
184
- background-color: color-mod(var(--green) blend(#fff 85%));
182
+ background-color: var(--green-50);
185
183
  }
186
184
 
187
185
  SRow:hover > SCell[theme='success'],
188
186
  SRow[theme='success'][active] > SCell:not([theme]),
189
187
  SRow[theme='success']:hover > SCell:not([theme]),
190
188
  SRow[theme='success'] SCell:hover + SGroupCell SCell:not([theme]) {
191
- background-color: color-mod(var(--green) blend(#fff 80%));
189
+ background-color: var(--green-100);
192
190
  }
193
191
 
194
192
  /* WARNING THEME */
195
193
  SRow[theme='warning'] SCell:not([theme]) {
196
- background-color: color-mod(var(--light-orange) blend(#fff 85%));
194
+ background-color: var(--orange-50);
197
195
  }
198
196
 
199
197
  SRow:hover > SCell[theme='warning'],
200
198
  SRow[theme='warning'][active] > SCell:not([theme]),
201
199
  SRow[theme='warning']:hover > SCell:not([theme]),
202
200
  SRow[theme='warning'] SCell:hover + SGroupCell SCell:not([theme]) {
203
- background-color: color-mod(var(--light-orange) blend(#fff 80%));
201
+ background-color: var(--orange-100);
204
202
  }
205
203
 
206
204
  /* DANGER THEME */
207
205
  SRow[theme='danger'] SCell:not([theme]) {
208
- background-color: color-mod(var(--red) blend(#fff 90%));
206
+ background-color: var(--red-50);
209
207
  }
210
208
 
211
209
  SRow:hover > SCell[theme='danger'],
212
210
  SRow[theme='danger'][active] > SCell:not([theme]),
213
211
  SRow[theme='danger']:hover > SCell:not([theme]),
214
212
  SRow[theme='danger'] SCell:hover + SGroupCell SCell:not([theme]) {
215
- background-color: color-mod(var(--red) blend(#fff 85%));
213
+ background-color: var(--red-100);
216
214
  }
217
215
 
218
216
  SRow[positioned] {
@@ -223,11 +221,11 @@ SCell {
223
221
  display: flex;
224
222
  flex: 1;
225
223
  flex-basis: auto;
226
- font-size: 14px;
227
- color: var(--gray20);
228
- line-height: 20px;
224
+ font-size: var(--fs-200);
225
+ line-height: var(--lh-200);
226
+ color: var(--gray-800);
229
227
  box-sizing: border-box;
230
- border-bottom: 1px solid var(--mercury);
228
+ border-bottom: 1px solid var(--gray-100);
231
229
  overflow: hidden;
232
230
  white-space: nowrap;
233
231
  }
@@ -235,13 +233,13 @@ SCell {
235
233
  SCell[use='primary'] {
236
234
  padding: 12px;
237
235
  min-height: 45px;
238
- background-color: #fff;
236
+ background-color: var(--white);
239
237
  }
240
238
 
241
239
  SCell[use='secondary'] {
242
240
  padding: 8px;
243
241
  min-height: 37px;
244
- background-color: #fff;
242
+ background-color: var(--white);
245
243
  }
246
244
 
247
245
  SCell[fixed] {
@@ -254,19 +252,19 @@ SCell[theme='muted'] {
254
252
  }
255
253
 
256
254
  SCell[theme='info'] {
257
- background-color: color-mod(var(--light-blue) blend(#fff 80%));
255
+ background-color: var(--blue-50);
258
256
  }
259
257
 
260
258
  SCell[theme='success'] {
261
- background-color: color-mod(var(--green) blend(#fff 85%));
259
+ background-color: var(--green-50);
262
260
  }
263
261
 
264
262
  SCell[theme='warning'] {
265
- background-color: color-mod(var(--light-orange) blend(#fff 85%));
263
+ background-color: var(--orange-50);
266
264
  }
267
265
 
268
266
  SCell[theme='danger'] {
269
- background-color: color-mod(var(--red) blend(#fff 90%));
267
+ background-color: var(--red-50);
270
268
  }
271
269
 
272
270
  SScrollAreaBar[orientation='horizontal'] {
@@ -290,6 +288,6 @@ SScrollAreaBar[orientation='horizontal'] {
290
288
  SHeightHold {
291
289
  position: absolute;
292
290
  top: 0;
293
- width: 100px;
294
- /* pointer-events: none; */
291
+ width: 0;
292
+ pointer-events: none;
295
293
  }
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_1pz37_gg_{position:relative}.___SHeadWrapper_1pz37_gg_{position:relative}.___SHeadWrapper_1pz37_gg_.__sticky_1pz37_gg_{position:-webkit-sticky;position:sticky;top:0;z-index:2}.___SHead_1pz37_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_1pz37_gg_{display:flex;align-items:center;flex-grow:1;font-size:12px;color:#191b23;box-sizing:border-box;position:relative}.___SColumn_1pz37_gg_:focus{outline:none;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SColumn_1pz37_gg_.__hidden_1pz37_gg_{height:0!important;padding:0!important;overflow:hidden!important;border:none!important}.___SColumn_1pz37_gg_._use_primary_1pz37_gg_{padding:12px;border-right:1px solid #e0e1e9;border-bottom:1px solid #e0e1e9;background-color:#f4f5f9}.___SColumn_1pz37_gg_._use_secondary_1pz37_gg_{padding:8px;border-bottom:1px solid #a9abb6;background-color:#ffffff}.___SColumn_1pz37_gg_.__use_1pz37_gg_:last-child{border-right:none}.___SColumn_1pz37_gg_.__group_1pz37_gg_.__use_1pz37_gg_{display:flex;flex-wrap:wrap;flex-direction:column;align-items:normal;border-bottom:none;padding:0}.___SColumn_1pz37_gg_.__groupHead_1pz37_gg_.__use_1pz37_gg_{justify-content:center;border-right:none;z-index:1}.___SColumn_1pz37_gg_.__groupHead_1pz37_gg_._use_primary_1pz37_gg_{border-bottom:1px solid #e0e1e9}.___SColumn_1pz37_gg_.__groupHead_1pz37_gg_._use_secondary_1pz37_gg_{border-bottom:1px solid #e0e1e9}.___SColumn_1pz37_gg_.__sortable_1pz37_gg_{cursor:pointer}.___SColumn_1pz37_gg_.__sortable_1pz37_gg_._use_primary_1pz37_gg_:hover{background-color:#e0e1e9}.___SColumn_1pz37_gg_.__active_1pz37_gg_._use_primary_1pz37_gg_{background-color:#e0e1e9}.___SColumn_1pz37_gg_.__resizable_1pz37_gg_:hover:after{background:#e0e1e9}.___SColumn_1pz37_gg_.__resizable_1pz37_gg_:after{content:\"\";position:absolute;bottom:0;right:-1px;height:100vh;width:1px;background:transparent;cursor:col-resize}.___SColumn_1pz37_gg_.__fixed_1pz37_gg_{position:-webkit-sticky;position:sticky;z-index:2}.___SSortIcon_1pz37_gg_{fill:#a9abb6;margin-left:6px}.___SSortIcon_1pz37_gg_.__active_1pz37_gg_{fill:#8a8e9b}.___SBodyWrapper_1pz37_gg_{position:relative}.___SBody_1pz37_gg_{display:flex;flex-direction:column;position:relative;min-width:-webkit-fit-content;min-width:-moz-fit-content;min-width:fit-content}.___SRow_1pz37_gg_{display:flex;flex-direction:row;position:relative}.___SRow_1pz37_gg_:hover>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_.__active_1pz37_gg_>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_ .___SCell_1pz37_gg_:hover+.___SGroupCell_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#f0f0f4}.___SRow_1pz37_gg_._theme_muted_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#f2f3f4}.___SRow_1pz37_gg_:hover>.___SCell_1pz37_gg_._theme_muted_1pz37_gg_,.___SRow_1pz37_gg_._theme_muted_1pz37_gg_:hover>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_muted_1pz37_gg_.__active_1pz37_gg_>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_muted_1pz37_gg_ .___SCell_1pz37_gg_:hover+.___SGroupCell_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#f6f7f7}.___SRow_1pz37_gg_._theme_info_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#e9f7ff}.___SRow_1pz37_gg_:hover>.___SCell_1pz37_gg_._theme_info_1pz37_gg_,.___SRow_1pz37_gg_._theme_info_1pz37_gg_:hover>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_info_1pz37_gg_.__active_1pz37_gg_>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_info_1pz37_gg_ .___SCell_1pz37_gg_:hover+.___SGroupCell_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#c4e5fe}.___SRow_1pz37_gg_._theme_success_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#dbfee8}.___SRow_1pz37_gg_:hover>.___SCell_1pz37_gg_._theme_success_1pz37_gg_,.___SRow_1pz37_gg_._theme_success_1pz37_gg_:hover>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_success_1pz37_gg_.__active_1pz37_gg_>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_success_1pz37_gg_ .___SCell_1pz37_gg_:hover+.___SGroupCell_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#9ef2c9}.___SRow_1pz37_gg_._theme_warning_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#fff3d9}.___SRow_1pz37_gg_:hover>.___SCell_1pz37_gg_._theme_warning_1pz37_gg_,.___SRow_1pz37_gg_._theme_warning_1pz37_gg_:hover>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_warning_1pz37_gg_.__active_1pz37_gg_>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_warning_1pz37_gg_ .___SCell_1pz37_gg_:hover+.___SGroupCell_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#ffdca2}.___SRow_1pz37_gg_._theme_danger_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#fff0f7}.___SRow_1pz37_gg_:hover>.___SCell_1pz37_gg_._theme_danger_1pz37_gg_,.___SRow_1pz37_gg_._theme_danger_1pz37_gg_:hover>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_danger_1pz37_gg_.__active_1pz37_gg_>.___SCell_1pz37_gg_:not(.__theme_1pz37_gg_),.___SRow_1pz37_gg_._theme_danger_1pz37_gg_ .___SCell_1pz37_gg_:hover+.___SGroupCell_1pz37_gg_ .___SCell_1pz37_gg_:not(.__theme_1pz37_gg_){background-color:#ffd7df}.___SRow_1pz37_gg_.__positioned_1pz37_gg_{position:absolute}.___SCell_1pz37_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_1pz37_gg_._use_primary_1pz37_gg_{padding:12px;min-height:45px;background-color:#ffffff}.___SCell_1pz37_gg_._use_secondary_1pz37_gg_{padding:8px;min-height:37px;background-color:#ffffff}.___SCell_1pz37_gg_.__fixed_1pz37_gg_{position:-webkit-sticky;position:sticky;z-index:1}.___SCell_1pz37_gg_._theme_muted_1pz37_gg_{background-color:#f2f3f4}.___SCell_1pz37_gg_._theme_info_1pz37_gg_{background-color:#e9f7ff}.___SCell_1pz37_gg_._theme_success_1pz37_gg_{background-color:#dbfee8}.___SCell_1pz37_gg_._theme_warning_1pz37_gg_{background-color:#fff3d9}.___SCell_1pz37_gg_._theme_danger_1pz37_gg_{background-color:#fff0f7}.___SScrollAreaBar_1pz37_gg_._orientation_horizontal_1pz37_gg_{position:-webkit-sticky;position:sticky;bottom:0;left:0;margin-top:-12px;z-index:2}.___SScrollAreaBar_1pz37_gg_._orientation_vertical_1pz37_gg_{width:12px}.___SScrollAreaBar_1pz37_gg_._orientation_horizontal_1pz37_gg_{margin-left:calc(var(--left_jppxj1) + 4px);margin-right:calc(var(--right_jppxj1) + 4px);width:calc(100% - var(--offsetSum_jppxj1) - 8px)}.___SHeightHold_1pz37_gg_{position:absolute;top:0;width:0;pointer-events:none}"
44
44
  /*__inner_css_end__*/
45
- , "4k1pky_gg_")
45
+ , "jppxj1_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_1pz37_gg_",
49
+ "__SHeadWrapper": "___SHeadWrapper_1pz37_gg_",
50
+ "_sticky": "__sticky_1pz37_gg_",
51
+ "__SHead": "___SHead_1pz37_gg_",
52
+ "__SColumn": "___SColumn_1pz37_gg_",
53
+ "_hidden": "__hidden_1pz37_gg_",
54
+ "_use_primary": "_use_primary_1pz37_gg_",
55
+ "_use_secondary": "_use_secondary_1pz37_gg_",
56
+ "_use": "__use_1pz37_gg_",
57
+ "_group": "__group_1pz37_gg_",
58
+ "_groupHead": "__groupHead_1pz37_gg_",
59
+ "_sortable": "__sortable_1pz37_gg_",
60
+ "_active": "__active_1pz37_gg_",
61
+ "_resizable": "__resizable_1pz37_gg_",
62
+ "_fixed": "__fixed_1pz37_gg_",
63
+ "__SSortIcon": "___SSortIcon_1pz37_gg_",
64
+ "__SBodyWrapper": "___SBodyWrapper_1pz37_gg_",
65
+ "__SBody": "___SBody_1pz37_gg_",
66
+ "__SRow": "___SRow_1pz37_gg_",
67
+ "__SCell": "___SCell_1pz37_gg_",
68
+ "_theme": "__theme_1pz37_gg_",
69
+ "__SGroupCell": "___SGroupCell_1pz37_gg_",
70
+ "_theme_muted": "_theme_muted_1pz37_gg_",
71
+ "_theme_info": "_theme_info_1pz37_gg_",
72
+ "_theme_success": "_theme_success_1pz37_gg_",
73
+ "_theme_warning": "_theme_warning_1pz37_gg_",
74
+ "_theme_danger": "_theme_danger_1pz37_gg_",
75
+ "_positioned": "__positioned_1pz37_gg_",
76
+ "__SScrollAreaBar": "___SScrollAreaBar_1pz37_gg_",
77
+ "_orientation_horizontal": "_orientation_horizontal_1pz37_gg_",
78
+ "_orientation_vertical": "_orientation_vertical_1pz37_gg_",
79
+ "--left": "--left_jppxj1",
80
+ "--right": "--right_jppxj1",
81
+ "--offsetSum": "--offsetSum_jppxj1",
82
+ "__SHeightHold": "___SHeightHold_1pz37_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 {
@@ -67,6 +65,7 @@ SColumn[group][use] {
67
65
  display: flex;
68
66
  flex-wrap: wrap;
69
67
  flex-direction: column;
68
+ align-items: normal;
70
69
  border-bottom: none;
71
70
  padding: 0;
72
71
  }
@@ -79,28 +78,28 @@ SColumn[groupHead][use] {
79
78
  }
80
79
 
81
80
  SColumn[groupHead][use='primary'] {
82
- border-bottom: 1px solid var(--mercury);
81
+ border-bottom: 1px solid var(--gray-100);
83
82
  }
84
83
 
85
84
  SColumn[groupHead][use='secondary'] {
86
- border-bottom: 1px solid var(--stone);
85
+ border-bottom: 1px solid var(--gray-100);
87
86
  }
88
87
 
89
88
  SColumn[sortable] {
90
89
  cursor: pointer;
91
90
 
92
91
  &[use='primary']:hover {
93
- background-color: #e4e7e8;
92
+ background-color: var(--gray-100);
94
93
  }
95
94
  }
96
95
 
97
96
  SColumn[active][use='primary'] {
98
- background-color: #e4e7e8;
97
+ background-color: var(--gray-100);
99
98
  }
100
99
 
101
100
  SColumn[resizable] {
102
101
  &:hover:after {
103
- background: #a6b0b3;
102
+ background: var(--gray-100);
104
103
  }
105
104
 
106
105
  &:after {
@@ -122,13 +121,12 @@ SColumn[fixed] {
122
121
  }
123
122
 
124
123
  SSortIcon {
125
- margin-top: 2px;
126
- margin-left: 4px;
127
- color: var(--stone-light);
124
+ fill: var(--gray-300);
125
+ margin-left: 6px;
128
126
  }
129
127
 
130
128
  SSortIcon[active] {
131
- fill: var(--wall);
129
+ fill: var(--gray-400);
132
130
  }
133
131
 
134
132
  SBodyWrapper {
@@ -152,7 +150,7 @@ SRow {
152
150
  SRow[active] > SCell:not([theme]),
153
151
  SRow:hover > SCell:not([theme]),
154
152
  SRow SCell:hover + SGroupCell SCell:not([theme]) {
155
- background-color: #f6f7f7;
153
+ background-color: color-mod(var(--gray-100) blend(var(--white) 50%));
156
154
  }
157
155
 
158
156
  /* MUTED THEME */
@@ -169,50 +167,50 @@ SRow[theme='muted'] SCell:hover + SGroupCell SCell:not([theme]) {
169
167
 
170
168
  /* INFO THEME */
171
169
  SRow[theme='info'] SCell:not([theme]) {
172
- background-color: color-mod(var(--light-blue) blend(#fff 80%));
170
+ background-color: var(--blue-50);
173
171
  }
174
172
 
175
173
  SRow:hover > SCell[theme='info'],
176
174
  SRow[theme='info'][active] > SCell:not([theme]),
177
175
  SRow[theme='info']:hover > SCell:not([theme]),
178
176
  SRow[theme='info'] SCell:hover + SGroupCell SCell:not([theme]) {
179
- background-color: color-mod(var(--light-blue) blend(#fff 75%));
177
+ background-color: var(--blue-100);
180
178
  }
181
179
 
182
180
  /* SUCCESS THEME */
183
181
  SRow[theme='success'] SCell:not([theme]) {
184
- background-color: color-mod(var(--green) blend(#fff 85%));
182
+ background-color: var(--green-50);
185
183
  }
186
184
 
187
185
  SRow:hover > SCell[theme='success'],
188
186
  SRow[theme='success'][active] > SCell:not([theme]),
189
187
  SRow[theme='success']:hover > SCell:not([theme]),
190
188
  SRow[theme='success'] SCell:hover + SGroupCell SCell:not([theme]) {
191
- background-color: color-mod(var(--green) blend(#fff 80%));
189
+ background-color: var(--green-100);
192
190
  }
193
191
 
194
192
  /* WARNING THEME */
195
193
  SRow[theme='warning'] SCell:not([theme]) {
196
- background-color: color-mod(var(--light-orange) blend(#fff 85%));
194
+ background-color: var(--orange-50);
197
195
  }
198
196
 
199
197
  SRow:hover > SCell[theme='warning'],
200
198
  SRow[theme='warning'][active] > SCell:not([theme]),
201
199
  SRow[theme='warning']:hover > SCell:not([theme]),
202
200
  SRow[theme='warning'] SCell:hover + SGroupCell SCell:not([theme]) {
203
- background-color: color-mod(var(--light-orange) blend(#fff 80%));
201
+ background-color: var(--orange-100);
204
202
  }
205
203
 
206
204
  /* DANGER THEME */
207
205
  SRow[theme='danger'] SCell:not([theme]) {
208
- background-color: color-mod(var(--red) blend(#fff 90%));
206
+ background-color: var(--red-50);
209
207
  }
210
208
 
211
209
  SRow:hover > SCell[theme='danger'],
212
210
  SRow[theme='danger'][active] > SCell:not([theme]),
213
211
  SRow[theme='danger']:hover > SCell:not([theme]),
214
212
  SRow[theme='danger'] SCell:hover + SGroupCell SCell:not([theme]) {
215
- background-color: color-mod(var(--red) blend(#fff 85%));
213
+ background-color: var(--red-100);
216
214
  }
217
215
 
218
216
  SRow[positioned] {
@@ -223,11 +221,11 @@ SCell {
223
221
  display: flex;
224
222
  flex: 1;
225
223
  flex-basis: auto;
226
- font-size: 14px;
227
- color: var(--gray20);
228
- line-height: 20px;
224
+ font-size: var(--fs-200);
225
+ line-height: var(--lh-200);
226
+ color: var(--gray-800);
229
227
  box-sizing: border-box;
230
- border-bottom: 1px solid var(--mercury);
228
+ border-bottom: 1px solid var(--gray-100);
231
229
  overflow: hidden;
232
230
  white-space: nowrap;
233
231
  }
@@ -235,13 +233,13 @@ SCell {
235
233
  SCell[use='primary'] {
236
234
  padding: 12px;
237
235
  min-height: 45px;
238
- background-color: #fff;
236
+ background-color: var(--white);
239
237
  }
240
238
 
241
239
  SCell[use='secondary'] {
242
240
  padding: 8px;
243
241
  min-height: 37px;
244
- background-color: #fff;
242
+ background-color: var(--white);
245
243
  }
246
244
 
247
245
  SCell[fixed] {
@@ -254,19 +252,19 @@ SCell[theme='muted'] {
254
252
  }
255
253
 
256
254
  SCell[theme='info'] {
257
- background-color: color-mod(var(--light-blue) blend(#fff 80%));
255
+ background-color: var(--blue-50);
258
256
  }
259
257
 
260
258
  SCell[theme='success'] {
261
- background-color: color-mod(var(--green) blend(#fff 85%));
259
+ background-color: var(--green-50);
262
260
  }
263
261
 
264
262
  SCell[theme='warning'] {
265
- background-color: color-mod(var(--light-orange) blend(#fff 85%));
263
+ background-color: var(--orange-50);
266
264
  }
267
265
 
268
266
  SCell[theme='danger'] {
269
- background-color: color-mod(var(--red) blend(#fff 90%));
267
+ background-color: var(--red-50);
270
268
  }
271
269
 
272
270
  SScrollAreaBar[orientation='horizontal'] {
@@ -290,6 +288,6 @@ SScrollAreaBar[orientation='horizontal'] {
290
288
  SHeightHold {
291
289
  position: absolute;
292
290
  top: 0;
293
- width: 100px;
294
- /* pointer-events: none; */
291
+ width: 0;
292
+ pointer-events: none;
295
293
  }
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.8",
4
+ "version": "3.0.2",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -15,7 +15,7 @@
15
15
  "dependencies": {
16
16
  "@semcore/flex-box": "^4",
17
17
  "@semcore/icon": "^2.16",
18
- "@semcore/scroll-area": "^3.2",
18
+ "@semcore/scroll-area": "^4.0.0",
19
19
  "@semcore/utils": "^3.22",
20
20
  "resize-observer-polyfill": "^1.5"
21
21
  },
@@ -30,7 +30,7 @@
30
30
  "@semcore/portal": "*",
31
31
  "@semcore/progress-bar": "*",
32
32
  "@semcore/skeleton": "*",
33
- "@semcore/spin": "*",
33
+ "@semcore/spin": "^4",
34
34
  "@semcore/spin-container": "*",
35
35
  "@semcore/sticky": "*",
36
36
  "@semcore/tooltip": "*"
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 {
@@ -67,6 +65,7 @@ SColumn[group][use] {
67
65
  display: flex;
68
66
  flex-wrap: wrap;
69
67
  flex-direction: column;
68
+ align-items: normal;
70
69
  border-bottom: none;
71
70
  padding: 0;
72
71
  }
@@ -79,28 +78,28 @@ SColumn[groupHead][use] {
79
78
  }
80
79
 
81
80
  SColumn[groupHead][use='primary'] {
82
- border-bottom: 1px solid var(--mercury);
81
+ border-bottom: 1px solid var(--gray-100);
83
82
  }
84
83
 
85
84
  SColumn[groupHead][use='secondary'] {
86
- border-bottom: 1px solid var(--stone);
85
+ border-bottom: 1px solid var(--gray-100);
87
86
  }
88
87
 
89
88
  SColumn[sortable] {
90
89
  cursor: pointer;
91
90
 
92
91
  &[use='primary']:hover {
93
- background-color: #e4e7e8;
92
+ background-color: var(--gray-100);
94
93
  }
95
94
  }
96
95
 
97
96
  SColumn[active][use='primary'] {
98
- background-color: #e4e7e8;
97
+ background-color: var(--gray-100);
99
98
  }
100
99
 
101
100
  SColumn[resizable] {
102
101
  &:hover:after {
103
- background: #a6b0b3;
102
+ background: var(--gray-100);
104
103
  }
105
104
 
106
105
  &:after {
@@ -122,13 +121,12 @@ SColumn[fixed] {
122
121
  }
123
122
 
124
123
  SSortIcon {
125
- margin-top: 2px;
126
- margin-left: 4px;
127
- color: var(--stone-light);
124
+ fill: var(--gray-300);
125
+ margin-left: 6px;
128
126
  }
129
127
 
130
128
  SSortIcon[active] {
131
- fill: var(--wall);
129
+ fill: var(--gray-400);
132
130
  }
133
131
 
134
132
  SBodyWrapper {
@@ -152,7 +150,7 @@ SRow {
152
150
  SRow[active] > SCell:not([theme]),
153
151
  SRow:hover > SCell:not([theme]),
154
152
  SRow SCell:hover + SGroupCell SCell:not([theme]) {
155
- background-color: #f6f7f7;
153
+ background-color: color-mod(var(--gray-100) blend(var(--white) 50%));
156
154
  }
157
155
 
158
156
  /* MUTED THEME */
@@ -169,50 +167,50 @@ SRow[theme='muted'] SCell:hover + SGroupCell SCell:not([theme]) {
169
167
 
170
168
  /* INFO THEME */
171
169
  SRow[theme='info'] SCell:not([theme]) {
172
- background-color: color-mod(var(--light-blue) blend(#fff 80%));
170
+ background-color: var(--blue-50);
173
171
  }
174
172
 
175
173
  SRow:hover > SCell[theme='info'],
176
174
  SRow[theme='info'][active] > SCell:not([theme]),
177
175
  SRow[theme='info']:hover > SCell:not([theme]),
178
176
  SRow[theme='info'] SCell:hover + SGroupCell SCell:not([theme]) {
179
- background-color: color-mod(var(--light-blue) blend(#fff 75%));
177
+ background-color: var(--blue-100);
180
178
  }
181
179
 
182
180
  /* SUCCESS THEME */
183
181
  SRow[theme='success'] SCell:not([theme]) {
184
- background-color: color-mod(var(--green) blend(#fff 85%));
182
+ background-color: var(--green-50);
185
183
  }
186
184
 
187
185
  SRow:hover > SCell[theme='success'],
188
186
  SRow[theme='success'][active] > SCell:not([theme]),
189
187
  SRow[theme='success']:hover > SCell:not([theme]),
190
188
  SRow[theme='success'] SCell:hover + SGroupCell SCell:not([theme]) {
191
- background-color: color-mod(var(--green) blend(#fff 80%));
189
+ background-color: var(--green-100);
192
190
  }
193
191
 
194
192
  /* WARNING THEME */
195
193
  SRow[theme='warning'] SCell:not([theme]) {
196
- background-color: color-mod(var(--light-orange) blend(#fff 85%));
194
+ background-color: var(--orange-50);
197
195
  }
198
196
 
199
197
  SRow:hover > SCell[theme='warning'],
200
198
  SRow[theme='warning'][active] > SCell:not([theme]),
201
199
  SRow[theme='warning']:hover > SCell:not([theme]),
202
200
  SRow[theme='warning'] SCell:hover + SGroupCell SCell:not([theme]) {
203
- background-color: color-mod(var(--light-orange) blend(#fff 80%));
201
+ background-color: var(--orange-100);
204
202
  }
205
203
 
206
204
  /* DANGER THEME */
207
205
  SRow[theme='danger'] SCell:not([theme]) {
208
- background-color: color-mod(var(--red) blend(#fff 90%));
206
+ background-color: var(--red-50);
209
207
  }
210
208
 
211
209
  SRow:hover > SCell[theme='danger'],
212
210
  SRow[theme='danger'][active] > SCell:not([theme]),
213
211
  SRow[theme='danger']:hover > SCell:not([theme]),
214
212
  SRow[theme='danger'] SCell:hover + SGroupCell SCell:not([theme]) {
215
- background-color: color-mod(var(--red) blend(#fff 85%));
213
+ background-color: var(--red-100);
216
214
  }
217
215
 
218
216
  SRow[positioned] {
@@ -223,11 +221,11 @@ SCell {
223
221
  display: flex;
224
222
  flex: 1;
225
223
  flex-basis: auto;
226
- font-size: 14px;
227
- color: var(--gray20);
228
- line-height: 20px;
224
+ font-size: var(--fs-200);
225
+ line-height: var(--lh-200);
226
+ color: var(--gray-800);
229
227
  box-sizing: border-box;
230
- border-bottom: 1px solid var(--mercury);
228
+ border-bottom: 1px solid var(--gray-100);
231
229
  overflow: hidden;
232
230
  white-space: nowrap;
233
231
  }
@@ -235,13 +233,13 @@ SCell {
235
233
  SCell[use='primary'] {
236
234
  padding: 12px;
237
235
  min-height: 45px;
238
- background-color: #fff;
236
+ background-color: var(--white);
239
237
  }
240
238
 
241
239
  SCell[use='secondary'] {
242
240
  padding: 8px;
243
241
  min-height: 37px;
244
- background-color: #fff;
242
+ background-color: var(--white);
245
243
  }
246
244
 
247
245
  SCell[fixed] {
@@ -254,19 +252,19 @@ SCell[theme='muted'] {
254
252
  }
255
253
 
256
254
  SCell[theme='info'] {
257
- background-color: color-mod(var(--light-blue) blend(#fff 80%));
255
+ background-color: var(--blue-50);
258
256
  }
259
257
 
260
258
  SCell[theme='success'] {
261
- background-color: color-mod(var(--green) blend(#fff 85%));
259
+ background-color: var(--green-50);
262
260
  }
263
261
 
264
262
  SCell[theme='warning'] {
265
- background-color: color-mod(var(--light-orange) blend(#fff 85%));
263
+ background-color: var(--orange-50);
266
264
  }
267
265
 
268
266
  SCell[theme='danger'] {
269
- background-color: color-mod(var(--red) blend(#fff 90%));
267
+ background-color: var(--red-50);
270
268
  }
271
269
 
272
270
  SScrollAreaBar[orientation='horizontal'] {
@@ -290,6 +288,6 @@ SScrollAreaBar[orientation='horizontal'] {
290
288
  SHeightHold {
291
289
  position: absolute;
292
290
  top: 0;
293
- width: 100px;
294
- /* pointer-events: none; */
291
+ width: 0;
292
+ pointer-events: none;
295
293
  }