mirror of
https://github.com/McShelby/hugo-theme-relearn.git
synced 2024-11-27 01:33:04 +00:00
menu: rework select box UX #177
This commit is contained in:
parent
4fda7916ff
commit
a32646b5cb
2 changed files with 12 additions and 30 deletions
|
@ -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>
|
||||
|
|
|
@ -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 {
|
||||
|
|
Loading…
Reference in a new issue