@woosmap/ui 3.32.0 → 3.36.0

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

@@ -1,82 +0,0 @@
-.dropdown
-	position unset
-	&__container
-		position absolute
-		top 6rem
-		left 0
-		width 100%
-		display flex
-		align-items flex-start
-		justify-content center
-	&__menu
-		width 97%
-		max-width 102.2rem
-		padding 1.6rem 2rem 2rem 2rem
-		position relative
-		left auto !important
-		right auto !important
-		top auto !important
-		bottom auto !important
-		transform unset !important
-		margin-top 0 !important
-		&__section
-			flex-shrink 1
-			max-width 22.5rem
-			min-width 18rem
-			width 100%
-			margin 0 1rem
-		&__item
-			font-size 1.3rem
-			line-height 2.4rem
-			display flex
-			flex-direction column
-			align-items flex-start
-			justify-content center
-			flex-shrink 0
-			border-radius $borderRadius !important
-			height auto
-			min-height $buttonHeight + .6rem
-			> :not(.btn):not(.popover__child)
-				min-height $buttonHeight + .6rem
-				trans()
-				padding 0 1.2rem 0 .6rem
-				text-decoration none
-				flex-shrink 0
-				cursor pointer
-				&:hover
-					background-color $dark2
-					color $dark
-					.dropdown__menu__item
-						&__icon
-							background-color $logo4
-						&__desc
-							color $dark
-			&__icon
-				br()
-				sq(3.2)
-				trans()
-				display flex
-				align-items center
-				justify-content center
-				flex-shrink 0
-				background $logo2
-				margin-right 1rem
-				.icon
-					fill #fff !important
-			&__container
-				display flex
-				flex-direction column
-				flex-shrink 0
-			&__title
-				font-size 1.1rem
-				text-transform uppercase
-				color $category
-				font-weight 600
-				padding 0 1.2rem 0 .6rem
-			&__name
-				font-weight 600
-			&__desc
-				color $category
-		.category
-			flex-shrink 0
-			margin-top 2rem

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

@@ -1 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Poppins:ital,wght@0,400;0,500;0,600;0,700;0,900;1,400;0,500;1,600;1,700;1,900&family=Roboto+Mono&display=swap');

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

@@ -1,138 +0,0 @@
-.input
-	width 100%
-	&__container
-		position relative
-		inputFont()
-		font-size 1.3rem
-	&__label
-		display block
-		margin-bottom 1rem
-		.input--large &
-			margin-bottom 1rem
-			font-size $inputFontSizeLarge
-		.input--small &
-			margin-bottom .6rem
-			font-size $inputFontSizeSmall
-	&__error
-		color $error
-		display block
-		margin .5rem 0 .5rem 0
-	&--iconed
-		.icon
-			fill $inputBorderColor
-			position absolute
-			left 1rem
-			top .7rem
-		&.input--large
-			.icon
-				left 1.2rem
-				top 1rem
-		&.input--filter
-			.icon
-				left -.4rem
-				top .7rem
-			&.input--large
-				.icon
-					left -.4rem
-					top 1.1rem
-			&.input--small
-				.icon
-					left -.4rem
-					top .3rem
-		&.input--small
-			.icon
-				left .8rem
-				top .4rem
-	&--checkbox
-	&--radio
-		position relative
-		.input__label
-			cursor pointer
-	&--disabled
-		.input
-			&__item
-			&__label
-				cursor default !important
-				opacity .4
-	&__line
-		.input--checkbox &
-		.input--radio &
-			display flex
-			align-items center
-			line-height 1
-			.input__label
-				order 1
-				margin 0 0 0 1rem
-	&__item
-		&:not([type=button]):not([type=checkbox]):not([type=radio]):not([type=textarea])
-			height $inputHeight
-			padding $inputPadding
-			.input--large &
-				height $inputHeightLarge
-				padding $inputPaddingLarge
-			.input--small &
-				height $inputHeightSmall
-				padding $inputPaddingSmall
-			.input--filter &
-				padding 0
-		&:not([type=button]):not([type=checkbox]):not([type=radio])
-			br()
-			placeHolderColor($placeHolderColor)
-			min-width $inputMinWidth
-			width 100%
-			background-color $light
-			border .1rem solid $inputBorderColor
-			.mini &
-				max-width 6rem
-				min-width 6rem
-				text-align center
-			.input--filter &
-				br(0)
-				border-width 0 0 .1rem 0
-				background-color transparent
-				&:focus
-					border-color $secondary
-			.input--iconed &
-				padding-left 4rem
-			.input--large &
-				font-size $inputFontSizeLarge
-				line-height $inputLineHeightLarge
-			.input--iconed.input--large &
-				padding-left 4.6rem
-			.input--filter.input--iconed &
-				padding-left 2.6rem
-				padding-bottom 0
-			.input--filter.input--iconed.input--large &
-				padding-left 2.8rem
-				padding-bottom 0
-			.input--filter.input--iconed.input--small &
-				padding-left 2.4rem
-				padding-bottom .4rem
-			.input--small &
-				font-size $inputFontSizeSmall
-				min-width $inputHeightSmall
-			.input--iconed.input--small &
-				padding-left 3.4rem
-			.input--noborder &
-				border 0
-			&.error
-				border-color $error
-			&:focus
-				border-color $secondary
-
-		&[type=textarea]
-			padding round($padding / 1.7) $padding
-			height $inputHeight * 2
-		&[type=radio]
-			all revert
-			cursor pointer
-		&[type=checkbox]
-			all revert
-			cursor pointer
-			line-height revert
-		&[type=number]
-			-moz-appearance textfield
-input::-webkit-outer-spin-button
-input::-webkit-inner-spin-button
-	-webkit-appearance none
-	margin 0

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

@@ -1,128 +0,0 @@
-// 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()
-	box-shadow 0 2rem 2rem $dark10
-	border .1rem solid $borderColor
-
-// 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
-
-inputFont()
-	font-family $fontFamily2
-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
-
-fullw()
-	width 100%
-	min-width 0
-fullh()
-	height 100%
-	min-height 0
-fullwh()
-	height 100%
-	width 100%
-	min-width 0
-	min-height 0
-
-wrapper()
-	margin 0 auto
-	padding 0 $padding
-	max-width $wrapperWidth
-	width 100%
-
-textShadow($c = $dark30)
-	text-shadow .1rem .1rem .1rem $c
-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%)
-darkness()
-	background $darkGradient2
-	background radial-gradient(circle, $darkGradient2 0%, $darkGradient1 40%, #252525 100%)
-tilt()
-	transform skewY(-2deg)

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

@@ -1,113 +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
-		&:not(.select__control--is-focused):not(.asyncselect__control--is-focused)
-			border-color $inputBorderColor !important
-			.error > &
-				border-color $error !important
-		&--is-focused
-			border-color $inputBorderColor !important
-			box-shadow none !important
-			.select__indicator
-			.asyncselect__indicator
-				svg
-					fill $secondary
-	&__value-container
-		padding-left 1rem !important
-	&__single-value
-		color $secondary !important
-	&__indicator
-		padding-left 1rem !important
-		padding-right 1rem !important
-		&-separator
-			background-color $secondary-medium25
-		svg
-			fill $secondary-medium25
-	&__placeholder
-		white-space nowrap
-		color $secondary-medium60
-	&__option
-	&__multi-value
-		.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 $primary !important
-			&.select__option--is-focused
-				color $light !important
-				background-color $primary !important
-		&--is-focused:not(.select__option--is-selected)
-			background-color $primary15 !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
-			font-size $inputFontSize - .2 !important
-			padding-right .2rem !important
-			color $light !important
-		&__remove
-			cursor pointer
-		svg
-			fill $light !important
-	&--small
-		.select
-		.asyncselect
-			&__control
-				min-width 18rem
-				min-height $inputHeightSmall !important
-				font-size $inputFontSizeSmall !important
-			&__indicator
-				padding .2rem .6rem !important
-			&__option
-			&__multi-value
-				background-color $light
-				font-size $inputFontSizeSmall !important
-				.flag
-					margin 0 0 0 .6rem
-					width 2.2rem
-					height 1.5rem
-				&__label
-					font-size $inputFontSizeSmall !important
-					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/next-website/tab.styl

@@ -1,41 +0,0 @@
-$tabPadding = 2rem
-.tab
-	height 100%
-	pre
-	code
-		margin 0 !important
-		padding 0  !important
-		background-color transparent !important
-		width 100%
-	&__header
-		background linear-gradient(90deg, $tabHeader 77%, $tabHeader2 100%)
-		padding 0 $tabPadding
-		flex-shrink 0
-		flexSpread()
-		&__buttons
-			flexMiddle()
-			mbi(3)
-			fullw()
-			position relative
-			li
-				min-width 0
-	&__content
-		background-color $tabContent
-		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/next-website/variables.styl

@@ -1,120 +0,0 @@
-$fontFamily = "Poppins", arial, sans-serif
-$fontFamily2 = 'Roboto Mono', monospace
-$fontSize = 1.8rem
-$lineHeight = $fontSize * 2 - .8
-$fontSizeSmall = $fontSize - .2
-$fontSizeMini  = $fontSize - .4
-$fontSizeNano  = $fontSize - .6
-$fontWeight = 400
-$fontSizeHeader = 1.3rem
-$fontSizeFooter = 1.6rem
-
-//new version of demos
-$demofilterWidth = 27.4rem
-$fontSizeDemo = 1.3rem
-$demoPadding = 1.6rem
-$demoBr = .3rem
-$inputFontSizeDemo = 1.1rem
-$inputDemoHeight = 3rem
-$footerDemoHeight = 4rem
-
-
-$title = 4.6rem
-$title2 = 4rem
-$title3 = 3.6rem
-$title4 = 3rem
-$title5 = 2.6rem
-$title6 = 2rem
-
-$borderRadius = .6rem
-
-
-// Layout
-$wrapperWidth = 125rem
-$headerHeight = 6.7rem
-$headerBannerHeight = 5.2rem
-$sectionPadding = 18.5rem
-$topRainbowHeight = 3.8rem
-$gutter2c = 3rem
-$quoteIcon = 46rem
-$quoteIconPosition = ( - $quoteIcon / 2 - $sectionPadding - 2 )
-
-$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
-
-// 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 - .4 0 $padding - .4
-$buttonFontSizeMini = $fontSizeSmall
-$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 $padding .2rem $padding
-$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

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

@@ -1,26 +0,0 @@
-// Common styles - Don't change order
-@import "./commons/reset.styl"
-
-// Specicif style - Do not change order
-@import "./next-website/font.styl"
-@import "./next-website/variables.styl"
-@import "./next-website/colors.styl"
-
-@import "./commons/__all.styl"
-@import "./commons/flags.styl"
-
-@import "./next-website/mixins.styl"
-
-@import "./next-website/button.styl"
-@import "./next-website/input.styl"
-@import "./next-website/select.styl"
-@import "./next-website/tab.styl"
-
-
-// Style of all components
-@import "../components/**/*.styl"
-
-// Additional style for UI components
-@import "./next-website/MerchantDemo.styl"
-@import "./next-website/demo.styl"
-@import "./next-website/dropdown.styl"