Search view / List items
aggregate | multiselect | slider
css
:root{
--ca-aggregate-control-bg: var(--ca-gray-1);
--ca-multiselect-bg: #FFFFFF;
--ca-multiselect-border: var(--ca-gray-2);
--ca-multiselect-text-color: var(--ca-stone-7);
--ca-multiselect-count-color: var(--ca-stone-7);
--ca-multiselect-bg: #FFFFFF;
--ca-multiselect-text-color: var(--ca-stone-7);
--ca-multiselect-option-text-color: var(--ca-stone-7);
--ca-multiselect-option-text-color: var(--ca-stone-7);
--ca-multiselect-option-text-color-hover: var(--ca-stone-8);
--ca-multiselect-option-text-color-active: var(--ca-stone-7);
--ca-multiselect-option-count-color: var(--ca-stone-7);
--ca-multiselect-icon-color: var(--ca-gray-4);
--ca-rangeslider-bg: #FFFFFF;
--ca-rangeslider-border: var(--ca-gray-2);
--ca-rangeslider-text-color: var(--ca-stone-7);
}
.carads-slider{
/** slider #https://github.com/vueform/slider#styling-with-css-vars */
--slider-connect-bg: var(--ca-stone-7);
--slider-handle-bg: var(--ca-stone-7);
--slider-handle-shadow-active: 0 25px 50px -12px rgb(68 64 60 / 0.25);
--slider-tooltip-font-size: 0.75rem;
--slider-tooltip-bg: var(--ca-stone-7);
}Filter
css
:root{
--ca-filter-current-tags-bg: transparent;
--ca-filter-current-tags-border: var(--ca-stone-7); /** border color*/
--ca-filter-current-tags-color: var(--ca-stone-7);
/** current-tags */
--ca-filter-current-tags-bg-hover: var(--ca-stone-7);
--ca-filter-current-tags-border-hover: var(--ca-stone-7);
--ca-filter-current-tags-color-hover: #FFF;
--ca-filter-current-tags-button-color: var(--ca-stone-7);
--ca-filter-current-tags-button-color-hover: var(--ca-stone-7);
--ca-filter-current-tags-button-bg: transparent;
--ca-filter-current-tags-button-bg-hover: transparent;
/** remove tags */
--ca-filter-remove-current-tags-bg: var(--ca-stone-7);
--ca-filter-remove-current-tags-bg-hover: transparent;
--ca-filter-remove-current-tags-border: var(--ca-stone-7);
--ca-filter-remove-current-tags-border-hover: var(--ca-stone-7);
--ca-filter-remove-current-tags-color: #FFFFFF;
--ca-filter-remove-current-tags-color-hover: var(--ca-stone-7);
/** Mobil button */
--ca-filter-mobile-button-bg: var(--ca-stone-7);
--ca-filter-mobile-button-bg-hover: transparent;
--ca-filter-mobile-button-border: var(--ca-stone-7);
--ca-filter-mobile-button-border-hover: var(--ca-stone-7);
--ca-filter-mobile-button-text: #FFFFFF;
--ca-filter-mobile-button-text-hover: var(--ca-stone-7);
/** Equipment Filter */
--ca-filter-equipment-bg: transparent;
--ca-filter-equipment-color: var(--ca-stone-7);
--ca-filter-equipment-button-bg: var(--ca-stone-7);
--ca-filter-equipment-button-bg-hover: transparent;
--ca-filter-equipment-button-border: var(--ca-stone-7);
--ca-filter-equipment-button-border-hover: var(--ca-stone-7);
--ca-filter-equipment-button-text: #FFFFFF;
--ca-filter-equipment-button-text-hover: var(--ca-stone-7);
}sort bar
css
:root{
--ca-filter-control-bg: var(--ca-stone-7);
--ca-filter-sort-select-bg: #FFFFFF);
--ca-filter-sort-select-border: var(--ca-stone-7);
--ca-filter-sort-select-color: var(--ca-stone-7);
--ca-filter-sort-text-color: #FFFFFF;
--ca-filter-sort-count-color: #FFFFFF;
}car-item (bil car i liste/search/grid view)
css
root{
--ca-car-item-bg: var(--ca-gray-1);
--ca-car-list-item-info-bg: var(--ca-gray-3);
--ca-car-list-item-info-icon-bg: var(--ca-stone-7);
--ca-car-list-item-info-label-color: var(--ca-stone-7);
--ca-car-list-item-info-value-color: var(--ca-stone-7);
--ca-car-list-brand-model-color: var(--ca-stone-7);
--ca-car-list-slagvolume-color: var(--ca-stone-7);
--ca-car-list-variant-color: var(--ca-stone-7);
--ca-car-list-price-label-color: var(--ca-stone-7);
--ca-car-list-price-color: var(--ca-stone-7);
--ca-car-list-tax-label-color: var(--ca-stone-7);
--ca-car-list-tax-color: var(--ca-stone-7);
/** loader - not sure if @ulrik have mange change to logic here around color - try and see*/
--ca-car-body-loading-color: var(--ca-gray-3); /** text color and logo color */
--ca-car-body-loading-color-ring: var(--ca-gray-3);
--ca-car-body-loading-color-fill: var(--ca-stone-7);
--ca-car-body-loading-color-text: var(--ca-stone-7);
/** banner/label colors */
--ca-banner-bg1-color: #ffffff;
--ca-banner-bg2-color: #000000;
--ca-banner-bg3-color: #00FF00;
--ca-banner-bg4-color: #0000FF;
--ca-banner-bg5-color: #FF0000;
--ca-banner-tc1-color: var(--ca-stone-7);
--ca-banner-tc2-color: #ffffff;
/** Santander */
--ca-car-list-santander-color: var(--ca-stone-7);
--ca-car-list-santander-tooltip-open-color: #ffffff;
--ca-car-list-santander-tooltip-open-h3-color: #ffffff;
/** Financing */
--ca-car-list-financing-color: var(--ca-stone-7);
--ca-car-list-financing-tooltip-open-color: #ffffff;
--ca-car-list-financing-tooltip-open-h3-color: #ffffff;
/** autotjek (@ULRIK ---- why not have only one and let @susanne self control what color it are!) */
--ca-autotjek-light-bg-color: #ffffff;
--ca-autotjek-light-text-color: var(--ca-stone-7);
--ca-autotjek-dark-bg-color: var(--ca-stone-7);
--ca-autotjek-dark-text-color: #ffffff;
/** Minilease Info inline */
--ca-car-minilease-list-bg: transparent;
--ca-car-minilease-list-color: var(--ca-stone-7);
--ca-car-minilease-list-button-bg: var(--ca-gray-3);
--ca-car-minilease-list-button-color: var(--ca-gray-7);
/** Leasing inline */
--ca-car-leasinginline-list-bg: transparent;
--ca-car-leasinginline-list-color: var(--ca-stone-7);
--ca-car-leasinginline-list-button-bg: var(--ca-gray-3);
--ca-car-leasinginline-list-button-color: var(--ca-gray-7);
}pagination
css
:root{
--ca-pagination-bg: transparent;
--ca-pagination-bg-hover: var(--ca-gray-1);
--ca-pagination-border: var(--ca-gray-3);
--ca-pagination-border-hover: var(--ca-gray-3);
--ca-pagination-color: var(--ca-gray-5);
--ca-pagination-color-hover: var(--ca-gray-7);
}