@woosmap/ui 3.32.0 → 3.33.0

package/src/styles/website/card.styl

@@ -0,0 +1,302 @@
+.wcard
+	border .1rem solid $borderColor
+	trans()
+	br()
+	display flex
+	position relative
+	text-decoration none
+	overflow hidden
+	box-shadow 0 1.5rem 3rem $dark15
+	font-size $cardFontSize
+	line-height $cardLineHeight
+	background $light
+	color $textColor
+	cursor pointer
+	&-container
+		margin 0 auto
+		max-width 103rem
+		width 100%
+		display flex
+		flex-wrap wrap
+		justify-content center
+		a
+			cursor default
+			&:hover
+				.icon
+					fill $primary !important
+			.wcard--small
+				.icon
+					fill $secondary !important
+
+		.wcard--office
+			border 0
+		> :nth-child(1)
+		> :nth-child(9)
+			.wcard--office
+				background-color rgba($logo1, 90%)
+		> :nth-child(2)
+		> :nth-child(10)
+			.wcard--office
+				background-color rgba($logo2, 90%)
+		> :nth-child(3)
+		> :nth-child(11)
+			.wcard--office
+				background-color rgba($logo3, 90%)
+		> :nth-child(4)
+		> :nth-child(12)
+			.wcard--office
+				background-color rgba($logo4, 90%)
+		> :nth-child(5)
+		> :nth-child(13)
+			.wcard--office
+				background-color rgba($logo5, 90%)
+		> :nth-child(6)
+		> :nth-child(14)
+			.wcard--office
+				background-color rgba($logo6, 90%)
+		> :nth-child(7)
+		> :nth-child(15)
+			.wcard--office
+				background-color rgba($logo7, 90%)
+		> :nth-child(8)
+		> :nth-child(16)
+			.wcard--office
+				background-color rgba($logo8, 90%)
+			
+
+	.section--dark &
+	.section--color1 &
+	.section--color2 &
+	.section--color3 &
+	.section--color4 &
+	.section--color5 &
+	.section--color6 &
+	.section--color7 &
+	.section--color8 &
+		border-color $dark50
+		box-shadow 0 1.5rem 3rem $dark60
+	&:not(.wcard--featured)
+		flex-direction column
+	.category
+		font-weight 400
+		font-size $fontSizeSmall
+		margin-top $cardPadding + 1
+		margin-bottom $cardPadding
+	.title
+		font-size $cardTitle
+		line-height $cardTitleLineHeight
+		font-weight 600
+		margin-bottom 0
+		min-height 7.8rem
+		overflow hidden
+		text-overflow ellipsis
+		display -webkit-box
+		-webkit-line-clamp 3
+		-webkit-box-orient vertical
+		text-shadow none
+		.image-title
+			max-width 16rem
+			margin auto
+	.paragraph
+		margin-bottom 0 !important
+		height 7rem
+		display -webkit-box
+		-webkit-line-clamp 3
+		-webkit-box-orient vertical
+		text-shadow none
+	&__header
+			trans()
+			height $cardHeaderHeight
+			background-repeat no-repeat
+			background-size cover
+			background-position 50% 50%
+			opacity .7
+	&__body
+		padding 0 $cardPadding
+	&__footer
+		padding $cardPadding
+	&__boxlink
+		width 100%
+	&--featured
+		flex-grow 1
+		justify-content center
+		.category
+			margin 0 0 2rem 0
+			font-weight 400
+			font-size $fontSizeSmall
+		.title
+			height auto
+			font-weight 700
+			font-size $title4
+			line-height $title4 * 1.4
+			display -webkit-box
+			-webkit-line-clamp 6
+			-webkit-box-orient vertical
+			margin-bottom 3rem !important
+		.wcard
+			&__content
+				display flex
+				flex-direction column
+				flex-grow 1
+				border-left 3rem solid $logo6
+				padding 2.3rem 4rem
+				height 39.2rem
+			&__header
+				width 100%
+				max-width 43rem
+				height auto
+			&__body
+				padding 0
+				flex-grow 1
+			&__footer
+				padding 0
+	&--small
+		max-width 28rem
+		flex-shrink 1
+		background-color unset
+		box-shadow none
+		border 0
+		margin 0 3rem 13rem 3rem
+		.title
+			font-size $title6 + .2
+			font-weight 700
+			line-height $title6 * 1.6
+			margin-bottom 3rem
+			-webkit-line-clamp 4
+		.wcard
+			&__header
+				br()
+				border .1rem solid $borderColor
+				width 100%
+				height 17rem
+				display flex
+				align-items center
+				justify-content center
+				background-color $light
+				margin-bottom 3rem
+				img
+				svg
+					width 20rem
+			&__body
+				padding 0
+				flex-grow 1
+			&__footer
+				padding 0
+			&__link
+				.btn
+					color $secondary
+					.icon
+						fill $secondary
+		&:hover
+			&.wcard
+				background-color unset
+				box-shadow none
+				border 0
+	&--demo
+		.title
+			margin-bottom 1rem
+			display flex
+			align-items center
+			color $light
+			span
+				display -webkit-box
+				-webkit-line-clamp 2
+				-webkit-box-orient vertical
+
+		.wcard
+			&__header
+				opacity 1
+			&__body
+				.paragraph
+					margin-bottom 2rem !important
+					overflow hidden
+					color $light
+			&__link
+				.btn
+					color $logo1
+					.icon
+						fill $logo1 !important
+
+	&--office
+		margin 0 2rem 10rem 2rem
+		width 28rem
+		min-height 38.4rem
+		justify-content space-between
+		position relative
+		opacity 1
+		.city
+			trans()
+			fullwh()
+			z-index 0
+			position absolute
+			top 0
+			left 0
+			background-repeat no-repeat
+			background-size cover
+			opacity .2
+		.title
+			trans()
+			font-size $title5
+			line-height $title5 * 1.3
+			margin-bottom 1rem
+			display flex
+			align-items center
+		.wcard
+			&__header
+				trans()
+				textShadow()
+				z-index 1
+				opacity 1
+				padding 2rem 2rem 0 2rem
+				color $light
+			&__body
+				trans()
+				textShadow()
+				z-index 1
+				padding 2rem
+				color $light
+		&:hover
+			border-color transparent
+			.city
+				opacity 1
+			.wcard
+				&__header .title
+				&__body
+					opacity 0.01
+
+
+	&:hover
+		border-color $dark15
+		box-shadow 0 1.5rem 1.6rem $dark15
+		transform translateY(-.4rem)
+		color $textColor
+		.wcard
+			&__header
+				opacity 1
+			&__link
+				.btn
+					color $linkColorHover !important
+					.icon
+						fill $linkColorHover !important
+@media screen and (max-width 768px)
+	.wcard--featured
+		flex-direction column
+		.title
+			font-size $title5
+			line-height $title5 * 1.3
+		.wcard
+			&__header
+				height 22rem
+				max-width 100%
+			&__content
+				height auto
+				border-top 3rem solid $logo6
+				border-left 0
+				padding 2.3rem
+@media screen and (max-width 580px)
+	.wcard--small
+		width auto
+		max-width unset
+		margin 0 0 5rem 0
+	.wcard--office
+		margin 0 0 5rem 0

package/src/styles/website/colors.styl

@@ -1,42 +1,204 @@
-$importantColor = red
-$error = #a94442
-$primary = rgba(30, 136, 229, 1)
-$primary90 = rgba(30, 136, 229, .9)
-$primary80 = rgba(30, 136, 229, .8)
-$primary70 = rgba(30, 136, 229, .7)
-$primary60 = rgba(30, 136, 229, .6)
-$primary50 = rgba(30, 136, 229, .5)
-$primary40 = rgba(30, 136, 229, .4)
-$primary30 = rgba(30, 136, 229, .3)
-$primary20 = rgba(30, 136, 229, .2)
-$primary15 = rgba(30, 136, 229, .15)
-$primary10 = rgba(30, 136, 229, .1)
-$primary8 = rgba(30, 136, 229, .08)
-$primary5 = rgba(30, 136, 229, .05)
-$primary2 = rgba(30, 136, 229, .02)
-
-$primary-dark = #187bd1
-$primary-light = $primary15
-
-$secondary = #c83587
-$secondary-light = #f6b8da
-
-$textColor = #000
-$success = #2ad685 // #21db83
-
-$focus = $primary
-// Tabs
 
-$tabHeader = #1E88E5
-$tabHeader2 = #006ecf
-$tabContent = $light
+// Main colors
+$logo1 =  #4fc3f7
+$logo1Dark = #0BB1FC
+
+$logo2 =  #5586ff
+$logo2Dark = #376BED
+
+$logo3 = #3d5afe
+$logo3Dark = #2540D8
+
+$logo4 = #3949ab
+$logo4Dark = #212F88
+
+$logo5 = #c51162
+$logo5Dark = #A50A50
+
+$logo6 = #f50057
+$logo6Dark = #D5014C
+
+$logo7 = #ff5252
+$logo7Dark = #DB4545
+
+$logo8 =  #ffab00
+$logo8Dark = #E39800
+
+$linkColorLight = #01b3ff
+$linkColor = $logo3
+$linkColorHover = $logo8
+
+$enterprisePlan = #31436C
+$checked = #60CE97
+
+$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 = rgba($secondary, .24)
+
+$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
+Plan = #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
 
-$tabBtn = $light60 // $dark40
-$tabBtnHover = $light80 // $dark60
-$tabBtnActive = $light // #000
-$tabBtnActiveBorder = $tabBtnActive
-$tabBtnHoverBorder = $light40// #999
+
+$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
@@ -44,20 +206,25 @@ $demoWrapper = $primary5
 $demoWrapper2 = $primary20
 $demoWrapperBorder = $light
 $result = $tabContent
+$resultDark = $tabHeaderDark
 $resultMatch = #ffe000
 
 
+//new version of demos
+$inputDemoBgColor = #f6f7f8
+$inputDemoBorderColor = #bcc4d7
+$inputDemoPlaceholderColor = #818ca5
+
+$activeColor = #7f98b3
+$activeColorDark = #4c657e
+
 // Inputs
-$inputBorderColor = #696969
-$placeHolderColor = #808080
-$inputDisabledBorderColor =  #ddd
-$placeHolderDisabledColor = #ddd
+$inputBgColor = $light
+$inputBorderColor = $inputDemoBorderColor
+$placeHolderColor = $inputDemoPlaceholderColor
+
+
 
-// Switch
-$switch-inactive=$dark40
-$switch-disabled= $dark10
-$switch-active= $success
-$switch-focus= $primary
 
 $dark = rgba(0, 0, 0, 1)
 $dark90 = rgba(0, 0, 0, .9)
@@ -66,7 +233,9 @@ $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)
@@ -102,4 +271,68 @@ $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)
+$light1 = rgba(255, 255, 255, .01)
+
+
+
+// Products
+
+$search = #388aff
+$search10 = rgba($search, .1)
+$searchDark = #0D63DD
+
+$localities = #009DFF
+$localities10 = rgba($localities, .1)
+$localitiesDark = #0085D8
+
+$address = #4AC6F2
+$address10 = rgba($address, .1)
+$addressDark = #0D9ED1
+
+$multiSearch = #688FCE
+$multiSearch10 = rgba($multiSearch, .1)
+$multiSearchDark = #3A68B2
+
+$geolocation = #506BDE
+$geolocation10 = rgba($geolocation, .1)
+$geolocationDark = #1F40CC
+
+
+$merchant = #7F8A98
+$merchant10 = rgba($merchant, .1)
+$merchantDark = #4F5D6E
+
+$storeLocator = #82A1A7
+$storeLocator10 = rgba($storeLocator, .1)
+$storeLocatorDark = #546D72
+
+$geofencing = #939AB1
+$geofencing10 = rgba($geofencing, .1)
+$geofencingDark = #59617C
+
+$connectors = #A193BC
+$connectors10 = rgba($connectors, .1)
+$connectorsDark = #6C5E88
+
+
+$distance = #FF8A65
+$distance10 = rgba($distance, .1)
+$distanceDark = #E06138
+
+$traffic = #FF6565
+$traffic10 = rgba($traffic, .1)
+$trafficDark = #E04B4B
+
+
+$map = #A1887F
+$map10 = rgba($map, .1)
+$mapDark = #906455
+
+$mapping = #B9715A
+$mapping10 = rgba($mapping, .1)
+$mappingDark = #96503A
+
+
+$showcases = #68668E
+$showcases10 = rgba($showcases, .1)
+$showcasesDark = #444177