Merge pull request #5 from maptiler/WM-320_upgrade_to_bootstrap_5

WM-320 upgrade to bootstrap 5

Author: daliborjanak

base.scss

@@ -1,45 +1,9 @@
-@import "functions";
-@import "variables";
-@import "mixins";
-@import "root";
-@import "reboot";
-@import "type";
-@import "images";
-@import "code";
-@import "grid";
-@import "tables";
-@import "forms";
-@import "buttons";
-@import "transitions";
-@import "dropdown";
-@import "button-group";
-@import "input-group";
-@import "custom-forms";
-@import "nav";
-@import "navbar";
-@import "card";
-@import "breadcrumb";
-@import "pagination";
-@import "badge";
-@import "jumbotron";
-@import "alert";
-@import "progress";
-@import "media";
-@import "list-group";
-@import "close";
-@import "toasts";
-@import "modal";
-@import "tooltip";
-@import "popover";
-@import "carousel";
-@import "spinners";
-@import "utilities";
-@import "print";
+// Must add bootstrap imports before MapTiler ones:
 
-//maptiler styles
+// MapTiler Imports
 @import "components/icon.scss";
 @import "components/map.scss";
-@import "components/mt-web-components.scss"; //these are used on maptiler-web and miniweb only
+@import "components/mt-web-components.scss";
 @import "components/rectangles.scss";
 @import "components/navigation.scss";
 @import "components/popup.scss";
@@ -50,7 +14,6 @@
 @import "components/pricing-table.scss";
 @import "components/loupe.scss";
 @import "components/double-number-list.scss";
-@import "components/skew.scss";
 @import "components/video-player.scss";
 @import "components/fix.scss";
 @import "components/utilities.scss";

components/custom-controls.scss

@@ -67,6 +67,10 @@ ul, ol{
 .form-control{
   height: auto;
 }
+p, h1, h2, h3, h4, h5, h6, {
+  margin-top: $headings-margin-bottom;
+  margin-bottom: $headings-margin-bottom;
+}
 //  btn-stroke
 @each $color, $value in $theme-colors {
   .btn-outline-#{$color} {
@@ -106,3 +110,15 @@ ul, ol{
     [type=button], [type=reset], [type=submit], button {
   -webkit-appearance: none !important;
   }
+
+  .form-switch {
+    .form-check-input {
+      background-color: $gray-400;
+      &:checked {
+        background-color: $primary;
+      }
+      &.switch-equal{
+        background-color: $primary;
+      }
+    }
+  }

components/fix.scss

@@ -49,6 +49,12 @@
         background-image: url("#{$social-icon}medium-white.svg");
       }
     }
+    &.github {
+      color: #fff;
+      &:before {
+        background-image: url("#{$social-icon}github-white.svg");
+      }
+    }
 
     &:not(.colored){
       &:before{

components/icon.scss

@@ -1,5 +1,4 @@
 //map
-
 .map-fullscreen {
   position: absolute;
   top: 0;
@@ -140,7 +139,7 @@
   overflow-y: auto;
   position: fixed;
   left: 15px;
-  top: 190px;
+  top: 180px;
   z-index: 86;
   width: auto;
   height: auto;

components/map.scss

@@ -231,75 +231,46 @@
   .banner-martin {
       bottom: -72px;
   }
-
-  .carousel-control-next,
-  .carousel-control-prev {
-    @include media-breakpoint-down(lg){
-      width: 20%;
-    }
-    &:after {
-      @include media-breakpoint-down(lg){
-        display: none;
+// home Carousel
+  #homeCarousel{
+    .home-pagination{
+      justify-content: flex-start;
+      padding: 0;
+        .home-pagination-btn{
+          margin: 0 6px;
+          border: 0;
+          width: 8px;
+          height: 8px;
+          border-radius: 50%;
+          padding: 0;
+          color: currentColor;
+          opacity: .3;
+          &.is-active{
+            opacity: 1;
+          }
       }
     }
   }
-  .carousel-control-prev-icon,
-  .carousel-control-next-icon {
-    width: 50px;
-    height: 50px;
-    background-color: white;
-    border-radius: 50%;
-    box-shadow: $box-shadow;
-    @include media-breakpoint-down(lg){
-      display: none;
-    }
-  }
-  .carousel-inner {
-    @include media-breakpoint-up(lg){
-      padding: 0 55px;
-    }
-  }
+.mt-slide-arrow{
+  color: $primary;
+  background: white;
+  border: 0;
+  border-radius: 50%;
+  width: 50px;
+  height: 50px;
+  box-shadow: $box-shadow;
+  top: 50%;
+  transform: translateY(-50%);
+  position: absolute;
+  z-index: 1010;
 
-
-// homepage carousel
-#HomeSlide {
-  .carousel-indicators {
-    margin: 0;
-    bottom: -50px;
-    @include media-breakpoint-up(sm) {
-      right: unset;
-      bottom: 20px;
-    }
-    & .active {
-      opacity: 1;
-    }
-    li {
-      background-color: currentcolor;
-      width: 8px;
-      height: 8px;
-      margin: 0 6px;
-      border-radius: 50%;
-      opacity: 0.3;
-    }
+  &.mt-slide-prev{
+    left: -25px;
   }
-  .carousel-item {
-    &.active {
-      opacity: 1;
-      transition: 0.25s;
-    }
-    opacity: 0;
-    transform: none;
-  }
-  .carousel-item.active.carousel-item-left,
-  .carousel-item.active.carousel-item-right {
-    opacity: 0;
-  }
-  .carousel-item.carousel-item-next,
-  .carousel-item.carousel-item-prev {
-    opacity: 0;
+  &.mt-slide-next{
+    right: -25px;
   }
 }
-
 // misc
 .customer-logo-link{
   color: #AEB6C7;

components/mt-web-components.scss

@@ -237,6 +237,9 @@
       color: $dark;
       display: block;
       margin: 10px 0;
+      &:hover{
+        color: $primary;
+      }
     }
   }
   .mt-copyright{
@@ -254,7 +257,7 @@
   .nav-secondary-link {
     @extend .nav-item;
     @extend .nav-link;
-    margin: 0 10px;
+    margin: 0 5px;
     font-weight: $font-weight-bold;
     font-size: 14px;
     text-transform: uppercase;
@@ -283,3 +286,22 @@
     }
   }
 }
+// product border colors
+.border-nav-cloud{
+  border-color: #B5D4FA !important;
+}
+.border-nav-desktop{
+  border-color: #D1C4E9 !important;
+}
+.border-nav-engine{
+  border-color: #F1BB93 !important;
+}
+.border-nav-mobile{
+  border-color: #B5F8FD !important;
+}
+.border-nav-server{
+  border-color: #FBB8BB !important;
+}
+.border-nav-data{
+  border-color: #B9E8B0 !important;
+}

components/navigation.scss

@@ -54,6 +54,7 @@
 
     .plans-table {
       width: 100%;
+      position: relative;
       tbody{
         tr:last-child{
           td:last-child{
@@ -78,7 +79,7 @@
       z-index: 2;
       background: $primary;
       color: white;
-      top: -25px;
+      top: -45px;
       display: block;
       padding: 10px 56px;
       border-top-left-radius: 6px;