@semcore/button 5.43.1 → 5.43.2-prerelease.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.
@@ -0,0 +1,168 @@
1
+ SButton {
2
+ display: inline-flex;
3
+ font-family: inherit;
4
+ font-size: var(--intergalactic-fs-200, 14px);
5
+ color: var(--intergalactic-text-link, #006dca);
6
+ line-height: normal;
7
+ position: relative;
8
+ cursor: pointer;
9
+ text-decoration: none;
10
+ border: none;
11
+ padding: 0;
12
+ margin: 0;
13
+ box-shadow: none;
14
+ -webkit-tap-highlight-color: transparent;
15
+ outline: 0;
16
+ background: none;
17
+ transition: color 0.15s ease-in-out;
18
+
19
+ &:active,
20
+ &:hover,
21
+ &:focus {
22
+ outline: 0;
23
+ text-decoration: none;
24
+ }
25
+
26
+ &::-moz-focus-inner {
27
+ border: none;
28
+ padding: 0;
29
+ }
30
+
31
+ &[active],
32
+ &:hover,
33
+ &:active {
34
+ color: var(--intergalactic-text-link-hover-active, #044792);
35
+
36
+ & SText {
37
+ border-color: currentColor;
38
+ }
39
+ }
40
+
41
+ &[enableVisited]:visited,
42
+ &[enableVisited]:visited:hover {
43
+ color: var(--intergalactic-text-link-visited, #8649e1);
44
+ }
45
+
46
+ SText {
47
+ border-bottom-width: 1px;
48
+ border-bottom-style: solid;
49
+ border-color: transparent;
50
+ transition: border-bottom-color 0.15s ease-in-out;
51
+ }
52
+ }
53
+
54
+ SButton[keyboardFocused] {
55
+ outline-color: var(--intergalactic-keyboard-focus-outline, rgba(0, 143, 248, 0.5));
56
+ outline-style: solid;
57
+ outline-width: 3px;
58
+ }
59
+
60
+ SButton[disabled] {
61
+ opacity: var(--intergalactic-disabled-opacity, 0.3);
62
+ cursor: default;
63
+ /* Disable link interactions */
64
+ pointer-events: none;
65
+ }
66
+
67
+ SButton[use='secondary'] {
68
+ color: var(--intergalactic-text-hint, #6c6e79);
69
+
70
+ &[active],
71
+ &:active,
72
+ &:hover {
73
+ color: var(--intergalactic-text-hint-hover-active, #484a54);
74
+ }
75
+
76
+ SText {
77
+ border-bottom-width: 1px;
78
+ border-bottom-style: dashed;
79
+ border-color: currentColor;
80
+ }
81
+ }
82
+
83
+ SInner {
84
+ display: inline-flex;
85
+ align-items: center;
86
+ justify-content: center;
87
+ height: 100%;
88
+ width: 100%;
89
+ }
90
+
91
+ SAddon {
92
+ display: inline-flex;
93
+ justify-content: center;
94
+ align-items: center;
95
+ vertical-align: middle;
96
+ pointer-events: none;
97
+ }
98
+
99
+ SButton SAddon {
100
+ &:not(:only-child):first-child {
101
+ margin-right: var(--intergalactic-spacing-1x, 4px);
102
+ }
103
+
104
+ &:not(:only-child):last-child {
105
+ margin-left: var(--intergalactic-spacing-1x, 4px);
106
+ }
107
+ }
108
+
109
+ SButton[text-color] {
110
+ color: var(--text-color);
111
+
112
+ &[active],
113
+ &:hover,
114
+ &:active {
115
+ color: var(--text-color);
116
+ filter: brightness(0.8);
117
+ }
118
+ }
119
+
120
+ SButton[size='100'] {
121
+ font-size: var(--intergalactic-fs-100, 12px);
122
+ line-height: var(--intergalactic-lh-100, 133%);
123
+ }
124
+
125
+ SButton[size='200'] {
126
+ font-size: var(--intergalactic-fs-200, 14px);
127
+ line-height: var(--intergalactic-lh-200, 142%);
128
+ }
129
+
130
+ SButton[size='300'] {
131
+ font-size: var(--intergalactic-fs-300, 16px);
132
+ line-height: var(--intergalactic-lh-300, 150%);
133
+ }
134
+
135
+ SButton[size='400'] {
136
+ font-size: var(--intergalactic-fs-400, 20px);
137
+ line-height: var(--intergalactic-lh-400, 120%);
138
+ }
139
+
140
+ SButton[size='500'] {
141
+ font-size: var(--intergalactic-fs-500, 24px);
142
+ line-height: var(--intergalactic-lh-500, 117%);
143
+ }
144
+
145
+ SButton[size='600'] {
146
+ font-size: var(--intergalactic-fs-600, 32px);
147
+ line-height: var(--intergalactic-lh-600, 125%);
148
+ }
149
+
150
+ SButton[size='700'] {
151
+ font-size: var(--intergalactic-fs-700, 36px);
152
+ line-height: var(--intergalactic-lh-700, 110%);
153
+ }
154
+
155
+ SButton[size='800'] {
156
+ font-size: var(--intergalactic-fs-800, 48px);
157
+ line-height: var(--intergalactic-lh-800, 117%);
158
+ }
159
+
160
+ @media (prefers-reduced-motion) {
161
+ SButton {
162
+ transition: none;
163
+ }
164
+
165
+ SText {
166
+ transition: none;
167
+ }
168
+ }
package/lib/esm/index.mjs CHANGED
@@ -1,8 +1,8 @@
1
- import { default as t } from "./component/Button/Button.mjs";
2
- import { ButtonLink as f } from "./component/ButtonLink/ButtonLink.mjs";
3
- import { MAP_USE_DEFAULT_THEME as m } from "./component/AbstractButton/AbstractButton.mjs";
1
+ import { default as default2 } from "./component/Button/Button.mjs";
2
+ import { ButtonLink } from "./component/ButtonLink/ButtonLink.mjs";
3
+ import { MAP_USE_DEFAULT_THEME } from "./component/AbstractButton/AbstractButton.mjs";
4
4
  export {
5
- f as ButtonLink,
6
- m as MAP_USE_DEFAULT_THEME,
7
- t as default
5
+ ButtonLink,
6
+ MAP_USE_DEFAULT_THEME,
7
+ default2 as default
8
8
  };
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@semcore/button",
3
3
  "description": "Semrush Button Component",
4
- "version": "5.43.1",
4
+ "version": "5.43.2-prerelease.0",
5
5
  "main": "lib/cjs/index.js",
6
6
  "module": "lib/es6/index.js",
7
7
  "typings": "lib/types/index.d.ts",
@@ -14,14 +14,14 @@
14
14
  "types": "./lib/types/index.d.ts"
15
15
  },
16
16
  "dependencies": {
17
- "@semcore/flex-box": "5.41.2",
18
- "@semcore/neighbor-location": "4.40.2",
19
- "@semcore/spin": "5.41.2",
20
- "@semcore/tooltip": "6.49.2",
21
- "@semcore/utils": "4.48.2"
17
+ "@semcore/flex-box": "5.41.3-prerelease.0",
18
+ "@semcore/neighbor-location": "4.40.3-prerelease.0",
19
+ "@semcore/spin": "5.41.3-prerelease.0",
20
+ "@semcore/tooltip": "6.49.3-prerelease.0",
21
+ "@semcore/utils": "4.48.4-prerelease.0"
22
22
  },
23
23
  "peerDependencies": {
24
- "@semcore/core": "^2.17.5",
24
+ "@semcore/core": "^2.39.3-prerelease.0",
25
25
  "react": "16.8 - 18",
26
26
  "react-dom": "16.8 - 18"
27
27
  },