@vgip/meta-ui 2.0.0 → 2.1.0

package/vendor/volta3/scss/components/_form-elements.scss

@@ -0,0 +1,879 @@
+@use "../lib/mediaqueries";
+@use "../lib/utils";
+@use "../lib/variables";
+
+//
+// Copyright (c) 2018-present, Vonage. All rights reserved.
+//
+
+%select-arrow {
+	$fill-color: utils.encode-hex-code(variables.$black);
+	background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+	background-position: center center;
+	background-repeat: no-repeat;
+	background-size: contain;
+	content: '';
+	height: 20px;
+	margin-top: -10px;
+	pointer-events: none;
+	position: absolute;
+	right: 14px;
+	top: 50%;
+	width: 20px;
+}
+
+.Vlt-label {
+	display: block;
+	font-size: 1.4rem;
+	line-height: 1.5;
+	margin-bottom: variables.$unit0;
+	text-align: left;
+
+	label {
+		font-size: 1.4rem;
+	}
+
+	& + .Vlt-radio,
+	& + .Vlt-checkbox,
+	& + .Vlt-form__element {
+		margin-top: variables.$unit0;
+	}
+}
+
+// autofill background for Chrome
+.Vlt-input {
+	input:-webkit-autofill,
+	input:-webkit-autofill:hover,
+	input:-webkit-autofill:focus {
+		box-shadow: 0 0 0px 1000px variables.$purple-lighter inset;
+	}
+
+	&.Vlt-input--round {
+		input {
+			border-radius: 46px;
+		}
+	}
+}
+
+.Vlt-select {
+	&.Vlt-select--round {
+		select {
+			border-radius: 46px;
+		}
+	}
+}
+
+.Vlt-input,
+.Vlt-select,
+.Vlt-custom-select,
+.Vlt-textarea {
+	max-width: 100%;
+	position: relative;
+}
+
+.Vlt-input input,
+.Vlt-select select,
+.Vlt-textarea textarea,
+.Vlt-custom-select__input {
+	appearance: none; // prevents box shadow on iOS
+	background: variables.$white;
+	border: 1px solid variables.$grey;
+	border-radius: 5px;
+	box-shadow: none;
+	color: variables.$black;
+	display: block;
+	font-size: 1.4rem;
+	height: 40px;
+	padding-left: 12px;
+	transition: background-color .5s, border-color .5s;
+	width: 100%;
+
+	&:hover {
+		border-color: variables.$black;
+	}
+
+	&:focus {
+		@extend .Vlt-form-focus-style;
+	}
+
+	&:invalid {
+		@extend .Vlt-form-error-style;
+	}
+
+	&:disabled {
+		@extend .Vlt-form-disabled-readonly-style;
+		color: variables.$grey-dark;
+		cursor: default;
+	}
+
+	&[readonly] {
+		@extend .Vlt-form-disabled-readonly-style;
+	}
+}
+
+.Vlt-composite {
+	display: flex !important;
+	flex-flow: row;
+	position: relative;
+
+	.Vlt-composite {
+		flex: 1;
+	}
+
+	.Vlt-input,
+	.Vlt-select {
+		flex: 1;
+		position: relative;
+
+		.Vlt-form__element--elastic & {
+			flex: 0;
+			flex-basis: auto;
+		}
+	}
+
+	&--appendedicon {
+		.Vlt-input input,
+		.Vlt-select select {
+			padding-right: 40px;
+		}
+	}
+
+	.Vlt-composite:first-child .Vlt-input input,
+	&:not(.Vlt-composite--appendedicon) .Vlt-input:first-child input,
+	&:not(.Vlt-composite--appendedicon) .Vlt-select:first-child select {
+		border-bottom-right-radius: 0;
+		border-right: 0;
+		border-top-right-radius: 0;
+	}
+
+	&__append,
+	&__prepend {
+		.Vlt-btn,
+		.Vlt-dropdown__btn,
+		.Vlt-native-dropdown select {
+			@extend %Vlt-btn--app !optional;
+			border: 1px solid variables.$grey;
+			margin: 0 !important;
+			padding-bottom: 7px;
+			padding-top: 7px;
+
+			&:hover {
+				transform: scale(1);
+			}
+
+			.Vlt-form__element--big & {
+				@extend %Vlt-btn--large !optional;
+				padding: 10px 24px;
+
+				&.Vlt-btn--icon {
+					@extend %Vlt-btn--icon !optional;
+				}
+			}
+		}
+
+		.Vlt-dropdown__btn,
+		.Vlt-native-dropdown select,
+		.Vlt-btn:not(.Vlt-btn--primary):not(.Vlt-btn--secondary):not(.Vlt-btn--quaternary):not(.Vlt-btn--destructive):not(.Vlt-btn--indigo):not(.Vlt-btn--orange):not(.Vlt-btn--white) {
+			@extend %Vlt-btn--tertiary !optional;
+		}
+
+		.Vlt-btn {
+			&--primary,
+			&--secondary,
+			&--quaternary,
+			&--destructive,
+			&--indigo,
+			&--orange {
+				border: 0;
+			}
+		}
+
+		.Vlt-dropdown__btn,
+		.Vlt-native-dropdown {
+			&:after {
+				$fill-color: utils.encode-hex-code(variables.$black);
+				background-image: url('data:image/svg+xml,%3C%3Fxml%20version%3D%221.0%22%20encoding%3D%22utf-8%22%3F%3E%0D%0A%3Csvg%20version%3D%221.1%22%20id%3D%22Layer_1%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%20xmlns%3Axlink%3D%22http%3A%2F%2Fwww.w3.org%2F1999%2Fxlink%22%20x%3D%220px%22%20y%3D%220px%22%0D%0A%09%20viewBox%3D%220%200%2020%2020%22%20style%3D%22enable-background%3Anew%200%200%2020%2020%3B%22%20xml%3Aspace%3D%22preserve%22%3E%0D%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M7%2C7.8C6.7%2C7.5%2C6.2%2C7.6%2C5.9%2C7.9S5.7%2C8.7%2C6%2C9l4%2C3.4l4-3.4c0.3-0.3%2C0.3-0.8%2C0-1.1%0D%0A%09c-0.3-0.3-0.7-0.3-1-0.1l-3%2C2.6L7%2C7.8L7%2C7.8z%22%2F%3E%0D%0A%3C%2Fsvg%3E');
+			}
+		}
+	}
+
+	&__append {
+		position: relative;
+		z-index: 2;
+
+		.Vlt-btn,
+		.Vlt-dropdown__btn,
+		.Vlt-native-dropdown select {
+			border-bottom-left-radius: 0;
+			border-top-left-radius: 0;
+		}
+
+		&--icon {
+			height: 100%;
+			padding: 11px 12px;
+			position: absolute;
+			right: 0;
+			width: 42px;
+
+			svg {
+				fill: variables.$grey-dark;
+				height: 18px;
+				position: relative;
+				width: 18px;
+			}
+		}
+	}
+
+	&__prepend {
+		position: relative;
+		z-index: 2;
+
+		.Vlt-btn,
+		.Vlt-dropdown__btn,
+		.Vlt-native-dropdown select {
+			border-bottom-right-radius: 0;
+			border-top-right-radius: 0;
+		}
+
+		&:not(.Vlt-composite__prepend--icon) + .Vlt-input input,
+		&:not(.Vlt-composite__prepend--icon) + .Vlt-select select {
+			border-bottom-left-radius: 0;
+			border-left: 0;
+			border-top-left-radius: 0;
+		}
+
+		&--icon {
+			height: 100%;
+			padding: 11px 12px;
+			position: absolute;
+			width: 42px;
+
+			svg {
+				fill: variables.$black;
+				height: 18px;
+				width: 18px;
+			}
+
+			& + .Vlt-input input,
+			& + .Vlt-select select {
+				padding-left: 42px;
+			}
+		}
+	}
+
+	.Vlt-btn,
+	.Vlt-dropdown__btn
+	.Vlt-native-dropdown select {
+		margin: 0;
+	}
+
+	.Vlt-input {
+		input {
+			&[readonly],
+			&:disabled {
+				border-color: variables.$grey;
+			}
+		}
+	}
+}
+
+.Vlt-textarea {
+	textarea {
+		height: auto;
+		padding-bottom: variables.$unit1;
+		padding-top: variables.$unit1;
+		resize: vertical;
+	}
+}
+
+.Vlt-select,
+.Vlt-custom-select {
+
+	&:after {
+		@extend %select-arrow;
+	}
+}
+
+.Vlt-select select,
+.Vlt-custom-select__input {
+	appearance: none;
+	cursor: pointer;
+	padding-right: 42px;
+	text-indent: 1px;
+	text-overflow: '';
+
+	&::-ms-expand {
+	    display: none;
+	}
+}
+
+.Vlt-form__group {
+	align-items: flex-end;
+	display: flex;
+	flex-flow: row wrap;
+
+	.Vlt-form__element {
+		margin-right: variables.$unit2;
+
+		&:last-child {
+			margin-right: 0;
+		}
+	}
+
+	> .Vlt-btn {
+		margin-bottom: variables.$unit1;
+	}
+
+	> .Vlt-form__element__error,
+	> .Vlt-form__element__hint {
+		flex: 0 0 100%;
+		margin-bottom: variables.$unit0;
+	}
+
+	& + .Vlt-form__group,
+	& + .Vlt-form__element {
+		margin-top: 0; // This ensures vertical spacing consistency
+	}
+
+	&--M-plus {
+		@media #{mediaqueries.$S-only} {
+			display: block;
+		}
+	}
+
+	&--inline {
+		display: inline-flex;
+	}
+
+	&--stretch {
+		.Vlt-form__element {
+			flex: auto;
+		}
+	}
+}
+
+.Vlt-form__element {
+	padding: variables.$unit1 0;
+
+	h1,
+	h2,
+	h3,
+	h4 {
+		margin: 0;
+	}
+
+	&__hint,
+	&__error {
+		display: block;
+		flex: 0 0 100%;
+		font-size: 1.2rem;
+		line-height: 1.33;
+		margin-top: 6px;
+		text-align: left;
+	}
+
+	&__hint {
+		color: variables.$grey-darker;
+	}
+
+	&__error {
+		color: variables.$red;
+
+		&:before {
+			$fill-color: utils.encode-hex-code(variables.$red);
+			background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M8%200C3.6%200%200%203.6%200%208C0%2012.4%203.6%2016%208%2016C12.4%2016%2016%2012.4%2016%208C16%203.6%2012.4%200%208%200ZM8%2012C7.4%2012%207%2011.6%207%2011C7%2010.4%207.4%2010%208%2010C8.6%2010%209%2010.4%209%2011C9%2011.6%208.6%2012%208%2012ZM9%209H7V4H9V9Z%22%2F%3E%0A%3C%2Fsvg%3E');
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: contain;
+			content: '';
+			display: inline-block;
+			height: 16px;
+			margin-right: 6px;
+			vertical-align: bottom;
+			width: 16px;
+		}
+	}
+
+	&--error {
+		input,
+		select,
+		textarea,
+		.Vlt-radio input:not(:checked) + .Vlt-radio__icon,
+		.Vlt-checkbox input:not(:checked) + .Vlt-checkbox__icon {
+			@extend .Vlt-form-error-style;
+		}
+
+		.Vlt-checkbox  {
+			color: variables.$red;
+
+			input:not(:checked) + .Vlt-checkbox__icon {
+				background: variables.$white !important;
+			}
+		}
+
+		&.Vlt-form__element--big {
+			label {
+				color: variables.$red;
+			}
+
+			.Vlt-textarea {
+				textarea:not(:focus) + * {
+					background-color: variables.$red-lighter;
+				}
+			}
+		}
+	}
+
+	&--valid {
+		input,
+		select,
+		textarea {
+			@extend .Vlt-form-valid-style;
+		}
+	}
+
+	&--elastic {
+		input,
+		select,
+		.Vlt-input,
+		.Vlt-select {
+			display: inline-block;
+			margin-left: 0;
+			margin-right: 0;
+			width: auto;
+
+			& + input,
+			& + select,
+			& + .Vlt-input,
+			& + .Vlt-select {
+				margin-left: variables.$unit2;
+			}
+		}
+
+		textarea,
+		.Vlt-textarea {
+			display: inline-block;
+			width: auto;
+		}
+	}
+
+	&--inline-content {
+		.Vlt-radio,
+		.Vlt-checkbox {
+			display: inline-block;
+			margin-bottom: variables.$unit2;
+			margin-right: variables.$unit2;
+			margin-top: variables.$unit0 !important;
+		}
+	}
+
+	.Vlt-dropdown__btn {
+		margin: 0;
+	}
+}
+
+.Vlt-radio,
+.Vlt-checkbox {
+	position: relative;
+
+	input {
+		appearance: none;
+		height: 0px;
+		opacity: 0;
+		overflow: hidden;
+		position: absolute;
+		width: 0px;
+
+		&:focus,
+		&:active {
+			box-shadow: none;
+			outline: none;
+
+			& + .Vlt-radio__icon {
+				@extend .Vlt-form-focus-style;
+			}
+		}
+
+		&:disabled {
+			& + .Vlt-radio__icon {
+				@extend .Vlt-form-disabled-readonly-style;
+			}
+
+			&:active {
+				& + .Vlt-radio__icon,
+				& + .Vlt-checkbox__icon {
+					box-shadow: none;
+				}
+			}
+		}
+
+		&:invalid {
+			& + .Vlt-radio__icon,
+			& + .Vlt-checkbox__icon {
+				@extend .Vlt-form-error-style;
+			}
+
+			&:focus {
+				& + .Vlt-radio__icon,
+				& + .Vlt-checkbox__icon {
+					box-shadow: 0 0 5px rgba(variables.$red, 0.5);
+				}
+			}
+		}
+	}
+
+	label {
+		// We removed cursor: pointer because it would add complications in case it's disabled
+		align-items: flex-start;
+		display: flex;
+		text-align: left;
+	}
+
+	&__button {
+		display: block;
+		flex: 0 0 22px;
+		height: 22px;
+		margin-right: 10px;
+		margin-top: -1px;
+		position: relative;
+		width: 22px;
+	}
+
+	&__icon {
+		border: 2px solid variables.$grey;
+		display: block;
+		height: 100%;
+		transition: all 0.2s;
+		width: 100%;
+
+		&:after {
+			content: '';
+			display: block;
+			position: absolute;
+			transform: scale(0.1, 0.1);
+			transition: transform 0.2s ease-out;
+		}
+	}
+
+	&:hover {
+		.Vlt-radio__icon,
+		.Vlt-checkbox__icon {
+			border-color: variables.$black;
+		}
+	}
+
+	& + .Vlt-radio,
+	& + .Vlt-checkbox,
+	& + .Vlt-form__element__error,
+	& + .Vlt-form__element__hint {
+		margin-top: variables.$unit2;
+	}
+
+	&--inline {
+		display: inline-block;
+		margin-bottom: variables.$unit2;
+		margin-right: variables.$unit2;
+		margin-top: variables.$unit0 !important;
+	}
+}
+
+.Vlt-radio {
+	&__icon {
+		border-radius: 100%;
+		transition: all 0.2s;
+
+		&:after {
+			border-radius: 100%;
+			height: 10px;
+			left: 50%;
+			margin-left: -5px;
+			margin-top: -5px;
+			top: 50%;
+			width: 10px;
+		}
+	}
+
+	&__button {
+
+		input {
+			&:checked ~ .Vlt-radio__icon {
+				&:after {
+					background: variables.$black;
+					transform: scale(1, 1);
+				}
+			}
+		}
+	}
+}
+
+.Vlt-checkbox {
+
+	&--error {
+		.Vlt-checkbox input:not(:checked) + .Vlt-checkbox__icon {
+			background-color: variables.$white;
+		}
+	}
+
+	&__icon {
+		background-color: variables.$white;
+		border: 1px solid variables.$grey;
+		border-radius: 4px;
+
+		&:after {
+			background-position: center center;
+			background-repeat: no-repeat;
+			background-size: 14px 14px;
+			content: '';
+			height: 100%;
+			left: 0;
+			top: 0;
+			transform: scale(1, 1);
+			width: 100%;
+		}
+	}
+
+	&__button {
+		input {
+			&:hover:not(:checked) ~ .Vlt-checkbox__icon {
+				border-color: variables.$grey-dark;
+			}
+
+			&:focus ~ .Vlt-checkbox__icon {
+				border-color: variables.$black;
+			}
+
+			&:checked ~ .Vlt-checkbox__icon,
+			&:checked:disabled ~ .Vlt-checkbox__icon {
+				background-color: variables.$black;
+				border-color: variables.$black;
+
+				&:after {
+					$fill-color: utils.encode-hex-code(variables.$white);
+					background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2024%2024%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M21.45%203.45L7.5%2017.4L2.55%2012.45C1.95%2011.85%201.05%2011.85%200.45%2012.45C-0.15%2013.05%20-0.15%2013.95%200.45%2014.55L6.45%2020.55C6.75%2020.85%207.05%2021%207.5%2021C7.95%2021%208.25%2020.85%208.55%2020.55L23.55%205.55C24.15%204.95%2024.15%204.05%2023.55%203.45C22.95%202.85%2022.05%202.85%2021.45%203.45Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+				}
+			}
+
+			&:hover:not(:checked):disabled ~ .Vlt-checkbox__icon,
+			&:not(:checked):disabled ~ .Vlt-checkbox__icon {
+				background-color: variables.$grey-lighter;
+				border-color: variables.$grey-light;
+			}
+
+			&:hover:checked:disabled ~ .Vlt-checkbox__icon,
+			&:checked:disabled ~ .Vlt-checkbox__icon {
+				opacity: 0.3;
+			}
+		}
+	}
+
+	&--partial {
+		.Vlt-checkbox__button {
+			input {
+				~ .Vlt-checkbox__icon,
+				&:hover ~ .Vlt-checkbox__icon,
+				&:checked ~ .Vlt-checkbox__icon,
+				&:disabled ~ .Vlt-checkbox__icon,
+				&:hover:disabled ~ .Vlt-checkbox__icon {
+					background-color: variables.$black;
+					border-color: variables.$black;
+				}
+
+				&:hover:disabled ~ .Vlt-checkbox__icon,
+				&:disabled ~ .Vlt-checkbox__icon {
+					opacity: 0.3;
+				}
+			}
+		}
+
+		.Vlt-checkbox__icon {
+			&:after {
+				$fill-color: utils.encode-hex-code(variables.$white);
+				background-image: url('data:image/svg+xml,%3Csvg%20viewBox%3D%220%200%2016%2016%22%20xmlns%3D%22http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%22%3E%0A%3Cpath%20style%3D%22fill%3A#{$fill-color}%3B%22%20d%3D%22M15%207H1C0.4%207%200%207.4%200%208C0%208.6%200.4%209%201%209H15C15.6%209%2016%208.6%2016%208C16%207.4%2015.6%207%2015%207Z%22%2F%3E%0A%3C%2Fsvg%3E%0A');
+			}
+		}
+	}
+}
+
+.Vlt-form-error-style {
+	background: variables.$red-lighter;
+	border-color: variables.$red;
+
+	&:hover {
+		border-color: variables.$red;
+	}
+}
+
+.Vlt-form-valid-style {
+	border-color: variables.$green;
+
+	&:hover {
+		border-color: variables.$green;
+	}
+}
+
+.Vlt-form-focus-style {
+	background: variables.$white;
+	border-color: variables.$black;
+	outline: none;
+
+	&:hover {
+		border-color: variables.$black;
+	}
+}
+
+.Vlt-form-disabled-readonly-style {
+	background: variables.$grey-lighter;
+	border-color: variables.$grey-light;
+	box-shadow: none;
+
+	&:hover {
+		border-color: variables.$grey-light;
+	}
+}
+
+// Inspired from https://github.com/tonystar/float-label-css
+// by Tony Star
+// Compatibility https://caniuse.com/#feat=css-placeholder-shown
+
+.Vlt-form__element--big {
+	display: block;
+	position: relative;
+
+	label {
+		color: variables.$grey-darker;
+		cursor: text;
+		font-size: 1.2rem;
+		left: 14px;
+		line-height: 1.6rem;
+		opacity: 1;
+		pointer-events: none;
+		position: absolute;
+		top: 7px;
+		transition: all 0.2s, background-color 0.5s;
+	}
+
+	textarea {
+		width: 100%;
+	}
+
+	.Vlt-input,
+	.Vlt-select,
+	.Vlt-custom-select,
+	.Vlt-textarea {
+		input,
+		select,
+		textarea,
+		.Vlt-custom-select__input {
+			border-radius: 6px;
+			height: 4.8rem;
+			padding: 20px 14px 6px;
+
+			&::placeholder {
+				color: variables.$grey;
+				opacity: 1;
+				transition: all 0.2s;
+			}
+
+			&:placeholder-shown:not(:focus)::placeholder {
+				opacity: 0;
+			}
+
+			&:placeholder-shown:not(:focus) + * {
+				font-size: 1.6rem;
+				margin-top: -0.8rem;
+				top: 50%;
+			}
+		}
+
+		select {
+			padding-right: 50px;
+		}
+
+		textarea {
+			height: auto;
+			min-height: 4.8rem;
+
+			+ * {
+				background-color: variables.$white;
+				border-top-right-radius: 6px;
+				padding-top: 6px;
+				right: 14px;
+				top: 1px;
+			}
+
+			&:placeholder-shown:not(:focus) + * {
+				margin-top: 0;
+				top: 1rem;
+			}
+
+			&[readonly] + *,
+			&:disabled + * {
+				background-color: variables.$grey-lighter;
+			}
+		}
+	}
+
+	.Vlt-select,
+	.Vlt-custom-select {
+		&:after {
+			height: 24px;
+			margin-top: -12px;
+			width: 24px;
+		}
+	}
+
+	.Vlt-custom-select__input {
+		@extend .Vlt-truncate !optional;
+		text-align: left;
+	}
+
+	.Vlt-form__element__error,
+	.Vlt-form__element__hint {
+		margin-top: 8px;
+	}
+}
+
+.Vlt-dropdown {
+	.Vlt-composite {
+		flex: 1;
+		z-index: 2;
+
+		&:first-child {
+			margin-bottom: -1px;
+		}
+
+		.Vlt-composite__append {
+			.Vlt-btn {
+				transition: border-bottom-right-radius 0s;
+			}
+		}
+
+		+ .Vlt-dropdown__panel {
+			z-index: 1;
+
+			.Vlt-dropdown__panel__content {
+				border: 1px solid variables.$grey;
+				border-top-left-radius: 0;
+				border-top-right-radius: 0;
+				box-shadow: 0px 4px 8px rgba(variables.$black, 0.15);
+			}
+		}
+	}
+
+	&--expanded {
+		.Vlt-composite {
+			.Vlt-input {
+				input {
+					border-bottom-left-radius: 0;
+					transition: border-bottom-left-radius 0s;
+				}
+			}
+
+			.Vlt-composite__append {
+				.Vlt-btn {
+					border-bottom-right-radius: 0;
+				}
+			}
+		}
+	}
+}