@semcore/button 5.39.2 → 5.39.3
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 +6 -0
- package/lib/cjs/component/Button/Button.js +27 -27
- package/lib/cjs/component/ButtonLink/ButtonLink.js +20 -20
- package/lib/es6/component/Button/Button.js +27 -27
- package/lib/es6/component/ButtonLink/ButtonLink.js +20 -20
- package/package.json +2 -2
- package/__stories/Button.mdx +0 -223
- package/__stories/Button.stories.tsx +0 -129
package/CHANGELOG.md
CHANGED
|
@@ -2,6 +2,12 @@
|
|
|
2
2
|
|
|
3
3
|
CHANGELOG.md standards are inspired by [keepachangelog.com](https://keepachangelog.com/en/1.0.0/).
|
|
4
4
|
|
|
5
|
+
## [5.39.3] - 2024-11-18
|
|
6
|
+
|
|
7
|
+
### Changed
|
|
8
|
+
|
|
9
|
+
- Version patch update due to children dependencies update (`@semcore/tooltip` [6.46.1 ~> 6.46.2]).
|
|
10
|
+
|
|
5
11
|
## [5.39.2] - 2024-11-08
|
|
6
12
|
|
|
7
13
|
### Changed
|
|
@@ -19,33 +19,33 @@ var _flexBox = require("@semcore/flex-box");
|
|
|
19
19
|
var _keyboardFocusEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/keyboardFocusEnhance"));
|
|
20
20
|
var _AbstractButton2 = require("../AbstractButton/AbstractButton");
|
|
21
21
|
/*__reshadow-styles__:"./button.shadow.css"*/
|
|
22
|
-
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SButton_eujln_gg_{position:relative;display:inline-block;align-items:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;line-height:normal;-webkit-text-decoration:none;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-weight:var(--intergalactic-medium, 500);color:var(--intergalactic-text-secondary, #6c6e79);min-width:-moz-fit-content;min-width:fit-content}.___SButton_eujln_gg_::-moz-focus-inner{padding:0;border:0}.___SButton_eujln_gg_:active,.___SButton_eujln_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_eujln_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SButton_eujln_gg_.__keyboardFocused_eujln_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SButton_eujln_gg_.__disabled_eujln_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;box-shadow:none;z-index:0}.___SButton_eujln_gg_._size_s_eujln_gg_{width:var(--intergalactic-form-control-s, 20px);height:var(--intergalactic-form-control-s, 20px);border-radius:var(--intergalactic-addon-rounded, 4px)}.___SButton_eujln_gg_._size_m_eujln_gg_{height:var(--intergalactic-form-control-m, 28px);border-radius:var(--intergalactic-control-rounded, 6px);font-size:var(--intergalactic-fs-200, 14px)}.___SButton_eujln_gg_._size_l_eujln_gg_{height:var(--intergalactic-form-control-l, 40px);border-radius:var(--intergalactic-control-rounded, 6px);font-size:var(--intergalactic-fs-300, 16px)}.___SButton_eujln_gg_._theme_primary-info_eujln_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-info, #008ff8)}@media (hover:hover){.___SButton_eujln_gg_._theme_primary-info_eujln_gg_:hover{background-color:var(--intergalactic-control-primary-info-hover, #006dca)}}.___SButton_eujln_gg_._theme_primary-info_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_primary-info_eujln_gg_:active{background-color:var(--intergalactic-control-primary-info-active, #044792)}.___SButton_eujln_gg_._theme_primary-success_eujln_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-success, #009f81)}@media (hover:hover){.___SButton_eujln_gg_._theme_primary-success_eujln_gg_:hover{background-color:var(--intergalactic-control-primary-success-hover, #007c65)}}.___SButton_eujln_gg_._theme_primary-success_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_primary-success_eujln_gg_:active{background-color:var(--intergalactic-control-primary-success-active, #055345)}.___SButton_eujln_gg_._theme_primary-warning_eujln_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-brand, #ff642d)}@media (hover:hover){.___SButton_eujln_gg_._theme_primary-warning_eujln_gg_:hover{background-color:var(--intergalactic-control-primary-brand-hover, #c33909)}}.___SButton_eujln_gg_._theme_primary-warning_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_primary-warning_eujln_gg_:active{background-color:var(--intergalactic-control-primary-brand-active, #c33909)}.___SButton_eujln_gg_._theme_primary-danger_eujln_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-critical, #ff4953)}@media (hover:hover){.___SButton_eujln_gg_._theme_primary-danger_eujln_gg_:hover{background-color:var(--intergalactic-control-primary-critical-hover, #d1002f)}}.___SButton_eujln_gg_._theme_primary-danger_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_primary-danger_eujln_gg_:active{background-color:var(--intergalactic-control-primary-critical-active, #8e0016)}.___SButton_eujln_gg_._theme_primary-invert_eujln_gg_{color:var(--intergalactic-text-primary, #191b23);background-color:var(--intergalactic-control-primary-invert, #ffffff)}@media (hover:hover){.___SButton_eujln_gg_._theme_primary-invert_eujln_gg_:hover{background-color:var(--intergalactic-control-primary-invert-hover, #f4f5f9)}}.___SButton_eujln_gg_._theme_primary-invert_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_primary-invert_eujln_gg_:active{background-color:var(--intergalactic-control-primary-invert-active, #e0e1e9)}.___SButton_eujln_gg_._theme_secondary-muted_eujln_gg_{color:var(--intergalactic-text-secondary, #6c6e79);border-color:var(--intergalactic-border-primary, #c4c7cf);background-color:var(--intergalactic-control-secondary-neutral, rgba(138, 142, 155, 0.1))}@media (hover:hover){.___SButton_eujln_gg_._theme_secondary-muted_eujln_gg_:hover{background-color:var(--intergalactic-control-secondary-neutral-hover,\n rgba(138, 142, 155, 0.2));color:var(--intergalactic-text-primary, #191b23)}}.___SButton_eujln_gg_._theme_secondary-muted_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_secondary-muted_eujln_gg_:active{background-color:var(--intergalactic-control-secondary-neutral-active,\n rgba(138, 142, 155, 0.3));color:var(--intergalactic-text-primary, #191b23)}.___SButton_eujln_gg_._theme_secondary-info_eujln_gg_{background-color:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-control-primary-info, #008ff8)}@media (hover:hover){.___SButton_eujln_gg_._theme_secondary-info_eujln_gg_:hover{background-color:var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2))}}.___SButton_eujln_gg_._theme_secondary-info_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_secondary-info_eujln_gg_:active{background-color:var(--intergalactic-control-secondary-info-active, rgba(0, 143, 248, 0.3))}.___SButton_eujln_gg_._theme_secondary-invert_eujln_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);border-color:var(--intergalactic-border-primary-invert, #ffffff);background-color:var(--intergalactic-control-secondary-invert, rgba(255, 255, 255, 0.05))}@media (hover:hover){.___SButton_eujln_gg_._theme_secondary-invert_eujln_gg_:hover{background-color:var(--intergalactic-control-secondary-invert-hover, rgba(255, 255, 255, 0.1))}}.___SButton_eujln_gg_._theme_secondary-invert_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_secondary-invert_eujln_gg_:active{background-color:var(--intergalactic-control-secondary-invert-active,\n rgba(255, 255, 255, 0.3))}.___SButton_eujln_gg_._theme_tertiary-info_eujln_gg_{color:var(--intergalactic-text-link, #006dca);background-color:var(--intergalactic-control-tertiary-info, rgba(0, 143, 248, 0))}@media (hover:hover){.___SButton_eujln_gg_._theme_tertiary-info_eujln_gg_:hover{background-color:var(--intergalactic-control-tertiary-info-hover, rgba(0, 143, 248, 0.2))}}.___SButton_eujln_gg_._theme_tertiary-info_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_tertiary-info_eujln_gg_:active{background-color:var(--intergalactic-control-tertiary-info-active, rgba(0, 143, 248, 0.3))}.___SButton_eujln_gg_._theme_tertiary-muted_eujln_gg_{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-control-tertiary-neutral, rgba(138, 142, 155, 0))}@media (hover:hover){.___SButton_eujln_gg_._theme_tertiary-muted_eujln_gg_:hover{background-color:var(--intergalactic-control-tertiary-neutral-hover, rgba(138, 142, 155, 0.2));color:var(--intergalactic-text-primary, #191b23)}}.___SButton_eujln_gg_._theme_tertiary-muted_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_tertiary-muted_eujln_gg_:active{background-color:var(--intergalactic-control-tertiary-neutral-active,\n rgba(138, 142, 155, 0.3));color:var(--intergalactic-text-primary, #191b23)}.___SButton_eujln_gg_._theme_tertiary-invert_eujln_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-tertiary-invert, rgba(255, 255, 255, 0))}@media (hover:hover){.___SButton_eujln_gg_._theme_tertiary-invert_eujln_gg_:hover{background-color:var(--intergalactic-control-tertiary-invert-hover, rgba(255, 255, 255, 0.1))}}.___SButton_eujln_gg_._theme_tertiary-invert_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_tertiary-invert_eujln_gg_:active{background-color:var(--intergalactic-control-tertiary-invert-active, rgba(255, 255, 255, 0.3))}.___SButton_eujln_gg_._neighborLocation_right_eujln_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SButton_eujln_gg_._neighborLocation_both_eujln_gg_{border-radius:0;margin-left:-1px}.___SButton_eujln_gg_._neighborLocation_left_eujln_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SButton_eujln_gg_._neighborLocation_both_eujln_gg_,.___SButton_eujln_gg_._neighborLocation_left_eujln_gg_{position:relative}.___SButton_eujln_gg_._neighborLocation_both_eujln_gg_:after,.___SButton_eujln_gg_._neighborLocation_left_eujln_gg_:after{background-color:var(--intergalactic-text-primary-invert, #ffffff)}.___SButton_eujln_gg_._neighborLocation_both_eujln_gg_._theme_secondary-muted_eujln_gg_:after,.___SButton_eujln_gg_._neighborLocation_left_eujln_gg_._theme_secondary-muted_eujln_gg_:after{background-color:var(--intergalactic-border-primary, #c4c7cf)}.___SButton_eujln_gg_+.___SButton_eujln_gg_._neighborLocation_both_eujln_gg_:after,.___SButton_eujln_gg_+.___SButton_eujln_gg_._neighborLocation_left_eujln_gg_:after{content:\"\";position:absolute;top:-1px;left:-1px;width:1px;height:calc(100% + 2px)}.___SSpin_eujln_gg_{position:absolute;top:0;left:0;width:100%;height:100%;display:flex}.___SInner_eujln_gg_{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}.___SInner_eujln_gg_.__loading_eujln_gg_{visibility:hidden}.___SText_eujln_gg_{display:inline-flex}.___SText_eujln_gg_._size_l_eujln_gg_,.___SText_eujln_gg_._size_m_eujln_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SText_eujln_gg_._size_m_eujln_gg_{line-height:var(--intergalactic-lh-200, 142%)}.___SText_eujln_gg_._size_l_eujln_gg_{line-height:var(--intergalactic-lh-300, 150%)}.___SText_eujln_gg_._size_l_eujln_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SText_eujln_gg_._size_l_eujln_gg_:first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SText_eujln_gg_._size_l_eujln_gg_:last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SAddon_eujln_gg_{display:inline-flex;align-items:center;justify-content:center;pointer-events:none}.___SAddon_eujln_gg_._size_m_eujln_gg_:not(:only-child):first-child{margin-left:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SAddon_eujln_gg_._size_m_eujln_gg_:not(:only-child):last-child{margin-right:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SAddon_eujln_gg_._size_m_eujln_gg_:only-child{margin-left:calc(1.5*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(1.5*var(--intergalactic-spacing-1x, 4px) - 1px)}.___SAddon_eujln_gg_._size_l_eujln_gg_:not(:only-child):first-child{margin-left:calc(var(--intergalactic-spacing-3x, 12px) - 1px)}.___SAddon_eujln_gg_._size_l_eujln_gg_:not(:only-child):last-child{margin-right:calc(var(--intergalactic-spacing-3x, 12px) - 1px)}.___SAddon_eujln_gg_._size_l_eujln_gg_:only-child{margin-left:calc(3*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(3*var(--intergalactic-spacing-1x, 4px) - 1px)}" /*__inner_css_end__*/, "eujln_gg_") /*__reshadow_css_end__*/, {
|
|
23
|
-
"__SButton": "
|
|
24
|
-
"_keyboardFocused": "
|
|
25
|
-
"_disabled": "
|
|
26
|
-
"_size_s": "
|
|
27
|
-
"_size_m": "
|
|
28
|
-
"_size_l": "
|
|
29
|
-
"_neighborLocation_right": "
|
|
30
|
-
"_neighborLocation_both": "
|
|
31
|
-
"_neighborLocation_left": "
|
|
32
|
-
"__SSpin": "
|
|
33
|
-
"__SInner": "
|
|
34
|
-
"_loading": "
|
|
35
|
-
"__SText": "
|
|
36
|
-
"__SAddon": "
|
|
37
|
-
"_theme_primary-info": "_theme_primary-
|
|
38
|
-
"_active": "
|
|
39
|
-
"_theme_primary-success": "_theme_primary-
|
|
40
|
-
"_theme_primary-warning": "_theme_primary-
|
|
41
|
-
"_theme_primary-danger": "_theme_primary-
|
|
42
|
-
"_theme_primary-invert": "_theme_primary-
|
|
43
|
-
"_theme_secondary-muted": "_theme_secondary-
|
|
44
|
-
"_theme_secondary-info": "_theme_secondary-
|
|
45
|
-
"_theme_secondary-invert": "_theme_secondary-
|
|
46
|
-
"_theme_tertiary-info": "_theme_tertiary-
|
|
47
|
-
"_theme_tertiary-muted": "_theme_tertiary-
|
|
48
|
-
"_theme_tertiary-invert": "_theme_tertiary-
|
|
22
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SButton_1veq1_gg_{position:relative;display:inline-block;align-items:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;line-height:normal;-webkit-text-decoration:none;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-weight:var(--intergalactic-medium, 500);color:var(--intergalactic-text-secondary, #6c6e79);min-width:-moz-fit-content;min-width:fit-content}.___SButton_1veq1_gg_::-moz-focus-inner{padding:0;border:0}.___SButton_1veq1_gg_:active,.___SButton_1veq1_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_1veq1_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SButton_1veq1_gg_.__keyboardFocused_1veq1_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SButton_1veq1_gg_.__disabled_1veq1_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;box-shadow:none;z-index:0}.___SButton_1veq1_gg_._size_s_1veq1_gg_{width:var(--intergalactic-form-control-s, 20px);height:var(--intergalactic-form-control-s, 20px);border-radius:var(--intergalactic-addon-rounded, 4px)}.___SButton_1veq1_gg_._size_m_1veq1_gg_{height:var(--intergalactic-form-control-m, 28px);border-radius:var(--intergalactic-control-rounded, 6px);font-size:var(--intergalactic-fs-200, 14px)}.___SButton_1veq1_gg_._size_l_1veq1_gg_{height:var(--intergalactic-form-control-l, 40px);border-radius:var(--intergalactic-control-rounded, 6px);font-size:var(--intergalactic-fs-300, 16px)}.___SButton_1veq1_gg_._theme_primary-info_1veq1_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-info, #008ff8)}@media (hover:hover){.___SButton_1veq1_gg_._theme_primary-info_1veq1_gg_:hover{background-color:var(--intergalactic-control-primary-info-hover, #006dca)}}.___SButton_1veq1_gg_._theme_primary-info_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_primary-info_1veq1_gg_:active{background-color:var(--intergalactic-control-primary-info-active, #044792)}.___SButton_1veq1_gg_._theme_primary-success_1veq1_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-success, #009f81)}@media (hover:hover){.___SButton_1veq1_gg_._theme_primary-success_1veq1_gg_:hover{background-color:var(--intergalactic-control-primary-success-hover, #007c65)}}.___SButton_1veq1_gg_._theme_primary-success_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_primary-success_1veq1_gg_:active{background-color:var(--intergalactic-control-primary-success-active, #055345)}.___SButton_1veq1_gg_._theme_primary-warning_1veq1_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-brand, #ff642d)}@media (hover:hover){.___SButton_1veq1_gg_._theme_primary-warning_1veq1_gg_:hover{background-color:var(--intergalactic-control-primary-brand-hover, #c33909)}}.___SButton_1veq1_gg_._theme_primary-warning_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_primary-warning_1veq1_gg_:active{background-color:var(--intergalactic-control-primary-brand-active, #c33909)}.___SButton_1veq1_gg_._theme_primary-danger_1veq1_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-critical, #ff4953)}@media (hover:hover){.___SButton_1veq1_gg_._theme_primary-danger_1veq1_gg_:hover{background-color:var(--intergalactic-control-primary-critical-hover, #d1002f)}}.___SButton_1veq1_gg_._theme_primary-danger_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_primary-danger_1veq1_gg_:active{background-color:var(--intergalactic-control-primary-critical-active, #8e0016)}.___SButton_1veq1_gg_._theme_primary-invert_1veq1_gg_{color:var(--intergalactic-text-primary, #191b23);background-color:var(--intergalactic-control-primary-invert, #ffffff)}@media (hover:hover){.___SButton_1veq1_gg_._theme_primary-invert_1veq1_gg_:hover{background-color:var(--intergalactic-control-primary-invert-hover, #f4f5f9)}}.___SButton_1veq1_gg_._theme_primary-invert_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_primary-invert_1veq1_gg_:active{background-color:var(--intergalactic-control-primary-invert-active, #e0e1e9)}.___SButton_1veq1_gg_._theme_secondary-muted_1veq1_gg_{color:var(--intergalactic-text-secondary, #6c6e79);border-color:var(--intergalactic-border-primary, #c4c7cf);background-color:var(--intergalactic-control-secondary-neutral, rgba(138, 142, 155, 0.1))}@media (hover:hover){.___SButton_1veq1_gg_._theme_secondary-muted_1veq1_gg_:hover{background-color:var(--intergalactic-control-secondary-neutral-hover,\n rgba(138, 142, 155, 0.2));color:var(--intergalactic-text-primary, #191b23)}}.___SButton_1veq1_gg_._theme_secondary-muted_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_secondary-muted_1veq1_gg_:active{background-color:var(--intergalactic-control-secondary-neutral-active,\n rgba(138, 142, 155, 0.3));color:var(--intergalactic-text-primary, #191b23)}.___SButton_1veq1_gg_._theme_secondary-info_1veq1_gg_{background-color:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-control-primary-info, #008ff8)}@media (hover:hover){.___SButton_1veq1_gg_._theme_secondary-info_1veq1_gg_:hover{background-color:var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2))}}.___SButton_1veq1_gg_._theme_secondary-info_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_secondary-info_1veq1_gg_:active{background-color:var(--intergalactic-control-secondary-info-active, rgba(0, 143, 248, 0.3))}.___SButton_1veq1_gg_._theme_secondary-invert_1veq1_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);border-color:var(--intergalactic-border-primary-invert, #ffffff);background-color:var(--intergalactic-control-secondary-invert, rgba(255, 255, 255, 0.05))}@media (hover:hover){.___SButton_1veq1_gg_._theme_secondary-invert_1veq1_gg_:hover{background-color:var(--intergalactic-control-secondary-invert-hover, rgba(255, 255, 255, 0.1))}}.___SButton_1veq1_gg_._theme_secondary-invert_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_secondary-invert_1veq1_gg_:active{background-color:var(--intergalactic-control-secondary-invert-active,\n rgba(255, 255, 255, 0.3))}.___SButton_1veq1_gg_._theme_tertiary-info_1veq1_gg_{color:var(--intergalactic-text-link, #006dca);background-color:var(--intergalactic-control-tertiary-info, rgba(0, 143, 248, 0))}@media (hover:hover){.___SButton_1veq1_gg_._theme_tertiary-info_1veq1_gg_:hover{background-color:var(--intergalactic-control-tertiary-info-hover, rgba(0, 143, 248, 0.2))}}.___SButton_1veq1_gg_._theme_tertiary-info_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_tertiary-info_1veq1_gg_:active{background-color:var(--intergalactic-control-tertiary-info-active, rgba(0, 143, 248, 0.3))}.___SButton_1veq1_gg_._theme_tertiary-muted_1veq1_gg_{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-control-tertiary-neutral, rgba(138, 142, 155, 0))}@media (hover:hover){.___SButton_1veq1_gg_._theme_tertiary-muted_1veq1_gg_:hover{background-color:var(--intergalactic-control-tertiary-neutral-hover, rgba(138, 142, 155, 0.2));color:var(--intergalactic-text-primary, #191b23)}}.___SButton_1veq1_gg_._theme_tertiary-muted_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_tertiary-muted_1veq1_gg_:active{background-color:var(--intergalactic-control-tertiary-neutral-active,\n rgba(138, 142, 155, 0.3));color:var(--intergalactic-text-primary, #191b23)}.___SButton_1veq1_gg_._theme_tertiary-invert_1veq1_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-tertiary-invert, rgba(255, 255, 255, 0))}@media (hover:hover){.___SButton_1veq1_gg_._theme_tertiary-invert_1veq1_gg_:hover{background-color:var(--intergalactic-control-tertiary-invert-hover, rgba(255, 255, 255, 0.1))}}.___SButton_1veq1_gg_._theme_tertiary-invert_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_tertiary-invert_1veq1_gg_:active{background-color:var(--intergalactic-control-tertiary-invert-active, rgba(255, 255, 255, 0.3))}.___SButton_1veq1_gg_._neighborLocation_right_1veq1_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SButton_1veq1_gg_._neighborLocation_both_1veq1_gg_{border-radius:0;margin-left:-1px}.___SButton_1veq1_gg_._neighborLocation_left_1veq1_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SButton_1veq1_gg_._neighborLocation_both_1veq1_gg_,.___SButton_1veq1_gg_._neighborLocation_left_1veq1_gg_{position:relative}.___SButton_1veq1_gg_._neighborLocation_both_1veq1_gg_:after,.___SButton_1veq1_gg_._neighborLocation_left_1veq1_gg_:after{background-color:var(--intergalactic-text-primary-invert, #ffffff)}.___SButton_1veq1_gg_._neighborLocation_both_1veq1_gg_._theme_secondary-muted_1veq1_gg_:after,.___SButton_1veq1_gg_._neighborLocation_left_1veq1_gg_._theme_secondary-muted_1veq1_gg_:after{background-color:var(--intergalactic-border-primary, #c4c7cf)}.___SButton_1veq1_gg_+.___SButton_1veq1_gg_._neighborLocation_both_1veq1_gg_:after,.___SButton_1veq1_gg_+.___SButton_1veq1_gg_._neighborLocation_left_1veq1_gg_:after{content:\"\";position:absolute;top:-1px;left:-1px;width:1px;height:calc(100% + 2px)}.___SSpin_1veq1_gg_{position:absolute;top:0;left:0;width:100%;height:100%;display:flex}.___SInner_1veq1_gg_{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}.___SInner_1veq1_gg_.__loading_1veq1_gg_{visibility:hidden}.___SText_1veq1_gg_{display:inline-flex}.___SText_1veq1_gg_._size_l_1veq1_gg_,.___SText_1veq1_gg_._size_m_1veq1_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SText_1veq1_gg_._size_m_1veq1_gg_{line-height:var(--intergalactic-lh-200, 142%)}.___SText_1veq1_gg_._size_l_1veq1_gg_{line-height:var(--intergalactic-lh-300, 150%)}.___SText_1veq1_gg_._size_l_1veq1_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SText_1veq1_gg_._size_l_1veq1_gg_:first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SText_1veq1_gg_._size_l_1veq1_gg_:last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SAddon_1veq1_gg_{display:inline-flex;align-items:center;justify-content:center;pointer-events:none}.___SAddon_1veq1_gg_._size_m_1veq1_gg_:not(:only-child):first-child{margin-left:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SAddon_1veq1_gg_._size_m_1veq1_gg_:not(:only-child):last-child{margin-right:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SAddon_1veq1_gg_._size_m_1veq1_gg_:only-child{margin-left:calc(1.5*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(1.5*var(--intergalactic-spacing-1x, 4px) - 1px)}.___SAddon_1veq1_gg_._size_l_1veq1_gg_:not(:only-child):first-child{margin-left:calc(var(--intergalactic-spacing-3x, 12px) - 1px)}.___SAddon_1veq1_gg_._size_l_1veq1_gg_:not(:only-child):last-child{margin-right:calc(var(--intergalactic-spacing-3x, 12px) - 1px)}.___SAddon_1veq1_gg_._size_l_1veq1_gg_:only-child{margin-left:calc(3*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(3*var(--intergalactic-spacing-1x, 4px) - 1px)}" /*__inner_css_end__*/, "1veq1_gg_") /*__reshadow_css_end__*/, {
|
|
23
|
+
"__SButton": "___SButton_1veq1_gg_",
|
|
24
|
+
"_keyboardFocused": "__keyboardFocused_1veq1_gg_",
|
|
25
|
+
"_disabled": "__disabled_1veq1_gg_",
|
|
26
|
+
"_size_s": "_size_s_1veq1_gg_",
|
|
27
|
+
"_size_m": "_size_m_1veq1_gg_",
|
|
28
|
+
"_size_l": "_size_l_1veq1_gg_",
|
|
29
|
+
"_neighborLocation_right": "_neighborLocation_right_1veq1_gg_",
|
|
30
|
+
"_neighborLocation_both": "_neighborLocation_both_1veq1_gg_",
|
|
31
|
+
"_neighborLocation_left": "_neighborLocation_left_1veq1_gg_",
|
|
32
|
+
"__SSpin": "___SSpin_1veq1_gg_",
|
|
33
|
+
"__SInner": "___SInner_1veq1_gg_",
|
|
34
|
+
"_loading": "__loading_1veq1_gg_",
|
|
35
|
+
"__SText": "___SText_1veq1_gg_",
|
|
36
|
+
"__SAddon": "___SAddon_1veq1_gg_",
|
|
37
|
+
"_theme_primary-info": "_theme_primary-info_1veq1_gg_",
|
|
38
|
+
"_active": "__active_1veq1_gg_",
|
|
39
|
+
"_theme_primary-success": "_theme_primary-success_1veq1_gg_",
|
|
40
|
+
"_theme_primary-warning": "_theme_primary-warning_1veq1_gg_",
|
|
41
|
+
"_theme_primary-danger": "_theme_primary-danger_1veq1_gg_",
|
|
42
|
+
"_theme_primary-invert": "_theme_primary-invert_1veq1_gg_",
|
|
43
|
+
"_theme_secondary-muted": "_theme_secondary-muted_1veq1_gg_",
|
|
44
|
+
"_theme_secondary-info": "_theme_secondary-info_1veq1_gg_",
|
|
45
|
+
"_theme_secondary-invert": "_theme_secondary-invert_1veq1_gg_",
|
|
46
|
+
"_theme_tertiary-info": "_theme_tertiary-info_1veq1_gg_",
|
|
47
|
+
"_theme_tertiary-muted": "_theme_tertiary-muted_1veq1_gg_",
|
|
48
|
+
"_theme_tertiary-invert": "_theme_tertiary-invert_1veq1_gg_"
|
|
49
49
|
});
|
|
50
50
|
var RootButton = /*#__PURE__*/function (_AbstractButton) {
|
|
51
51
|
(0, _inherits2["default"])(RootButton, _AbstractButton);
|
|
@@ -20,26 +20,26 @@ var _flexBox = require("@semcore/flex-box");
|
|
|
20
20
|
var _AbstractButton2 = require("../AbstractButton/AbstractButton");
|
|
21
21
|
var _resolveColorEnhance = _interopRequireDefault(require("@semcore/utils/lib/enhances/resolveColorEnhance"));
|
|
22
22
|
/*__reshadow-styles__:"./buttonLink.shadow.css"*/
|
|
23
|
-
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".
|
|
24
|
-
"__SButton": "
|
|
25
|
-
"_keyboardFocused": "
|
|
26
|
-
"_disabled": "
|
|
27
|
-
"__SInner": "
|
|
28
|
-
"__SAddon": "
|
|
29
|
-
"_size_100": "
|
|
30
|
-
"_size_200": "
|
|
31
|
-
"_size_300": "
|
|
32
|
-
"_size_400": "
|
|
33
|
-
"_size_500": "
|
|
34
|
-
"_size_600": "
|
|
35
|
-
"_size_700": "
|
|
36
|
-
"_size_800": "
|
|
37
|
-
"__SText": "
|
|
38
|
-
"_active": "
|
|
39
|
-
"_enableVisited": "
|
|
40
|
-
"_use_secondary": "
|
|
41
|
-
"_text-color": "__text-
|
|
42
|
-
"--text-color": "--text-
|
|
23
|
+
var style = ( /*__reshadow_css_start__*/_index.sstyled.insert( /*__inner_css_start__*/".___SButton_1obfu_gg_{display:inline-flex;font-family:inherit;font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-link, #006dca);line-height:normal;position:relative;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;outline:0;background:0 0;transition:color .15s ease-in-out}.___SButton_1obfu_gg_:active,.___SButton_1obfu_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_1obfu_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SButton_1obfu_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_1obfu_gg_.__active_1obfu_gg_,.___SButton_1obfu_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SButton_1obfu_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SButton_1obfu_gg_.__active_1obfu_gg_ .___SText_1obfu_gg_,.___SButton_1obfu_gg_:active .___SText_1obfu_gg_{border-color:currentColor}@media (hover:hover){.___SButton_1obfu_gg_:hover .___SText_1obfu_gg_{border-color:currentColor}}.___SButton_1obfu_gg_.__enableVisited_1obfu_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SButton_1obfu_gg_.__enableVisited_1obfu_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SButton_1obfu_gg_ .___SText_1obfu_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SButton_1obfu_gg_.__keyboardFocused_1obfu_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));outline-style:solid;outline-width:3px}.___SButton_1obfu_gg_.__disabled_1obfu_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SButton_1obfu_gg_._use_secondary_1obfu_gg_{color:var(--intergalactic-text-hint, #6c6e79)}.___SButton_1obfu_gg_._use_secondary_1obfu_gg_.__active_1obfu_gg_,.___SButton_1obfu_gg_._use_secondary_1obfu_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SButton_1obfu_gg_._use_secondary_1obfu_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SButton_1obfu_gg_._use_secondary_1obfu_gg_ .___SText_1obfu_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_1obfu_gg_,.___SInner_1obfu_gg_{display:inline-flex;justify-content:center;align-items:center}.___SInner_1obfu_gg_{height:100%;width:100%}.___SAddon_1obfu_gg_{vertical-align:middle;pointer-events:none}.___SButton_1obfu_gg_ .___SAddon_1obfu_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_1obfu_gg_ .___SAddon_1obfu_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_1obfu_gg_.__text-color_1obfu_gg_{color:var(--text-color_1obfu)}.___SButton_1obfu_gg_.__text-color_1obfu_gg_.__active_1obfu_gg_,.___SButton_1obfu_gg_.__text-color_1obfu_gg_:active{color:var(--text-color_1obfu);filter:brightness(.8)}@media (hover:hover){.___SButton_1obfu_gg_.__text-color_1obfu_gg_:hover{color:var(--text-color_1obfu);filter:brightness(.8)}}.___SButton_1obfu_gg_._size_100_1obfu_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_1obfu_gg_._size_200_1obfu_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_1obfu_gg_._size_300_1obfu_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_1obfu_gg_._size_400_1obfu_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_1obfu_gg_._size_500_1obfu_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_1obfu_gg_._size_600_1obfu_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_1obfu_gg_._size_700_1obfu_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_1obfu_gg_._size_800_1obfu_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_1obfu_gg_,.___SText_1obfu_gg_{transition:none}}" /*__inner_css_end__*/, "1obfu_gg_") /*__reshadow_css_end__*/, {
|
|
24
|
+
"__SButton": "___SButton_1obfu_gg_",
|
|
25
|
+
"_keyboardFocused": "__keyboardFocused_1obfu_gg_",
|
|
26
|
+
"_disabled": "__disabled_1obfu_gg_",
|
|
27
|
+
"__SInner": "___SInner_1obfu_gg_",
|
|
28
|
+
"__SAddon": "___SAddon_1obfu_gg_",
|
|
29
|
+
"_size_100": "_size_100_1obfu_gg_",
|
|
30
|
+
"_size_200": "_size_200_1obfu_gg_",
|
|
31
|
+
"_size_300": "_size_300_1obfu_gg_",
|
|
32
|
+
"_size_400": "_size_400_1obfu_gg_",
|
|
33
|
+
"_size_500": "_size_500_1obfu_gg_",
|
|
34
|
+
"_size_600": "_size_600_1obfu_gg_",
|
|
35
|
+
"_size_700": "_size_700_1obfu_gg_",
|
|
36
|
+
"_size_800": "_size_800_1obfu_gg_",
|
|
37
|
+
"__SText": "___SText_1obfu_gg_",
|
|
38
|
+
"_active": "__active_1obfu_gg_",
|
|
39
|
+
"_enableVisited": "__enableVisited_1obfu_gg_",
|
|
40
|
+
"_use_secondary": "_use_secondary_1obfu_gg_",
|
|
41
|
+
"_text-color": "__text-color_1obfu_gg_",
|
|
42
|
+
"--text-color": "--text-color_1obfu"
|
|
43
43
|
});
|
|
44
44
|
var enhance = {
|
|
45
45
|
keyboardFocused: (0, _keyboardFocusEnhance["default"])(),
|
|
@@ -12,33 +12,33 @@ import createComponent, { sstyled, Root } from '@semcore/core';
|
|
|
12
12
|
import { Box } from '@semcore/flex-box';
|
|
13
13
|
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
14
14
|
/*__reshadow-styles__:"./button.shadow.css"*/
|
|
15
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SButton_eujln_gg_{position:relative;display:inline-block;align-items:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;line-height:normal;-webkit-text-decoration:none;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-weight:var(--intergalactic-medium, 500);color:var(--intergalactic-text-secondary, #6c6e79);min-width:-moz-fit-content;min-width:fit-content}.___SButton_eujln_gg_::-moz-focus-inner{padding:0;border:0}.___SButton_eujln_gg_:active,.___SButton_eujln_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_eujln_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SButton_eujln_gg_.__keyboardFocused_eujln_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SButton_eujln_gg_.__disabled_eujln_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;box-shadow:none;z-index:0}.___SButton_eujln_gg_._size_s_eujln_gg_{width:var(--intergalactic-form-control-s, 20px);height:var(--intergalactic-form-control-s, 20px);border-radius:var(--intergalactic-addon-rounded, 4px)}.___SButton_eujln_gg_._size_m_eujln_gg_{height:var(--intergalactic-form-control-m, 28px);border-radius:var(--intergalactic-control-rounded, 6px);font-size:var(--intergalactic-fs-200, 14px)}.___SButton_eujln_gg_._size_l_eujln_gg_{height:var(--intergalactic-form-control-l, 40px);border-radius:var(--intergalactic-control-rounded, 6px);font-size:var(--intergalactic-fs-300, 16px)}.___SButton_eujln_gg_._theme_primary-info_eujln_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-info, #008ff8)}@media (hover:hover){.___SButton_eujln_gg_._theme_primary-info_eujln_gg_:hover{background-color:var(--intergalactic-control-primary-info-hover, #006dca)}}.___SButton_eujln_gg_._theme_primary-info_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_primary-info_eujln_gg_:active{background-color:var(--intergalactic-control-primary-info-active, #044792)}.___SButton_eujln_gg_._theme_primary-success_eujln_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-success, #009f81)}@media (hover:hover){.___SButton_eujln_gg_._theme_primary-success_eujln_gg_:hover{background-color:var(--intergalactic-control-primary-success-hover, #007c65)}}.___SButton_eujln_gg_._theme_primary-success_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_primary-success_eujln_gg_:active{background-color:var(--intergalactic-control-primary-success-active, #055345)}.___SButton_eujln_gg_._theme_primary-warning_eujln_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-brand, #ff642d)}@media (hover:hover){.___SButton_eujln_gg_._theme_primary-warning_eujln_gg_:hover{background-color:var(--intergalactic-control-primary-brand-hover, #c33909)}}.___SButton_eujln_gg_._theme_primary-warning_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_primary-warning_eujln_gg_:active{background-color:var(--intergalactic-control-primary-brand-active, #c33909)}.___SButton_eujln_gg_._theme_primary-danger_eujln_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-critical, #ff4953)}@media (hover:hover){.___SButton_eujln_gg_._theme_primary-danger_eujln_gg_:hover{background-color:var(--intergalactic-control-primary-critical-hover, #d1002f)}}.___SButton_eujln_gg_._theme_primary-danger_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_primary-danger_eujln_gg_:active{background-color:var(--intergalactic-control-primary-critical-active, #8e0016)}.___SButton_eujln_gg_._theme_primary-invert_eujln_gg_{color:var(--intergalactic-text-primary, #191b23);background-color:var(--intergalactic-control-primary-invert, #ffffff)}@media (hover:hover){.___SButton_eujln_gg_._theme_primary-invert_eujln_gg_:hover{background-color:var(--intergalactic-control-primary-invert-hover, #f4f5f9)}}.___SButton_eujln_gg_._theme_primary-invert_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_primary-invert_eujln_gg_:active{background-color:var(--intergalactic-control-primary-invert-active, #e0e1e9)}.___SButton_eujln_gg_._theme_secondary-muted_eujln_gg_{color:var(--intergalactic-text-secondary, #6c6e79);border-color:var(--intergalactic-border-primary, #c4c7cf);background-color:var(--intergalactic-control-secondary-neutral, rgba(138, 142, 155, 0.1))}@media (hover:hover){.___SButton_eujln_gg_._theme_secondary-muted_eujln_gg_:hover{background-color:var(--intergalactic-control-secondary-neutral-hover,\n rgba(138, 142, 155, 0.2));color:var(--intergalactic-text-primary, #191b23)}}.___SButton_eujln_gg_._theme_secondary-muted_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_secondary-muted_eujln_gg_:active{background-color:var(--intergalactic-control-secondary-neutral-active,\n rgba(138, 142, 155, 0.3));color:var(--intergalactic-text-primary, #191b23)}.___SButton_eujln_gg_._theme_secondary-info_eujln_gg_{background-color:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-control-primary-info, #008ff8)}@media (hover:hover){.___SButton_eujln_gg_._theme_secondary-info_eujln_gg_:hover{background-color:var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2))}}.___SButton_eujln_gg_._theme_secondary-info_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_secondary-info_eujln_gg_:active{background-color:var(--intergalactic-control-secondary-info-active, rgba(0, 143, 248, 0.3))}.___SButton_eujln_gg_._theme_secondary-invert_eujln_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);border-color:var(--intergalactic-border-primary-invert, #ffffff);background-color:var(--intergalactic-control-secondary-invert, rgba(255, 255, 255, 0.05))}@media (hover:hover){.___SButton_eujln_gg_._theme_secondary-invert_eujln_gg_:hover{background-color:var(--intergalactic-control-secondary-invert-hover, rgba(255, 255, 255, 0.1))}}.___SButton_eujln_gg_._theme_secondary-invert_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_secondary-invert_eujln_gg_:active{background-color:var(--intergalactic-control-secondary-invert-active,\n rgba(255, 255, 255, 0.3))}.___SButton_eujln_gg_._theme_tertiary-info_eujln_gg_{color:var(--intergalactic-text-link, #006dca);background-color:var(--intergalactic-control-tertiary-info, rgba(0, 143, 248, 0))}@media (hover:hover){.___SButton_eujln_gg_._theme_tertiary-info_eujln_gg_:hover{background-color:var(--intergalactic-control-tertiary-info-hover, rgba(0, 143, 248, 0.2))}}.___SButton_eujln_gg_._theme_tertiary-info_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_tertiary-info_eujln_gg_:active{background-color:var(--intergalactic-control-tertiary-info-active, rgba(0, 143, 248, 0.3))}.___SButton_eujln_gg_._theme_tertiary-muted_eujln_gg_{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-control-tertiary-neutral, rgba(138, 142, 155, 0))}@media (hover:hover){.___SButton_eujln_gg_._theme_tertiary-muted_eujln_gg_:hover{background-color:var(--intergalactic-control-tertiary-neutral-hover, rgba(138, 142, 155, 0.2));color:var(--intergalactic-text-primary, #191b23)}}.___SButton_eujln_gg_._theme_tertiary-muted_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_tertiary-muted_eujln_gg_:active{background-color:var(--intergalactic-control-tertiary-neutral-active,\n rgba(138, 142, 155, 0.3));color:var(--intergalactic-text-primary, #191b23)}.___SButton_eujln_gg_._theme_tertiary-invert_eujln_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-tertiary-invert, rgba(255, 255, 255, 0))}@media (hover:hover){.___SButton_eujln_gg_._theme_tertiary-invert_eujln_gg_:hover{background-color:var(--intergalactic-control-tertiary-invert-hover, rgba(255, 255, 255, 0.1))}}.___SButton_eujln_gg_._theme_tertiary-invert_eujln_gg_.__active_eujln_gg_,.___SButton_eujln_gg_._theme_tertiary-invert_eujln_gg_:active{background-color:var(--intergalactic-control-tertiary-invert-active, rgba(255, 255, 255, 0.3))}.___SButton_eujln_gg_._neighborLocation_right_eujln_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SButton_eujln_gg_._neighborLocation_both_eujln_gg_{border-radius:0;margin-left:-1px}.___SButton_eujln_gg_._neighborLocation_left_eujln_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SButton_eujln_gg_._neighborLocation_both_eujln_gg_,.___SButton_eujln_gg_._neighborLocation_left_eujln_gg_{position:relative}.___SButton_eujln_gg_._neighborLocation_both_eujln_gg_:after,.___SButton_eujln_gg_._neighborLocation_left_eujln_gg_:after{background-color:var(--intergalactic-text-primary-invert, #ffffff)}.___SButton_eujln_gg_._neighborLocation_both_eujln_gg_._theme_secondary-muted_eujln_gg_:after,.___SButton_eujln_gg_._neighborLocation_left_eujln_gg_._theme_secondary-muted_eujln_gg_:after{background-color:var(--intergalactic-border-primary, #c4c7cf)}.___SButton_eujln_gg_+.___SButton_eujln_gg_._neighborLocation_both_eujln_gg_:after,.___SButton_eujln_gg_+.___SButton_eujln_gg_._neighborLocation_left_eujln_gg_:after{content:\"\";position:absolute;top:-1px;left:-1px;width:1px;height:calc(100% + 2px)}.___SSpin_eujln_gg_{position:absolute;top:0;left:0;width:100%;height:100%;display:flex}.___SInner_eujln_gg_{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}.___SInner_eujln_gg_.__loading_eujln_gg_{visibility:hidden}.___SText_eujln_gg_{display:inline-flex}.___SText_eujln_gg_._size_l_eujln_gg_,.___SText_eujln_gg_._size_m_eujln_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SText_eujln_gg_._size_m_eujln_gg_{line-height:var(--intergalactic-lh-200, 142%)}.___SText_eujln_gg_._size_l_eujln_gg_{line-height:var(--intergalactic-lh-300, 150%)}.___SText_eujln_gg_._size_l_eujln_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SText_eujln_gg_._size_l_eujln_gg_:first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SText_eujln_gg_._size_l_eujln_gg_:last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SAddon_eujln_gg_{display:inline-flex;align-items:center;justify-content:center;pointer-events:none}.___SAddon_eujln_gg_._size_m_eujln_gg_:not(:only-child):first-child{margin-left:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SAddon_eujln_gg_._size_m_eujln_gg_:not(:only-child):last-child{margin-right:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SAddon_eujln_gg_._size_m_eujln_gg_:only-child{margin-left:calc(1.5*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(1.5*var(--intergalactic-spacing-1x, 4px) - 1px)}.___SAddon_eujln_gg_._size_l_eujln_gg_:not(:only-child):first-child{margin-left:calc(var(--intergalactic-spacing-3x, 12px) - 1px)}.___SAddon_eujln_gg_._size_l_eujln_gg_:not(:only-child):last-child{margin-right:calc(var(--intergalactic-spacing-3x, 12px) - 1px)}.___SAddon_eujln_gg_._size_l_eujln_gg_:only-child{margin-left:calc(3*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(3*var(--intergalactic-spacing-1x, 4px) - 1px)}" /*__inner_css_end__*/, "eujln_gg_") /*__reshadow_css_end__*/, {
|
|
16
|
-
"__SButton": "
|
|
17
|
-
"_keyboardFocused": "
|
|
18
|
-
"_disabled": "
|
|
19
|
-
"_size_s": "
|
|
20
|
-
"_size_m": "
|
|
21
|
-
"_size_l": "
|
|
22
|
-
"_neighborLocation_right": "
|
|
23
|
-
"_neighborLocation_both": "
|
|
24
|
-
"_neighborLocation_left": "
|
|
25
|
-
"__SSpin": "
|
|
26
|
-
"__SInner": "
|
|
27
|
-
"_loading": "
|
|
28
|
-
"__SText": "
|
|
29
|
-
"__SAddon": "
|
|
30
|
-
"_theme_primary-info": "_theme_primary-
|
|
31
|
-
"_active": "
|
|
32
|
-
"_theme_primary-success": "_theme_primary-
|
|
33
|
-
"_theme_primary-warning": "_theme_primary-
|
|
34
|
-
"_theme_primary-danger": "_theme_primary-
|
|
35
|
-
"_theme_primary-invert": "_theme_primary-
|
|
36
|
-
"_theme_secondary-muted": "_theme_secondary-
|
|
37
|
-
"_theme_secondary-info": "_theme_secondary-
|
|
38
|
-
"_theme_secondary-invert": "_theme_secondary-
|
|
39
|
-
"_theme_tertiary-info": "_theme_tertiary-
|
|
40
|
-
"_theme_tertiary-muted": "_theme_tertiary-
|
|
41
|
-
"_theme_tertiary-invert": "_theme_tertiary-
|
|
15
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SButton_1veq1_gg_{position:relative;display:inline-block;align-items:center;justify-content:center;padding:0;margin:0;white-space:nowrap;font-family:inherit;line-height:normal;-webkit-text-decoration:none;text-decoration:none;text-align:center;vertical-align:middle;border:1px solid transparent;outline:0;box-shadow:none;cursor:pointer;box-sizing:border-box;overflow:visible;-webkit-user-select:none;-moz-user-select:none;user-select:none;touch-action:manipulation;-webkit-tap-highlight-color:transparent;font-weight:var(--intergalactic-medium, 500);color:var(--intergalactic-text-secondary, #6c6e79);min-width:-moz-fit-content;min-width:fit-content}.___SButton_1veq1_gg_::-moz-focus-inner{padding:0;border:0}.___SButton_1veq1_gg_:active,.___SButton_1veq1_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_1veq1_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SButton_1veq1_gg_.__keyboardFocused_1veq1_gg_{box-shadow:var(--intergalactic-keyboard-focus, 0px 0px 0px 3px rgba(0, 143, 248, 0.5));z-index:1}.___SButton_1veq1_gg_.__disabled_1veq1_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none;box-shadow:none;z-index:0}.___SButton_1veq1_gg_._size_s_1veq1_gg_{width:var(--intergalactic-form-control-s, 20px);height:var(--intergalactic-form-control-s, 20px);border-radius:var(--intergalactic-addon-rounded, 4px)}.___SButton_1veq1_gg_._size_m_1veq1_gg_{height:var(--intergalactic-form-control-m, 28px);border-radius:var(--intergalactic-control-rounded, 6px);font-size:var(--intergalactic-fs-200, 14px)}.___SButton_1veq1_gg_._size_l_1veq1_gg_{height:var(--intergalactic-form-control-l, 40px);border-radius:var(--intergalactic-control-rounded, 6px);font-size:var(--intergalactic-fs-300, 16px)}.___SButton_1veq1_gg_._theme_primary-info_1veq1_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-info, #008ff8)}@media (hover:hover){.___SButton_1veq1_gg_._theme_primary-info_1veq1_gg_:hover{background-color:var(--intergalactic-control-primary-info-hover, #006dca)}}.___SButton_1veq1_gg_._theme_primary-info_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_primary-info_1veq1_gg_:active{background-color:var(--intergalactic-control-primary-info-active, #044792)}.___SButton_1veq1_gg_._theme_primary-success_1veq1_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-success, #009f81)}@media (hover:hover){.___SButton_1veq1_gg_._theme_primary-success_1veq1_gg_:hover{background-color:var(--intergalactic-control-primary-success-hover, #007c65)}}.___SButton_1veq1_gg_._theme_primary-success_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_primary-success_1veq1_gg_:active{background-color:var(--intergalactic-control-primary-success-active, #055345)}.___SButton_1veq1_gg_._theme_primary-warning_1veq1_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-brand, #ff642d)}@media (hover:hover){.___SButton_1veq1_gg_._theme_primary-warning_1veq1_gg_:hover{background-color:var(--intergalactic-control-primary-brand-hover, #c33909)}}.___SButton_1veq1_gg_._theme_primary-warning_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_primary-warning_1veq1_gg_:active{background-color:var(--intergalactic-control-primary-brand-active, #c33909)}.___SButton_1veq1_gg_._theme_primary-danger_1veq1_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-primary-critical, #ff4953)}@media (hover:hover){.___SButton_1veq1_gg_._theme_primary-danger_1veq1_gg_:hover{background-color:var(--intergalactic-control-primary-critical-hover, #d1002f)}}.___SButton_1veq1_gg_._theme_primary-danger_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_primary-danger_1veq1_gg_:active{background-color:var(--intergalactic-control-primary-critical-active, #8e0016)}.___SButton_1veq1_gg_._theme_primary-invert_1veq1_gg_{color:var(--intergalactic-text-primary, #191b23);background-color:var(--intergalactic-control-primary-invert, #ffffff)}@media (hover:hover){.___SButton_1veq1_gg_._theme_primary-invert_1veq1_gg_:hover{background-color:var(--intergalactic-control-primary-invert-hover, #f4f5f9)}}.___SButton_1veq1_gg_._theme_primary-invert_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_primary-invert_1veq1_gg_:active{background-color:var(--intergalactic-control-primary-invert-active, #e0e1e9)}.___SButton_1veq1_gg_._theme_secondary-muted_1veq1_gg_{color:var(--intergalactic-text-secondary, #6c6e79);border-color:var(--intergalactic-border-primary, #c4c7cf);background-color:var(--intergalactic-control-secondary-neutral, rgba(138, 142, 155, 0.1))}@media (hover:hover){.___SButton_1veq1_gg_._theme_secondary-muted_1veq1_gg_:hover{background-color:var(--intergalactic-control-secondary-neutral-hover,\n rgba(138, 142, 155, 0.2));color:var(--intergalactic-text-primary, #191b23)}}.___SButton_1veq1_gg_._theme_secondary-muted_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_secondary-muted_1veq1_gg_:active{background-color:var(--intergalactic-control-secondary-neutral-active,\n rgba(138, 142, 155, 0.3));color:var(--intergalactic-text-primary, #191b23)}.___SButton_1veq1_gg_._theme_secondary-info_1veq1_gg_{background-color:var(--intergalactic-control-secondary-info, rgba(0, 143, 248, 0.1));color:var(--intergalactic-text-link, #006dca);border-color:var(--intergalactic-control-primary-info, #008ff8)}@media (hover:hover){.___SButton_1veq1_gg_._theme_secondary-info_1veq1_gg_:hover{background-color:var(--intergalactic-control-secondary-info-hover, rgba(0, 143, 248, 0.2))}}.___SButton_1veq1_gg_._theme_secondary-info_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_secondary-info_1veq1_gg_:active{background-color:var(--intergalactic-control-secondary-info-active, rgba(0, 143, 248, 0.3))}.___SButton_1veq1_gg_._theme_secondary-invert_1veq1_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);border-color:var(--intergalactic-border-primary-invert, #ffffff);background-color:var(--intergalactic-control-secondary-invert, rgba(255, 255, 255, 0.05))}@media (hover:hover){.___SButton_1veq1_gg_._theme_secondary-invert_1veq1_gg_:hover{background-color:var(--intergalactic-control-secondary-invert-hover, rgba(255, 255, 255, 0.1))}}.___SButton_1veq1_gg_._theme_secondary-invert_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_secondary-invert_1veq1_gg_:active{background-color:var(--intergalactic-control-secondary-invert-active,\n rgba(255, 255, 255, 0.3))}.___SButton_1veq1_gg_._theme_tertiary-info_1veq1_gg_{color:var(--intergalactic-text-link, #006dca);background-color:var(--intergalactic-control-tertiary-info, rgba(0, 143, 248, 0))}@media (hover:hover){.___SButton_1veq1_gg_._theme_tertiary-info_1veq1_gg_:hover{background-color:var(--intergalactic-control-tertiary-info-hover, rgba(0, 143, 248, 0.2))}}.___SButton_1veq1_gg_._theme_tertiary-info_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_tertiary-info_1veq1_gg_:active{background-color:var(--intergalactic-control-tertiary-info-active, rgba(0, 143, 248, 0.3))}.___SButton_1veq1_gg_._theme_tertiary-muted_1veq1_gg_{color:var(--intergalactic-text-secondary, #6c6e79);background-color:var(--intergalactic-control-tertiary-neutral, rgba(138, 142, 155, 0))}@media (hover:hover){.___SButton_1veq1_gg_._theme_tertiary-muted_1veq1_gg_:hover{background-color:var(--intergalactic-control-tertiary-neutral-hover, rgba(138, 142, 155, 0.2));color:var(--intergalactic-text-primary, #191b23)}}.___SButton_1veq1_gg_._theme_tertiary-muted_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_tertiary-muted_1veq1_gg_:active{background-color:var(--intergalactic-control-tertiary-neutral-active,\n rgba(138, 142, 155, 0.3));color:var(--intergalactic-text-primary, #191b23)}.___SButton_1veq1_gg_._theme_tertiary-invert_1veq1_gg_{color:var(--intergalactic-text-primary-invert, #ffffff);background-color:var(--intergalactic-control-tertiary-invert, rgba(255, 255, 255, 0))}@media (hover:hover){.___SButton_1veq1_gg_._theme_tertiary-invert_1veq1_gg_:hover{background-color:var(--intergalactic-control-tertiary-invert-hover, rgba(255, 255, 255, 0.1))}}.___SButton_1veq1_gg_._theme_tertiary-invert_1veq1_gg_.__active_1veq1_gg_,.___SButton_1veq1_gg_._theme_tertiary-invert_1veq1_gg_:active{background-color:var(--intergalactic-control-tertiary-invert-active, rgba(255, 255, 255, 0.3))}.___SButton_1veq1_gg_._neighborLocation_right_1veq1_gg_{border-top-right-radius:0;border-bottom-right-radius:0}.___SButton_1veq1_gg_._neighborLocation_both_1veq1_gg_{border-radius:0;margin-left:-1px}.___SButton_1veq1_gg_._neighborLocation_left_1veq1_gg_{border-top-left-radius:0;border-bottom-left-radius:0;margin-left:-1px}.___SButton_1veq1_gg_._neighborLocation_both_1veq1_gg_,.___SButton_1veq1_gg_._neighborLocation_left_1veq1_gg_{position:relative}.___SButton_1veq1_gg_._neighborLocation_both_1veq1_gg_:after,.___SButton_1veq1_gg_._neighborLocation_left_1veq1_gg_:after{background-color:var(--intergalactic-text-primary-invert, #ffffff)}.___SButton_1veq1_gg_._neighborLocation_both_1veq1_gg_._theme_secondary-muted_1veq1_gg_:after,.___SButton_1veq1_gg_._neighborLocation_left_1veq1_gg_._theme_secondary-muted_1veq1_gg_:after{background-color:var(--intergalactic-border-primary, #c4c7cf)}.___SButton_1veq1_gg_+.___SButton_1veq1_gg_._neighborLocation_both_1veq1_gg_:after,.___SButton_1veq1_gg_+.___SButton_1veq1_gg_._neighborLocation_left_1veq1_gg_:after{content:\"\";position:absolute;top:-1px;left:-1px;width:1px;height:calc(100% + 2px)}.___SSpin_1veq1_gg_{position:absolute;top:0;left:0;width:100%;height:100%;display:flex}.___SInner_1veq1_gg_{display:inline-flex;align-items:center;justify-content:center;height:100%;width:100%}.___SInner_1veq1_gg_.__loading_1veq1_gg_{visibility:hidden}.___SText_1veq1_gg_{display:inline-flex}.___SText_1veq1_gg_._size_l_1veq1_gg_,.___SText_1veq1_gg_._size_m_1veq1_gg_{margin-left:var(--intergalactic-spacing-2x, 8px);margin-right:var(--intergalactic-spacing-2x, 8px)}.___SText_1veq1_gg_._size_m_1veq1_gg_{line-height:var(--intergalactic-lh-200, 142%)}.___SText_1veq1_gg_._size_l_1veq1_gg_{line-height:var(--intergalactic-lh-300, 150%)}.___SText_1veq1_gg_._size_l_1veq1_gg_:only-child{margin-left:var(--intergalactic-spacing-3x, 12px);margin-right:var(--intergalactic-spacing-3x, 12px)}.___SText_1veq1_gg_._size_l_1veq1_gg_:first-child{margin-left:var(--intergalactic-spacing-3x, 12px)}.___SText_1veq1_gg_._size_l_1veq1_gg_:last-child{margin-right:var(--intergalactic-spacing-3x, 12px)}.___SAddon_1veq1_gg_{display:inline-flex;align-items:center;justify-content:center;pointer-events:none}.___SAddon_1veq1_gg_._size_m_1veq1_gg_:not(:only-child):first-child{margin-left:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SAddon_1veq1_gg_._size_m_1veq1_gg_:not(:only-child):last-child{margin-right:calc(var(--intergalactic-spacing-2x, 8px) - 1px)}.___SAddon_1veq1_gg_._size_m_1veq1_gg_:only-child{margin-left:calc(1.5*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(1.5*var(--intergalactic-spacing-1x, 4px) - 1px)}.___SAddon_1veq1_gg_._size_l_1veq1_gg_:not(:only-child):first-child{margin-left:calc(var(--intergalactic-spacing-3x, 12px) - 1px)}.___SAddon_1veq1_gg_._size_l_1veq1_gg_:not(:only-child):last-child{margin-right:calc(var(--intergalactic-spacing-3x, 12px) - 1px)}.___SAddon_1veq1_gg_._size_l_1veq1_gg_:only-child{margin-left:calc(3*var(--intergalactic-spacing-1x, 4px) - 1px);margin-right:calc(3*var(--intergalactic-spacing-1x, 4px) - 1px)}" /*__inner_css_end__*/, "1veq1_gg_") /*__reshadow_css_end__*/, {
|
|
16
|
+
"__SButton": "___SButton_1veq1_gg_",
|
|
17
|
+
"_keyboardFocused": "__keyboardFocused_1veq1_gg_",
|
|
18
|
+
"_disabled": "__disabled_1veq1_gg_",
|
|
19
|
+
"_size_s": "_size_s_1veq1_gg_",
|
|
20
|
+
"_size_m": "_size_m_1veq1_gg_",
|
|
21
|
+
"_size_l": "_size_l_1veq1_gg_",
|
|
22
|
+
"_neighborLocation_right": "_neighborLocation_right_1veq1_gg_",
|
|
23
|
+
"_neighborLocation_both": "_neighborLocation_both_1veq1_gg_",
|
|
24
|
+
"_neighborLocation_left": "_neighborLocation_left_1veq1_gg_",
|
|
25
|
+
"__SSpin": "___SSpin_1veq1_gg_",
|
|
26
|
+
"__SInner": "___SInner_1veq1_gg_",
|
|
27
|
+
"_loading": "__loading_1veq1_gg_",
|
|
28
|
+
"__SText": "___SText_1veq1_gg_",
|
|
29
|
+
"__SAddon": "___SAddon_1veq1_gg_",
|
|
30
|
+
"_theme_primary-info": "_theme_primary-info_1veq1_gg_",
|
|
31
|
+
"_active": "__active_1veq1_gg_",
|
|
32
|
+
"_theme_primary-success": "_theme_primary-success_1veq1_gg_",
|
|
33
|
+
"_theme_primary-warning": "_theme_primary-warning_1veq1_gg_",
|
|
34
|
+
"_theme_primary-danger": "_theme_primary-danger_1veq1_gg_",
|
|
35
|
+
"_theme_primary-invert": "_theme_primary-invert_1veq1_gg_",
|
|
36
|
+
"_theme_secondary-muted": "_theme_secondary-muted_1veq1_gg_",
|
|
37
|
+
"_theme_secondary-info": "_theme_secondary-info_1veq1_gg_",
|
|
38
|
+
"_theme_secondary-invert": "_theme_secondary-invert_1veq1_gg_",
|
|
39
|
+
"_theme_tertiary-info": "_theme_tertiary-info_1veq1_gg_",
|
|
40
|
+
"_theme_tertiary-muted": "_theme_tertiary-muted_1veq1_gg_",
|
|
41
|
+
"_theme_tertiary-invert": "_theme_tertiary-invert_1veq1_gg_"
|
|
42
42
|
});
|
|
43
43
|
import { AbstractButton } from '../AbstractButton/AbstractButton';
|
|
44
44
|
var RootButton = /*#__PURE__*/function (_AbstractButton) {
|
|
@@ -10,26 +10,26 @@ import { assignProps as _assignProps } from "@semcore/core";
|
|
|
10
10
|
import React from 'react';
|
|
11
11
|
import createComponent, { sstyled, Root } from '@semcore/core';
|
|
12
12
|
/*__reshadow-styles__:"./buttonLink.shadow.css"*/
|
|
13
|
-
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".
|
|
14
|
-
"__SButton": "
|
|
15
|
-
"_keyboardFocused": "
|
|
16
|
-
"_disabled": "
|
|
17
|
-
"__SInner": "
|
|
18
|
-
"__SAddon": "
|
|
19
|
-
"_size_100": "
|
|
20
|
-
"_size_200": "
|
|
21
|
-
"_size_300": "
|
|
22
|
-
"_size_400": "
|
|
23
|
-
"_size_500": "
|
|
24
|
-
"_size_600": "
|
|
25
|
-
"_size_700": "
|
|
26
|
-
"_size_800": "
|
|
27
|
-
"__SText": "
|
|
28
|
-
"_active": "
|
|
29
|
-
"_enableVisited": "
|
|
30
|
-
"_use_secondary": "
|
|
31
|
-
"_text-color": "__text-
|
|
32
|
-
"--text-color": "--text-
|
|
13
|
+
var style = ( /*__reshadow_css_start__*/_sstyled.insert( /*__inner_css_start__*/".___SButton_1obfu_gg_{display:inline-flex;font-family:inherit;font-size:var(--intergalactic-fs-200, 14px);color:var(--intergalactic-text-link, #006dca);line-height:normal;position:relative;cursor:pointer;-webkit-text-decoration:none;text-decoration:none;border:0;padding:0;margin:0;box-shadow:none;-webkit-tap-highlight-color:transparent;outline:0;background:0 0;transition:color .15s ease-in-out}.___SButton_1obfu_gg_:active,.___SButton_1obfu_gg_:focus{outline:0;-webkit-text-decoration:none;text-decoration:none}@media (hover:hover){.___SButton_1obfu_gg_:hover{outline:0;-webkit-text-decoration:none;text-decoration:none}}.___SButton_1obfu_gg_::-moz-focus-inner{border:0;padding:0}.___SButton_1obfu_gg_.__active_1obfu_gg_,.___SButton_1obfu_gg_:active{color:var(--intergalactic-text-link-hover-active, #044792)}@media (hover:hover){.___SButton_1obfu_gg_:hover{color:var(--intergalactic-text-link-hover-active, #044792)}}.___SButton_1obfu_gg_.__active_1obfu_gg_ .___SText_1obfu_gg_,.___SButton_1obfu_gg_:active .___SText_1obfu_gg_{border-color:currentColor}@media (hover:hover){.___SButton_1obfu_gg_:hover .___SText_1obfu_gg_{border-color:currentColor}}.___SButton_1obfu_gg_.__enableVisited_1obfu_gg_:visited{color:var(--intergalactic-text-link-visited, #8649e1)}@media (hover:hover){.___SButton_1obfu_gg_.__enableVisited_1obfu_gg_:visited:hover{color:var(--intergalactic-text-link-visited, #8649e1)}}.___SButton_1obfu_gg_ .___SText_1obfu_gg_{border-bottom-width:1px;border-bottom-style:solid;border-color:transparent;transition:border-bottom-color .15s ease-in-out}.___SButton_1obfu_gg_.__keyboardFocused_1obfu_gg_{outline-color:var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));outline-style:solid;outline-width:3px}.___SButton_1obfu_gg_.__disabled_1obfu_gg_{opacity:var(--intergalactic-disabled-opacity, 0.3);cursor:default;pointer-events:none}.___SButton_1obfu_gg_._use_secondary_1obfu_gg_{color:var(--intergalactic-text-hint, #6c6e79)}.___SButton_1obfu_gg_._use_secondary_1obfu_gg_.__active_1obfu_gg_,.___SButton_1obfu_gg_._use_secondary_1obfu_gg_:active{color:var(--intergalactic-text-hint-hover-active, #484a54)}@media (hover:hover){.___SButton_1obfu_gg_._use_secondary_1obfu_gg_:hover{color:var(--intergalactic-text-hint-hover-active, #484a54)}}.___SButton_1obfu_gg_._use_secondary_1obfu_gg_ .___SText_1obfu_gg_{border-bottom-width:1px;border-bottom-style:dashed;border-color:currentColor}.___SAddon_1obfu_gg_,.___SInner_1obfu_gg_{display:inline-flex;justify-content:center;align-items:center}.___SInner_1obfu_gg_{height:100%;width:100%}.___SAddon_1obfu_gg_{vertical-align:middle;pointer-events:none}.___SButton_1obfu_gg_ .___SAddon_1obfu_gg_:not(:only-child):first-child{margin-right:var(--intergalactic-spacing-1x, 4px)}.___SButton_1obfu_gg_ .___SAddon_1obfu_gg_:not(:only-child):last-child{margin-left:var(--intergalactic-spacing-1x, 4px)}.___SButton_1obfu_gg_.__text-color_1obfu_gg_{color:var(--text-color_1obfu)}.___SButton_1obfu_gg_.__text-color_1obfu_gg_.__active_1obfu_gg_,.___SButton_1obfu_gg_.__text-color_1obfu_gg_:active{color:var(--text-color_1obfu);filter:brightness(.8)}@media (hover:hover){.___SButton_1obfu_gg_.__text-color_1obfu_gg_:hover{color:var(--text-color_1obfu);filter:brightness(.8)}}.___SButton_1obfu_gg_._size_100_1obfu_gg_{font-size:var(--intergalactic-fs-100, 12px);line-height:var(--intergalactic-lh-100, 133%)}.___SButton_1obfu_gg_._size_200_1obfu_gg_{font-size:var(--intergalactic-fs-200, 14px);line-height:var(--intergalactic-lh-200, 142%)}.___SButton_1obfu_gg_._size_300_1obfu_gg_{font-size:var(--intergalactic-fs-300, 16px);line-height:var(--intergalactic-lh-300, 150%)}.___SButton_1obfu_gg_._size_400_1obfu_gg_{font-size:var(--intergalactic-fs-400, 20px);line-height:var(--intergalactic-lh-400, 120%)}.___SButton_1obfu_gg_._size_500_1obfu_gg_{font-size:var(--intergalactic-fs-500, 24px);line-height:var(--intergalactic-lh-500, 117%)}.___SButton_1obfu_gg_._size_600_1obfu_gg_{font-size:var(--intergalactic-fs-600, 32px);line-height:var(--intergalactic-lh-600, 125%)}.___SButton_1obfu_gg_._size_700_1obfu_gg_{font-size:var(--intergalactic-fs-700, 36px);line-height:var(--intergalactic-lh-700, 110%)}.___SButton_1obfu_gg_._size_800_1obfu_gg_{font-size:var(--intergalactic-fs-800, 48px);line-height:var(--intergalactic-lh-800, 117%)}@media (prefers-reduced-motion){.___SButton_1obfu_gg_,.___SText_1obfu_gg_{transition:none}}" /*__inner_css_end__*/, "1obfu_gg_") /*__reshadow_css_end__*/, {
|
|
14
|
+
"__SButton": "___SButton_1obfu_gg_",
|
|
15
|
+
"_keyboardFocused": "__keyboardFocused_1obfu_gg_",
|
|
16
|
+
"_disabled": "__disabled_1obfu_gg_",
|
|
17
|
+
"__SInner": "___SInner_1obfu_gg_",
|
|
18
|
+
"__SAddon": "___SAddon_1obfu_gg_",
|
|
19
|
+
"_size_100": "_size_100_1obfu_gg_",
|
|
20
|
+
"_size_200": "_size_200_1obfu_gg_",
|
|
21
|
+
"_size_300": "_size_300_1obfu_gg_",
|
|
22
|
+
"_size_400": "_size_400_1obfu_gg_",
|
|
23
|
+
"_size_500": "_size_500_1obfu_gg_",
|
|
24
|
+
"_size_600": "_size_600_1obfu_gg_",
|
|
25
|
+
"_size_700": "_size_700_1obfu_gg_",
|
|
26
|
+
"_size_800": "_size_800_1obfu_gg_",
|
|
27
|
+
"__SText": "___SText_1obfu_gg_",
|
|
28
|
+
"_active": "__active_1obfu_gg_",
|
|
29
|
+
"_enableVisited": "__enableVisited_1obfu_gg_",
|
|
30
|
+
"_use_secondary": "_use_secondary_1obfu_gg_",
|
|
31
|
+
"_text-color": "__text-color_1obfu_gg_",
|
|
32
|
+
"--text-color": "--text-color_1obfu"
|
|
33
33
|
});
|
|
34
34
|
import keyboardFocusEnhance from '@semcore/utils/lib/enhances/keyboardFocusEnhance';
|
|
35
35
|
import { Box } from '@semcore/flex-box';
|
package/package.json
CHANGED
|
@@ -1,7 +1,7 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@semcore/button",
|
|
3
3
|
"description": "Semrush Button Component",
|
|
4
|
-
"version": "5.39.
|
|
4
|
+
"version": "5.39.3",
|
|
5
5
|
"main": "lib/cjs/index.js",
|
|
6
6
|
"module": "lib/es6/index.js",
|
|
7
7
|
"typings": "lib/types/index.d.ts",
|
|
@@ -17,7 +17,7 @@
|
|
|
17
17
|
"@semcore/flex-box": "5.38.1",
|
|
18
18
|
"@semcore/neighbor-location": "4.36.1",
|
|
19
19
|
"@semcore/spin": "5.38.1",
|
|
20
|
-
"@semcore/tooltip": "6.46.
|
|
20
|
+
"@semcore/tooltip": "6.46.2",
|
|
21
21
|
"@semcore/utils": "4.43.2"
|
|
22
22
|
},
|
|
23
23
|
"peerDependencies": {
|
package/__stories/Button.mdx
DELETED
|
@@ -1,223 +0,0 @@
|
|
|
1
|
-
import {Canvas, Meta, Controls, Markdown, Primary} from '@storybook/blocks';
|
|
2
|
-
|
|
3
|
-
import * as ButtonStories from './Button.stories';
|
|
4
|
-
|
|
5
|
-
<Meta of={ButtonStories} />
|
|
6
|
-
|
|
7
|
-
## Description
|
|
8
|
-
|
|
9
|
-
**Button** is a control component that performs an action on the page. Compared to [Link component](/components/link/link), it's an accent control or call-to-action for performing actions on the page.
|
|
10
|
-
|
|
11
|
-
::: tip
|
|
12
|
-
In some cases, you can use the button as a [Link component](/components/link/link) that leads to another page.
|
|
13
|
-
:::
|
|
14
|
-
|
|
15
|
-
<Primary />
|
|
16
|
-
<Controls />
|
|
17
|
-
|
|
18
|
-
## Component composition
|
|
19
|
-
|
|
20
|
-
|
|
21
|
-
|
|
22
|
-
Component consists of the following:
|
|
23
|
-
|
|
24
|
-
1. `Button.Text`
|
|
25
|
-
2. `Button.Addon`
|
|
26
|
-
|
|
27
|
-
You can add addons before and after the text. As addons you can use:
|
|
28
|
-
|
|
29
|
-
- [Icon](/style/icon/icon)
|
|
30
|
-
- [Counter](/components/counter/counter)
|
|
31
|
-
- [Badge](/components/badge/badge)
|
|
32
|
-
- [Flag](/components/flags/flags)
|
|
33
|
-
|
|
34
|
-
<Canvas of={ButtonStories.Addons} />
|
|
35
|
-
|
|
36
|
-
## Sizes and margins
|
|
37
|
-
|
|
38
|
-
Table: Button sizes and margins
|
|
39
|
-
<Markdown>
|
|
40
|
-
{`
|
|
41
|
-
| Button size (height in px) | Icon size | Margins | Description |
|
|
42
|
-
| -------------------------- | --------- | ---------------------- | ------------------------------------------------------------------------------------------------------------------------ |
|
|
43
|
-
| **M (28px)** | M |  | This is the default size of the button. Use it freely in filters, dropdowns, tables, etc. |
|
|
44
|
-
| **L (40px)** | M |  | Use this size in modal windows for main actions, empty pages and page states that need to focus user on the main action. |
|
|
45
|
-
`}
|
|
46
|
-
</Markdown>
|
|
47
|
-
|
|
48
|
-
<Canvas of={ButtonStories.Sizes} />
|
|
49
|
-
|
|
50
|
-
## Button types and themes
|
|
51
|
-
|
|
52
|
-
### Types
|
|
53
|
-
|
|
54
|
-
Intergalactic Design System has three button types (`use` property in API):
|
|
55
|
-
|
|
56
|
-
- `primary`: Main accent button for filters and basic actions on the page.
|
|
57
|
-
- `secondary`: Default non-accent button for secondary/repetitive actions on the page.
|
|
58
|
-
- `tertiary`: Button type for third-party actions on the page. The tertiary button can be used when there is enough space and a large click area is needed.
|
|
59
|
-
|
|
60
|
-
All button types can be used on a white and gray background, as well as on a transparent colored background.
|
|
61
|
-
|
|
62
|
-
Table: Button types
|
|
63
|
-
|
|
64
|
-
| Button type | Appearance example |
|
|
65
|
-
| ----------- | -------------------------------- |
|
|
66
|
-
| `primary` |  |
|
|
67
|
-
| `secondary` |  |
|
|
68
|
-
| `tertiary` |  |
|
|
69
|
-
|
|
70
|
-
### Themes
|
|
71
|
-
|
|
72
|
-
You can use themes for the buttons according to the visual hierarchy on the page. See the [visual loudness scale](/core-principles/visual-loudness-scale/visual-loudness-scale) guide.
|
|
73
|
-
|
|
74
|
-
Invert theme button is used on dark or colored background. For example in [Tooltip](/components/tooltip/tooltip), [NoticeBubble](/components/notice-bubble/notice-bubble), etc.
|
|
75
|
-
|
|
76
|
-
Table: Button themes
|
|
77
|
-
|
|
78
|
-
| Button type | `muted` | `info` | `success` | `danger` | `invert` |
|
|
79
|
-
| ----------- | ------------------------------- | ----------------------------- | ---------------------------- | --------------------------- | -------------------------------------- |
|
|
80
|
-
| `primary` | _no theme_ |  |  |  |  |
|
|
81
|
-
| `secondary` |  | _deprecated_ | _no theme_ | _no theme_ |  |
|
|
82
|
-
| `tertiary` |  |  | _no theme_ | _no theme_ |  |
|
|
83
|
-
|
|
84
|
-
## Button states
|
|
85
|
-
|
|
86
|
-
Table: States for all buttons types and themes
|
|
87
|
-
|
|
88
|
-
| Button type | Normal | Hover | Active | Loading | Disabled |
|
|
89
|
-
| ----------- | ----------------------------- | ------------------------------- | -------------------------------- | --------------------------------- | ---------------------------------- |
|
|
90
|
-
| `primary` |  |  |  |  |  |
|
|
91
|
-
| `secondary` |  |  |  |  |  |
|
|
92
|
-
| `tertiary` |  |  |  |  |  |
|
|
93
|
-
|
|
94
|
-
## Button with Link styles
|
|
95
|
-
|
|
96
|
-
::: warning
|
|
97
|
-
This component was created to ensure proper accessibility for existing patterns in the interface. Avoid adding buttons with link styles into new interfaces, especially with `use="primary"`. Instead, use either `Button` or `Link` depending on what the element does.
|
|
98
|
-
:::
|
|
99
|
-
|
|
100
|
-
If you need an element that looks like a link, but has the native button semantics, use the separate `ButtonLink` component instead of a link. For example, in the [Feedback](/components/feedback/feedback-form-code) and [ProductHead](/components/product-head/product-head-code) components, use `ButtonLink` as the dialog trigger.
|
|
101
|
-
|
|
102
|
-
Table: Button with Link styles
|
|
103
|
-
|
|
104
|
-
| Button type | Appearance example & states |
|
|
105
|
-
| ----------- | ------------------------------------- |
|
|
106
|
-
| `primary` |  |
|
|
107
|
-
| `secondary` |  |
|
|
108
|
-
|
|
109
|
-
The following table shows in which cases you should use `primary` or `secondary` `ButtonLink`.
|
|
110
|
-
|
|
111
|
-
Table: How to choose what type of ButtonLink you should use
|
|
112
|
-
|
|
113
|
-
| Action on the page | use="primary" | use="secondary" |
|
|
114
|
-
| -------------------------------------- | ----------------------------------- | --------------- |
|
|
115
|
-
| Reloading the page | ✅ | ❌ |
|
|
116
|
-
| Updating data in a small block/widget | ✅ | ❌ |
|
|
117
|
-
| Updating data in a table row | Allowed if it's an important action | ✅ |
|
|
118
|
-
| Opening a modal window | Allowed if it's an important action | ✅ |
|
|
119
|
-
| Opening a dropdown | Allowed if it's an important action | ✅ |
|
|
120
|
-
| Opening an accordion | Allowed if it's an important action | ✅ |
|
|
121
|
-
| Opening the full text on the same page | ❌ | ✅ |
|
|
122
|
-
| `DescriptionTooltip` on click | ❌ | ✅ |
|
|
123
|
-
|
|
124
|
-
## Button width
|
|
125
|
-
|
|
126
|
-
The button width is determined by its content. But it can also be stretched to a certain width. For example:
|
|
127
|
-
|
|
128
|
-
```
|
|
129
|
-
w="100%"
|
|
130
|
-
```
|
|
131
|
-
|
|
132
|
-
It's necessary when the button text is short, but the button is a CTA on the page or in a modal window, or it performs an important action. Also, in terms of visual hierarchy, it isn’t good to make the button small-sized in such cases.
|
|
133
|
-
|
|
134
|
-
|
|
135
|
-
|
|
136
|
-
It's important that the CTA is always visually more significant than the secondary button due to its color and size. So don't hesitate to make button wider if necessary.
|
|
137
|
-
|
|
138
|
-
|
|
139
|
-
|
|
140
|
-
If you need to use a single button we recommend you to set it's width to at least 120px.
|
|
141
|
-
|
|
142
|
-
|
|
143
|
-
|
|
144
|
-
## Margins between buttons
|
|
145
|
-
|
|
146
|
-
**The margin between buttons shall be [multiple of 4](/layout/box-system/box-system#spacing_system)**. If there are several buttons next to each other, use the recommended margins shown in table below.
|
|
147
|
-
|
|
148
|
-
Table: Margins between buttons
|
|
149
|
-
|
|
150
|
-
| L (40px) | M (28px) |
|
|
151
|
-
| ------------------------ | ------------------------ |
|
|
152
|
-
|  |  |
|
|
153
|
-
|
|
154
|
-
## Usage in UX/UI
|
|
155
|
-
|
|
156
|
-
- Try to have one call-to-action button on the page in the modal window. _For example, one green button._
|
|
157
|
-
- We recommend you don’t disable CTA, even if something went wrong (especially in filters and modal windows with a single CTA). User needs to understand that the product/service is working. When user clicks on the button, add a message about the error or what user needs to do in this case.
|
|
158
|
-
- If you can't do without a button in the disabled state, be sure to include a tooltip for it explaining why the primary action is disabled.
|
|
159
|
-
- If there are a lot of actions in your interface, first of all set your priorities. Place controls in your interface according to the [visual loudness scale](/core-principles/visual-loudness-scale/visual-loudness-scale) guide. Use inactive "quiet" buttons in the interface. Don't "shout" at the user with your interface, let them work with your product in visual "silence" and comfort.
|
|
160
|
-
|
|
161
|
-
## Button variations
|
|
162
|
-
|
|
163
|
-
### Text button
|
|
164
|
-
|
|
165
|
-
Use text button when:
|
|
166
|
-
|
|
167
|
-
- the button is a CTA;
|
|
168
|
-
- the interface has enough space for buttons.
|
|
169
|
-
|
|
170
|
-
We recommend using a button with an icon and text in cases when:
|
|
171
|
-
|
|
172
|
-
- the button is a CTA, and it needs an additional visual accent (icon);
|
|
173
|
-
- the interface has enough space for buttons;
|
|
174
|
-
- user isn’t yet familiar with the functionality of the button, and icon or only text may not be enough for them to understand.
|
|
175
|
-
|
|
176
|
-
### Icon-only button
|
|
177
|
-
|
|
178
|
-
We recommend using the icon-only button if:
|
|
179
|
-
|
|
180
|
-
- interface hasn’t enough space;
|
|
181
|
-
- user can easily understand from the context its function (purpose) / user understands the functionality of the button without an explanation.
|
|
182
|
-
|
|
183
|
-
::: tip
|
|
184
|
-
**Add a tooltip with information about button's function to the icon-only buttons**. It helps user to understand functionality of the button if the icon isn’t the obvious one.
|
|
185
|
-
:::
|
|
186
|
-
|
|
187
|
-
## Button label
|
|
188
|
-
|
|
189
|
-
Button label always starts with a capital letter.
|
|
190
|
-
|
|
191
|
-
|
|
192
|
-
|
|
193
|
-
**Button label shall not exceed three words.** Too wordy controls are difficult to read. Try to fit the desired meaning into the short label.
|
|
194
|
-
|
|
195
|
-
|
|
196
|
-
|
|
197
|
-
The label of the button should clearly indicate what happens after user clicks it.
|
|
198
|
-
|
|
199
|
-
|
|
200
|
-
|
|
201
|
-
## Branded buttons
|
|
202
|
-
|
|
203
|
-
In case when you need to show that button connects or links to some other service, use a branded color for the background or the corresponding color icon of the service.
|
|
204
|
-
|
|
205
|
-
- You can color the button in a branded color when you need to focus user's attention.
|
|
206
|
-
- You can use secondary button with the branded icon inside. This is the safest option in relation to saving the visual hierarchy of the product.
|
|
207
|
-
|
|
208
|
-
|
|
209
|
-
|
|
210
|
-
It may also be helpful checking the following branding guidelines:
|
|
211
|
-
|
|
212
|
-
- Google – [Sign-In Branding Guidelines](https://developers.google.com/identity/branding-guidelines?hl=ru)
|
|
213
|
-
- Facebook – [User Experience Design](https://developers.facebook.com/docs/facebook-login/userexperience) and [Brand Overview](https://about.meta.com/brand/resources/facebookapp/guidelines/)
|
|
214
|
-
- Instagram – [Brand Overview](https://about.meta.com/brand/resources/instagram/instagram-brand/)
|
|
215
|
-
- LinkedIn – [LinkedIn branding policies](https://brand.linkedin.com/policies)
|
|
216
|
-
- Twitter – [Brand Guidelines](https://about.twitter.com/en/who-we-are/brand-toolkit)
|
|
217
|
-
- Youtube – [Branding Guidelines](https://developers.google.com/youtube/terms/branding-guidelines) and [Brand resources](https://www.youtube.com/howyoutubeworks/resources/brand-resources/#overview)
|
|
218
|
-
- Pinterest – [How to use the Pinterest brand in your marketing](https://business.pinterest.com/en-us/brand-guidelines/)
|
|
219
|
-
|
|
220
|
-
## Grouped buttons
|
|
221
|
-
|
|
222
|
-
To combine the components such as Button, [Input](/components/input/input), and [Select](/components/select/select), use the [`neighborLocation`](/components/button/button-api) property.
|
|
223
|
-
|
|
@@ -1,129 +0,0 @@
|
|
|
1
|
-
import React from 'react';
|
|
2
|
-
import type { Meta, StoryObj } from '@storybook/react';
|
|
3
|
-
import { fn } from '@storybook/test';
|
|
4
|
-
|
|
5
|
-
import Badge from '@semcore/badge';
|
|
6
|
-
import CheckM from '@semcore/icon/Check/m';
|
|
7
|
-
import Button from '@semcore/button';
|
|
8
|
-
import { ButtonLink } from '@semcore/button';
|
|
9
|
-
import { Flex } from '@semcore/flex-box';
|
|
10
|
-
import CheckL from '@semcore/icon/Check/l';
|
|
11
|
-
import CloseM from '@semcore/icon/Close/m';
|
|
12
|
-
import Spin from '@semcore/spin';
|
|
13
|
-
|
|
14
|
-
const meta: Meta<typeof Button> = {
|
|
15
|
-
title: 'Components/Button',
|
|
16
|
-
component: Button,
|
|
17
|
-
};
|
|
18
|
-
|
|
19
|
-
export default meta;
|
|
20
|
-
type Story = StoryObj<typeof Button>;
|
|
21
|
-
|
|
22
|
-
export const SimpleButton: Story = {
|
|
23
|
-
args: {
|
|
24
|
-
children: 'Button',
|
|
25
|
-
onClick: fn(),
|
|
26
|
-
},
|
|
27
|
-
};
|
|
28
|
-
|
|
29
|
-
export const Addons: Story = {
|
|
30
|
-
render: () => {
|
|
31
|
-
return (
|
|
32
|
-
<>
|
|
33
|
-
<Button addonLeft={CheckM} use={'secondary'}>
|
|
34
|
-
Some button text
|
|
35
|
-
</Button>
|
|
36
|
-
<Button ml={2} use={'secondary'}>
|
|
37
|
-
<Button.Text>Some button text</Button.Text>
|
|
38
|
-
<Button.Addon>
|
|
39
|
-
<Badge bg='--intergalactic-control-primary-success'>new</Badge>
|
|
40
|
-
</Button.Addon>
|
|
41
|
-
</Button>
|
|
42
|
-
</>
|
|
43
|
-
);
|
|
44
|
-
},
|
|
45
|
-
};
|
|
46
|
-
|
|
47
|
-
export const Sizes: Story = {
|
|
48
|
-
render: () => {
|
|
49
|
-
return (
|
|
50
|
-
<>
|
|
51
|
-
<Button size={'m'}>Medium</Button>
|
|
52
|
-
<Button size={'l'} ml={2}>
|
|
53
|
-
Large
|
|
54
|
-
</Button>
|
|
55
|
-
</>
|
|
56
|
-
);
|
|
57
|
-
},
|
|
58
|
-
};
|
|
59
|
-
|
|
60
|
-
export const IconOnlyButton: Story = {
|
|
61
|
-
render: () => {
|
|
62
|
-
return (
|
|
63
|
-
<>
|
|
64
|
-
<Button title='Confirm'>
|
|
65
|
-
<Button.Addon>
|
|
66
|
-
<CheckM />
|
|
67
|
-
</Button.Addon>
|
|
68
|
-
</Button>
|
|
69
|
-
</>
|
|
70
|
-
);
|
|
71
|
-
},
|
|
72
|
-
};
|
|
73
|
-
|
|
74
|
-
export const ButtonLikeALink: Story = {
|
|
75
|
-
render: () => {
|
|
76
|
-
return (
|
|
77
|
-
<>
|
|
78
|
-
<Flex direction={'column'} gap={6} alignItems={'flex-start'}>
|
|
79
|
-
<ButtonLink addonLeft={CheckM}>Primary ButtonLink</ButtonLink>
|
|
80
|
-
<ButtonLink addonLeft={CheckM} color={'text-primary'}>
|
|
81
|
-
Colored primary ButtonLink
|
|
82
|
-
</ButtonLink>
|
|
83
|
-
<ButtonLink addonRight={CloseM} color={'text-critical'}>
|
|
84
|
-
Colored primary ButtonLink
|
|
85
|
-
</ButtonLink>
|
|
86
|
-
<ButtonLink use={'secondary'}>
|
|
87
|
-
<ButtonLink.Addon>
|
|
88
|
-
<CheckM />
|
|
89
|
-
</ButtonLink.Addon>
|
|
90
|
-
<ButtonLink.Text>Secondary ButtonLink</ButtonLink.Text>
|
|
91
|
-
</ButtonLink>
|
|
92
|
-
|
|
93
|
-
<ButtonLink addonLeft={CheckM} aria-label={'Icon-only button'} />
|
|
94
|
-
|
|
95
|
-
<ButtonLink addonLeft={CheckL} size={500}>
|
|
96
|
-
ButtonLink with other text size
|
|
97
|
-
</ButtonLink>
|
|
98
|
-
</Flex>
|
|
99
|
-
</>
|
|
100
|
-
);
|
|
101
|
-
},
|
|
102
|
-
};
|
|
103
|
-
|
|
104
|
-
export const ButtonWithNoVisibleText: Story = {
|
|
105
|
-
render: () => {
|
|
106
|
-
return (
|
|
107
|
-
<>
|
|
108
|
-
<Button addonLeft={CheckM} aria-label='Confirm action' mr={2} />
|
|
109
|
-
<Button addonLeft={CloseM} aria-label='Close notification' />
|
|
110
|
-
</>
|
|
111
|
-
);
|
|
112
|
-
},
|
|
113
|
-
};
|
|
114
|
-
|
|
115
|
-
export const ButtonWithLoadingState: Story = {
|
|
116
|
-
render: () => {
|
|
117
|
-
return (
|
|
118
|
-
<>
|
|
119
|
-
<Button loading>Loading</Button>{' '}
|
|
120
|
-
<Button disabled>
|
|
121
|
-
<Button.Addon>
|
|
122
|
-
<Spin size='xs' />
|
|
123
|
-
</Button.Addon>
|
|
124
|
-
<Button.Text>Loading</Button.Text>
|
|
125
|
-
</Button>
|
|
126
|
-
</>
|
|
127
|
-
);
|
|
128
|
-
},
|
|
129
|
-
};
|