@woosmap/ui 4.120.0 → 4.121.0

package/src/styles/website/button.styl

@@ -1,735 +0,0 @@
-.btn
-	cursor pointer
-	text-decoration none
-	.icon
-		flex-shrink 0
-	&.active
-		cursor default
-	&:disabled
-		&:not(.btn--group)
-			cursor default
-			opacity .3
-			box-shadow none
-			&:hover
-				opacity .3
-	&--icon
-		&:not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--group):not(.btn--sidebar-link)
-			sq()
-			btn()
-			justify-content center
-			padding 0
-			&.btn--loading
-				padding 0
-				.icon
-					sq(2.4)
-			&.btn--small
-				buttonSmall()
-				width $buttonHeightSmall
-			&.btn--mini
-				buttonMini()
-				width $buttonHeightMini
-			&.btn--large
-				buttonLarge()
-				width $buttonHeightLarge
-			&.btn--primary
-				&:disabled
-					&:hover
-						background-color $primary
-						.icon
-							fill $light
-				&.btn--loading
-					&:hover
-						background-color $primary
-			&.btn--secondary
-				&:disabled
-					&:hover
-						background-color transparent
-						border-color $inputBorderColor
-						.icon
-							fill $secondary
-			&.btn--important
-				&:disabled
-					&:hover
-						background-color $error
-						.icon
-							fill $light
-			&.btn--has-icon
-				&:not(.btn--small):not(.btn--large)
-					mbi(.4)
-			&.btn--icon
-				flex-shrink 0
-				.icon
-					flex-shrink 0
-	&--primary
-	&--important
-		btn()
-		textShadow()
-		color $light
-		.icon
-			fill $light
-			trans()
-		&.btn--loading:not(.btn--small):not(.btn--large)
-			disableHoverEffect()
-			.icon
-				margin-right .3rem
-				sq(2.2)
-		&.btn--has-icon
-			&:not(.btn--small):not(.btn--large)
-				mbi(.4)
-		&.btn--icon
-			flex-shrink 0
-			.icon
-				flex-shrink 0
-	&--primary
-		background-color $primary
-		&:disabled
-			&:hover
-				background-color $primary
-		&.btn--default
-			position inherit
-		&.btn--white
-			color $secondary
-			background-color $light
-			border .1rem solid $inputBorderColor
-			text-shadow unset
-			.icon
-				fill $secondary
-			&:disabled
-				&:hover
-					color $secondary
-					background-color $light
-					border .1rem solid $inputBorderColor
-			&:hover
-				textShadow()
-				color $light
-				border-color $linkColorHover
-		&.btn--color1
-			background-color $logo1
-			&:disabled
-				&:hover
-					background-color $logo1
-		&.btn--color2
-			background-color $logo2
-			&:disabled
-				&:hover
-					background-color $logo2
-
-		&.btn--color3
-			background-color $logo3
-			&:disabled
-				&:hover
-					background-color $logo3
-
-		&.btn--color4
-			background-color $logo4
-			&:disabled
-				&:hover
-					background-color $logo4
-
-		&.btn--color5
-			background-color $logo5
-			&:disabled
-				&:hover
-					background-color $logo5
-
-		&.btn--color6
-			background-color $logo6
-			&:disabled
-				&:hover
-					background-color $logo6
-
-		&.btn--color7
-			background-color $logo7
-			&:disabled
-				&:hover
-					background-color $logo7
-
-		&.btn--color8
-			background-color $logo8
-			&:disabled
-				&:hover
-					background-color $logo8
-			&:hover
-				background-color $success2
-		.section--dark .article &
-		.section--light .article &
-		.section--white .article &
-		.section--dark .for-colored-cta &
-		.section--light .for-colored-cta &
-		.section--white .for-colored-cta &
-			background-color $primary
-			border unset
-			color $light
-			&:disabled
-				&:hover
-					background-color $primary
-			&:hover
-				background-color $linkColorHover
-		&:hover
-			background-color $linkColorHover
-
-	&--important
-		background-color $error
-		&:disabled
-			&:hover
-				background-color $error
-		&:hover
-			background-color $linkColorHover
-	&--secondary
-		btn()
-		color $secondary
-		background-color $light
-		border .1rem solid $inputBorderColor
-		.icon
-			fill $secondary
-			trans()
-		&.btn--has-icon
-			mbi(.4)
-		&.btn--icon
-			flex-shrink 0
-			.icon
-				flex-shrink 0
-		&.btn--white
-			position inherit
-		&.btn--color1
-			textShadow()
-			color $light
-			background-color $logo1
-			border-color $logo1
-			&:disabled
-				&:hover
-					background-color $logo1
-		&.btn--color2
-			textShadow()
-			color $light
-			background-color $logo2
-			border-color $logo2
-			&:disabled
-				&:hover
-					background-color $logo2
-
-		&.btn--color3
-			textShadow()
-			color $light
-			background-color $logo3
-			border-color $logo3
-			&:disabled
-				&:hover
-					background-color $logo3
-
-		&.btn--color4
-			textShadow()
-			color $light
-			background-color $logo4
-			border-color $logo4
-			&:disabled
-				&:hover
-					background-color $logo4
-
-		&.btn--color5
-			textShadow()
-			color $light
-			background-color $logo5
-			border-color $logo5
-			&:disabled
-				&:hover
-					background-color $logo5
-
-		&.btn--color6
-			textShadow()
-			color $light
-			background-color $logo6
-			border-color $logo6
-			&:disabled
-				&:hover
-					background-color $logo6
-
-		&.btn--color7
-			textShadow()
-			color $light
-			background-color $logo7
-			border-color $logo7
-			&:disabled
-				&:hover
-					background-color $logo7
-
-		&.btn--color8
-			textShadow()
-			color $light
-			background-color $logo8
-			border-color $logo8
-			&:disabled
-				&:hover
-					background-color $logo8
-			&:hover
-				background-color $success2
-		.section--dark .article &
-		.section--light .article &
-		.section--white .article &
-		.section--dark .for-colored-cta &
-		.section--light .for-colored-cta &
-		.section--white .for-colored-cta &
-			color $secondary
-			background-color $light
-			border .1rem solid $inputBorderColor
-			text-shadow unset
-			.icon
-				fill $secondary
-			&:disabled
-				&:hover
-					color $secondary
-					background-color $light
-					border .1rem solid $inputBorderColor
-			&:hover
-				textShadow()
-				color $light
-				border-color $linkColorHover
-				background-color $linkColorHover
-
-		&:hover
-			border-color $linkColorHover
-			background-color $linkColorHover
-
-		&.btn--loading
-			&:hover
-				background-color transparent
-				color $secondary
-					cursor default
-					border-color $inputBorderColor
-					.icon
-						fill $secondary
-		&:disabled
-			opacity .4
-			cursor default
-			&:hover
-				opacity .4
-				background-color transparent
-				color $secondary
-				border-color $inputBorderColor
-				.icon
-					fill $secondary
-	&--inverse
-		btn()
-		background-color transparent
-		border .1rem solid $light
-		color $light
-		.icon
-			fill $light
-		&.btn--has-icon
-			mbi(.4)
-		&.btn--icon
-			flex-shrink 0
-			.icon
-				flex-shrink 0
-		&:hover
-			border-color $linkColorHover
-			color $light
-			.icon
-				fill $light
-		&:disabled
-			opacity .3
-			&:hover
-				cursor default
-				border-color $linkColorHover
-				color $light
-				.icon
-					fill $light
-	&--link-flex
-	&--link-flex-info
-	&--link
-	&--link-primary
-	&--link-info
-		focus()
-		trans()
-		height auto
-		padding 0
-		line-height $fontSize
-		color $secondary
-		vertical-align baseline
-		position relative
-		.btn__label
-			line-height $fontSize
-			vertical-align baseline
-		&:hover
-			text-decoration underline
-			color $primary
-			.icon
-				fill $primary
-		&:disabled
-			cursor default
-			opacity .3
-			&:hover
-				color inherit
-				opacity .3
-				text-decoration underline
-				.icon
-					fill inherit
-		.label &
-			&:hover
-				.icon
-					fill $light
-		&.btn--icon
-			padding 0
-			text-decoration none
-		&.btn--has-icon
-			&:not(.btn--icon-right)
-				.icon
-					margin-right .3rem
-			&.btn--icon-right
-				.icon
-					margin-left .3rem
-	&--link
-	&--link-primary
-	&--link-info
-		.icon
-			trans()
-			position relative
-			top .7rem
-		&:not(.btn--icon-right)
-			.icon
-				left -.3rem
-			&.btn--small
-				.icon
-					top .5rem
-					left -.3rem
-			&.btn--large
-				.icon
-					top 1.2rem
-					left -.3rem
-		&.btn--icon-right
-			.icon
-				right -.3rem
-			&.btn--small
-				.icon
-					top .5rem
-					rigth -.3rem
-			&.btn--large
-				.icon
-					top 1.2rem
-					rigth -.3rem
-	&--link-flex
-	&--link-flex-info
-		display inline-flex
-		align-items center
-		&.btn--no-label
-			display flex
-			align-items center
-			justify-content center
-		&.btn--large
-		&.btn--small
-			height auto
-			padding 0 !important
-	&--link-flex-info
-		&:hover
-			color $primary
-			text-decoration none
-			.icon
-				fill $primary
-		&:disabled
-			&:hover
-				color $primary
-				text-decoration none
-				.icon
-					fill $primary
-	&--link
-	&--link-flex
-		.article &
-		.wcard &
-		.paragraph &
-			color $linkColor
-			.icon
-				fill $linkColor
-		
-		&.btn--default
-			position inherit
-
-		&.btn--white
-			color $light
-			text-decoration underline
-			.icon
-				fill $light
-			&:disabled
-				&:hover
-					color $light
-
-		&.btn--color1
-			color $logo1
-			.icon
-				fill $logo1
-			&:disabled
-				&:hover
-					color $logo1
-
-		&.btn--color2
-			color $logo2
-			.icon
-				fill $logo2
-			&:disabled
-				&:hover
-					color $logo2
-
-		&.btn--color3
-			color $logo3
-			.icon
-				fill $logo3
-			&:disabled
-				&:hover
-					color $logo3
-
-		&.btn--color4
-			color $logo4
-			.icon
-				fill $logo4
-			&:disabled
-				&:hover
-					color $logo4
-
-		&.btn--color5
-			color $logo5
-			.icon
-				fill $logo5
-			&:disabled
-				&:hover
-					color $logo5
-
-		&.btn--color6
-			color $logo6
-			.icon
-				fill $logo6
-			&:disabled
-				&:hover
-					color $logo6
-
-		&.btn--color7
-			color $logo7
-			.icon
-				fill $logo7
-			&:disabled
-				&:hover
-					color $logo7
-
-		&.btn--color8
-			color $logo8
-			.icon
-				fill $logo8
-			&:disabled
-				&:hover
-					color $logo8
-			&:hover
-				color $success2
-
-		.section--dark .article &
-			text-decoration none
-			color $linkColorLight
-			.icon
-				fill $linkColorLight
-
-		.section--light .article &
-		.section--white .article &
-			text-decoration none
-			color $linkColor
-			.icon
-				fill $linkColor
-
-		&:hover
-			text-decoration none
-			color $linkColorHover !important
-			.icon
-				fill $linkColorHover !important
-
-	&--link-primary
-		color $primary
-		.icon
-			fill $primary
-		&:disabled
-			&:hover
-				color $primary
-				text-decoration none
-				.icon
-					fill $primary
-	&--link-info
-	&--link-flex-info
-		color $info
-		.icon
-			fill $info
-		&:hover
-			color $primary
-			text-decoration underline
-			.icon
-				fill $primary
-	&--link-info
-	&--link-flex-info
-	&--link-flex
-		transition none
-		.icon
-			trans()
-		.btn__label
-			trans()
-
-	&--has-icon
-		&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link):not(.btn--icon-right)
-			padding 0 $padding 0 $padding - .6
-		&:not(.btn--icon):not(.btn--link):not(.btn--link-primary):not(.btn--link-info):not(.btn--link-flex):not(.btn--link-flex-info):not(.btn--loading):not(.btn--mini):not(.btn--small):not(.btn--large):not(.btn--dropdown-item):not(.btn--tab):not(.btn--sidebar-link)
-			&.btn--icon-right
-				padding 0 $padding - .6 0 $padding
-	&--loading
-		&:not(.btn--icon):not(.btn--small):not(.btn--large):not(.btn--sidebar-link)
-			padding-left $padding - .4
-			&:hover
-				&.btn--important
-					background-color $error
-		.icon
-			sq(2.2)
-
-
-	&--small
-		buttonSmall()
-		&.btn--group
-		&.btn--switch
-			buttonSmall()
-			&.btn--icon
-				width auto
-				img
-					max-width 2.2rem
-		&:not(.btn--custom-icon-size)
-			.icon
-				sq(1.8)
-		&:not(.btn--icon)
-			.icon
-				margin-right .4rem
-			&.btn--has-icon
-				padding-left $padding - .5
-				&.btn--loading
-					padding-left $padding - .4
-					disableHoverEffect()
-					.icon
-						sq(1.8)
-	&--large
-		buttonLarge()
-		&:not(.btn--custom-icon-size)
-			.icon
-				sq(3.2)
-		&:not(.btn--icon)
-			.icon
-				margin-right .6rem
-			&.btn--has-icon
-				padding-left $padding - .4
-				&.btn--loading
-					padding-left $padding
-					disableHoverEffect()
-					.icon
-						sq(3.2)
-	&--mini
-		buttonMini()
-		&:not(.btn--custom-icon-size)
-			.icon
-				sq(1.6)
-		&:not(.btn--icon)
-			.icon
-				margin-right .4rem
-			&.btn--has-icon
-				padding-left $padding - 1.6
-				&.btn--loading
-					padding-left $padding - .3
-					disableHoverEffect()
-					.icon
-						sq(1.6)
-	&--group
-		btn()
-		color $secondary-medium40
-		background-color $light
-		border .1rem solid $inputBorderColor
-		&.btn--has-icon
-			&:not(.btn--mini):not(.btn--small):not(.btn--large)
-				mbi(.4)
-		&.btn--icon
-			flex-shrink 0
-			.icon
-				flex-shrink 0
-		&:hover
-			color $secondary
-			background-color $primary10
-		&.active
-			color $light
-			border-color $secondary
-			background-color $secondary
-			.icon
-				fill $light
-			&:hover
-				background-color $secondary
-			&:disabled
-				background-color $secondary60
-				border-color $secondary-medium15
-				color $light70
-				.icon
-					fill $light70
-		&:disabled:not(.active)
-			color $secondary30
-			cursor default
-			.icon
-				fill $secondary30
-			&:hover
-				border-color $inputBorderColor
-				color $secondary30
-				background-color transparent
-				.icon
-					fill $secondary30
-		&-container
-			flexMiddle()
-			.btn
-				&:first-child
-					border-radius $borderRadius 0 0 $borderRadius
-					border-width .1rem 0 .1rem .1rem
-				&:not(:first-child):not(:last-child)
-					border-width .1rem 0 .1rem .1rem
-					border-radius 0
-				&:last-child
-					border-radius 0 $borderRadius $borderRadius 0
-					border-width .1rem
-			&--light
-				.btn
-					&.active
-						border-color $inputBorderColor
-						background-color $primary20
-						color $secondary
-						&:hover
-							background-color $primary20
-	&--tab
-		position relative
-		font-size $fontSizeDemo - .1
-		color rgba($secondary, .4)
-		&:after
-			content ''
-			display block
-			width 0
-			height 0.3rem
-			background $secondary
-			transition width .1s
-			position absolute
-			top 2.7rem
-			left 0
-		&:hover
-			color $secondary
-			&:after
-				width 100%
-		&.active
-			font-weight 600
-			color $secondary
-			&:after
-				width 100%
-		&--action
-			br(2)
-			inputFont()
-			trans()
-			padding 0 1rem
-			font-size $inputFontSizeDemo !important
-			border .1rem solid $activeColor
-			color darken($activeColor, 20%)
-			&:hover
-			&.copied
-				background-color $success
-				border-color $light
-				color $light
-			&:focus
-				background-color $secondary
-				color $light