@woosmap/ui 3.32.0 → 3.33.0

package/src/styles/website/dropdown.styl

@@ -0,0 +1,123 @@
+.dropdown
+	&__menu
+		&.s
+			top 3.7rem
+		&__section
+			padding 1.6rem
+			width 24rem
+		&__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 !important
+					color $dark !important
+					.dropdown__menu__item
+						&__icon
+							background-color $logo4 !important
+							.icon
+								fill $light !important
+							&.search
+								background $searchDark !important
+							&.localities
+								background $localitiesDark !important
+							&.address
+								background $addressDark !important
+							&.multisearch
+								background $multiSearchDark !important
+							&.geolocation
+								background $geolocationDark !important
+							&.merchant
+								background $merchantDark !important
+							&.storelocator
+								background $storeLocatorDark !important
+							&.geofencing
+								background $geofencingDark !important
+							&.connectors
+								background $connectorsDark !important
+							&.distance
+								background $distanceDark !important
+							&.traffic
+								background $trafficDark !important
+							&.map
+								background $mapDark !important
+							&.mapping
+								background $mappingDark !important
+							&.showcases
+								background $showcasesDark !important
+						&__desc
+							color $dark !important
+			&__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
+				width 100%
+				min-width 0
+				ellipsis()
+			&__name
+				font-weight 600
+			&__desc
+				color $category
+	.category
+		flex-shrink 0
+		margin-top 2rem
+.dropdown.wide
+	position unset
+	.dropdown
+		&__container
+			position absolute
+			top 4rem
+			left 0
+			width 100%
+			display flex
+			align-items flex-start
+			justify-content center
+		&__menu
+			width 100%
+			max-width $wrapperReducedWidth
+			position relative
+			left auto !important
+			right auto !important
+			top auto !important
+			bottom auto !important
+			transform unset !important
+			margin-top 3rem !important
+			flex-wrap wrap
+			&__section
+				flex-shrink 1
+				width 20rem
+				margin 0 1rem 3rem 1rem
+				padding 0
+			&--section
+				padding 1.6rem 2rem 2rem 2rem
+			&__item
+				&__title
+					font-size 1.1rem
+					text-transform uppercase
+					color $category
+					font-weight 600
+					padding 0 0 0 .6rem

package/src/styles/website/fonts.styl

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

@@ -1,7 +1,6 @@
-input
-	font()
 .input
 	width 100%
+	font-size 1.3rem
 	&__container
 		position relative
 	&__label
@@ -19,7 +18,7 @@ input
 		margin .5rem 0 .5rem 0
 	&--iconed
 		.icon
-			fill $inputBorderColor
+			fill $inputDemoBorderColor
 			position absolute
 			left 1rem
 			top .7rem
@@ -77,11 +76,13 @@ input
 				padding 0
 		&:not([type=button]):not([type=checkbox]):not([type=radio])
 			br()
-			placeHolderColor($placeHolderColor)
+			placeholder($inputDemoPlaceholderColor)
+			inputFont()
+			font-size 1.3rem
 			min-width $inputMinWidth
 			width 100%
-			background-color $light
-			border .1rem solid $inputBorderColor
+			background-color $inputDemoBgColor
+			border .1rem solid $inputDemoBorderColor
 			.mini &
 				max-width 6rem
 				min-width 6rem
@@ -130,7 +131,6 @@ input
 			all revert
 			cursor pointer
 			line-height revert
-			sq(2)
 		&[type=number]
 			-moz-appearance textfield
 input::-webkit-outer-spin-button

package/src/styles/website/mixins.styl

@@ -1,19 +1,54 @@
-sq($size = 4)
+f1()
+	font-size $title
+	font-weight 700
+	line-height $title * 1.3
+	margin-bottom 4rem
+f2()
+	font-weight 700
+	font-size $title2
+	line-height $title2 * 1.4
+	margin-bottom 4rem
+f3()
+	font-weight 700
+	font-size $title3
+	line-height $title3 * 1.3
+	margin-bottom 4rem
+f4()
+	font-weight 700
+	font-size $title4
+	line-height $title4 * 1.3
+	margin-bottom 4rem
+f5()
+	font-weight 700
+	font-size $title5
+	line-height $title5 * 1.3
+	margin-bottom 4rem
+f6()
+	font-weight 700
+	font-size $title6
+	line-height $title6 * 1.3
+	margin-bottom 4rem
+
+// Make square
+sq($size = $buttonHeight)
 	$size = unit($size, rem)
 	width $size
 	height $size
 
-mbi($a = 1.4)
+// 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
 
-mbib($a = 1.4)
+// 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
 
-br($a = .6)
+// Gives a border-radius : e. g. : br(3) = border-radius 3rem
+br($a = $borderRadius)
 	if ($a >= 50) {
 		$a = unit($a, '%');
 	} else {
@@ -21,6 +56,159 @@ br($a = .6)
 	}
 	border-radius $a
 
+
+// Border and shadow style of dropdowns
+box()
+	br()
+	border()
+	box-shadow 0 2rem 2rem $dark10
+
+
+// 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
+
+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
+
+inputFont()
+	font-family $fontFamily2
+
+wrapper()
+	trans()
+	margin 0 auto
+	padding 0 $padding * 3
+	max-width $wrapperWidth
+	width 100%
+
+textShadow($c = $dark30)
+	text-shadow .1rem .1rem .1rem $c
+
+tilt()
+	transform skewY(-2deg)
+
+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%)
+
+darkgradient()
+	background $darkGradient2
+	background radial-gradient(circle, $darkGradient2 0%, $darkGradient1 40%, #252525 100%)
+
+dark()
+	background $darkGradient1
+
+light()
+	background $light
+
+color1()
+	background $logo1
+	// background radial-gradient(circle, $logo1 0%, $logo1Dark 100%)
+
+color2()
+	background $logo2
+	// background radial-gradient(circle, $logo2 0%, $logo2Dark 100%)
+
+color3()
+	background $logo3
+	// background radial-gradient(circle, $logo3 0%, $logo3Dark 100%)
+
+color4()
+	background $logo4
+	// background radial-gradient(circle, $logo4 0%, $logo4Dark 100%)
+
+color5()
+	background $logo5
+	// background radial-gradient(circle, $logo5 0%, $logo5Dark 100%)
+
+color6()
+	background $logo6
+	// background radial-gradient(circle, $logo6 0%, $logo6Dark 100%)
+
+color7()
+	background $logo7
+	// background radial-gradient(circle, $logo7 0%, $logo7Dark 100%)
+
+color8()
+	background $logo8
+	// background radial-gradient(circle, $logo8 0%, $logo8Dark 100%)
+
+placeholder($c)
+	&::-webkit-input-placeholder
+		color $c
+	&:-moz-placeholder
+		color $c
+	&::-moz-placeholder
+		color $c
+	&:-ms-input-placeholder
+		color $c

package/src/styles/website/popover.styl

@@ -0,0 +1,8 @@
+.popover
+	&__content
+		max-width 46rem
+		max-height 40rem
+		overflow-y auto
+		padding 0
+		border .1rem solid $borderColor
+		box-shadow 0 1rem 2rem $borderColor

package/src/styles/website/select.styl

@@ -1,87 +1,109 @@
-select
-	font()
 .asyncselect__control--is-focused .asyncselect__single-value
 	display none
 
 .select
 	line-height initial
 	width 100%
-.asyncselect
 .select
+.asyncselect
 	&__label
 		margin-bottom 1rem
 		display block
-		font-size $inputFontSize
 	&__error
-		color $error
-		margin-top 1rem
 		display block
+		margin-top 1rem
+		color $error
 	&__control
-		min-width $formItemsHeightMinWidth
-		min-height 4.4rem !important
+		inputFont()
+		font-size 1.3rem
+		min-width $inputMinWidth
+		min-height $inputHeight !important
+		border-radius .6rem !important
+		background-color $inputBgColor !important
 		&:not(.select__control--is-focused):not(.asyncselect__control--is-focused)
 			border-color $inputBorderColor !important
 			.error > &
 				border-color $error !important
 		&--is-focused
-			box-shadow 0 0 0 .1rem $primary !important
-			border-color $primary !important
+			border-color $secondary !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 $activeColor
+		svg
+			fill $activeColor
 	&__placeholder
 		white-space nowrap
-		font-size $inputFontSize
+		color $placeHolderColor
+	&__option
+	&__multi-value
+		inputFont()
+		font-size 1.3rem !important
+		color $activeColorDark !important
+		.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
-			background-color $primary !important
+			color $light !important
+			background-color #819cb9 !important
 			&.select__option--is-focused
-				background-color $primary !important
+				color $light !important
+				background-color #819cb9 !important
 		&--is-focused:not(.select__option--is-selected)
-			background-color $primary-light !important
-			&.select__option--is-selected
-				background-color $primary !important
+			background-color #cddbeb !important
+			color $secondary !important
 	&__multi-value
-		background-color $primary-light !important
+		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
-		.flag
-			margin-left .4rem
-		&--is-disabled
-			opacity .6
+		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
-				font-size $inputFontSizeSmall !important
+				background-color $light
 				.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