@woosmap/ui 3.30.0 → 3.34.0

package/src/styles/website/skeletondemo.styl

@@ -1,540 +1,265 @@
-// Vars
-$mapWidth = 40rem
-$mapWidthSmall = 40rem
-$mapHeight = 36rem
-$bigMapHeight = 59.5rem
 
-// Overall style
 .demo
-	position relative
-	height 100%
-	margin-bottom 6rem
-	.map
-		height 100%
-		width 100%
-	.overlay
-		br(1)
-		position absolute
-		top 0
-		left 0
-		z-index 10
-		width 100%
-		height 100%
-		background-color $light70
-		cursor not-allowed
-	&--merchant
-		.tab__content
-			height 57rem
-			max-height 57rem
-		.demo__label
-			white-space normal
-	&--localities
-		.tab__content
-			height 55rem
-			max-height 55rem
-	&--map
-		.tab__content
-			height 49.6rem
-			max-height 49.6rem
-	&--localities
-		&--uk
-			.tab__content
-				height 44.2rem
-				max-height 44.2rem
-			&__formcontainer
-				width 100%
-				height 100%
-				position relative
-				padding 1.6rem 2.6rem 3rem 2.6rem
-				mbib(2)
-			.input
-				&__item
-					min-width 16rem !important
-		&--fr
-			.tab__content
-				height 37.2rem
-				max-height 37.2rem
-			&__formcontainer
-				width 100%
-				height 100%
-				position relative
-				padding 1.6rem 2.6rem 3rem 2.6rem
-				mbib(2)
-			.input
-				&__item
-					min-width 16rem !important
-	&--address
-	&--localitiesaddress
-		&__formcontainer
-			width 100%
-			height 100%
-			mbib(2)
-			position relative
-			padding 1.6rem 2.6rem 3rem 2.6rem
-		.tab__content
-			height 54.1rem
-			max-height 54.1rem
-		.demo__map
-			height 59.5rem
-
-	&--map
-		.demo__map
-			width 55rem
-			height 55rem
-
+	fullwh()
+	margin auto
+	color $secondary
+	.title
+		font-size $title3
+	pre
+	code
+		font-size $fontSizeDemo - .1
 	&__header
-		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
-		&__list
-			margin-left 60px
-			li
-				list-style disc
-				list-style-position inside
-				margin 5px 0 5px 0
-		a
-			color $primary
-			font-weight 600
-			cursor pointer
-		p
-			margin-bottom 20px
-	&__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 2rem
-		white-space nowrap
-		.demo--merchant &
-		.demo--geolocation &
-			color black
-			flexMiddle()
-			mbi()
-			width 100%
-			white-space normal
-			img
-				width 4rem
-		&--wide
-			width 35rem
-			.demo--merchant &
-				width 100%
-		&--filter
-			white-space nowrap
-			font-weight 400
-			font-size 1.6rem
-			line-height 1.4
+		fullw()
+		position relative
 	&__content
-		display flex
-		align-items stretch
-		br(1)
+		fullw()
+		br()
+		font-size $fontSizeDemo
 		overflow hidden
-		border .1rem solid $dark10
-		&-wrapper
-			padding 3rem
-			br(1)
-			// border .1rem solid $demoWrapperBorder
-			background $demoWrapper
-			// background radial-gradient(circle, $demoWrapper 0, $demoWrapper2 100% )
-			box-shadow inset 0 0 30rem $demoWrapper2
-		&-header
-			flexMiddle()
-			.demo--search &
-			.demo--distance &
-			.demo--address &
-			.demo--localitiesaddress &
-			.demo--localities &
-				margin-bottom 1rem
-				.demo__input-container
-					margin-bottom 2rem
-			.demo--address &
-			.demo--localitiesaddress &
-			.demo--localities &
-				mbi(4)
-				flex-wrap nowrap
-				> :nth-child(2)
-					width 100%
-
-		&-footer
-		&-header
-			margin-bottom 3rem
-			mbi(2rem)
-			position relative
-			z-index 20
-			flex-wrap wrap
-			flex-shrink 0
-		&-footer
-			margin-bottom 1rem
-			flexSpread()
-			z-index 15
-			.demo__input-container
-				margin-bottom 2rem
-			.demo--distance &
-			.demo--address &
-			.demo--localitiesaddress &
-				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
-			width 100%
-			flexMiddle()
-			mbi(2)
+		position relative
+		// box-shadow 0 0 3rem rgba($logo2, .15)
+		box-shadow 0 .3rem 1rem rgba($secondary, .15)
+	&__showcase
+	&__data
+		display flex
+		background-color $light
+	&__filters
+		border-right .1rem solid rgba($secondary, .1)
+		padding $demoPadding + .4 $demoPadding
+		width $demofilterWidth
+		background-color $light// rgba($logo2, .82)
+		padding-bottom 2.6rem
+		mbib(1.6)
+	&__data
+		max-height 45rem
+		border-top .1rem solid rgba($secondary, .1)
+	&__showcase
+		min-height 50rem
+		max-height 71rem
 	&__map
-		overflow hidden
-		flex-shrink 0
-		width 50rem
-		height $mapHeight
-		z-index 1
-		&--small
-			width $mapWidthSmall
-		button
-			&:focus
-				box-shadow 0 0 0 .1rem $focus
-		.demo--localities &
-			height $bigMapHeight
-	&__results
-		background $result
-		width 30rem
-		flex-shrink 0
-		max-height $mapHeight
-		box-shadow 0 0 1rem $dark15
-		z-index 2
-		.demo--localities &
-			max-height unset
-		.demo--localities--uk &
-			width 50rem
-			max-height unset
-		.demo--localities--fr &
-			width 50rem
-			max-height unset
-		.demo--merchant &
+		display flex
+		align-items center
+		justify-content center
+		flex-grow 1
+		background-color $light
+		.map
 			width 100%
 			height 100%
-			max-height unset
-			max-width 100%
-			flexMiddle()
-			padding 2rem
-			mbi(2)
-			background-color transparent
-			box-shadow none
-		.demo--address &
-		.demo--localitiesaddress &
-			width 34rem
+			background-color $inputDemoBgColor
+	&__results
+		width $demofilterWidth
+		display flex
+		flex-direction column
+		border-right .1rem solid rgba($secondary, .1)
+		flex-shrink 0
 		&__header
-			background $tabHeader
-			background linear-gradient(90deg, $tabHeader2 15%, $tabHeader 100%)
-			padding 0 2rem
-			height $tabBtnHeight + 1
-			font-size 90%
-			font-weight 400
-			flexMiddle()
-			mbi(2)
-			text-transform uppercase
-			color $tabBtnActive
-			.demo--localities--uk &
-			.demo--localities--fr &
-			.demo--address &
-			.demo--localitiesaddress &
-				display none
-		&__leftcontent
-			position relative
-			.demo--merchant &
-				background-color #454545
+			display flex
+			align-items center
+			flex-shrink 0
+			font-size $fontSizeDemo - .1
+			padding 0 $demoPadding
+			height $footerDemoHeight
+			background-color $inputDemoBgColor
+			font-weight 600
 		&__content
-			position relative
-			padding 2rem
+			font-weight 400
+			color $textColor
+			padding $demoPadding
+			
+			background-color $light
 			overflow-y auto
+	&__code
+		font()
+		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%
-			min-height 20rem
-			ul
-				line-height 1.6
-				mbib(1)
-			.demo--localities--uk &
-			.demo--localities--fr &
-			.demo--address &
-			.demo--localitiesaddress &
-				padding 0
-				font-size 1.5rem
-				mbib(2)
-				background-color #f3f9fd
-			.demo--address &
-			.demo--localitiesaddress &
-			.demo--localities &
-				height auto
-		.localities-matched
-			background-color $resultMatch
-		&__item
-			&:not(:last-child)
-				margin-bottom 1.4rem
-	&__api
-		overflow hidden
-		width 40rem
-		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
-	&__footer
-		mbib(2)
-	input[type=text]
-	.select__control
-	.asyncselect__control
-		min-width 22rem
-		.demo--localities--uk &
-		.demo--localities--fr &
-			min-width 16rem
-	&__input-container
-		position relative
-		.demo--localities--uk &
-		.demo--localities--fr &
-			width 100%
-			.select
-				width 100%
 			
-// Responsiveness
-@media screen and (max-width 1090px)
-	.demo
-		&__results
-			width 23rem
-		&__map
-			width 36rem
+	&__input-container
+		mbib(.6)
+	&__label
+		font-weight 500
+		margin-bottom .6rem
 
-@media screen and (max-width 999px)
-	.demo
-		&__header
-		&__results
-		&__map
-		&__api
-		&__footer
-		&__input-container
-		&__label
-		&__label--filter
-		.select
-		.asyncselect-container
-			width 100% !important
-		&__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
-						&__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--address &
-				.demo--localitiesaddress &
-				.demo--search &
-				.demo--map &
-					.demo
-						&__input-container
-							margin-right 0
-		&__input-container
-			align-items flex-start
-			flex-direction column
-		&__label
-			margin-right 0 !important
-		&__label--filter
+	input
+		&:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=textarea])
+			inputFont()
+			br($demoBr)
+			background-color $inputDemoBgColor !important
+			border-color $inputDemoBorderColor
+			font-size $inputFontSizeDemo !important
+			height $inputDemoHeight
+			padding 0 1rem 0 1rem
+	.mbi
+		mbi(.6)
+	.input
 		&__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
-		&__results
+			inputFont()
+			font-size $inputFontSizeDemo !important
+	.select
+	.asyncselect
+		&__control
+			inputFont()
+			font-size $inputFontSizeDemo !important
+			border-radius $demoBr !important
+			background-color $inputDemoBgColor !important
+			min-height $inputDemoHeight !important
+			height auto !important
+			&:not(.select__control--is-focused):not(.asyncselect__control--is-focused)
+				border-color $inputDemoBorderColor !important
+		.css-g1d714-ValueContainer
+		.css-tlfecz-indicatorContainer
+			padding 0
+		.css-g1d714-ValueContainer
+			height 100%
+		.css-tlfecz-indicatorContainer
+			cursor pointer
+		&__input
+			input
+				height auto !important
+		&__placeholder
+			color $inputDemoPlaceholderColor
+		&__dropdown-indicator
+		&__clear-indicator
+			padding 0
+		&__value-container
+			padding-left .6rem !important
+		&__indicator
+			padding-left .5rem !important
+			padding-right .5rem !important
+			svg
+				fill $activeColor
+		&__indicator-separator
+			background-color $activeColor
+		&__multi-value
+			background-color $activeColorDark !important
+			&__label
+				inputFont() !important
+				height 2.1rem
+				line-height 1.1rem
+				font-size $inputFontSizeDemo - .1 !important
+			&__remove
+				padding .2rem !important
+				
+			.flag
+				width 1.6rem
+				height 1.1rem
+		&__option
+			padding .6rem
+			.flag
+				margin 0 .6rem 0 0
+			&--is-selected
+				color $light !important
+				background-color #819cb9 !important
+				&.select__option--is-focused
+					color $light !important
+					background-color #819cb9 !important
+			&--is-focused:not(.select__option--is-selected)
+				background-color #cddbeb !important
+				color $secondary !important
+			
+	&__filters
+		.btn
+			br(.2)
+			font-size $inputFontSizeDemo !important
+			line-height 2.2rem
+			padding 0 .8rem
+			height $inputDemoHeight
+			inputFont()
+			border-color $inputDemoBorderColor
+			.active
+			&--primary
+				background-color $activeColor
+				border-color $activeColor
+			&--group
+				height 2.8rem
+				&-container
+					color $inputDemoBgColor
+					.btn
+						&:first-child
+							border-radius 2rem 0 0 2rem
+						&:last-child
+							border-radius 0 2rem 2rem 0
+					&--light
+						.btn.active
+							background-color $activeColorDark
+							border-color $activeColorDark
+							color $inputDemoBgColor
+					&.language
+					&.transportation
+						mbi(.6)
+						.btn
+							br(.3)
+							border 0
+							height 2.2rem
+							padding .4rem
+							&.active
+								background-color $light
+								box-shadow 0 0 .1rem .1rem $activeColorDark
+						.flag
+							width 2.4rem
+							height 1.6rem
+						&.transportation
+							.btn
+								height 2.8rem
+							img
+								max-width 2.4rem
+	&__code
+		.tab
+			&__header
+				height $footerDemoHeight
+				background-color $inputDemoBgColor
 			&__content
-				padding $tabPadding - .5
-	
-@media screen and (max-width 720px)
-	.demo
-		&__title
-			font-size 3rem
-		&__desc
-			font-size 1.75rem
-		&__content
-			&-wrapper
-				padding 1.8rem
-			&-footer
-				flex-direction column
-				.demo--distance &
-				.demo--address &
-				.demo--localitiesaddress &
-				.demo--map &
-					flex-direction row
-		&__results
-			.demo--merchant &
-				width 100%
-				justify-content center
-@media screen and (max-width 670px)
+				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
+				&__label
+					margin-bottom .4rem
+				&__line
+					margin-bottom 1rem
+@media screen and (max-width 769px)
+	.demo__showcase
+		max-height 100%
+		min-height auto
+@media screen and (max-width 696px)
 	.demo
-		pre
-		code
-		.btn--tab
-			font-size 85%
+		&__data
+		&__showcase
+			flex-direction column
+			max-height 100%
 		&__results
-			font-size 90%
-		&__label
-		&__label--filter
-			font-size 90%
-		.asyncselect__single-value 
-		.input__item
-			font-size $inputFontSize - .2
+		&__filters
+			width auto
+			border-bottom .1rem solid rgba($secondary, .1)
+			border-right 0
+		&__map
+			height 32rem
 			.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--localities--uk
-		&.demo--address
-		&.demo--localitiesaddress
-			.flag
-				width 2rem
-				height 1.4rem
-			.demo__input-container--inline
-				flex-direction column
-				.select
-					margin 0 0 2rem 0
-		&.demo--localities--uk
-		&.demo--address
-		&.demo--localitiesaddress
-			.demo__input-container--inline
-				.input
-					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--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 20px
-@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
+				height auto