mypresta.rocks/prestashop-entity-selector
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Style: chips toolbar compact design with bootstrap specificity fix

Browse Source 
- Add bootstrap specificity overrides for input/select in chips toolbar
- Use #content.bootstrap selector with doubled classes for specificity
- Reduce toolbar height with consistent padding (0.2rem vertical)
- Change border-radius from pill to subtle rounded corners
- Simplify input structure (embedded search icon via background)
- Align all toolbar elements (input, select, count, clear button)

Co-Authored-By: Claude Opus 4.5 <noreply@anthropic.com>
This commit is contained in:
myprestarocks
2026-01-31 22:40:57 +01:00
parent acbcf55b1c
commit 603be61f71
10 changed files with 375 additions and 221 deletions
Download Patch File Download Diff File Expand all files Collapse all files

297
sources/scss/components/_dropdown.scss
View File

@@ -388,114 +388,140 @@
}
}
// Load more controls
.load-more-controls {
display: flex;
align-items: center;
justify-content: center;
gap: $es-spacing-sm;
padding: $es-spacing-sm $es-spacing-md;
border-top: 1px solid $es-border-color;
font-size: $es-font-size-xs;
color: $es-text-muted;
.remaining-count {
font-weight: $es-font-weight-semibold;
color: $es-text-secondary;
}
.load-more-select {
@include input-base;
padding: 0.25rem 0.5rem;
font-size: $es-font-size-xs;
min-width: 70px;
}
}
// Load more button
.dropdown-load-more {
display: flex;
justify-content: center;
padding: $es-spacing-md;
border-top: 1px solid $es-border-color;
.load-more-btn {
@include button-reset;
display: inline-flex;
align-items: center;
gap: $es-spacing-xs;
padding: $es-spacing-sm $es-spacing-md;
font-size: $es-font-size-sm;
font-weight: $es-font-weight-medium;
color: $es-primary;
background: $es-primary-light;
border-radius: $es-radius-md;
transition: all $es-transition-fast;
&:hover {
background: rgba($es-primary, 0.2);
}
&.loading {
opacity: 0.7;
cursor: wait;
}
}
}
// Dropdown footer
// Unified dropdown footer - combines load more and actions
.dropdown-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: $es-spacing-sm;
gap: $es-spacing-md;
padding: $es-spacing-sm $es-spacing-md;
background: $es-bg-header;
background: $es-slate-50;
border-top: 1px solid $es-border-color;
border-radius: 0 0 $es-radius-lg $es-radius-lg;
}
.dropdown-selection-count {
// Left side: load more controls
.dropdown-footer-left {
display: flex;
align-items: center;
gap: $es-spacing-xs;
font-size: $es-font-size-xs;
color: $es-text-muted;
strong {
.load-label {
color: $es-text-muted;
}
.load-more-select,
select.load-more-select {
appearance: none;
padding: 0.25rem 1.5rem 0.25rem 0.5rem;
border: 1px solid $es-border-color;
border-radius: $es-radius-sm;
background: $es-white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23666' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 0.4rem center;
background-size: 8px;
font-size: $es-font-size-xs;
color: $es-text-secondary;
cursor: pointer;
min-width: 55px;
&:hover {
border-color: $es-primary;
}
&:focus {
outline: none;
border-color: $es-primary;
}
}
.remaining-text {
color: $es-text-muted;
strong {
color: $es-text-secondary;
font-weight: $es-font-weight-semibold;
}
}
.btn-load-all {
@include button-reset;
padding: 0.25rem 0.5rem;
font-size: $es-font-size-xs;
color: $es-primary;
background: transparent;
border-radius: $es-radius-sm;
transition: all $es-transition-fast;
&:hover {
background: $es-primary-light;
}
}
}
.dropdown-actions {
// Right side: action buttons
.dropdown-footer-right {
display: flex;
align-items: center;
gap: $es-spacing-sm;
}
.dropdown-action-btn {
@include button-reset;
padding: $es-spacing-sm $es-spacing-md;
font-size: $es-font-size-sm;
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
font-size: $es-font-size-xs;
font-weight: $es-font-weight-medium;
border-radius: $es-radius-md;
border-radius: $es-radius-sm;
transition: all $es-transition-fast;
.btn-shortcut {
font-size: 10px;
padding: 0.125rem 0.25rem;
background: rgba(0, 0, 0, 0.08);
border-radius: 3px;
font-weight: $es-font-weight-normal;
}
&.btn-cancel {
color: $es-text-secondary;
background: $es-slate-100;
background: $es-white;
border: 1px solid $es-border-color;
&:hover {
background: $es-slate-200;
background: $es-slate-100;
border-color: $es-border-dark;
}
}
&.btn-apply {
&.btn-apply,
&.btn-save {
color: $es-white;
background: $es-primary;
border: 1px solid $es-primary;
&:hover {
background: $es-primary-hover;
border-color: $es-primary-hover;
}
.btn-shortcut {
background: rgba(255, 255, 255, 0.2);
}
}
}
// Legacy support - hide old load more section when new footer exists
.dropdown-load-more {
display: none;
}
.load-more-controls {
display: none;
}
// Filter panel
.dropdown-filter-panel {
padding: $es-spacing-md;
@@ -1432,56 +1458,123 @@ body > .target-search-dropdown,
@include text-truncate;
}
// Dropdown footer
// Dropdown footer - unified structure
.dropdown-footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: $es-spacing-md;
padding: $es-spacing-sm $es-spacing-md;
background: $es-bg-header;
background: $es-slate-50;
border-top: 1px solid $es-border-color;
border-radius: 0 0 $es-radius-lg $es-radius-lg;
}
.dropdown-footer-left {
display: flex;
align-items: center;
gap: $es-spacing-xs;
font-size: $es-font-size-xs;
color: $es-text-muted;
.load-label {
color: $es-text-muted;
}
.load-more-select,
select.load-more-select {
appearance: none;
padding: 0.25rem 1.5rem 0.25rem 0.5rem;
border: 1px solid $es-border-color;
border-radius: $es-radius-sm;
background: $es-white url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8' viewBox='0 0 8 8'%3E%3Cpath fill='%23666' d='M0 2l4 4 4-4z'/%3E%3C/svg%3E") no-repeat right 0.4rem center;
background-size: 8px;
font-size: $es-font-size-xs;
color: $es-text-secondary;
cursor: pointer;
min-width: 55px;
&:hover {
border-color: $es-primary;
}
&:focus {
outline: none;
border-color: $es-primary;
}
}
.remaining-text {
color: $es-text-muted;
strong {
color: $es-text-secondary;
font-weight: $es-font-weight-semibold;
}
}
}
.dropdown-footer-right {
display: flex;
align-items: center;
gap: $es-spacing-sm;
}
.dropdown-action-btn {
@include button-reset;
display: inline-flex;
align-items: center;
gap: 0.375rem;
padding: 0.375rem 0.75rem;
font-size: $es-font-size-xs;
font-weight: $es-font-weight-medium;
border-radius: $es-radius-sm;
transition: all $es-transition-fast;
white-space: nowrap;
.btn-shortcut {
font-size: 10px;
padding: 0.125rem 0.25rem;
background: rgba(0, 0, 0, 0.08);
border-radius: 3px;
font-weight: $es-font-weight-normal;
}
&.btn-cancel {
color: $es-text-secondary;
background: $es-white;
border: 1px solid $es-border-color;
&:hover {
background: $es-slate-100;
border-color: $es-border-dark;
}
}
&.btn-apply,
&.btn-save {
color: $es-white;
background: $es-primary;
border: 1px solid $es-primary;
&:hover {
background: $es-primary-hover;
border-color: $es-primary-hover;
}
.btn-shortcut {
background: rgba(255, 255, 255, 0.2);
}
}
}
.dropdown-footer-info {
font-size: $es-font-size-xs;
color: $es-text-muted;
}
// Legacy button support
.btn-cancel-dropdown {
@include button-reset;
display: inline-flex;
align-items: center;
gap: 0.25rem;
padding: 0.375rem 0.75rem;
font-size: $es-font-size-sm;
color: $es-text-secondary;
background: $es-white;
border: 1px solid $es-border-color;
border-radius: $es-radius-sm;
cursor: pointer;
&:hover {
background: $es-bg-hover;
color: $es-danger;
border-color: $es-danger;
}
i {
font-size: 10px;
}
kbd {
font-size: 0.65rem;
padding: 0.125rem 0.25rem;
background: $es-slate-100;
border-radius: 2px;
color: $es-text-muted;
margin-left: 0.25rem;
}
}
.btn-confirm-dropdown {
@include button-reset;
display: inline-flex;
align-items: center;