@woosmap/ui 3.32.0 → 3.36.0

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