Created
March 26, 2018 08:01
-
-
Save DeveloperWilco/4898fd439bffe7ef652e9de6582d945b to your computer and use it in GitHub Desktop.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| // Backgrounds | |
| .row{ | |
| &.main-buttons{ | |
| background: $primary-background-color; | |
| margin-bottom: 70px; | |
| .blocks-container{ | |
| @include perfectloop( 3, 35, 'div' ); | |
| @include justify-content(center); | |
| } | |
| } | |
| &.home-products{ | |
| background: $primary-background-color; | |
| } | |
| } | |
| // Blocks | |
| .block{ | |
| &.title{ | |
| @include title; | |
| &.bold{ | |
| h1,h2,h3,h4,h5,h6{ | |
| font-weight: bold; | |
| } | |
| } | |
| } | |
| &.text{ | |
| @include text; | |
| &.no-margins{ | |
| p{ | |
| margin: 0; | |
| } | |
| } | |
| } | |
| &.btn, | |
| &.button{ | |
| a{ | |
| @include button; | |
| } | |
| &.huge{ | |
| margin: 15px 0; | |
| a{ | |
| width: 100%; | |
| padding: 20px 0; | |
| text-align: center; | |
| display: inline-block; | |
| font-size: 16px; | |
| line-height: 1; | |
| font-weight: 600; | |
| text-transform: uppercase; | |
| font-family: $primary-font; | |
| @include box-shadow( 2px 2px 6px #888 ); | |
| color: $huge-buttons-color; | |
| @include transition( 0.2s all ); | |
| background: $huge-buttons-background-color; | |
| &:hover{ | |
| background: $primary-color; | |
| color: #fff; | |
| } | |
| } | |
| } | |
| &.to-search{ | |
| margin-bottom: 30px; | |
| } | |
| } | |
| &.files{ | |
| a{ | |
| text-decoration: none; | |
| color: $primary-color; | |
| font-family: $primary-font; | |
| font-size: 16px; | |
| line-height: 20px; | |
| } | |
| } | |
| &.product-gallery{ | |
| box-sizing: border-box; | |
| padding: 0 60px 0 90px; | |
| img{ | |
| width: 100%; | |
| display: block; | |
| @include selectable; | |
| } | |
| #gallery-main{ | |
| margin-bottom: 10px; | |
| } | |
| .gallery-others{ | |
| @include perfectloop( 3, 5, '.item' ); | |
| .item{ | |
| @include flexbox; | |
| @include flex-wrap(wrap); | |
| @include align-items(center); | |
| cursor: pointer; | |
| margin-bottom: 10px; | |
| } | |
| } | |
| } | |
| &.single-image{ | |
| padding-left: 30px; | |
| box-sizing: border-box; | |
| @include clear; | |
| margin-bottom: 20px; | |
| img{ | |
| margin: 0; | |
| display: block; | |
| float: right; | |
| } | |
| } | |
| &.contact-form{ | |
| $label-width: 140px; | |
| form{ | |
| .form-row{ | |
| margin-bottom: 10px; | |
| @include clear; | |
| label{ | |
| display: block; | |
| @include clear; | |
| &.at-start{ | |
| @include align-items(flex-start); | |
| } | |
| .form-label{ | |
| float: left; | |
| width: $label-width; | |
| font-family: $primary-font; | |
| color: $primary-font-color; | |
| font-size: 16px; | |
| } | |
| .form-input{ | |
| float: left; | |
| width: calc( 100% - #{$label-width} ); | |
| input[type='text'], | |
| input[type='email'], | |
| textarea{ | |
| width: 100%; | |
| border: 1px solid darken( $input-border-color, 15 ); | |
| box-sizing: border-box; | |
| } | |
| textarea{ | |
| height: 165px; | |
| resize: vertical; | |
| } | |
| } | |
| p{ | |
| margin: 0; | |
| } | |
| .wpcf7-form-control-wrap{ | |
| display: block; | |
| } | |
| } | |
| input[type='submit']{ | |
| @include button; | |
| float: right; | |
| } | |
| } | |
| .wpcf7-not-valid-tip{ | |
| color: $form-error-color; | |
| font-family: $primary-font; | |
| } | |
| .wpcf7-response-output{ | |
| color: #fff; | |
| margin: 0; | |
| padding: 10px; | |
| border: none; | |
| box-sizing: border-box; | |
| line-height: 20px; | |
| font-family: $primary-font; | |
| font-size: 16px; | |
| &.wpcf7-validation-errors, | |
| &.wpcf7-acceptance-missing{ | |
| background: $form-error-color; | |
| } | |
| &.wpcf7-mail-sent-ok{ | |
| background: $primary-color; | |
| } | |
| } | |
| } | |
| } | |
| &.contact-map{ | |
| margin-top: 30px; | |
| } | |
| } | |
| // Block-groups | |
| .block-group{ | |
| $sidebar-width: 400px; | |
| $product-gallery-width: 450px; | |
| $text-images-width: 400px; | |
| $contact-form-width: 50%; | |
| &.mainbar{ | |
| width: calc( 100% - #{$sidebar-width} ); | |
| float: left; | |
| margin-bottom: 30px; | |
| max-width: 100%; | |
| } | |
| &.sidebar{ | |
| width: $sidebar-width; | |
| float: left; | |
| max-width: 100%; | |
| margin-bottom: 30px; | |
| } | |
| &.product-gallery-group{ | |
| float: left; | |
| width: $product-gallery-width; | |
| // 10 from images | |
| margin-bottom: 20px; | |
| max-width: 100%; | |
| } | |
| &.product-main{ | |
| float: left; | |
| width: calc( 100% - #{$product-gallery-width} ); | |
| margin-bottom: 30px; | |
| max-width: 100%; | |
| } | |
| &.text-group{ | |
| float: left; | |
| width: calc( 100% - #{$text-images-width} ); | |
| margin-bottom: 30px; | |
| max-width: 100%; | |
| &.full-text{ | |
| width: 100%; | |
| & + .images-group{ | |
| display: none; | |
| } | |
| } | |
| } | |
| &.images-group{ | |
| float: left; | |
| // 20 from images | |
| margin-bottom: 10px; | |
| width: $text-images-width; | |
| max-width: 100%; | |
| } | |
| &.contact-group{ | |
| width: #{100% - $contact-form-width}; | |
| float: left; | |
| box-sizing: border-box; | |
| padding-right: 20px; | |
| max-width: 100%; | |
| margin-bottom: 30px; | |
| } | |
| &.contact-form-group{ | |
| width: $contact-form-width; | |
| float: left; | |
| box-sizing: border-box; | |
| padding-left: 20px; | |
| margin-bottom: 30px; | |
| max-width: 100%; | |
| } | |
| } | |
| // Loops | |
| .block{ | |
| &.home-products-loop{ | |
| margin-top: 60px; | |
| padding: 30px 0 0px; | |
| box-sizing: border-box; | |
| @include perfectloop( 3, 15 ); | |
| article{ | |
| margin-bottom: 40px; | |
| box-sizing: border-box; | |
| border: 1px solid $products-border-color; | |
| background: #fff; | |
| &:hover{ | |
| .image-container{ | |
| &:after{ | |
| background: rgba( 255, 255, 255, 0.3 ); | |
| } | |
| } | |
| } | |
| .cover{ | |
| z-index: 2; | |
| } | |
| .image-container{ | |
| position: relative; | |
| &::after{ | |
| content: ''; | |
| width: 100%; | |
| height: 100%; | |
| position: absolute; | |
| top: 0; | |
| left: 0; | |
| bottom: 0; | |
| right: 0; | |
| @include transition( 0.4s all ); | |
| } | |
| img{ | |
| display: block; | |
| height: 190px; | |
| width: 100%; | |
| } | |
| .img-as-bg{ | |
| height: 190px; | |
| width: 100%; | |
| } | |
| } | |
| .term-title{ | |
| text-align: center; | |
| margin: 20px; | |
| h1,h2,h3,h4,h5,h6{ | |
| margin: 0; | |
| line-height: 1; | |
| font-size: 14px; | |
| font-family: $primary-font; | |
| color: $products-title-color; | |
| } | |
| } | |
| } | |
| } | |
| &.the-loop{ | |
| $loop-img-width: 90px; | |
| article{ | |
| margin-bottom: 10px; | |
| @include matchheight; | |
| min-height: $loop-img-width; | |
| &:nth-of-type(odd){ | |
| background: $primary-background-color; | |
| } | |
| .img-as-bg, | |
| .img-place{ | |
| width: $loop-img-width; | |
| min-height: $loop-img-width; | |
| } | |
| .term-name{ | |
| @include align-self(center); | |
| width: calc( 100% - #{$loop-img-width} ); | |
| box-sizing: border-box; | |
| padding: 0 20px; | |
| h1,h2,h3,h4,h5,h6{ | |
| margin: 0; | |
| font-family: $primary-font; | |
| font-size: 16px; | |
| line-height: 20px; | |
| } | |
| } | |
| } | |
| } | |
| &.category-list{ | |
| @include clear; | |
| // All items | |
| ul{ | |
| width: 100%; | |
| float: left; | |
| margin: 0; | |
| padding: 0; | |
| list-style: none; | |
| font-size: 14px; | |
| font-family: $primary-font; | |
| li{ | |
| @include clear; | |
| margin-bottom: 10px; | |
| a{ | |
| float: left; | |
| width: calc( 100% - 20px ); | |
| line-height: 1; | |
| text-decoration: none; | |
| color: $primary-color; | |
| font-family: $primary-font; | |
| } | |
| .toggle{ | |
| line-height: 1; | |
| width: 20px; | |
| float: left; | |
| @include transition( 0.2s all ); | |
| cursor: pointer; | |
| @include icon( 'chevron-right' ){ | |
| color: $primary-color; | |
| font-size: 16px; | |
| }; | |
| &.toggle-active{ | |
| @include transform( rotate(90deg) translate( 25%, 40% ) ); | |
| } | |
| } | |
| ul{ | |
| padding-left: 10px; | |
| box-sizing: border-box; | |
| display: none; | |
| margin-top: 5px; | |
| } | |
| } | |
| } | |
| // Targeted items | |
| // > ul{ | |
| // margin: 0; | |
| // padding: 0; | |
| // list-style: none; | |
| // > li{ | |
| // } | |
| // // Sub | |
| // ul{ | |
| // padding:0; | |
| // padding-left: 10px; | |
| // box-sizing: border-box; | |
| // display: none; | |
| // li{ | |
| // a{ | |
| // text-decoration: none; | |
| // } | |
| // } | |
| // } | |
| // } | |
| } | |
| } | |
| // Carousels | |
| .block{ | |
| &.brands-carousel{ | |
| box-sizing: border-box; | |
| padding: 30px 0; | |
| position: static; | |
| article{ | |
| img{ | |
| height: 60px; | |
| width: auto; | |
| } | |
| } | |
| .owl-nav{ | |
| $px-from-sides: 15px; | |
| $fa-font-size: 55px; | |
| > div{ | |
| position: absolute; | |
| top: 50%; | |
| @include transform( translateY( -50% ) ); | |
| &.owl-prev{ | |
| left: $px-from-sides; | |
| @include icon( 'chevron-left' ){ | |
| font-size: $fa-font-size; | |
| color: $primary-color; | |
| } | |
| } | |
| &.owl-next{ | |
| right: $px-from-sides; | |
| @include icon( 'chevron-right' ){ | |
| font-size: $fa-font-size; | |
| color: $primary-color; | |
| } | |
| } | |
| } | |
| } | |
| } | |
| } | |
| // Newsletter | |
| .news-signup{ | |
| .form-row{ | |
| @include matchheight; | |
| @include justify-content(flex-end); | |
| label{ | |
| display: none; | |
| font-size: 16px; | |
| font-family: $primary-font; | |
| margin: 0 0 5px; | |
| line-height: 20px; | |
| color: $primary-font-color; | |
| } | |
| } | |
| input[type='email'], | |
| input[type='text']{ | |
| border: 1px solid $input-border-color; | |
| box-sizing: border-box; | |
| padding: 10px; | |
| height: 40px; | |
| font-size: 14px; | |
| font-family: $primary-font; | |
| width: 300px; | |
| max-width: calc( 100% - 110px ); | |
| &::placeholder{ | |
| color: $newsletter-color; | |
| } | |
| } | |
| input[type='submit']{ | |
| color: #fff; | |
| font-size: 14px; | |
| font-family: $primary-font; | |
| font-weight: 700; | |
| background: $primary-color; | |
| width: 110px; | |
| max-width: 100%; | |
| @include appearance; | |
| } | |
| } | |
| // Breadcrumbs | |
| #minimal-breadcrumbs{ | |
| font-size: 12px; | |
| font-family: $primary-font; | |
| line-height: 16px; | |
| margin: 10px 0 40px; | |
| li{ | |
| &.item{ | |
| color: $primary-breadcrumbs-color; | |
| a{ | |
| color: $primary-breadcrumbs-color; | |
| text-decoration: none; | |
| } | |
| &.current{ | |
| color: $active-breadcrumbs-color; | |
| a{ | |
| color: $active-breadcrumbs-color; | |
| } | |
| } | |
| } | |
| &.separator{ | |
| color: $primary-breadcrumbs-color; | |
| } | |
| } | |
| } | |
| // Pagination | |
| .minimal-pagination{ | |
| .page-of{ | |
| display: none!important; | |
| } | |
| .page-numbers{ | |
| background: #fff; | |
| font-size: 14px; | |
| font-family: $primary-font; | |
| text-decoration: none; | |
| box-sizing: border-box; | |
| padding: 2px 5px; | |
| color: $primary-color; | |
| &.current{ | |
| background: $primary-color; | |
| color: #fff; | |
| } | |
| } | |
| } | |
| // Cookie message | |
| body { | |
| .cc_banner-wrapper { | |
| .cc_container { | |
| a.cc_btn { | |
| background: $primary-color; | |
| color: #fff; | |
| border-radius: 0; | |
| font-size: 14px; | |
| } | |
| p.cc_message { | |
| color: $primary-font-color; | |
| font-family: $primary-font; | |
| font-size: 14px; | |
| a.cc_more_info { | |
| } | |
| } | |
| } | |
| } | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment