bootstrap-italia 2.10.0 → 2.11.0

package/src/scss/custom/_gridlist.scss

@@ -1,41 +1,47 @@
 //mobile
 .it-grid-item-wrapper {
   position: relative;
+
   // img default proportion
   .img-responsive-wrapper {
     border-radius: $border-radius;
+
     .img-responsive {
       padding-bottom: $grid-item-df-proportion;
     }
   }
+
   // text
   .it-griditem-text-wrapper {
     display: flex;
     justify-content: space-between;
-    padding: $v-gap;
     align-items: center;
+
     .it-griditem-text {
-      font-size: $grid-item-text-size-mob;
-      color: $grid-item-text-color;
-      font-weight: 600;
+      font-size: $grid-item-text-size;
+      font-weight: $font-weight-semibold;
     }
+
     .icon {
       flex-shrink: 0;
       position: relative;
-      right: -$v-gap;
       fill: $primary;
-      width: $grid-item-icon-mob-size;
-      height: $grid-item-icon-mob-size;
+      width: $grid-item-icon-size;
+      height: $grid-item-icon-size;
     }
   }
+
   // text overlay
   &.it-grid-item-overlay {
     position: relative;
+
     .img-responsive-wrapper {
+      position: relative;
+
       &:after {
         content: '';
         display: block;
-        background: rgba(0, 0, 0, 0.5);
+        background: $grid-item-overlay;
         position: absolute;
         left: 0;
         top: 0;
@@ -43,6 +49,7 @@
         height: 100%;
       }
     }
+
     .it-griditem-text-wrapper {
       position: absolute;
       left: 0;
@@ -59,7 +66,18 @@
         fill: #fff;
       }
     }
+
+    .figure-img {
+      margin-bottom: 0;
+    }
+
+    .figure-caption {
+      position: absolute;
+      z-index: 10;
+      color: #fff;
+    }
   }
+
   a {
     display: block;
     text-decoration: none;
@@ -85,24 +103,29 @@
 .it-grid-list-wrapper {
   padding-left: $grid-list-default-gap * 2;
   padding-right: $grid-list-default-gap * 2;
+
   // grid changes
   div[class^='col-'] {
     padding: 0 $grid-list-default-gap $grid-list-default-gap * 2 $grid-list-default-gap;
   }
+
   .grid-row {
     display: flex;
     margin-left: -$grid-list-default-gap;
     margin-right: -$grid-list-default-gap;
     flex-wrap: wrap;
   }
+
   // grid with label
   &.it-image-label-grid {
     padding-left: $grid-list-text-gap * 2;
     padding-right: $grid-list-text-gap * 2;
+
     // grid changes
     div[class^='col-'] {
       padding: 0 $grid-list-text-gap $grid-list-text-gap * 2 $grid-list-text-gap;
     }
+
     .grid-row {
       margin-left: -(($grid-list-text-gap * 2) + ($grid-list-default-gap * 2));
       margin-right: -(($grid-list-text-gap * 2) + ($grid-list-default-gap * 2));
@@ -117,12 +140,14 @@
       .img-responsive {
         padding-bottom: initial;
         height: auto;
+
         .img-wrapper {
           position: inherit;
           left: initial;
           right: initial;
           width: initial;
           height: initial;
+
           img {
             height: auto;
             object-fit: initial;
@@ -139,20 +164,11 @@
     &.it-grid-item-overlay {
       .it-griditem-text-wrapper {
         padding: $v-gap * 2 $v-gap * 3;
+
         .it-griditem-text {
           font-size: $grid-item-text-size;
         }
       }
     }
-    // text
-    .it-griditem-text-wrapper {
-      .it-griditem-text {
-        font-size: $grid-item-text-size;
-      }
-      .icon {
-        width: $grid-item-icon-size-desk;
-        height: $grid-item-icon-size-desk;
-      }
-    }
   }
 }

package/src/scss/custom/_header.scss

@@ -4,24 +4,28 @@
 .it-header-wrapper {
   position: relative;
   z-index: 5;
+
   .it-nav-wrapper {
     position: relative;
     z-index: auto;
+
     // se ha un menu
     .it-brand-wrapper {
       padding-left: $v-gap * 4;
     }
+
     .it-header-navbar-wrapper {
       transition: padding-top 0.3s ease;
-
       position: absolute;
       z-index: 3;
       left: 0;
       top: 50%;
       margin-top: -$header-nav-button-distance;
+
       nav {
         padding-left: $header-general-padding - ($grid-columns * 0.5);
         padding-right: $header-general-padding - ($grid-columns * 0.5);
+
         .custom-navbar-toggler {
           padding: 0;
           transform: translateX(-2px);
@@ -34,6 +38,7 @@
   &.it-header-sticky {
     &.is-sticky {
       width: 100%;
+
       .it-nav-wrapper {
         //position: fixed;
         top: 0;
@@ -72,9 +77,11 @@
 
                 a {
                   color: $header-center-text-color;
+
                   &:hover {
                     text-decoration: none;
                   }
+
                   .icon {
                     fill: $header-center-text-color;
                     width: $header-center-icon-size * 0.5;
@@ -93,6 +100,7 @@
               margin-left: math.div($header-center-search-distance, 3);
               font-size: $header-center-text-size;
               color: $header-center-text-color;
+
               a {
                 &.rounded-icon {
                   width: $header-center-search-size;
@@ -104,9 +112,11 @@
                   align-items: center;
                   margin-left: $v-gap * 2;
                   transition: all 0.3s;
+
                   &:hover {
                     background: shade-color($header-center-text-color, 5%);
                   }
+
                   svg {
                     fill: $header-center-bg-color;
                     width: $header-center-search-icon-size;
@@ -150,18 +160,22 @@
       .it-brand-wrapper {
         padding-left: 0;
       }
+
       position: relative;
+
       .it-header-navbar-wrapper {
         position: inherit;
         left: auto;
         top: inherit;
         margin-top: 0;
+
         nav {
           padding-left: $header-general-padding - ($grid-columns * 0.5);
           padding-right: $header-general-padding - ($grid-columns * 0.5);
         }
       }
     }
+
     .navbar .navbar-collapsable .menu-wrapper .nav-item.megamenu .dropdown-menu {
       left: 0;
       right: 0;

package/src/scss/custom/_linklist.scss

@@ -1,7 +1,10 @@
 //mobile
 .link-list-wrapper {
+  .list-item-title,
   .link-list-heading {
     font-size: $link-list-heading-size;
+  }
+  .link-list-heading {
     color: $color-text-base;
     padding: 0 $link-list-h-pad;
     font-weight: 600;

package/src/scss/custom/_list.scss

@@ -4,6 +4,7 @@
     list-style-type: none;
     margin: 0;
     padding: 0;
+
     .list-item {
       transition: all 0.3s;
       margin-top: -1px;
@@ -12,103 +13,105 @@
       text-decoration: none;
       border-bottom: 1px solid $list-border-color;
       overflow-wrap: anywhere;
+
       .avatar,
       .it-rounded-icon,
       .it-thumb {
         flex-shrink: 0;
         margin-right: $v-gap * 2;
       }
+
       .it-rounded-icon {
         width: $v-gap * 5;
+
         svg {
           fill: $primary-a5;
         }
       }
+
       .form-check {
         margin-right: $v-gap;
         width: $v-gap;
         height: $v-gap * 4;
         text-align: left;
+
         & + .it-right-zone {
           margin-left: $v-gap * 2;
         }
+
         label {
           padding-left: 0;
           margin-bottom: 0;
         }
       }
+
       .it-thumb {
         width: $v-gap * 5;
         height: $v-gap * 5;
+
         img {
           object-fit: cover;
           width: 100%;
           height: 100%;
         }
       }
+
       .it-right-zone {
         padding: $list-text-padding;
         flex-grow: 1;
         display: flex;
         justify-content: space-between;
         align-items: center;
-        a {
-          text-decoration: none;
-        }
+
         svg {
           fill: $primary;
           width: $v-gap * 3;
           height: $v-gap * 3;
         }
-        span.it-multiple {
+
+        .it-multiple {
           display: flex;
           justify-content: flex-end;
           flex-wrap: wrap;
-          span.metadata {
+
+          .metadata {
             margin-right: 0;
             width: 100%;
             text-align: right;
           }
+
           svg {
             margin-left: $v-gap * 2;
             margin-right: 0;
           }
         }
+
         .toggles {
           height: $v-gap * 4;
         }
-        span.metadata {
+
+        .metadata {
           color: $list-metadata-color;
           font-size: $list-metadata-size;
           letter-spacing: $list-metadata-space;
-          a {
-            color: $primary;
-          }
         }
-      }
-      span.text {
-        font-size: $list-font-size;
-        font-weight: 600;
-        display: block;
-        @include media-breakpoint-up(lg) {
-          font-size: 1.125rem;
+
+        .text {
+          font-size: $list-font-size;
+          font-weight: $font-weight-semibold;
+          @include media-breakpoint-up(lg) {
+            font-size: 1.125rem;
+          }
         }
-        em {
-          display: block;
+
+        .text + p {
           font-size: $list-sub-size;
           color: $list-sub-color;
-          font-style: normal;
-          font-weight: normal;
-        }
-      }
-      // active
-      &.active {
-        color: $color-text-base;
-        .text {
-          color: $color-text-base;
+          font-weight: $font-weight-normal;
         }
       }
     }
+
     li:last-child {
       .list-item {
         span.text {
@@ -116,12 +119,15 @@
         }
       }
     }
+
+    a .text {
+      text-decoration: underline;
+    }
   }
 }
 
-//Desktop
+// Desktop
 @include media-breakpoint-up(xl) {
-  //mobile
   .it-list-wrapper {
     .it-list {
       .list-item {
@@ -130,32 +136,30 @@
         .it-thumb {
           margin-left: $v-gap;
           margin-right: 0;
+
           & + .it-right-zone {
             margin-left: $v-gap * 2;
           }
         }
+
         .form-check {
           margin-right: $v-gap * 2;
           text-align: center;
         }
+
         // hover
         .it-right-zone {
           margin-left: $v-gap;
           margin-right: $v-gap;
-          a {
-            &:hover {
-              .text {
-                color: $primary;
-                text-decoration: underline;
-              }
-            }
-          }
+
           span.it-multiple {
             margin-right: $v-gap;
+
             a {
               svg {
-                transition: all 0.3s;
+                transition: fill 0.3s;
               }
+
               &:hover {
                 svg {
                   fill: $primary-a10;
@@ -163,33 +167,26 @@
               }
             }
           }
+
           .toggles {
             margin-right: 0;
           }
+
           span.metadata {
             margin-right: $v-gap;
-            a:hover {
-              text-decoration: underline;
-            }
           }
         }
       }
-      a {
-        &.list-item {
-          &:hover {
-            box-shadow: $card-shadow;
-            color: $color-text-primary-hover;
-            text-decoration: none;
-            background: $white;
-            position: relative;
-            z-index: 1;
-            transition: none;
-            border-bottom: 1px solid transparent;
-            span.text {
-              text-decoration: underline;
-            }
-          }
-        }
+
+      a.list-item:hover {
+        box-shadow: $card-shadow;
+        color: $color-text-primary-hover;
+        text-decoration: none;
+        background: $white;
+        position: relative;
+        z-index: 1;
+        transition: none;
+        border-bottom: 1px solid transparent;
       }
     }
   }

package/src/scss/custom/_skiplinks.scss

@@ -2,6 +2,7 @@
 .skiplinks {
   background-color: $skiplinks-bg;
   text-align: center;
+
   a {
     padding: $skiplink-padding-y $skiplink-padding-x;
     display: block;
@@ -9,4 +10,12 @@
     color: $skiplinks-color;
     text-decoration: underline;
   }
+
+  ul {
+    list-style: none;
+    padding: 0;
+    font-size: 1rem;
+    line-height: 1.5rem;
+    margin-bottom: 0;
+  }
 }

package/src/scss/custom/_timeline.scss

@@ -62,6 +62,8 @@
       background: $timeline-pin-background;
       border-radius: $border-radius;
       font-family: $font-family-monospace;
+      font-size: var(--bs-body-font-size);
+      line-height: var(--bs-body-line-height);
 
       span {
         padding: $v-gap * 0.5 $v-gap * 2;

package/src/scss/custom/_version.scss

@@ -1,3 +1,3 @@
 :root {
-  --bootstrap-italia-version: '2.10.0';
+  --bootstrap-italia-version: '2.11.0';
 }

package/src/svg/it-map-marker-minus.svg

@@ -1,3 +1,13 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path fill-rule="evenodd" clip-rule="evenodd" d="M12 22L6.31001 11.63C4.99676 9.25198 5.30085 6.30809 7.07246 4.24872C8.84407 2.18935 11.7095 1.4489 14.257 2.39217C16.8045 3.33544 18.4968 5.76346 18.5 8.48C18.4997 9.57513 18.2209 10.6522 17.69 11.61L12 22ZM12 3C10.0517 2.99538 8.24688 4.02372 7.25751 5.70214C6.26815 7.38057 6.24246 9.45762 7.19 11.16L12 19.94L16.82 11.13C17.2627 10.3166 17.4963 9.40602 17.5 8.48C17.4835 5.45253 15.0275 3.00545 12 3ZM8.5 9V8H15.5V9H8.5Z" />
+<?xml version="1.0" encoding="UTF-8" standalone="no"?>
+<svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
+	 viewBox="0 0 24 24" style="enable-background:new 0 0 24 24;" xml:space="preserve">
+<g>
+	<path
+   d="M17.7,5.3C16,2.2,12,1.1,8.9,2.8s-4.3,5.7-2.5,8.8L12,22l5.7-10.4c0.5-1,0.8-2,0.8-3.1S18.2,6.3,17.7,5.3z M16.8,11.1   L12,19.9l-4.8-8.8c-0.5-0.8-0.7-1.7-0.7-2.7C6.5,5.4,9,3,12,3s5.5,2.5,5.5,5.5C17.5,9.4,17.3,10.3,16.8,11.1z"
+   id="path2" />
+</g>
+<path
+   style="fill:none;stroke:#000000;stroke-width:1px;stroke-linecap:butt;stroke-linejoin:miter;stroke-opacity:1"
+   d="m 9.3661034,9.0091423 5.2094906,0.017287"
+   id="path859" />
 </svg>