Leahnaya/website
1
0
Fork 0
mirror of https://github.com/PretendoNetwork/website.git synced 2026-04-14 04:55:58 -05:00
Code Issues Actions Packages Projects Releases Wiki Activity

layout shift fix + centered chevron

Browse Source
This commit is contained in:
mrjvs 2021-08-22 21:58:07 +02:00
parent d0dd10519b
commit 2bf633e127
2 changed files with 19 additions and 7 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

16
public/assets/css/dropdown.css
View File

@ -36,22 +36,34 @@
}
.selected-locale::after {
content: url("/assets/icons/down-arrow.svg");
content: "";
width: 1.2rem;
height: 1.2rem;
background: url("/assets/icons/down-arrow.svg");
position: absolute;
right: 15px;
top: 50%;
transition: transform 150ms;
transform: translateY(-50%);
background-size: contain;
background-position: center;
}
.select-box .option .item {
color: #afb5dd;
}
.select-box .lang {
width: 1.3rem;
height: 1rem;
margin-right: .2rem;
display: inline-block;
}
.select-box .options-container.active {
max-height: 240px;
opacity: 1;
overflow-y: scroll;
overflow-y: auto;
}
.select-box .options-container.active + .selected-locale::after {

10
views/partials/header.handlebars
View File

@ -36,32 +36,32 @@
<div class="option">
<input type="radio" class="radio" id="en-US" name="category" />
<label for="en-US">
<div class="item">🇺🇸 English</div>
<div class="item"><span class="lang">🇺🇸</span>English</div>
</label>
</div>
<div class="option">
<input type="radio" class="radio" id="es-ES" name="category" />
<label for="es-ES">
<div class="item">🇪🇸 Español</div>
<div class="item"><span class="lang">🇪🇸</span>Español</div>
</label>
</div>
<div class="option">
<input type="radio" class="radio" id="it-IT" name="category" />
<label for="it-IT">
<div class="item">🇮🇹 Italiano</div>
<div class="item"><span class="lang">🇮🇹</span>Italiano</div>
</label>
</div>
<div class="option">
<input type="radio" class="radio" id="ru-RU" name="category" />
<label for="ru-RU">
<div class="item">🇷🇺 Pусский</div>
<div class="item"><span class="lang">🇷🇺</span>Pусский</div>
</label>
</div>
</div>
<div class="selected-locale">
<div class="item">English</div>
<div class="item"><span class="lang"></span></div>
</div>
</div>