LiveMarket Single Video With Poll Component

The Single Video With Poll component is a variant of Single Video, adding a survey functionality. It is otherwise identical to the Single Video component.

Usage

Basic example with props

<lm-single-video-with-poll
        token="your token here"
        tag="your placement tag here"
        video-border-radius="1"
></lm-single-video-with-poll>

Component Props

General props

Click here to see the props shared across all components.

Props available only in the Poll variant

Prop	Description	Default
`is-poll-closed`	A Boolean prop hiding the poll.	`false`

Props only available in Single Video component

Prop	Description	Default
`video-border-radius`	Border radius of the component in rem	`0.5`

CSS variables

Common variables

Click here to see the variables shared across all components.

Poll variables

Variable	Description	Default
`--lm-poll-question-color`	Poll question text color	`#38416f`
`--lm-poll-question-font-family`	Poll question font family	`"Inter", sans-serif`
`--lm-poll-question-border-radius`	Poll question border radius	`0.5rem`
`--lm-poll-question-font-size`	Poll question font size (desktop)	`1rem`
`--lm-poll-question-font-size-mobile`	Poll question font size (mobile)	`0.75rem`
`--lm-poll-question-padding`	Poll question box padding (desktop)	`0.5rem 0.625rem`
`--lm-poll-question-padding-mobile`	Poll question box padding (mobile)	`0.25rem 0.375rem`
`--lm-poll-question-height`	Poll question box height (desktop)	`3.5rem`
`--lm-poll-question-height-mobile`	Poll question box height (mobile)	`2.75rem`

`--lm-poll-questions-title-color`	Poll title text color	`#141b44`
`--lm-poll-questions-title-font-family`	Poll title font family	`"Inter", sans-serif`

`--lm-poll-question-filler-color`	Color of the vote ratio indicator, when any poll answer has been chosen	`#ea1f44`
`--lm-poll-question-chosen-background`	Poll question box background color when any option has been chosen	`#171545`

`--lm-poll-question-active-border-color`	Poll question box border color when `focus` or `active`	`#49456e`

Products List

Variable	Description	Default
`--lm-modal-product-list-border-radius`	Border radius for product list in modal	`0.625rem`
`--lm-modal-product-list-image-border-radius`	Border radius for product list images in modal	`0.5rem`
`--lm-modal-product-list-title-font-size`	Font size of the product list title in modal	`0.625rem`
`--lm-modal-product-list-title-line-height`	Line height of the product list title in modal	`1`
`--lm-modal-product-list-title-font-weight`	Font weight of the product list title in modal	`500`
`--lm-modal-product-list-price-color`	Color of price in product list in modal	`#BD1C33`
`--lm-modal-product-list-price-font-size`	Font size of price in product list in modal	`0.625rem`
`--lm-modal-product-list-price-font-weight`	Font weight of price in product list in modal	`400`
`--lm-modal-product-list-price-line-height`	Line height of price in product list in modal	`1.5`

All Drawers

Variable	Description	Default
`--lm-drawer-close-btn-bg-color`	Background color for button closing the drawer	`#00000014`
`--lm-drawer-close-btn-color`	Color of icon in button closing the drawer	`#fff`
`--drawer-border-radius`	Border radius of the drawer	`25px`

Product drawer

Variable	Description	Default
`--lm-modal-product-drawer-title-font-size`	Font size of the title in drawer	`0.875rem`
`--lm-modal-product-drawer-title-font-weight`	Font weight of the title in drawer	`500`
`--lm-modal-product-drawer-title-line-height`	Line height of the title in drawer	`1.2`

Product drawer - price when no discount

Variable	Description	Default
`--lm-modal-product-drawer-price-font-size`	Font size of the price in drawer with no discount	`0.875rem`
`--lm-modal-product-drawer-price-line-height`	Line height of the price in drawer with no discount	`400`
`--lm-modal-product-drawer-price-font-weight`	Font weight of the price in drawer with no discount	`1.2`
`--lm-modal-product-drawer-price-color`	Color of the price in drawer with no discount	`#BD1C33`

Product drawer - price discounted

Variable	Description	Default
`--lm-modal-product-drawer-price-discounted-font-size`	Font size of the price in drawer with discount	`0.875rem`
`--lm-modal-product-drawer-price-discounted-font-weight`	Font weight of the price in drawer with discount	`400`
`--lm-modal-product-drawer-price-discounted-line-height`	Line height of the price in drawer with discount	`1.2`
`--lm-modal-product-drawer-price-discounted-color`	Color of the price in drawer with discount	`#BD1C33`

Product drawer - price undiscounted

Variable	Description	Default
`--lm-modal-product-drawer-price-undiscounted-font-size`	Font size of the undiscounted price in drawer	`0.875rem`
`--lm-modal-product-drawer-price-undiscounted-font-weight`	Font weight of the undiscounted price in drawer	`400`
`--lm-modal-product-drawer-price-undiscounted-line-height`	Line height of the undiscounted price in drawer	`1.2`
`--lm-modal-product-drawer-price-undiscounted-color`	Color of the undiscounted price in drawer	`#616161`
`--lm-modal-product-drawer-price-undiscounted-opacity`	Opacity of the undiscounted price in drawer	`0.3`

Product drawer - product select

Variable	Description	Default
`--lm-modal-product-drawer-select-border-radius`	Border radius of select in drawer	`0.875rem`
`--lm-modal-product-drawer-select-padding`	Padding of select in drawer	`0.5rem 2.25rem 0.5rem 0.5rem`
`--lm-modal-product-drawer-select-border-color`	Border color of select in drawer	`#ABB4C1`

Product drawer - Add to Cart

Variable	Description	Default
`--lm-modal-product-drawer-add-to-cart-bg`	Background color of the add to cart button	`BD1C33`
`--lm-modal-product-drawer-add-to-cart-border-radius`	Border radius of the add to cart button	`0.875rem`