173 lines
4.0 KiB
CSS
173 lines
4.0 KiB
CSS
/* Add Item Form Container */
|
|
.add-item-form-container {
|
|
background: var(--color-bg-surface);
|
|
padding: var(--spacing-lg);
|
|
border-radius: var(--border-radius-lg);
|
|
box-shadow: var(--shadow-md);
|
|
margin-bottom: var(--spacing-xs);
|
|
border: var(--border-width-thin) solid var(--color-border-light);
|
|
}
|
|
|
|
.add-item-form {
|
|
display: flex;
|
|
flex-direction: column;
|
|
gap: var(--spacing-sm);
|
|
}
|
|
|
|
/* Form Fields */
|
|
.add-item-form-field {
|
|
display: flex;
|
|
flex-direction: column;
|
|
position: relative;
|
|
}
|
|
|
|
.add-item-form-input {
|
|
padding: var(--input-padding-y) var(--input-padding-x);
|
|
border: var(--border-width-thin) solid var(--input-border-color);
|
|
border-radius: var(--input-border-radius);
|
|
font-size: var(--font-size-base);
|
|
font-family: var(--font-family-base);
|
|
transition: var(--transition-base);
|
|
width: 100%;
|
|
}
|
|
|
|
.add-item-form-input:focus {
|
|
outline: none;
|
|
border-color: var(--input-focus-border-color);
|
|
box-shadow: var(--input-focus-shadow);
|
|
}
|
|
|
|
/* Suggestion List Positioning */
|
|
.add-item-form-field .suggestion-list {
|
|
position: absolute;
|
|
top: 100%;
|
|
left: 0;
|
|
right: 0;
|
|
margin-top: var(--spacing-xs);
|
|
z-index: var(--z-dropdown);
|
|
}
|
|
|
|
/* Actions Row */
|
|
.add-item-form-actions {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: space-between;
|
|
gap: var(--spacing-md);
|
|
}
|
|
|
|
/* Quantity Control */
|
|
.add-item-form-quantity-control {
|
|
display: flex;
|
|
align-items: center;
|
|
gap: var(--spacing-xs);
|
|
}
|
|
|
|
.quantity-btn {
|
|
width: 40px;
|
|
height: 40px;
|
|
border: var(--border-width-thin) solid var(--color-border-medium);
|
|
background: var(--color-bg-surface);
|
|
color: var(--color-text-primary);
|
|
border-radius: var(--border-radius-sm);
|
|
font-size: var(--font-size-xl);
|
|
font-weight: var(--font-weight-bold);
|
|
cursor: pointer;
|
|
transition: var(--transition-base);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
padding: 0;
|
|
}
|
|
|
|
.quantity-btn:hover:not(:disabled) {
|
|
background: var(--color-primary-light);
|
|
border-color: var(--color-primary);
|
|
color: var(--color-primary);
|
|
}
|
|
|
|
.quantity-btn:active:not(:disabled) {
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
.quantity-btn:disabled {
|
|
background: var(--color-bg-disabled);
|
|
color: var(--color-text-disabled);
|
|
border-color: var(--color-border-disabled);
|
|
cursor: not-allowed;
|
|
opacity: 0.5;
|
|
}
|
|
|
|
.add-item-form-quantity-input {
|
|
width: 40px;
|
|
max-width: 40px;
|
|
padding: var(--input-padding-y) var(--input-padding-x);
|
|
border: var(--border-width-thin) solid var(--input-border-color);
|
|
border-radius: var(--input-border-radius);
|
|
font-size: var(--font-size-base);
|
|
font-family: var(--font-family-base);
|
|
text-align: center;
|
|
transition: var(--transition-base);
|
|
-moz-appearance: textfield; /* Remove spinner in Firefox */
|
|
}
|
|
|
|
/* Remove spinner arrows in Chrome/Safari */
|
|
.add-item-form-quantity-input::-webkit-outer-spin-button,
|
|
.add-item-form-quantity-input::-webkit-inner-spin-button {
|
|
-webkit-appearance: none;
|
|
margin: 0;
|
|
}
|
|
|
|
.add-item-form-quantity-input:focus {
|
|
outline: none;
|
|
border-color: var(--input-focus-border-color);
|
|
box-shadow: var(--input-focus-shadow);
|
|
}
|
|
|
|
/* Submit Button */
|
|
.add-item-form-submit {
|
|
height: 40px;
|
|
padding: 0 var(--spacing-lg);
|
|
background: var(--color-primary);
|
|
color: var(--color-text-inverse);
|
|
border: none;
|
|
border-radius: var(--button-border-radius);
|
|
font-size: var(--font-size-base);
|
|
font-weight: var(--button-font-weight);
|
|
cursor: pointer;
|
|
transition: var(--transition-base);
|
|
margin-top: var(--spacing-sm);
|
|
}
|
|
|
|
.add-item-form-submit:hover:not(:disabled) {
|
|
background: var(--color-primary-hover);
|
|
transform: translateY(-1px);
|
|
box-shadow: var(--shadow-md);
|
|
}
|
|
|
|
.add-item-form-submit:active:not(:disabled) {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
.add-item-form-submit.disabled,
|
|
.add-item-form-submit:disabled {
|
|
background: var(--color-bg-disabled);
|
|
color: var(--color-text-disabled);
|
|
cursor: not-allowed;
|
|
opacity: 0.6;
|
|
box-shadow: none;
|
|
transform: none;
|
|
}
|
|
|
|
/* Responsive */
|
|
@media (max-width: 480px) {
|
|
.add-item-form-container {
|
|
padding: var(--spacing-md);
|
|
}
|
|
|
|
.quantity-btn {
|
|
width: 36px;
|
|
height: 36px;
|
|
font-size: var(--font-size-lg);
|
|
}
|
|
}
|