From 174df0818a1493e9ab8fb6403fb51de80120412c Mon Sep 17 00:00:00 2001 From: Bachir Soussi Chiadmi Date: Tue, 20 Mar 2018 20:29:45 +0100 Subject: [PATCH] static footer menu is now in-line (not oblique) --- .../edlptheme/assets/dist/styles/app.min.css | 86 ++++++++------ .../custom/edlptheme/assets/styles/app.scss | 109 ++++++++++++------ 2 files changed, 123 insertions(+), 72 deletions(-) diff --git a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css index 28a571523..cff0bcb9f 100644 --- a/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css +++ b/sites/all/themes/custom/edlptheme/assets/dist/styles/app.min.css @@ -1968,19 +1968,52 @@ footer { footer > .wrapper .region-footer-right { min-width: 12%; text-align: right; } - footer nav.block-menu { - display: inline-block; } - footer nav.block-menu ul { + footer #block-footer { + display: inline-block; + margin-bottom: 1em; } + footer #block-footer ul { margin: 0; padding: 0; } - footer nav.block-menu ul li { + footer #block-footer ul li { + pointer-events: all; + display: inline-block; } + footer #block-footer ul li:first-of-type { + margin-left: 1em; } + footer #block-footer ul li a { + font-size: 0.756em; } + footer #block-footer ul li a:before { + content: ""; + display: inline-block; + width: 7px; + height: 7px; + border: 1px solid black; + margin-right: 0.5em; } + footer #block-footer ul li a:hover:before, footer #block-footer ul li a.is-active:before { + background-color: black; } + footer #block-footer ul li a.ajax-loading:before { + -webkit-animation: rotation 2s infinite linear; + animation: rotation 2s infinite linear; } + +@keyframes rotation { + from { + -webkit-transform: rotate(0deg); + transform: rotate(0deg); } + to { + -webkit-transform: rotate(359deg); + transform: rotate(359deg); } } + footer nav#block-productions.block-menu { + display: inline-block; } + footer nav#block-productions.block-menu ul { + margin: 0; + padding: 0; } + footer nav#block-productions.block-menu ul li { pointer-events: all; display: inline-block; position: relative; list-style: none; margin: 0 1.5em 0 0; padding: 0; } - footer nav.block-menu ul li a { + footer nav#block-productions.block-menu ul li a { position: absolute; bottom: 0; -webkit-transform-origin: left bottom; @@ -1992,18 +2025,18 @@ footer { text-transform: uppercase; font-size: 0.756em; white-space: nowrap; } - footer nav.block-menu ul li:first-of-type { + footer nav#block-productions.block-menu ul li:first-of-type { margin-left: 1em; } - footer nav.block-menu ul li a:before { + footer nav#block-productions.block-menu ul li a:before { content: ""; display: inline-block; width: 7px; height: 7px; border: 1px solid black; margin-right: 0.5em; } - footer nav.block-menu ul li a:hover:before, footer nav.block-menu ul li a.is-active:before { + footer nav#block-productions.block-menu ul li a:hover:before, footer nav#block-productions.block-menu ul li a.is-active:before { background-color: black; } - footer nav.block-menu ul li a.ajax-loading:before { + footer nav#block-productions.block-menu ul li a.ajax-loading:before { -webkit-animation: rotation 2s infinite linear; animation: rotation 2s infinite linear; } @@ -2014,34 +2047,6 @@ footer { to { -webkit-transform: rotate(359deg); transform: rotate(359deg); } } - footer .block-language { - display: inline-block; - position: relative; } - footer .block-language ul { - position: absolute; - bottom: 0; - margin: 0; - padding: 0; - -webkit-transform-origin: left bottom; - transform-origin: left bottom; - -webkit-transform: rotateZ(-45deg); - transform: rotateZ(-45deg); - white-space: nowrap; - pointer-events: all; } - footer .block-language ul li { - margin: 0; - padding: 0; - list-style: none; - display: inline-block; } - footer .block-language ul li:last-of-type:before { - content: "/"; - margin: 0 0.2em; } - footer .block-language ul li a { - color: inherit; - text-decoration: none; - font-size: 0.756em; } - footer .block-language ul li.is-active a { - color: red; } footer #block-productions { position: relative; pointer-events: none; } @@ -2240,6 +2245,7 @@ footer { width: 350px; opacity: 1; } footer #block-studiolinkblock { + margin-bottom: 1em; pointer-events: all; margin-left: 0.5em; } footer #block-studiolinkblock a { @@ -2260,6 +2266,7 @@ footer { footer #block-studiolinkblock a.is-active { background-color: red; } footer .block.random-player { + margin-bottom: 1em; pointer-events: all; margin-left: 0.5em; } footer .block.random-player a { @@ -2280,6 +2287,7 @@ footer { footer .block.random-player a.is-active { background-color: red; } footer #block-userlogin { + margin-bottom: 1em; pointer-events: all; position: relative; width: 20px; @@ -2332,8 +2340,10 @@ footer { opacity: 1; pointer-events: auto; } footer #block-edlpsearchlinkblock { + margin-bottom: 1em; pointer-events: all; - margin-left: 0.5em; } + margin-left: 0.5em; + margin-left: 0.2em; } footer #block-edlpsearchlinkblock a { display: block; width: 20px; diff --git a/sites/all/themes/custom/edlptheme/assets/styles/app.scss b/sites/all/themes/custom/edlptheme/assets/styles/app.scss index ccdb61e56..d2cfc5457 100644 --- a/sites/all/themes/custom/edlptheme/assets/styles/app.scss +++ b/sites/all/themes/custom/edlptheme/assets/styles/app.scss @@ -954,7 +954,43 @@ footer{ } } - nav.block-menu{ + #block-footer{ + display: inline-block; + margin-bottom: 1em; + ul{ + margin:0; + padding:0; + li{ + pointer-events: all; + // @include oblique-list; + display: inline-block; + &:first-of-type{ + margin-left: 1em; + } + a{ + font-size: 0.756em; + &:before{ + content: ""; + display:inline-block; + $sq:7px; + width: $sq; height:$sq; + border: 1px solid black; + margin-right: 0.5em; + } + &:hover:before, + &.is-active:before{ + background-color: black; + } + &.ajax-loading:before{ + @include spining-loader-square; + } + } + } + } + } + + // remove #block-productions to enable again oblique style for all block-menu + nav#block-productions.block-menu{ display: inline-block; ul{ margin:0; @@ -986,39 +1022,39 @@ footer{ } } - .block-language{ - display: inline-block; - position: relative; - ul{ - position: absolute; - bottom:0; - margin:0; - padding:0; - transform-origin: left bottom; - transform: rotateZ(-45deg); - white-space: nowrap; - pointer-events: all; - li{ - margin:0; padding:0; - list-style: none; - display: inline-block; - &:last-of-type{ - &:before{ - content:"/"; - margin:0 0.2em; - } - } - a{ - color: inherit; - text-decoration: none; - font-size: 0.756em; - } - &.is-active{ - a{color: red;} - } - } - } - } + // .block-language{ + // display: inline-block; + // position: relative; + // ul{ + // position: absolute; + // bottom:0; + // margin:0; + // padding:0; + // transform-origin: left bottom; + // transform: rotateZ(-45deg); + // white-space: nowrap; + // pointer-events: all; + // li{ + // margin:0; padding:0; + // list-style: none; + // display: inline-block; + // &:last-of-type{ + // &:before{ + // content:"/"; + // margin:0 0.2em; + // } + // } + // a{ + // color: inherit; + // text-decoration: none; + // font-size: 0.756em; + // } + // &.is-active{ + // a{color: red;} + // } + // } + // } + // } #block-productions{ position: relative; @@ -1265,14 +1301,17 @@ footer{ } } #block-studiolinkblock{ + margin-bottom: 1em; @include iconlinkblock(url(../img/studio.svg)); } .block.random-player{ + margin-bottom: 1em; @include iconlinkblock(url(../img/random.svg)); } #block-userlogin{ + margin-bottom: 1em; pointer-events: all; // outline: 1px solid blue; $wh:$icons_w; @@ -1340,7 +1379,9 @@ footer{ #block-edlpsearchlinkblock{ + margin-bottom: 1em; @include iconlinkblock(url(../img/search.svg)); + margin-left: 0.2em; } }