@woosmap/ui 4.120.0 → 4.121.0

package/src/styles/website/mixins.styl

@@ -1,251 +0,0 @@
-font()
-	font-family $fontFamily
-	font-size $fontSize
-	font-weight $fontWeight
-	color $secondary
-	line-height $fontSize + .4
-	-webkit-font-smoothing antialiased
-	-moz-osx-font-smoothing grayscale
-
-inputFont()
-	font-family $fontFamily2
-
-f1()
-	font-size $title
-	font-weight 700
-	line-height $title * 1.3
-	margin-bottom 4rem
-f2()
-	font-weight 700
-	font-size $title2
-	line-height $title2 * 1.4
-	margin-bottom 4rem
-f3()
-	font-weight 700
-	font-size $title3
-	line-height $title3 * 1.3
-	margin-bottom 4rem
-f4()
-	font-weight 700
-	font-size $title4
-	line-height $title4 * 1.3
-	margin-bottom 4rem
-f5()
-	font-weight 700
-	font-size $title5
-	line-height $title5 * 1.3
-	margin-bottom 4rem
-f6()
-	font-weight 700
-	font-size $title6
-	line-height $title6 * 1.3
-	margin-bottom 4rem
-
-// 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()
-	border()
-	box-shadow 0 2rem 2rem $dark10
-
-
-// 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
-buttonMini()
-	height $buttonHeightMini
-	font-size $buttonFontSizeMini
-	line-height $buttonLineHeightMini
-	padding $buttonPaddingMini
-	&.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()
-	trans()
-	margin 0 auto
-	padding 0 $padding * 3
-	max-width $wrapperWidth
-	width 100%
-
-textShadow($c = $dark30)
-	text-shadow .2rem .2rem 0 $c
-
-tilt()
-	transform skewY(-2deg)
-
-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%)
-
-darkgradient()
-	background $darkGradient2
-	background radial-gradient(circle, $darkGradient2 0%, $darkGradient1 40%, #252525 100%)
-
-dark()
-	background $darkGradient1
-
-white()
-	background-color $light
-whiteHover()
-	background-color darken($dark3, 15%)
-
-light()
-	background-color $bodyColor
-lightHover()
-	background-color darken($bodyColor, 15%)
-
-
-color1()
-	background-color $logo1
-color1Hover()
-	background-color darken($logo1, 15%)
-
-color2()
-	background-color $logo2
-color2Hover()
-	background-color darken($logo2, 15%)
-
-color3()
-	background-color $logo3
-color3Hover()
-	background-color darken($logo3, 15%)
-
-color4()
-	background-color $logo4
-color4Hover()
-	background-color darken($logo4, 15%)
-
-color5()
-	background-color $logo5
-color5Hover()
-	background-color darken($logo5, 15%)
-
-color6()
-	background-color $logo6
-color6Hover()
-	background-color darken($logo6, 15%)
-
-color7()
-	background-color $logo7
-color7Hover()
-	background-color darken($logo7, 15%)
-
-color8()
-	background-color $logo8
-color8Hover()
-	background-color darken($logo8, 15%)
-
-placeholder($c)
-	&::-webkit-input-placeholder
-		color $c
-	&:-moz-placeholder
-		color $c
-	&::-moz-placeholder
-		color $c
-	&:-ms-input-placeholder
-		color $c

package/src/styles/website/popover.styl

@@ -1,8 +0,0 @@
-.popover
-	&__content
-		max-width 46rem
-		max-height 40rem
-		overflow-y auto
-		padding 0
-		border .1rem solid $borderColor
-		box-shadow 0 1rem 2rem $borderColor

package/src/styles/website/select.styl

@@ -1,118 +0,0 @@
-.asyncselect__control--is-focused .asyncselect__single-value
-	display none
-
-.select
-	line-height initial
-	width 100%
-.select
-.asyncselect
-	&__label
-		margin-bottom 1rem
-		display block
-	&__error
-		display block
-		margin-top 1rem
-		color $error
-	&__control
-		inputFont()
-		font-size 1.3rem
-		min-width $inputMinWidth
-		min-height $inputHeight !important
-		border-radius .6rem !important
-		background-color $inputBgColor !important
-		&:not(.select__control--is-focused):not(.asyncselect__control--is-focused)
-			border-color $inputBorderColor !important
-			.error > &
-				border-color $error !important
-		&--is-focused
-			border-color $secondary !important
-			box-shadow none !important
-			.select__indicator
-			.asyncselect__indicator
-				svg
-					fill $secondary
-	&__value-container
-		padding-left 1rem !important
-		.select__item--language &
-			overflow-y auto !important
-			max-height 7rem
-	&__single-value
-		color $secondary !important
-	&__indicator
-		padding-left 1rem !important
-		padding-right 1rem !important
-		&-separator
-			background-color $activeColor
-		svg
-			fill $activeColor
-	&__placeholder
-		white-space nowrap
-		color $placeHolderColor
-	&__option
-	&__multi-value
-		inputFont()
-		font-size 1.3rem !important
-		color $activeColorDark !important
-		.flag
-			margin 0 0 0 .6rem
-			width 2.2rem
-			height 1.5rem
-	&__option
-		display flex !important
-		align-items center
-		color $secondary !important
-		mbi()
-		&--is-disabled
-			color $secondary40 !important
-		&--is-selected
-			color $light !important
-			background-color #819cb9 !important
-			&.select__option--is-focused
-				color $light !important
-				background-color #819cb9 !important
-		&--is-focused:not(.select__option--is-selected)
-			background-color #cddbeb !important
-			color $secondary !important
-	&__multi-value
-		background-color $primary !important
-		border-radius .4rem !important
-		flexMiddle()
-		&--is-disabled
-			opacity .6
-		&__label
-		&__remove
-			border-radius .4rem !important
-			background-color transparent !important
-			padding .5rem !important
-		&__label
-			padding-right .2rem !important
-			color $light !important
-			&:only-child
-				margin-right .3rem !important
-		&__remove
-			cursor pointer
-		svg
-			fill $light !important
-	&--small
-		.select
-		.asyncselect
-			&__control
-				min-width 18rem
-				min-height $inputHeightSmall !important
-			&__indicator
-				padding .2rem .6rem !important
-			&__option
-			&__multi-value
-				background-color $light
-				.flag
-					margin 0 0 0 .6rem
-					width 2.2rem
-					height 1.5rem
-				&__label
-					padding 0 0 0 1rem !important
-					line-height 1.2
-			&__option
-				.flag
-					margin 0 1rem 0 0
-			&__value-container
-				padding 0 0 0 .7rem !important

package/src/styles/website/tab.styl

@@ -1,42 +0,0 @@
-$tabPadding = 2rem
-.tab
-	height 100%
-	pre
-	code
-		margin 0 !important
-		padding 0  !important
-		background-color transparent !important
-		width 100%
-	&__header
-		padding 0 $tabPadding
-		flex-shrink 0
-		display flex
-		align-items center
-		justify-content space-between
-		&__buttons
-			display flex
-			align-items center
-			mbi(3)
-			fullw()
-			position relative
-			li
-				min-width 0
-	&__content
-		display none
-		padding $tabPadding + .5
-		line-height 1.2
-		height 30.6rem
-		max-height 30.6rem
-		&.active
-			display flex
-			height 100%
-@media screen and (max-width 670px)
-	.tab
-		&__header
-			padding 0 1.2rem
-			&__buttons
-				mbi(1)
-				.btn
-					font-size 70%
-		&__content
-			padding $tabPadding - .5

package/src/styles/website/variables.styl

@@ -1,135 +0,0 @@
-// Layout
-$wrapperWidth = 125rem
-$wrapperReducedWidth = 96rem
-$headerHeight = 6.7rem
-$headerBannerHeight = 5.2rem
-$sectionPadding = 18.5rem
-$topRainbowHeight = 3.8rem
-$gutter2c = 3rem
-$quoteIcon = 44rem
-
-$fontFamily = 'Poppins', sans-serif
-$fontFamily2 = 'Roboto Mono', monospace
-$fontSize = 1.8rem
-$lineHeight = $fontSize * 2 - .8
-$fontWeight = 400
-
-$fontSizeSmall = $fontSize - .2
-$fontSizeMini  = $fontSize - .4
-$fontSizeNano  = $fontSize - .6
-
-$fontSizeHeader = 1.3rem
-$fontSizeFooter = 1.6rem
-
-
-$title = 4.6rem
-$title2 = 4rem
-$title3 = 3.2rem
-$title4 = 2.7rem
-$title5 = 2.2rem
-$title6 = 2rem
-
-$borderRadius = .6rem
-
-//new version of demos
-$demofilterWidth = 27.4rem
-$fontSizeDemo = 1.3rem
-$demoPadding = 1.6rem
-$demoBr = .3rem
-$inputFontSizeDemo = 1.1rem
-$inputDemoHeight = 3rem
-$footerDemoHeight = 4rem
-
-
-
-$col2 = 58rem
-$col3 = 31.5rem
-$col4 = 22rem
-
-// card articles
-$cardHeaderHeight = 21rem
-$cardFontSize = 1.6rem
-$cardTitle = 1.8rem
-$cardTitleLineHeight = 2.6rem
-$cardLineHeight = $cardFontSize * 2 - 1
-$cardPadding = 2rem
-
-// card pricing
-$pricingCardWidth = 30.2rem
-$pricingCardpadding = 3.4rem
-$pricingCardHeaderHeight = 6.2rem
-$pricingCardCtaHeight = 5.2rem
-$pricingCardTitleSize = $title6
-$pricingCardAmountSize = $title2 * 2
-$pricingCardUnitSize = $title6
-$pricingCardPeriodSize = $fontSizeSmall
-$pricingCardPriceSize = $title2
-$pricingCardPriceUnitSize = $fontSizeSmall
-
-// Buttons & Inputs
-
-$padding = 2rem
-$contentPadding = 2.8rem
-
-
-
-$sidebarButtonSize = 5rem
-
-$buttonHeight = 3.8rem
-$buttonPadding = 0 $padding 0 $padding
-$buttonFontSize = $fontSize
-$buttonLineHeight = $fontSize * 2
-
-$buttonHeightSmall = $buttonHeight - .6
-$buttonPaddingSmall = 0 $padding - .1 0 $padding - .1
-$buttonFontSizeSmall = $fontSize - .1
-$buttonLineHeightSmall = $buttonFontSizeSmall * 2
-
-$buttonHeightMini = $buttonHeight - 1
-$buttonPaddingMini = 0 $padding - 1.2 0 $padding - 1.2
-$buttonFontSizeMini = $fontSizeSmall - .4
-$buttonLineHeightMini = $buttonFontSizeMini * 2
-
-$buttonHeightNano = $buttonHeight - 1.4
-$buttonPaddingNano = 0 $padding - .4 0 $padding - .4
-$buttonFontSizeNano = $fontSize  - .3
-$buttonLineHeightNano = $buttonFontSizeNano * 2
-
-$buttonHeightLarge = $buttonHeight  + 1.2
-$buttonPaddingLarge = 0 $padding + .6 0 $padding + .6
-$buttonFontSizeLarge = $fontSize - .2
-$buttonLineHeightLarge = $buttonFontSizeLarge * 2
-
-
-$inputMinWidth = 16rem
-
-$inputHeight = $buttonHeight
-$inputPadding = 0 1rem .2rem 1rem
-$inputFontSize = $fontSize
-$inputLineHeight = $buttonLineHeight
-
-$inputHeightSmall = $buttonHeightSmall
-$inputPaddingSmall = 0 $padding - .1 .2rem $padding - .1
-$inputFontSizeSmall = $buttonFontSizeSmall
-$inputLineHeightSmall = $buttonLineHeightSmall
-
-$inputHeightLarge = $buttonHeightLarge
-$inputPaddingLarge = 0 $padding + .4 .2rem $padding + .4
-$inputFontSizeLarge = $buttonFontSizeLarge
-$inputLineHeightLarge = $buttonLineHeightLarge
-
-// tabs
-
-$tabBtnHeight = $buttonHeight
-$tabBtnPillHeight = $buttonHeight
-
-
-// panel
-$panelWidth = 36rem
-$panelpadding = 2.4rem
-$contentHeaderHeight = 7.8rem
-$panelHeaderHeight = $contentHeaderHeight
-
-// modal
-$modalWidth = 70rem
-$modalPadding = 2.4rem