materio-d8/web/themes/custom/materiotheme/assets/styles/main.scss

$mdi-font-path: './mdi/fonts/';
@import './mdi/scss/materialdesignicons';

@import './base/variables';
@import './base/colors';
@import './base/reset';
@import './base/grid';
@import './base/layout';
@import './base/animations';
@import './base/fonts';
// @import './base/responsive';

html{
  // background-color: red;
}

@mixin iconMDI($name) {
	&::before {
    content: mdi($name);
    display: inline-block;
    font: normal normal normal #{$mdi-font-size-base}/1 '#{$mdi-font-name}'; // shortening font declaration
    font-size: inherit; // can't have font-size inherit on line above, so need to override
    text-rendering: auto; // optimizelegibility throws things off #1094
    line-height: inherit;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
	}
}

@mixin hover{
  @media (hover: hover) { /* solves sticky problem */
    &:hover {
      @content;
    }
  }
}

aside.messages{
  border:none;
}

//  _  _             _
// | || |___ __ _ __| |___ _ _
// | __ / -_) _` / _` / -_) '_|
// |_||_\___\__,_\__,_\___|_|

header[role="banner"]{
  padding:0.2em 0 0 0;

  %header-fs{
    font-size: 0.9em;
    // line-height: 1;
    font-weight: 400;
  }

  #block-sitebranding{
    h1{
      margin:0;
      line-height: 1;
    }
    .slogan{
			font-size: 0.882em;
			display: block;
			white-space: nowrap;
      // @include col-mediaquery-max(2){
      //   display:none;
      // }
    }
		@include col-mediaquery-max(3){
			h1, .slogan{
				display: inline-block;
			}
		}
  }

	@include col-mediaquery-max(3){
		.header-block.header-right{
			.header-block-wrapper{
				padding:1em 1em;
				box-shadow: -2px 2px 4px #ccc;
				background-color: #fff;
			}
		}
	}

  #block-socialmedialinks{
    padding-right: 0.5em;
    border-right: 1px solid $color-main-text;
    margin-right: 0.5em;
    li{
      padding:0;
    }
    // @include col-mediaquery-max(4){
    //   display:none;
    // }
  }

  #block-userlogin{
    position: relative;
    // width:8em;
    padding:0 1em;
    overflow: visible;
    h2{
      @extend %header-fs;
      line-height: 1.38;
      margin: 0;
    }
    &>section{
			overflow: hidden;
      background-color: #fff;
      // margin:0 0 0 -1em;
      box-sizing:content-box;
      transition: all 0.4s ease-in-out;
      // outline: 1px solid blue;
      right:0;
      top:1.7em;
      box-sizing: content-box;
      z-index:100;
    }
		// appears on hover only on big screens
		@include col-mediaquery-min(3){
			&>section{
				max-height:0px;
				padding:0.01em 1em;
				transition-delay: 2s;
				position: absolute;
	      width:11em;
			}

			@include hover{
				&>section{
					transition-delay: 0s;
					max-height:20em;
					padding:1em 1em;
					box-shadow: 0 0 10px #ccc;
				}
			}
		}
    .form-item{
      margin:0;
      position: relative;
      width:100%;
      &.form-item-name{
        margin:2px 0 0.5em 0;
        input{
          width:90%;
          padding:0;
          box-sizing: content-box;
        }
      }
      &.form-item-pass{
        margin:0 0 0.5em 0;
        input{
          width:90%;
          padding:0;
          box-sizing: content-box;
        }
      }
      &.form-item-persistent-login{
        font-size: 0.756em;
        label{
          vertical-align: top;
        }
      }
    }
    #edit-actions{
      margin:0;
    }
    .item-list{
      ul{
        margin:0;
        li{
          list-style: none;
          margin:0;
          a{
            font-size: 0.756em;
          }
        }
      }
    }
    span.login-message{
      color: red;
      font-size: 0.693em;
      line-height: 1.2;
      display: block;
      padding: 0 0 0.8em 0;
    }
    span.login-message[v-if="loginMessage"],
    span.register-message[v-if="registerMessage"]{
      display: none;
    }
  }

  // non-vue userblock
  #block-userblock{
    h2{display:none;}
    a{
      margin-right: 1em;
    }
  }
  // vue userblock
  #user-tools{
    padding-top: 0.06em;
    a.mdi-account{
      @extend %header-fs;
      cursor: pointer;
      span{
        // @include col-mediaquery-max(5){
        //   display:none;
        // }
      }
    }
    .mdi-logout::before {
      margin: -0.125em 0 0 0;
      vertical-align: top;
    }
  }

  // vue flaglist
  #user-flags{
    border-left: 1px solid #000;
    padding-left: 0.5em;
    margin-left: 0.5em;
    display: inline-block;
    vertical-align: top;
    position: relative;
    h2{
      @extend %header-fs;
      cursor: pointer;
      &:before{padding-right: 0.2em;}
      span{
        // @include col-mediaquery-max(5){
        //   display:none;
        // }
      }
    }
    ul{
      background-color: #fff;
      overflow: hidden;
      width:11em;
      max-height:1px;
      padding:0.01em 1em;
      // margin:0 0 0 -1em;
      box-sizing:content-box;
      transition: all 0.4s ease-in-out;
      // outline: 1px solid blue;
      transition-delay: 2s;
      position: absolute;
      right:0;
      top:1.7em;
      box-sizing: content-box;
      z-index: 30;
    }
    @include hover{
      ul{
        transition-delay: 0s;
        max-height:50em;
        padding:1em 1em;
        box-shadow: 0 0 10px #ccc;
      }
    }
    li{
      width:100%;
      // cursor: pointer;
      display: flex;
      flex-direction: row;
      align-items: baseline;
      flex-wrap: nowrap;
      h5{
        @extend %header-fs;
        cursor: pointer;
        font-weight: 700;
        span.length{
          font-weight: 300;
        }
      }
      span.mdi{
        font-size: 0.9em;
      }
      div.actions{
        opacity:0;
        transition: opacity 0.3s ease-in-out;
        padding-left:0.5em;

        span.mdi{
          cursor: pointer;
          color: #4e4d4d;
        }
        span.delete-btn{
          &.loading:before{
            animation: rotating 2s linear infinite;
          }
        }
      }
      @include hover{
        div.actions{
          opacity:1;
        }
      }

      &.create-flag{
        margin-top: 0.2em;
        input{
          align-self: flex-end;
          border: 1px solid #bbb;
          border-radius:5px;
          width: calc(100% - 2em);
          font-size:0.8em;
        }
        span.add-btn{
          align-self: flex-end;
          color: #bbb;
          font-size: 1em;
          padding: 0 0 0 .5em;
          transition: all 0.2s ease-in-out;
          &.active{
            cursor: pointer;
            color:#1a1a1a;
          }
          &.loading:before{
            animation: rotating 2s linear infinite;
          }
        }
      }
    }
  }

  // menu
  #block-header{
    margin-right: 1em;
    padding-left: 1em;
    border-left: 1px solid #000;
		#block-header-menu{
      display:none;
    }
    // label[for="block-header-menu"]{
    //   display:none;
    // }
    ul.menu{
      margin:0;
      li{
        padding:0;
        a{
          @extend %header-fs;
        }
      }
    }
    // @include col-mediaquery-max(3){
      ul.menu{
        li{
          display: inline-block;
          &:not(:first-of-type){
            margin-left: 0.5em;
          }
        }
      }
    // }
    @include col-mediaquery-max(3){
      // position: relative;
			//
      // label[for="block-header-menu"]{
      //   display:block;
      // }
      // /* Toggle Show/Hide Menu */
      // // https://code-boxx.com/simple-responsive-pure-css-hamburger-menu/#sec-download
      // ul.menu { display: none; }
      // input:checked ~ ul.menu { display: block; }
      // ul.menu{
      //   position: absolute;
      //   width: 110px;
      //   height: auto;
      //   top: 18.9px;
      //   right: 0;
      //   background-color: white;
      //   padding: 0.2em 0.5em;
      //   margin-right: -0.5em;
      //   z-index: 90;
      //   text-align: right;
			// 	li{
			// 		display: block;
			// 	}
      // }
			ul.menu{
				text-align: right;
				li{
					display: block;
				}
			}
    }
  }

  #block-languageswitcher{
    text-align: right;
    position: relative;
    padding-right: 3px;
    h2{
      margin: 0.1em 0 0 0;
      font-size: 0.756em;
      font-weight: 400;
      padding:0.1em 0.4em 0.2em;
      border-radius: 3px;
      background-color: #444;
      color: #fff;
      display: inline-block;
      vertical-align: top;

      @include iconMDI('translate');
      width:12px;
      height:15px;
      overflow: hidden;
    }
    &>ul.links{
      // background-color: #fff;
      overflow: hidden;
      // display: inline-block;
      margin:0;
      box-sizing:content-box;
      // outline: 1px solid blue;
      // transition-delay: 2s;
    }

		@include col-mediaquery-min(3){
			&>ul.links{
				width:3.5em;
				position: absolute;
				top:17px;
				right:0;
				transition: all 0.4s ease-in-out;
				padding:0.01em 0;
				height:1px;
			}
			@include hover{
				&>ul.links{
					transition-delay: 0s;
					height:2em;
					padding:0.3em 0;
					// box-shadow: 0 0 10px #ccc;
				}
			}
		}

		@include col-mediaquery-max(3){
			h2{display: none;}

		}
    li{
      list-style: none;
      padding:0;
      display: inline-block;
      &.is-active{
        display:none;
      }
      a{
        margin: 0;
        font-size: 0.756em;
        font-weight: 400;
        padding:0.2em 0.4em;
        border-radius: 3px;
        background-color: #444;
        color: #fff;
      }
    }

  }

  // header bottom
  #header-bottom{
    // disable the default wrapper behaviour
    &:after{content: none;}
    // apply flex for normal layout
    display: flex;
    flex-direction: row;
    justify-content: space-between;

    #block-pagetitle{}
    #block-materiosapisearchblock{
      align-self: flex-end;
    }
    @include col-mediaquery-max(3){
      flex-direction: column-reverse;
      justify-content:center;
      #block-pagetitle{
        width: max-content;
      }
      #block-materiosapisearchblock{

      }
    }

  }
  #block-pagetitle{
    // float: left;
    padding:1em 0;

    @include col-mediaquery-max(3){
	    body.path-frontpage &, body.path-home & {
	      display: none;
	    }
		}
    h2{
      margin:0;
      font-size: 1.512em;
      text-transform: capitalize;
      font-weight: 300;

	    body.path-home & {
	      display: none;
	    }
      body:not(.path-home) & {
        padding:0.5em 1em;
      }
      body.path-blabla &,
      body.path-checkout & {
        color: #fff;
        background-color: $color-blabla;
      }
      body.path-showrooms & {
        color: #fff;
        background-color: $color-showrooms;
      }
      body.path-base &,
      body.path-thematique & {
        color: #fff;
        background-color: $color-base;
      }
      body.path-pricing & {
        color: #fff;
        background-color: $color-webshowroom;
      }
    }
  }

  #block-materiosapisearchblock{
    // float:right;
    // display:inline-block;
    // box-shadow: 0 0 5px rgba(0,0,0,0.2);
    padding:0;

    #materio-sapi-search-form{
      .form-item, input.button{
        display: inline-block;
      }

      #edit-search{
        border:1px #BBB solid;
        border-radius: 14px;
        padding:0.3em;
        color:#666;
      }

      .button.form-submit{
        border:0;
        text-indent: 50px;
        overflow: hidden;
        width:20px; height:20px;
        margin:0;
        // border-radius: 7px;
        background-image: url('../img/search.png');
        background-position: center;
        background-repeat: no-repeat;
        background-size: contain;
      }

    }

  }
}



// main
aside.messages{
  padding: 0;
}

// content top
// #content-top{
//   &:after{
//     content:"";
//     clear:both;
//     display: block;
//   }
// }


//   ___         _           _       _         __ _
//  / __|___ _ _| |_ ___ _ _| |_ ___| |   ___ / _| |_
// | (__/ _ \ ' \  _/ -_) ' \  _|___| |__/ -_)  _|  _|
//  \___\___/_||_\__\___|_||_\__|   |____\___|_|  \__|
#content-left{
  z-index: 5;
  box-sizing: content-box;
  max-width:1px;
  overflow-x: hidden;
  transition: all 0.3s ease-in-out;
  &.opened{
    max-width: 500px;
    padding: 0.3em;
  }
  >*{
    box-sizing: border-box;
    background-color: #fff;
    box-shadow: -2px 0px 4px rgba(0, 0, 0, 0.2);
    padding: 0.5em;
  }
  .flag-collection{
    >header{
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      padding-bottom: $column_goutiere;
      h3{
        // flex-basis: calc(100% - 1em);
      }
      .mdi-close{
        // display: block;
        // flex-basis: 1em;
        cursor:pointer;
        align-self: flex-end;
      }
    }
    >ul{
			@include col-mediaquery-max(2){
				display:flex;
				flex-direction: row;
				flex-wrap: wrap;
				justify-content: space-between;
			}
      >li{

        margin:0 0 $column_goutiere 0;
        padding:0;
        article.card.minicard{
          width:$minicard_width;
          height:$minicard_height;
          margin:auto;
          >header{
            padding: 0.3em 0.3em 0.1em;
            h1{
              margin:0;
            }
          }
          >nav.tools{
            // top: auto;
            // bottom: 0;
            padding:0 0.2em;
            // background:transparent;
            .mdi.unflag{
              cursor: pointer;
            }
            .tool.samples{
              .tool-content{

              }
            }
          }
        }

      }
    }
  }
}


//   __             _
//  / _|_ _ ___ _ _| |_
// |  _| '_/ _ \ ' \  _|
// |_| |_| \___/_||_\__|

@mixin btn{
  display: inline-block;
  font-size: 0.9em;
  font-weight: bold;
  padding: 0.7em 1em;
  margin-bottom: 0.3em;
  background-color: #fff;
  color: #000;
  border-radius: 5px;
  border: none;
}

article.node--type-frontpage{

  %front-col-field__label{
    font-size: 3.5em;
    line-height: 1;
		@include col-mediaquery-max(3){
			font-size: 2em;
		}
  }
  %front-col-description{
    font-size: 0.9em;
    line-height: 1.3;
  }

  %part-centered-layout{
    padding:1.5em 0;
    background-color: #fff;
    >div:nth-child(1){
      width:80%;
      margin: 0 auto;
      text-align: center;
			@include col-mediaquery-max(3){
				width:auto;
				padding:0 1em;
				text-align: left;
			}
      .field__label{
        @extend %front-col-field__label;
      }
      .field__item{
        @extend %front-col-description;
      }
    }
  }

  // %part-columned-layout{
  //   display:grid;
  //   grid-template-columns: 300px 1fr;
  //   grid-column-gap: 2em;
  //   padding:2em 1em;
  //   >div:nth-child(1){
  //     color: #fff;
  //     grid-column: 1;
  //     .field__label{
  //       @extend %front-col-field__label;
  //     }
  //     .field__item{
  //       @extend %front-col-description;
  //     }
  //   }
  //   >div:nth-child(2){
  //     grid-column: 2;
  //   }
  // }

  %part-columned-layout{
    display:flex;
    flex-direction: row;
    flex-wrap: nowrap;
    >div:nth-child(1){
      flex: 0 0 $column_width * 2 + $column_goutiere;
      box-sizing: border-box;
      padding: 1em;
      color: #fff;
      .field__label{
        @extend %front-col-field__label;
      }
      .field__item{
        @extend %front-col-description;
      }
    }
    >div:nth-child(2){
      flex: 1 1 auto;
      box-sizing: border-box;
      padding: 1em 0.5em;
    }
		@include col-mediaquery-max(3){
			flex-direction: column;
	    >div:nth-child(1){
	      flex: 0 0 auto;
	      // box-sizing: border-box;
	      // padding: 1em;
	    }
	    >div:nth-child(2){
	      // flex: 1 1 auto;
	      // box-sizing: border-box;
	      // padding: 1em 0.5em;
	    }
		}

  }

  >h2{
    display: none;
  }

  .node__content{

    &>section{
      &.home-intro{
        @extend %part-centered-layout;
        .field__item{
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          p{
            flex: 0 0 $column_width * 2;
            padding:1em;
          }
					@include col-mediaquery-max(3){
						display: none;
					}
        }
      }
      &.home-database{
        background-color: $color-base;
        @extend %part-columned-layout;
        .field--name-field-a-database{
          .field__label{
            cursor: pointer;
          }
        }
        .field--name-field-database-links{
          .field__item{
            display: inline-block;
            a{
              @include btn;
              background-color: #fff;
              color: $color-base;
            }
          }
        }
        .cards-list-home{
          position: relative;
          // max-height: (130px*1.4)*3;
          max-height: 580px;
          overflow-y: hidden;
          ul{
            width:100%;
            margin:0; padding:0;
            // display: grid;
            // grid-template-columns: repeat(auto-fill, minmax(50px, 130px));
            // grid-template-rows: 1fr;
            // grid-gap: 1em;
            // justify-content:start;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
						@include col-mediaquery-max(3){
							justify-content: space-around;
						}
            li{
              padding:0 0 $column_goutiere / 2 0;
              box-sizing: border-box;
              // padding-top: 140%;
              width: $column_width / 2;
              height: $card_height / 2;
              position: relative;
              list-style: none;
              margin:0;
              .card{
                // position:absolute;
                // top:0; bottom:0;
                // left:0; right:0;
                width: 100%;
                height: 100%;
                .field--name-field-short-description{
                  font-size: 0.656em;
                  line-height: 1.2;
                }
              }
            }
          }
        }
      }
      &.home-showrooms{
        background-color: $color-showrooms;
        @extend %part-columned-layout;
        .field--name-field-showrooms{}
        .field--name-field-showroom-links{
          .field__item{
            display: inline-block;
            a{
              @include btn;
              background-color: #fff;
              color: $color-showrooms;
            }
          }
        }
        .field--name-computed-showrooms-reference{
          overflow: hidden;
          position:relative;
          // height:550px;
          display: grid;
          grid-template-rows: 1fr;
          $bp: ($column_width + $column_goutiere )*7;

          @media only screen and (max-width: $bp){
            grid-template-columns: 1fr;
            >.field__item{
              grid-column: 1;
            }
          }
          @media only screen and (min-width: $bp + 1px){
            grid-template-columns: 1fr 1fr;
            grid-gap: 1em;
            >.field__item:nth-child(odd){
              grid-column: 1;
            }
            >.field__item:nth-child(even){
              grid-column: 2;
            }
          }

          >.field__item{
            grid-row: 1;
            // position: absolute;
            // top:0; left:0;
            // width:100%; height:100%;
            // overflow: hidden;
            opacity: 0;
            // transform: translateX(100%);
            transition: all 2s ease-out;
            &.active{
              opacity: 1;
              // transform: translateX(0);
              // transition: all 0.3s ease-in-out;
            }

            .taxonomy-term{
              position: relative;
              width:100%; height:100%;
              div.visuel{
                width:100%;
                padding-bottom: 5em;
                img{
                  max-width: 100%;
                  height: auto;
                }
              }
              section.text{
                position: absolute;
                bottom:0; left:0;
                width:100%;
                box-sizing:border-box;
                padding:1em 0 0;
                background-color:$color-showrooms;
                color: #fff;
                // >*{
                //   // display: inline-block;
                //   font-size: 0.9em;
                // }
                h2,p{
                  margin:0;
                }
                h2{
                  font-size: 2em;
                }
                .field--name-field-public-address{
                  br{
                    display:none;
                  }
                  span:not(:nth-last-of-type(1)) {
                    margin-right: 0.4em;
                    &:after{
                      padding-left: 0.5em;
                      content:"⋅"
                    }
                  }
                }
                .field--name-field-public-phone {
                  display: inline-block;
                  margin-right: 0.4em;
                  &:after{
                    padding-left: 0.5em;
                    content:"⋅"
                  }
                }
                .field--name-field-public-email {
                  display: inline-block;
                }
              }
            }
          }
        }
      }
      &.home-blabla{
        background-color: $color-blabla;
        @extend %part-columned-layout;

        .field--name-field-blabla-links{
          .field__item{
            display: inline-block;
            a{
              @include btn;
              background-color: #fff;
              color: $color-blabla;
            }
          }
        }
        .cards-list-home{
          position: relative;
          $bp: ($column_width*2 + $column_goutiere );
          overflow-y: hidden;
          max-height: 315px;

          // @media only screen and (max-width: $bp * 6){
          //   max-height: 630px;
          // }
          // @media only screen and (min-width: ($bp * 6) + 1px){
          //   max-height: 310px;
          // }

          ul{
            width:100%;
            margin:0; padding:0;
            // display: grid;
            // grid-template-columns: repeat(auto-fill, minmax(80px, $column_width*2));
            // // grid-template-rows: 1fr;
            // grid-gap: 1em;
            // justify-content:start;
            display: flex;
            flex-flow: row wrap;
            justify-content: space-between;
            li{
              padding:0 0 $column_goutiere 0;
              box-sizing: border-box;
              // padding-top: 140%;
              width: $column_width;
              // height: $card_height / 2;
              position: relative;
              list-style: none;
              margin:0;
              // padding-top: 67.8%;
              overflow: hidden;
              .card{
                // position:absolute;
                // top:0; bottom:0;
                // left:0; right:0;
                width: 100%;
                height: auto;
                .field--name-title{
                  font-size: 0.756em;
                  line-height: 0.9;
                }
              }
            }
          }

					@include col-mediaquery-max(3){
						max-height: 386px;
						ul{
							justify-content: space-around;
							li{
								flex: 0 3 45%;
							}
						}
					}
        }
      }
      &.home-pricing{
        @extend %part-centered-layout;
        >h3{
          @extend %front-col-field__label;
          text-align: center;
          text-transform: capitalize;
          padding: 0.7em 0 0.3em 0;

					@include col-mediaquery-max(3){
						text-align: left;
						padding: 0 0.4em;
					}
        }
        .field--name-field-pricing-pitch{
          text-align: center;
          p{ margin:0;}
					@include col-mediaquery-max(3){
						text-align: left;
						p{ padding: 0.5em 1em; }
					}
        }
        .field--name-field-pricing{
          // padding:2em 0;
          display: flex;
          flex-flow: row nowrap;
          justify-content: center;
          padding-bottom: 1em;
          p{
            flex: 0 0 $column_width * 2;
            padding: 1em;
            margin: 0;
            text-align: center;
          }
					@include col-mediaquery-max(3){
						flex-flow: column;
						justify-content: flex-start;
						p{
							flex: 0 0 auto;
							text-align: left;
							padding: 0 1em 0.5em;
						}
					}
        }
        .field--name-computed-products-reference{
          display: flex;
          flex-flow: row nowrap;
					@include col-mediaquery-max(3){
						flex-flow: column;
						justify-content: flex-start;
					}
          >.field__item{
            flex:0 0 50%;
            text-align: center;
            padding: 2em 0;
            a.btn{
              @include btn;
              background-color: #fff;
            }
            &:nth-child(1){
              background-color: $color-base;
              a.btn{
                color: $color-base;
              }
            }
            &:nth-child(2){
              background-color: $color-webshowroom;
              a.btn{
                color: $color-webshowroom;
              }
            }
            color: #fff;
            position: relative;
            height:18em;
            >article{
              position: absolute;
              top:50%; left:50%;
              transform: translate(-50%, -50%);
            }
            .field--name-title{
              @extend %front-col-field__label;
              font-weight: 600;
              line-height: 0.7;
              padding-bottom: 0.1em;
              text-align: center;
              word-spacing: 30000px;
            }
            .field--name-body{
              @extend %front-col-description;
              padding:0.5em;
              p{
                margin: 0;
              }
            }

						@include col-mediaquery-max(3){
							flex: 0 0 auto;
							padding:0;
							// height: auto;
							>article{

							}
						}
          }
        }
      }
    }
  }
}


 //   ___             _
 //  / __|__ _ _ _ __| |___
 // | (__/ _` | '_/ _` (_-<
 //  \___\__,_|_| \__,_/__/

.infinite-loading-container{
  .infinite-status-prompt{
    i[class^="loading-"]{
      width:15px; height:15px;
    }
  }
}

.cards-list{
  position: relative;
  .search-info{
    font-size: 0.756em;
    font-weight: 500;
    margin: 0;
    padding: 0 0 0.5em 0;
  }

  &>ul{
    // outline: 1px green solid;
    margin:0; padding:0;
    width: calc(100% + #{$column_goutiere});

    &>li{
      list-style: none;
      margin:0 $column_goutiere $column_goutiere 0; padding:0;
      display: inline-block;
      vertical-align: top;
    }
  }
}

article.card{
  position: relative;
  box-shadow: 0 0 5px rgba(0,0,0,0.2);
  width:$column_width; height:$card_height;
  &.article{
    width:$column_width*2 + $column_goutiere; height:$card_height;
    section.images{
      a{
        display:block;
      }
    }
  }

  &.minicard{
    height:100px;
    width:$minicard_width;
    height:$minicard_height;
    margin:auto;
    >header{
      padding: 0.3em 0.3em 0.1em;
      cursor: pointer;
      h1{
        margin:0;
        font-size: 1em;
      }
      h4{
        margin:0;
        line-height: 1.1;
        margin-bottom: -0.4em;
      }
      span.ref{
        line-height: 0.5;
      }
    }
    >nav.tools{
      // top: auto;
      // bottom: 0;
      padding:0 0.2em;
      background:rgba(255,255,255, 0.8);
      .mdi.unflag{
        cursor: pointer;
      }
      .tool.samples{
        @include hover{
          .tool-content{
            max-width:140px;
          }
        }
      }
    }
  }
  &.linkedmaterialcard{
    width:$linkedmaterialcard_width;
    height:$linkedmaterialcard_height;
    >header{
      padding: 0.3em 0.3em 0.1em;
      cursor: pointer;
      h1{
        margin:0;
        font-size: 1em;
      }
      h4{
        margin:0;
        line-height: 1.1;
        margin-bottom: -0.4em;
      }
      span.ref{
        line-height: 0.5;
      }
    }
    >nav.tools{
      top: auto;
      bottom: 0;
      padding:0 0.2em;
      background:transparent;
      .mdi.unflag{
        cursor: pointer;
      }
    }
  }
  // &.card-small{
  //   width:100px; height:140px;
  // }
  // focused
  // box-shadow: 0 0 7px rgba(0,0,0,0.9);
  // &.article{
  //   width: $column_width * 2 + $column_goutiere;
  //
  // }
  header{
    position: absolute;
    bottom:0;
    z-index:10;
    color: #000;
    background-color: rgba(255,255,255,0.8);
    padding: 0.3em 0.3em;
    box-sizing:border-box;
    width:100%;
    h1, h4{ margin:0; padding:0; }
    h1{
      font-size: 1.3em;
      font-weight: 700;
      line-height: 0.85;
      margin-bottom: 0.2em;
    }
    h4{
      font-size: 0.882em;
      font-weight: 300;
      line-height: 1.1;
      margin-bottom: -0.2em;
    }
    span.ref{
      font-size: 0.693em;
      font-weight: 300;
      line-height: 1;
    }
  }
  &.card-thematique header{
    background-color: $color-base-transparent;
  }
  $navtool_width: 15px;
  nav.tools{
    position: absolute;
    top: 0;
    right: 0;
    z-index: 21;
    width: $navtool_width;
    background-color: #fff;
    box-sizing: content-box;
    padding: 0.3em 0.1em;
    >*{
      overflow: visible;
      position: relative;
      span.btn{
        overflow: hidden;
        font-size: 0.882em;
      }
      .tool-content{
        position: absolute;
        top: 0px;
        right: 100%;
        // width: 5em;
        width: $column_width - $navtool_width - 10px;
        box-sizing: border-box;
        padding: 0;
        background-color: #fff;
        box-shadow: -2px 3px 8px rgba(0, 0, 0, 0.5);
        opacity: 0;
        max-height: 0; max-width:0;
        overflow: hidden;
        transition: all 0.2s ease-in-out;
        transition-delay: 0.1s;
      }
      @include hover{
        .tool-content{
          transition: all 0.3s ease-in-out;
          opacity: 1;
          padding: 0.3em;
          max-height: 195px;
          max-width:200px;
        }

      }
    }
    .tool.flags{
      .tool-content{
        ul{
          display: flex;
          flex-flow: row wrap;
          li{
            padding:0 0.5em 0 0;
          }
        }
      }
      span.flag{
        cursor: pointer;
        font-size: 0.756em;
        color: #bbb;
        transition: color 0.3s ease-in-out;
        @include hover{
          color:#1a1a1a;
        }
        &.isActive{
          color:#1a1a1a;
        }
      }
      li.create-flag{
        margin-top: 0.2em;
        padding:0;
        input{
          align-self: flex-end;
          border: 1px solid #bbb;
          border-radius:5px;
          width: calc(100% - 2em);
          font-size:0.8em;
        }
        span.add-btn{
          align-self: flex-end;
          color: #bbb;
          font-size: 1em;
          // padding: 0 0 0 .5em;
          transition: all 0.2s ease-in-out;
          &.active{
            cursor: pointer;
            color:#1a1a1a;
          }
          &.loading:before{
            animation: rotating 2s linear infinite;
          }
        }
      }
    }
    .tool.samples{
      .tool-content{
        font-size: 0.756em;
        ul li{
          font-weight: bold;
          span.showroom{
            font-weight: 400;
          }
        }
      }
    }
    opacity: 0;
    transition: opacity 0.2s ease-in-out;
  }

  @include hover{
    nav.tools{
      opacity:1;
    }
  }
  section.images{
    position: relative;
    &, *{width: 100%; height:100%;}
    figure{
      cursor: pointer;
      margin:0;
      position: absolute;
      top:0; left:0;
      // width: 100%; height:100%;
      &:first-of-type{
        z-index:5
      }
      transition: opacity 0.2s ease-in-out;
      &.show{opacity: 1; z-index:6;}
      &.hide{opacity: 0;}

      img{
        // width: 100%; height:100%;
        &.blank{
          position: absolute;
          top:0; left:0;
          z-index: 20;
        }
      }
    }
  }
  // overwritnig card for card-medium (aka search-card)
  &.search-card{
    >header{
      cursor: pointer;
    }
  }
  // overwriting card for modal-card
  &.modal-card{
    display: flex;
    flex-flow: row-reverse nowrap;
    width: $modalcard_width;
    height: $modalcard_height;
    >.col{
      flex-basis: 50%;
    }
    section.col-right{
      >*:not(nav.tools){
        position: relative;
        padding: 0.3em $navtool_width + 5px 0 0.5em;
        box-sizing: border-box;
        width: 100%;
      }
      >header{
        bottom: auto;
      }
      span.label{
        font-size: 0.693em;
        font-weight: 500;
      }

      section.body{
        p{
          font-size: 0.693em;
          font-weight: 300;
          line-height: 1.35;
          margin:0 0 0.3em;
        }

      }
      .vsa-list{
        padding:0;
        border: none;
        --vsa-heading-padding: 0 0;
        --vsa-content-padding: 0 0 0.5em;
        --vsa-default-icon-size: 0.3;
        --vsa-border-width: 0;
        --vsa-text-color: #{$color-main-text};
        --vsa-highlight-color: #fff;
        --vsa-bg-color: #fff;

        .vsa-item__trigger:focus .vsa-item__trigger__icon--is-default::after, .vsa-item__trigger:focus .vsa-item__trigger__icon--is-default::before, .vsa-item__trigger:hover .vsa-item__trigger__icon--is-default::after, .vsa-item__trigger:hover .vsa-item__trigger__icon--is-default::before {
            background-color: var(--vsa-text-color);
        }
        .vsa-item{
          .vsa-item__heading{
            button.vsa-item__trigger{
              height:2em;
              &:hover,
              &:focus{
                  color: var(--vsa-text-color);
              }
            }
          }
          .vsa-item__content{}

          &[data-vsa-active="false"]{
            .vsa-item__heading{
              padding-bottom: 0.2em;
              margin-bottom: 0.2em;
              border-bottom: 0.5px dotted $color-main-text;
            }

          }

        }
      }
      section.linked-materials{
        >ul{
          display: flex;
          flex-flow: row wrap;
          justify-content: space-between;
          >li{
            flex-basis: 0 0 50%;
            margin-bottom: 0.5em;
            article.linkedmaterialcard{
            }
          }
        }
      }

      nav.tools{
        opacity: 1;
        section.close{
          span.btn.mdi-close{
            cursor:pointer;
          }
        }
        div.tool-content{
          min-width: $column_width *2 - $navtool_width - 10px;
        }
      }
      section.tool.samples{
        div.tool-content{
          ul{
            // display: flex;
            // flex-flow: row wrap;
            font-size: 0.756em;
            font-weight: 300;
            // line-height: 1.35;
            li{
              padding-right: 0.5em;
              span.showroom{ font-weight: 500; }
            }
          }
        }
      }
      section.tool.note{
        @include hover{
          div.tool-content{
            max-height: 370px;
          }
        }
        div.tool-content{
          textarea,
          textarea:focus,
          textarea:focus-visible,
          textarea:active{
            resize:none;
            width:99%;
            height:350px;
            margin:0;
            padding:0.3em;
            border:1px solid #ccc;
            border-radius: 3px;
            outline: none;
            box-sizing: border-box;

          }
        }
      }
      // section.tool.industriels{
      //   div.tool-content{
      //     display: flex;
      //     flex-flow: row;
      //     >section{
      //       flex: 0 0 50%;
      //       h2{
      //         margin:0;
      //         font-size: 1em;
      //         line-height: 0.6;
      //       }
      //       p{
      //         margin: 0;
      //         font-size: 0.882em;
      //       }
      //     }
      //   }
      // }
      section.industriels{
          display: flex;
          flex-flow: row;
          >section{
            flex: 0 0 50%;
            ul{
              li{
                padding:0.1em 0 .4em 0;
              }
            }
            h2{
              margin:0;
              font-size: 1em;
              line-height: 1;
            }
            p{
              margin: 0;
              font-size: 0.756em;
            }
          }
      }
      section.attachments{
        a{
          margin:0;
          font-size: 0.882em;
          line-height: 0.6;
          span{
            font-size: 0.8em
          }
        }
        p{
          margin: 0;
          font-size: 0.882em;
        }
      }
    }
  }
}

//  _____ _                   _   _
// |_   _| |_  ___ _ __  __ _| |_(_)__ _ _  _ ___
//   | | | ' \/ -_) '  \/ _` |  _| / _` | || / -_)
//   |_| |_||_\___|_|_|_\__,_|\__|_\__, |\_,_\___|
//                                    |_|
#main-content > article.thematique{
  div.cols{
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    // @media only screen and (max-width: $small-bp) {
    @include col-mediaquery-max(3){
      flex-wrap: wrap;
    }
    // }
    div.col-left{
      padding: 0 $column_goutiere $column_goutiere 0;
      flex: 0 0 $column_width * 2 + $column_goutiere;
    }
    div.col-right{}
  }
  div.col-left{
    section.body{
      background-color: $color-base;
      padding: 0.5em 1em 1em;
    }
    section.visuel{
      img{
        width: 100%;
      }
    }
  }
  aside.linked-materials{
    div.card-list{
      >ul{
        width:calc(100% + #{$column_goutiere});
        >li{
          display: inline-block;
          vertical-align: top;
          width:$column_width;
          margin:0 $column_goutiere $column_goutiere 0;
        }
      }

    }
    h3.field__label{
      font-size: 1em;
      font-weight: 500;
      margin: 2em 0 1em 0;
    }
    h1.title{
      font-size: 1em;
      font-weight: 400;
    }
    h3.ref{
      font-size: 0.756em;
      font-weight: 600;
    }
    h2.description{
      font-size: 0.756em;
      font-weight: 400;
    }
  }

}

//  ___ _      _    _
// | _ ) |__ _| |__| |__ _
// | _ \ / _` | '_ \ / _` |
// |___/_\__,_|_.__/_\__,_|
#blabla{

}

#main-content > article.article{
  div.cols{
    display: grid;
    grid-template-rows: 1fr;
    grid-template-columns: repeat(6, 1fr);
    grid-gap: 1em;
    div.col-left{
      grid-column: 1;
    }
    div.col-right{
      grid-column: 2/6;
    }
  }
  section.accroche{
    figure{
      width:$column_width*2 + $column_goutiere;
      margin:0 $column_goutiere 0 0;
      img{
        width:100%;
      }
    }
  }
  section.taxonomy{
    margin:1em 0;
    ul{
      margin: 0;
    }
    li{
      display:inline-block;
      padding:0 0.5em 0 0;
    }
  }
  div.gallery-wrapper{
    .image{
      display: inline-block;
      width:$column_width;
      margin:0 $column_goutiere $column_goutiere*0.6 0;
      height:$card_height / 2;
      background-size: cover;
    }
  }
  // section.videos{
  //   ul{
  //     margin:0; padding:0;
  //     li{
  //       margin:0; padding:0;
  //       display: inline-block;
  //       width:100%; overflow: hidden;
  //     }
  //   }
  // }
  // section.visuels{
  //   width:calc(100% + #{$column_goutiere});
  //   figure{
  //     position: relative;
  //     display: inline-block;
  //     vertical-align: top;
  //     width:$column_width*2 + $column_goutiere;
  //     margin:0 $column_goutiere $column_goutiere*0.6 0;
  //     img{
  //       width:100%;
  //     }
  //     caption{
  //       position: absolute; bottom: 0; left:0;
  //       box-sizing: border-box; width: 100%; padding:0.5em;
  //       background-color: $transparent-bg-blk; color: #fff;
  //     }
  //   }
  // }
  aside.linked-materials{
    ul{
      width:calc(100% + #{$column_goutiere});
      li{
        display: inline-block;
        vertical-align: top;
        width:$column_width;
        margin:0 $column_goutiere $column_goutiere 0;
      }
    }
    h3.field__label{
      font-size: 1em;
      font-weight: 500;
      margin: 2em 0 1em 0;
    }
    h1.title{
      font-size: 1em;
      font-weight: 400;
    }
    h3.ref{
      font-size: 0.756em;
      font-weight: 600;
    }
    h2.description{
      font-size: 0.756em;
      font-weight: 400;
    }
  }
  nav.prevnext{
    &.bottom{
      margin:2em 0;
    }
    ul{
      padding:0;
      margin:0;
      display: grid;
      grid-template-columns: 1fr 1fr;
    }
    li{
      padding:0;
      margin:0;
      list-style: none;
      a{
        font-size: 0.756em;
        font-weight: 700;
      }
      &:nth-child(1){
        grid-column: 1;
        a:before{
          content:'< ';
        }
      }
      &:nth-child(2){
        grid-column: 2;
        text-align: right;
        a:after{
          content:' >';
        }
      }
    }
  }
}

//  ___ _
// / __| |_  _____ __ ___ _ ___  ___ _ __  ___
// \__ \ ' \/ _ \ V  V / '_/ _ \/ _ \ '  \(_-<
// |___/_||_\___/\_/\_/|_| \___/\___/_|_|_/__/
#showrooms{
  width: calc(100% + #{$column_goutiere});
  article.showroom{
    width: $column_width * 2 + $column_goutiere;
    display: inline-block;
    vertical-align: top;
    margin: 0 $column_goutiere $column_goutiere 0;

    h1{
      margin:0;
      font-weight: 4;
    }
    p{ margin:0; }
    figure{
      margin:0;
      img{
        max-width: 100%;
      }
    }
  }

}

//  ___     _    _
// | _ \_ _(_)__(_)_ _  __ _
// |  _/ '_| / _| | ' \/ _` |
// |_| |_| |_\__|_|_||_\__, |
//                     |___/
#main-content>#pricing,
#main-content .view-pricing-products .view-content{
  display: flex;
  flex-flow: row nowrap;
  article.product,
  .views-row{
    flex:0 0 50%;
    text-align: center;
    padding: 2em 0;
    >header{
      padding-bottom: 1.3em;
    }
    >header h1,
    .views-field-title{
      font-size: 4em;
      line-height: 0.6;
      color: #fff;
      text-align: center;
      word-spacing: 30000px;
    }
    section.content, .views-field-body{
      color: #fff;
      .description{
        font-size: 1.134em;
        p{
          margin: 0.3em;
        }
      }
    }
    aside{
      padding:1em 0;
      .variation{
        display: flex;
        flex-flow: row nowrap;
        justify-content: center;
        align-items:flex-end;
        div.variation-description{
          flex: 0 0 6.7em;
          font-size: 2.012em;
          font-weight: 800;
          color: #fff;
          p{
            margin:0;
            text-align: left;
          }
        }
        button{
          @include btn;
          background-color: #fff;
        }
      }
    }
    &:nth-child(1){
      background-color: $color-base;
      aside .variation button{
        color: $color-base;
      }
    }
    &:nth-child(2){
      background-color: $color-webshowroom;
      aside .variation button{
        color: $color-webshowroom;
      }
    }
  }
}

.modal{
  position: relative;
}
#pricing-modal-login-register{
  position: relative;
  width: 100%;
  text-align: left;
  h2{
    margin: 0.4em 0 1.1em;
    padding-right: 4em;
    font-size: 1.2em;
    font-weight: 300;
  }
  #login-register{
    width: 100%;
    display: flex;
    flex-flow: row nowrap;
    >section{
      flex:0 0 250px;
      form{
        .form-item, .form-actions {
          margin: 0.5em 0;
          max-width: none;
        }
        .form-type-email,
        .form-type-password,
        .form-actions{
          display:block;
        }
        input[type="email"],
        input[type="password"]{
          max-width: 11em;
        }
        &#user-login-form #edit-pass--description,
        #edit-pass-pass1--description{
          display: block;
          max-width: 16em;
          font-size: 0.693em;
        }

        span.login-message,
        span.register-message{
          color: red;
          font-size: 0.693em;
          line-height: 1.2;
          display: block;
          padding: 0.8em 0 0 0;
        }
        span.login-message[v-if="loginMessage"],
        span.register-message[v-if="registerMessage"]{
          display: none;
        }
      }
    }
    section.login{
      form{
        >div{
          // display: block;
        }
      }
    }
    section.register{

    }
  }
}

#main-content form.commerce-checkout-flow{
  $w:3;
  max-width: $column_width * $w + $column_goutiere * ($w - 1);
  .layout-checkout-form{
    display: flex;
    flex-flow: column;
    .layout-region-checkout-main{
      // disable default style
      width:100%;
      float: none;
      // apply custom style
      order:2;
      background-color: $color-webshowroom;
      padding: 1em;
      label,
      legend,
      fieldset#edit-review-contact-information,
      fieldset#edit-review-payment-information{
        color: #fff;
      }
      fieldset{
        border:none;
        margin:0; padding:0;
        legend{
          font-size: 1.5em;
          font-weight: 600;
          margin-bottom: 0.5em;
        }
      }
      $lw:10em;
      .form-item{
        margin:0 0 0.5em 0;
      }
      label{
        display: inline-block;
        font-weight: bold;
        min-width: $lw;
      }
      input[type="text"]{
        width:20em;
      }
      .stripe-form{
        display: inline-block;
        background-color: #fff;
        color: #1A1A1A;
        border-radius: 5px;
        padding: 1em;
        margin: 0 0 1em;
        .form-item{
          display: flex;
          align-items: center;
          flex-flow: row nowrap;
          label{
            color: #777;
          }
          .form-text{
            background-color: #fff;
            border-radius: 3px;
          }
        }
      }
      // .form-item-payment-information-billing-information-address-0-address-address-line2
      .form-item-payment-information-add-payment-method-billing-information-address-0-address-address-line2{
        padding-left:$lw + 0.25em;
      }
      // .form-item-payment-information-billing-information-copy-to-address-book
      .form-item-payment-information-add-payment-method-billing-information-copy-to-address-book{
        display: none;
      }
    }
    .layout-region-checkout-secondary{
      // disable default style
      width:100%;
      float: none;
      // apply custom style
      order: 1;
      // display: flex;
      // flex-flow: row nowrap;
      // >.checkout-pane{
      //   flex: 0 0 50%;
      // }
      >h3{display:none;}
      #edit-order-summary{
        background-color: $color-base;
        color:#fff;
        padding:1em;
        .view-commerce-checkout-order-summary{
          display: flex;
          flex-flow: row nowrap;
          justify-content: space-between;
          align-items: flex-end;
        }
        .field--name-product-id{
          .field--name-title{
            font-size: 2.5em;
            font-weight: 800;
          }
          .field--name-body{

          }
        }
        .field--name-title{
          font-size: 1.5em;
          font-weight: 600;
        }
        p{
          margin:0;
        }
      }
      #edit-coupon-redemption{
        background-color: $color-showrooms;
        padding:1em;
        >.form-wrapper{
          display: flex;
          flex-flow: row;
          align-items: center;
          .form-item{
            margin:0 0.5em 0 0;
            label{
              color: #fff;
              font-size: 1.5em;
              font-weight: 600;
              margin-right: 0.5em;
            }
            input[type="text"]{
              width: 7em;
            }
          }
          input[type="submit"]{
            background-color: #fff;
            color: $color-showrooms;
            border: none;
            margin:0;
            padding:0.1em 0.7em;
            box-sizing: content-box;
            height:2em;
            font-weight: 800;
            border-radius: 5px;
          }
        }
      }
    }
    .layout-region-checkout-footer{
      // disable default style
      float: none;
      width: 100%;
      padding: 0;
      // apply custom style
      order: 3;
      #edit-actions{
        text-align: right;
      }
      input#edit-actions-next{
        background-color: $color-blabla;
        color: #fff;
        border: none;
        border-radius: 5px;
        padding: 0.2em 0.4em 0.3em;
        font-weight: 600;
        font-size: 1.323em;
      }
    }
  }
}

form#user-pass{
  input.form-email{
    max-width: 95%;
  }
}

//  ___         _
// | __|__  ___| |_ ___ _ _
// | _/ _ \/ _ \  _/ -_) '_|
// |_|\___/\___/\__\___|_|
footer[role="contentinfo"]{
  body:not(.path-home) & {
    display:none;
  }
  #block-materiosimplenewssubscription{
    form{
      display: flex;
      flex-flow: row nowrap;
      align-items: center;
      font-size: 0.756em;
      >*{
        margin-right: 0.5em;
      }
      #edit-subscriptions{
        display: flex;
        flex-flow: row nowrap;
        >*{
          margin-right: 0.5em;
          display: flex;
          flex-flow: row nowrap;
          align-items: center;
        }
        input{
          margin-right: 0.3em;
        }
      }
      #edit-mail-wrapper{
        input[type="email"]{
          width:10em;
        }
      }
      #edit-actions--2{
        input[type="submit"]{
          border: none;
          background: none;
          background-color: $color-base;
          border-radius: 5px;
          color: #fff;
          padding: 0.7em 1em;
          font-weight: 700;
        }
      }
    }


  }
}