@woosmap/ui 3.35.0 → 3.39.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@woosmap/ui",
-  "version": "3.35.0",
+  "version": "3.39.0",
   "repository": {
     "type": "git",
     "url": "git+https://github.com/WebGeoServices/ui.git"

package/src/components/Card/Card.js

@@ -20,14 +20,6 @@ import addressImgSq from '../../images/products/product-address-sq.png';
 import mapImgSq from '../../images/products/product-map-sq.png';
 import trafficImgSq from '../../images/products/product-traffic-sq.png';
 import merchantImgSq from '../../images/products/product-merchant-sq.png';
-import localitiesImgSm from '../../images/products/product-localities-sm.png';
-import geolocationImgSm from '../../images/products/product-geolocation-sm.png';
-import storesImgSm from '../../images/products/product-stores-sm.png';
-import distanceImgSm from '../../images/products/product-distance-sm.png';
-import addressImgSm from '../../images/products/product-address-sm.png';
-import mapImgSm from '../../images/products/product-map-sm.png';
-import trafficImgSm from '../../images/products/product-traffic-sm.png';
-import merchantImgSm from '../../images/products/product-merchant-sm.png';
 
 const productImg = {
     LOCALITIES: localitiesImg,
@@ -49,16 +41,6 @@ const productImgSq = {
     TRAFFIC: trafficImgSq,
     MERCHANTS: merchantImgSq,
 };
-const productImgSm = {
-    LOCALITIES: localitiesImgSm,
-    GEOLOCATION: geolocationImgSm,
-    STORES: storesImgSm,
-    DISTANCE: distanceImgSm,
-    ADDRESS: addressImgSm,
-    MAP: mapImgSm,
-    TRAFFIC: trafficImgSm,
-    MERCHANTS: merchantImgSm,
-};
 
 class Header extends Component {
     render() {
@@ -128,7 +110,7 @@ class Card extends Component {
         let imgSize = size;
         switch (imgSize) {
             case 'normal':
-                imgSize = productImgSm[product];
+                imgSize = productImg[product];
                 break;
             case 'small':
                 imgSize = productImgSq[product];
@@ -137,7 +119,7 @@ class Card extends Component {
                 imgSize = productImg[product];
                 break;
             default:
-                imgSize = productImgSm[product];
+                imgSize = productImg[product];
         }
         return (
             <div

package/src/{styles/website → components/Demo}/skeletondemo.styl

@@ -3,6 +3,7 @@
 	fullwh()
 	margin auto
 	color $secondary
+	line-height 2.2rem
 	.title
 		font-size $title3
 	pre
@@ -47,6 +48,7 @@
 			height 100%
 			background-color $inputDemoBgColor
 	&__results
+		inputFont()
 		width $demofilterWidth
 		display flex
 		flex-direction column
@@ -65,28 +67,17 @@
 			font-weight 400
 			color $textColor
 			padding $demoPadding
-			
 			background-color $light
 			overflow-y auto
 	&__code
-		font()
+		inputFont()
 		width 100%
-		&__header
-			display flex
-			align-items center
-			flex-shrink 0
-			padding 0 2.6rem
-			height $demoResultHeaders
-			background-color rgba($logo2, .82)
-		&__content
-			padding 2.6rem
-			background-color #fff
-			height 100%
-			
 	&__input-container
 		mbib(.6)
 	&__label
-		font-weight 500
+		inputFont()
+		font-size $inputFontSizeDemo
+		font-weight 600
 		margin-bottom .6rem
 
 	input
@@ -184,6 +175,7 @@
 				&-container
 					color $inputDemoBgColor
 					.btn
+						padding 0 .8rem
 						&:first-child
 							border-radius 2rem 0 0 2rem
 						&:last-child
@@ -193,11 +185,13 @@
 							background-color $activeColorDark
 							border-color $activeColorDark
 							color $inputDemoBgColor
+							&:hover
+								background-color $activeColorDark
 					&.language
 					&.transportation
 						mbi(.6)
 						.btn
-							br(.3)
+							border-radius .3rem !important
 							border 0
 							height 2.2rem
 							padding .4rem
@@ -221,22 +215,6 @@
 				padding $demoPadding
 				overflow auto
 				max-height 40rem
-		.btn
-			font-size $fontSizeDemo
-			&--tab
-				position relative
-				font-size $fontSizeDemo - .1
-				color rgba($secondary, .4)
-				&.active
-					font-weight 600
-					color $secondary
-				&--action
-					br(2)
-					inputFont()
-					padding 0 1rem
-					font-size $inputFontSizeDemo !important
-					border .1rem solid $activeColor
-					color darken($activeColor, 20%)
 	&--address
 		&__formcontainer
 			.input

package/src/styles/console/button.styl

@@ -559,21 +559,13 @@
 					color $secondary
 					background-image url('../../images/texture.png')
 		&--action
-			br()
+			br(2)
+			inputFont()
 			trans()
-			flexBtn()
-			height auto
-			font-size 1.1rem
-			letter-spacing 0.1rem
-			line-height 1
-			margin-left auto
-			background-color $light
-			border 0.1rem solid $secondary-light
 			padding 0 1rem
-			height 2.4rem
-			color $secondary
-			transition 0.3s all
-			text-transform uppercase
+			font-size $inputFontSizeDemo !important
+			border .1rem solid $activeColor
+			color darken($activeColor, 20%)
 			&:hover
 			&.copied
 				background-color $success

package/src/styles/console/colors.styl

@@ -1,6 +1,16 @@
 // Texts & Components
 $textColor = $secondary
 
+
+$activeColor = #7f98b3
+$activeColorDark = #4c657e
+
+//new version of demos
+$inputDemoBgColor = #f6f7f8
+$inputDemoBorderColor = #bcc4d7
+$inputDemoPlaceholderColor = #818ca5
+
+
 // Main colors
 
 $primary = rgba(85, 134, 255, 1) // 5586F8
@@ -272,56 +282,43 @@ $light1 = rgba(255, 255, 255, .01)
 
 // Products
 
-$localitiesDark = rgba(0, 152, 220, 1) // #00b0ff
-$localities = rgba(0, 176, 255, 1) // #00B0FF
-$localities10 = rgba(0, 176, 255, .1)
+$search = #388aff
+$search10 = rgba($search, .1)
+$searchDark = #0D63DD
 
-$geolocationDark = rgba(1, 175, 73, 1) // #01af49
-$geolocation = rgba(0, 200, 83, 1) // #00c853
-$geolocation10 = rgba(0, 200, 83, .1)
-
-$distanceDark = rgba(255, 115, 0, 1) // #FF7300
-$distance = rgba(255, 145, 0, 1) // #FF9100
-$distance10 = rgba(255, 145, 0, .1)
-
-$storesDark = rgba(37, 109, 212, 1) // #256dd4
-$stores = rgba(56, 138, 255, 1) // #388aff
-$stores10 = rgba(56, 138, 255, .1)
-
-$addressDark = rgba(59, 179, 195, 1) // #38b3c3
-$address = rgba(77, 208, 255, 1) //  #4dd0ff
-$address10 = rgba(77, 208, 255, .1)
+$localities = #009DFF
+$localities10 = rgba($localities, .1)
+$localitiesDark = #0085D8
 
-$mapDark = rgba(134,  106, 96, 1) // #866a60
-$map = rgba(161, 136, 127, 1) // #A1887F
-$map10 = rgba(161, 136, 127, .1)
+$address = #4AC6F2
+$address10 = rgba($address, .1)
+$addressDark = #0D9ED1
 
-$merchantDark = rgba(81, 107, 119, 1) // #516b77
-$merchant = rgba(120, 144, 156, 1) // #78909C
-$merchant10 = rgba(120, 144, 156, .1)
+$multiSearch = #688FCE
+$multiSearch10 = rgba($multiSearch, .1)
+$multiSearchDark = #3A68B2
 
-$trafficDark = rgba(2165, 46, 111, 1)// #D82E6F
-$traffic = rgba(255, 124, 129, 1) // #ff7c81
-$traffic10 = rgba(255, 124, 129, .1)
+$geolocation = #506BDE
+$geolocation10 = rgba($geolocation, .1)
+$geolocationDark = #1F40CC
 
 
-// Products
+$merchant = #7F8A98
+$merchant10 = rgba($merchant, .1)
+$merchantDark = #4F5D6E
 
-$stores = #388aff
-$stores10 = rgba($stores, .1)
-$storesDark = #0D63DD
+$storeLocator = #82A1A7
+$storeLocator10 = rgba($storeLocator, .1)
+$storeLocatorDark = #546D72
 
-$localities = #009DFF
-$localities10 = rgba($localities, .1)
-$localitiesDark = #0085D8
+$geofencing = #939AB1
+$geofencing10 = rgba($geofencing, .1)
+$geofencingDark = #59617C
 
-$geolocation = #506BDE
-$geolocation10 = rgba($geolocation, .1)
-$geolocationDark = #1F40CC
+$connectors = #A193BC
+$connectors10 = rgba($connectors, .1)
+$connectorsDark = #6C5E88
 
-$address = #4AC6F2
-$address10 = rgba($address, .1)
-$addressDark = #0D9ED1
 
 $distance = #FF8A65
 $distance10 = rgba($distance, .1)
@@ -331,12 +328,16 @@ $traffic = #FF6565
 $traffic10 = rgba($traffic, .1)
 $trafficDark = #E04B4B
 
+
 $map = #A1887F
 $map10 = rgba($map, .1)
 $mapDark = #906455
 
-$merchant = #08A278
-$merchant10 = rgba($merchant, .1)
-$merchantDark = #008863
+$mapping = #B9715A
+$mapping10 = rgba($mapping, .1)
+$mappingDark = #96503A
 
 
+$showcases = #68668E
+$showcases10 = rgba($showcases, .1)
+$showcasesDark = #444177

package/src/styles/console/fonts.styl

@@ -1 +1 @@
-@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;0,900;1,100;1,300;1,400;1,700;1,900&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,100;0,300;0,400;0,700;1,100;1,300;1,400;1,700family=Roboto+Mono:wght@400;600&display=swap');

package/src/styles/console/mixins.styl

@@ -25,6 +25,9 @@ br($a = $borderRadius)
 	}
 	border-radius $a
 
+inputFont()
+	font-family $fontFamily2
+
 // Border and shadow style of dropdowns
 box()
 	br()

package/src/styles/console/tab.styl

@@ -39,9 +39,60 @@
 		.tab__content
 			padding $buttonPadding
 			margin-top $buttonPadding
+
+
+.demo__code
+	$tabPadding = 2rem
+	.tab
+		height 100%
+		pre
+		code
+			margin 0 !important
+			padding 0  !important
+			background-color transparent !important
+			width 100%
+		&__header
+			padding 0 $tabPadding
+			flex-shrink 0
+			display flex
+			align-items center
+			justify-content space-between
+			&__buttons
+				display flex
+				align-items center
+				mbi(3)
+				fullw()
+				position relative
+				li
+					min-width 0
+				.btn--tab
+					height auto
+					font-size $fontSizeDemo - .1
+					padding 0 .8rem
+					&:after
+						top 2.7rem
+		&__content
+			line-height 1.2
+			margin 0
+			padding 1.6rem
+			overflow auto
+			max-height 40rem
+			&.active
+				display flex
+				height 100%
 @media screen and (max-width 720px)
 	.tab
 		&__header
 			&__buttons
 				mbi(0)
-		
+@media screen and (max-width 670px)
+	.demo__code
+		.tab
+			&__header
+				padding 0 1.2rem
+				&__buttons
+					mbi(1)
+					.btn
+						font-size 70%
+			&__content
+				padding $tabPadding - .5

package/src/styles/console/variables.styl

@@ -1,4 +1,6 @@
 $fontFamily = "Lato", arial, sans-serif
+$fontFamily2 = 'Roboto Mono', monospace
+
 $fontSize = 1.4rem
 $fontSizeSmall = $fontSize - .2
 $fontSizeMini  = $fontSize - .4
@@ -14,6 +16,16 @@ $title6 = $fontSize
 
 $borderRadius = .6rem
 
+
+//new version of demos
+$demofilterWidth = 27.4rem
+$fontSizeDemo = 1.3rem
+$demoPadding = 1.6rem
+$demoBr = .3rem
+$inputFontSizeDemo = 1.1rem
+$inputDemoHeight = 3rem
+$footerDemoHeight = 4rem
+
 // Buttons & Inputs
 
 $padding = 1.2rem

package/src/styles/style-console.styl

@@ -11,10 +11,6 @@
 @import "./commons/flags.styl"
 @import "./console/icon.styl"
 
-//demos
-@import "./console/MerchantDemo.styl"
-@import "./console/skeletondemo.styl"
-
 
 // Style of all components
 @import "../components/**/*.styl"

package/src/styles/style-website.styl

@@ -15,11 +15,6 @@
 @import "../components/**/*.styl"
 
 
-//Website style override
-
-@import "./website/skeletondemo.styl"
-@import "./website/MerchantDemo.styl"
-
 @import "./website/button.styl"
 @import "./website/input.styl"
 @import "./website/select.styl"

package/src/styles/website/button.styl

@@ -406,4 +406,42 @@
 						color $secondary
 						&:hover
 							background-color $primary20
-	
+	&--tab
+		position relative
+		font-size $fontSizeDemo - .1
+		color rgba($secondary, .4)
+		&:after
+			content ''
+			display block
+			width 0
+			height 0.3rem
+			background $secondary
+			transition width .1s
+			position absolute
+			top 2.7rem
+			left 0
+		&:hover
+			color $secondary
+			&:after
+				width 100%
+		&.active
+			font-weight 600
+			color $secondary
+			&:after
+				width 100%
+		&--action
+			br(2)
+			inputFont()
+			trans()
+			padding 0 1rem
+			font-size $inputFontSizeDemo !important
+			border .1rem solid $activeColor
+			color darken($activeColor, 20%)
+			&:hover
+			&.copied
+				background-color $success
+				border-color $light
+				color $light
+			&:focus
+				background-color $secondary
+				color $light

package/src/styles/website/dropdown.styl

@@ -98,15 +98,16 @@
 			justify-content center
 		&__menu
 			width 100%
-			max-width $wrapperReducedWidth
+			max-width 70rem
 			position relative
-			left auto !important
-			right auto !important
-			top auto !important
-			bottom auto !important
+			left auto
+			right auto
+			top auto
+			bottom auto
 			transform unset !important
-			margin-top 3rem !important
+			margin-top 3rem
 			flex-wrap wrap
+			justify-content center
 			&__section
 				flex-shrink 1
 				width 20rem

package/src/styles/website/fonts.styl

@@ -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&family=Roboto+Mono&display=swap');
+@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;1,400&family=Roboto+Mono:wght@400;600&display=swap');

package/src/styles/website/tab.styl

@@ -8,7 +8,6 @@ $tabPadding = 2rem
 		background-color transparent !important
 		width 100%
 	&__header
-		background linear-gradient(90deg, $tabHeader 77%, $tabHeader2 100%)
 		padding 0 $tabPadding
 		flex-shrink 0
 		display flex
@@ -23,7 +22,6 @@ $tabPadding = 2rem
 			li
 				min-width 0
 	&__content
-		background-color $tabContent
 		display none
 		padding $tabPadding + .5
 		line-height 1.2

package/src/styles/console/skeletondemo.styl

@@ -1,588 +0,0 @@
-// Vars
-$mapWidth = 40rem
-$mapWidthSmall = 28rem
-$mapHeight = 36rem
-
-.demo
-	position relative
-	height 100%
-	margin-bottom 6rem
-	.map
-		height 100%
-		width 100%
-	.tab
-		pre
-		code
-			margin 0 !important
-			padding 2rem!important
-			background transparent !important
-			width 100%
-		&__header__buttons
-			mbi(1)
-	.overlay
-		br(1)
-		position absolute
-		top 0
-		left 0
-		z-index 10
-		width 100%
-		height 100%
-		background-color $light70
-		cursor not-allowed
-	&--localities
-		&--uk
-			.tab__content
-				height 44.2rem
-				max-height 44.2rem
-			.overlay
-				br(1)
-				position absolute
-				top 0
-				left 0
-				width 100%
-				height 100%
-				background-color $light70
-				cursor not-allowed
-			&__formcontainer
-				width 100%
-				height 100%
-				position relative
-				padding 1.6rem 2.6rem 3rem 2.6rem
-				mbib(2)
-	&--address
-	&--localitiesaddress
-		&__formcontainer
-			width 100%
-			height 100%
-			mbib(2)
-			position relative
-			padding 1.6rem 2.6rem 3rem 2.6rem
-		.tab__content
-			height 49.1rem!important
-			max-height 49.1rem!important
-		.demo__map
-			height 54rem
-			width 50rem
-	&--map
-		.demo__map
-			width 55rem
-			height 55rem
-			
-	&__header
-		padding 0 $contentPadding
-		margin-left auto
-		margin-right auto
-		margin-bottom 4rem
-	&__title
-		font-size 34px
-		font-weight 600
-		margin-bottom 3rem
-		mbi(3)
-		&--mini
-			font-weight 600
-		img
-			display block
-	&__desc
-		font-size 2rem
-		font-weight 400
-		line-height 3.2rem
-		margin-bottom 3rem
-		a
-			color $primary
-			font-weight 600
-			cursor pointer
-		&__list
-			margin-left 6rem
-			li
-				list-style disc
-				list-style-position inside
-				margin-bottom 1rem
-	&__cost
-		display block
-		margin-bottom 1rem
-		color $dark40
-		font-size 1.3rem
-		line-height 1.3
-		font-weight 400
-	&__label
-		font-weight 600
-		font-size $title2
-		white-space nowrap
-		margin-bottom 0
-		.demo--merchant &
-		.demo--geolocation &
-			color $success
-			flexMiddle()
-			mbi()
-			img
-				width 4rem
-		&--wide
-			width 35rem
-			.demo--merchant &
-				width 100%
-		&--filter
-			white-space nowrap
-			font-weight 400
-			font-size $title5
-			line-height 1.4
-			margin-bottom 0
-	&__content
-		br(1)
-		display flex
-		align-items stretch
-		overflow hidden
-		border .1rem solid $dark10
-		&-wrapper
-			padding 0 $contentPadding
-		&-header
-			flexMiddle()
-			.demo--search &
-			.demo--distance &
-			.demo--address &
-			.demo--localitiesaddress &
-				margin-bottom 1rem
-				.demo__input-container
-					margin-bottom 2rem
-			.demo--address &
-			.demo--localitiesaddress &
-				mbi(4)
-				flex-wrap nowrap
-				> :nth-child(2)
-					width 100%
-			.demo--localitiesaddress &
-				.demo__input-container
-					width 100%
-		&-footer
-		&-header
-			mbi(2)
-			margin-bottom 3rem
-			position relative
-			z-index 20
-			flex-wrap wrap
-			flex-shrink 0
-		&-footer
-			flexSpread()
-			margin-bottom 1rem
-			z-index 15
-			.demo__input-container
-				margin-bottom 2rem
-			.demo--distance &
-				justify-content flex-start
-			.demo--search &
-				margin-bottom 3rem
-				.demo__input-container
-					margin-bottom 0rem
-			.demo--address &
-			.demo--localitiesaddress &
-				mbi(4)
-				:nth-child(2)
-					.select
-						min-width 18rem
-						width 100%
-					.demo__label--filter
-						width auto !important
-			.demo--map &
-				justify-content flex-start
-				mbi(4)
-				.demo__label--filter
-					font-weight 600
-
-	&__input-container
-		flexMiddle()
-		mbi(2)
-		&--inline
-			flexMiddle()
-			mbi(2)
-			width 100%
-	&__map
-		overflow hidden
-		flex-shrink 0
-		z-index 1
-		&--small
-			width 36%
-		button
-			&:focus
-				box-shadow 0 0 0 .1rem $focus
-	&__results
-		background $result
-		width 26%
-		flex-shrink 0
-		max-height $mapHeight
-		box-shadow 0 0 1rem $dark15
-		z-index 2
-		.demo--localities--uk &
-			width 50rem
-			max-height unset
-		.demo--merchant &
-			mbi(2)
-			flexMiddle()
-			width 100%
-			height 100%
-			max-height unset
-			max-width 100%
-			padding 2rem
-			background-color transparent
-			box-shadow none
-			zoom .8
-		.demo--address &
-		.demo--localitiesaddress &
-			width 34rem
-		&__header
-			mbi(2)
-			textShadow()
-			display flex
-			align-items center
-			padding 0 2rem
-			height $tabBtnHeight + 1
-			font-weight 600
-			color $light
-			text-transform uppercase
-			box-shadow 0 0 .6rem $dark15
-			.demo--localities--uk &
-			.demo--address &
-			.demo--localitiesaddress &
-				display none
-			.demo--distance &
-				background $distance
-				background linear-gradient(90deg, $distance 70%, $distanceDark 100%)
-			.demo--localities &
-				background $localities
-				background linear-gradient(90deg, $localities 70%, $localitiesDark 100%)
-			.demo--address &
-			.demo--localitiesaddress &
-				background $address
-				background linear-gradient(90deg, $address 70%, $addressDark 100%)
-			.demo--merchant &
-				background $merchant
-				background linear-gradient(90deg, $merchant 70%, $merchantDark 100%)
-			.demo--geolocation &
-				background $geolocation
-				background linear-gradient(90deg, $geolocation 70%, $geolocationDark 100%)
-			.demo--map &
-				background $map
-				background linear-gradient(90deg, $map 70%, $mapDark 100%)
-			.demo--search &
-			.demo--stores &
-				background $stores
-				background linear-gradient(90deg, $stores 70%, $storesDark 100%)
-		&__leftcontent
-			position relative
-			.demo--merchant &
-				background-color #454545
-		&__content
-			padding 2rem
-			overflow-y auto
-			height 100%
-			min-height 20rem
-			ul
-				line-height 1.6
-				mbib(1)
-			.demo--localities--uk &
-			.demo--address &
-			.demo--localitiesaddress &
-				padding 0
-				font-size 1.5rem
-				mbib(2)
-				background-color #f3f9fd
-			.demo--address &
-			.demo--localitiesaddress &
-				height auto
-		.localities-matched
-			background-color $resultMatch
-		&__item
-			&:not(:last-child)
-				margin-bottom 1.4rem
-	&__api
-		overflow hidden
-		width 38%
-		flex-grow 1
-		min-height $mapHeight
-		background-color $tabContent
-		box-shadow 0 0 1rem $dark15
-		z-index 2
-		min-width 0// To fit to Docs container
-		.tab
-			&__header
-				height $tabBtnHeight + 1
-				padding 0 2rem
-				box-shadow 0 0 .6rem $dark15
-				align-items center
-				.demo--distance &
-					background $distance
-					background linear-gradient(90deg, $distanceDark 0%, $distance 20%)
-				.demo--localities &
-					background $localities
-					background linear-gradient(90deg, $localitiesDark 0%, $localities 20%)
-				.demo--address &
-				.demo--localitiesaddress &
-					background $address
-					background linear-gradient(90deg, $addressDark 0%, $address 20%)
-				.demo--merchant &
-					background $merchant
-					background linear-gradient(90deg, $merchantDark 0%, $merchant 20%)
-				.demo--geolocation &
-					background $geolocation
-					background linear-gradient(90deg, $geolocationDark 0%, $geolocation 20%)
-				.demo--map &
-					background $map
-					background linear-gradient(90deg, $mapDark 0%, $map 20%)
-				.demo--search &
-				.demo--stores &
-					background $stores
-					background linear-gradient(90deg, $storesDark 0%, $stores 20%)
-			&__content
-				margin-top 0
-				height 31.2rem
-				max-height 31.2rem
-				.demo--merchant &
-					height 45rem
-					max-height 45rem
-			.btn--tab
-				br(0)
-				textShadow()
-				align-items center
-				height $tabBtnHeight + 1
-				color $light80
-				padding 0 1rem
-				text-transform uppercase
-				&.active
-					color $light
-				&:after
-					background $light
-	&__footer
-		mbib(2)
-	input[type=text]
-	.select__control
-	.asyncselect__control
-		min-width 22rem
-		.demo--localities--uk &
-			min-width 16rem
-	&__input-container
-		position relative
-		.demo--localities--uk &
-			width 100%
-			.select
-				width 100%
-// Responsiveness
-
-@media screen and (max-width 1280px)
-	.demo
-		&__header
-		&__results
-		&__map
-		&__api
-		&__footer
-		&__input-container
-		&__label
-		&__label--filter
-		.select
-		.asyncselect-container
-			width 100% !important
-		&__map
-			height 40rem
-		&__content
-			flexCol()
-			align-items center
-			&-footer
-				.demo--distance &
-				.demo--address &
-				.demo--localitiesaddress &
-				.demo--map &
-					margin-bottom 0
-					.demo
-						&__label--filter
-							margin-bottom 0
-							mbi()
-						&__input-container
-							flex-direction row
-							align-items center
-							width auto !important
-							margin-bottom 3rem
-				.demo--search &
-					.demo
-						&__input-container
-							flex-direction row
-							align-items center
-							width auto !important
-						&__label--filter
-							margin-bottom 0
-			&-header
-				.demo--address &
-				.demo--localitiesaddress &
-					flex-wrap wrap
-				.demo--geolocation &
-					margin-bottom 2rem
-					.demo
-						&__label
-							margin-bottom 0
-				.demo--distance &
-				.demo--search &
-					.demo
-						&__input-container
-							margin-right 0
-				.demo--map &
-					.demo
-						&__input-container
-							margin-right 0
-				.demo--localities &
-					.demo__input-container
-						&:first-child
-							margin-bottom 3rem
-		&__input-container
-			align-items flex-start
-			flex-direction column
-		&__label
-			margin-right 0 !important
-		&__label--filter
-		&__label
-			margin-bottom 2rem
-		input[type=text]
-		.select__control
-		.asyncselect__control
-			min-width 100%
-		&__results
-			.demo--merchant &
-				width auto
-				flex-wrap wrap
-				align-items flex-start
-				justify-content center
-				> :first-child
-					margin-bottom 2rem
-
-			&__leftcontent
-				.demo--merchant &
-					width 100%
-					flexAxis()
-@media screen and (max-width 960px)
-	.demo.demo--localities
-		.demo__input-container
-			margin-right 0
-	
-@media screen and (max-width 720px)
-	.demo
-		z-index 1
-		&__title
-			font-size 3rem
-		&__desc
-			font-size 1.75rem
-		&__content
-			&-wrapper
-				padding 0 1rem
-			&-footer
-				flex-direction column
-				.demo--address &
-				.demo--localitiesaddress &
-				.demo--map &
-				.demo--distance &
-					flex-direction row
-		&__results
-			.demo--merchant &
-				width 100%
-				justify-content center
-		&--localities
-		&--merchant
-			.demo__header
-				display none
-		&--merchant
-			.demo__results
-				zoom 1
-		&__label
-			&--wide
-				white-space normal
-
-@media screen and (max-width 670px)
-	.demo
-		pre
-		code
-		.btn--tab
-			font-size 85%
-		&__results
-			font-size 90%
-		&__label
-		&__label--filter
-			font-size 90%
-		.asyncselect__single-value 
-		input
-			font-size 80% !important
-			.demo--merchant &
-				justify-content center
-		&.demo--localities
-			.demo
-				&__content-header
-					flex-direction column
-				&__input-container
-					margin-right 0
-@media screen and (max-width 440px)
-	.demo
-		&.demo--distance
-		&.demo--address
-		.demo--localitiesaddress &
-		&.demo--map
-			.demo__input-container
-				&:nth-child(3)
-					flex-direction column
-					.demo__label--filter
-						margin 0 0 2rem 0
-		&.demo--geolocation
-			.demo__label
-				font-size 1.6rem
-		&.demo--distance
-		&.demo--localities
-		&.demo--address
-		.demo--localitiesaddress &
-			.flag
-				width 2rem
-				height 1.4rem
-			.demo__input-container--inline
-				flex-direction column
-				.select
-					margin 0 0 2rem 0
-		&.demo--search
-			.demo
-				&__content
-					&-footer
-						flex-direction row
-				&__label--filter
-					margin-bottom 2rem
-				&__input-container
-					align-items flex-start
-					justify-content flex-start
-					flex-direction column
-		&.demo--address
-		&.demo--localitiesaddress
-			.demo__input-container--inline
-				.input
-					margin 0 0 2rem 0
-		&.demo--localitiesaddress
-			.demo__input-container
-				width 100%
-		&.demo--merchant
-			.demo__results
-				padding 2rem 0
-		&.demo--map
-			.btn--group-container
-				.btn
-					font-size 1.4rem
-					height 3.6rem
-					padding 0 .8rem
-		&__desc
-			&__list
-				margin-left 2rem
-			
-@media screen and (max-width 370px)
-	.demo
-		&.demo--merchant
-			.demo
-				&__label
-					margin-bottom 0
-				&__results
-					padding 0 0 2rem 0
-					&__leftcontent
-						background-color transparent
-				&__content
-					border 0
-@media screen and (max-width 320px)
-	.demo
-		.btn--group-container
-			.btn.btn--small.btn--group
-				padding 0 .6rem