@woosmap/ui 3.16.0 → 3.17.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/package.json +1 -1
- package/src/components/Button/ButtonGroup.js +10 -10
- package/src/components/Demo/AddressDemo.js +3 -2
- package/src/components/Demo/DistanceDemo.js +5 -4
- package/src/components/Demo/GeolocationDemo.js +2 -1
- package/src/components/Demo/LocalitiesAddressDemo.js +2 -1
- package/src/components/Demo/LocalitiesDemo.js +3 -5
- package/src/components/Demo/MapDemo.js +4 -2
- package/src/components/Demo/SkeletonDemo.js +3 -3
- package/src/styles/console/variables.styl +54 -12
- package/src/styles/next-website/button.styl +74 -1
- package/src/styles/next-website/demo.styl +190 -20
- package/src/styles/next-website/font.styl +1 -1
package/package.json
CHANGED
|
@@ -4,17 +4,15 @@ import PropTypes from 'prop-types';
|
|
|
4
4
|
|
|
5
5
|
export default class ButtonGroup extends Component {
|
|
6
6
|
render() {
|
|
7
|
-
const { children, isLight, isTooltipBtn, testId, ...rest } = this.props;
|
|
7
|
+
const { children, isLight, isTooltipBtn, testId, className, ...rest } = this.props;
|
|
8
|
+
const classes = cl(
|
|
9
|
+
'btn--group-container',
|
|
10
|
+
{ 'btn--group-container--light': isLight },
|
|
11
|
+
{ 'btn--group-container--btn-tooltip': isTooltipBtn },
|
|
12
|
+
className
|
|
13
|
+
);
|
|
8
14
|
return (
|
|
9
|
-
<div
|
|
10
|
-
className={cl(
|
|
11
|
-
'btn--group-container',
|
|
12
|
-
{ 'btn--group-container--light': isLight },
|
|
13
|
-
{ 'btn--group-container--btn-tooltip': isTooltipBtn }
|
|
14
|
-
)}
|
|
15
|
-
{...rest}
|
|
16
|
-
data-testid={testId}
|
|
17
|
-
>
|
|
15
|
+
<div className={classes} {...rest} data-testid={testId}>
|
|
18
16
|
{children}
|
|
19
17
|
</div>
|
|
20
18
|
);
|
|
@@ -26,6 +24,7 @@ ButtonGroup.defaultProps = {
|
|
|
26
24
|
children: null,
|
|
27
25
|
isLight: false,
|
|
28
26
|
isTooltipBtn: false,
|
|
27
|
+
className: '',
|
|
29
28
|
};
|
|
30
29
|
|
|
31
30
|
ButtonGroup.propTypes = {
|
|
@@ -33,4 +32,5 @@ ButtonGroup.propTypes = {
|
|
|
33
32
|
children: PropTypes.array,
|
|
34
33
|
isLight: PropTypes.bool,
|
|
35
34
|
isTooltipBtn: PropTypes.bool,
|
|
35
|
+
className: PropTypes.string,
|
|
36
36
|
};
|
|
@@ -259,9 +259,10 @@ export default class AddressDemo extends Component {
|
|
|
259
259
|
),
|
|
260
260
|
};
|
|
261
261
|
const filterGeometry = {
|
|
262
|
-
label:
|
|
262
|
+
label: false,
|
|
263
263
|
component: (
|
|
264
264
|
<Input
|
|
265
|
+
label={tr('Geometry only')}
|
|
265
266
|
type="checkbox"
|
|
266
267
|
key="geometry"
|
|
267
268
|
checked={geometry}
|
|
@@ -275,7 +276,7 @@ export default class AddressDemo extends Component {
|
|
|
275
276
|
const filterCountries = {
|
|
276
277
|
label: tr('Language'),
|
|
277
278
|
component: (
|
|
278
|
-
<ButtonGroup isLight key="language">
|
|
279
|
+
<ButtonGroup className="language" isLight key="language">
|
|
279
280
|
{languages.map((item) => (
|
|
280
281
|
<Button
|
|
281
282
|
type="group"
|
|
@@ -262,7 +262,7 @@ export default class DistanceDemo extends Component {
|
|
|
262
262
|
const filterTravelMode = {
|
|
263
263
|
key: 'travelmode',
|
|
264
264
|
component: (
|
|
265
|
-
<ButtonGroup isLight>
|
|
265
|
+
<ButtonGroup className="transportation" isLight>
|
|
266
266
|
{travelModes.map((item) => (
|
|
267
267
|
<Button
|
|
268
268
|
type="group"
|
|
@@ -300,7 +300,7 @@ export default class DistanceDemo extends Component {
|
|
|
300
300
|
const filterLanguage = {
|
|
301
301
|
label: tr('Language'),
|
|
302
302
|
component: (
|
|
303
|
-
<ButtonGroup isLight>
|
|
303
|
+
<ButtonGroup className="language" isLight>
|
|
304
304
|
{languages.map((item) => (
|
|
305
305
|
<Button
|
|
306
306
|
type="group"
|
|
@@ -319,9 +319,10 @@ export default class DistanceDemo extends Component {
|
|
|
319
319
|
};
|
|
320
320
|
|
|
321
321
|
const filterAlternatives = {
|
|
322
|
-
label:
|
|
322
|
+
label: '',
|
|
323
323
|
component: (
|
|
324
324
|
<Input
|
|
325
|
+
label={tr('Alternative routes')}
|
|
325
326
|
type="checkbox"
|
|
326
327
|
checked={alternatives}
|
|
327
328
|
onChange={(e) => {
|
|
@@ -331,7 +332,7 @@ export default class DistanceDemo extends Component {
|
|
|
331
332
|
),
|
|
332
333
|
};
|
|
333
334
|
|
|
334
|
-
return [filterTravelMode, filterUnit, filterLanguage
|
|
335
|
+
return [filterAlternatives, filterTravelMode, filterUnit, filterLanguage];
|
|
335
336
|
};
|
|
336
337
|
|
|
337
338
|
render() {
|
|
@@ -116,9 +116,10 @@ export default class GeolocationDemo extends Component {
|
|
|
116
116
|
}
|
|
117
117
|
|
|
118
118
|
const filterStores = {
|
|
119
|
-
label:
|
|
119
|
+
label: '',
|
|
120
120
|
component: (
|
|
121
121
|
<Input
|
|
122
|
+
label={tr('Display Geolocation POIs')}
|
|
122
123
|
type="checkbox"
|
|
123
124
|
key="stores"
|
|
124
125
|
checked={showStores}
|
|
@@ -208,9 +208,10 @@ export default class LocalitiesAddressDemo extends Component {
|
|
|
208
208
|
),
|
|
209
209
|
};
|
|
210
210
|
const filterGeometry = {
|
|
211
|
-
label:
|
|
211
|
+
label: '',
|
|
212
212
|
component: (
|
|
213
213
|
<Input
|
|
214
|
+
label={tr('Geometry only')}
|
|
214
215
|
type="checkbox"
|
|
215
216
|
key="geometry"
|
|
216
217
|
checked={geometry}
|
|
@@ -224,28 +224,26 @@ export default class LocalitiesDemo extends Component {
|
|
|
224
224
|
const filterTypes = {
|
|
225
225
|
label: tr('Filter by'),
|
|
226
226
|
component: (
|
|
227
|
-
|
|
227
|
+
<>
|
|
228
228
|
<CountrySelect
|
|
229
229
|
isMulti
|
|
230
|
-
size="small"
|
|
231
230
|
placeholder={tr('Country')}
|
|
232
231
|
filter={['fr', 'gb', 'sp', 'it', 'de', 'nl']}
|
|
233
232
|
onChange={(items) => this.setState({ countries: items }, this.requestLocalities)}
|
|
234
233
|
/>
|
|
235
234
|
<Select
|
|
236
|
-
size="small"
|
|
237
235
|
placeholder={tr('Point of interest')}
|
|
238
236
|
options={this.types}
|
|
239
237
|
isMulti
|
|
240
238
|
onChange={(items) => this.setState({ localitiesTypes: items }, this.requestLocalities)}
|
|
241
239
|
/>
|
|
242
|
-
|
|
240
|
+
</>
|
|
243
241
|
),
|
|
244
242
|
};
|
|
245
243
|
const filterCountries = {
|
|
246
244
|
label: tr('Language'),
|
|
247
245
|
component: (
|
|
248
|
-
<ButtonGroup isLight>
|
|
246
|
+
<ButtonGroup className="language" isLight>
|
|
249
247
|
{languages.map((item) => (
|
|
250
248
|
<Button
|
|
251
249
|
size="small"
|
|
@@ -145,9 +145,10 @@ storesOverlay.setMap(map);
|
|
|
145
145
|
renderFooterFilters = () => {
|
|
146
146
|
const { hasStores, hasPois } = this.state;
|
|
147
147
|
const filterPois = {
|
|
148
|
-
label:
|
|
148
|
+
label: '',
|
|
149
149
|
component: (
|
|
150
150
|
<Input
|
|
151
|
+
label={tr('Display Map POIs')}
|
|
151
152
|
type="checkbox"
|
|
152
153
|
key="pois"
|
|
153
154
|
checked={hasPois}
|
|
@@ -159,9 +160,10 @@ storesOverlay.setMap(map);
|
|
|
159
160
|
};
|
|
160
161
|
|
|
161
162
|
const filterStores = {
|
|
162
|
-
label:
|
|
163
|
+
label: '',
|
|
163
164
|
component: (
|
|
164
165
|
<Input
|
|
166
|
+
label={tr('Display Woosmap Stores overlay')}
|
|
165
167
|
type="checkbox"
|
|
166
168
|
key="stores"
|
|
167
169
|
checked={hasStores}
|
|
@@ -148,14 +148,14 @@ export default class SkeletonDemo extends Component {
|
|
|
148
148
|
return null;
|
|
149
149
|
}
|
|
150
150
|
return (
|
|
151
|
-
|
|
151
|
+
<>
|
|
152
152
|
{footerFilters.map((filter) => (
|
|
153
153
|
<div className="demo__input-container" key={filter.label || filter.key}>
|
|
154
|
-
{filter.label ? <p className="demo__label--filter">{filter.label}</p> : false}
|
|
154
|
+
{filter.label ? <p className="demo__label demo__label--filter">{filter.label}</p> : false}
|
|
155
155
|
{filter.component}
|
|
156
156
|
</div>
|
|
157
157
|
))}
|
|
158
|
-
|
|
158
|
+
</>
|
|
159
159
|
);
|
|
160
160
|
};
|
|
161
161
|
|
|
@@ -1,24 +1,66 @@
|
|
|
1
|
-
$fontFamily = "
|
|
2
|
-
$fontSize = 1.
|
|
1
|
+
$fontFamily = "Poppins", arial, sans-serif
|
|
2
|
+
$fontSize = 1.8rem
|
|
3
|
+
$lineHeight = $fontSize * 2 - .8
|
|
3
4
|
$fontSizeSmall = $fontSize - .2
|
|
4
5
|
$fontSizeMini = $fontSize - .4
|
|
6
|
+
$fontSizeNano = $fontSize - .6
|
|
5
7
|
$fontWeight = 400
|
|
8
|
+
$fontSizeHeader = 1.3rem
|
|
9
|
+
$fontSizeFooter = 1.6rem
|
|
6
10
|
|
|
7
11
|
|
|
8
|
-
$title =
|
|
9
|
-
$title2 =
|
|
10
|
-
$title3 =
|
|
11
|
-
$title4 =
|
|
12
|
-
$title5 =
|
|
13
|
-
$title6 =
|
|
12
|
+
$title = 4.6rem
|
|
13
|
+
$title2 = 4rem
|
|
14
|
+
$title3 = 3.6rem
|
|
15
|
+
$title4 = 3rem
|
|
16
|
+
$title5 = 2.6rem
|
|
17
|
+
$title6 = 2rem
|
|
14
18
|
|
|
15
19
|
$borderRadius = .6rem
|
|
16
20
|
|
|
21
|
+
|
|
22
|
+
// Layout
|
|
23
|
+
$wrapperWidth = 125rem
|
|
24
|
+
$wrapperReducedWidth = 96rem
|
|
25
|
+
$headerHeight = 6.7rem
|
|
26
|
+
$headerBannerHeight = 5.2rem
|
|
27
|
+
$sectionPadding = 18.5rem
|
|
28
|
+
$topRainbowHeight = 3.8rem
|
|
29
|
+
$gutter2c = 3rem
|
|
30
|
+
$quoteIcon = 44rem
|
|
31
|
+
$quoteIconPosition = ( - $quoteIcon / 2 - $sectionPadding + 1 )
|
|
32
|
+
|
|
33
|
+
$col2 = 58rem
|
|
34
|
+
$col3 = 31.5rem
|
|
35
|
+
$col4 = 22rem
|
|
36
|
+
|
|
37
|
+
// card articles
|
|
38
|
+
$cardHeaderHeight = 21rem
|
|
39
|
+
$cardFontSize = 1.6rem
|
|
40
|
+
$cardTitle = 1.8rem
|
|
41
|
+
$cardTitleLineHeight = 2.6rem
|
|
42
|
+
$cardLineHeight = $cardFontSize * 2 - 1
|
|
43
|
+
$cardPadding = 2rem
|
|
44
|
+
|
|
45
|
+
// card pricing
|
|
46
|
+
$pricingCardWidth = 30.2rem
|
|
47
|
+
$pricingCardpadding = 3.4rem
|
|
48
|
+
$pricingCardHeaderHeight = 6.2rem
|
|
49
|
+
$pricingCardCtaHeight = 5.2rem
|
|
50
|
+
$pricingCardTitleSize = $title6
|
|
51
|
+
$pricingCardAmountSize = $title2 * 2
|
|
52
|
+
$pricingCardUnitSize = $title6
|
|
53
|
+
$pricingCardPeriodSize = $fontSizeSmall
|
|
54
|
+
$pricingCardPriceSize = $title2
|
|
55
|
+
$pricingCardPriceUnitSize = $fontSizeSmall
|
|
56
|
+
|
|
17
57
|
// Buttons & Inputs
|
|
18
58
|
|
|
19
|
-
$padding =
|
|
59
|
+
$padding = 2rem
|
|
20
60
|
$contentPadding = 2.8rem
|
|
21
61
|
|
|
62
|
+
|
|
63
|
+
|
|
22
64
|
$sidebarButtonSize = 5rem
|
|
23
65
|
|
|
24
66
|
$buttonHeight = 3.8rem
|
|
@@ -41,9 +83,9 @@ $buttonPaddingNano = 0 $padding - .4 0 $padding - .4
|
|
|
41
83
|
$buttonFontSizeNano = $fontSize - .3
|
|
42
84
|
$buttonLineHeightNano = $buttonFontSizeNano * 2
|
|
43
85
|
|
|
44
|
-
$buttonHeightLarge = $buttonHeight + .
|
|
45
|
-
$buttonPaddingLarge = 0 $padding + .
|
|
46
|
-
$buttonFontSizeLarge = $fontSize
|
|
86
|
+
$buttonHeightLarge = $buttonHeight + 1.2
|
|
87
|
+
$buttonPaddingLarge = 0 $padding + .6 0 $padding + .6
|
|
88
|
+
$buttonFontSizeLarge = $fontSize - .2
|
|
47
89
|
$buttonLineHeightLarge = $buttonFontSizeLarge * 2
|
|
48
90
|
|
|
49
91
|
|
|
@@ -340,4 +340,77 @@
|
|
|
340
340
|
padding-left $padding
|
|
341
341
|
disableHoverEffect()
|
|
342
342
|
.icon
|
|
343
|
-
sq(3.2)
|
|
343
|
+
sq(3.2)
|
|
344
|
+
&--group
|
|
345
|
+
btn()
|
|
346
|
+
color $secondary-medium40
|
|
347
|
+
background-color $light
|
|
348
|
+
border .1rem solid $inputBorderColor
|
|
349
|
+
&.btn--has-icon
|
|
350
|
+
&:not(.btn--mini):not(.btn--small):not(.btn--large)
|
|
351
|
+
mbi(.4)
|
|
352
|
+
&.btn--icon
|
|
353
|
+
flex-shrink 0
|
|
354
|
+
.icon
|
|
355
|
+
flex-shrink 0
|
|
356
|
+
&:hover
|
|
357
|
+
color $secondary
|
|
358
|
+
background-color $primary10
|
|
359
|
+
&.active
|
|
360
|
+
color $light
|
|
361
|
+
border-color $secondary
|
|
362
|
+
background-color $secondary
|
|
363
|
+
.icon
|
|
364
|
+
fill $light
|
|
365
|
+
&:hover
|
|
366
|
+
background-color $secondary
|
|
367
|
+
&:disabled
|
|
368
|
+
background-color $secondary60
|
|
369
|
+
border-color $secondary-medium15
|
|
370
|
+
color $light70
|
|
371
|
+
.icon
|
|
372
|
+
fill $light70
|
|
373
|
+
&:disabled:not(.active)
|
|
374
|
+
color $secondary30
|
|
375
|
+
cursor default
|
|
376
|
+
.icon
|
|
377
|
+
fill $secondary30
|
|
378
|
+
&:hover
|
|
379
|
+
border-color $inputBorderColor
|
|
380
|
+
color $secondary30
|
|
381
|
+
background-color transparent
|
|
382
|
+
.icon
|
|
383
|
+
fill $secondary30
|
|
384
|
+
&-container
|
|
385
|
+
flexMiddle()
|
|
386
|
+
.btn
|
|
387
|
+
&:first-child
|
|
388
|
+
border-radius $borderRadius 0 0 $borderRadius
|
|
389
|
+
border-width .1rem 0 .1rem .1rem
|
|
390
|
+
&:not(:first-child):not(:last-child)
|
|
391
|
+
border-width .1rem 0 .1rem .1rem
|
|
392
|
+
border-radius 0
|
|
393
|
+
&:last-child
|
|
394
|
+
border-radius 0 $borderRadius $borderRadius 0
|
|
395
|
+
border-width .1rem
|
|
396
|
+
&--light
|
|
397
|
+
.btn
|
|
398
|
+
&.active
|
|
399
|
+
border-color $inputBorderColor
|
|
400
|
+
background-color $primary20
|
|
401
|
+
color $secondary
|
|
402
|
+
&:hover
|
|
403
|
+
background-color $primary20
|
|
404
|
+
&--btn-tooltip
|
|
405
|
+
.tooltip
|
|
406
|
+
&:first-child
|
|
407
|
+
.btn
|
|
408
|
+
border-radius $borderRadius 0 0 $borderRadius
|
|
409
|
+
&:not(:first-child):not(:last-child)
|
|
410
|
+
.btn
|
|
411
|
+
border-width .1rem .1rem .1rem 0
|
|
412
|
+
border-radius 0
|
|
413
|
+
&:last-child
|
|
414
|
+
.btn
|
|
415
|
+
border-radius 0 $borderRadius $borderRadius 0
|
|
416
|
+
border-width .1rem .1rem .1rem 0
|
|
@@ -1,56 +1,82 @@
|
|
|
1
|
-
$demoResultHeaders = 6rem
|
|
2
1
|
$demofilterWidth = 27.4rem
|
|
2
|
+
$fontSizeDemo = 1.3rem
|
|
3
|
+
$demoPadding = 1.6rem
|
|
4
|
+
$demoBr = .3rem
|
|
5
|
+
$inputFontSizeDemo = 1.1rem
|
|
6
|
+
$inputDemoHeight = 3rem
|
|
7
|
+
$inputBgColor = #f6f7f8
|
|
8
|
+
$inputBorderColor = #bcc4d7
|
|
9
|
+
$inputPlaceholderColor = #818ca5
|
|
10
|
+
|
|
11
|
+
$activeColor = #7f98b3
|
|
12
|
+
$activeColorDark = #4c657e
|
|
13
|
+
$footerHeight = 4rem
|
|
14
|
+
|
|
15
|
+
inputFont()
|
|
16
|
+
font-family 'Roboto Mono', monospace
|
|
17
|
+
|
|
3
18
|
.demo
|
|
4
19
|
fullwh()
|
|
5
20
|
margin 6rem auto
|
|
6
21
|
.title
|
|
7
22
|
font-size $title3
|
|
23
|
+
pre
|
|
24
|
+
code
|
|
25
|
+
font-size $fontSizeDemo - .1
|
|
8
26
|
&__header
|
|
9
27
|
fullw()
|
|
10
28
|
position relative
|
|
11
29
|
&__content
|
|
12
30
|
fullw()
|
|
13
31
|
br()
|
|
32
|
+
font-size $fontSizeDemo
|
|
14
33
|
overflow hidden
|
|
15
34
|
position relative
|
|
16
|
-
box-shadow 0 0 3rem rgba($logo2, .15)
|
|
17
|
-
|
|
35
|
+
// box-shadow 0 0 3rem rgba($logo2, .15)
|
|
36
|
+
box-shadow 0 .3rem 1rem rgba($secondary, .15)
|
|
18
37
|
&__showcase
|
|
19
38
|
&__data
|
|
20
39
|
display flex
|
|
21
40
|
&__filters
|
|
22
|
-
|
|
23
|
-
|
|
24
|
-
padding 3.2rem 2.6rem
|
|
41
|
+
border-right .1rem solid rgba($secondary, .1)
|
|
42
|
+
padding $demoPadding + .4 $demoPadding
|
|
25
43
|
width $demofilterWidth
|
|
26
|
-
|
|
27
|
-
|
|
44
|
+
background-color $light// rgba($logo2, .82)
|
|
45
|
+
padding-bottom 2.6rem
|
|
46
|
+
mbib(1.6)
|
|
47
|
+
&__data
|
|
48
|
+
max-height 45rem
|
|
49
|
+
&__showcase
|
|
50
|
+
min-height 50rem
|
|
51
|
+
max-height 71rem
|
|
28
52
|
&__map
|
|
29
53
|
flex-grow 1
|
|
30
|
-
background-color $
|
|
54
|
+
background-color $light
|
|
31
55
|
&__results
|
|
32
|
-
font-size 1.5rem
|
|
33
|
-
font-weight 700
|
|
34
56
|
width $demofilterWidth
|
|
35
57
|
display flex
|
|
36
58
|
flex-direction column
|
|
59
|
+
border-right .1rem solid rgba($secondary, .1)
|
|
60
|
+
flex-shrink 0
|
|
37
61
|
&__header
|
|
38
62
|
display flex
|
|
39
63
|
align-items center
|
|
40
64
|
flex-shrink 0
|
|
41
|
-
|
|
42
|
-
|
|
43
|
-
|
|
65
|
+
font-size $fontSizeDemo - .1
|
|
66
|
+
padding 0 $demoPadding
|
|
67
|
+
height $footerHeight
|
|
68
|
+
background-color rgba($secondary, .05)
|
|
69
|
+
font-weight 600
|
|
44
70
|
&__content
|
|
45
71
|
font-weight 400
|
|
46
72
|
color $textColor
|
|
47
|
-
padding
|
|
48
|
-
|
|
49
|
-
background-color
|
|
73
|
+
padding $demoPadding
|
|
74
|
+
|
|
75
|
+
background-color $light
|
|
76
|
+
overflow-y auto
|
|
50
77
|
&__code
|
|
51
|
-
|
|
52
|
-
|
|
53
|
-
flex-direction column
|
|
78
|
+
font()
|
|
79
|
+
width 100%
|
|
54
80
|
&__header
|
|
55
81
|
display flex
|
|
56
82
|
align-items center
|
|
@@ -62,4 +88,148 @@ $demofilterWidth = 27.4rem
|
|
|
62
88
|
padding 2.6rem
|
|
63
89
|
background-color #fff
|
|
64
90
|
height 100%
|
|
91
|
+
|
|
92
|
+
&__input-container
|
|
93
|
+
mbib(.6)
|
|
94
|
+
&__label
|
|
95
|
+
font-weight 500
|
|
96
|
+
margin-bottom .6rem
|
|
65
97
|
|
|
98
|
+
input
|
|
99
|
+
&:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=textarea])
|
|
100
|
+
inputFont()
|
|
101
|
+
br($demoBr)
|
|
102
|
+
background-color $inputBgColor !important
|
|
103
|
+
border-color $inputBorderColor
|
|
104
|
+
font-size $inputFontSizeDemo
|
|
105
|
+
height $inputDemoHeight
|
|
106
|
+
padding 0 1rem 0 1rem
|
|
107
|
+
.mbi
|
|
108
|
+
mbi(.6)
|
|
109
|
+
.input
|
|
110
|
+
&__label
|
|
111
|
+
inputFont()
|
|
112
|
+
font-size $inputFontSizeDemo
|
|
113
|
+
.select
|
|
114
|
+
.asyncselect
|
|
115
|
+
inputFont()
|
|
116
|
+
font-size $inputFontSizeDemo
|
|
117
|
+
&__control
|
|
118
|
+
border-radius $demoBr !important
|
|
119
|
+
background-color $inputBgColor !important
|
|
120
|
+
min-height 2.4rem !important
|
|
121
|
+
height auto !important
|
|
122
|
+
&:not(.select__control--is-focused):not(.asyncselect__control--is-focused)
|
|
123
|
+
border-color $inputBorderColor !important
|
|
124
|
+
.css-g1d714-ValueContainer
|
|
125
|
+
.css-tlfecz-indicatorContainer
|
|
126
|
+
padding 0
|
|
127
|
+
.css-g1d714-ValueContainer
|
|
128
|
+
height 100%
|
|
129
|
+
.css-tlfecz-indicatorContainer
|
|
130
|
+
cursor pointer
|
|
131
|
+
&__input
|
|
132
|
+
input
|
|
133
|
+
height auto !important
|
|
134
|
+
&__placeholder
|
|
135
|
+
color $inputPlaceholderColor
|
|
136
|
+
&__dropdown-indicator
|
|
137
|
+
&__clear-indicator
|
|
138
|
+
padding 0
|
|
139
|
+
&__value-container
|
|
140
|
+
padding-left .6rem !important
|
|
141
|
+
&__indicator
|
|
142
|
+
padding-left .5rem !important
|
|
143
|
+
padding-right .5rem !important
|
|
144
|
+
svg
|
|
145
|
+
fill $activeColor
|
|
146
|
+
&__indicator-separator
|
|
147
|
+
background-color $activeColor
|
|
148
|
+
&__multi-value
|
|
149
|
+
background-color $activeColorDark !important
|
|
150
|
+
&__label
|
|
151
|
+
inputFont() !important
|
|
152
|
+
height 2.1rem
|
|
153
|
+
line-height 1.1rem
|
|
154
|
+
font-size $inputFontSizeDemo - .1 !important
|
|
155
|
+
&__remove
|
|
156
|
+
padding .2rem !important
|
|
157
|
+
|
|
158
|
+
.flag
|
|
159
|
+
width 1.6rem
|
|
160
|
+
height 1.1rem
|
|
161
|
+
&__option
|
|
162
|
+
padding .6rem
|
|
163
|
+
.flag
|
|
164
|
+
margin 0 .6rem 0 0
|
|
165
|
+
&__filters
|
|
166
|
+
.btn
|
|
167
|
+
br(.2)
|
|
168
|
+
font-size $inputFontSizeDemo
|
|
169
|
+
line-height 2.2rem
|
|
170
|
+
padding 0 .8rem
|
|
171
|
+
height $inputDemoHeight
|
|
172
|
+
inputFont()
|
|
173
|
+
border-color $inputBorderColor
|
|
174
|
+
.active
|
|
175
|
+
&--primary
|
|
176
|
+
background-color $activeColor
|
|
177
|
+
border-color $activeColor
|
|
178
|
+
&--group
|
|
179
|
+
height 2.8rem
|
|
180
|
+
&-container
|
|
181
|
+
color $inputBgColor
|
|
182
|
+
.btn
|
|
183
|
+
&:first-child
|
|
184
|
+
border-radius 2rem 0 0 2rem
|
|
185
|
+
&:last-child
|
|
186
|
+
border-radius 0 2rem 2rem 0
|
|
187
|
+
&--light
|
|
188
|
+
.btn.active
|
|
189
|
+
background-color $activeColorDark
|
|
190
|
+
border-color $activeColorDark
|
|
191
|
+
color $inputBgColor
|
|
192
|
+
&.language
|
|
193
|
+
&.transportation
|
|
194
|
+
mbi(.4)
|
|
195
|
+
.btn
|
|
196
|
+
br(.3)
|
|
197
|
+
border 0
|
|
198
|
+
height 1.9rem
|
|
199
|
+
padding .2rem
|
|
200
|
+
&.active
|
|
201
|
+
background-color $light
|
|
202
|
+
box-shadow 0 0 .1rem .1rem $activeColorDark
|
|
203
|
+
.flag
|
|
204
|
+
width 2.2rem
|
|
205
|
+
height 1.5rem
|
|
206
|
+
&.transportation
|
|
207
|
+
.btn
|
|
208
|
+
height 2.8rem
|
|
209
|
+
img
|
|
210
|
+
max-width 2.4rem
|
|
211
|
+
&__code
|
|
212
|
+
.tab
|
|
213
|
+
&__header
|
|
214
|
+
height $footerHeight
|
|
215
|
+
background-color rgba($secondary, .05)
|
|
216
|
+
&__content
|
|
217
|
+
padding $demoPadding
|
|
218
|
+
overflow auto
|
|
219
|
+
max-height 40rem
|
|
220
|
+
.btn
|
|
221
|
+
font-size $fontSizeDemo
|
|
222
|
+
&--tab
|
|
223
|
+
position relative
|
|
224
|
+
font-size $fontSizeDemo - .1
|
|
225
|
+
color rgba($secondary, .4)
|
|
226
|
+
&.active
|
|
227
|
+
font-weight 600
|
|
228
|
+
color $secondary
|
|
229
|
+
&--action
|
|
230
|
+
br(2)
|
|
231
|
+
inputFont()
|
|
232
|
+
padding 0 1rem
|
|
233
|
+
font-size $inputFontSizeDemo
|
|
234
|
+
border .1rem solid $activeColor
|
|
235
|
+
color darken($activeColor, 20%)
|
|
@@ -1 +1 @@
|
|
|
1
|
-
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;0,500;1,600;1,700;1,900&display=swap');
|
|
1
|
+
@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;0,500;1,600;1,700;1,900&family=Roboto+Mono&display=swap');
|