css language switcher for more than 2 languages
This commit is contained in:
Bachir Soussi Chiadmi
parent
ac87a57196
commit
0f286a2d78
@ -2941,6 +2941,38 @@ body.node-type-publication #footer {
|
|||||||
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
|
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
|
||||||
#header #header-blocks .block:not(:last-child) {
|
#header #header-blocks .block:not(:last-child) {
|
||||||
padding-right: 0.3em; } }
|
padding-right: 0.3em; } }
|
||||||
|
@media only screen and (max-width: 40em) {
|
||||||
|
#header #header-blocks #headerblock-left {
|
||||||
|
display: none; } }
|
||||||
|
#header #header-blocks #block-social-media-links-social-media-links ul.social-media-links {
|
||||||
|
margin: 0;
|
||||||
|
line-height: 0; }
|
||||||
|
#header #header-blocks #block-social-media-links-social-media-links li {
|
||||||
|
line-height: 1; }
|
||||||
|
#header #header-blocks #block-social-media-links-social-media-links li.facebook a {
|
||||||
|
background-image: url("../img/socialicons/svg/Facebook-color.svg"); }
|
||||||
|
#header #header-blocks #block-social-media-links-social-media-links li.twitter a {
|
||||||
|
background-image: url("../img/socialicons/svg/Twitter-color.svg"); }
|
||||||
|
#header #header-blocks #block-social-media-links-social-media-links li.linkedin a {
|
||||||
|
background-image: url("../img/socialicons/svg/LinkedIn-color.svg"); }
|
||||||
|
#header #header-blocks #block-social-media-links-social-media-links li.pinterest a {
|
||||||
|
background-image: url("../img/socialicons/svg/Pinterest-color.svg"); }
|
||||||
|
#header #header-blocks #block-social-media-links-social-media-links li.vimeo a {
|
||||||
|
background-image: url("../img/socialicons/svg/Vimeo-color.svg"); }
|
||||||
|
#header #header-blocks #block-social-media-links-social-media-links li.rss a {
|
||||||
|
background-image: url("../img/socialicons/svg/RSS-color.svg"); }
|
||||||
|
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
|
||||||
|
#header #header-blocks #block-social-media-links-social-media-links li.linkedin, #header #header-blocks #block-social-media-links-social-media-links li.pinterest, #header #header-blocks #block-social-media-links-social-media-links li.vimeo {
|
||||||
|
display: none; } }
|
||||||
|
#header #header-blocks #block-social-media-links-social-media-links a {
|
||||||
|
display: block;
|
||||||
|
width: 16px;
|
||||||
|
height: 16px;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain; }
|
||||||
|
#header #header-blocks #block-social-media-links-social-media-links img {
|
||||||
|
display: none; }
|
||||||
#header #header-blocks #block-materio-user-front-link a {
|
#header #header-blocks #block-materio-user-front-link a {
|
||||||
font-size: 12px; }
|
font-size: 12px; }
|
||||||
#header #header-blocks #block-materio-user-front-link span.text {
|
#header #header-blocks #block-materio-user-front-link span.text {
|
||||||
@ -3108,40 +3140,10 @@ body.node-type-publication #footer {
|
|||||||
vertical-align: top;
|
vertical-align: top;
|
||||||
zoom: 1;
|
zoom: 1;
|
||||||
*display: inline;
|
*display: inline;
|
||||||
vertical-align: middle;
|
padding: 0;
|
||||||
padding: 0; }
|
vertical-align: middle; }
|
||||||
#header #header-blocks #headerblock-right .block:first-child {
|
#header #header-blocks #headerblock-right .block:first-child {
|
||||||
padding: 0; }
|
padding: 0; }
|
||||||
@media only screen and (max-width: 40em) {
|
|
||||||
#header #header-blocks #headerblock-left {
|
|
||||||
display: none; } }
|
|
||||||
@media only screen and (min-width: 40.063em) and (max-width: 64em) {
|
|
||||||
#header #header-blocks #headerblock-left {
|
|
||||||
display: none; } }
|
|
||||||
#header #header-blocks #block-locale-language ul, #header #header-blocks #block-locale-language li {
|
|
||||||
margin: 0;
|
|
||||||
padding: 0;
|
|
||||||
list-style-type: none;
|
|
||||||
font-size: 12px;
|
|
||||||
line-height: 1; }
|
|
||||||
#header #header-blocks #block-locale-language ul.active, #header #header-blocks #block-locale-language li.active {
|
|
||||||
display: none; }
|
|
||||||
.ie8 #header #header-blocks #block-locale-language {
|
|
||||||
padding-top: 5px; }
|
|
||||||
#header #header-blocks #block-locale-language ul {
|
|
||||||
padding-top: 0.155em; }
|
|
||||||
#header #header-blocks #block-locale-language li {
|
|
||||||
font-size: 0.9em;
|
|
||||||
padding: 0.33em 0.35em 0.3em;
|
|
||||||
border-radius: 3px;
|
|
||||||
background-clip: padding-box;
|
|
||||||
background-color: #808080;
|
|
||||||
transition: background-color 0.3s ease-out; }
|
|
||||||
#header #header-blocks #block-locale-language li, #header #header-blocks #block-locale-language li > * {
|
|
||||||
color: #fff;
|
|
||||||
text-transform: uppercase; }
|
|
||||||
#header #header-blocks #block-locale-language li:hover {
|
|
||||||
background-color: #1A1A1A; }
|
|
||||||
.ie8 #header #header-blocks #block-menu-menu-top-menu h2 {
|
.ie8 #header #header-blocks #block-menu-menu-top-menu h2 {
|
||||||
display: none; }
|
display: none; }
|
||||||
#header #header-blocks #block-menu-menu-top-menu h2 i {
|
#header #header-blocks #block-menu-menu-top-menu h2 i {
|
||||||
@ -3199,34 +3201,55 @@ body.node-type-publication #footer {
|
|||||||
display: block; }
|
display: block; }
|
||||||
html.no-touch #header #header-blocks #block-menu-menu-top-menu:hover .menu-wrapper ul.menu li, #header #header-blocks #block-menu-menu-top-menu.hovered .menu-wrapper ul.menu li {
|
html.no-touch #header #header-blocks #block-menu-menu-top-menu:hover .menu-wrapper ul.menu li, #header #header-blocks #block-menu-menu-top-menu.hovered .menu-wrapper ul.menu li {
|
||||||
height: 25px; } }
|
height: 25px; } }
|
||||||
|
#header #header-blocks #block-locale-language {
|
||||||
|
position: relative; }
|
||||||
|
#header #header-blocks #block-locale-language h2 {
|
||||||
|
font-size: 9px;
|
||||||
|
line-height: 1.6;
|
||||||
|
display: inline-block;
|
||||||
|
padding: 0.20em 0.45em 0.10em;
|
||||||
|
margin: 0;
|
||||||
|
border-radius: 3px;
|
||||||
|
background-clip: padding-box;
|
||||||
|
color: #fff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background-color: #4d4b4b; }
|
||||||
|
#header #header-blocks #block-locale-language ul, #header #header-blocks #block-locale-language li {
|
||||||
|
margin: 0;
|
||||||
|
padding: 0;
|
||||||
|
list-style-type: none;
|
||||||
|
font-size: 12px;
|
||||||
|
line-height: 0.9; }
|
||||||
|
#header #header-blocks #block-locale-language ul.active, #header #header-blocks #block-locale-language li.active {
|
||||||
|
display: none; }
|
||||||
|
.ie8 #header #header-blocks #block-locale-language {
|
||||||
|
padding-top: 5px; }
|
||||||
|
#header #header-blocks #block-locale-language ul {
|
||||||
|
padding-top: 2.1em;
|
||||||
|
position: absolute;
|
||||||
|
top: 0;
|
||||||
|
left: 0;
|
||||||
|
text-align: left; }
|
||||||
|
#header #header-blocks #block-locale-language li {
|
||||||
|
height: 0;
|
||||||
|
overflow: hidden;
|
||||||
|
transition: height 0.3s ease-in-out; }
|
||||||
|
#header #header-blocks #block-locale-language li a {
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.9em;
|
||||||
|
padding: 0.33em 0.34em 0.3em;
|
||||||
|
border-radius: 3px;
|
||||||
|
background-clip: padding-box;
|
||||||
|
color: #fff;
|
||||||
|
text-transform: uppercase;
|
||||||
|
background-color: #808080;
|
||||||
|
transition: background-color 0.3s ease-out; }
|
||||||
|
#header #header-blocks #block-locale-language li a:hover {
|
||||||
|
background-color: #1A1A1A; }
|
||||||
|
#header #header-blocks #block-locale-language:hover li {
|
||||||
|
height: 1.5em; }
|
||||||
#header #header-blocks #block-materio-user-old-database-link a {
|
#header #header-blocks #block-materio-user-old-database-link a {
|
||||||
font-size: 12px; }
|
font-size: 12px; }
|
||||||
#header #header-blocks #block-social-media-links-social-media-links ul.social-media-links {
|
|
||||||
margin: 0;
|
|
||||||
line-height: 0; }
|
|
||||||
#header #header-blocks #block-social-media-links-social-media-links li {
|
|
||||||
line-height: 1; }
|
|
||||||
#header #header-blocks #block-social-media-links-social-media-links li.facebook a {
|
|
||||||
background-image: url("../img/socialicons/svg/Facebook-color.svg"); }
|
|
||||||
#header #header-blocks #block-social-media-links-social-media-links li.twitter a {
|
|
||||||
background-image: url("../img/socialicons/svg/Twitter-color.svg"); }
|
|
||||||
#header #header-blocks #block-social-media-links-social-media-links li.linkedin a {
|
|
||||||
background-image: url("../img/socialicons/svg/LinkedIn-color.svg"); }
|
|
||||||
#header #header-blocks #block-social-media-links-social-media-links li.pinterest a {
|
|
||||||
background-image: url("../img/socialicons/svg/Pinterest-color.svg"); }
|
|
||||||
#header #header-blocks #block-social-media-links-social-media-links li.vimeo a {
|
|
||||||
background-image: url("../img/socialicons/svg/Vimeo-color.svg"); }
|
|
||||||
#header #header-blocks #block-social-media-links-social-media-links li.rss a {
|
|
||||||
background-image: url("../img/socialicons/svg/RSS-color.svg"); }
|
|
||||||
#header #header-blocks #block-social-media-links-social-media-links a {
|
|
||||||
display: block;
|
|
||||||
width: 16px;
|
|
||||||
height: 16px;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain; }
|
|
||||||
#header #header-blocks #block-social-media-links-social-media-links img {
|
|
||||||
display: none; }
|
|
||||||
|
|
||||||
/*
|
/*
|
||||||
__ _ ___ __ _
|
__ _ ___ __ _
|
||||||
|
|||||||
@ -257,6 +257,43 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
|
|||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
|
#headerblock-left{
|
||||||
|
@media #{$small-only}{display:none;}
|
||||||
|
// @media #{$medium-only}{display:none;}
|
||||||
|
}
|
||||||
|
|
||||||
|
#block-social-media-links-social-media-links{
|
||||||
|
|
||||||
|
ul.social-media-links{margin:0;line-height: 0;}
|
||||||
|
|
||||||
|
li{
|
||||||
|
line-height: 1;
|
||||||
|
&.facebook a{background-image: url("../img/socialicons/svg/Facebook-color.svg");}
|
||||||
|
&.twitter a{background-image: url("../img/socialicons/svg/Twitter-color.svg");}
|
||||||
|
&.linkedin a{background-image: url("../img/socialicons/svg/LinkedIn-color.svg");}
|
||||||
|
&.pinterest a{background-image: url("../img/socialicons/svg/Pinterest-color.svg");}
|
||||||
|
&.vimeo a{background-image: url("../img/socialicons/svg/Vimeo-color.svg");}
|
||||||
|
&.rss a{background-image: url("../img/socialicons/svg/RSS-color.svg");}
|
||||||
|
|
||||||
|
// @media #{$small-only}{
|
||||||
|
// &.linkedin,&.pinterest,&.vimeo{display:none;}
|
||||||
|
// }
|
||||||
|
@media #{$medium-only}{
|
||||||
|
&.linkedin,&.pinterest,&.vimeo{display:none;}
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
|
|
||||||
|
a{
|
||||||
|
display:block; width:16px; height:16px;
|
||||||
|
background-position: center;
|
||||||
|
background-repeat: no-repeat;
|
||||||
|
background-size: contain;
|
||||||
|
}
|
||||||
|
img{display:none;}
|
||||||
|
}
|
||||||
|
|
||||||
#block-materio-user-front-link{
|
#block-materio-user-front-link{
|
||||||
a{
|
a{
|
||||||
@include fs12;
|
@include fs12;
|
||||||
@ -406,61 +443,11 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
|
|||||||
|
|
||||||
#headerblock-right{
|
#headerblock-right{
|
||||||
.block{
|
.block{
|
||||||
@include inlineblock; vertical-align: middle; padding:0;
|
@include inlineblock; padding:0; vertical-align: middle;
|
||||||
&:first-child{padding: 0;}
|
&:first-child{padding: 0;}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
#headerblock-left{
|
|
||||||
@media #{$small-only}{display:none;}
|
|
||||||
@media #{$medium-only}{display:none;}
|
|
||||||
}
|
|
||||||
|
|
||||||
#block-locale-language{
|
|
||||||
// margin-left:1em;
|
|
||||||
// border-left: 1px solid #707070;
|
|
||||||
ul,li{
|
|
||||||
margin:0;padding:0;list-style-type: none;
|
|
||||||
@include fs12;
|
|
||||||
line-height: 1;
|
|
||||||
&.active{display:none;}
|
|
||||||
}
|
|
||||||
.ie8 &{padding-top:5px;}
|
|
||||||
ul{padding-top:0.155em;}
|
|
||||||
li{
|
|
||||||
font-size: 0.9em;
|
|
||||||
padding:0.33em 0.35em 0.3em;
|
|
||||||
@include rounded(3px);
|
|
||||||
&, >*{color:#fff; text-transform: uppercase;}
|
|
||||||
background-color: #808080;
|
|
||||||
@include transition-simply-prefix(background-color 0.3s ease-out);
|
|
||||||
&:hover{background-color: #1A1A1A;}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
// #block-menu-menu-about{
|
|
||||||
// position:relative;
|
|
||||||
// ul.menu{
|
|
||||||
// position:absolute; padding: 0 5px 5px 5px; margin: 0; width:100px; display:none; right:0; text-align: right;
|
|
||||||
// background-color: #e6e6e6; @include rounded(5px);
|
|
||||||
// li{
|
|
||||||
// height:0;
|
|
||||||
// overflow:hidden; list-style-type: none;
|
|
||||||
// .transition-simply-prefix(height 0.3s ease-out");
|
|
||||||
// a{
|
|
||||||
// display:block; width:100%; padding:2px 5px; .12;
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
// &:hover{
|
|
||||||
// ul.menu{
|
|
||||||
// display:block;
|
|
||||||
// li{height:25px;}
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
// }
|
|
||||||
|
|
||||||
#block-menu-menu-top-menu{
|
#block-menu-menu-top-menu{
|
||||||
h2{
|
h2{
|
||||||
.ie8 &{display:none;}
|
.ie8 &{display:none;}
|
||||||
@ -511,33 +498,60 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
|
|||||||
} //change this
|
} //change this
|
||||||
}
|
}
|
||||||
|
|
||||||
|
#block-locale-language{
|
||||||
|
position: relative;
|
||||||
|
h2{
|
||||||
|
@include fs9;
|
||||||
|
line-height:1.6;
|
||||||
|
display: inline-block;
|
||||||
|
padding:0.20em 0.45em 0.10em; margin:0;
|
||||||
|
@include rounded(3px);
|
||||||
|
color:#fff; text-transform: uppercase;
|
||||||
|
background-color: #4d4b4b;
|
||||||
|
|
||||||
|
// @media #{$small-only}{ span.menu-title{display:none;}}
|
||||||
|
// @media #{$medium-only}{ span.menu-title{display:none;}}
|
||||||
|
}
|
||||||
|
|
||||||
|
ul,li{
|
||||||
|
margin:0;padding:0;list-style-type: none;
|
||||||
|
@include fs12;
|
||||||
|
line-height: 0.9;
|
||||||
|
&.active{display:none;}
|
||||||
|
}
|
||||||
|
.ie8 &{padding-top:5px;}
|
||||||
|
ul{
|
||||||
|
padding-top:2.1em;
|
||||||
|
position:absolute;
|
||||||
|
top:0; left:0;
|
||||||
|
text-align: left;
|
||||||
|
}
|
||||||
|
li{
|
||||||
|
a{
|
||||||
|
display: inline-block;
|
||||||
|
font-size: 0.9em;
|
||||||
|
padding:0.33em 0.34em 0.3em;
|
||||||
|
// margin:0 0 0 0;
|
||||||
|
@include rounded(3px);
|
||||||
|
color:#fff; text-transform: uppercase;
|
||||||
|
background-color: #808080;
|
||||||
|
@include transition-simply-prefix(background-color 0.3s ease-out);
|
||||||
|
&:hover{background-color: #1A1A1A;}
|
||||||
|
}
|
||||||
|
height:0;
|
||||||
|
overflow: hidden;
|
||||||
|
@include transition-simply-prefix(height 0.3s ease-in-out);
|
||||||
|
}
|
||||||
|
|
||||||
|
&:hover{li{height:1.5em;}}
|
||||||
|
}
|
||||||
|
|
||||||
#block-materio-user-old-database-link{
|
#block-materio-user-old-database-link{
|
||||||
a{
|
a{
|
||||||
@include fs12;
|
@include fs12;
|
||||||
;}
|
;}
|
||||||
}
|
}
|
||||||
|
|
||||||
#block-social-media-links-social-media-links{
|
|
||||||
|
|
||||||
ul.social-media-links{margin:0;line-height: 0;}
|
|
||||||
|
|
||||||
li{
|
|
||||||
line-height: 1;
|
|
||||||
&.facebook a{background-image: url("../img/socialicons/svg/Facebook-color.svg");}
|
|
||||||
&.twitter a{background-image: url("../img/socialicons/svg/Twitter-color.svg");}
|
|
||||||
&.linkedin a{background-image: url("../img/socialicons/svg/LinkedIn-color.svg");}
|
|
||||||
&.pinterest a{background-image: url("../img/socialicons/svg/Pinterest-color.svg");}
|
|
||||||
&.vimeo a{background-image: url("../img/socialicons/svg/Vimeo-color.svg");}
|
|
||||||
&.rss a{background-image: url("../img/socialicons/svg/RSS-color.svg");}
|
|
||||||
}
|
|
||||||
a{
|
|
||||||
display:block; width:16px; height:16px;
|
|
||||||
background-position: center;
|
|
||||||
background-repeat: no-repeat;
|
|
||||||
background-size: contain;
|
|
||||||
}
|
|
||||||
img{display:none;}
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
/*
|
/*
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user