template-picker.css

TLDR

The template-picker.css file is responsible for styling the Template Picker section of the website. It defines the layout, positioning, and appearance of the template picker container, sidebar, preview, and item elements.

Classes

Class: .template-picker-container

This class is used to define the styling for the overall container of the template picker section. It sets the text alignment to center, adds top margin, and positions it relatively.

Class: .template-picker

The template-picker class is used to style the main template picker element. It sets the z-index, display, overflow, margin, border-radius, background color, and box-shadow.

Class: .template-picker__sidebar

This class styles the sidebar of the template picker. It sets the background, flex property, text alignment, and padding for the sidebar.

Class: .template-picker__preview

This class is responsible for styling the preview section within the template picker. It sets the height of the preview to 740px.

Class: .template-picker-item

The template-picker-item class defines the styling for each individual item within the template picker. It sets the margin, cursor, font size, font weight, opacity, gap, padding, height, display, align-items, and border-radius. It also sets a transition for the item's hover state.

Class: .template-picker-item:hover

This class defines the styling when hovering over a template picker item. It sets the background color to a light gray.

Class: .template-picker-item.active

The template-picker-item.active class is applied to the currently active or selected template picker item. It sets the background color and text color.

Media Queries

The template-picker.css file includes a media query to adjust the styling for smaller screens with a maximum width of 1280px. Within this media query, the layout of the template picker changes. The main template picker element changes to a block display, the sidebar becomes a flex container with centered content, and the background color of the sidebar is set to transparent. The height of the template picker preview also becomes auto.

/* Template Picker */

.template-picker-container {
    text-align: center;
    margin-top: 180px;
    position: relative;
}

.template-picker {
    position: relative;
    z-index: 5;
    display: flex;
    overflow: hidden;
    margin-top: 48px;
    border-radius: 12px;
    background-color: white;
    box-shadow: var(--shadow-image);
}

.template-picker__sidebar {
    background: #F7F7F8;
    flex: 0 0 292px;
    text-align: left;
    padding: 16px;
}

.template-picker__preview {
    height: 740px;
}

.template-picker-item {
    margin-bottom: 8px;
    cursor: pointer;
    font-size: 15px;
    font-weight: 600;
    opacity: 0.72;
    gap: 10px;
    padding: 0 10px;
    height: 40px;
    display: flex;
    align-items: center;
    border-radius: 4px;
    transition: var(--transition-btn);
}

.template-picker-item:hover {
    background-color: rgba(0, 0, 0, 0.06);
}

.template-picker-item.active {
    background-color: rgba(var(--denimBtnRgb), 0.08);
    color: var(--denimBtn);
}

@media (max-width: 1280px) {
    .template-picker {
        display: block;
    }

    .template-picker__sidebar {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
        gap: 0 40px;
        background-color: transparent;
    }

    .template-picker__preview {
        height: auto;
    }
}