@woosmap/ui 2.55.0 → 3.1.0

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

@@ -0,0 +1,279 @@
+
+// Main colors
+$logo1 = rgba(79, 195, 247, 1) // #4fc3f7
+$logo2 = rgba(85, 134, 255, 1) // #5586ff
+$logo3 = rgba(61, 90, 254, 1) // #3d5afe
+$logo4 = rgba(57, 73, 171, 1) // #3949ab
+$logo5 = rgba(197, 17, 98, 1) // #c51162
+$logo6 = rgba(245, 0, 87, 1) // #f50057
+$logo7 = rgba(255, 82, 82, 1) // #ff5252
+$logo8 = rgba(255, 171, 0, 1) // #ffab00
+
+$linkColorDark = #01b3ff
+$linkColor = $logo3
+
+$primary = $logo3 // 3d5afe
+$primary90 = rgba(61, 90, 254, .9)
+$primary80 = rgba(61, 90, 254, .8)
+$primary70 = rgba(61, 90, 254, .7)
+$primary60 = rgba(61, 90, 254, .6)
+$primary50 = rgba(61, 90, 254, .5)
+$primary40 = rgba(61, 90, 254, .4)
+$primary30 = rgba(61, 90, 254, .3)
+$primary25 = rgba(61, 90, 254, .25)
+$primary20 = rgba(61, 90, 254, .2)
+$primary15 = rgba(61, 90, 254, .15)
+$primary14 = rgba(61, 90, 254, .14)
+$primary13 = rgba(61, 90, 254, .13)
+$primary12 = rgba(61, 90, 254, .12)
+$primary11 = rgba(61, 90, 254, .11)
+$primary10 = rgba(61, 90, 254, .1)
+$primary9 = rgba(61, 90, 254, .09)
+$primary8 = rgba(61, 90, 254, .08)
+$primary7 = rgba(61, 90, 254, .07)
+$primary6 = rgba(61, 90, 254, .06)
+$primary5 = rgba(61, 90, 254, .05)
+$primary4 = rgba(61, 90, 254, .04)
+$primary3 = rgba(61, 90, 254, .03)
+$primary2 = rgba(61, 90, 254, .02)
+$primary1 = rgba(61, 90, 254, .01)
+
+
+$secondary = #252525
+$secondary-medium60 = $secondary
+$secondary-medium40 = $secondary
+$secondary-medium30 = $secondary
+$secondary-medium25 = $secondary
+
+$bodyColor = #F8FAFD
+// Texts & Components
+$textColor = $secondary
+
+$category = #A6A9B4
+
+$darkGradient1 = #262D3E
+$darkGradient2 = #31436C
+
+$coloredGradient1 = $logo3
+$coloredGradient2 = $logo6
+$coloredGradient3 = $logo8
+
+$buttonHover = $success2
+$buttonBorderColor = #454545
+$borderColor = #ebebed
+
+$special = #FF368B
+$special2 = #ff3260
+$special3 =  #46cebc
+$focus = #3633ff
+
+$favorite = #ffc200
+
+$modalBg = rgba(0, 11, 31, .85)
+
+// Labels
+$labelBlue = #52a6e2
+$labelMauve = #7d74c7
+$labelGreen = #47bb90
+$labelGrey = #7a86a7
+$labelOrange = #dc9d40
+$labelRed = #dc4e7e
+
+// Metric
+$metricsProjects = rgba(71, 72, 107, 1) // #47486b
+$metricsProjects80 = rgba(71, 72, 107, .8) // #47486b
+$metricsProjects60 = rgba(71, 72, 107, .6) // #47486b
+$metricsProjects20 = rgba(71, 72, 107, .2) // #47486b
+$metricsProjects10 = rgba(71, 72, 107, .1) // #47486b
+$metricsProjects5 = rgba(71, 72, 107, .05) // #47486b
+$metricsAssets = $metricsProjects
+$metricsMembers = rgba(100, 107, 142, 1) // #646b8e
+$metricsMembers20 = rgba(100, 107, 142, .2) // #646b8e
+$metricsMembers10 = rgba(100, 107, 142, .1) // #646b8e
+$metricsMembers5 = rgba(100, 107, 142, .05) // #646b8e
+$metricsTeams = #839ba7
+
+$metricsTopProjects = rgba(237, 247, 249, 1) // #edf7f9
+$metricsLastCreatedProjects = rgba(233, 249, 242, 1) // #e9f9f2
+
+$apiKey = #595390
+
+// Privilege
+$superuser = #277ed7
+$staff = #ec4a8e
+$owner = #4e6d94
+$co-owner = #6fbb8a
+
+// Plans
+$free = #72b3a7
+$standard = #4b7bd3
+$enterprise = #c3417d
+
+// Alerts
+$success2 = rgba(14, 206, 170, 1)// #0eceaa
+
+$success = rgba(47, 188, 114, 1)
+$success-light = #0ff1c6
+$success-dark = #0cc7a4
+
+$success80 = rgba(47, 188, 114, .8)
+$success70 = rgba(47, 188, 114, .7)
+$success60 = rgba(47, 188, 114, .6)
+$success50 = rgba(47, 188, 114, .5)
+$success20 = rgba(47, 188, 114, .2)
+$success50 = rgba(47, 188, 114, .5)
+
+$error = rgba(220, 55, 71, 1) // #FF1744
+$error-light = #ff6785
+$error-dark = #ca0f33
+
+$error50 = rgba(220, 55, 71, 5)
+$error12 = rgba(220, 55, 71, .12)
+$error30 = rgba(220, 55, 71, .3)
+
+$info = rgba(0, 124, 255, 1) // #00B0FF
+$info12 = rgba(0, 124, 255, .12)
+$info30 = rgba(0, 124, 255, .3)
+
+$warning = rgba(240, 116, 34, 1) // #ff6a00
+$warning12 = rgba(240, 116, 34, .12)
+$warning30 = rgba(240, 116, 34, .3)
+
+$tip = rgba(240, 186, 34, 1) // #f0ba22
+$tip12 = rgba(240, 186, 34, .12)
+$tip50 = rgba(240, 186, 34, .5)
+$tipInverse = rgba(223, 169, 16, 1)
+
+
+$flashError = $error
+$flashBgError = $error12
+$flashBorderError = $error30
+
+$flashSuccess = $success
+$flashBgSuccess = $success20
+$flashBorderSuccess = $success50
+
+$flashInfo = $info
+$flashBgInfo = $info12
+$flashBorderInfo = $info30
+
+$flashWarning = $warning
+$flashBgWarning = $warning12
+$flashBorderWarning = $warning30
+
+
+$flashTip = $tip
+$flashBgTip = $tip12
+$flashBorderTip = $tip50
+$flashTipInverse = $tipInverse
+
+$flashHowto = $howto
+$flashBgHowto = $howtoLight
+$flashBorderHowto = $howtoDark
+
+// Switch
+$switch-inactive=$dark40
+$switch-disabled= $dark10
+$switch-active= $success2
+$switch-focus= $primary
+
+
+// Tabs
+
+
+// DEMO
+$demoWrapper = $primary5
+$demoWrapper2 = $primary20
+$demoWrapperBorder = $light
+$result = $tabContent
+$resultDark = $tabHeaderDark
+$resultMatch = #ffe000
+
+
+// Inputs
+$inputBorderColor =$buttonBorderColor
+$placeHolderColor = #a4a4a4
+
+
+$dark = rgba(0, 0, 0, 1)
+$dark90 = rgba(0, 0, 0, .9)
+$dark80 = rgba(0, 0, 0, .8)
+$dark70 = rgba(0, 0, 0, .7)
+$dark60 = rgba(0, 0, 0, .6)
+$dark50 = rgba(0, 0, 0, .5)
+$dark40 = rgba(0, 0, 0, .4)
+$dark35 = rgba(0, 0, 0, .35)
+$dark30 = rgba(0, 0, 0, .3)
+$dark25 = rgba(0, 0, 0, .25)
+$dark20 = rgba(0, 0, 0, .2)
+$dark15 = rgba(0, 0, 0, .15)
+$dark14 = rgba(0, 0, 0, .14)
+$dark13 = rgba(0, 0, 0, .13)
+$dark12 = rgba(0, 0, 0, .12)
+$dark11 = rgba(0, 0, 0, .11)
+$dark10 = rgba(0, 0, 0, .1)
+$dark9 = rgba(0, 0, 0, .09)
+$dark8 = rgba(0, 0, 0, .08)
+$dark7 = rgba(0, 0, 0, .07)
+$dark6 = rgba(0, 0, 0, .06)
+$dark5 = rgba(0, 0, 0, .05)
+$dark4 = rgba(0, 0, 0, .04)
+$dark3 = rgba(0, 0, 0, .03)
+$dark2 = rgba(0, 0, 0, .02)
+$dark1 = rgba(0, 0, 0, .01)
+
+$light = rgba(255, 255, 255, 1)
+$light90 = rgba(255, 255, 255, .9)
+$light80 = rgba(255, 255, 255, .8)
+$light70 = rgba(255, 255, 255, .7)
+$light60 = rgba(255, 255, 255, .6)
+$light50 = rgba(255, 255, 255, .5)
+$light40 = rgba(255, 255, 255, .4)
+$light30 = rgba(255, 255, 255, .3)
+$light20 = rgba(255, 255, 255, .2)
+$light10 = rgba(255, 255, 255, .1)
+$light9 = rgba(255, 255, 255, .09)
+$light8 = rgba(255, 255, 255, .08)
+$light7 = rgba(255, 255, 255, .07)
+$light6 = rgba(255, 255, 255, .06)
+$light5 = rgba(255, 255, 255, .05)
+$light4 = rgba(255, 255, 255, .04)
+$light3 = rgba(255, 255, 255, .03)
+$light2 = rgba(255, 255, 255, .02)
+$light1 = rgba(255, 255, 255, .01)
+
+
+
+// Products
+
+$localitiesDark = rgba(0, 152, 220, 1) // #00b0ff
+$localities = rgba(0, 176, 255, 1) // #00B0FF
+$localities10 = rgba(0, 176, 255, .1)
+
+$geolocationDark = rgba(1, 175, 73, 1) // #01af49
+$geolocation = rgba(0, 200, 83, 1) // #00c853
+$geolocation10 = rgba(0, 200, 83, .1)
+
+$distanceDark = rgba(255, 115, 0, 1) // #FF7300
+$distance = rgba(255, 145, 0, 1) // #FF9100
+$distance10 = rgba(255, 145, 0, .1)
+
+$storesDark = rgba(37, 109, 212, 1) // #256dd4
+$stores = rgba(56, 138, 255, 1) // #388aff
+$stores10 = rgba(56, 138, 255, .1)
+
+$addressDark = rgba(59, 179, 195, 1) // #38b3c3
+$address = rgba(77, 208, 255, 1) //  #4dd0ff
+$address10 = rgba(77, 208, 255, .1)
+
+$mapDark = rgba(134,  106, 96, 1) // #866a60
+$map = rgba(161, 136, 127, 1) // #A1887F
+$map10 = rgba(161, 136, 127, .1)
+
+$merchantDark = rgba(81, 107, 119, 1) // #516b77
+$merchant = rgba(120, 144, 156, 1) // #78909C
+$merchant10 = rgba(120, 144, 156, .1)
+
+$trafficDark = rgba(2165, 46, 111, 1)// #D82E6F
+$traffic = rgba(255, 124, 129, 1) // #ff7c81
+$traffic10 = rgba(255, 124, 129, .1)

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

@@ -0,0 +1,65 @@
+$demoResultHeaders = 6rem
+$demofilterWidth = 27.4rem
+.demo
+	fullwh()
+	margin 6rem auto
+	.title
+		font-size $title3
+	&__header
+		fullw()
+		position relative
+	&__content
+		fullw()
+		br()
+		overflow hidden
+		position relative
+		box-shadow 0 0 3rem rgba($logo2, .15)
+		color #fff
+	&__showcase
+	&__data
+		display flex
+	&__filters
+		font-size 1.5rem
+		font-weight 700
+		padding 3.2rem 2.6rem
+		width $demofilterWidth
+		min-height 71rem
+		background-color rgba($logo2, .82)
+	&__map
+		flex-grow 1
+		background-color $logo2
+	&__results
+		font-size 1.5rem
+		font-weight 700
+		width $demofilterWidth
+		display flex
+		flex-direction column
+		&__header
+			display flex
+			align-items center
+			flex-shrink 0
+			padding 0 2.6rem
+			height $demoResultHeaders
+			background-color $logo2
+		&__content
+			font-weight 400
+			color $textColor
+			padding 3.2rem 2.6rem
+			min-height $demofilterWidth
+			background-color #eff3ff
+	&__code
+		flex-grow 1
+		display flex
+		flex-direction column
+		&__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%
+

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

@@ -0,0 +1,82 @@
+.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

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

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

@@ -0,0 +1,136 @@
+.input
+	width 100%
+	&__container
+		position relative
+	&__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

@@ -0,0 +1,126 @@
+// 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
+
+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)