@woosmap/ui 2.56.0 → 3.2.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/.storybook/preview.js +2 -2
- package/package.json +2 -2
- package/src/components/Demo/SkeletonDemo.js +17 -87
- package/src/components/Dropdown/Dropdown.js +9 -7
- package/src/components/Map/drawOnMap.js +46 -40
- package/src/styles/next-website/button.styl +343 -0
- package/src/styles/next-website/colors.styl +279 -0
- package/src/styles/next-website/demo.styl +65 -0
- package/src/styles/next-website/dropdown.styl +82 -0
- package/src/styles/next-website/font.styl +1 -0
- package/src/styles/next-website/input.styl +136 -0
- package/src/styles/next-website/mixins.styl +126 -0
- package/src/styles/next-website/select.styl +111 -0
- package/src/styles/next-website/tab.styl +41 -0
- package/src/styles/next-website/variables.styl +110 -0
- package/src/styles/style-next-website.styl +12 -12
package/.storybook/preview.js
CHANGED
|
@@ -36,12 +36,12 @@ let isConsoleStyle = false;
|
|
|
36
36
|
|
|
37
37
|
|
|
38
38
|
if (mode === 'prod') {
|
|
39
|
-
import('../src/styles/style-website.styl');
|
|
39
|
+
import('../src/styles/style-next-website.styl');
|
|
40
40
|
import('../src/styles/style-stories.styl');
|
|
41
41
|
} else {
|
|
42
42
|
import('../src/styles/style-stories.styl').then((storiesStyl) => {
|
|
43
43
|
import('../src/styles/style-console.styl').then((consoleStylLoaded) => {
|
|
44
|
-
import('../src/styles/style-website.styl').then((websiteStylLoaded) => {
|
|
44
|
+
import('../src/styles/style-next-website.styl').then((websiteStylLoaded) => {
|
|
45
45
|
const storeGlobals = sessionStorage.getItem('@storybook/preview/store');
|
|
46
46
|
const globalTheme = storeGlobals ? JSON.parse(storeGlobals).globals.theme : null;
|
|
47
47
|
const defaultStyle = urlParams.get('theme')|| globalTheme || "Website theme";
|
package/package.json
CHANGED
|
@@ -1,6 +1,6 @@
|
|
|
1
1
|
{
|
|
2
2
|
"name": "@woosmap/ui",
|
|
3
|
-
"version": "2.
|
|
3
|
+
"version": "3.2.0",
|
|
4
4
|
"repository": {
|
|
5
5
|
"type": "git",
|
|
6
6
|
"url": "git+https://github.com/WebGeoServices/ui.git"
|
|
@@ -28,7 +28,7 @@
|
|
|
28
28
|
"scripts": {
|
|
29
29
|
"start": "yarn storybook:dev",
|
|
30
30
|
"build": "rimraf dist && NODE_ENV=production babel src --out-dir dist --copy-files --no-copy-ignored --ignore '**/*.stories.js,**/*.test.js,**/*.styl' && yarn build-css",
|
|
31
|
-
"build-css": "stylus ./src/styles/style-website.styl -o dist && stylus ./src/styles/style-console.styl -o dist && stylus ./src/styles/style-stories.styl -o dist",
|
|
31
|
+
"build-css": "stylus ./src/styles/style-next-website.styl -o dist && stylus ./src/styles/style-console.styl -o dist && stylus ./src/styles/style-stories.styl -o dist",
|
|
32
32
|
"test": "react-scripts test",
|
|
33
33
|
"test:generate-output": "react-scripts test --json --outputFile=./.storybook/jest-test-results.json --silent",
|
|
34
34
|
"prestorybook:dev": "clear && echo \"DOING FIRST TEST RUN\" && CI=true npm run test:generate-output",
|
|
@@ -160,78 +160,26 @@ export default class SkeletonDemo extends Component {
|
|
|
160
160
|
};
|
|
161
161
|
|
|
162
162
|
render() {
|
|
163
|
-
const {
|
|
164
|
-
noheader,
|
|
165
|
-
header,
|
|
166
|
-
id,
|
|
167
|
-
result,
|
|
168
|
-
withMap,
|
|
169
|
-
request,
|
|
170
|
-
response,
|
|
171
|
-
className,
|
|
172
|
-
leftContent,
|
|
173
|
-
docLink,
|
|
174
|
-
docLabel,
|
|
175
|
-
renderCode,
|
|
176
|
-
subHeader,
|
|
177
|
-
} = this.props;
|
|
163
|
+
const { result, request, response, renderCode } = this.props;
|
|
178
164
|
const { copied } = this.state;
|
|
179
165
|
return (
|
|
180
|
-
<
|
|
181
|
-
<div className="
|
|
182
|
-
|
|
183
|
-
<div className="
|
|
184
|
-
|
|
185
|
-
|
|
186
|
-
|
|
187
|
-
|
|
188
|
-
|
|
189
|
-
<a
|
|
190
|
-
rel="noreferrer"
|
|
191
|
-
href={docLink || tr('http://developers.woosmap.com')}
|
|
192
|
-
target="_blank"
|
|
193
|
-
onClick={() => {
|
|
194
|
-
const { trackEvent } = this.context;
|
|
195
|
-
if (trackEvent) {
|
|
196
|
-
trackEvent(
|
|
197
|
-
'Showcase',
|
|
198
|
-
"Developer's Documentation",
|
|
199
|
-
`User went to the ${header.title} documentation`
|
|
200
|
-
);
|
|
201
|
-
}
|
|
202
|
-
}}
|
|
203
|
-
>
|
|
204
|
-
{docLabel || tr('Go to documentation')}
|
|
205
|
-
</a>
|
|
206
|
-
</p>
|
|
207
|
-
<div className="demo__desc">{subHeader}</div>
|
|
166
|
+
<article className="demo">
|
|
167
|
+
<div className="demo__content">
|
|
168
|
+
<div className="demo__showcase">
|
|
169
|
+
<div className="demo__filters">
|
|
170
|
+
{this.renderHeaderFilters()}
|
|
171
|
+
{this.renderFooterFilters()}
|
|
172
|
+
</div>
|
|
173
|
+
<div className="demo__map">
|
|
174
|
+
<div className="map" ref={this.mapDivRef} />
|
|
208
175
|
</div>
|
|
209
|
-
)}
|
|
210
|
-
</div>
|
|
211
|
-
<div className="demo__content-wrapper">
|
|
212
|
-
<div className="demo__content-header">
|
|
213
|
-
{this.renderHeaderTagline()}
|
|
214
|
-
{this.renderHeaderFilters()}
|
|
215
176
|
</div>
|
|
216
|
-
|
|
217
|
-
|
|
218
|
-
|
|
219
|
-
|
|
220
|
-
|
|
221
|
-
|
|
222
|
-
<div className="demo__results__content">{result}</div>
|
|
223
|
-
</div>
|
|
224
|
-
) : null}
|
|
225
|
-
{withMap ? (
|
|
226
|
-
<div
|
|
227
|
-
className={cl('demo__map', {
|
|
228
|
-
'demo__map--small': result,
|
|
229
|
-
})}
|
|
230
|
-
>
|
|
231
|
-
<div className="map" ref={this.mapDivRef} />
|
|
232
|
-
</div>
|
|
233
|
-
) : null}
|
|
234
|
-
<div className="demo__api">
|
|
177
|
+
<div className="demo__data">
|
|
178
|
+
<div className="demo__results">
|
|
179
|
+
<div className="demo__results__header">{tr('Results')}</div>
|
|
180
|
+
<div className="demo__results__content">{result}</div>
|
|
181
|
+
</div>
|
|
182
|
+
<div className="demo__code">
|
|
235
183
|
<Tab
|
|
236
184
|
actions={[
|
|
237
185
|
{
|
|
@@ -271,7 +219,7 @@ export default class SkeletonDemo extends Component {
|
|
|
271
219
|
</div>
|
|
272
220
|
</div>
|
|
273
221
|
</div>
|
|
274
|
-
</
|
|
222
|
+
</article>
|
|
275
223
|
);
|
|
276
224
|
}
|
|
277
225
|
}
|
|
@@ -279,46 +227,28 @@ export default class SkeletonDemo extends Component {
|
|
|
279
227
|
SkeletonDemo.contextType = TrackEventContext;
|
|
280
228
|
|
|
281
229
|
SkeletonDemo.defaultProps = {
|
|
282
|
-
id: '',
|
|
283
|
-
docLink: null,
|
|
284
|
-
docLabel: null,
|
|
285
230
|
renderCode: null,
|
|
286
231
|
headerFilters: null,
|
|
287
232
|
headerTagline: null,
|
|
288
233
|
footerFilters: null,
|
|
289
|
-
leftContent: null,
|
|
290
|
-
className: '',
|
|
291
234
|
result: null,
|
|
292
|
-
withMap: false,
|
|
293
235
|
request: null,
|
|
294
236
|
response: {},
|
|
295
237
|
params: {},
|
|
296
|
-
noheader: false,
|
|
297
238
|
referer: '',
|
|
298
239
|
body: '',
|
|
299
240
|
method: '',
|
|
300
|
-
header: null,
|
|
301
|
-
subHeader: null,
|
|
302
241
|
};
|
|
303
242
|
SkeletonDemo.propTypes = {
|
|
304
|
-
id: PropTypes.string,
|
|
305
|
-
docLink: PropTypes.string,
|
|
306
243
|
renderCode: PropTypes.func,
|
|
307
|
-
docLabel: PropTypes.string,
|
|
308
244
|
params: PropTypes.object,
|
|
309
|
-
noheader: PropTypes.bool,
|
|
310
|
-
header: PropTypes.object,
|
|
311
245
|
headerTagline: PropTypes.oneOfType([PropTypes.string, PropTypes.node]),
|
|
312
|
-
className: PropTypes.string,
|
|
313
246
|
headerFilters: PropTypes.array,
|
|
314
247
|
footerFilters: PropTypes.array,
|
|
315
248
|
result: PropTypes.node,
|
|
316
|
-
withMap: PropTypes.bool,
|
|
317
|
-
leftContent: PropTypes.node,
|
|
318
249
|
request: PropTypes.string,
|
|
319
250
|
referer: PropTypes.string,
|
|
320
251
|
body: PropTypes.string,
|
|
321
252
|
method: PropTypes.string,
|
|
322
|
-
subHeader: PropTypes.object,
|
|
323
253
|
response: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
|
324
254
|
};
|
|
@@ -49,13 +49,15 @@ class DropdownMenu extends Component {
|
|
|
49
49
|
const childrenWithProps = mapChildrenWithProps(children, this.childrenRefs, closeCb);
|
|
50
50
|
if (isSection) {
|
|
51
51
|
return (
|
|
52
|
-
<div
|
|
53
|
-
|
|
54
|
-
|
|
55
|
-
|
|
56
|
-
|
|
57
|
-
|
|
58
|
-
|
|
52
|
+
<div className="dropdown__container">
|
|
53
|
+
<div
|
|
54
|
+
role="menu"
|
|
55
|
+
className={cl('dropdown__menu', direction, 'dropdown__menu--section')}
|
|
56
|
+
data-testid={testId}
|
|
57
|
+
{...rest}
|
|
58
|
+
>
|
|
59
|
+
{childrenWithProps}
|
|
60
|
+
</div>
|
|
59
61
|
</div>
|
|
60
62
|
);
|
|
61
63
|
}
|
|
@@ -84,46 +84,52 @@ export const woosmapBoundsFromViewport = function woosmapBoundsFromViewport(view
|
|
|
84
84
|
);
|
|
85
85
|
};
|
|
86
86
|
|
|
87
|
-
export const createWoosmapMap = (node) =>
|
|
88
|
-
|
|
89
|
-
|
|
90
|
-
|
|
91
|
-
|
|
92
|
-
|
|
93
|
-
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
|
|
97
|
-
|
|
98
|
-
|
|
99
|
-
|
|
100
|
-
|
|
101
|
-
|
|
102
|
-
|
|
103
|
-
|
|
104
|
-
|
|
105
|
-
|
|
106
|
-
|
|
107
|
-
|
|
108
|
-
|
|
109
|
-
|
|
110
|
-
|
|
111
|
-
|
|
112
|
-
|
|
113
|
-
|
|
114
|
-
|
|
115
|
-
|
|
116
|
-
|
|
117
|
-
|
|
118
|
-
|
|
119
|
-
|
|
120
|
-
|
|
121
|
-
|
|
122
|
-
|
|
123
|
-
|
|
124
|
-
|
|
125
|
-
|
|
126
|
-
|
|
87
|
+
export const createWoosmapMap = (node) => {
|
|
88
|
+
try {
|
|
89
|
+
return new window.woosmap.map.Map(node, {
|
|
90
|
+
styles: [
|
|
91
|
+
{
|
|
92
|
+
featureType: 'administrative',
|
|
93
|
+
elementType: 'all',
|
|
94
|
+
stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 20 }],
|
|
95
|
+
},
|
|
96
|
+
{
|
|
97
|
+
featureType: 'road',
|
|
98
|
+
elementType: 'all',
|
|
99
|
+
stylers: [{ visibility: 'on' }, { saturation: -100 }, { lightness: 40 }],
|
|
100
|
+
},
|
|
101
|
+
{
|
|
102
|
+
featureType: 'water',
|
|
103
|
+
elementType: 'all',
|
|
104
|
+
stylers: [{ visibility: 'on' }, { saturation: -10 }, { lightness: 30 }],
|
|
105
|
+
},
|
|
106
|
+
{
|
|
107
|
+
featureType: 'landscape.man_made',
|
|
108
|
+
elementType: 'all',
|
|
109
|
+
stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 10 }],
|
|
110
|
+
},
|
|
111
|
+
{
|
|
112
|
+
featureType: 'landscape.natural',
|
|
113
|
+
elementType: 'all',
|
|
114
|
+
stylers: [{ visibility: 'simplified' }, { saturation: -60 }, { lightness: 60 }],
|
|
115
|
+
},
|
|
116
|
+
{
|
|
117
|
+
featureType: 'poi',
|
|
118
|
+
elementType: 'all',
|
|
119
|
+
stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
|
|
120
|
+
},
|
|
121
|
+
{
|
|
122
|
+
featureType: 'transit',
|
|
123
|
+
elementType: 'all',
|
|
124
|
+
stylers: [{ visibility: 'off' }, { saturation: -100 }, { lightness: 60 }],
|
|
125
|
+
},
|
|
126
|
+
],
|
|
127
|
+
});
|
|
128
|
+
} catch (e) {
|
|
129
|
+
console.error(e);
|
|
130
|
+
return null;
|
|
131
|
+
}
|
|
132
|
+
};
|
|
127
133
|
export class WoosmapMapBoundingBox {
|
|
128
134
|
constructor(bounds, padding) {
|
|
129
135
|
this.overlayView = new window.woosmap.map.OverlayView();
|
|
@@ -0,0 +1,343 @@
|
|
|
1
|
+
.btn
|
|
2
|
+
cursor pointer
|
|
3
|
+
text-decoration none
|
|
4
|
+
.icon
|
|
5
|
+
flex-shrink 0
|
|
6
|
+
&.active
|
|
7
|
+
cursor default
|
|
8
|
+
&:disabled
|
|
9
|
+
&:not(.btn--group)
|
|
10
|
+
cursor default
|
|
11
|
+
opacity .3
|
|
12
|
+
box-shadow none
|
|
13
|
+
&:hover
|
|
14
|
+
opacity .3
|
|
15
|
+
&--icon
|
|
16
|
+
&:not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--group):not(.btn--sidebar-link)
|
|
17
|
+
sq()
|
|
18
|
+
btn()
|
|
19
|
+
justify-content center
|
|
20
|
+
padding 0
|
|
21
|
+
&.btn--loading
|
|
22
|
+
padding 0
|
|
23
|
+
.icon
|
|
24
|
+
sq(2.4)
|
|
25
|
+
&.btn--small
|
|
26
|
+
buttonSmall()
|
|
27
|
+
width $buttonHeightSmall
|
|
28
|
+
&.btn--mini
|
|
29
|
+
buttonMini()
|
|
30
|
+
width $buttonHeightMini
|
|
31
|
+
&.btn--large
|
|
32
|
+
buttonLarge()
|
|
33
|
+
width $buttonHeightLarge
|
|
34
|
+
&.btn--primary
|
|
35
|
+
&:disabled
|
|
36
|
+
&:hover
|
|
37
|
+
background-color $primary
|
|
38
|
+
.icon
|
|
39
|
+
fill $light
|
|
40
|
+
&.btn--loading
|
|
41
|
+
&:hover
|
|
42
|
+
background-color $primary
|
|
43
|
+
&.btn--secondary
|
|
44
|
+
&:disabled
|
|
45
|
+
&:hover
|
|
46
|
+
background-color transparent
|
|
47
|
+
border-color $inputBorderColor
|
|
48
|
+
.icon
|
|
49
|
+
fill $secondary
|
|
50
|
+
&.btn--important
|
|
51
|
+
&:disabled
|
|
52
|
+
&:hover
|
|
53
|
+
background-color $error
|
|
54
|
+
.icon
|
|
55
|
+
fill $light
|
|
56
|
+
&.btn--has-icon
|
|
57
|
+
&:not(.btn--small):not(.btn--large)
|
|
58
|
+
mbi(.4)
|
|
59
|
+
&.btn--icon
|
|
60
|
+
flex-shrink 0
|
|
61
|
+
.icon
|
|
62
|
+
flex-shrink 0
|
|
63
|
+
&--primary
|
|
64
|
+
&--important
|
|
65
|
+
btn()
|
|
66
|
+
textShadow()
|
|
67
|
+
color $light
|
|
68
|
+
.icon
|
|
69
|
+
fill $light
|
|
70
|
+
trans()
|
|
71
|
+
&.btn--loading:not(.btn--small):not(.btn--large)
|
|
72
|
+
disableHoverEffect()
|
|
73
|
+
.icon
|
|
74
|
+
margin-right .3rem
|
|
75
|
+
sq(2.2)
|
|
76
|
+
&.btn--has-icon
|
|
77
|
+
&:not(.btn--small):not(.btn--large)
|
|
78
|
+
mbi(.4)
|
|
79
|
+
&.btn--icon
|
|
80
|
+
flex-shrink 0
|
|
81
|
+
.icon
|
|
82
|
+
flex-shrink 0
|
|
83
|
+
&--primary
|
|
84
|
+
background-color $primary
|
|
85
|
+
&:disabled
|
|
86
|
+
&:hover
|
|
87
|
+
background-color $primary
|
|
88
|
+
&--important
|
|
89
|
+
background-color $error
|
|
90
|
+
&:disabled
|
|
91
|
+
&:hover
|
|
92
|
+
background-color $error
|
|
93
|
+
&--secondary
|
|
94
|
+
btn()
|
|
95
|
+
color $secondary
|
|
96
|
+
background-color $light
|
|
97
|
+
border .1rem solid $inputBorderColor
|
|
98
|
+
.icon
|
|
99
|
+
fill $secondary
|
|
100
|
+
trans()
|
|
101
|
+
&.btn--has-icon
|
|
102
|
+
mbi(.4)
|
|
103
|
+
&.btn--icon
|
|
104
|
+
flex-shrink 0
|
|
105
|
+
.icon
|
|
106
|
+
flex-shrink 0
|
|
107
|
+
&:hover
|
|
108
|
+
border-color $success
|
|
109
|
+
&.btn--loading
|
|
110
|
+
&:hover
|
|
111
|
+
background-color transparent
|
|
112
|
+
color $secondary
|
|
113
|
+
cursor default
|
|
114
|
+
border-color $inputBorderColor
|
|
115
|
+
.icon
|
|
116
|
+
fill $secondary
|
|
117
|
+
&:disabled
|
|
118
|
+
opacity .4
|
|
119
|
+
cursor default
|
|
120
|
+
&:disabled
|
|
121
|
+
&:hover
|
|
122
|
+
opacity .4
|
|
123
|
+
background-color transparent
|
|
124
|
+
color $secondary
|
|
125
|
+
border-color $inputBorderColor
|
|
126
|
+
.icon
|
|
127
|
+
fill $secondary
|
|
128
|
+
&--inverse
|
|
129
|
+
btn()
|
|
130
|
+
background-color transparent
|
|
131
|
+
border .1rem solid $light
|
|
132
|
+
color $light
|
|
133
|
+
.icon
|
|
134
|
+
fill $light
|
|
135
|
+
&.btn--has-icon
|
|
136
|
+
mbi(.4)
|
|
137
|
+
&.btn--icon
|
|
138
|
+
flex-shrink 0
|
|
139
|
+
.icon
|
|
140
|
+
flex-shrink 0
|
|
141
|
+
&:hover
|
|
142
|
+
border-color $success
|
|
143
|
+
color $light
|
|
144
|
+
.icon
|
|
145
|
+
fill $light
|
|
146
|
+
&:disabled
|
|
147
|
+
opacity .3
|
|
148
|
+
&:hover
|
|
149
|
+
cursor default
|
|
150
|
+
border-color $success
|
|
151
|
+
color $light
|
|
152
|
+
.icon
|
|
153
|
+
fill $light
|
|
154
|
+
&--link-flex
|
|
155
|
+
&--link-flex-info
|
|
156
|
+
&--link
|
|
157
|
+
&--link-primary
|
|
158
|
+
&--link-info
|
|
159
|
+
focus()
|
|
160
|
+
trans()
|
|
161
|
+
height auto
|
|
162
|
+
padding 0
|
|
163
|
+
line-height $fontSize
|
|
164
|
+
color $secondary
|
|
165
|
+
vertical-align baseline
|
|
166
|
+
position relative
|
|
167
|
+
.btn__label
|
|
168
|
+
line-height $fontSize
|
|
169
|
+
vertical-align baseline
|
|
170
|
+
&:hover
|
|
171
|
+
text-decoration underline
|
|
172
|
+
color $primary
|
|
173
|
+
.icon
|
|
174
|
+
fill $primary
|
|
175
|
+
&:disabled
|
|
176
|
+
cursor default
|
|
177
|
+
opacity .3
|
|
178
|
+
&:hover
|
|
179
|
+
color inherit
|
|
180
|
+
opacity .3
|
|
181
|
+
text-decoration underline
|
|
182
|
+
.icon
|
|
183
|
+
fill inherit
|
|
184
|
+
.label &
|
|
185
|
+
&:hover
|
|
186
|
+
.icon
|
|
187
|
+
fill $light
|
|
188
|
+
&.btn--icon
|
|
189
|
+
padding 0
|
|
190
|
+
text-decoration none
|
|
191
|
+
&.btn--has-icon
|
|
192
|
+
&:not(.btn--icon-right)
|
|
193
|
+
.icon
|
|
194
|
+
margin-right .3rem
|
|
195
|
+
&.btn--icon-right
|
|
196
|
+
.icon
|
|
197
|
+
margin-left .3rem
|
|
198
|
+
&--link
|
|
199
|
+
&--link-primary
|
|
200
|
+
&--link-info
|
|
201
|
+
.icon
|
|
202
|
+
trans()
|
|
203
|
+
position relative
|
|
204
|
+
top .7rem
|
|
205
|
+
&:not(.btn--icon-right)
|
|
206
|
+
.icon
|
|
207
|
+
left -.3rem
|
|
208
|
+
&.btn--small
|
|
209
|
+
.icon
|
|
210
|
+
top .5rem
|
|
211
|
+
left -.3rem
|
|
212
|
+
&.btn--large
|
|
213
|
+
.icon
|
|
214
|
+
top 1.2rem
|
|
215
|
+
left -.3rem
|
|
216
|
+
&.btn--icon-right
|
|
217
|
+
.icon
|
|
218
|
+
right -.3rem
|
|
219
|
+
&.btn--small
|
|
220
|
+
.icon
|
|
221
|
+
top .5rem
|
|
222
|
+
rigth -.3rem
|
|
223
|
+
&.btn--large
|
|
224
|
+
.icon
|
|
225
|
+
top 1.2rem
|
|
226
|
+
rigth -.3rem
|
|
227
|
+
&--link-flex
|
|
228
|
+
&--link-flex-info
|
|
229
|
+
display flex
|
|
230
|
+
align-items center
|
|
231
|
+
&.btn--no-label
|
|
232
|
+
display flex
|
|
233
|
+
align-items center
|
|
234
|
+
justify-content center
|
|
235
|
+
&.btn--large
|
|
236
|
+
&.btn--small
|
|
237
|
+
height auto
|
|
238
|
+
padding 0 !important
|
|
239
|
+
&--link-flex-info
|
|
240
|
+
&:hover
|
|
241
|
+
color $primary
|
|
242
|
+
text-decoration none
|
|
243
|
+
.icon
|
|
244
|
+
fill $primary
|
|
245
|
+
&:disabled
|
|
246
|
+
&:hover
|
|
247
|
+
color $primary
|
|
248
|
+
text-decoration none
|
|
249
|
+
.icon
|
|
250
|
+
fill $primary
|
|
251
|
+
&--link
|
|
252
|
+
&--link-flex
|
|
253
|
+
&.btn--light-color
|
|
254
|
+
color $secondary-medium40
|
|
255
|
+
.icon
|
|
256
|
+
trans()
|
|
257
|
+
fill $secondary-medium40
|
|
258
|
+
&:hover
|
|
259
|
+
color $primary
|
|
260
|
+
.icon
|
|
261
|
+
fill $primary
|
|
262
|
+
&--link-primary
|
|
263
|
+
color $primary
|
|
264
|
+
.icon
|
|
265
|
+
fill $primary
|
|
266
|
+
&:disabled
|
|
267
|
+
&:hover
|
|
268
|
+
color $primary
|
|
269
|
+
text-decoration none
|
|
270
|
+
.icon
|
|
271
|
+
fill $primary
|
|
272
|
+
&--link-info
|
|
273
|
+
&--link-flex-info
|
|
274
|
+
color $info
|
|
275
|
+
.icon
|
|
276
|
+
fill $info
|
|
277
|
+
&:hover
|
|
278
|
+
color $primary
|
|
279
|
+
text-decoration underline
|
|
280
|
+
.icon
|
|
281
|
+
fill $primary
|
|
282
|
+
&--link-info
|
|
283
|
+
&--link-flex-info
|
|
284
|
+
&--link-flex
|
|
285
|
+
transition none
|
|
286
|
+
.icon
|
|
287
|
+
trans()
|
|
288
|
+
.btn__label
|
|
289
|
+
trans()
|
|
290
|
+
|
|
291
|
+
&--has-icon
|
|
292
|
+
&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link):not(.btn--icon-right)
|
|
293
|
+
padding 0 $padding 0 $padding - .6
|
|
294
|
+
&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link)
|
|
295
|
+
&.btn--icon-right
|
|
296
|
+
padding 0 $padding - .6 0 $padding
|
|
297
|
+
&--loading
|
|
298
|
+
&:not(.btn--icon):not(.btn--small):not(.btn--large):not(.btn--sidebar-link)
|
|
299
|
+
padding-left $padding - .4
|
|
300
|
+
&:hover
|
|
301
|
+
&.btn--important
|
|
302
|
+
background-color $error
|
|
303
|
+
.icon
|
|
304
|
+
sq(2.2)
|
|
305
|
+
|
|
306
|
+
|
|
307
|
+
&--small
|
|
308
|
+
buttonSmall()
|
|
309
|
+
&.btn--group
|
|
310
|
+
&.btn--switch
|
|
311
|
+
buttonSmall()
|
|
312
|
+
&.btn--icon
|
|
313
|
+
width auto
|
|
314
|
+
img
|
|
315
|
+
max-width 2.2rem
|
|
316
|
+
&:not(.btn--custom-icon-size)
|
|
317
|
+
.icon
|
|
318
|
+
sq(1.8)
|
|
319
|
+
&:not(.btn--icon)
|
|
320
|
+
.icon
|
|
321
|
+
margin-right .4rem
|
|
322
|
+
&.btn--has-icon
|
|
323
|
+
padding-left $padding - .5
|
|
324
|
+
&.btn--loading
|
|
325
|
+
padding-left $padding - .4
|
|
326
|
+
disableHoverEffect()
|
|
327
|
+
.icon
|
|
328
|
+
sq(1.8)
|
|
329
|
+
&--large
|
|
330
|
+
buttonLarge()
|
|
331
|
+
&:not(.btn--custom-icon-size)
|
|
332
|
+
.icon
|
|
333
|
+
sq(3.2)
|
|
334
|
+
&:not(.btn--icon)
|
|
335
|
+
.icon
|
|
336
|
+
margin-right .6rem
|
|
337
|
+
&.btn--has-icon
|
|
338
|
+
padding-left $padding - .4
|
|
339
|
+
&.btn--loading
|
|
340
|
+
padding-left $padding
|
|
341
|
+
disableHoverEffect()
|
|
342
|
+
.icon
|
|
343
|
+
sq(3.2)
|