Merge branch 'feature/ISTWCMS-4816-m26lebla-image-gallery-appearance' into '3.0.x'

ISTWCMS-4816: css for presentation layer of image gallery in slider view

See merge request !146

source/_patterns/03-layouts/carousel/_carousel.scss

@@ -3,16 +3,40 @@
   width: 100%;
 
 }
+.owl-carousel.owl-theme{
+  display:flex !important;
+  flex-flow: column;
+  .owl-dots{
+    margin-bottom:gesso-spacing(sm);
+    .owl-dot {
+      &:hover{
+        span {
+          background:$button-background-color !important;
+          color: $button-background-color !important;
+        }
+      }
+      &.active{
+        span {
+          background:$button-background-color !important;
+          color: $button-background-color !important;
+        }
+      }
+    }
+  }
+}
 .owl-stage-outer{
   margin-bottom: 1rem;
+  order:1
 }
 // style the carousel buttons
 .uw-owl-nav{
+
   &.disabled{
     display:none;
   }
   display:flex;
   justify-content: center;
+  order:3;
   button {
     background:$button-background-color-hover;
     color: gesso-brand(org-default,uw-black,lvl3) ;
@@ -39,6 +63,7 @@
   }
 }
 .owl-dots{
+  order:2;
   &.disabled{
     display:none;
   }
@@ -47,6 +72,7 @@
     color: gesso-brand(org-default,uw-white,lvl1);
     display: inline-block;
     font-size: rem(gesso-font-size(1));
+    height:2rem;
     margin: 0 auto;
     max-width: inherit;
     padding: inherit;
@@ -54,7 +80,7 @@
     user-select: none;
     vertical-align: middle;
     white-space: nowrap;
-    width: auto;
+    width: 2rem;
     &:hover {
       background-color: transparent;
     }
@@ -62,6 +88,11 @@
 }
 
 .owl-theme .owl-dots .owl-dot {
+  span{
+    border-radius:50%;
+    height:1rem !important;
+    width:1rem !important;
+  }
   &:hover{
     span {
       background:$button-background-color !important;

source/_patterns/04-components/banners/banners.js

@@ -8,19 +8,19 @@
       $(document).ready(function () {
 
         // Step through each FF on the page.
-        $('.card__banner').each(function () {
+        $('.block-inline-blockuw-cbl-banner-images').each(function () {
 
           // Get the number of items for the carousel, if any.
           var num_of_items = 1;
 
           // Add the carousel to the FF using the id.
-          $('.owl-carousel').owlCarousel({
+          $('.block-inline-blockuw-cbl-banner-images .owl-carousel').owlCarousel({
             margin: 10,
             nav: true,
             navContainerClass: 'uw-owl-nav',
             navText:[
-                '‹ prev',
-                'next ›'
+                'prev',
+                'next'
             ],
             responsiveClass: true,
             responsive: {

source/_patterns/04-components/card/card--banner/_card--banner.scss

@@ -66,6 +66,9 @@ $faculties: 'org-default', 'org-ahs', 'org-art', 'org-eng', 'org-env', 'org-mat'
   .card__body {
     padding:inherit;
   }
+  .card__image{
+    margin:0;
+  }
 }
 .card__banner--image {
     background: $uw-black;

source/_patterns/04-components/image-gallery/image-gallery.js

@@ -18,7 +18,12 @@
           // Add the carousel to the FF using the id.
           $(id + ' .owl-carousel').owlCarousel({
             loop: true,
-            nav: true,
+            // autoHeight:true,
+            navContainerClass: 'uw-owl-nav',
+            navText:[
+              'prev',
+              'next'
+            ],
             margin: 10,
             responsiveClass: true,
             responsive: {