Guided Recommendations Styling

Questionnaire Style Options

heading

.your-heading-class{
    font-family
    font-size
    line-height
    letter-spacing
    text-align
    color
}

container

.your-container-class{
    width
    max-width
    min-width
    padding
    margin
}

selector
Exterior styling applied to the option

.your-selector-class{
    width
    max-width
    min-width
    padding
    margin
}

selectorLabel
Styling of the option
selector class is required if changing

.your-selector-label-class{
    width
    max-width
    min-width
    padding
    margin
    background
    border-radius
    font-family
    font-size
    text-align
    letter-spacing
    color
}

.your-selector-label-class:hover,
.your-selector-label-class:focus{
    // apply styling on hover and/or focus of of option
}

.your-selector-class input:checked > .your-selector-label-class{
    // apply styling on active/selected
}

rangeTrack
Styling of the range input default background

.your-range-track-class{
    height
    background
    border-radius
}

rangeTrackActive
Styling of the range input selection background

.your-range-track-active-class{
    height
    background
}

rangeDrag
Styling of the range input drag (min/max)

.your-range-drag-class{
    height
    width
    background
    border-radius
}
.your-range-drag-class:hover,
.your-range-drag-class:focus{
    // apply style on hover and/or focus of drag
}

Results Style Options

heading

.your-heading-class{
    font-family
    font-size
    line-height
    letter-spacing
    text-align
    color
}

container

.your-container-class{
    width
    max-width
    min-width
    padding
    margin
}

productCard
Styling of the product card

.your-product-card-class{
    width
    padding
    margin
    background
    border
    border-radius
}

// Product Title
.your-product-card-class > h3{}

// Product Meta Text
.your-product-card-class > span{}

productCardBtn
Styling of the buttons

.your-button-class{
    width
    padding
    background
    border-radius
    font-family
    font-size
    text-align
    letter-spacing
    color
}

.your-button-class:hover,
.your-button-class:focus{
    // apply styling on hover and/or focus of of button
}

Result Sidemenu Style Options

item | itemActive
Styling of the buttons

.your-item-class{
    padding
    background
    border-radius
    border
    font-family
    font-size
    text-align
    letter-spacing
    color
}

.your-item-class:hover,
.your-item-class:focus{
    // apply styling on hover and/or focus of of side menu item
}

.your-item-active-class,
.your-item-active-class:hover,
.your-item-active-class:focus{
	// apply styling to differ from default side menu item state
}

modifySelectionsBtn | backToTopBtn
Styling of the buttons, same styling options as productCardBtn

Miscellaneous Style Options

basicButton
Styling of the buttons, same styling options as productCardBtn

loadingColor
HEX color to apply new color