:root {
/* Below variables are pre-configured for certain components
for ease of updating the theme. Individual components can be updated
without using the variables.
*/
/*
location modal,
side drawer,
store menu modal
*/
--main-bg: pink;
--main-text-color: #333;
/*
LOCATION modal button,
VIEW LIST/VIEWMAP button,
VIEW MENU in side drawer,
GO TO WEBSITE button in store menu modal
*/
--primary-button-bg: var(--main-bg);
--primary-button-text-color: var(--main-text-color);
--primary-button-bg-hover: #333;
--primary-button-text-color-hover: pink;
/*
USE CURRENT LOCATION button in location modal,
GO TO WEBSITE button in side drawer,
DIRECTIONS button in store menu modal,
CLOSE button for all modals
*/
--secondary-button-bg: #333;
--secondary-button-text-color: pink;
--secondary-button-bg-hover: #111;
--secondary-button-text-color-hover: pink;
/* ALL SEARCH BARS */
--search-icon-color: var(--main-text-color);
--search-input-text-color: var(--main-text-color);
/* RANGE SLIDER in location modal -- this should be in hsl format */
--range-slider-color: 0, 0%, 20%;
/* main SEARCH BAR toggle when more than 2 products is selected "Show only Retailers with everything in my selection:" */
--toggle-color: rgba(51, 51, 51, 0.5);
--toggle-color-checked: var(--main-text-color);
}
/* ------------------------------------- */
/* Main Backgrounds */
/* ------------------------------------- */
/* location modal */
.hbd-location-modal-box,
.hbd-location-modal-box .sc-bBABsx,
.hbd-location-modal-box [role="row"],
.hbd-location-modal-box nav.rdt_Pagination,
.hbd-location-modal-box .sc-ezOQGI,
/* side drawer */
.hbd-side-drawer,
/* store modal */
.hbd-store-menu-modal-box,
#storeMapModal .hbd-products-box {
background-color: var(--main-bg);
color: var(--main-text-color);
}
/* Main buttons - view button and location button */
#hbd-viewButton,
.hbd-locationModal {
background: var(--primary-button-bg);
color: var(--primary-button-text-color);
}
#hbd-viewButton:hover,
.hbd-locationModal:hover {
background: var(--primary-button-bg-hover);
color: var(--primary-button-text-color-hover);
}
/* Main search box */
.hbd-product-search-box, .hbd-product-search-box div, label[for="toggleAll"] {
color: var(--search-input-text-color);
}
.hbd-product-search-box>div:hover,
.hbd-product-search-box>div:focus-within {
border-color: var(--search-input-text-color);
box-shadow: var(--search-input-text-color);
}
#toggleAll {
background-color: var(--toggle-color);
}
#toggleAll:checked {
background-color: var(--toggle-color-checked);
}
/* ------------------------------------- */
/* Location Modal Elements */
/* ------------------------------------- */
/* search box */
.hbd-location-modal-box div input, #default-search {
color: var(--search-input-text-color);
border-color: var(--search-input-text-color);
}
/* search icon */
.hbd-location-modal-box .search-icon,
.hbd-location-modal-box .clear-icon > svg {
fill: var(--search-icon-color)
}
/* search results */
.hbd-location-modal-box [data-test="result"] span {
color: var(--search-input-text-color);
}
/* use current location button */
.hbd-current-location-button {
background: var(--secondary-button-bg);
color: var(--secondary-button-text-color);
}
.hbd-current-location-button:hover {
background: var(--secondary-button-bg-hover);
color: var(--secondary-button-text-color-hover);
}
/* Range slider */
.range-success {
--range-shdw: var(--range-slider-color);
}
/* search icon #2 */
.hbd-searchIcon {
stroke: var(--search-icon-color);
}
/* pagination buttons */
.hbd-location-modal-box nav.rdt_Pagination svg {
fill: var(--main-text-color);
}
/* close button */
.hbd-location-modal-box .hbd-close-button {
background: var(--secondary-button-bg);
color: var(--secondary-button-text-color);
}
.hbd-location-modal-box .hbd-close-button:hover {
background: var(--secondary-button-bg-hover);
color: var(--secondary-button-text-color-hover);
}
/* ------------------------------------- */
/* List View Elements */
/* ------------------------------------- */
.hbd-storeName, .hbd-storeAddress, .hbd-storeNumber, .hbd-storeDistance {
color: var(--main-text-color);
}
.hbd-storeNumber:hover {
color: var(--main-text-color);
}
.hbd-storeMenuBtn, .hbd-goToWebsiteBtn {
background: var(--primary-button-bg);
color: var(--primary-button-text-color);
}
.hbd-storeMenuBtn:hover, .hbd-goToWebsiteBtn:hover {
background: var(--primary-button-bg-hover);
color: var(--primary-button-text-color-hover);
}
.hbd-storeWebsiteBtn {
background: var(--secondary-button-bg);
color: var(--secondary-button-text-color);
border: none;
}
.hbd-storeWebsiteBtn:hover {
background: var(--secondary-button-bg-hover);
color: var(--secondary-button-text-color-hover);
}
/* ------------------------------------- */
/* Store Modal Elements */
/* ------------------------------------- */
.hbd-productBrand, .hbd-productName, .hbd-productPrice {
color: var(--main-text-color);
}
.hbd-directionsBtn, .hbd-seeAllPrices, .hbd-seeAllPrices:focus {
background: var(--secondary-button-bg);
color: var(--secondary-button-text-color);
}
.hbd-directionsBtn {
border: none;
}
.hbd-directionsBtn:hover, .hbd-seeAllPrices:hover {
background: var(--secondary-button-bg-hover);
color: var(--secondary-button-text-color-hover);
}
.hbd-productSize {
background: none;
border: 1px solid var(--main-text-color);
color: var(--main-text-color);
}
/* close button */
.hbd-store-menu-modal-box .hbd-close-button {
background: var(--secondary-button-bg);
color: var(--secondary-button-text-color);
}
.hbd-store-menu-modal-box .hbd-close-button:hover {
background: var(--secondary-button-bg-hover);
color: var(--secondary-button-text-color-hover);
}
/* loading */
.hbd-loading {
color: var(--main-text-color)
}
.hbd-loading-dot {
background: var(--main-text-color)
}