@semcore/base-trigger 2.6.5 → 3.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/CHANGELOG.md +7 -0
- package/lib/cjs/BaseTrigger.js +19 -21
- package/lib/cjs/BaseTrigger.js.map +1 -1
- package/lib/cjs/ButtonTrigger.js +7 -5
- package/lib/cjs/ButtonTrigger.js.map +1 -1
- package/lib/cjs/FilterTrigger.js +16 -18
- package/lib/cjs/FilterTrigger.js.map +1 -1
- package/lib/cjs/LinkTrigger.js +14 -16
- package/lib/cjs/LinkTrigger.js.map +1 -1
- package/lib/cjs/index.d.ts +1 -1
- package/lib/cjs/style/base-trigger.shadow.css +31 -88
- package/lib/cjs/style/button-trigger.shadow.css +4 -0
- package/lib/cjs/style/filter-trigger.shadow.css +19 -32
- package/lib/cjs/style/link-trigger.shadow.css +9 -19
- package/lib/es6/BaseTrigger.js +19 -21
- package/lib/es6/BaseTrigger.js.map +1 -1
- package/lib/es6/ButtonTrigger.js +7 -5
- package/lib/es6/ButtonTrigger.js.map +1 -1
- package/lib/es6/FilterTrigger.js +16 -18
- package/lib/es6/FilterTrigger.js.map +1 -1
- package/lib/es6/LinkTrigger.js +14 -16
- package/lib/es6/LinkTrigger.js.map +1 -1
- package/lib/es6/index.d.ts +1 -1
- package/lib/es6/style/base-trigger.shadow.css +31 -88
- package/lib/es6/style/button-trigger.shadow.css +4 -0
- package/lib/es6/style/filter-trigger.shadow.css +19 -32
- package/lib/es6/style/link-trigger.shadow.css +9 -19
- package/lib/types/index.d.ts +1 -1
- package/package.json +2 -2
- package/src/ButtonTrigger.jsx +2 -1
- package/src/index.d.ts +1 -1
- package/src/style/base-trigger.shadow.css +31 -88
- package/src/style/button-trigger.shadow.css +4 -0
- package/src/style/filter-trigger.shadow.css +19 -32
- package/src/style/link-trigger.shadow.css +9 -19
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,13 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [3.0.0] - 2022-05-17
|
|
6
|
+
|
|
7
|
+
### BREAK
|
|
8
|
+
|
|
9
|
+
- Updated styles according to the library redesign policy.
|
|
10
|
+
- Remove value "xl" and "s" for "size".
|
|
11
|
+
|
|
5
12
|
## [2.6.5] - 2022-05-16
|
|
6
13
|
|
|
7
14
|
### Changed
|
package/lib/cjs/BaseTrigger.js
CHANGED
|
@@ -52,30 +52,28 @@ var style = (
|
|
|
52
52
|
/*__reshadow_css_start__*/
|
|
53
53
|
_core.sstyled.insert(
|
|
54
54
|
/*__inner_css_start__*/
|
|
55
|
-
".
|
|
55
|
+
".___SBaseTrigger_5ixsq_gg_{display:inline-block;align-items:center;justify-content:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;box-shadow:none;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;text-align:center;vertical-align:middle;font-family:Inter,sans-serif;cursor:pointer;background:#fff;font-weight:400;border:1px solid #c4c7cf;color:#191b23}.___SBaseTrigger_5ixsq_gg_::-moz-focus-inner{border:none;padding:0}.___SBaseTrigger_5ixsq_gg_:active,.___SBaseTrigger_5ixsq_gg_:focus,.___SBaseTrigger_5ixsq_gg_:hover{outline:0;text-decoration:none}.___SBaseTrigger_5ixsq_gg_.__keyboardFocused_5ixsq_gg_{border:1px solid #008ff8;box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SBaseTrigger_5ixsq_gg_:hover{background-color:rgba(138,142,155,.2)}.___SBaseTrigger_5ixsq_gg_:active,.___SBaseTrigger_5ixsq_gg_.__active_5ixsq_gg_{background-color:rgba(138,142,155,.3)}.___SBaseTrigger_5ixsq_gg_.__disabled_5ixsq_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SBaseTrigger_5ixsq_gg_.__keyboardFocused_5ixsq_gg_{z-index:1}.___SInner_5ixsq_gg_{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}.___SText_5ixsq_gg_{display:inline;padding:1px 0;overflow:hidden;white-space:nowrap;text-overflow:ellipsis;line-height:1.42;flex-grow:1;text-align:left}.___SAddon_5ixsq_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.___SBaseAddon_5ixsq_gg_{width:12px;height:12px}.___SBaseTrigger_5ixsq_gg_._size_m_5ixsq_gg_{min-width:26px;height:28px;border-radius:6px;padding:0 8px;font-size:14px}.___SBaseTrigger_5ixsq_gg_._size_m_5ixsq_gg_ .___SAddon_5ixsq_gg_:not(:only-child):first-child{margin-right:8px}.___SBaseTrigger_5ixsq_gg_._size_m_5ixsq_gg_ .___SAddon_5ixsq_gg_:not(:only-child):last-child{margin-left:8px}.___SBaseTrigger_5ixsq_gg_._size_m_5ixsq_gg_ .___SAddon_5ixsq_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SBaseTrigger_5ixsq_gg_._size_l_5ixsq_gg_{min-width:32px;height:40px;border-radius:6px;padding:0 12px;font-size:16px}.___SBaseTrigger_5ixsq_gg_._size_l_5ixsq_gg_ .___SAddon_5ixsq_gg_:not(:only-child):first-child{margin-right:8px}.___SBaseTrigger_5ixsq_gg_._size_l_5ixsq_gg_ .___SAddon_5ixsq_gg_:not(:only-child):last-child{margin-left:8px}.___SBaseTrigger_5ixsq_gg_._size_l_5ixsq_gg_ .___SAddon_5ixsq_gg_:only-child{margin-left:-4px;margin-right:-4px}.___SBaseTrigger_5ixsq_gg_._neighborLocation_right_5ixsq_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SBaseTrigger_5ixsq_gg_._neighborLocation_both_5ixsq_gg_{border-radius:0;margin-left:-1px}.___SBaseTrigger_5ixsq_gg_._neighborLocation_left_5ixsq_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SText_5ixsq_gg_.__placeholder_5ixsq_gg_{color:#a9abb6}.___SBaseTrigger_5ixsq_gg_._state_normal_5ixsq_gg_{border-color:#c4c7cf}.___SBaseTrigger_5ixsq_gg_._state_valid_5ixsq_gg_{border-color:#59ddaa}.___SBaseTrigger_5ixsq_gg_._state_invalid_5ixsq_gg_{border-color:#ffaeb5}.___SBaseTrigger_5ixsq_gg_._state_invalid_5ixsq_gg_.__keyboardFocused_5ixsq_gg_{border-color:#ff622d;box-shadow:0 0 0 3px rgba(255,98,45,.3)}"
|
|
56
56
|
/*__inner_css_end__*/
|
|
57
|
-
, "
|
|
57
|
+
, "1ntsokv_gg_")
|
|
58
58
|
/*__reshadow_css_end__*/
|
|
59
59
|
, {
|
|
60
|
-
"__SBaseTrigger": "
|
|
61
|
-
"_keyboardFocused": "
|
|
62
|
-
"_active": "
|
|
63
|
-
"_disabled": "
|
|
64
|
-
"__SInner": "
|
|
65
|
-
"__SText": "
|
|
66
|
-
"__SAddon": "
|
|
67
|
-
"__SBaseAddon": "
|
|
68
|
-
"
|
|
69
|
-
"
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"_state_valid": "_state_valid_qaw1b_gg_",
|
|
78
|
-
"_state_invalid": "_state_invalid_qaw1b_gg_"
|
|
60
|
+
"__SBaseTrigger": "___SBaseTrigger_5ixsq_gg_",
|
|
61
|
+
"_keyboardFocused": "__keyboardFocused_5ixsq_gg_",
|
|
62
|
+
"_active": "__active_5ixsq_gg_",
|
|
63
|
+
"_disabled": "__disabled_5ixsq_gg_",
|
|
64
|
+
"__SInner": "___SInner_5ixsq_gg_",
|
|
65
|
+
"__SText": "___SText_5ixsq_gg_",
|
|
66
|
+
"__SAddon": "___SAddon_5ixsq_gg_",
|
|
67
|
+
"__SBaseAddon": "___SBaseAddon_5ixsq_gg_",
|
|
68
|
+
"_size_m": "_size_m_5ixsq_gg_",
|
|
69
|
+
"_size_l": "_size_l_5ixsq_gg_",
|
|
70
|
+
"_neighborLocation_right": "_neighborLocation_right_5ixsq_gg_",
|
|
71
|
+
"_neighborLocation_both": "_neighborLocation_both_5ixsq_gg_",
|
|
72
|
+
"_neighborLocation_left": "_neighborLocation_left_5ixsq_gg_",
|
|
73
|
+
"_placeholder": "__placeholder_5ixsq_gg_",
|
|
74
|
+
"_state_normal": "_state_normal_5ixsq_gg_",
|
|
75
|
+
"_state_valid": "_state_valid_5ixsq_gg_",
|
|
76
|
+
"_state_invalid": "_state_invalid_5ixsq_gg_"
|
|
79
77
|
});
|
|
80
78
|
|
|
81
79
|
var RootBaseTrigger = /*#__PURE__*/function (_Component) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/BaseTrigger.jsx"],"names":["RootBaseTrigger","asProps","placeholder","empty","SBaseTrigger","Box","SInner","Children","styles","theme","logger","warn","undefined","BaseTrigger","displayName","Text","Addon","Component","style","size","props","SText","children","SAddon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA
|
|
1
|
+
{"version":3,"sources":["../../src/BaseTrigger.jsx"],"names":["RootBaseTrigger","asProps","placeholder","empty","SBaseTrigger","Box","SInner","Children","styles","theme","logger","warn","undefined","BaseTrigger","displayName","Text","Addon","Component","style","size","props","SText","children","SAddon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMA,e;;;;;;;;;;;;WAQJ,wBAAe;AACb,0BAA+B,KAAKC,OAApC;AAAA,UAAQC,WAAR,iBAAQA,WAAR;AAAA,UAAqBC,KAArB,iBAAqBA,KAArB;AACA,aAAO;AACLD,QAAAA,WAAW,EAAXA,WADK;AAELC,QAAAA,KAAK,EAALA;AAFK,OAAP;AAID;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,YAAY,GAYMC,YAZxB;AACA,UAAMC,MAAM,GAAG,KAAf;AACA,2BAAoC,KAAKL,OAAzC;AAAA,UAAQM,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,MAAlB,kBAAkBA,MAAlB;AAAA,UAA0BC,KAA1B,kBAA0BA,KAA1B;;AAEAC,yBAAOC,IAAP,CACEF,KAAK,KAAKG,SADZ,EAEE,iDAFF,EAGE,KAAKX,OAAL,CAAa,cAAb,KAAgCY,WAAW,CAACC,WAH9C,EALO,CAWP;;;AACA,qBAAO,mBAAQN,MAAR,CAAP,eACE,gCAAC,YAAD;AAAA,iBAAkCC;AAAlC,+BACE,gCAAC,MAAD,0BAAS,mCAAkBF,QAAlB,EAA4BM,WAAW,CAACE,IAAxC,EAA8CF,WAAW,CAACG,KAA1D,CAAT,CADF,CADF;AAKD;;;EAjC2BC,e;;iCAAxBjB,e,iBACiB,a;iCADjBA,e,WAEWkB,K;iCAFXlB,e,kBAGkB;AACpBmB,EAAAA,IAAI,EAAE;AADc,C;iCAHlBnB,e,aAMa,CAAC,uCAAD,EAAyB,gDAAzB,C;;AA8BnB,SAASe,IAAT,CAAcK,KAAd,EAAqB;AAAA;AAAA;;AACnB,MAAMC,KAAK,GAKMhB,YALjB;AACA,MAAQiB,QAAR,GAAiDF,KAAjD,CAAQE,QAAR;AAAA,MAAkBd,MAAlB,GAAiDY,KAAjD,CAAkBZ,MAAlB;AAAA,MAA0BL,KAA1B,GAAiDiB,KAAjD,CAA0BjB,KAA1B;AAAA,MAAiCD,WAAjC,GAAiDkB,KAAjD,CAAiClB,WAAjC;AAEA,iBAAO,mBAAQM,MAAR,CAAP;AAAA;;AACE;AACA,kCAAC,KAAD;AAAA,uBAAqCL;AAArC,eACGA,KAAK,GAAGD,WAAH,GAAiBoB,QADzB,CAFF;AAMD;;AAED,SAASN,KAAT,CAAeI,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMG,MAAM,GACiClB,YAD7C;AACA,iBAAO,mBAAQe,KAAK,CAACZ,MAAd,CAAP,eAA6B,gCAAC,MAAD,2EAA7B;AACD;;AAED,IAAMK,WAAW,GAAG,sBAAgBb,eAAhB,EAAiC;AACnDe,EAAAA,IAAI,EAAJA,IADmD;AAEnDC,EAAAA,KAAK,EAALA;AAFmD,CAAjC,CAApB;eAKeH,W","sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport { Box } from '@semcore/flex-box';\nimport { neighborLocationEnhance } from '@semcore/neighbor-location';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport logger from '@semcore/utils/lib/logger';\n\nimport style from './style/base-trigger.shadow.css';\n\nclass RootBaseTrigger extends Component {\n static displayName = 'BaseTrigger';\n static style = style;\n static defaultProps = {\n size: 'm',\n };\n static enhance = [keyboardFocusEnhance(), neighborLocationEnhance()];\n\n getTextProps() {\n const { placeholder, empty } = this.asProps;\n return {\n placeholder,\n empty,\n };\n }\n\n render() {\n const SBaseTrigger = Root;\n const SInner = 'div';\n const { Children, styles, theme } = this.asProps;\n\n logger.warn(\n theme !== undefined,\n \"The 'theme' property is deprecated, use 'state'\",\n this.asProps['data-ui-name'] || BaseTrigger.displayName,\n );\n\n // TODO: add aria\n return sstyled(styles)(\n <SBaseTrigger render={Box} state={theme}>\n <SInner>{addonTextChildren(Children, BaseTrigger.Text, BaseTrigger.Addon)}</SInner>\n </SBaseTrigger>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n const { children, styles, empty, placeholder } = props;\n\n return sstyled(styles)(\n /* что бы не ломать обратную совместимость пришлось юзать use */\n <SText render={Box} use:placeholder={empty}>\n {empty ? placeholder : children}\n </SText>,\n );\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} />);\n}\n\nconst BaseTrigger = createComponent(RootBaseTrigger, {\n Text,\n Addon,\n});\n\nexport default BaseTrigger;\n"],"file":"BaseTrigger.js"}
|
package/lib/cjs/ButtonTrigger.js
CHANGED
|
@@ -46,12 +46,13 @@ var style = (
|
|
|
46
46
|
/*__reshadow_css_start__*/
|
|
47
47
|
_core.sstyled.insert(
|
|
48
48
|
/*__inner_css_start__*/
|
|
49
|
-
".
|
|
49
|
+
".___SButtonAddon_1m1cj_gg_{width:12px;height:12px}.___SButtonTriggerSpin_1m1cj_gg_{fill:#6c6e79}"
|
|
50
50
|
/*__inner_css_end__*/
|
|
51
|
-
, "
|
|
51
|
+
, "1x17vum_gg_")
|
|
52
52
|
/*__reshadow_css_end__*/
|
|
53
53
|
, {
|
|
54
|
-
"__SButtonAddon": "
|
|
54
|
+
"__SButtonAddon": "___SButtonAddon_1m1cj_gg_",
|
|
55
|
+
"__SButtonTriggerSpin": "___SButtonTriggerSpin_1m1cj_gg_"
|
|
55
56
|
});
|
|
56
57
|
|
|
57
58
|
var RootButtonTrigger = /*#__PURE__*/function (_Component) {
|
|
@@ -71,13 +72,14 @@ var RootButtonTrigger = /*#__PURE__*/function (_Component) {
|
|
|
71
72
|
_ref2;
|
|
72
73
|
|
|
73
74
|
var SButtonAddon = ButtonTrigger.Addon;
|
|
75
|
+
var SButtonTriggerSpin = _spin["default"];
|
|
74
76
|
var _this$asProps = this.asProps,
|
|
75
77
|
Children = _this$asProps.Children,
|
|
76
78
|
styles = _this$asProps.styles,
|
|
77
79
|
loading = _this$asProps.loading;
|
|
78
|
-
return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_BaseTrigger["default"], (0, _core.assignProps)({}, _ref), (0, _addonTextChildren["default"])(Children, ButtonTrigger.Text, ButtonTrigger.Addon), /*#__PURE__*/_react["default"].createElement(SButtonAddon, _ref2.cn("SButtonAddon", {}), loading ? /*#__PURE__*/_react["default"].createElement(
|
|
80
|
+
return _ref2 = (0, _core.sstyled)(styles), /*#__PURE__*/_react["default"].createElement(_BaseTrigger["default"], (0, _core.assignProps)({}, _ref), (0, _addonTextChildren["default"])(Children, ButtonTrigger.Text, ButtonTrigger.Addon), /*#__PURE__*/_react["default"].createElement(SButtonAddon, _ref2.cn("SButtonAddon", {}), loading ? /*#__PURE__*/_react["default"].createElement(SButtonTriggerSpin, _ref2.cn("SButtonTriggerSpin", {
|
|
79
81
|
"size": "xs",
|
|
80
|
-
"theme":
|
|
82
|
+
"theme": false
|
|
81
83
|
})) : /*#__PURE__*/_react["default"].createElement(_m["default"], _ref2.cn("ChevronDown", {}))));
|
|
82
84
|
}
|
|
83
85
|
}]);
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/ButtonTrigger.jsx"],"names":["RootButtonTrigger","SButtonAddon","ButtonTrigger","Addon","asProps","Children","styles","loading","BaseTrigger","Text","Component","style","parent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA
|
|
1
|
+
{"version":3,"sources":["../../src/ButtonTrigger.jsx"],"names":["RootButtonTrigger","SButtonAddon","ButtonTrigger","Addon","SButtonTriggerSpin","Spin","asProps","Children","styles","loading","BaseTrigger","Text","Component","style","parent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;IAIMA,iB;;;;;;;;;;;;WAIJ,kBAAS;AAAA;AAAA;;AACP,UAAMC,YAAY,GAAGC,aAAa,CAACC,KAAnC;AACA,UAAMC,kBAAkB,GAAGC,gBAA3B;AACA,0BAAsC,KAAKC,OAA3C;AAAA,UAAQC,QAAR,iBAAQA,QAAR;AAAA,UAAkBC,MAAlB,iBAAkBA,MAAlB;AAAA,UAA0BC,OAA1B,iBAA0BA,OAA1B;AAEA,qBAAO,mBAAQD,MAAR,CAAP,eACE,gCAAcE,uBAAd,oCACG,mCAAkBH,QAAlB,EAA4BL,aAAa,CAACS,IAA1C,EAAgDT,aAAa,CAACC,KAA9D,CADH,eAEE,gCAAC,YAAD,gCACGM,OAAO,gBAAG,gCAAC,kBAAD;AAAA,gBAAyB,IAAzB;AAAA,iBAAqC;AAArC,SAAH,gBAAoD,gCAAC,aAAD,8BAD9D,CAFF,CADF;AAQD;;;EAjB6BG,e;;iCAA1BZ,iB,iBACiB,e;iCADjBA,iB,WAEWa,K;AAkBjB,IAAMX,aAAa,GAAG,sBACpBF,iBADoB,EAEpB;AACEW,EAAAA,IAAI,EAAED,wBAAYC,IADpB;AAEER,EAAAA,KAAK,EAAEO,wBAAYP;AAFrB,CAFoB,EAMpB;AACEW,EAAAA,MAAM,EAAEJ;AADV,CANoB,CAAtB;eAWeR,a","sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport ChevronDown from '@semcore/icon/ChevronDown/m';\nimport BaseTrigger from './BaseTrigger';\nimport Spin from '@semcore/spin';\n\nimport style from './style/button-trigger.shadow.css';\n\nclass RootButtonTrigger extends Component {\n static displayName = 'ButtonTrigger';\n static style = style;\n\n render() {\n const SButtonAddon = ButtonTrigger.Addon;\n const SButtonTriggerSpin = Spin;\n const { Children, styles, loading } = this.asProps;\n\n return sstyled(styles)(\n <Root render={BaseTrigger}>\n {addonTextChildren(Children, ButtonTrigger.Text, ButtonTrigger.Addon)}\n <SButtonAddon>\n {loading ? <SButtonTriggerSpin size=\"xs\" theme={false} /> : <ChevronDown />}\n </SButtonAddon>\n </Root>,\n );\n }\n}\n\nconst ButtonTrigger = createComponent(\n RootButtonTrigger,\n {\n Text: BaseTrigger.Text,\n Addon: BaseTrigger.Addon,\n },\n {\n parent: BaseTrigger,\n },\n);\n\nexport default ButtonTrigger;\n"],"file":"ButtonTrigger.js"}
|
package/lib/cjs/FilterTrigger.js
CHANGED
|
@@ -60,27 +60,25 @@ var style = (
|
|
|
60
60
|
/*__reshadow_css_start__*/
|
|
61
61
|
_core.sstyled.insert(
|
|
62
62
|
/*__inner_css_start__*/
|
|
63
|
-
".
|
|
63
|
+
".___SButtonTrigger_1smud_gg_{border:1px solid #c4c7cf;background:#fff;color:#191b23}.___SButtonTrigger_1smud_gg_::-moz-focus-inner{border:none;padding:0}.___SButtonTrigger_1smud_gg_:active,.___SButtonTrigger_1smud_gg_:focus,.___SButtonTrigger_1smud_gg_:hover{outline:0;text-decoration:none}.___SButtonTrigger_1smud_gg_:active,.___SButtonTrigger_1smud_gg_:hover,.___SButtonTrigger_1smud_gg_.__active_1smud_gg_{background-color:rgba(138,142,155,.2)}.___SButtonTrigger_1smud_gg_._size_m_1smud_gg_{min-width:26px;height:28px;border-radius:6px;font-size:14px}.___SButtonTrigger_1smud_gg_._size_l_1smud_gg_{min-width:32px;height:40px;border-radius:6px;font-size:16px}.___SText_1smud_gg_.__placeholder_1smud_gg_{color:#a9abb6}.___SButtonTrigger_1smud_gg_._state_normal_1smud_gg_{border-color:#c4c7cf}.___SButtonTrigger_1smud_gg_._state_valid_1smud_gg_{border-color:#59ddaa}.___SButtonTrigger_1smud_gg_._state_invalid_1smud_gg_{border-color:#ffaeb5}.___SFilterTrigger_1smud_gg_.__selected_1smud_gg_{border-color:#008ff8;background-color:rgba(0,143,248,.2);color:#191b23}.___SFilterTrigger_1smud_gg_.__selected_1smud_gg_:hover,.___SFilterTrigger_1smud_gg_.__selected_1smud_gg_.__active_1smud_gg_{background:rgba(0,143,248,.3)}.___SWrapper_1smud_gg_{display:inline-flex}.___SWrapper_1smud_gg_:focus{outline:none}.___SWrapper_1smud_gg_.__keyboardFocused_1smud_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2)}.___SCounter_1smud_gg_{background-color:#008ff8}"
|
|
64
64
|
/*__inner_css_end__*/
|
|
65
|
-
, "
|
|
65
|
+
, "eo2z42_gg_")
|
|
66
66
|
/*__reshadow_css_end__*/
|
|
67
67
|
, {
|
|
68
|
-
"__SButtonTrigger": "
|
|
69
|
-
"_active": "
|
|
70
|
-
"
|
|
71
|
-
"
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"
|
|
75
|
-
"
|
|
76
|
-
"
|
|
77
|
-
"
|
|
78
|
-
"
|
|
79
|
-
"
|
|
80
|
-
"
|
|
81
|
-
"
|
|
82
|
-
"_keyboardFocused": "__keyboardFocused_1le1w_gg_",
|
|
83
|
-
"__SCounter": "___SCounter_1le1w_gg_"
|
|
68
|
+
"__SButtonTrigger": "___SButtonTrigger_1smud_gg_",
|
|
69
|
+
"_active": "__active_1smud_gg_",
|
|
70
|
+
"_size_m": "_size_m_1smud_gg_",
|
|
71
|
+
"_size_l": "_size_l_1smud_gg_",
|
|
72
|
+
"__SText": "___SText_1smud_gg_",
|
|
73
|
+
"_placeholder": "__placeholder_1smud_gg_",
|
|
74
|
+
"_state_normal": "_state_normal_1smud_gg_",
|
|
75
|
+
"_state_valid": "_state_valid_1smud_gg_",
|
|
76
|
+
"_state_invalid": "_state_invalid_1smud_gg_",
|
|
77
|
+
"__SFilterTrigger": "___SFilterTrigger_1smud_gg_",
|
|
78
|
+
"_selected": "__selected_1smud_gg_",
|
|
79
|
+
"__SWrapper": "___SWrapper_1smud_gg_",
|
|
80
|
+
"_keyboardFocused": "__keyboardFocused_1smud_gg_",
|
|
81
|
+
"__SCounter": "___SCounter_1smud_gg_"
|
|
84
82
|
});
|
|
85
83
|
|
|
86
84
|
var RootFilterTrigger = /*#__PURE__*/function (_Component) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/FilterTrigger.jsx"],"names":["RootFilterTrigger","e","stopPropagation","SWrapper","Box","SFilterTrigger","BaseTrigger","asProps","Children","styles","empty","onClear","size","placeholder","active","disabled","FilterTrigger","Text","Addon","Counter","ChevronDown","handleStopPropagation","Close","Component","style","props","SCounter","Dot","parent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA
|
|
1
|
+
{"version":3,"sources":["../../src/FilterTrigger.jsx"],"names":["RootFilterTrigger","e","stopPropagation","SWrapper","Box","SFilterTrigger","BaseTrigger","asProps","Children","styles","empty","onClear","size","placeholder","active","disabled","FilterTrigger","Text","Addon","Counter","ChevronDown","handleStopPropagation","Close","Component","style","props","SCounter","Dot","parent"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMA,iB;;;;;;;;;;;;;;;8GAIoB,UAACC,CAAD;AAAA,aAAOA,CAAC,CAACC,eAAF,EAAP;AAAA,K;;;;;;WAExB,kBAAS;AAAA;AAAA;;AACP,UAAMC,QAAQ,GAKMC,YALpB;AACA,UAAMC,cAAc,GAAGC,uBAAvB;AACA,0BAAkF,KAAKC,OAAvF;AAAA,UAAQC,QAAR,iBAAQA,QAAR;AAAA,UAAkBC,MAAlB,iBAAkBA,MAAlB;AAAA,UAA0BC,KAA1B,iBAA0BA,KAA1B;AAAA,UAAiCC,OAAjC,iBAAiCA,OAAjC;AAAA,UAA0CC,IAA1C,iBAA0CA,IAA1C;AAAA,UAAgDC,WAAhD,iBAAgDA,WAAhD;AAAA,UAA6DC,MAA7D,iBAA6DA,MAA7D;AAAA,UAAqEC,QAArE,iBAAqEA,QAArE;AAEA,qBAAO,mBAAQN,MAAR,CAAP,eACE,gCAAC,QAAD,0FACE,gCAAC,4BAAD,iDACE,gCAAC,cAAD;AAAA,aACI,MADJ;AAAA,gBAEQG,IAFR;AAAA,uBAGeC,WAHf;AAAA,iBAISH,KAJT;AAAA,oBAKY,CAACA,KALb;AAAA,kBAMUI,MANV;AAAA,oBAOYC;AAPZ,UASG,mCAAkBP,QAAlB,EAA4BQ,aAAa,CAACC,IAA1C,EAAgD,CAC/CD,aAAa,CAACE,KADiC,EAE/CF,aAAa,CAACG,OAFiC,CAAhD,CATH,EAaGT,KAAK,iBAAI,gCAAC,aAAD,CAAe,KAAf;AAAqB,QAAA,GAAG,EAAEU;AAA1B,QAbZ,CADF,EAgBG,CAACV,KAAD,iBACC,gCAAC,cAAD;AAAA,eACM,QADN;AAAA,gBAEQE,IAFR;AAAA,iBAGSF,KAHT;AAAA;AAAA,mBAKW,wCAAqBC,OAArB,EAA8B,KAAKU,qBAAnC,CALX;AAAA,qBAMa,KAAKA,qBANlB;AAAA,oBAOYN;AAPZ,uBASE,gCAAC,aAAD,CAAe,KAAf;AAAqB,QAAA,GAAG,EAAEO;AAA1B,QATF,CAjBJ,CADF,CADF;AAkCD;;;EA7C6BC,e;;iCAA1BvB,iB,iBACiB,e;iCADjBA,iB,WAEWwB,K;;AA8CjB,SAASL,OAAT,CAAiBM,KAAjB,EAAwB;AAAA;AAAA;;AACtB,MAAMC,QAAQ,GACiCpB,wBAAYY,KAD3D;AACA,iBAAO,mBAAQO,KAAK,CAAChB,MAAd,CAAP,eAA6B,gCAAC,QAAD;AAAA,WAA0CkB;AAA1C,cAA7B;AACD;;AAED,IAAMX,aAAa,GAAG,sBACpBhB,iBADoB,EAEpB;AACEiB,EAAAA,IAAI,EAAEX,wBAAYW,IADpB;AAEEC,EAAAA,KAAK,EAAEZ,wBAAYY,KAFrB;AAGEC,EAAAA,OAAO,EAAPA;AAHF,CAFoB,EAOpB;AACES,EAAAA,MAAM,EAAEtB;AADV,CAPoB,CAAtB;eAYeU,a","sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport BaseTrigger from './BaseTrigger';\nimport { Box } from '@semcore/flex-box';\nimport NeighborLocation from '@semcore/neighbor-location';\nimport Dot from '@semcore/dot';\nimport Close from '@semcore/icon/Close/m';\nimport ChevronDown from '@semcore/icon/ChevronDown/m';\nimport { callAllEventHandlers } from '@semcore/utils/lib/assignProps';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\n\nimport style from './style/filter-trigger.shadow.css';\n\nclass RootFilterTrigger extends Component {\n static displayName = 'FilterTrigger';\n static style = style;\n\n handleStopPropagation = (e) => e.stopPropagation();\n\n render() {\n const SWrapper = Root;\n const SFilterTrigger = BaseTrigger;\n const { Children, styles, empty, onClear, size, placeholder, active, disabled } = this.asProps;\n\n return sstyled(styles)(\n <SWrapper render={Box}>\n <NeighborLocation>\n <SFilterTrigger\n w=\"100%\"\n size={size}\n placeholder={placeholder}\n empty={empty}\n selected={!empty}\n active={active}\n disabled={disabled}\n >\n {addonTextChildren(Children, FilterTrigger.Text, [\n FilterTrigger.Addon,\n FilterTrigger.Counter,\n ])}\n {empty && <FilterTrigger.Addon tag={ChevronDown} />}\n </SFilterTrigger>\n {!empty && (\n <SFilterTrigger\n tag=\"button\"\n size={size}\n empty={empty}\n selected\n onClick={callAllEventHandlers(onClear, this.handleStopPropagation)}\n onKeyDown={this.handleStopPropagation}\n disabled={disabled}\n >\n <FilterTrigger.Addon tag={Close} />\n </SFilterTrigger>\n )}\n </NeighborLocation>\n </SWrapper>,\n );\n }\n}\n\nfunction Counter(props) {\n const SCounter = Root;\n return sstyled(props.styles)(<SCounter render={BaseTrigger.Addon} tag={Dot} />);\n}\n\nconst FilterTrigger = createComponent(\n RootFilterTrigger,\n {\n Text: BaseTrigger.Text,\n Addon: BaseTrigger.Addon,\n Counter,\n },\n {\n parent: BaseTrigger,\n },\n);\n\nexport default FilterTrigger;\n"],"file":"FilterTrigger.js"}
|
package/lib/cjs/LinkTrigger.js
CHANGED
|
@@ -54,25 +54,23 @@ var style = (
|
|
|
54
54
|
/*__reshadow_css_start__*/
|
|
55
55
|
_core.sstyled.insert(
|
|
56
56
|
/*__inner_css_start__*/
|
|
57
|
-
".
|
|
57
|
+
".___SLinkTrigger_1lk11_gg_{display:inline-flex;align-items:center;line-height:normal;position:relative;touch-action:manipulation;white-space:nowrap;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;box-sizing:border-box;padding:0;margin:0;outline:none;text-decoration:none;-webkit-tap-highlight-color:transparent;overflow:visible;outline:0;vertical-align:middle;font-family:Inter,sans-serif;cursor:pointer;color:#006dca;background:none;transition:color .15s ease-in-out}.___SLinkTrigger_1lk11_gg_:active,.___SLinkTrigger_1lk11_gg_:hover,.___SLinkTrigger_1lk11_gg_.__active_1lk11_gg_{color:#044792}.___SLinkTrigger_1lk11_gg_:active .___SText_1lk11_gg_,.___SLinkTrigger_1lk11_gg_:hover .___SText_1lk11_gg_,.___SLinkTrigger_1lk11_gg_.__active_1lk11_gg_ .___SText_1lk11_gg_{border-color:currentColor}.___SLinkTrigger_1lk11_gg_ .___SText_1lk11_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out;line-height:1.42}.___SLinkTrigger_1lk11_gg_.__color_1lk11_gg_{color:var(--color_klk89u)}.___SLinkTrigger_1lk11_gg_.__color_1lk11_gg_:hover{color:var(--color-hover_klk89u)}.___SLinkTrigger_1lk11_gg_.__disabled_1lk11_gg_{opacity:0.3;cursor:default;pointer-events:none}.___SLinkTrigger_1lk11_gg_.__keyboardFocused_1lk11_gg_{box-shadow:0 0 0 3px rgba(0, 143, 248, 0.2);z-index:1}.___SAddon_1lk11_gg_,.___SLinkAddon_1lk11_gg_{display:inline-flex;align-items:center;justify-content:center;flex-shrink:0}.___SAddon_1lk11_gg_:not(:only-child):first-child,.___SLinkAddon_1lk11_gg_:not(:only-child):first-child{margin-right:4px}.___SAddon_1lk11_gg_:not(:only-child):last-child,.___SLinkAddon_1lk11_gg_:not(:only-child):last-child{margin-left:4px}.___SLinkAddon_1lk11_gg_{width:16px;height:16px}.___SLinkTrigger_1lk11_gg_._size_m_1lk11_gg_{font-size:14px}.___SLinkTrigger_1lk11_gg_._size_l_1lk11_gg_{font-size:16px}@media (prefers-reduced-motion){.___SLinkTrigger_1lk11_gg_{transition:none}.___SLinkTrigger_1lk11_gg_ .___SText_1lk11_gg_{transition:none}}"
|
|
58
58
|
/*__inner_css_end__*/
|
|
59
|
-
, "
|
|
59
|
+
, "klk89u_gg_")
|
|
60
60
|
/*__reshadow_css_end__*/
|
|
61
61
|
, {
|
|
62
|
-
"__SLinkTrigger": "
|
|
63
|
-
"_active": "
|
|
64
|
-
"__SText": "
|
|
65
|
-
"_color": "
|
|
66
|
-
"--color": "--
|
|
67
|
-
"--color-hover": "--color-
|
|
68
|
-
"_disabled": "
|
|
69
|
-
"_keyboardFocused": "
|
|
70
|
-
"__SAddon": "
|
|
71
|
-
"__SLinkAddon": "
|
|
72
|
-
"
|
|
73
|
-
"
|
|
74
|
-
"_size_l": "_size_l_qt3iv_gg_",
|
|
75
|
-
"_size_xl": "_size_xl_qt3iv_gg_"
|
|
62
|
+
"__SLinkTrigger": "___SLinkTrigger_1lk11_gg_",
|
|
63
|
+
"_active": "__active_1lk11_gg_",
|
|
64
|
+
"__SText": "___SText_1lk11_gg_",
|
|
65
|
+
"_color": "__color_1lk11_gg_",
|
|
66
|
+
"--color": "--color_klk89u",
|
|
67
|
+
"--color-hover": "--color-hover_klk89u",
|
|
68
|
+
"_disabled": "__disabled_1lk11_gg_",
|
|
69
|
+
"_keyboardFocused": "__keyboardFocused_1lk11_gg_",
|
|
70
|
+
"__SAddon": "___SAddon_1lk11_gg_",
|
|
71
|
+
"__SLinkAddon": "___SLinkAddon_1lk11_gg_",
|
|
72
|
+
"_size_m": "_size_m_1lk11_gg_",
|
|
73
|
+
"_size_l": "_size_l_1lk11_gg_"
|
|
76
74
|
});
|
|
77
75
|
|
|
78
76
|
var RootLinkTrigger = /*#__PURE__*/function (_Component) {
|
|
@@ -1 +1 @@
|
|
|
1
|
-
{"version":3,"sources":["../../src/LinkTrigger.jsx"],"names":["RootLinkTrigger","asProps","placeholder","empty","SLinkTrigger","Box","SLinkAddon","LinkTrigger","Addon","Children","loading","styles","providedColor","color","colorHover","Text","Component","style","size","props","SText","children","SAddon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA
|
|
1
|
+
{"version":3,"sources":["../../src/LinkTrigger.jsx"],"names":["RootLinkTrigger","asProps","placeholder","empty","SLinkTrigger","Box","SLinkAddon","LinkTrigger","Addon","Children","loading","styles","providedColor","color","colorHover","Text","Component","style","size","props","SText","children","SAddon"],"mappings":";;;;;;;;;;;;;;;;;;;;;;;AACA;;AADA;;AAEA;;AACA;;AACA;;AACA;;AACA;;AACA;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;;IAIMA,e;;;;;;;;;;;;WAQJ,wBAAe;AACb,0BAA+B,KAAKC,OAApC;AAAA,UAAQC,WAAR,iBAAQA,WAAR;AAAA,UAAqBC,KAArB,iBAAqBA,KAArB;AACA,aAAO;AACLD,QAAAA,WAAW,EAAXA,WADK;AAELC,QAAAA,KAAK,EAALA;AAFK,OAAP;AAID;;;WAED,kBAAS;AAAA;AAAA;;AACP,UAAMC,YAAY,GAQMC,YARxB;AACA,UAAMC,UAAU,GAAGC,WAAW,CAACC,KAA/B;AACA,2BAA4D,KAAKP,OAAjE;AAAA,UAAQQ,QAAR,kBAAQA,QAAR;AAAA,UAAkBC,OAAlB,kBAAkBA,OAAlB;AAAA,UAA2BC,MAA3B,kBAA2BA,MAA3B;AAAA,UAA0CC,aAA1C,kBAAmCC,KAAnC;AAEA,UAAMA,KAAK,GAAG,uBAAaD,aAAb,CAAd;AACA,UAAME,UAAU,GAAG,kBAAMD,KAAN,EAAa,CAAC,IAAd,CAAnB;AAEA,qBAAO,mBAAQF,MAAR,CAAP,eACE,gCAAC,YAAD;AAAA,qBAAsCE,KAAtC;AAAA,2BAA8DC;AAA9D,kBACG,mCAAkBL,QAAlB,EAA4BF,WAAW,CAACQ,IAAxC,EAA8CR,WAAW,CAACC,KAA1D,CADH,eAEE,gCAAC,UAAD,8BACGE,OAAO,gBAAG,gCAAC,gBAAD;AAAA,gBAAW,IAAX;AAAA,iBAAsB;AAAtB,SAAH,gBAA6C,gCAAC,aAAD,8BADvD,CAFF,CADF;AAQD;;;EAhC2BM,e;;iCAAxBhB,e,iBACiB,a;iCADjBA,e,WAEWiB,K;iCAFXjB,e,kBAGkB;AACpBkB,EAAAA,IAAI,EAAE;AADc,C;iCAHlBlB,e,aAMa,CAAC,uCAAD,C;;AA6BnB,SAASe,IAAT,CAAcI,KAAd,EAAqB;AAAA;AAAA;;AACnB,MAAMC,KAAK,GAKMf,YALjB;AACA,MAAQgB,QAAR,GAAiDF,KAAjD,CAAQE,QAAR;AAAA,MAAkBV,MAAlB,GAAiDQ,KAAjD,CAAkBR,MAAlB;AAAA,MAA0BR,KAA1B,GAAiDgB,KAAjD,CAA0BhB,KAA1B;AAAA,MAAiCD,WAAjC,GAAiDiB,KAAjD,CAAiCjB,WAAjC;AAEA,iBAAO,mBAAQS,MAAR,CAAP;AAAA;;AACE;AACA,kCAAC,KAAD;AAAA,uBAAqCR;AAArC,eACGA,KAAK,GAAGD,WAAH,GAAiBmB,QADzB,CAFF;AAMD;;AAED,SAASb,KAAT,CAAeW,KAAf,EAAsB;AAAA;AAAA;;AACpB,MAAMG,MAAM,GACiCjB,YAD7C;AACA,iBAAO,mBAAQc,KAAK,CAACR,MAAd,CAAP,eAA6B,gCAAC,MAAD,2EAA7B;AACD;;AAED,IAAMJ,WAAW,GAAG,sBAAgBP,eAAhB,EAAiC;AACnDe,EAAAA,IAAI,EAAJA,IADmD;AAEnDP,EAAAA,KAAK,EAALA;AAFmD,CAAjC,CAApB;eAKeD,W","sourcesContent":["import React from 'react';\nimport createComponent, { Component, Root, sstyled } from '@semcore/core';\nimport addonTextChildren from '@semcore/utils/lib/addonTextChildren';\nimport ChevronDown from '@semcore/icon/ChevronDown/m';\nimport Spin from '@semcore/spin';\nimport { Box } from '@semcore/flex-box';\nimport resolveColor, { shade } from '@semcore/utils/lib/color';\nimport keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';\n\nimport style from './style/link-trigger.shadow.css';\n\nclass RootLinkTrigger extends Component {\n static displayName = 'LinkTrigger';\n static style = style;\n static defaultProps = {\n size: 'm',\n };\n static enhance = [keyboardFocusEnhance()];\n\n getTextProps() {\n const { placeholder, empty } = this.asProps;\n return {\n placeholder,\n empty,\n };\n }\n\n render() {\n const SLinkTrigger = Root;\n const SLinkAddon = LinkTrigger.Addon;\n const { Children, loading, styles, color: providedColor } = this.asProps;\n\n const color = resolveColor(providedColor);\n const colorHover = shade(color, -0.12);\n\n return sstyled(styles)(\n <SLinkTrigger render={Box} use:color={color} use:color-hover={colorHover}>\n {addonTextChildren(Children, LinkTrigger.Text, LinkTrigger.Addon)}\n <SLinkAddon>\n {loading ? <Spin size=\"xs\" theme=\"currentColor\" /> : <ChevronDown />}\n </SLinkAddon>\n </SLinkTrigger>,\n );\n }\n}\n\nfunction Text(props) {\n const SText = Root;\n const { children, styles, empty, placeholder } = props;\n\n return sstyled(styles)(\n /* что бы не ломать обратную совместимость пришлось юзать use */\n <SText render={Box} use:placeholder={empty}>\n {empty ? placeholder : children}\n </SText>,\n );\n}\n\nfunction Addon(props) {\n const SAddon = Root;\n return sstyled(props.styles)(<SAddon render={Box} />);\n}\n\nconst LinkTrigger = createComponent(RootLinkTrigger, {\n Text,\n Addon,\n});\n\nexport default LinkTrigger;\n"],"file":"LinkTrigger.js"}
|
package/lib/cjs/index.d.ts
CHANGED
|
@@ -20,12 +20,14 @@ SBaseTrigger {
|
|
|
20
20
|
outline: 0;
|
|
21
21
|
text-align: center;
|
|
22
22
|
vertical-align: middle;
|
|
23
|
-
font-family:
|
|
23
|
+
font-family: Inter, sans-serif;
|
|
24
24
|
cursor: pointer;
|
|
25
25
|
|
|
26
|
-
border: 1px solid var(--stone);
|
|
27
26
|
background: #ffffff;
|
|
28
|
-
|
|
27
|
+
|
|
28
|
+
font-weight: 400;
|
|
29
|
+
border: 1px solid var(--gray-200);
|
|
30
|
+
color: var(--gray-800);
|
|
29
31
|
|
|
30
32
|
&::-moz-focus-inner {
|
|
31
33
|
border: none;
|
|
@@ -40,14 +42,17 @@ SBaseTrigger {
|
|
|
40
42
|
}
|
|
41
43
|
|
|
42
44
|
&[keyboardFocused] {
|
|
43
|
-
border: 1px solid var(--
|
|
44
|
-
box-shadow: var(--
|
|
45
|
+
border: 1px solid var(--blue-400);
|
|
46
|
+
box-shadow: var(--keyboard-focus);
|
|
47
|
+
}
|
|
48
|
+
|
|
49
|
+
&:hover {
|
|
50
|
+
background-color: color-mod(var(--gray-400) a(20%));
|
|
45
51
|
}
|
|
46
52
|
|
|
47
53
|
&:active,
|
|
48
|
-
&:hover,
|
|
49
54
|
&[active] {
|
|
50
|
-
background-color: color-mod(var(--
|
|
55
|
+
background-color: color-mod(var(--gray-400) a(30%));
|
|
51
56
|
}
|
|
52
57
|
}
|
|
53
58
|
|
|
@@ -75,7 +80,7 @@ SText {
|
|
|
75
80
|
overflow: hidden;
|
|
76
81
|
white-space: nowrap;
|
|
77
82
|
text-overflow: ellipsis;
|
|
78
|
-
line-height:
|
|
83
|
+
line-height: var(--lh-200);
|
|
79
84
|
flex-grow: 1;
|
|
80
85
|
text-align: left;
|
|
81
86
|
}
|
|
@@ -92,51 +97,20 @@ SBaseAddon {
|
|
|
92
97
|
height: 12px;
|
|
93
98
|
}
|
|
94
99
|
|
|
95
|
-
SBaseTrigger[size='s'] {
|
|
96
|
-
height: 18px;
|
|
97
|
-
min-width: 18px;
|
|
98
|
-
border-radius: 2px;
|
|
99
|
-
font-size: 10px;
|
|
100
|
-
|
|
101
|
-
& SText {
|
|
102
|
-
margin-left: 4px;
|
|
103
|
-
margin-right: 4px;
|
|
104
|
-
}
|
|
105
|
-
|
|
106
|
-
& SAddon {
|
|
107
|
-
&:not(:only-child):first-child {
|
|
108
|
-
margin-left: 4px;
|
|
109
|
-
}
|
|
110
|
-
|
|
111
|
-
&:not(:only-child):last-child {
|
|
112
|
-
margin-right: 4px;
|
|
113
|
-
}
|
|
114
|
-
|
|
115
|
-
&:only-child {
|
|
116
|
-
margin-left: -2px;
|
|
117
|
-
margin-right: -2px;
|
|
118
|
-
}
|
|
119
|
-
}
|
|
120
|
-
}
|
|
121
|
-
|
|
122
100
|
SBaseTrigger[size='m'] {
|
|
123
|
-
height: 26px;
|
|
124
101
|
min-width: 26px;
|
|
125
|
-
|
|
126
|
-
|
|
127
|
-
|
|
128
|
-
|
|
129
|
-
margin-left: 8px;
|
|
130
|
-
margin-right: 8px;
|
|
131
|
-
}
|
|
102
|
+
height: 28px;
|
|
103
|
+
border-radius: var(--rounded-m);
|
|
104
|
+
padding: 0 8px;
|
|
105
|
+
font-size: var(--fs-200);
|
|
132
106
|
|
|
133
107
|
& SAddon {
|
|
134
108
|
&:not(:only-child):first-child {
|
|
135
|
-
margin-
|
|
109
|
+
margin-right: 8px;
|
|
136
110
|
}
|
|
137
111
|
|
|
138
112
|
&:not(:only-child):last-child {
|
|
139
|
-
margin-
|
|
113
|
+
margin-left: 8px;
|
|
140
114
|
}
|
|
141
115
|
|
|
142
116
|
&:only-child {
|
|
@@ -147,23 +121,19 @@ SBaseTrigger[size='m'] {
|
|
|
147
121
|
}
|
|
148
122
|
|
|
149
123
|
SBaseTrigger[size='l'] {
|
|
150
|
-
height: 32px;
|
|
151
124
|
min-width: 32px;
|
|
152
|
-
|
|
153
|
-
|
|
154
|
-
|
|
155
|
-
|
|
156
|
-
margin-left: 8px;
|
|
157
|
-
margin-right: 8px;
|
|
158
|
-
}
|
|
125
|
+
height: 40px;
|
|
126
|
+
border-radius: var(--rounded-m);
|
|
127
|
+
padding: 0 12px;
|
|
128
|
+
font-size: var(--fs-300);
|
|
159
129
|
|
|
160
130
|
& SAddon {
|
|
161
131
|
&:not(:only-child):first-child {
|
|
162
|
-
margin-
|
|
132
|
+
margin-right: 8px;
|
|
163
133
|
}
|
|
164
134
|
|
|
165
135
|
&:not(:only-child):last-child {
|
|
166
|
-
margin-
|
|
136
|
+
margin-left: 8px;
|
|
167
137
|
}
|
|
168
138
|
|
|
169
139
|
&:only-child {
|
|
@@ -173,33 +143,6 @@ SBaseTrigger[size='l'] {
|
|
|
173
143
|
}
|
|
174
144
|
}
|
|
175
145
|
|
|
176
|
-
SBaseTrigger[size='xl'] {
|
|
177
|
-
height: 42px;
|
|
178
|
-
min-width: 42px;
|
|
179
|
-
border-radius: 5px;
|
|
180
|
-
font-size: 16px;
|
|
181
|
-
|
|
182
|
-
& SText {
|
|
183
|
-
margin-left: 12px;
|
|
184
|
-
margin-right: 12px;
|
|
185
|
-
}
|
|
186
|
-
|
|
187
|
-
& SAddon {
|
|
188
|
-
&:not(:only-child):first-child {
|
|
189
|
-
margin-left: 12px;
|
|
190
|
-
}
|
|
191
|
-
|
|
192
|
-
&:not(:only-child):last-child {
|
|
193
|
-
margin-right: 12px;
|
|
194
|
-
}
|
|
195
|
-
|
|
196
|
-
&:only-child {
|
|
197
|
-
margin-left: -6px;
|
|
198
|
-
margin-right: -6px;
|
|
199
|
-
}
|
|
200
|
-
}
|
|
201
|
-
}
|
|
202
|
-
|
|
203
146
|
SBaseTrigger[neighborLocation='right'] {
|
|
204
147
|
border-top-right-radius: 0;
|
|
205
148
|
border-bottom-right-radius: 0;
|
|
@@ -217,22 +160,22 @@ SBaseTrigger[neighborLocation='left'] {
|
|
|
217
160
|
}
|
|
218
161
|
|
|
219
162
|
SText[placeholder] {
|
|
220
|
-
color: var(--
|
|
163
|
+
color: var(--gray-300);
|
|
221
164
|
}
|
|
222
165
|
|
|
223
166
|
SBaseTrigger[state='normal'] {
|
|
224
|
-
border-color: var(--
|
|
167
|
+
border-color: var(--gray-200);
|
|
225
168
|
}
|
|
226
169
|
|
|
227
170
|
SBaseTrigger[state='valid'] {
|
|
228
|
-
border-color: var(--green);
|
|
171
|
+
border-color: var(--green-200);
|
|
229
172
|
}
|
|
230
173
|
|
|
231
174
|
SBaseTrigger[state='invalid'] {
|
|
232
|
-
border-color: var(--
|
|
175
|
+
border-color: var(--red-200);
|
|
233
176
|
|
|
234
177
|
&[keyboardFocused] {
|
|
235
|
-
border-color: var(--orange);
|
|
236
|
-
box-shadow: 0 0 0 3px color-mod(var(--orange) a(30%));
|
|
178
|
+
border-color: var(--orange-400);
|
|
179
|
+
box-shadow: 0 0 0 3px color-mod(var(--orange-400) a(30%));
|
|
237
180
|
}
|
|
238
181
|
}
|
|
@@ -1,9 +1,9 @@
|
|
|
1
1
|
@import '@semcore/utils/style/var.css';
|
|
2
2
|
|
|
3
3
|
SButtonTrigger {
|
|
4
|
-
border: 1px solid var(--
|
|
4
|
+
border: 1px solid var(--gray-200);
|
|
5
5
|
background: #ffffff;
|
|
6
|
-
color: var(--
|
|
6
|
+
color: var(--gray-800);
|
|
7
7
|
|
|
8
8
|
&::-moz-focus-inner {
|
|
9
9
|
border: none;
|
|
@@ -20,61 +20,48 @@ SButtonTrigger {
|
|
|
20
20
|
&:active,
|
|
21
21
|
&:hover,
|
|
22
22
|
&[active] {
|
|
23
|
-
background-color: color-mod(var(--
|
|
23
|
+
background-color: color-mod(var(--gray-400) a(20%));
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
26
|
|
|
27
|
-
SButtonTrigger[size='s'] {
|
|
28
|
-
height: 18px;
|
|
29
|
-
min-width: 18px;
|
|
30
|
-
border-radius: 2px;
|
|
31
|
-
font-size: 10px;
|
|
32
|
-
}
|
|
33
|
-
|
|
34
27
|
SButtonTrigger[size='m'] {
|
|
35
|
-
height: 26px;
|
|
36
28
|
min-width: 26px;
|
|
37
|
-
|
|
38
|
-
|
|
29
|
+
height: 28px;
|
|
30
|
+
border-radius: var(--rounded-m);
|
|
31
|
+
font-size: var(--fs-200);
|
|
39
32
|
}
|
|
40
33
|
|
|
41
34
|
SButtonTrigger[size='l'] {
|
|
42
|
-
height: 32px;
|
|
43
35
|
min-width: 32px;
|
|
44
|
-
|
|
45
|
-
|
|
46
|
-
|
|
47
|
-
|
|
48
|
-
SButtonTrigger[size='xl'] {
|
|
49
|
-
height: 42px;
|
|
50
|
-
min-width: 42px;
|
|
51
|
-
border-radius: 5px;
|
|
52
|
-
font-size: 16px;
|
|
36
|
+
height: 40px;
|
|
37
|
+
border-radius: var(--rounded-m);
|
|
38
|
+
font-size: var(--fs-300);
|
|
53
39
|
}
|
|
54
40
|
|
|
55
41
|
SText[placeholder] {
|
|
56
|
-
color: var(--
|
|
42
|
+
color: var(--gray-300);
|
|
57
43
|
}
|
|
58
44
|
|
|
59
45
|
SButtonTrigger[state='normal'] {
|
|
60
|
-
border-color: var(--
|
|
46
|
+
border-color: var(--gray-200);
|
|
61
47
|
}
|
|
62
48
|
|
|
63
49
|
SButtonTrigger[state='valid'] {
|
|
64
|
-
border-color: var(--green);
|
|
50
|
+
border-color: var(--green-200);
|
|
65
51
|
}
|
|
66
52
|
|
|
67
53
|
SButtonTrigger[state='invalid'] {
|
|
68
|
-
border-color: var(--
|
|
54
|
+
border-color: var(--red-200);
|
|
69
55
|
}
|
|
70
56
|
|
|
71
57
|
SFilterTrigger[selected] {
|
|
72
|
-
border-color: var(--
|
|
73
|
-
background-color: color-mod(var(--
|
|
58
|
+
border-color: var(--blue-400);
|
|
59
|
+
background-color: color-mod(var(--blue-400) a(20%));
|
|
60
|
+
color: var(--gray-800);
|
|
74
61
|
|
|
75
62
|
&[active],
|
|
76
63
|
&:hover {
|
|
77
|
-
background: color-mod(var(--
|
|
64
|
+
background: color-mod(var(--blue-400) a(30%));
|
|
78
65
|
}
|
|
79
66
|
}
|
|
80
67
|
|
|
@@ -87,9 +74,9 @@ SWrapper {
|
|
|
87
74
|
}
|
|
88
75
|
|
|
89
76
|
SWrapper[keyboardFocused] {
|
|
90
|
-
box-shadow: var(--
|
|
77
|
+
box-shadow: var(--keyboard-focus);
|
|
91
78
|
}
|
|
92
79
|
|
|
93
80
|
SCounter {
|
|
94
|
-
background-color: var(--
|
|
81
|
+
background-color: var(--blue-400);
|
|
95
82
|
}
|