demosample
Version:
React components library project for CensaNext Design System
55 lines (49 loc) • 1.14 kB
CSS
.ChipInput {
box-sizing: border-box;
display: flex;
border-radius: var(--spacing-m);
border: var(--border);
padding-left: var(--spacing-s);
padding-top: var(--spacing-xs);
padding-bottom: var(--spacing-xs);
background: var(--white);
cursor: text;
flex: 100%;
}
.ChipInput-wrapper {
display: flex;
flex: 100%;
align-items: center;
flex-wrap: wrap;
}
.ChipInput:focus-within {
border-color: var(--primary);
box-shadow: var(--shadow-spread) var(--primary-shadow);
}
.ChipInput--disabled {
background: var(--secondary-lightest);
border-color: var(--secondary-light);
pointer-events: none;
}
.ChipInput-input {
border: none;
outline: none;
display: flex;
width: 100%;
min-width: 30%;
flex: 0px;
box-sizing: border-box;
height: var(--spacing-xl);
margin-top: var(--spacing-s);
margin-bottom: var(--spacing-s);
padding-left: var(--spacing-m);
font-family: var(--font-family);
font-size: var(--font-size);
}
.ChipInput-icon {
height: var(--spacing-2);
margin-top: var(--spacing-m);
padding-top: var(--spacing-s);
margin-right: var(--spacing-l);
cursor: pointer;
}