From 0f286a2d78028a189d230d0f06d4a9f9cb427dbb Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Mon, 7 Nov 2016 16:32:29 +0100 Subject: [PATCH] css language switcher for more than 2 languages --- .../gui/materiobasetheme/css/styles.css | 139 ++++++++------- .../gui/materiobasetheme/scss/styles.scss | 158 ++++++++++-------- 2 files changed, 167 insertions(+), 130 deletions(-) diff --git a/sites/all/themes/gui/materiobasetheme/css/styles.css b/sites/all/themes/gui/materiobasetheme/css/styles.css index 8821bf56..9747fad8 100644 --- a/sites/all/themes/gui/materiobasetheme/css/styles.css +++ b/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; } /* __ _ ___ __ _ diff --git a/sites/all/themes/gui/materiobasetheme/scss/styles.scss b/sites/all/themes/gui/materiobasetheme/scss/styles.scss index 8479f023..83fd6f22 100644 --- a/sites/all/themes/gui/materiobasetheme/scss/styles.scss +++ b/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;} - } } } /*