[TASK] use bootstrap variables in custom LESS files (#294)

t3kit · Oct 31, 2017 · 7a89a3d · 7a89a3d
1 parent f22465d
commit 7a89a3d
Show file tree

Hide file tree

Showing 26 changed files with 142 additions and 121 deletions.
diff --git a/felayout_t3kit/dev/styles/customVariables.less b/felayout_t3kit/dev/styles/customVariables.less
@@ -1,3 +1,8 @@
+// Custom media queries breakpoints
+@screen-xs--custom: 520px;
+@screen-md--custom: 1090px;
+@screen-lg--custom: 1300px;
+
 // Primary color
 @main-color:                    #50b4d8; //#288FB4
 
@@ -10,9 +15,10 @@
 @main-link-hover-color:         tint(@main-color, 30%);
 
 // HEADER
-@header-top-height:             50px;
-@header-top-bg-color:           @main-body-bg;
-@header-top-color:              fade(@main-text-color, 50%);
+@header-top-height:              50px;
+@header-top-bg-color:            @main-body-bg;
+@header-top-color:               fade(@main-text-color, 50%);
+@header-top-search-border-color: @border-color;
 
 @header-middle-height:          110px;
 @header-middle-bg-color:        @main-body-bg;
@@ -36,14 +42,10 @@
 @nav-link-active-color:         @main-color;
 @nav-link-active-hover-color:   @nav-link-active-color;
 @nav-link-hover-background:     tint(@nav-background-color, 10%);
-
 @nav-link-arrow-color:          fade(@nav-link-color, 50%);
-
 @nav-background-color:          darken(@main-text-color, 32%);
-
 @nav-search-btn-color:          fade(@main-color, 50%);
-
-@mobile-nav-toggle-btn:        left;
+@mobile-nav-toggle-btn:         left;
 
 // Social icons
 @social-icons-bg-color:         @main-color;//lighten(@main-text-color, 30%);
@@ -77,6 +79,19 @@
 @custom-screen-xl:              1366px;
 @custom-screen-xxl:             1920px;
 
+// Bootstrap Carousel
+@carousel-indicator-bg:         @main-body-bg;
+
+// Logo Carousel
+@logo-carousel-control-color:   lighten(@main-text-color, 10%);
+
+// Quote
+@quote-footer-title-color:      @main-text-color;
+
+// Simple Lightbox
+@sl-overlay-background:         darken(@main-text-color, 30%);
+@sl-navigation-color:           @main-body-bg;
+
 // =========================================================
 // BOOTSTRAP Variables  ====================================
 // =========================================================

diff --git a/felayout_t3kit/dev/styles/main/appearanceTab/appearance/general/largeHeader.less b/felayout_t3kit/dev/styles/main/appearanceTab/appearance/general/largeHeader.less
@@ -10,7 +10,7 @@
     }
 }
 
-@media (max-width: 768px) {
+@media (max-width: @screen-xs-max) {
     .large-header .hero-image__caption-header {
         font-size: @font-size-h2 * 0.86;
     }

diff --git a/felayout_t3kit/dev/styles/main/contentElements/bootstrapCarousel.less b/felayout_t3kit/dev/styles/main/contentElements/bootstrapCarousel.less
@@ -197,7 +197,7 @@
     }
 
     > li {
-        background-color: #fff;
+        background-color: @carousel-indicator-bg;
         width: 17px;
         height: 17px;
         margin-left: 12px;

diff --git a/felayout_t3kit/dev/styles/main/contentElements/heroImage.less b/felayout_t3kit/dev/styles/main/contentElements/heroImage.less
@@ -97,7 +97,7 @@
     display: none;
 }
 
-@media (min-width: 768px) {
+@media (min-width: @screen-sm-min) {
     .hero-image__caption {
         padding: 20px 60px;
     }
@@ -111,7 +111,7 @@
     }
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .slider-container._full-width .swiper-button-next,
     .slider-container._full-width .swiper-button-prev {
         width: auto;

diff --git a/felayout_t3kit/dev/styles/main/contentElements/imageTextLink.less b/felayout_t3kit/dev/styles/main/contentElements/imageTextLink.less
@@ -13,7 +13,7 @@
     margin: 25px 0 20px;
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link {
         margin: 50px 0 40px;
     }
@@ -134,7 +134,7 @@
     display: none;
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-1:after {
         opacity: 0;
         -webkit-transform: translate3d(0, 80%, 0);
@@ -157,7 +157,7 @@
     transform: translate3d(0, -90%, 0);
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-1 .img-text-link__header {
         color: @main-color;
         -webkit-transform: translate3d(0, -50%, 0);
@@ -177,7 +177,7 @@
     transform: translate3d(0, -20%, 0);
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-1 .img-text-link__p {
         opacity: 0;
         -webkit-transform: translate3d(0, 0, 0);
@@ -241,7 +241,7 @@
     transform: translate3d(0, -70px, 0);
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-2 .img-text-link__img {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
@@ -262,7 +262,7 @@
     transform: translate3d(0, -70px, 0);
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-2 .img-text-link__header {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
@@ -287,7 +287,7 @@
     border-bottom: 4px solid @main-color;
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-2 .img-text-link__p {
         -webkit-transform: scaleY(0);
         transform: scaleY(0);
@@ -365,7 +365,7 @@
     }
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-3:before {
         background: fade(@main-color, 20%);
     }
@@ -384,7 +384,7 @@
     transition: all 0.3s ease;
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-3 .img-text-link__img {
         -webkit-transform: scale(1.05);
         transform: scale(1.05);
@@ -415,7 +415,7 @@
     z-index: 3;
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-3 .img-text-link__p {
         opacity: 0;
     }
@@ -486,7 +486,7 @@
     transition: all 0.2s;
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-4:after {
         opacity: 0;
         -webkit-transform: translate3d(0, 80%, 0);
@@ -509,7 +509,7 @@
     transform: translate3d(0, -70%, 0);
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-4 .img-text-link__header {
         color: @main-body-bg;
         -webkit-transform: translate3d(0, -60%, 0);
@@ -529,7 +529,7 @@
     transform: translate3d(0, -100%, 0);
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-4 .img-text-link__p {
         opacity: 0;
         -webkit-transform: translate3d(0, 0, 0);
@@ -593,7 +593,7 @@
     transform: translate3d(0, -70px, 0);
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-5 .img-text-link__img {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
@@ -614,7 +614,7 @@
     transform: translate3d(0, -70px, 0);
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-5 .img-text-link__header {
         -webkit-transform: translate3d(0, 0, 0);
         transform: translate3d(0, 0, 0);
@@ -639,7 +639,7 @@
     border-bottom: 4px solid @main-body-bg;
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-5 .img-text-link__p {
         -webkit-transform: scaleY(0);
         transform: scaleY(0);
@@ -702,7 +702,7 @@
     }
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-6:after {
         background: fade(@main-color, 20%);
     }
@@ -735,7 +735,7 @@
     transform: translate3d(0, 100%, 0);
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-6 .img-text-link__p {
         opacity: 0;
         -webkit-transform: translate3d(0, 100%, 0) scale(0.9);
@@ -784,7 +784,7 @@
     }
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-6 .img-text-link__link:before {
         width: 0;
         left: 0;
@@ -850,7 +850,7 @@
     }
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-7:after {
         -webkit-transform: scale(1.2);
         transform: scale(1.2);
@@ -873,7 +873,7 @@
     transition: all 0.3s ease;
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-7 .img-text-link__header {
         -webkit-transform: translate3d(0, -100%, 0) scale(1);
         transform: translate3d(0, -100%, 0) scale(1);
@@ -893,7 +893,7 @@
     transition: all 0.3s ease;
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-7 .img-text-link__p {
         opacity: 0;
         -webkit-transform: scale(1.5);
@@ -948,7 +948,7 @@
     box-shadow: 0 3px 30px @main-text-color;
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-8 {
         box-shadow: 0 3px 30px fade(@main-text-color, 0%);
     }
@@ -986,7 +986,7 @@
     transform: translate3d(0, 100%, 0);
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-8 .img-text-link__p {
         -webkit-transform: translate3d(0, 100%, 0) scale3d(0.7, 0.7, 1);
         transform: translate3d(0, 100%, 0) scale3d(0.7, 0.7, 1);
@@ -1016,7 +1016,7 @@
     box-shadow: 0 3px 30px @main-text-color;
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-8:hover .img-text-link__img {
         -webkit-transform: scale3d(1.05, 1.05, 1);
         transform: scale3d(1.05, 1.05, 1);
@@ -1078,7 +1078,7 @@
     z-index: 5;
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-9 .img-text-link__p {
         -webkit-transform: translate3d(-10px, 100%, 0);
         transform: translate3d(-10px, 100%, 0);
@@ -1095,7 +1095,7 @@
     max-width: none;
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-9 .img-text-link__img {
         width: calc(~"100% + 30px");
         -webkit-transform: translateX(-30px);
@@ -1152,7 +1152,7 @@
     }
 }
 
-@media (min-width: 992px) {
+@media (min-width: @screen-md-min) {
     .img-text-link._hover-9 .img-text-link__link:after {
         -webkit-transform: translateX(-20px);
         transform: translateX(-20px);

diff --git a/felayout_t3kit/dev/styles/main/contentElements/logoCarousel.less b/felayout_t3kit/dev/styles/main/contentElements/logoCarousel.less
@@ -48,7 +48,7 @@
     background: none;
     .icons();
 
-    color: #999;
+    color: @logo-carousel-control-color;
     -moz-osx-font-smoothing: grayscale;
     height: auto;
     margin-top: -15px;

diff --git a/felayout_t3kit/dev/styles/main/contentElements/parallax.less b/felayout_t3kit/dev/styles/main/contentElements/parallax.less
@@ -7,7 +7,7 @@
     margin: 0 auto;
 }
 
-@media (min-width: 480px) {
+@media (min-width: @screen-xs-min) {
     .no-touch.nonIE .parallax-video {
         background-image: none !important;
     }

diff --git a/felayout_t3kit/dev/styles/main/contentElements/quote.less b/felayout_t3kit/dev/styles/main/contentElements/quote.less
@@ -16,7 +16,7 @@
 }
 
 .quote__footer-title {
-    color: #646464;
+    color: @quote-footer-title-color;
 }
 
 .quote__body-p {
@@ -48,7 +48,7 @@
     font-size: 42px;
 }
 
-@media (min-width: 768px) {
+@media (min-width: @screen-sm-min) {
     .quote__body-p {
         font-size: 17px;
     }