nishiki/hugo-theme-relearn
1
0
Fork 0
mirror of https://github.com/McShelby/hugo-theme-relearn.git synced 2024-12-02 12:13:05 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 2

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> <ul>
{{- if $showlangswitch }} {{- if $showlangswitch }}
<li> <li>
<a class="padding"> <a class="padding select-container">
<i class="fas fa-language fa-fw"></i> <i class="fas fa-language fa-fw"></i>
<div class="select-style"> <div class="select-style">
<select id="select-language" onchange="location = baseUri + this.value;"> <select id="select-language" onchange="location = baseUri + this.value;">
@ -83,14 +83,6 @@
{{- end }} {{- end }}
{{- end }} {{- end }}
</select> </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> </div>
</a> </a>
</li> </li>

32
static/css/theme.css
View file

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