@woosmap/ui 2.55.0 → 3.1.0

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

@@ -0,0 +1,111 @@
+.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
+		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 $secondary !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

@@ -0,0 +1,41 @@
+$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

@@ -0,0 +1,110 @@
+$fontFamily = "Poppins", arial, sans-serif
+$fontSize = 1.8rem
+$lineHeight = $fontSize * 2 - .8
+$fontSizeSmall = $fontSize - .2
+$fontSizeMini  = $fontSize - .4
+$fontSizeNano  = $fontSize - .6
+$fontWeight = 400
+$fontSizeHeader = 1.3rem
+$fontSizeFooter = 1.6rem
+
+
+$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

@@ -2,24 +2,24 @@
 @import "./commons/reset.styl"
 
 // Specicif style - Do not change order
-// @import "./next-website/mixins.styl"
-// @import "./next-website/fonts.styl"
-// @import "./next-website/variables.styl"
-// @import "./next-website/colors.styl"
+@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/button.styl"
-// @import "./next-website/input.styl"
-// @import "./next-website/select.styl"
-// @import "./next-website/tab.sty l"
+@import "./next-website/mixins.styl"
 
-//demos
-// @import "./next-website/MerchantDemo.styl"
-// @import "./next-website/skeletonDemo.styl"
+@import "./next-website/button.styl"
+@import "./next-website/input.styl"
+@import "./next-website/select.styl"
+@import "./next-website/tab.styl"
 
-// @import "./next-website/style.styl"
 
 // Style of all components
 @import "../components/**/*.styl"
+
+// Additional style for UI components
+@import "./next-website/demo.styl"
+@import "./next-website/dropdown.styl"