nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-11-27 01:33:04 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions

menu: rework select box UX #177

Browse source
This commit is contained in:
Sören Weber 2022-02-12 23:49:33 +01:00
parent 4fda7916ff
commit a32646b5cb
No known key found for this signature in database
GPG key ID: 07D17FF580AE7589
2 changed files with 12 additions and 30 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

10
layouts/partials/menu.html
View file

@ -64,7 +64,7 @@
<ul>
{{- if $showlangswitch }}
<li>
<a class="padding">
<a class="padding select-container">
<i class="fas fa-language fa-fw"></i>
<div class="select-style">
<select id="select-language" onchange="location = baseUri + this.value;">
@ -83,14 +83,6 @@
{{- end }}
{{- end }}
</select>
<svg version="1.1" id="Capa_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
width="255px" height="255px" viewBox="0 0 255 255" style="enable-background:new 0 0 255 255;" xml:space="preserve">
<g>
<g id="arrow-drop-down">
<polygon points="0,63.75 127.5,191.25 255,63.75" />
</g>
</g>
</svg>
</div>
</a>
</li>

32
static/css/theme.css
View file

@ -1388,37 +1388,27 @@ h6 a {
margin-top: 1rem;
}
.select-container {
height: 1.5rem;
}
.select-style {
border: 0;
border-radius: 0px;
display: inline-flex;
height: 1.5rem;
margin-left: 1.5rem;
position: relative;
overflow: hidden;
width: 150px;
}
.select-style svg {
fill: #ccc;
height: 14px;
margin: auto;
pointer-events: none;
width: 14px;
}
.select-style svg:hover {
fill: #e6e6e6;
top: -1.5rem;
}
.select-style select {
-webkit-appearance: none;
border: none;
box-shadow: none;
background: transparent;
background-color: transparent;
background-image: none;
margin: auto;
margin-left: 0px;
margin-right: -20px;
padding: 0;
width: 130%;
width: 100%;
}
.select-style select:focus {
@ -1426,7 +1416,7 @@ h6 a {
}
.select-style :hover {
cursor: pointer;
cursor: pointer;
}
@media only all and (max-width: 47.938em) {