lucid-ui/src/components/SplitButton/SplitButton.less

A UI component library from Xandr.

@import (reference) '../../styles/variables.less';
@import (reference) '../../styles/mixins.less';

.@{prefix}-SplitButton {

	button.@{prefix}-Button.@{prefix}-Button-has-only-icon.@{prefix}-SplitButton-Button-drop {
		padding: 0 @size-S;
		// border-left: 1px solid white;
		// outline: none;
	}

	button.@{prefix}-Button.@{prefix}-Button-is-active.@{prefix}-Button-has-only-icon.@{prefix}-SplitButton-Button-drop {
		// border: 1px solid @color-neutral-5;
		outline: 1px solid @color-neutral-5;
		background-color: @color-neutral-4;
		// border-left: 1px solid white;
		// outline: none;
	}

	button.@{prefix}-Button.@{prefix}-Button-primary.@{prefix}-Button-has-only-icon.@{prefix}-SplitButton-Button-drop {
		// border: 1px solid @color-primary;
		outline: none;
	}

	button.@{prefix}-Button.@{prefix}-Button-is-active.@{prefix}-Button-primary.@{prefix}-Button-has-only-icon.@{prefix}-SplitButton-Button-drop {
		background-color: @color-primary-dark;
		// outline: 1px solid @color-primary-dark;
		outline: none;
	}


	button.@{prefix}-Button.@{prefix}-Button-primary.@{prefix}-SplitButton-Button-primary {
		border-right: 1px solid white;
		outline: none;
	}

	.@{prefix}-Button-primary {
		.@{prefix}-SplitButton-ChevronIcon {
			stroke: @color-white;
		}
	}

	.@{prefix}-DropMenu {
		&-option-container {
			border: none;
			outline: 1px solid @color-neutral-5;
			position: relative;
			top: 1px;
		}
	}
}