app/assets/stylesheets/layout/locale_switcher.scss
.locale {
margin-bottom: calc(#{$line-height} / 4);
margin-top: calc(#{$line-height} / 4);
position: relative;
.locale-form {
@include has-fa-icon(angle-down, solid, after);
display: inline-block;
position: relative;
&::after {
color: $light-gray;
font-size: $small-font-size;
margin-right: 0;
pointer-events: none;
position: absolute;
right: 2px;
top: 50%;
transform: translateY(-50%);
}
label {
color: inherit;
font-size: $tiny-font-size;
font-weight: normal;
}
select {
background: #001d33;
border: 0;
border-radius: rem-calc(4);
color: color-pick-contrast(#001d33);
font-size: $small-font-size;
height: $line-height;
margin-bottom: 0;
outline: none;
padding-left: calc(#{$line-height} / 4);
padding-right: calc(#{$line-height} / 4 + 1em);
transition: none;
width: auto;
&:focus {
@include focus-outline;
border: 0;
transition: none;
}
option {
@extend %body-colors;
border: 0;
outline: none;
}
}
}
p {
@include element-invisible;
}
ul {
@include flex-with-gap(0.75em);
flex-wrap: wrap;
li::after {
content: none;
}
a {
margin-left: 0;
}
[aria-current] {
font-weight: bold;
}
}
}