@woosmap/ui 3.32.0 → 3.36.0

package/src/styles/website/MerchantDemo.styl

@@ -1,203 +0,0 @@
-.merchant
-	&__mobilewrapper
-		position relative
-		height 58.2rem
-		overflow hidden
-		flex-grow 1
-	&__mobilecontainer
-		position relative
-		height 100%
-		width 28rem
-		margin auto
-		&__title
-			text-align center
-			color $light
-			font-size 1.7rem
-			font-weight 600
-			margin 1rem 0 2rem 0
-	&__mobile
-		width 100%
-		height 52.9rem
-		background-color $light
-		br(2)
-		overflow hidden
-		&--dirty
-		&--details--dirty
-			.merchant__mobile__header
-				background #666767
-		&--clean
-		&--details
-			.merchant__mobile__header
-				background #4F70FF
-		&--details
-			height 52.9rem
-		&__header
-			padding 1.6rem
-			color #fff
-			text-transform uppercase
-			font-size 1.7rem
-			font-weight 600
-			&__nav
-			&__icons
-				flexSpread()
-			&__icons
-				img
-					max-height 1.2rem
-			&__nav
-				margin-top 2rem
-				position relative
-				.merchant__mobile--details &
-				.merchant__mobile--details--dirty &
-					flexAxis()
-				&__avatar
-					max-width 3.2rem
-				&__back
-					max-width 1.4rem
-					opacity 0
-					.merchant__mobile--details &
-					.merchant__mobile--details--dirty &
-						opacity 1
-				&__button
-					position absolute
-					background-color transparent
-					left -1.2rem
-					&:hover
-						background-color $dark30
-
-		&__section
-			font-size 1.5rem
-			padding 1.4rem 2rem
-			height 100%
-			overflow auto
-			.merchant__mobile--details &
-				padding 0
-			.merchant__mobile--details--dirty &
-				border .1rem solid $dark20
-				background-color $dark3
-				margin 2rem
-				br(1)
-				height auto
-				overflow hidden
-			&__map
-				overflow hidden
-				height 20rem
-			&__no-map
-				height 6rem
-			&__date
-				color #C8C8C7
-				font-size 1.4rem
-				margin-bottom 1.6rem
-				.merchant__mobile--details &
-				.merchant__mobile--details--dirty &
-					text-align center
-					margin .4rem 0 0 0
-				.merchant__mobile--details--dirty &
-					margin 0 0 2rem 0
-			&__transaction
-				flexSpread()
-				br(1)
-				trans()
-				cursor pointer
-				height 6.2rem
-				padding .8rem
-				box-shadow 0 0 1rem $dark10
-				width 100%
-				margin-bottom 1.2rem
-				&:hover
-					background-color #666767
-					.merchant__mobile--clean &
-						background-color #4F70FF
-					.merchant__mobile__section__transaction
-						&__link
-							color $light
-						&__info
-							&__name
-								color $light
-							&__date
-								color $light50
-						&__price
-							color $light
-				&__link
-					color #999
-					margin 0 .6rem 0 1.4rem
-					img
-						max-width .7rem
-				&__info
-					width 100%
-					min-width 0
-					margin-right 1.2rem
-					.merchant__mobile--clean &
-						flexMiddle()
-					.merchant__mobile--details &
-						margin 0
-					&__address
-						padding 1rem 2rem
-						color#999
-						text-align center
-					&__logo
-						sq(4.6)
-						br(50)
-						position relative
-						margin-right 1.2rem
-						flex-shrink 0
-						.merchant__mobile--details &
-							width 100%
-							height 5rem
-						img
-							ellipsis()
-							br(50)
-							sq(4.6)
-							background #fff
-							border .1rem solid #f1f1f1
-							box-shadow 0 0 .6rem $dark10
-							
-							.merchant__mobile--details &
-								sq(8)
-								position absolute
-								left calc(50% - 4rem)
-								top -4rem
-								box-shadow 0 0 1rem $dark25
-								border .3rem solid #fff
-					&__name
-						ellipsis()
-						font-weight 500
-						.merchant__mobile--details &
-						.merchant__mobile--details--dirty &
-							text-align center
-							font-size 2rem
-					&__date
-						color #7E7F7F
-						font-size 1.2rem
-				&__price
-					font-weight 600
-					.merchant__mobile--details &
-					.merchant__mobile--details--dirty &
-						margin-top 1rem
-						font-size 5rem
-						line-height 1
-						text-align center
-						font-weight 400
-					.merchant__mobile--details--dirty &
-						font-size 3.5rem
-
-@media screen and (max-width 660px)
-	.merchant
-		&__mobilewrapper
-			margin-right 0 !important
-@media screen and (max-width 370px)
-	.merchant
-		&__mobilewrapper
-			width 100%
-		&__mobilecontainer
-			width 100%
-			&__title
-				color #454545
-		&__mobile__section__transaction
-			font-size 85%
-@media screen and (max-width 350px)
-	.merchant
-		&__mobile__section__transaction__info__logo
-		&__mobile__section__transaction__info__logo img
-			sq(3.6)
-		
-

package/src/styles/website/skeletondemo.styl

@@ -1,540 +0,0 @@
-// 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
-
-	&__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
-	&__content
-		display flex
-		align-items stretch
-		br(1)
-		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)
-	&__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 &
-			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
-		&__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
-		&__content
-			position relative
-			padding 2rem
-			overflow-y auto
-			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
-
-@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
-		&__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
-			&__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)
-	.demo
-		pre
-		code
-		.btn--tab
-			font-size 85%
-		&__results
-			font-size 90%
-		&__label
-		&__label--filter
-			font-size 90%
-		.asyncselect__single-value 
-		.input__item
-			font-size $inputFontSize - .2
-			.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