css language switcher for more than 2 languages

This commit is contained in:
Bachir Soussi Chiadmi
2016-11-07 16:32:29 +01:00
parent ac87a57196
commit 0f286a2d78
2 changed files with 167 additions and 130 deletions

View File

@@ -2941,6 +2941,38 @@ body.node-type-publication #footer {
@media only screen and (min-width: 90.063em) and (max-width: 120em) {
#header #header-blocks .block:not(:last-child) {
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 {
font-size: 12px; }
#header #header-blocks #block-materio-user-front-link span.text {
@@ -3108,40 +3140,10 @@ body.node-type-publication #footer {
vertical-align: top;
zoom: 1;
*display: inline;
vertical-align: middle;
padding: 0; }
padding: 0;
vertical-align: middle; }
#header #header-blocks #headerblock-right .block:first-child {
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 {
display: none; }
#header #header-blocks #block-menu-menu-top-menu h2 i {
@@ -3199,34 +3201,55 @@ body.node-type-publication #footer {
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 {
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 {
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; }
/*
__ _ ___ __ _