@woosmap/ui 3.31.0 → 3.35.0

package/src/styles/next-website/demo.styl

@@ -1,264 +0,0 @@
-
-.demo
-	fullwh()
-	margin auto
-	color $secondary
-	.title
-		font-size $title3
-	pre
-	code
-		font-size $fontSizeDemo - .1
-	&__header
-		fullw()
-		position relative
-	&__content
-		fullw()
-		br()
-		font-size $fontSizeDemo
-		overflow hidden
-		position relative
-		// box-shadow 0 0 3rem rgba($logo2, .15)
-		box-shadow 0 .3rem 1rem rgba($secondary, .15)
-	&__showcase
-	&__data
-		display flex
-	&__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
-		display flex
-		align-items center
-		justify-content center
-		flex-grow 1
-		background-color $light
-		.map
-			width 100%
-			height 100%
-			background-color $inputDemoBgColor
-	&__results
-		width $demofilterWidth
-		display flex
-		flex-direction column
-		border-right .1rem solid rgba($secondary, .1)
-		flex-shrink 0
-		&__header
-			display flex
-			align-items center
-			flex-shrink 0
-			font-size $fontSizeDemo - .1
-			padding 0 $demoPadding
-			height $footerDemoHeight
-			background-color $inputDemoBgColor
-			font-weight 600
-		&__content
-			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%
-			
-	&__input-container
-		mbib(.6)
-	&__label
-		font-weight 500
-		margin-bottom .6rem
-
-	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
-			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 $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
-			mbib(.9)
-			.input
-				&__label
-					margin-bottom .2rem
-
-@media screen and (max-width 769px)
-	.demo__showcase
-		max-height 100%
-		min-height auto
-@media screen and (max-width 696px)
-	.demo
-		&__data
-		&__showcase
-			flex-direction column
-			max-height 100%
-		&__results
-		&__filters
-			width auto
-			border-bottom .1rem solid rgba($secondary, .1)
-			border-right 0
-		&__map
-			height 32rem
-			.demo--merchant &
-				height auto

package/src/styles/next-website/dropdown.styl

@@ -1,82 +0,0 @@
-.dropdown
-	position unset
-	&__container
-		position absolute
-		top 6rem
-		left 0
-		width 100%
-		display flex
-		align-items flex-start
-		justify-content center
-	&__menu
-		width 97%
-		max-width 102.2rem
-		padding 1.6rem 2rem 2rem 2rem
-		position relative
-		left auto !important
-		right auto !important
-		top auto !important
-		bottom auto !important
-		transform unset !important
-		margin-top 0 !important
-		&__section
-			flex-shrink 1
-			max-width 22.5rem
-			min-width 18rem
-			width 100%
-			margin 0 1rem
-		&__item
-			font-size 1.3rem
-			line-height 2.4rem
-			display flex
-			flex-direction column
-			align-items flex-start
-			justify-content center
-			flex-shrink 0
-			border-radius $borderRadius !important
-			height auto
-			min-height $buttonHeight + .6rem
-			> :not(.btn):not(.popover__child)
-				min-height $buttonHeight + .6rem
-				trans()
-				padding 0 1.2rem 0 .6rem
-				text-decoration none
-				flex-shrink 0
-				cursor pointer
-				&:hover
-					background-color $dark2
-					color $dark
-					.dropdown__menu__item
-						&__icon
-							background-color $logo4
-						&__desc
-							color $dark
-			&__icon
-				br()
-				sq(3.2)
-				trans()
-				display flex
-				align-items center
-				justify-content center
-				flex-shrink 0
-				background $logo2
-				margin-right 1rem
-				.icon
-					fill #fff !important
-			&__container
-				display flex
-				flex-direction column
-				flex-shrink 0
-			&__title
-				font-size 1.1rem
-				text-transform uppercase
-				color $category
-				font-weight 600
-				padding 0 1.2rem 0 .6rem
-			&__name
-				font-weight 600
-			&__desc
-				color $category
-		.category
-			flex-shrink 0
-			margin-top 2rem

package/src/styles/next-website/font.styl

@@ -1 +0,0 @@
-@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');

package/src/styles/next-website/input.styl

@@ -1,138 +0,0 @@
-.input
-	width 100%
-	&__container
-		position relative
-		inputFont()
-		font-size 1.3rem
-	&__label
-		display block
-		margin-bottom 1rem
-		.input--large &
-			margin-bottom 1rem
-			font-size $inputFontSizeLarge
-		.input--small &
-			margin-bottom .6rem
-			font-size $inputFontSizeSmall
-	&__error
-		color $error
-		display block
-		margin .5rem 0 .5rem 0
-	&--iconed
-		.icon
-			fill $inputBorderColor
-			position absolute
-			left 1rem
-			top .7rem
-		&.input--large
-			.icon
-				left 1.2rem
-				top 1rem
-		&.input--filter
-			.icon
-				left -.4rem
-				top .7rem
-			&.input--large
-				.icon
-					left -.4rem
-					top 1.1rem
-			&.input--small
-				.icon
-					left -.4rem
-					top .3rem
-		&.input--small
-			.icon
-				left .8rem
-				top .4rem
-	&--checkbox
-	&--radio
-		position relative
-		.input__label
-			cursor pointer
-	&--disabled
-		.input
-			&__item
-			&__label
-				cursor default !important
-				opacity .4
-	&__line
-		.input--checkbox &
-		.input--radio &
-			display flex
-			align-items center
-			line-height 1
-			.input__label
-				order 1
-				margin 0 0 0 1rem
-	&__item
-		&:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=textarea])
-			height $inputHeight
-			padding $inputPadding
-			.input--large &
-				height $inputHeightLarge
-				padding $inputPaddingLarge
-			.input--small &
-				height $inputHeightSmall
-				padding $inputPaddingSmall
-			.input--filter &
-				padding 0
-		&:not([type=button]):not([type=checkbox]):not([type=radio])
-			br()
-			placeHolderColor($placeHolderColor)
-			min-width $inputMinWidth
-			width 100%
-			background-color $light
-			border .1rem solid $inputBorderColor
-			.mini &
-				max-width 6rem
-				min-width 6rem
-				text-align center
-			.input--filter &
-				br(0)
-				border-width 0 0 .1rem 0
-				background-color transparent
-				&:focus
-					border-color $secondary
-			.input--iconed &
-				padding-left 4rem
-			.input--large &
-				font-size $inputFontSizeLarge
-				line-height $inputLineHeightLarge
-			.input--iconed.input--large &
-				padding-left 4.6rem
-			.input--filter.input--iconed &
-				padding-left 2.6rem
-				padding-bottom 0
-			.input--filter.input--iconed.input--large &
-				padding-left 2.8rem
-				padding-bottom 0
-			.input--filter.input--iconed.input--small &
-				padding-left 2.4rem
-				padding-bottom .4rem
-			.input--small &
-				font-size $inputFontSizeSmall
-				min-width $inputHeightSmall
-			.input--iconed.input--small &
-				padding-left 3.4rem
-			.input--noborder &
-				border 0
-			&.error
-				border-color $error
-			&:focus
-				border-color $secondary
-
-		&[type=textarea]
-			padding round($padding / 1.7) $padding
-			height $inputHeight * 2
-		&[type=radio]
-			all revert
-			cursor pointer
-		&[type=checkbox]
-			all revert
-			cursor pointer
-			line-height revert
-		&[type=number]
-			-moz-appearance textfield
-input::-webkit-outer-spin-button
-input::-webkit-inner-spin-button
-	-webkit-appearance none
-	margin 0

package/src/styles/next-website/mixins.styl

@@ -1,128 +0,0 @@
-// Make square
-sq($size = $buttonHeight)
-	$size = unit($size, rem)
-	width $size
-	height $size
-
-// It gives a margin right to all children except the last one.
-mbi($a = 1.8)
-	$a = unit($a, rem)
-	> :not(:last-child)
-		margin-right $a
-
-// It gives a margin bottom to all children except the last one.
-mbib($a = 3)
-	$a = unit($a, rem)
-	> :not(:last-child)
-		margin-bottom $a
-
-// Gives a border-radius : e. g. : br(3) = border-radius 3rem
-br($a = $borderRadius)
-	if ($a >= 50) {
-		$a = unit($a, '%');
-	} else {
-		$a = unit($a, rem);
-	}
-	border-radius $a
-
-// Border and shadow style of dropdowns
-box()
-	br()
-	box-shadow 0 2rem 2rem $dark10
-	border .1rem solid $borderColor
-
-// Buttons mixins
-	
-hover()
-	&:hover
-		background-color $buttonHover
-		color $light
-		.icon
-			fill $light
-focus()
-	&:focus-visible
-		box-shadow 0 0 .1rem .2rem $focus
-		z-index 1
-trans()
-	transition all .3s
-
-inputFont()
-	font-family $fontFamily2
-btn()
-	br()
-	flexBtn()
-	buttonFont()
-	hover()
-	focus()
-	trans()
-	white-space nowrap
-
-flexBtn()
-	flex-shrink 0
-	display inline-flex
-	align-items center
-	justify-content flex-start
-
-buttonFont()
-	height $buttonHeight
-	font-size $buttonFontSize
-	line-height $buttonLineHeight
-	padding $buttonPadding
-
-buttonSmall()
-	height $buttonHeightSmall
-	font-size $buttonFontSizeSmall
-	line-height $buttonLineHeightSmall
-	padding $buttonPaddingSmall
-	&.btn--no-label
-		&.btn--link
-		&.btn--link-primary
-		&.btn--link-info
-		&.btn--link-flex
-			height auto
-			line-height unset
-
-buttonLarge()
-	height $buttonHeightLarge
-	font-size $buttonFontSizeLarge
-	line-height $buttonLineHeightLarge
-	padding $buttonPaddingLarge
-	&.btn--no-label
-		&.btn--link
-		&.btn--link-primary
-		&.btn--link-info
-		&.btn--link-flex
-			height auto
-			line-height unset
-
-fullw()
-	width 100%
-	min-width 0
-fullh()
-	height 100%
-	min-height 0
-fullwh()
-	height 100%
-	width 100%
-	min-width 0
-	min-height 0
-
-wrapper()
-	margin 0 auto
-	padding 0 $padding
-	max-width $wrapperWidth
-	width 100%
-
-textShadow($c = $dark30)
-	text-shadow .1rem .1rem .1rem $c
-rainbow()
-	background $primary
-	background linear-gradient(45deg, $coloredGradient1 0%, $coloredGradient2 50%, $coloredGradient3 100%)
-rainbowInverse()
-	background $primary
-	background linear-gradient(45deg, $coloredGradient3 0%, $coloredGradient2 50%, $coloredGradient1 100%)
-darkness()
-	background $darkGradient2
-	background radial-gradient(circle, $darkGradient2 0%, $darkGradient1 40%, #252525 100%)
-tilt()
-	transform skewY(-2deg)

package/src/styles/next-website/select.styl

@@ -1,113 +0,0 @@
-.asyncselect__control--is-focused .asyncselect__single-value
-	display none
-
-.select
-	line-height initial
-	width 100%
-.select
-.asyncselect
-	&__label
-		margin-bottom 1rem
-		display block
-	&__error
-		display block
-		margin-top 1rem
-		color $error
-	&__control
-		inputFont()
-		font-size 1.3rem
-		min-width $inputMinWidth
-		min-height $inputHeight !important
-		border-radius .6rem !important
-		&:not(.select__control--is-focused):not(.asyncselect__control--is-focused)
-			border-color $inputBorderColor !important
-			.error > &
-				border-color $error !important
-		&--is-focused
-			border-color $inputBorderColor !important
-			box-shadow none !important
-			.select__indicator
-			.asyncselect__indicator
-				svg
-					fill $secondary
-	&__value-container
-		padding-left 1rem !important
-	&__single-value
-		color $secondary !important
-	&__indicator
-		padding-left 1rem !important
-		padding-right 1rem !important
-		&-separator
-			background-color $secondary-medium25
-		svg
-			fill $secondary-medium25
-	&__placeholder
-		white-space nowrap
-		color $secondary-medium60
-	&__option
-	&__multi-value
-		.flag
-			margin 0 0 0 .6rem
-			width 2.2rem
-			height 1.5rem
-	&__option
-		display flex !important
-		align-items center
-		color $secondary !important
-		mbi()
-		&--is-disabled
-			color $secondary40 !important
-		&--is-selected
-			color $light !important
-			background-color $primary !important
-			&.select__option--is-focused
-				color $light !important
-				background-color $primary !important
-		&--is-focused:not(.select__option--is-selected)
-			background-color $primary15 !important
-			color $secondary !important
-	&__multi-value
-		background-color $primary !important
-		border-radius .4rem !important
-		flexMiddle()
-		&--is-disabled
-			opacity .6
-		&__label
-		&__remove
-			border-radius .4rem !important
-			background-color transparent !important
-			padding .5rem !important
-		&__label
-			font-size $inputFontSize - .2 !important
-			padding-right .2rem !important
-			color $light !important
-		&__remove
-			cursor pointer
-		svg
-			fill $light !important
-	&--small
-		.select
-		.asyncselect
-			&__control
-				min-width 18rem
-				min-height $inputHeightSmall !important
-				font-size $inputFontSizeSmall !important
-			&__indicator
-				padding .2rem .6rem !important
-			&__option
-			&__multi-value
-				background-color $light
-				font-size $inputFontSizeSmall !important
-				.flag
-					margin 0 0 0 .6rem
-					width 2.2rem
-					height 1.5rem
-				&__label
-					font-size $inputFontSizeSmall !important
-					padding 0 0 0 1rem !important
-					line-height 1.2
-			&__option
-				.flag
-					margin 0 1rem 0 0
-			&__value-container
-				padding 0 0 0 .7rem !important