100 lines
1.7 KiB
SCSS
100 lines
1.7 KiB
SCSS
|
|
/**=====================
|
|
76. Language CSS start
|
|
==========================**/
|
|
.current_lang {
|
|
cursor: pointer;
|
|
text-transform: uppercase;
|
|
overflow: hidden;
|
|
}
|
|
.lang {
|
|
&.selected {
|
|
display: none;
|
|
}
|
|
span.lang-txt {
|
|
display: inline-flex;
|
|
margin-left: 8px;
|
|
font-weight: 500;
|
|
}
|
|
|
|
span {
|
|
span {
|
|
color: #999;
|
|
font-weight: 400;
|
|
margin-left: 5px;
|
|
}
|
|
}
|
|
}
|
|
|
|
/*more lang*/
|
|
|
|
.more_lang {
|
|
transform: translateY(-20px);
|
|
opacity: 0;
|
|
cursor: pointer;
|
|
display: none;
|
|
transition: all 0.3s cubic-bezier(0.25, 1.15, 0.35, 1.15);
|
|
}
|
|
.translate_wrapper.active .more_lang {
|
|
display: block;
|
|
position: absolute;
|
|
background-color: $white;
|
|
top: 47px;
|
|
right: 0;
|
|
box-shadow: 0 0 20px rgba(89,102,122,0.1);
|
|
&:before{
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 7px solid transparent;
|
|
border-right: 7px solid transparent;
|
|
border-bottom: 7px solid #fff;
|
|
content: "";
|
|
top: -7px;
|
|
position: absolute;
|
|
right: 20px;
|
|
z-index: 2;
|
|
}
|
|
&:after{
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 7px solid transparent;
|
|
border-right: 7px solid transparent;
|
|
border-bottom: 7px solid #bdc2c5;
|
|
content: "";
|
|
top: -7px;
|
|
position: absolute;
|
|
right: 20px;
|
|
z-index: 1;
|
|
}
|
|
}
|
|
|
|
.more_lang {
|
|
&.active {
|
|
opacity: 1;
|
|
transform: translateY(-0px);
|
|
}
|
|
.lang{
|
|
padding: 10px 15px;
|
|
display: flex;
|
|
&:hover {
|
|
background: var(--theme-deafult);
|
|
color: $white;
|
|
span {
|
|
color: $white;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.translate_wrapper {
|
|
&.active {
|
|
.more_lang{
|
|
.lang {
|
|
border-bottom: 1px solid #eaeaea;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
/**=====================
|
|
76. Language CSS end
|
|
==========================**/ |