Oups

Il semble que vous soyez des États-Unis

Accédez à biencesusa.com

SCSS Variables

Colors

$mainColor var(--primary-color)
$textColor var(--secondary-color)
$lightColor var(--light-color)
$ctaImportantColor var(--cta-important-color)
$backgroundGray var(--background-gray-color)
$backgroundStandoutGray var(--background-standout-gray-color)
$borderGray var(--border-color)
$error-color #D32F2F
$warning-color #E89A3C
$success-color #008000
$green-yuka-color #137B36

Text defaults

$defaultColor $textColor
$defaultSizeMin 1.4
$defaultSizeMax 1.7
$defaultTypo var(--font-text)
$defaultTransform none

Breakpoints

$uHd 2560px
$hd 1920px
$desktop 1600px
$laptop 1366px
$computer 1024px
$tablet 768px
$smartphone 510px

Layout

$layout_width 450px
$layout_width_desktop 700px
$surround_padding 25px
$table-width calc($layout_width_desktop - $surround_padding * 2)
$navContentMargin 7.5
$footerContentMargin 3

Sections

$sectionPaddingMax 7.5
$sectionPaddingMin 3.5
$productPageSectionPaddingMax 10
$productPageSectionPaddingMin 5
$blockTitleBottomMarginMax 8
$blockTitleBottomMarginMin 5
$sectionInnerMarginMax 5
$sectionInnerMarginMin 3.5
$sectionInnerElementMarginMax 2
$sectionInnerElementMarginMin 1.75

Styles

utility

main-color
Utility example — hover / active / transform
  • Forcer la couleur principale sur un texte
mc-hover
Utility example — hover / active / transform
  • Appliquer une couleur mainColor au hover
text-uppercase
Utility example — hover / active / transform
text-none
Utility example — hover / active / transform
text-muted
Utility example — hover / active / transform

text

default-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
  • Style texte par défaut
text-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
  • Alias de default-style
light-subtitle-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
heavy-subtitle-uppercase-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
form-label-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
form-label-checkbox-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
product-name-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
promoted-product-name-style
select-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
small-text-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
text-bold-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
font2-small-smaller-title-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
font2-small-title-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
font2-small-italic-title-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
font2-title-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
font2-title-italic-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
font2-text-italic-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
font2-slideshow-slogan-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
font2-cta-slogan-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
font2-big-title-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
footer-links-title-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
footer-copyright-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
footer-address-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
fidelity-offer-title-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
font1-medium-title-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
font1-bold-title-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
font1-medium-slogan-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.

menu

menu-post-title-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
menu-top-link-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
menu-bottom-link-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
menu-link-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
menu-link-hover-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
menu-link-mc-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
menu-sub-link-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
menu-cart-qty-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
menu-promo-bar-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
menu-responsive-link-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
menu-responsive-lang-link-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
menu-responsive-search-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
menu-responsive-search-placeholder-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.

product

shop-product-title-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
shop-product-description-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
shop-product-fake-discount-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
shop-product-discount-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
shop-product-base-price-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
shop-product-price-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
product-instead-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
product-score-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
product-step-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
product-step-mc-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
ppp-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.
product-inci-style
Example text (text, menu, product, etc.) — The quick brown fox jumps over the lazy dog.

link

footer-link-hover-style
Link example

cta

add-to-cart-11-style
CTA example
add-to-cart-12-style
CTA example
cta-1-style
CTA example
cta-2-style
CTA example
cta-3-style
CTA example
cta-4-style
CTA example
cta-important-style
CTA example
unavailable-style
CTA example
unavailable-2-style
CTA example