File "main-magazine.scss"

Full Path: /srv/www/www.cadoro.it/src/scss/main-magazine.scss
File size: 4.04 KB
MIME-type: text/plain
Charset: utf-8

.nav-pills-magazine {
 display: table;
 table-layout: fixed;
 width: 100%;

 >li {
   display: table-cell;
   float: none;
   line-height: 18px;
   vertical-align: top;

   a {
     height: 120px;
     width: 100%;
   }
 }
}

.magazine-item {
  background-position: center center;
  background-size: cover;
  background-repeat: no-repeat;
  display: block;
  position: relative;
  height: 270px;

  .magazine-item__category {
    position: absolute;
    top: 10px; right: 10px;
    width: 52px; height: 52px;
  }

  .magazine-item__title {
    background-color: rgba(0,0,0,0.60);
    color: #fff;
    font-size: 18px;
    line-height: 22px;
    display: block;
    position: absolute;
    bottom: 0; left: 0; right: 0;
    padding: 10px 10px 5px;
  }

  &.magazine-item-ricette {
    height: 580px;

    .magazine-item__title {
      background: transparent;
      font-family: 'Sue Ellen Francisco', cursive;
      font-size: 44px;
      line-height: 56px;
      padding: 20px;
      text-transform: uppercase;
    }
  }

  &.magazine-item-focus {
    height: 400px;

    .magazine-item__title {
      padding: 20px 20px 10px;
      font-size: 36px;
      line-height: 36px;
    }
  }

  &.magazine-item-related {
    height: 200px;

    .magazine-item__title {
      font-size: 14px;
      line-height: 18px;
    }

    &.magazine-item-ricette {
      height: 400px;
  
      .magazine-item__title {
        background: transparent;
        font-family: 'Sue Ellen Francisco', cursive;
        font-size: 32px;
        line-height: 42px;
        padding: 10px;
        text-transform: uppercase;
      }
    }

  }
}

.magazine-article {
  .magazine-article-cover {
    display: block;
    position: relative;

    h1 {
      background-color: rgba(0,0,0,0.60);
      color: #fff;
      font-size: 30px;
      font-family: "Hind","Helvetica Neue",Helvetica,Arial,sans-serif;
      line-height: 36px;
      padding: 20px;
      display: block;
      position: absolute;
      bottom: 0; left: 0; right: 0;
      padding: 25px 25px 15px;
      margin: 0;
    }
  }
}

.content .magazine-article.magazine-article-ricette {
  h2 {
    font-family: 'Sue Ellen Francisco', cursive;
    font-size: 26px;
    line-height: 26px;
    margin: 16px 0 8px;
    text-transform: uppercase;
  }

  .well {
    min-height: 400px;
  }
}

.magazine-article-related {
  .h4 {
    background-color: #b4b4b4;
    color: #fff;
    font-weight: bold;
    margin: 0 0 20px;
    padding: 10px 10px 5px;
    text-align: center;
  }
}

.add-to-favourite,
.add-to-shopping-list,
.go-to-shopping-list,
.do-print {
  color: #6e6e6e;
  display: inline-block;
  font-size: 12px;
  line-height: 12px;
  margin-top: -10px;
  padding: 10px 0 8px 44px;
  position: relative;
  width: 150px;
  text-align: left;

  i {
    border: 2px solid #6e6e6e;
    border-radius: 40px;
    padding: 6px;
    position: absolute;
    left: 5px; top: 5px;
    min-height: 33px;
    min-width: 33px;
    text-align: center;
    font-size: 17px;
    padding: 6px;

    &.fa-clipboard:before,
    &.fa-print:before {
      content: "";
    }

    &.fa-clipboard {
      background: transparent url(../images/icon-clipboard.png) center center no-repeat;
    }

    &.fa-print {
      background: transparent url(../images/icon-print.png) center center no-repeat;
    }
  }

  &:hover {
    text-decoration: none;
  }
}

.magazine-article-share,
.magazine-article-share a {
  color: #6e6e6e;
}

@media print {
  .well {
    padding: 0 !important;
    min-height: 0 !important;
  }
  .col-sm-6 {
    width: 50%;
  }
}

@media (max-width: 767px) {
  .nav-pills-magazine {
    text-align: center;
    table-layout: none;
    >li {
      display: inline-block;
      width: 48% !important;
      a {
        display: block;
      }
    }
  }
  .scroll-loader strong:after, .scroll-loader strong:before, .click-loader strong:after, .click-loader strong:before {
    display: none;
  }
  .magazine-article .magazine-article-cover h1 {font-size: 22px; line-height: 22px; padding: 15px 15px 10px;}
  .magazine-article-share .text-right {
    text-align: left !important;
    margin-top: 20px;
  }
}