Skip to content

Instantly share code, notes, and snippets.

@Neotwalker
Neotwalker / button.sass
Created November 12, 2022 12:28 — forked from agragregra/button.sass
Button Sass Styles (Universal Starter)
.button
display: inline-block
border: none
color: #fff
text-decoration: none
background-color: $accent
padding: 15px 45px
font-size: 13px
text-transform: uppercase
font-weight: 600
@Neotwalker
Neotwalker / catalog for magazine
Last active September 7, 2023 12:03
Классное меню-каталог для интернет магазинов
<style>
.menu
display: flex
align-items: center
gap: 25px
li
a
transition: color .3s ease
font-size: 18px
line-height: 25px
@Neotwalker
Neotwalker / fixed social & button goTop
Last active October 3, 2023 10:51
Кнопки социальных сетей и кнопка скролла вверх
CSS:
<style>
.page--fixed{
position: fixed;
right: 134px;
bottom: 66px;
width: fit-content;
z-index: 2;
display: flex;
gap: 20px;
&__wrapper
&::before, &::after
content: ''
display: block
position: absolute
background: $white
filter: blur(7px)
z-index: 1
width: 40px
height: 110%
if (window.innerWidth > 1200){
let mouseX = 0, mouseY = 0;
document.addEventListener('mousemove', (e) => {
mouseX = e.pageX;
mouseY = e.pageY;
});
let imageMoove = document.querySelectorAll('.mousemoove');
imageMoove.forEach((moove, index) => {
let xp = 0, yp = 0;
let speedMultiplier = 0.5; // по умолчанию скорость 1
@Neotwalker
Neotwalker / Запрет отправки формы (скрытие кнопки) с плагином la-sentinelle
Last active November 25, 2024 10:30
Удаление кнопки, если скрытые поля изменены. Поля взяты из плагина la sentinelle wordpress.
document.querySelectorAll('.la-sentinelle-container input[type="text"]').forEach((field) => {
field.addEventListener('change', () => {
let buttons = document.querySelectorAll('.wpcf7-submit');
buttons.forEach((button) => {
button.remove();
});
});
});
// Пример кнопок
<button class="button button--white modal--login" data-modal-open=".modal--openlogin">Войти</button>
<button class="button modal--auth" data-modal-open=".modal--openreg">Регистрация</button>
// Пример модалок
<div class="modal modal--openlogin">
<div class="modal--wrapper">
<div class="modal--close">
<svg xmlns="http://www.w3.org/2000/svg" width="30" height="30" viewBox="0 0 30 30" fill="none">
<path d="M10.6289 10.625C10.995 10.2589 11.5886 10.2589 11.9547 10.625L15.004 13.6741L18.0531 10.625C18.4192 10.2589 19.0128 10.2589 19.3788 10.625C19.745 10.9911 19.745 11.5847 19.3788 11.9508L16.3297 15L19.379 18.0491C19.7451 18.4153 19.7451 19.0089 19.379 19.375C19.0128 19.7411 18.4192 19.7411 18.0531 19.375L15.004 16.3259L11.9547 19.375C11.9089 19.4208 11.8596 19.4608 11.8076 19.4951C11.4438 19.7354 10.9492 19.6954 10.6289 19.375C10.2628 19.0089 10.2628 18.4153 10.6289 18.0491L13.6781 15L10.6289 11.9508C10.2628 11.5847 10.2628 10.9911 10.6289 10.625Z" fill="#2A179C"/>
// Пример блока faq
<div class="main--faq__item">
<div class="main--faq__item--button">
<span>Заголовок</span>
<div class="main--faq__item--icon">
<span></span>
<span></span>
</div>
</div>
<div class="main--faq__item--answer">
// input
<input class="phone-number" type="tel" name="tel1" id="tel1" placeholder="+7 (999) 000-00-00*" required></input>
// скрипт
let eventCalllback = function(e) {
let el = e.target,
clearVal = el.dataset.phoneClear,
pattern = el.dataset.phonePattern,
matrix_def = "+7 (___) ___-__-__",
matrix = pattern ? pattern : matrix_def,
<!-- SASS -->
.fixed--social
position: fixed
bottom: 50px
right: 50px
&__button
width: 50px
height: 50px
background-color: $cherry
display: flex