Procházet zdrojové kódy

static footer menu is now in-line (not oblique)

Bachir Soussi Chiadmi před 7 roky
rodič
revize
174df0818a

+ 47 - 37
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 {
+  footer #block-footer {
+    display: inline-block;
+    margin-bottom: 1em; }
+    footer #block-footer ul {
+      margin: 0;
+      padding: 0; }
+      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-menu ul {
+    footer nav#block-productions.block-menu ul {
       margin: 0;
       padding: 0; }
-      footer nav.block-menu ul li {
+      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;

+ 65 - 24
sites/all/themes/custom/edlptheme/assets/styles/app.scss

@@ -954,18 +954,21 @@ footer{
     }
   }
 
-  nav.block-menu{
+  #block-footer{
     display: inline-block;
+    margin-bottom: 1em;
     ul{
       margin:0;
       padding:0;
       li{
         pointer-events: all;
-        @include oblique-list;
+        // @include oblique-list;
+        display: inline-block;
         &:first-of-type{
           margin-left: 1em;
         }
         a{
+          font-size: 0.756em;
           &:before{
             content: "";
             display:inline-block;
@@ -986,40 +989,73 @@ footer{
     }
   }
 
-  .block-language{
+  // remove #block-productions to enable again oblique style for all block-menu
+  nav#block-productions.block-menu{
     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;
-          }
+        pointer-events: all;
+        @include oblique-list;
+        &:first-of-type{
+          margin-left: 1em;
         }
         a{
-          color: inherit;
-          text-decoration: none;
-          font-size: 0.756em;
-        }
-        &.is-active{
-          a{color: red;}
+          &: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;
+          }
         }
       }
     }
   }
 
+  // .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;
     pointer-events: none;
@@ -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;
   }
 
 }