/* ------------- SOMMAIRE ------------- */ /* @AUTHOR : Nicolas BOUDOT ATOME : BUTTON Styles des boutons */ /* 00 - GÉNÉRAL Bouton par défaut Bouton avec icon Bouton avec icon seulement 01 - MODIFIER Couleurs Gris Thème Size 02 - WYSIWYG 03 - SPÉCIFIQUES Bouton burger Bouton close Scroll Top Bouton link */ /* ------------------------- 00 - GÉNÉRAL Bouton par défaut ------------------------- */ /* Infos : 1. On utilise la classe .atom_button pour établier les règles de bases. On lui applique toutes les propriétés car cela peut aussi s'appliquer sur des éléments dont on a pas la main et ainsi surcharger les styles. Ce bouton sera celui de base et donc celui le plus répandu sur tout le site. 2. .parent_atom_button est utilisée sur un élement parent pour ciblée un enfant. On utilise un préfixe .parent_* pour mieux identifier son utilité. */ /* WooCommerce */ .wc-block-components-button.components-button:not(.wc-block-components-drawer__close), .woocommerce a.button:not(.acf-button).alt, .woocommerce a.button:not(.acf-button), .woocommerce button.button.alt.disabled, .woocommerce button.button.alt, .woocommerce button.button:not(.insert-media), /* Gravity Form */ .gform_button_select_files, .gform_button, /* Choisir un fichier */ input[type="file"]::-webkit-file-upload-button, .parent_atom_button a, .atom_button, .atom_button-icon, .item-filtre-valider .search-filter-input-button { cursor: pointer; display: inline-flex; justify-content: center; align-items: center; background-color: transparent; border: 2px solid; border-radius: 30px; font-size: 2rem; font-weight: 400; text-align: center; text-decoration: none; padding: 12px 22px; line-height: 110%; transition: background-color .4s, color .4s, border-color .4s; } /* Hover */ /* .atom_button:hover { background-color: var(--c-tertiary); color: var(--c-quaternary); border: 1px solid var(--c-tertiary); } */ .item-filtre-valider .search-filter-input-button { margin-left: 23px; text-transform: uppercase; } @media(max-width: 767px) { /* .woocommerce a.button:not(.acf-button), .woocommerce button.button, .atom_button--hover--primary:hover, .atom_button--primary, .item-filtre-valider .search-filter-input-button { font-size: 1.5rem; } */ .item-filtre-valider .search-filter-input-button { margin-left: 0; } } /* ------------------------- 00 - GÉNÉRAL Bouton avec icon ------------------------- */ .atom_button-icon { position: relative; } /* Icon + */ .atom_button-icon::after { content: "\e90e"; font-family: 'icomoon'; margin-left: 10px; } .atom_button-icon > span { text-decoration: underline; } /* -------------------------------- 00 - GÉNÉRAL Bouton avec icon seulement -------------------------------- */ .atom_button-icon-only { display: flex; justify-content: center; align-items: center; background-color: var(--c-primary); color: var(--white); font-size: 1.8rem; border-radius: 50%; width: 50px; height: 50px; } /* ----------------- 01 - MODIFIER Couleurs Thème ----------------- */ .woocommerce a.button:not(.acf-button), .woocommerce button.button, .atom_button--hover--primary:hover, .atom_button--primary, .item-filtre-valider .search-filter-input-button { border-color: var(--c-primary); color: var(--c-primary); } /* Hover */ .woocommerce a.button:not(.acf-button):hover, .woocommerce button.button:hover, .atom_button--hover--primary, .atom_button--primary:hover, .item-filtre-valider .search-filter-input-button:hover, .item-filtre-valider .search-filter-input-button:hover:not(.is-disabled):not(.search-filter-input-button--is-selected) { background-color: var(--c-primary); border-color: var(--c-primary); color: var(--white); } .atom_button--hover--secondary:hover, .atom_button--secondary { border-color: var(--c-secondary); color: var(--c-secondary); } /* Hover */ .atom_button--hover--secondary, .atom_button--secondary:hover { background-color: var(--c-secondary); border-color: var(--c-secondary); color: var(--white); } .atom_button--hover--tertiary:hover, .atom_button--tertiary { color: var(--c-tertiary); border-color: var(--c-tertiary); } /* Hover */ .atom_button--hover--tertiary, .atom_button--tertiary:hover { background-color: var(--c-tertiary); border-color: var(--c-tertiary); color: var(--c-primary); } .card-produit, .card-produit__titre, .card-produit__titre__texte, .card-produit__titre__texte__bouton, .prefixe_card-produit__titre__texte__bouton, .prefixe-compose_card-produit__titre__texte__bouton { color: var(--white); } /* ----------------- 02 - WYSIWYG ----------------- */ p:has(+ p > .atom_button) { margin-bottom: 10px; } /* --------------------- 03 - SPÉCIFIQUES Bouton burger --------------------- */ .atom_button-burger { display: flex; flex-direction: column; justify-content: center; align-items: flex-start; margin-left: auto; width: 40px; } /* Général */ .atom_button-burger span::before, .atom_button-burger span::after, .atom_button-burger span { display: block; background-color: #6125DD; height: 4px; border-radius: 99px; width: 100%; } /* Barre du milieu */ .atom_button-burger span { position: relative; display: block; margin-right: 12px; transition: background-color .4s; } /* Active */ .atom_button-burger.active span { background-color: transparent; } /* 1ère et 3ème barre */ .atom_button-burger span::after, .atom_button-burger span::before { content: ""; position: absolute; transition: transform .4s; } /* 1ère barre */ .atom_button-burger span::before { bottom: calc(100% + 6px); } /* Active */ .atom_button-burger.active span::before { transform: translateY(calc(100% + 6px)) rotate(45deg); background-color: var(--white); } /* 3ème barre */ .atom_button-burger span::after { top: calc(100% + 6px); } /* Active */ .atom_button-burger.active span::after { transform: translateY(calc(-100% - 6px)) rotate(-45deg); background-color: var(--white); } /* --------------------- 03 - SPÉCIFIQUES Bouton close --------------------- */ .atom_button-close { display: flex; justify-content: flex-end; padding: 0 25px; height: 84px; font-size: 2.1rem; } /* --------------------- 03 - SPÉCIFIQUES Scroll Top --------------------- */ .atom_button-scroll-top { position: absolute; right: 30px; bottom: 30px; display: inline-flex; justify-content: center; align-items: center; color: var(--c-primary); border: 3px solid var(--c-primary); border-radius: 50%; font-weight: 400; line-height: 1; text-decoration: none; padding: 15px; transform: rotate(-90deg); z-index: 1; } @media (max-width: 991px) { .atom_button-scroll-top { right: 20px; bottom: 70px; } } /* Before */ .atom_button-scroll-top::before { content: "\e90d"; font-family: 'icomoon'; font-size: 2.5rem; transition: color .4s, transform .4s; } /* Hover */ .atom_button-scroll-top:hover::before { content: "\e90d"; color: var(--c-secondary); transform: translateX(6px); }