File: D:/HostingSpaces/SBogers10/kemi.komma.pro/resources/assets/sass/site/partials/_language.scss
.c-language {
position: relative;
margin-right: 120px;
max-width: 62px;
@include respond-to-width(768) {
top: -6px;
}
@include respond-to-width(450) {
display: none;
}
}
.c-language__current {
position: relative;
z-index: 2;
display: block;
width: 100%;
padding: 17px 20px;
font-size: 0.9rem;
font-weight: bold;
letter-spacing: 1px;
line-height: 0.9rem;
color: white;
text-align: left;
border: 1px solid transparent;
border-radius: 4px;
background-color: transparent;
appearance: none;
transition: background-color 0.15s, box-shadow 0.15s;
&:focus, .c-language:hover & {
outline: none;
background-color: $kemiBlue-100;
}
.c-language:hover &{
box-shadow: 0 0 12px 1px rgba(black, 0.15);
}
}
.c-language__dropdown
{
position: absolute;
left: 0;
top: calc(100% - 5px);
border-radius: 0 0 4px 4px;
list-style: none;
width: 100%;
padding: 0;
margin: 0;
box-shadow: 0 0 12px 1px rgba(black, 0.15);
opacity: 0;
pointer-events: none;
transform: translate3d(0, -10px, 0);
transition: opacity 0.3s, transform 0.3s;
.c-language:hover &{
opacity: 1;
pointer-events: all;
transform: translate3d(0,0,0);
}
}
.c-language__item{
background-color: $kemiBlue-200;
&:nth-child(even){
background-color: darken($kemiBlue-200, 3%);
}
&:hover{
background-color: mix($kemiBlue-200, white, 80%);
}
&:first-of-type{
padding-top: 4px;
}
&:last-of-type {
border-radius: 0 0 4px 4px;
}
}
.c-language__link{
display: block;
padding: 14px;
border-radius: 0 0 4px 4px;
background-color: transparent;
//@include font-size(small);
font-size: 0.9rem;
line-height: 1;
text-decoration: none;
text-align: center;
font-weight: bold;
color: rgba(white, 0.7);
transition: background-color 0.3s;
&:hover {
color: white;
}
//.c-language--iso & {
// border-radius: 0 0 4px 4px;
// //@include font(x2-small, 15, 700);
//}
}
.c-mobile-language {
margin-top: 60px;
}
.c-mobile-language__title {
font-size: 0.9rem;
font-weight: bold;
letter-spacing: 1px;
line-height: 0.9rem;
color: white;
margin-bottom: 10px;
}
.c-mobile-language__item {
.c-language__link {
text-align: left;
border: 2px solid $kemiBlue-100;
border-radius: 0;
color: white;
}
&.is-active {
.c-language__link {
background-color: $kemiBlue-100;
border-color: transparent;
}
}
}
//
//.c-language__arrow {
// position: absolute;
// z-index: 3;
// right: 12px;
// top: 2px;
// color: palette(light);
// pointer-events: none;
//
// .c-language--iso & {
// top: 5px;
// }
//
// .is-header-light .c-header & {
// color: palette(secondary);
// }
//
// .is-header-light .c-header .c-language:hover & {
// color: palette(light);
// }
//}