bootstrap-italia 2.15.1 → 2.16.0

package/src/scss/components/_carousel.scss

@@ -1,5 +1,7 @@
 @import '@splidejs/splide/src/css/core/index';
 
+// Keep all .card-SOMETHING till next major? (.card is deprecated)
+
 //mobile
 .it-carousel-wrapper {
   // splide pagination
@@ -24,6 +26,7 @@
     }
   }
   .it-special-card {
+    // xxx deprecated with old .card
     h5.card-title {
       margin-bottom: 0;
     }
@@ -43,12 +46,16 @@
     padding-bottom: 0;
   }
   .card-wrapper {
+    // xxx deprecated with old .card
+    padding-bottom: $v-gap * 2;
+  }
+  .it-card {
     padding-bottom: $v-gap * 2;
   }
   // Landscape abstract
   &.it-carousel-landscape-abstract {
+    // xxx deprecated with old .card
     .it-single-slide-wrapper {
-      background-color: $white;
       > a {
         position: relative;
         display: block;
@@ -121,11 +128,13 @@
     margin: 0 auto;
     // with img
     .card.card-img {
+      // xxx deprecated with old .card
       margin-left: 0;
       margin-right: 0;
     }
     // with shadow
     .it-card-bg {
+      // xxx deprecated with old .card
       .card.card-bg {
         margin-left: 0;
         margin-right: 0;
@@ -172,6 +181,7 @@
         .it-text-slider-wrapper-outside {
           flex-basis: 50%;
           .card {
+            // xxx deprecated with old .card
             border-right: none;
             margin-right: 0;
             &:after {
@@ -197,16 +207,6 @@
           }
         }
       }
-      .splide__pagination {
-        position: absolute;
-        left: 50%;
-        margin-left: $v-gap * 5;
-        right: 0;
-        bottom: $crs-landscape-bottom;
-        text-align: left;
-        justify-content: left;
-        margin-bottom: 8px;
-      }
     }
     &.it-carousel-landscape-abstract-three-cols-arrow-visible {
       .lined_slide {

package/src/scss/components/_timeline.scss

@@ -9,9 +9,11 @@
     color: $primary;
     font-weight: 600;
   }
+
   .row {
     position: relative;
     padding-top: $v-gap * 6;
+
     //padding-bottom: $v-gap*6;
     &:after {
       content: '';
@@ -23,13 +25,38 @@
       bottom: -$v-gap * 2;
     }
   }
+
   .timeline-element {
     padding: $timeline-content-padding;
     position: relative;
+    z-index: 1;
+
     .card {
+      // xxx deprecated with old .card
       background: none;
     }
+
+    .it-card {
+      margin-top: 16px;
+      margin-bottom: 16px;
+
+      + .it-card {
+        margin-top: 4px;
+      }
+
+      @include media-breakpoint-down(lg) {
+        margin-top: 32px;
+        margin-bottom: 32px;
+        margin-left: -24px;
+        width: auto;
+
+        + .it-card {
+          margin-top: 8px;
+        }
+      }
+    }
   }
+
   .it-pin-wrapper {
     display: flex;
     align-items: center;
@@ -37,6 +64,7 @@
     top: -$timeline-pin-circle-size * 0.5;
     z-index: 4;
     left: calc($timeline-padding / 2);
+
     .pin-icon {
       width: $timeline-pin-circle-size;
       height: $timeline-pin-circle-size;
@@ -50,11 +78,13 @@
       margin-right: $v-gap * 2;
       background: $white;
     }
+
     svg {
       width: $timeline-pin-size;
       height: $timeline-pin-size;
       fill: $primary;
     }
+
     .pin-text {
       color: $white;
       font-weight: 600;
@@ -69,6 +99,7 @@
         padding: $v-gap * 0.5 $v-gap * 2;
         display: block;
         position: relative;
+
         &:after {
           content: '';
           width: 10px;
@@ -82,15 +113,19 @@
         }
       }
     }
+
     &.it-now {
       .pin-icon {
         background: $primary;
       }
+
       svg {
         fill: $white;
       }
+
       .pin-text {
         background: $primary;
+
         span {
           &:after {
             background: $primary;
@@ -98,15 +133,19 @@
         }
       }
     }
+
     &.it-evidence {
       .pin-icon {
         background: $timeline-pin-background;
       }
+
       svg {
         fill: $white;
       }
+
       .pin-text {
         background: $timeline-pin-background;
+
         span {
           &:after {
             background: $timeline-pin-background;
@@ -117,6 +156,7 @@
   }
 
   .card-title {
+    // xxx deprecated with old .card
     text-transform: uppercase;
   }
 }
@@ -130,17 +170,21 @@
         left: calc(50% - #{$timeline-width});
       }
     }
+
     .timeline-element {
       padding: $timeline-content-padding;
       width: 50%;
     }
+
     .col-12 {
       .card-wrapper {
+        // xxx deprecated with old .card
         .card {
           border: none;
         }
       }
     }
+
     // col rules
     .col-12:nth-child(odd) {
       .it-now-label {
@@ -148,6 +192,7 @@
         transform: translateX(100%);
         display: flex;
         align-items: center;
+
         &:before {
           content: '';
           display: inline-block;
@@ -157,30 +202,38 @@
           margin-right: $v-gap * 2;
         }
       }
+
       .timeline-element {
         padding: $timeline-content-padding-reverse;
       }
+
       .card-wrapper {
+        // xxx deprecated with old .card
         .card {
           text-align: right;
+
           &:after {
             margin-left: auto;
             display: inline-block;
             margin-right: $v-gap * 3;
           }
+
           a.read-more {
             right: $v-gap * 3;
           }
         }
       }
+
       .it-pin-wrapper {
         flex-direction: row-reverse;
         left: auto;
         right: -62px;
+
         .pin-icon {
           margin-right: 0;
           margin-left: $v-gap * 2;
         }
+
         .pin-text {
           span {
             &:after {
@@ -189,6 +242,7 @@
             }
           }
         }
+
         &.it-evidence {
           .pin-text {
             span {
@@ -200,12 +254,14 @@
         }
       }
     }
+
     .col-12:nth-child(even) {
       .it-now-label {
         left: 0;
         transform: translateX(-100%);
         display: flex;
         align-items: center;
+
         &:after {
           content: '';
           display: inline-block;
@@ -215,16 +271,20 @@
           margin-left: $v-gap * 2;
         }
       }
+
       .timeline-element {
         position: relative;
         left: 50%;
+
         .it-pin-wrapper {
           left: -66px;
         }
       }
     }
+
     .it-pin-wrapper {
       position: relative;
+
       .pin-text {
         font-size: 1rem;
       }

package/src/scss/utilities/focus.scss

@@ -24,7 +24,8 @@
   outline: none !important;
 }
 
-p a {
+p a,
+p.it-card-text a {
   &:focus:not([data-focus-mouse='true'], .btn) {
     outline-offset: 0px !important;
     outline: 3px $focus-outline-color-out solid !important;
@@ -34,6 +35,17 @@ p a {
   }
 }
 
+.it-card h2 a,
+.it-card h3 a,
+.it-card h4 a,
+.it-card h5 a,
+.it-card a.it-card-link,
+.it-card .list-group-item a {
+  &:focus:not([data-focus-mouse='true'], .btn) {
+    display: inline-block;
+  }
+}
+
 .shadow,
 .shadow-none,
 .shadow-sm,