base.scss

base.scss | 9.2 KB | Satir: 0 | scss Geri

@import 'variable';
@import 'mixin';

@import url('https://fonts.googleapis.com/css?family=Arimo:400,400i,700,700i');
@import url('https://fonts.googleapis.com/css?family=Heebo:400,500,700,800,900');
@import url('https://fonts.googleapis.com/css?family=Merriweather:400,400i,700,700i,900,900i');
/* ============================== */

/* Typography
================================================== */

body {
 
   color: #8a8a8a;
   -webkit-font-smoothing: antialiased;
   -moz-osx-font-smoothing: grayscale;
   overflow-x: hidden;
   font-size: 14px;
   line-height: 24px;
   font-family: $heebo;
}
.body-color{
    background: #f0f1f4;
}
p, label, b,{
    font-family: $arimo;
}
p{
    margin-bottom: 1rem;
    font-size: 15px;
    color: #232323;
}

h1,
h2,
h3,
h4,
h5,
h6 {
   font-weight: 700;
   color: #222222;
   font-family: $heebo;
}

h1 {
   font-size: 36px;
}
h2 {
   font-size: 28px;
}

h3 {
   font-size: 20px;
}

h4 {
   font-size: 16px;
}

/* Global styles
================================================== */

a,
a:active,
a:focus,
a:hover,
a:visited {
   text-decoration: none;
   outline: 0 solid;

}
a{
    transition: all ease 500ms;
}

a:hover {
   color: $primary-color;
}
.btn{
    font-size: 13px;
    text-transform: uppercase;
    color: $white-color;
    cursor: pointer;
    outline: none;
    border: none;
    padding: 13px 37px;
    border-radius: 0;
    font-weight: 600;
    &.btn-primary{
        background: #e91e63;
    }
    &:hover{
        background: #222;
    }
}
button:focus,
.btn:focus {
   outline: none;
   -webkit-box-shadow: none;
   box-shadow: none !important;
}
ul{
    padding: 0;
    margin: 0;
    list-style: none;
}

section, .section{
    padding: 15px 0;
}
.section-bg{
    background: #f7f7f7;
}

.pl-0{
    padding-left: 0;
}
.pr-0{
    padding-right: 0;
}
.pb-0{
    padding-bottom: 0;
}
.pt-0{
    padding-top: 0;
}
.p-0{
    padding: 0;
}
.pr-10{
    padding-right: 10px;
}
.p-30{
    padding: 30px 0;
}
.p-50{
    padding: 50px 0;
}
.p-60{
    padding: 60px 0;
}
.pt-110{
    padding-top: 110px;
}
.p-10{
    padding: 0 10px;
}
.plr-30{
    padding: 0 30px;
}
.plr-1{
    padding: 0 5px;
}
.plr-10{
    padding: 0 10px;
}
.p-100{
    padding: 100px 0;
}
.mt-15{
    margin-top: 15px;
}
.mt-50{
    margin-top: 50px;
}
.mb-10{
    margin-bottom: 10px;
}
.mb-20{
    margin-bottom: 20px;
}
.mb-15{
    margin-bottom: 15px;
}
.mb-25{
    margin-bottom: 25px;
}
.mb-30{
    margin-bottom: 30px !important;
}
.mb-35{
    margin-bottom: 35px;
}
.mb-40{
    margin-bottom: 40px;
}
.mb-45{
    margin-bottom: 45px;
}
.mb-50{
    margin-bottom: 50px;
}
.mb-60{
    margin-bottom: 60px;
}
.mr--20{
    margin-right: -20px;
}

.post-cat{
    background: $blue-color;
}
/*Text color --*/
.green-color{
    color: $green-color;
}
.blue-color{
    color: $blue-color;
}
.blue-dark-color{
    color: $blue-dark-color
}
.bl-light-color{
    color: $blue-light-color;
}
.pink-color{
    color: $pink-color;
}
.yellow-color{
    color: $yellow-color;
}
.purple-color{
    color: $purple-color !important;
}
/*---- Background color --*/
.ts-green-bg{
    background:$green-color;
}
.ts-blue-bg{
    background: $blue-color;
}
.ts-blue-dark-bg{
    background: $blue-dark-color;
}
.ts-blue-light-bg{
    background:  $blue-light-color;
}
.ts-pink-bg{
    background: $pink-color;
}
.ts-yellow-bg{
    background: $yellow-color;
}
.ts-orange-bg{
    background: $orange-color;
}
.ts-purple-bg{
    background: $purple-color;
}
.ts-white-bg{
    background: $white-color;
}
.ts-blue-light-heighlight{
    background: $blue-light-color;
}

/* social color */
.ts-facebook{
    a{
     i{
      background: $facebook;
     }
    }
  }
  .ts-google-plus{
    a{
      i{
        background: $google-plus;
      }
    }
  }
  .ts-twitter{
    a{
      i{
        background: $twitter;
      }
    }
  }
  .ts-pinterest{
    a{
      i{
        background: $pinterest;
      }
    }
  }
  .ts-linkedin{
    a{
      i{
        background: $linkedin;
      }
    }
  }
  .ts-youtube{
    a{
     i{
      background: $youtube;
     }
    }
  }

/* defailt title setting */
.ts-title{
    font-size: 20px;
    font-weight: 500;
    margin-bottom: 25px;
    position: relative;
    &:before{
        position: absolute;
        left: -30px;
        top: 0;
        width: 3px;
        height: 100%;
        content: '';
        background: $primary-color;
    }
    &.white{
        color: $white-color;
    }
}

.post-title{
    font-size: 15px;
    font-weight: 500;
    font-family: $heebo;
    color: #232323;
    margin-bottom: 5px;
    &.lg{
        font-size: 36px;
        margin-bottom: 17px;
    }
    &.ex-lg{
        font-weight: 700;
        font-size: 44px;
        color: #212121;
        margin-bottom: 15px;
    }
    &.md{
        font-size: 20px;
        line-height: 24px;
        margin-bottom: 10px;
    }
    &.md-title{
        font-size: 24px;
        margin-bottom: 10px;
    }
    &.large{
        font-size: 30px;
        margin-bottom: 15px;
        font-weight: 500;
        
    }
    a{
        color: #222222;
        &:hover{
            color: $primary-color;
        }
        
    }
}

.border-top{
    border-top: 1px solid #e9e9e9;
    &.bar1{
        border-color: #4d4d70;
    }
}

#featured-slider{
    .owl-nav{
        position: absolute;
        right: 0;
        top: 0;
        .owl-prev{
            &:before{
                position: absolute;
                right: 0;
                top: 0px;
                bottom: 0;
                width: 1px;
                height: 15px;
                background: #406a91;
                content: '';
                margin: auto;
            }
        }
        .owl-prev,
        .owl-next{
            font-size: 14px;
            background: #00386c;
            color: $white-color;
            width: 28px;
            height: 28px;
            display: inline-block;
            position: relative;
            margin: 0;
        }
    }
}

/* post meta --*/
.post-meta-info{
    margin-bottom: 10px;
    padding-left: 0;
    li{
      font-size: 12px;
      display: inline-block;
      position: relative;
      margin-right: 28px;
      @include transition();
  
      i{
        margin-right: 6px;
        font-size: 15px;
      }
      a{
        color: #a9a9a9;
        @include transition();
        &:hover{
          color: $primary-color;
        }
       &.post-cat{
           margin-left: 0;
           color: $white-color;
       }
      }
      &.author{
        padding-left: 40px;
      
        img{
          position: absolute;
          left: 0;
          top: 0;
          width: 25px;
          height: 25px;
        @include border-radius(50%);
        }
      }
      &:last-child{
        margin-right: 0;
      }
      &.active{
          color: $primary-color;
      }
    }
  }

/*- blocqoute */
  blockquote{
      font-size: 24px;
      font-weight: 700;
      font-style: italic;
      font-family: $arimo;
      color: #232323;
      line-height: 36px;
      padding: 0 0 0 75px;
      position: relative;
      margin: 50px 50px;
      z-index: 1;

&:before{
        content: '\f10d';
        font-family: 'Fontawesome';
        position: absolute;
        left: 0;
        font-size: 96px;
        background: #f0f1f4;
        display: block;
        /* width: 100px; */
        height: 125%;
        color: #fff;
        line-height: 102px;
        padding: 0 37px 0 0;
        font-style: normal;
        z-index: -1;
        top: 0;
        bottom: 0;
        margin: auto;

}
      cite{
          font-weight: 700;
          float: right;
          position: relative;
          font-size: 16px;
          &:after{
              position: absolute;
              right: -50px;
              top: 0;
              width: 40px;
              height: 2px;
              background: $primary-color;
              content: '';
              bottom: 0;
              margin: auto;

}
      }
  }

/*------------------ owl carosel ---*/
.owl-nav {
    position: absolute;
    right: 0;
    top: -50px;
    .owl-next,
    .owl-prev{
        margin: 0 0 0 20px;
        display: inline-block;
        position: relative;
        i{
            font-size: 20px;
            line-height: 27px;
        }
        &:hover{
            i{
                color: $primary-color;
            }
        }
    }
    .owl-prev{
        &:before{
            position: absolute;
            right: -11px;
            top: 0px;
            width: 1px;
            height: 15px;
            background: #ddd;
            content: '';
            bottom: 0;
            margin: auto;
            display: block;
            text-align: center;
        }
    }
}

.owl-dots {
    position: absolute;
    right: 0;
    top: -49px;
    z-index: 1;
    .owl-dot{
      span{
        width: 5px;
        height: 5px;
       border-radius: 50%;
        background: $primary-color;
        display: inline-block;
        opacity: 1;
        margin: 0 3px;
        opacity: .5;
      }
      &.active{
       span{
        height: 10px;
        width: 10px;
        border-radius: 50%;
        position: relative;
        top: 2px;
       opacity: 1;
       }
      }
    }
  }

#more-news-slider{
    .owl-dots{
        .owl-dot{
            span{
                background: $white-color;
            }
        }
    }
  }

Ctrl+S ile kaydet