@woosmap/ui 2.58.0 → 3.4.0

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

@@ -0,0 +1,343 @@
+.btn
+	cursor pointer
+	text-decoration none
+	.icon
+		flex-shrink 0
+	&.active
+		cursor default
+	&:disabled
+		&:not(.btn--group)
+			cursor default
+			opacity .3
+			box-shadow none
+			&:hover
+				opacity .3
+	&--icon
+		&:not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--group):not(.btn--sidebar-link)
+			sq()
+			btn()
+			justify-content center
+			padding 0
+			&.btn--loading
+				padding 0
+				.icon
+					sq(2.4)
+			&.btn--small
+				buttonSmall()
+				width $buttonHeightSmall
+			&.btn--mini
+				buttonMini()
+				width $buttonHeightMini
+			&.btn--large
+				buttonLarge()
+				width $buttonHeightLarge
+			&.btn--primary
+				&:disabled
+					&:hover
+						background-color $primary
+						.icon
+							fill $light
+				&.btn--loading
+					&:hover
+						background-color $primary
+			&.btn--secondary
+				&:disabled
+					&:hover
+						background-color transparent
+						border-color $inputBorderColor
+						.icon
+							fill $secondary
+			&.btn--important
+				&:disabled
+					&:hover
+						background-color $error
+						.icon
+							fill $light
+			&.btn--has-icon
+				&:not(.btn--small):not(.btn--large)
+					mbi(.4)
+			&.btn--icon
+				flex-shrink 0
+				.icon
+					flex-shrink 0
+	&--primary
+	&--important
+		btn()
+		textShadow()
+		color $light
+		.icon
+			fill $light
+			trans()
+		&.btn--loading:not(.btn--small):not(.btn--large)
+			disableHoverEffect()
+			.icon
+				margin-right .3rem
+				sq(2.2)
+		&.btn--has-icon
+			&:not(.btn--small):not(.btn--large)
+				mbi(.4)
+		&.btn--icon
+			flex-shrink 0
+			.icon
+				flex-shrink 0
+	&--primary
+		background-color $primary
+		&:disabled
+			&:hover
+				background-color $primary
+	&--important
+		background-color $error
+		&:disabled
+			&:hover
+				background-color $error
+	&--secondary
+		btn()
+		color $secondary
+		background-color $light
+		border .1rem solid $inputBorderColor
+		.icon
+			fill $secondary
+			trans()
+		&.btn--has-icon
+			mbi(.4)
+		&.btn--icon
+			flex-shrink 0
+			.icon
+				flex-shrink 0
+		&:hover
+			border-color $success
+		&.btn--loading
+			&:hover
+				background-color transparent
+				color $secondary
+					cursor default
+					border-color $inputBorderColor
+					.icon
+						fill $secondary
+		&:disabled
+			opacity .4
+			cursor default
+			&:disabled
+				&:hover
+					opacity .4
+						background-color transparent
+						color $secondary
+						border-color $inputBorderColor
+						.icon
+							fill $secondary
+	&--inverse
+		btn()
+		background-color transparent
+		border .1rem solid $light
+		color $light
+		.icon
+			fill $light
+		&.btn--has-icon
+			mbi(.4)
+		&.btn--icon
+			flex-shrink 0
+			.icon
+				flex-shrink 0
+		&:hover
+			border-color $success
+			color $light
+			.icon
+				fill $light
+		&:disabled
+			opacity .3
+			&:hover
+				cursor default
+				border-color $success
+				color $light
+				.icon
+					fill $light
+	&--link-flex
+	&--link-flex-info
+	&--link
+	&--link-primary
+	&--link-info
+		focus()
+		trans()
+		height auto
+		padding 0
+		line-height $fontSize
+		color $secondary
+		vertical-align baseline
+		position relative
+		.btn__label
+			line-height $fontSize
+			vertical-align baseline
+		&:hover
+			text-decoration underline
+			color $primary
+			.icon
+				fill $primary
+		&:disabled
+			cursor default
+			opacity .3
+			&:hover
+				color inherit
+				opacity .3
+				text-decoration underline
+				.icon
+					fill inherit
+		.label &
+			&:hover
+				.icon
+					fill $light
+		&.btn--icon
+			padding 0
+			text-decoration none
+		&.btn--has-icon
+			&:not(.btn--icon-right)
+				.icon
+					margin-right .3rem
+			&.btn--icon-right
+				.icon
+					margin-left .3rem
+	&--link
+	&--link-primary
+	&--link-info
+		.icon
+			trans()
+			position relative
+			top .7rem
+		&:not(.btn--icon-right)
+			.icon
+				left -.3rem
+			&.btn--small
+				.icon
+					top .5rem
+					left -.3rem
+			&.btn--large
+				.icon
+					top 1.2rem
+					left -.3rem
+		&.btn--icon-right
+			.icon
+				right -.3rem
+			&.btn--small
+				.icon
+					top .5rem
+					rigth -.3rem
+			&.btn--large
+				.icon
+					top 1.2rem
+					rigth -.3rem
+	&--link-flex
+	&--link-flex-info
+		display flex
+		align-items center
+		&.btn--no-label
+			display flex
+			align-items center
+			justify-content center
+		&.btn--large
+		&.btn--small
+			height auto
+			padding 0 !important
+	&--link-flex-info
+		&:hover
+			color $primary
+			text-decoration none
+			.icon
+				fill $primary
+		&:disabled
+			&:hover
+				color $primary
+				text-decoration none
+				.icon
+					fill $primary
+	&--link
+	&--link-flex
+		&.btn--light-color
+			color $secondary-medium40
+			.icon
+				trans()
+				fill $secondary-medium40
+			&:hover
+				color $primary
+				.icon
+					fill $primary
+	&--link-primary
+		color $primary
+		.icon
+			fill $primary
+		&:disabled
+			&:hover
+				color $primary
+				text-decoration none
+				.icon
+					fill $primary
+	&--link-info
+	&--link-flex-info
+		color $info
+		.icon
+			fill $info
+		&:hover
+			color $primary
+			text-decoration underline
+			.icon
+				fill $primary
+	&--link-info
+	&--link-flex-info
+	&--link-flex
+		transition none
+		.icon
+			trans()
+		.btn__label
+			trans()
+
+	&--has-icon
+		&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link):not(.btn--icon-right)
+			padding 0 $padding 0 $padding - .6
+		&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link)
+			&.btn--icon-right
+				padding 0 $padding - .6 0 $padding
+	&--loading
+		&:not(.btn--icon):not(.btn--small):not(.btn--large):not(.btn--sidebar-link)
+			padding-left $padding - .4
+			&:hover
+				&.btn--important
+					background-color $error
+		.icon
+			sq(2.2)
+
+
+	&--small
+		buttonSmall()
+		&.btn--group
+		&.btn--switch
+			buttonSmall()
+			&.btn--icon
+				width auto
+				img
+					max-width 2.2rem
+		&:not(.btn--custom-icon-size)
+			.icon
+				sq(1.8)
+		&:not(.btn--icon)
+			.icon
+				margin-right .4rem
+			&.btn--has-icon
+				padding-left $padding - .5
+				&.btn--loading
+					padding-left $padding - .4
+					disableHoverEffect()
+					.icon
+						sq(1.8)
+	&--large
+		buttonLarge()
+		&:not(.btn--custom-icon-size)
+			.icon
+				sq(3.2)
+		&:not(.btn--icon)
+			.icon
+				margin-right .6rem
+			&.btn--has-icon
+				padding-left $padding - .4
+				&.btn--loading
+					padding-left $padding
+					disableHoverEffect()
+					.icon
+						sq(3.2)

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%
+