bootstrap-italia 2.2.0 → 2.3.1

package/src/scss/custom/_steppers.scss

@@ -1,56 +1,81 @@
 //mobile
 .steppers {
-  .steppers-header {
-    padding: 0 24px;
-    height: 64px;
-    background: $white;
-    box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1); // TEMP - substitute with generic ellipsical shadow
-    display: flex;
-    align-items: center;
-    li {
-      font-size: 1.125rem;
-      color: $gray-secondary;
-      list-style-type: none;
+  // steppers
+  .steppers-index {
+    margin-left: auto;
+    font-size: 0.875rem;
+    font-weight: 600;
+    flex-shrink: 0;
+    @include media-breakpoint-up(lg) {
       display: none;
-      .icon {
-        fill: $gray-secondary;
-        margin-right: 0.667rem;
-        width: 24px;
-        height: 24px;
-      }
-      // states
-      &.active,
-      &.confirmed {
+    }
+    span {
+      margin-left: 0.25rem;
+      &.active {
         color: $primary;
-        font-weight: 600;
-        .icon {
-          fill: $primary;
-        }
+        text-decoration: underline;
       }
-      &.active,
-      &.steppers-index {
-        display: block;
+    }
+  }
+  .steppers-header {
+    @include media-breakpoint-down(lg) {
+      padding: 0 24px;
+      height: 64px;
+      background: $white;
+      box-shadow: 0 8px 20px rgba(0, 0, 0, 0.1);
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+    }
+    margin-bottom: 1rem;
+    ul {
+      display: flex;
+      width: 100%;
+      padding: 0;
+      @include media-breakpoint-down(lg) {
+        margin: 0;
+        padding: 0;
       }
-      // steppers
-      &.steppers-index {
-        margin-left: auto;
-        font-size: 0.875rem;
+      li {
+        display: flex;
+        font-size: 1.125rem;
         font-weight: 600;
-        span {
-          margin-left: 0.25rem;
-          &.active {
-            color: $primary;
-            text-decoration: underline;
+        color: $gray-secondary;
+        list-style-type: none;
+        .icon {
+          fill: $gray-secondary;
+          margin-right: 0.667rem;
+          width: 24px;
+          height: 24px;
+        }
+        // states
+        &:not(.active) {
+          @include media-breakpoint-down(lg) {
+            clip: rect(1px, 1px, 1px, 1px);
+            height: 0;
+            position: absolute;
+            display: block;
           }
         }
-      }
-      // numbers
-      .steppers-number {
-        .icon {
-          margin: 0;
+        &.active,
+        &.confirmed {
+          color: $primary;
+          .icon {
+            fill: $primary;
+          }
         }
-        &:after {
-          content: '. ';
+        &.active,
+        &.steppers-index {
+          display: block;
+        }
+        // numbers
+        .steppers-number {
+          .icon {
+            margin: 0;
+          }
+          &:after {
+            content: '. ';
+          }
         }
       }
     }
@@ -60,6 +85,15 @@
   &.bg-dark {
     .steppers-header {
       background: none;
+      // steppers
+      .steppers-index {
+        color: $neutral-1-a2;
+        span {
+          &.active {
+            color: $analogue-2-a6;
+          }
+        }
+      }
       // steps
       li {
         color: $neutral-1-a2;
@@ -80,14 +114,6 @@
             fill: $white;
           }
         }
-        // steppers
-        &.steppers-index {
-          span {
-            &.active {
-              color: $analogue-2-a6;
-            }
-          }
-        }
       }
     }
     .steppers-nav {
@@ -107,7 +133,7 @@
   .steppers-nav {
     display: flex;
     height: 64px;
-    padding: 0 24px;
+    padding: 0 $stepper-spacing-h;
     box-shadow: 0 -8px 20px rgba(0, 0, 0, 0.1); // TEMP - substitute with generic ellipsical shadow
     background: $white;
     align-items: center;
@@ -174,15 +200,14 @@
       }
       // steps
       li {
-        text-transform: uppercase;
-        padding: 1.778rem 1.111rem;
+        padding: $stepper-spacing-v $stepper-spacing-h;
         flex-grow: 1;
-        border-left: 1px solid $gray-border-disabled;
+        border-left: 1px solid $gray-border;
         position: relative;
         display: flex;
         align-items: center;
         &:nth-last-child(2) {
-          border-right: 1px solid $gray-border-disabled;
+          border-right: 1px solid $gray-border;
         }
         // index
         &.steppers-index {
@@ -221,7 +246,7 @@
           display: inline-block;
           width: 1.778rem;
           height: 1.778rem;
-          border: 1px solid $gray-border-disabled;
+          border: 1px solid $gray-border;
           border-radius: 50%;
           text-align: center;
           margin-right: 0.667rem;

package/src/scss/custom/_tab.scss

@@ -1,7 +1,7 @@
 .nav-tabs {
   position: relative;
   background-color: $white;
-  border-bottom-color: $gray-border-disabled;
+  border-bottom-color: $color-border-subtle;
   display: flex;
   overflow-x: scroll;
   overflow-y: hidden;
@@ -62,7 +62,7 @@
   &.nav-tabs-vertical {
     flex-direction: column;
     border-bottom: none;
-    border-right: 1px solid $gray-border-disabled;
+    border-right: 1px solid $color-border-subtle;
     .nav-link {
       justify-content: space-between;
       border-bottom: none;
@@ -88,7 +88,7 @@
     &.nav-tabs-vertical-background {
       .nav-link.active,
       .nav-item.show .nav-link {
-        background-color: $neutral-2;
+        background-color: $color-background-primary-lighter;
       }
     }
   }
@@ -97,7 +97,7 @@
   .nav-link {
     border-radius: 0;
     font-weight: 600;
-    color: $neutral-1-a7;
+    color: $color-text-secondary;
     border: none;
     border-bottom: 3px solid transparent;
     padding: 0.778rem 1.333em;
@@ -111,7 +111,7 @@
     justify-content: center;
 
     &:hover {
-      color: $primary;
+      color: $color-text-primary-hover;
       border-bottom-color: transparent;
     }
 
@@ -120,10 +120,10 @@
     }
 
     &.disabled {
-      color: $gray-300;
+      color: $gray-disabled;
       cursor: default;
       .icon {
-        fill: $gray-300;
+        fill: $gray-disabled;
       }
     }
 
@@ -140,6 +140,9 @@
     }
     .icon {
       fill: $gray-secondary;
+      &:hover {
+        fill: $color-text-primary-hover;
+      }
     }
     &.active {
       .icon {
@@ -158,7 +161,8 @@
     display: flex;
   }
 
-  //dark version
+  // Dark version
+  // Missing in the UI kit v3.x.x
   &.nav-dark {
     background-color: $gray-primary;
     border-bottom: none;
@@ -206,16 +210,16 @@
     //grey fullwidth bottom border for ul
     .nav-item-filler {
       flex-grow: 1;
-      border-bottom: 1px solid $gray-border-disabled;
+      border-bottom: 1px solid $color-border-subtle;
     }
     .nav-link {
       border-bottom-width: 2px;
       border-color: transparent;
       position: relative;
-      border-bottom-color: $gray-border-disabled;
+      border-bottom-color: $color-border-subtle;
       border-radius: $border-radius $border-radius 0 0;
       &.active {
-        border: 1px solid $gray-border-disabled;
+        border: 1px solid $color-border-subtle;
         border-bottom-color: transparent;
         border-bottom-width: 1px;
       }
@@ -227,7 +231,7 @@
     .nav-item {
       position: relative;
       &:last-of-type {
-        border-bottom: 1px solid $gray-border-disabled;
+        border-bottom: 1px solid $color-border-subtle;
       }
     }
 
@@ -243,7 +247,7 @@
       width: 1.444rem;
       height: 1.444rem;
       top: 0.8rem;
-      border: 1px solid $gray-border-disabled;
+      border: 1px solid $color-border-subtle;
       border-radius: 50%;
       right: 0;
       //plus sign
@@ -277,16 +281,16 @@
       position: absolute;
       top: calc(50% - 0.9rem);
       right: 0.889rem;
-      color: $neutral-1-a7;
+      color: $color-text-secondary;
       transition: color 0.2s;
       .icon {
-        fill: $neutral-1-a7;
+        fill: $color-text-secondary;
       }
       &.disabled {
-        color: $gray-300;
+        color: $gray-disabled;
         cursor: pointer;
         .icon {
-          fill: $gray-300;
+          fill: $gray-disabled;
         }
       }
       &:hover {
@@ -320,7 +324,7 @@
 .flex-column-reverse {
   .nav-tabs {
     border-bottom: none;
-    border-top: 1px solid $gray-border-disabled;
+    border-top: 1px solid $color-border-subtle;
     .nav-link {
       border-bottom: none;
       border-top: 2px solid transparent;
@@ -345,7 +349,7 @@
     }
     &.nav-tabs-vertical {
       border-right: none;
-      border-left: 1px solid $gray-border-disabled;
+      border-left: 1px solid $color-border-subtle;
       .nav-link {
         justify-content: flex-start;
         border-bottom: none;

package/src/scss/custom/_timeline.scss

@@ -45,7 +45,7 @@
       box-shadow: $card-shadow;
       border: $timeline-pin-circle-border;
       margin-right: $v-gap * 2;
-      background: #fff;
+      background: $white;
     }
     svg {
       width: $timeline-pin-size;
@@ -53,10 +53,10 @@
       fill: $primary;
     }
     .pin-text {
-      color: $select-label-color;
+      color: $white;
       font-weight: 600;
       text-transform: uppercase;
-      background: $primary-c1;
+      background: $timeline-pin-background;
       border-radius: $border-radius;
       font-family: $font-family-monospace;
 
@@ -68,7 +68,7 @@
           content: '';
           width: 10px;
           height: 10px;
-          background: $primary-c1;
+          background: $timeline-pin-background;
           border-radius: 3px;
           position: absolute;
           left: -4px;
@@ -82,10 +82,9 @@
         background: $primary;
       }
       svg {
-        fill: #fff;
+        fill: $white;
       }
       .pin-text {
-        color: #fff;
         background: $primary;
         span {
           &:after {
@@ -96,17 +95,16 @@
     }
     &.it-evidence {
       .pin-icon {
-        background: $primary-a10;
+        background: $timeline-pin-background;
       }
       svg {
-        fill: #fff;
+        fill: $white;
       }
       .pin-text {
-        color: #fff;
-        background: $primary-a10;
+        background: $timeline-pin-background;
         span {
           &:after {
-            background: $primary-a10;
+            background: $timeline-pin-background;
           }
         }
       }

package/src/scss/custom/_toolbar.scss

@@ -246,7 +246,7 @@
         min-width: 1px; // fix for IE11
         max-width: 1px;
         height: calc(100% - 16px);
-        background: $gray-border-disabled;
+        background: $gray-border;
       }
     }
   }
@@ -254,9 +254,9 @@
   a,
   .btn-dropdown {
     display: block;
-    color: $neutral-1;
+    color: $color-text-secondary;
     .icon {
-      fill: $neutral-1;
+      fill: $secondary;
     }
     // active
     &.active {
@@ -268,30 +268,30 @@
     // disabled
     &.disabled {
       cursor: not-allowed;
-      color: $neutral-1-a2;
+      color: $gray-disabled;
       .icon {
-        fill: $neutral-1-a2;
+        fill: $gray-disabled;
       }
       &:hover {
         text-decoration: none;
-        color: $neutral-1-a2;
+        color: $gray-disabled;
         .icon {
-          fill: $neutral-1-a2;
+          fill: $gray-disabled;
         }
       }
       &:after {
-        color: $neutral-1-a2;
+        color: $gray-disabled;
         .icon {
-          fill: $neutral-1-a2;
+          fill: $gray-disabled;
         }
       }
     }
     // hover
     &:not(.disabled):hover {
       text-decoration: underline;
-      color: $primary;
+      color: $color-text-primary-hover;
       .icon {
-        fill: $primary;
+        fill: $color-text-primary-hover;
       }
     }
     // hover fix for ie11
@@ -333,7 +333,7 @@
       height: 0;
       border-style: solid;
       border-width: 4px 3px 0 3px;
-      border-color: $neutral-1 transparent transparent transparent;
+      border-color: $secondary transparent transparent transparent;
       position: absolute;
       top: 16px;
       right: 2px;

package/src/scss/custom/_tooltip.scss

@@ -9,7 +9,7 @@
   //text
   .tooltip-inner {
     padding: 7px $v-gap * 2;
-    background-color: $gray-primary;
+    background-color: $color-background-emphasis;
     a {
       color: $white;
       text-decoration: underline;

package/src/scss/custom/_version.scss

@@ -1,3 +1,3 @@
 :root {
-  --bootstrap-italia-version: '2.2.0';
+  --bootstrap-italia-version: '2.3.1';
 }

package/src/scss/utilities/colors_vars.scss

@@ -5,15 +5,15 @@
 $black: hsl(0, 0%, 0%) !default;
 $white: hsl(0, 0%, 100%) !default;
 
-$gray-100: hsb(225, 0, 90) !default;
-$gray-200: hsb(225, 0, 80) !default;
-$gray-300: hsb(225, 0, 70) !default;
-$gray-400: hsb(225, 0, 60) !default;
-$gray-500: hsb(225, 0, 50) !default;
-$gray-600: hsb(225, 0, 40) !default;
-$gray-700: hsb(225, 0, 30) !default;
-$gray-800: hsb(225, 0, 20) !default;
-$gray-900: hsb(225, 0, 10) !default;
+$gray-100: hsl(0, 0%, 96%) !default; // color-gray-96
+$gray-200: hsl(0, 0%, 90%) !default; // color-gray-90
+$gray-300: hsl(0, 0%, 83%) !default; // color-gray-83
+$gray-400: hsl(0, 0%, 64%) !default; // color-gray-64
+$gray-500: hsl(0, 0%, 45%) !default; // color-gray-45
+$gray-600: hsl(0, 0%, 32%) !default; // color-gray-32
+$gray-700: hsl(0, 0%, 25%) !default; // color-gray-25
+$gray-800: hsl(0, 0%, 15%) !default; // color-gray-15
+$gray-900: hsl(0, 0%, 10%) !default; // color-gray-10
 
 $grays: () !default;
 $grays: map-merge(
@@ -39,38 +39,39 @@ $grays: map-merge(
 $primary-h: 210 !default;
 $primary-s: 100 !default;
 $primary-b: 80 !default;
+$primary-l: 40 !default; // Kit UI
 
-$primary: hsb($primary-h, $primary-s, $primary-b) !default;
+$primary: hsl(210, 100%, 40%) !default; // color-blue-40
 
 $indigo: hsb(243, 70, 100) !default;
 $purple: hsb(243, 40, 100) !default;
 $pink: hsb(350, 30, 100) !default;
-$red: hsb(351, 75, 97) !default;
-$orange: hsb(36, 100, 100) !default;
+$red: hsl(350, 60%, 50%) !default; // color-red-50
+$orange: hsl(36, 100%, 30%) !default; // color-orange-30
 $yellow: hsb(44, 55, 100) !default;
-$green: hsb(159, 100, 80) !default;
-$teal: hsb(178, 95, 85) !default;
+$green: hsl(160, 100%, 25%) !default; // color-emerald-25
+$teal: hsl(178, 90%, 32%) !default;
 $cyan: hsb(178, 100, 100) !default;
 $blue: hsb(210, 100, 90) !default;
 $light: hsb(255, 5, 95) !default;
-$dark: hsb(210, 70, 30) !default;
+$dark: hsl(210, 54%, 20%) !default; // color-slate-20
 
 $yiq-text-light: $white !default;
 $yiq-text-dark: $black !default;
 
-$red-accessible: hsb(351, 75, 85) !default;
-$orange-accessible: hsb(36, 100, 65) !default;
+$red-accessible: $red !default;
+$orange-accessible: $orange !default;
 $yellow-accessible: hsb(44, 100, 59) !default;
-$green-accessible: hsb(159, 100, 53) !default;
+$green-accessible: $green !default;
 
 $gray-primary: hsb(210, 38.9, 44.3) !default;
-$gray-secondary: hsb(210, 29, 51) !default;
+$gray-secondary: hsl(210, 17%, 44%) !default; // color-slate-44
 $gray-tertiary: hsb(205, 35, 54) !default;
 $gray-quaternary: hsb(238, 1, 100) !default;
-$gray-border: hsb(240, 1, 70) !default;
-$gray-disabled: hsb(225, 5, 95) !default;
-$gray-label-disabled: hsb(222, 5, 79) !default;
-$gray-border-disabled: hsb(224, 8, 95) !default;
+$gray-border: hsl(210, 4%, 78%) !default; // color-border-subtle
+$gray-disabled: hsl(210, 3%, 85%) !default; // color-background-disabled
+$gray-label-disabled: hsl(210, 12%, 44%) !default; // color-text-disabled
+$gray-border-disabled: $gray-disabled !default; // color-border-disabled
 
 $secondary: $gray-secondary !default;
 
@@ -102,7 +103,7 @@ $border-color: $gray-border !default;
 
 // Info Colors
 $success: $green-accessible !default;
-$info: $gray-400 !default;
+$info: $secondary !default;
 $warning: $orange-accessible !default;
 $danger: $red-accessible !default;
 
@@ -167,20 +168,20 @@ $neutral-2-b: 95;
 $neutral-2: hsb($neutral-2-h, $neutral-2-s, $neutral-2-b) !default;
 
 // Light Greys A
-$lightgrey-a1: #e8f2fc;
+$lightgrey-a1: hsl(210, 3%, 85%); // progress-background-default
 $lightgrey-a2: #edf5fc;
-$lightgrey-a3: #f2f7fc;
+$lightgrey-a3: hsl(210, 62%, 97%); // color-background-primary-lighter
 $lightgrey-a4: #f5f9fc;
 
 // Light Greys B
-$lightgrey-b1: #e6f0fa;
+$lightgrey-b1: hsl(210, 62%, 97%); // color-background-primary-lighter
 $lightgrey-b2: #ebf2fa;
 $lightgrey-b3: #edf4fa;
 $lightgrey-b4: #f2f6fa;
 
 // Light Greys C
 $lightgrey-c1: #f7f9fa;
-$lightgrey-c2: #f5f6f7;
+$lightgrey-c2: hsl(210, 62%, 97%); // color-background-primary-lighter;
 
 //***********************************************************************
 //********************Primary color variations***************************
@@ -387,3 +388,38 @@ $neutral-2-a4: hsb($neutral-2-h, $neutral-2-s + 2, $neutral-2-b - 45) !default;
 $neutral-2-a5: hsb($neutral-2-h, $neutral-2-s + 2, $neutral-2-b - 60) !default;
 $neutral-2-a6: hsb($neutral-2-h, $neutral-2-s + 2, $neutral-2-b - 75) !default;
 $neutral-2-a7: hsb($neutral-2-h, $neutral-2-s + 4, $neutral-2-b - 85) !default;
+
+//==================== DESIGN TOKENS VARIABLES ============================//
+
+// SEMANTIC TOKENS =========================================================
+
+// Backgrounds
+$color-background-emphasis: hsl(210, 54%, 20%); // color-slate-20
+$color-background-primary-lighter: hsl(210, 62%, 97%); // color-blue-97
+$color-background-secondary-hover: hsl(210, 33%, 28%); // color-slate-28
+$color-background-secondary-lighter: hsl(210, 3%, 85%); // color-slate-85
+$color-background-muted: $gray-100; // color-gray-96
+
+// Borders
+$color-border-secondary: hsl(210, 17%, 44%); // color-slate-44
+$color-border-subtle: hsl(210, 4%, 78%); // color-slate-78
+$color-border-warning: hsl(36, 100%, 30%); // color-orange-30
+
+// Text
+$color-text-primary-active: hsl(210, 100%, 15%); // color-blue-15
+$color-text-primary-hover: hsl(210, 100%, 30%); // color-blue-30
+$color-text-muted: hsl(210, 17%, 44%); // color-slate-44
+$color-text-base: $gray-900; // color-gray-10
+$color-text-secondary: hsl(210, 33%, 28%); // color-slate-28
+$color-text-warning: hsl(36, 100%, 30%); // color-orange-30
+
+// SPECIFIC TOKENS =========================================================
+//
+// Footer
+$footer-top-background: hsl(210, 100%, 30%); // color-blue-30
+$footer-bottom-background: hsl(210, 100%, 20%); // color-blue-20
+
+// Icons
+$icon-primary: $primary;
+$icon-secondary: $secondary;
+$icon-base: $color-text-base;

package/src/svg/it-mastodon-square.svg

@@ -0,0 +1,3 @@
+<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="M3.56696 1.33333H20.3289C20.9351 1.33333 21.5165 1.57414 21.9451 2.0028C22.3738 2.43145 22.6146 3.01283 22.6146 3.61904V20.3809C22.6146 20.9872 22.3738 21.5685 21.9451 21.9972C21.5165 22.4258 20.9351 22.6667 20.3289 22.6667H3.56696C2.96076 22.6667 2.37937 22.4258 1.95072 21.9972C1.52207 21.5685 1.28125 20.9872 1.28125 20.3809V3.61904C1.28125 3.01283 1.52207 2.43145 1.95072 2.0028C2.37937 1.57414 2.96076 1.33333 3.56696 1.33333ZM19.1807 13.5918C18.9602 14.7205 17.2058 15.9557 15.1909 16.1951C14.1403 16.3198 13.1058 16.4345 12.0027 16.3841C10.1987 16.3019 8.77521 15.9557 8.77521 15.9557C8.77521 16.1304 8.78604 16.2968 8.8077 16.4524C9.04223 18.2238 10.5731 18.3299 12.0231 18.3794C13.4867 18.4292 14.79 18.0204 14.79 18.0204L14.8501 19.3369C14.8501 19.3369 13.8264 19.8838 12.0027 19.9844C10.9971 20.0394 9.74843 19.9592 8.2941 19.5762C5.13991 18.7456 4.59746 15.4003 4.51446 12.006C4.49586 11.265 4.49936 10.5551 4.50252 9.91519C4.50366 9.68479 4.50475 9.46347 4.50475 9.25305C4.50475 5.78217 6.79039 4.7648 6.79039 4.7648C7.94286 4.23818 9.92041 4.01672 11.9763 4H12.0268C14.0826 4.01672 16.0615 4.23818 17.2139 4.7648C17.2139 4.7648 19.4994 5.78217 19.4994 9.25305C19.4994 9.25305 19.5281 11.8139 19.1807 13.5918ZM15.13 13.725H16.8034V9.52235C16.8034 8.66342 16.5836 7.98086 16.1422 7.47588C15.6868 6.9709 15.0906 6.71204 14.3505 6.71204C13.4941 6.71204 12.8456 7.03952 12.4169 7.69458L12 8.38981L11.5832 7.69458C11.1544 7.03952 10.5059 6.71204 9.64955 6.71204C8.90939 6.71204 8.31314 6.9709 7.85785 7.47588C7.41634 7.98086 7.19653 8.66342 7.19653 9.52235V13.725H8.86997V9.64588C8.86997 8.786 9.2336 8.34955 9.96093 8.34955C10.7651 8.34955 11.1683 8.86729 11.1683 9.89104V12.1238H12.8318V9.89104C12.8318 8.86729 13.2349 8.34955 14.039 8.34955C14.7664 8.34955 15.13 8.786 15.13 9.64588V13.725Z" fill="black"/>
+</svg>

package/src/svg/it-mastodon.svg

@@ -0,0 +1,3 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M15.5273 16.7195C17.794 16.4502 19.7677 15.0606 20.0158 13.7908C20.4066 11.7906 20.3744 8.90969 20.3744 8.90969C20.3744 5.00494 17.8031 3.86039 17.8031 3.86039C16.5067 3.26795 14.2805 3.01881 11.9676 3H11.9108C9.59796 3.01881 7.37322 3.26795 6.07669 3.86039C6.07669 3.86039 3.50535 5.00494 3.50535 8.90969C3.50535 9.14641 3.50412 9.39539 3.50284 9.65459C3.49928 10.3744 3.49534 11.1731 3.51627 12.0067C3.60964 15.8253 4.2199 19.5888 7.76836 20.5233C9.40448 20.9541 10.8092 21.0443 11.9405 20.9825C13.9922 20.8693 15.1439 20.254 15.1439 20.254L15.0762 18.7729C15.0762 18.7729 13.6101 19.2329 11.9635 19.1768C10.3322 19.1212 8.61001 19.0018 8.34616 17.009C8.32179 16.8339 8.30961 16.6467 8.30961 16.4502C8.30961 16.4502 9.91103 16.8396 11.9405 16.9322C13.1815 16.9888 14.3453 16.8598 15.5273 16.7195ZM17.3414 13.9406H15.4588V9.35161C15.4588 8.38425 15.0497 7.89325 14.2314 7.89325C13.3267 7.89325 12.8733 8.4757 12.8733 9.62742V12.1393H11.0018V9.62742C11.0018 8.4757 10.5483 7.89325 9.64355 7.89325C8.8253 7.89325 8.41622 8.38425 8.41622 9.35161V13.9406H6.5336V9.21264C6.5336 8.24635 6.78088 7.47847 7.27758 6.91037C7.78978 6.34227 8.46057 6.05104 9.29325 6.05104C10.2566 6.05104 10.9862 6.41946 11.4686 7.1564L11.9375 7.93854L12.4065 7.1564C12.8888 6.41946 13.6183 6.05104 14.5818 6.05104C15.4144 6.05104 16.0852 6.34227 16.5975 6.91037C17.0941 7.47847 17.3414 8.24635 17.3414 9.21264V13.9406Z" fill="black"/>
+</svg>