edlp_d8/sites/all/themes/custom/edlptheme/assets/styles/app.scss

// @Author: Bachir Soussi Chiadmi <bach>
// @Date:   18-12-2017
// @Email:  bachir@figureslibres.io
// @Filename: app.scss
// @Last modified by:   bach
// @Last modified time: 20-12-2017
// @License: GPL-V3

@import 'base/reset';

@import 'base/vars';
@import 'base/grid';
@import 'base/colors';
@import 'base/buttons';


body, html{
  position: relative;
  width: 100%;
  height:100%;
  font-family: Georgia, serif;
  font-style: normal;
  margin:0;
  padding:0;
}


div.layout-container{
  position: relative;
  width:100%; height:100%;
  padding:1em;
  box-sizing: border-box;
  z-index: 1;
}

header[role="banner"]{
  outline: 1px solid blue;
}


main[role="main"]{
  outline:1px solid green;
  background-color: rgba(255,255,255, 0.9);
}

footer[role="contentinfo"]{
  outline: 1px solid pink;
  position: fixed;
  bottom:0;
  width:100%;
}

canvas#edlp-map{
  outline: 1px solid grey;
}

@mixin oblique-list {
  display: inline-block;
  position: relative;
  list-style: none;
  margin: 0 1.5em 0 0;
  // width:2em; height:10em;
  padding: 0;
  a{
    position: absolute;
    transform-origin: left bottom;
    transform: rotateZ(-45deg);
    color: #000;
    text-decoration: none;
    text-transform: uppercase;
    font-size: 0.756em;
    white-space: nowrap;
  }
}

footer{
  text-align: center;
  >.region{
    outline: 1px dotted pink;
  }
  .region-footer-left{
    float: left;
    text-align: left;
  }
  .region-footer-center{
    display: inline-block;
    margin: 0 auto;
    text-align: center;
  }
  .region-footer-right{
    float: right;
    text-align: right;
    padding-right: 5em;
  }

  nav.block-menu{
    display: inline-block;
    ul{
      margin:0;
      padding:0;
      li{
        @include oblique-list;
      }
    }
  }

  .block-language{
    display: inline-block;
    ul{
      position: absolute;
      margin:0;
      padding:0 0 0 0.5em;
      transform-origin: left bottom;
      transform: rotateZ(-45deg);
      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;
        }
      }
    }
  }

  .block-block-edlp-entrees{
    display: inline-block;
    ul{
      li{
        @include oblique-list;
        a{
          &:before{
            content: "";
            display:inline-block;
            $sq:7px;
            width: $sq; height:$sq;
            border: 1px solid #000;
            margin-right: 0.5em;
          }
          &.term-134:before{border-color: $entree-color-134;}
          &.term-121:before{border-color: $entree-color-121;}
          &.term-125:before{border-color: $entree-color-125;}
          &.term-119:before{border-color: $entree-color-119;}
          &.term-132:before{border-color: $entree-color-132;}
          &.term-122:before{border-color: $entree-color-122;}
          &.term-129:before{border-color: $entree-color-129;}
          &.term-120:before{border-color: $entree-color-120;}
          &.term-130:before{border-color: $entree-color-130;}
          &.term-118:before{border-color: $entree-color-118;}
          &.term-127:before{border-color: $entree-color-127;}
          &.term-133:before{border-color: $entree-color-133;}
          &.term-128:before{border-color: $entree-color-128;}
          &.term-124:before{border-color: $entree-color-124;}
          &.term-116:before{border-color: $entree-color-116;}
          &.term-117:before{border-color: $entree-color-117;}
          &.term-131:before{border-color: $entree-color-131;}
          &.term-126:before{border-color: $entree-color-126;}
          &.term-123:before{border-color: $entree-color-123;}
        }
      }
    }
  }

}