@woosmap/ui 4.221.0 → 4.222.0

package/src/styles/console/pricing-slider-back.styl

@@ -0,0 +1,593 @@
+$pR = .6rem
+$discount = #00bd9a
+$cardColor = rgba(40, 50, 98, .6)
+$cardColorHover = #1f2339
+$light14 = rgba($light, 14%)
+$dark14 = rgba($dark, 14%)
+.pricing
+	&-container
+		width 100%
+		border .1rem solid $light20
+		border-top 0
+		.section--light &
+		.section--white &
+		.section--grey &
+			border .1rem solid $dark10
+			border-top 0
+	&-nav
+		position sticky
+		// top 10.7rem
+		top 0
+		z-index 10000
+		width 100%
+	&-description
+		margin-bottom 1rem
+	&-documentation
+		display flex
+		align-items center
+		gap .6rem
+		.icon
+			trans()
+			stroke $logo3
+			fill none
+		&:hover
+			.icon
+				stroke $logo6
+	&-menu
+		flex-grow 1
+		display flex
+		align-items center
+		justify-content center
+		flex-wrap wrap
+		gap 1rem 3rem
+		padding 2rem 2rem
+		font-weight 460
+		font-size 1.9rem
+		border-top .1rem solid $light20
+		border-bottom .1rem solid $light20
+		background-color lighten($cardColor, 10%)
+		.section--light &
+		.section--white &
+		.section--grey &
+			background-color $light
+			border-top .1rem solid $dark10
+			border-bottom .1rem solid $dark10
+		&__item
+			a
+				color $light
+				.section--light &
+				.section--white &
+				.section--grey &
+					color $dark
+	&-total
+		&.mobile
+			display none
+			@media screen and (max-width 960px)
+				display: flex
+				justify-content space-between
+				align-items center
+				flex-direction: row
+				gap 1.6rem
+				flex-wrap wrap
+				padding 1rem 2rem
+				background-color lighten($cardColor, 5%)
+				border-bottom .1rem solid $light20
+				color $light60
+				.section--light &
+				.section--white &
+				.section--grey &
+					background-color #fbfbfb
+					border-bottom .1rem solid $dark10
+					color $dark
+				@media screen and (max-width 360px)
+					justify-content center
+		&.desktop
+			position sticky
+			top 6rem
+			left 0
+			padding 3rem
+			text-align center
+		
+		&__discount
+			.mobile &
+				br()
+				background-color $discount
+				color $light
+				padding .4rem 1rem
+			.desktop &
+				color $light40
+				margin-top 2rem
+				.section--light &
+				.section--white &
+				.section--grey &
+					color $dark60
+		&__plan
+			font-size 1.4rem
+			strong
+				color $discount
+				font-size 1.6rem
+		&__info
+			display flex
+			align-items center
+			gap 2rem
+			.desktop &
+				justify-content center
+				line-height 3rem
+		&__label
+			.mobile &
+				display flex
+				flex-direction: column
+				@media screen and (max-width 360px)
+					align-items center
+
+			.desktop &
+				text-align center
+				font-size 1.8rem
+				letter-spacing .1rem
+				font-weight 300
+				line-height 3
+				text-transform uppercase
+				letter-spacing .2rem
+			.section--light &
+			.section--white &
+			.section--grey &
+				color $dark40
+			&__title
+				font-weight 460
+				text-transform uppercase
+				letter-spacing .2rem
+				font-size 1.1rem
+				line-height: 1.7
+				color $light60
+				.section--light &
+				.section--white &
+				.section--grey &
+					color $dark40
+			&__info
+				font-size 1.2rem
+
+		&__amount
+			color $light60
+			.mobile &
+				font-weight 700
+				line-height: 1.7
+				.section--light &
+				.section--white &
+				.section--grey &
+					color $dark60
+				@media screen and (max-width 360px)
+					margin-right auto
+					margin-left auto
+			.desktop &
+				br()
+				display inline-block
+				margin auto
+				font-size 3rem
+				padding 1.6rem 2rem
+				min-width 16rem
+				font-weight 600
+				background-color $dark6
+				color $dark
+				margin-bottom 1rem
+				a
+					font-size 2rem
+					cursor pointer
+			&__info
+				font-size 1.2rem
+				color $dark60
+				margin-top 0.5rem
+				font-style italic
+			&__asterisk
+				font-size 2rem
+				position relative
+				top -0.8rem
+				margin-left: 0.5rem
+				.mobile &
+					font-size 1.3rem
+					top auto
+					line-height 1.3
+
+	&-simulator
+		&__wrapper
+			width 100%
+			background-color lighten($cardColor, 2%)
+			display flex
+			.section--light &
+			.section--white &
+			.section--grey &
+				background-color $light
+			.pricing-simulator__item
+				&:first-child
+					.pricing-simulator__header
+						padding-top 2.7rem
+						border-top 0
+			.eligible-discount
+				display flex
+				align-items center
+				gap 1rem
+				color $discount
+				margin-bottom 1rem
+				&-img
+					max-width 2rem
+					flex-shrink 0
+			&__pricebox
+				position relative
+				flex: 1 1 0
+				@media screen and (max-width 960px)
+					display none
+			&__data
+				flex: 2 1 0
+				border-right .1rem solid $light14
+				.section--light &
+				.section--white &
+				.section--grey &
+					border-right .1rem solid $dark14
+				@media screen and (max-width 960px)
+					flex: 1
+		
+		&__header
+			display flex
+			align-items center
+			gap 2rem
+			scroll-margin-top 19.7rem
+			z-index 10
+			padding-top 5rem
+			padding-left 4rem
+			padding-bottom 3rem
+			background-color lighten($cardColor, 10%)
+			border-top .1rem solid $light8
+			border-bottom .1rem dashed $light14
+			.section--light &
+			.section--white &
+			.section--grey &
+				background-color $dark2
+				border-top .1rem solid $dark8
+				border-bottom .1rem dashed $dark14
+		&__prod-img
+			max-width 4.8rem
+			border-radius .5rem !important
+		&__prod-name
+			font-size 2.4rem
+			margin-bottom 0
+		&__prod-desc
+			font-size 1.6rem
+		&__prod-price-label
+			font-size 1rem
+			font-weight 460
+			margin-left auto
+			margin-right 1.7rem
+			text-transform uppercase
+			letter-spacing .2rem
+			margin-right 4rem
+			margin-top 3rem
+			width 11rem
+	&-slider
+		&__wrapper
+			trans()
+			z-index 1
+			position relative
+			scroll-margin-top 18.8rem
+			&:not(:last-child)
+				border-bottom .1rem dashed $light20
+				.section--light &
+				.section--white &
+				.section--grey &
+					border-bottom .1rem dashed $dark20
+		&__cont
+			width 100%
+			font-size 1.5rem
+			line-height 1.3
+		&__item
+			trans()
+			display flex
+			gap 2vw
+			padding 0 4rem 0 5rem
+		&__info
+			h3
+				font-size 2rem
+				margin-bottom 1rem
+			&__header
+				padding 5rem 4rem 3rem 4rem
+		&__documentation
+			margin-top 2rem
+			display flex
+			align-items center
+			gap .6rem
+			padding 2rem 4rem 2rem 4rem
+			background-color $dark1
+			border-top .1rem solid $dark2
+			a
+				display inline-flex
+				align-items center
+				gap .6rem
+				.icon
+					trans()
+					stroke $logo3
+					fill none
+				&:hover
+					.icon
+						stroke $logo6
+		&__detailed-price
+			&-wrapper
+				padding: 2rem 2rem 0 2rem
+			table
+				width: 100%
+				margin 2rem 0 0 0
+				font-size 1.5rem
+				border 0
+				border-radius 1rem
+				box-shadow none
+				thead
+				tr
+					border-radius 0
+					border 0
+					&:nth-child(even)
+						background-color $dark4
+				tbody
+				tr
+					border-radius 0
+					border 0
+					&:nth-child(odd)
+						background-color $dark1
+					td
+						border 0
+						padding 1rem 2rem
+						color $dark80
+						width: 50%
+						&:first-child
+							font-weight 500
+							width 26rem
+		&__queries
+			max-width 14rem
+			&__label
+				text-transform uppercase
+				text-align center
+				font-size 1rem
+				letter-spacing .15rem
+				font-weight 460
+				margin-bottom 1.6rem
+			.input__item:not([type=button]):not([type=checkbox]):not([type=radio])
+				trans()
+				min-width 10rem !important
+				text-align center !important
+				height 4rem !important
+				font-weight 460 !important
+				color $dark !important
+		&__price
+			display flex
+			flex-direction column
+			align-items center
+			width 15rem
+			.button-contact
+				margin-top 2.9rem
+				.btn
+					color $light !important
+			.free-label
+			.amount
+				br()
+				display flex
+				align-items center
+				justify-content center
+				height 4rem
+				font-size 2.2rem
+				line-height 2.2rem
+				text-align center
+				font-weight 600
+				margin-top 2.8rem
+				white-space nowrap
+				color $light
+				.section--light &
+				.section--white &
+				.section--grey &
+					color $dark
+			.free-label
+				color $discount
+
+	&-vertical-slider
+		height 6rem
+		flex-grow 1
+		min-width 30rem
+		display flex
+		margin-top 4.5rem
+	&-mark
+		position relative
+		z-index 10
+		top $pR
+		background-color $light40
+		width .1rem
+		height .6rem
+		.section--light &
+		.section--white &
+		.section--grey &
+			background-color $dark40
+		span
+			position absolute
+			top 2rem
+			left -50%
+			transform translateX(-50%)
+	&-track
+		height $pR
+		&-0
+			border-radius $borderRadius 0 0 $borderRadius
+			background-color $logo2
+		&-1
+			border-radius 0 $borderRadius $borderRadius 0
+			background-color #F1F1F1
+	&-thumb
+		position relative
+		width .1rem
+		z-index 15 !important
+		> span
+			br()
+			padding .3rem .8rem
+			min-width 3rem
+			position absolute
+			left 50%
+			transform translateX(-50%)
+			bottom 2rem
+			display flex
+			justify-content center
+			align-content center
+			background-color $logo3
+			color $light
+			font-weight 500
+			font-size 1.4rem
+			letter-spacing .1rem
+			text-shadow .1rem .1rem 0 $dark20
+			box-shadow inset 0 0 .6rem .1rem $light30
+			line-height 1.4
+			&:before
+				br(50)
+				position absolute
+				top 3.8rem
+				content ''
+				width 1.7rem
+				height 1.7rem
+				box-shadow 0 0 1rem $dark10
+				background-color $light
+				border .1rem solid $dark20
+	&-summary
+		display flex
+		align-items center
+		justify-content: space-between
+		padding 1rem 1.8rem
+		gap 1.2rem
+		flex-basis 100%
+		&:nth-child(even)
+			background-color $dark4
+		&-wrapper
+			br()
+			display flex
+			flex-direction column
+			border .1rem solid $borderColor
+			max-height: calc(100vh - 27rem)
+			margin-top 2rem
+		&-content
+			overflow-y: auto
+		&-header
+			.mobile &
+				font-weight 460
+				text-transform uppercase
+				letter-spacing .2rem
+				font-size .9rem
+				line-height: 1.7
+				color $light60
+				margin-right 6rem
+				.section--light &
+				.section--white &
+				.section--grey &
+					color $dark40
+					
+			.desktop &
+				text-align center
+				font-size 1.5rem
+				font-weight 300
+				line-height 3
+				text-transform uppercase
+				letter-spacing .1rem
+				border-bottom .1rem solid $light14
+				.section--light &
+				.section--white &
+				.section--grey &
+					border-bottom .1rem solid $borderColor
+				
+		&-info
+			flex 3
+			text-align: left
+		&-product
+			flex 1
+			margin-bottom 0.5rem
+		&-amount
+			font-weight: 700
+			flex 1
+		&-queries
+			font-weight 460
+			font-size 1.2rem
+
+@media screen and (max-width 960px)
+	.pricing
+		&-simulator
+			&__header
+				padding 2rem 0 2rem 2rem !important
+			&__prod
+				&-price-label
+					display none
+				&-name
+					font-size 2rem
+		&-menu
+			padding-left 1rem
+			padding-right 1rem
+			font-size 1.5rem
+			font-weight 460
+		&-slider
+			&__detailed-price
+				table
+					margin-top 0
+			&__info
+				&__header
+					padding 2rem 2rem 3rem 2rem
+			&__cont
+				&:not(:last-child)
+					border-bottom .1rem solid $light10
+					.section--light &
+					.section--white &
+					.section--grey &
+						border-bottom .1rem solid $dark10
+				&:hover
+					.input__item:not([type=button]):not([type=checkbox]):not([type=radio])
+						background-color transparent !important
+				.pricing-vertical-slider
+					order 4
+					margin-top 4rem
+					margin 2rem auto 0 auto
+					width 80vw
+					min-width auto
+				.pricing-slider__queries
+					order 3
+			&__item
+				flex-direction column
+				align-items center
+				padding 0 2rem
+				width 100vw
+			&__documentation
+				display inline-block
+				width 100%
+				padding 1rem 2rem
+				line-height 2
+			&__detailed-price-btn
+				order 5
+			&__price
+				line-height 2rem
+				width 100%
+				.free-label
+					margin-top 0
+				.amount
+					margin 0
+					font-size 3rem
+				.button-contact
+					margin auto
+			&__queries
+				padding-top 1rem
+				padding-bottom 1rem
+				margin-bottom 0
+				&__label
+					margin-bottom 0
+				.input__item:not([type=button]):not([type=checkbox]):not([type=radio])
+					background-color transparent !important
+					border 0 !important
+					color $light !important
+					.section--light &
+					.section--white &
+					.section--grey &
+						color $dark !important
+					&:hover
+						background-color transparent !important
+
+@media screen and (max-width 360px)
+	.pricing
+		&-nav
+			top 6.6rem
+		&-slider
+			&__info
+				h3
+					font-size 2rem

package/src/website.js

@@ -1,27 +1,27 @@
-export { default as Button } from '@/components/Button/Button';
-export { default as Switch } from '@/components/Switch/Switch';
-export { default as Dropdown } from '@/components/Dropdown/Dropdown';
-export { default as Flash } from '@/components/Flash/Flash';
-export { default as Icon } from '@/components/Icon/WebSiteIcon';
+export { default as Button } from './components/Button/Button';
+export { default as Switch } from './components/Switch/Switch';
+export { default as Dropdown } from './components/Dropdown/Dropdown';
+export { default as Flash } from './components/Flash/Flash';
+export { default as Icon } from './components/Icon/WebSiteIcon';
 
-export { default as Input } from '@/components/Input/Input';
-export { default as PasswordStrengthBar } from '@/components/PasswordStrengthBar/PasswordStrengthBar';
-export { default as Popover } from '@/components/Popover/Popover';
-export { default as Select } from '@/components/Select/Select';
+export { default as Input } from './components/Input/Input';
+export { default as PasswordStrengthBar } from './components/PasswordStrengthBar/PasswordStrengthBar';
+export { default as Popover } from './components/Popover/Popover';
+export { default as Select } from './components/Select/Select';
 
-export { default as LocalitiesDemo } from '@/components/Demo/LocalitiesDemo';
-export { default as W3WDemo } from '@/components/Demo/W3WDemo';
-export { default as LocalitiesCheckoutUKDemo } from '@/components/Demo/LocalitiesUKAddressDemo';
-export { default as LocalitiesCheckoutFRDemo } from '@/components/Demo/LocalitiesFRAddressDemo';
-export { default as AutocompleteAddressDemo } from '@/components/Demo/AutocompleteAddressDemo';
-export { default as LocalitiesAddressDemo } from '@/components/Demo/LocalitiesAddressDemo';
-export { default as LocalitiesAllDemo } from '@/components/Demo/LocalitiesAllDemo';
-export { default as GeolocationDemo } from '@/components/Demo/GeolocationDemo';
-export { default as DistanceDemo } from '@/components/Demo/DistanceDemo';
-export { default as SearchDemo } from '@/components/Demo/SearchDemo';
-export { default as AddressDemo } from '@/components/Demo/AddressDemo';
-export { default as MapDemo } from '@/components/Demo/MapDemo';
-export { default as AddressAutocomplete } from '@/components/Woosmap/AddressAutocomplete';
-export { default as CountrySelect } from '@/components/Select/CountrySelect';
-export { default as PricingSimulator } from '@/components/PricingSlider/PricingSimulator';
-export { default as CodeSnippet } from '@/components/CodeSnippet/CodeSnippet';
+export { default as LocalitiesDemo } from './components/Demo/LocalitiesDemo';
+export { default as W3WDemo } from './components/Demo/W3WDemo';
+export { default as LocalitiesCheckoutUKDemo } from './components/Demo/LocalitiesUKAddressDemo';
+export { default as LocalitiesCheckoutFRDemo } from './components/Demo/LocalitiesFRAddressDemo';
+export { default as AutocompleteAddressDemo } from './components/Demo/AutocompleteAddressDemo';
+export { default as LocalitiesAddressDemo } from './components/Demo/LocalitiesAddressDemo';
+export { default as LocalitiesAllDemo } from './components/Demo/LocalitiesAllDemo';
+export { default as GeolocationDemo } from './components/Demo/GeolocationDemo';
+export { default as DistanceDemo } from './components/Demo/DistanceDemo';
+export { default as SearchDemo } from './components/Demo/SearchDemo';
+export { default as AddressDemo } from './components/Demo/AddressDemo';
+export { default as MapDemo } from './components/Demo/MapDemo';
+export { default as AddressAutocomplete } from './components/Woosmap/AddressAutocomplete';
+export { default as CountrySelect } from './components/Select/CountrySelect';
+export { default as PricingSimulator } from './components/PricingSlider/PricingSimulator';
+export { default as CodeSnippet } from './components/CodeSnippet/CodeSnippet';

package/craco.config.js

@@ -1,9 +0,0 @@
-const path = require('path');
-
-module.exports = {
-    webpack: {
-        alias: {
-            '@': path.resolve(__dirname, 'src'),
-        },
-    },
-};