position: absolute
. input
удали, он ненужен, без js ты ему галочку не снимешь. Стили связанные с input
тоже удали. Свой .dd-button
сделай не div
, а button
. Далее отталкивайся от самой кнопки, у нее может быть состояние :focus
, вот это то что тебе нужно. Если фокус на кнопке, то показывай список, если нет фокуса, то не показывай. Фокус с кнопки снимается при клике на любой посторонний элемент.<button class="dd-button">Dropdown</button>
.dd-button:not(:focus) + .dd-menu {
display: none;
}
.dd-button:focus + .dd-menu {
display: block;
}
<div class="a"></div>
<div class="b"></div>
.a:hovet ~ .b {
display:none;
}
.a:hovet + .b {
display:none;
}
<input type="radio" name="radio-selector" class="radio-1" checked>
<input type="radio" name="radio-selector" class="radio-2">
<svg>
<polygon class="polygon-1"></polygon>
<polygon class="polygon-2"></polygon>
</svg>
svg polygon {
display: none;
}
.radio-1:checked ~ svg .polygon-1 {
display: inline;
}
.radio-2:checked ~ svg .polygon-2 {
display: inline;
}
.block-wrapper {
display: flex;
align-items: center;
justify-content: center;
}
d-flex
, align-items-center
, justify-content-center
, приписки sm
, md
, lg
, xl
, тоже есть. link.setAttribute("download", "filename.mp3");
document.body.appendChild(link);
link.click();
document.body.removeChild(link);
transform: scale
от 0 до 999999, где 1 это 100% размер.body {
transform-origin: 0 0;
transform: scale(1.5);
}
css
файлов.gulpfile.js
ты найдешь, в нескольких местах, строчку 'app/'+syntax+'/**/*.'+syntax+''
, ее надо заменить на массив, если я не ошибаюсь, должно сработать, ведь это же ожидаемый функционал, а если нет то все плохо.[
"app/**/*.css",
"app/**/*.scss",
"app/**/*.sass",
]
.scss
и пиши в них обычный css
код, ну и существующие *.css
файлы, надо переименовать в *.scss
и подключить их в главном. data-src
, так как возможны конфликты с другими библиотеками. Это довольно часто используемый атрибут. Заменить например на data-include-html="..."
<include>
изменить на что-то более ясное, например <includeHTML>
или <include-html>
. Так как возможны конфликты.defer
у тега script
.npm
пакет.