chore: update documentation

404.html

@@ -8,9 +8,9 @@
     <base href="design-angular-kit">
 
     <link rel="icon" type="image/x-icon" href="favicon.ico">
-  <style>@charset "UTF-8";:root{--bootstrap-italia-version:"2.8.3"}:root{--bs-indigo:hsl(243, 100%, 65%);--bs-purple:hsl(243, 100%, 80%);--bs-pink:hsl(350, 100%, 85%);--bs-red:hsl(350, 60%, 50%);--bs-orange:hsl(36, 100%, 30%);--bs-yellow:hsl(44, 100%, 72.5%);--bs-green:hsl(160, 100%, 25%);--bs-teal:hsl(178, 90%, 32%);--bs-cyan:hsl(178, 100%, 50%);--bs-gray:hsl(0, 0%, 32%);--bs-gray-dark:hsl(0, 0%, 15%);--bs-blue:hsl(210, 100%, 45%);--bs-gray-secondary:hsl(210, 17%, 44%);--bs-gray-tertiary:hsl(205, 21.2121212121%, 44.55%);--bs-gray-quaternary:hsl(238, 100%, 99.5%);--bs-gray-100:hsl(0, 0%, 96%);--bs-gray-200:hsl(0, 0%, 90%);--bs-gray-300:hsl(0, 0%, 83%);--bs-gray-400:hsl(0, 0%, 64%);--bs-gray-500:hsl(0, 0%, 45%);--bs-gray-600:hsl(0, 0%, 32%);--bs-gray-700:hsl(0, 0%, 25%);--bs-gray-800:hsl(0, 0%, 15%);--bs-gray-900:hsl(0, 0%, 10%);--bs-primary:hsl(210, 100%, 40%);--bs-secondary:hsl(210, 17%, 44%);--bs-success:hsl(160, 100%, 25%);--bs-info:hsl(210, 17%, 44%);--bs-warning:hsl(36, 100%, 30%);--bs-danger:hsl(350, 60%, 50%);--bs-light:hsl(255, 32.2033898305%, 92.625%);--bs-dark:hsl(210, 54%, 20%);--bs-black:hsl(0, 0%, 0%);--bs-white:hsl(0, 0%, 100%);--bs-100:hsl(0, 0%, 96%);--bs-200:hsl(0, 0%, 90%);--bs-300:hsl(0, 0%, 83%);--bs-400:hsl(0, 0%, 64%);--bs-500:hsl(0, 0%, 45%);--bs-600:hsl(0, 0%, 32%);--bs-700:hsl(0, 0%, 25%);--bs-800:hsl(0, 0%, 15%);--bs-900:hsl(0, 0%, 10%);--bs-primary-rgb:0, 102, 204;--bs-secondary-rgb:93, 112, 131;--bs-success-rgb:0, 128, 85;--bs-info-rgb:93, 112, 131;--bs-warning-rgb:153, 92, 0;--bs-danger-rgb:204, 51, 77;--bs-light-rgb:233, 230, 242;--bs-dark-rgb:23, 51, 79;--bs-100-rgb:245, 245, 245;--bs-200-rgb:230, 230, 230;--bs-300-rgb:212, 212, 212;--bs-400-rgb:163, 163, 163;--bs-500-rgb:115, 115, 115;--bs-600-rgb:82, 82, 82;--bs-700-rgb:64, 64, 64;--bs-800-rgb:38, 38, 38;--bs-900-rgb:26, 26, 26;--bs-white-rgb:255, 255, 255;--bs-black-rgb:0, 0, 0;--bs-body-color-rgb:26, 26, 26;--bs-body-bg-rgb:255, 255, 255;--bs-font-sans-serif:"Titillium Web", Geneva, Tahoma, sans-serif;--bs-font-monospace:"Roboto Mono", monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:hsl(0, 0%, 10%);--bs-body-bg:hsl(0, 0%, 100%);--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:hsl(210, 4%, 78%);--bs-border-color-translucent:rgba(0, 0, 0, .175);--bs-border-radius:4px;--bs-border-radius-sm:2px;--bs-border-radius-lg:8px;--bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-link-color:hsl(210, 100%, 40%);--bs-link-hover-color:#0052a3;--bs-code-color:hsl(210, 54%, 20%);--bs-highlight-bg:hsl(178, 100%, 90%)}*,*:before,*:after{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}:focus:not(.focus--mouse){border-color:#995c00!important;box-shadow:0 0 0 2px #995c00!important;outline:none!important}</style><link rel="stylesheet" href="styles.6f617e8281e10365.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.6f617e8281e10365.css"></noscript></head>
+  <style>@charset "UTF-8";:root{--bootstrap-italia-version:"2.8.4"}:root{--bs-indigo:hsl(243, 100%, 65%);--bs-purple:hsl(243, 100%, 80%);--bs-pink:hsl(350, 100%, 85%);--bs-red:hsl(350, 60%, 50%);--bs-orange:hsl(36, 100%, 30%);--bs-yellow:hsl(44, 100%, 72.5%);--bs-green:hsl(160, 100%, 25%);--bs-teal:hsl(178, 90%, 32%);--bs-cyan:hsl(178, 100%, 50%);--bs-gray:hsl(0, 0%, 32%);--bs-gray-dark:hsl(0, 0%, 15%);--bs-blue:hsl(210, 100%, 45%);--bs-gray-secondary:hsl(210, 17%, 44%);--bs-gray-tertiary:hsl(205, 21.2121212121%, 44.55%);--bs-gray-quaternary:hsl(238, 100%, 99.5%);--bs-gray-100:hsl(0, 0%, 96%);--bs-gray-200:hsl(0, 0%, 90%);--bs-gray-300:hsl(0, 0%, 83%);--bs-gray-400:hsl(0, 0%, 64%);--bs-gray-500:hsl(0, 0%, 45%);--bs-gray-600:hsl(0, 0%, 32%);--bs-gray-700:hsl(0, 0%, 25%);--bs-gray-800:hsl(0, 0%, 15%);--bs-gray-900:hsl(0, 0%, 10%);--bs-primary:hsl(210, 100%, 40%);--bs-secondary:hsl(210, 17%, 44%);--bs-success:hsl(160, 100%, 25%);--bs-info:hsl(210, 17%, 44%);--bs-warning:hsl(36, 100%, 30%);--bs-danger:hsl(350, 60%, 50%);--bs-light:hsl(255, 32.2033898305%, 92.625%);--bs-dark:hsl(210, 54%, 20%);--bs-black:hsl(0, 0%, 0%);--bs-white:hsl(0, 0%, 100%);--bs-100:hsl(0, 0%, 96%);--bs-200:hsl(0, 0%, 90%);--bs-300:hsl(0, 0%, 83%);--bs-400:hsl(0, 0%, 64%);--bs-500:hsl(0, 0%, 45%);--bs-600:hsl(0, 0%, 32%);--bs-700:hsl(0, 0%, 25%);--bs-800:hsl(0, 0%, 15%);--bs-900:hsl(0, 0%, 10%);--bs-primary-rgb:0, 102, 204;--bs-secondary-rgb:93, 112, 131;--bs-success-rgb:0, 128, 85;--bs-info-rgb:93, 112, 131;--bs-warning-rgb:153, 92, 0;--bs-danger-rgb:204, 51, 77;--bs-light-rgb:233, 230, 242;--bs-dark-rgb:23, 51, 79;--bs-100-rgb:245, 245, 245;--bs-200-rgb:230, 230, 230;--bs-300-rgb:212, 212, 212;--bs-400-rgb:163, 163, 163;--bs-500-rgb:115, 115, 115;--bs-600-rgb:82, 82, 82;--bs-700-rgb:64, 64, 64;--bs-800-rgb:38, 38, 38;--bs-900-rgb:26, 26, 26;--bs-white-rgb:255, 255, 255;--bs-black-rgb:0, 0, 0;--bs-body-color-rgb:26, 26, 26;--bs-body-bg-rgb:255, 255, 255;--bs-font-sans-serif:"Titillium Web", Geneva, Tahoma, sans-serif;--bs-font-monospace:"Roboto Mono", monospace;--bs-gradient:linear-gradient(180deg, rgba(255, 255, 255, .15), rgba(255, 255, 255, 0));--bs-body-font-family:var(--bs-font-sans-serif);--bs-body-font-size:1rem;--bs-body-font-weight:400;--bs-body-line-height:1.5;--bs-body-color:hsl(0, 0%, 10%);--bs-body-bg:hsl(0, 0%, 100%);--bs-border-width:1px;--bs-border-style:solid;--bs-border-color:hsl(210, 4%, 78%);--bs-border-color-translucent:rgba(0, 0, 0, .175);--bs-border-radius:4px;--bs-border-radius-sm:2px;--bs-border-radius-lg:8px;--bs-border-radius-xl:1rem;--bs-border-radius-2xl:2rem;--bs-border-radius-pill:50rem;--bs-link-color:hsl(210, 100%, 40%);--bs-link-hover-color:#0052a3;--bs-code-color:hsl(210, 54%, 20%);--bs-highlight-bg:hsl(178, 100%, 90%)}*,*:before,*:after{box-sizing:border-box}@media (prefers-reduced-motion: no-preference){:root{scroll-behavior:smooth}}body{margin:0;font-family:var(--bs-body-font-family);font-size:var(--bs-body-font-size);font-weight:var(--bs-body-font-weight);line-height:var(--bs-body-line-height);color:var(--bs-body-color);text-align:var(--bs-body-text-align);background-color:var(--bs-body-bg);-webkit-text-size-adjust:100%;-webkit-tap-highlight-color:rgba(0,0,0,0)}:focus:not(.focus--mouse){border-color:#995c00!important;box-shadow:0 0 0 2px #995c00!important;outline:none!important}</style><link rel="stylesheet" href="styles.cde63bd5804f9281.css" media="print" onload="this.media='all'"><noscript><link rel="stylesheet" href="styles.cde63bd5804f9281.css"></noscript></head>
 
   <body>
     <it-root></it-root>
-  <script src="runtime.ef015a0e11de4e6c.js" type="module"></script><script src="polyfills.6842c8dab9ef00dd.js" type="module"></script><script src="main.0ec8b61fde322006.js" type="module"></script></body>
+  <script src="runtime.ef015a0e11de4e6c.js" type="module"></script><script src="polyfills.6842c8dab9ef00dd.js" type="module"></script><script src="main.9072697043b8cdf7.js" type="module"></script></body>
 </html>

bootstrap-italia/package.json

@@ -1,6 +1,6 @@
 {
   "name": "bootstrap-italia",
-  "version": "2.8.3",
+  "version": "2.8.4",
   "keywords": [
     "css",
     "sass",

bootstrap-italia/src/js/version.js

@@ -1,5 +1,5 @@
 // bootstrap italia version variable
 // useful to check for the current version
 // eslint-disable-next-line no-unused-vars
-const BOOTSTRAP_ITALIA_VERSION = '2.8.3'
+const BOOTSTRAP_ITALIA_VERSION = '2.8.4'
 export default BOOTSTRAP_ITALIA_VERSION

bootstrap-italia/src/scss/custom/_bottomnav.scss

@@ -90,22 +90,21 @@
   .bottom-nav-badge {
     top: 0;
     right: 0;
-    min-width: 18px;
-    height: 18px;
-    padding: 0 4px;
+    min-width: 1.15rem;
+    line-height: 1;
+    padding: 4px 6px;
     color: $white;
     font-size: 0.625rem;
-    border-radius: 50%;
+    border-radius: 2rem;
     font-style: normal;
   }
 
   // icon alert
   .bottom-nav-alert {
-    top: 4px;
-    right: 8px;
-    min-width: 10px;
-    height: 10px;
-    font-size: 0.625rem;
+    top: 0;
+    right: 4px;
+    min-width: 12px;
+    height: 12px;
     border-radius: 50%;
   }
 

bootstrap-italia/src/scss/custom/_callout.scss

@@ -4,11 +4,11 @@
   overflow: hidden;
 
   .callout-inner {
-    padding: 1.1rem 2.222rem;
+    padding: 2rem;
     border: 2px solid;
     border-top: 0;
     border-color: $color-border-secondary;
-    margin: 1.75rem 0 1rem;
+    margin: 2.5rem 0;
   }
 
   // Highlights version
@@ -204,38 +204,47 @@
     font-weight: 600;
     text-transform: uppercase;
     font-size: 1rem;
-    margin-right: 2.222rem;
     color: $color-text-secondary; // UI kit
     @include media-breakpoint-up(lg) {
       font-size: 1.125rem;
     }
     .icon {
       fill: $color-text-secondary; // UI kit
-      margin-right: 0.444rem;
+      margin-right: 0.5rem;
     }
   }
 
   // standard title
   &:not(.callout-highlight):not(.callout-more) {
     .callout-title {
       position: relative;
-      padding: 0 1.389rem;
-      top: -2rem;
+      padding-left: 1.5rem;
+      top: -3rem;
+      .text {
+        position: relative;
+        overflow: hidden;
+        width: 100%;
+        font-size: 0.875rem;
+        padding-right: 1.5rem;
+        @include media-breakpoint-up(md) {
+          font-size: 1.15rem;
+        }
+      }
       .text:after {
         content: '';
-        top: 0.78em;
+        top: 0.875em;
         border-top: 2px solid;
         position: absolute;
-        width: 200%;
-        margin-left: calc(10px + 0.7rem);
+        width: 250%;
+        left: 100%;
       }
       &:before {
         content: '';
-        top: 0.78em;
+        top: 0.875em;
         border-top: 2px solid;
         position: absolute;
-        width: 3.222rem;
-        left: calc(-40px - 0.7rem);
+        width: 3rem;
+        left: -2.5rem;
       }
     }
   }

bootstrap-italia/src/scss/custom/_version.scss

@@ -1,3 +1,3 @@
 :root {
-  --bootstrap-italia-version: '2.8.3';
+  --bootstrap-italia-version: '2.8.4';
 }