@woosmap/ui 3.31.0 → 3.35.0

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

@@ -1,416 +0,0 @@
-.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)
-	&--group
-		btn()
-		color $secondary-medium40
-		background-color $light
-		border .1rem solid $inputBorderColor
-		&.btn--has-icon
-			&:not(.btn--mini):not(.btn--small):not(.btn--large)
-				mbi(.4)
-		&.btn--icon
-			flex-shrink 0
-			.icon
-				flex-shrink 0
-		&:hover
-			color $secondary
-			background-color $primary10
-		&.active
-			color $light
-			border-color $secondary
-			background-color $secondary
-			.icon
-				fill $light
-			&:hover
-				background-color $secondary
-			&:disabled
-				background-color $secondary60
-				border-color $secondary-medium15
-				color $light70
-				.icon
-					fill $light70
-		&:disabled:not(.active)
-			color $secondary30
-			cursor default
-			.icon
-				fill $secondary30
-			&:hover
-				border-color $inputBorderColor
-				color $secondary30
-				background-color transparent
-				.icon
-					fill $secondary30
-		&-container
-			flexMiddle()
-			.btn
-				&:first-child
-					border-radius $borderRadius 0 0 $borderRadius
-					border-width .1rem 0 .1rem .1rem
-				&:not(:first-child):not(:last-child)
-					border-width .1rem 0 .1rem .1rem
-					border-radius 0
-				&:last-child
-					border-radius 0 $borderRadius $borderRadius 0
-					border-width .1rem
-			&--light
-				.btn
-					&.active
-						border-color $inputBorderColor
-						background-color $primary20
-						color $secondary
-						&:hover
-							background-color $primary20
-			&--btn-tooltip
-				.tooltip
-					&:first-child
-						.btn
-							border-radius $borderRadius 0 0 $borderRadius
-					&:not(:first-child):not(:last-child)
-						.btn
-							border-width .1rem .1rem .1rem 0
-							border-radius 0
-					&:last-child
-						.btn
-							border-radius 0 $borderRadius $borderRadius 0
-							border-width .1rem .1rem .1rem 0

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

@@ -1,287 +0,0 @@
-
-// 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)
-
-//new version of demos
-$inputDemoBgColor = #f6f7f8
-$inputDemoBorderColor = #bcc4d7
-$inputDemoPlaceholderColor = #818ca5
-
-$activeColor = #7f98b3
-$activeColorDark = #4c657e
-
-// 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)