css language switcher for more than 2 languages

sites/all/themes/gui/materiobasetheme/css/styles.css

@@ -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; }
 
 /*
          __  _ ___ __  _

sites/all/themes/gui/materiobasetheme/scss/styles.scss

@@ -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{
       a{
         @include fs12;
@@ -406,61 +443,11 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
 
     #headerblock-right{
       .block{
-        @include inlineblock; vertical-align: middle; padding:0;
+        @include inlineblock; padding:0; vertical-align: middle;
         &: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{
       h2{
         .ie8 &{display:none;}
@@ -511,33 +498,60 @@ $headerouterheight:$headerheight+$headerpaddingtop+$headerpaddingbottom;
       } //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{
       a{
         @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;}
-    }
   }
 }
 /*