design-comuni-plone-theme 12.0.0-alpha.1 → 12.1.0

package/src/theme/ItaliaTheme/Print/_page.scss

@@ -7,15 +7,9 @@
 
       .title-description-wrapper {
         h1 {
-          font-size: 1.5rem;
+          font-size: 1.7rem;
         }
       }
     }
-
-    p {
-      margin-top: 1rem;
-      margin-bottom: 0rem;
-      font-size: 1rem;
-    }
   }
 }

package/src/theme/ItaliaTheme/Subsites/ItaliaTheme/Blocks/_contacts.scss

@@ -15,6 +15,9 @@
           .description {
             color: $subsite-primary-text;
           }
+          a:not(.btn) {
+            color: currentColor;
+          }
         }
 
         .card {

package/src/theme/ItaliaTheme/Views/_common.scss

@@ -367,3 +367,30 @@ dl.trasparenza-fields {
   @include rem-size(font-size, 16px);
   @include rem-size(line-height, 24px);
 }
+
+// CT gallery slider
+.it-carousel-wrapper {
+  .slider-container {
+    .slick-list .slick-track {
+      .slick-slide {
+        position: relative;
+        margin: 0 auto;
+
+        a {
+          height: 150px;
+          &.img-wrapper {
+            position: relative;
+            overflow: hidden;
+            width: 100%;
+            margin: 0;
+
+            img {
+              min-height: 150px;
+              object-fit: cover;
+            }
+          }
+        }
+      }
+    }
+  }
+}

package/src/theme/ItaliaTheme/Views/_servizio.scss

@@ -25,6 +25,12 @@
     .card.border-left-card {
       margin-bottom: 1.2em;
     }
+
+    .richtext-blocks.font-serif {
+      a.btn.btn-primary.inline-link {
+        font-family: 'Titillium Web';
+      }
+    }
   }
 
   #altri_documenti_items {

package/src/theme/ItaliaTheme/Views/_slider.scss

@@ -9,6 +9,10 @@
   }
 
   .it-single-slide-wrapper {
+    &:focus {
+      border: 1px solid;
+    }
+
     figure {
       a {
         display: block;

package/src/theme/ItaliaTheme/Widgets/_blocksWidget.scss

@@ -1,4 +1,5 @@
 .richtext-blocks {
+  clear: both;
   .row-full-width {
     max-width: 100%;
     margin: 0 -20px !important;
@@ -13,3 +14,39 @@
     font-family: $font-family-sans-serif;
   }
 }
+
+// <h> styles for text editor content in CTs
+
+#main-content-section.it-page-sections-container .richtext-blocks {
+  h2 {
+    font-size: 1.555rem;
+    line-height: 1.428;
+    font-weight: 600;
+  }
+
+  h3 {
+    font-size: 1.35rem;
+    line-height: 1.25;
+    font-weight: 600;
+  }
+
+  h4 {
+    font-size: 1.35rem;
+    line-height: 1.25;
+    font-weight: 600;
+    color: $gray-600;
+  }
+
+  h5 {
+    font-size: 1.35rem;
+    line-height: 1.25;
+    font-weight: 600;
+    color: $gray-500;
+  }
+
+  h6 {
+    font-size: 1.2rem;
+    line-height: 1.15;
+    font-weight: 400;
+  }
+}

package/src/theme/ItaliaTheme/Widgets/_reactSelect.scss

@@ -20,6 +20,10 @@
 .react-select__control,
 .react-select__control:hover {
   &.react-select__control--is-focused {
-    box-shadow: 0 0 0 2px $focus-outline-color !important;
+    outline: 2px solid $outer-focus-outline !important;
+    outline-offset: 2px;
+
+    border: none !important;
+    box-shadow: 0 0 0 2px $inner-focus-shadow !important;
   }
 }

package/src/theme/ItaliaTheme/_ar.scss

@@ -1,6 +1,7 @@
 body.is-authenticated {
-  // se l'utente è autenticato e c'è la classe no-user-roles, allora si tratta di un utente del sito che accede solo all'area riservata
-  &.no-user-roles {
+  // se l'utente è autenticato e c'è la classe no-user-roles o role-citizen, allora si tratta di un 
+  // utente del sito (cittadino) che accede solo all'area riservata
+  &.no-user-roles, &.role-citizen {
     #toolbar,
     #sidebar {
       display: none;

package/src/theme/ItaliaTheme/_common.scss

@@ -7,12 +7,14 @@
   button.btn,
   button.rounded-right {
     &:focus {
-      border-color: $focus-outline-color !important;
-      box-shadow:
-        inset 0 1px 0 $focus-outline-color,
-        0 1px 1px $focus-outline-color,
-        0 0 0 0.2rem $focus-outline-color !important;
-      outline: none;
+      outline: 2px solid $outer-focus-outline !important;
+      outline-offset: 2px;
+
+      border: none !important;
+      box-shadow: 0 0 0 2px $inner-focus-shadow !important;
+
+      // adds additional internal black border to buttons
+      border: 2px solid $outer-focus-outline !important;
     }
   }
 
@@ -41,6 +43,9 @@
         0 1px 1px $focus-outline-color,
         0 0 0 0.2rem $focus-outline-color;
       outline: none;
+
+      // adds additional black internal border to tertiary buttons
+      border: 2px solid $focus-outline-color !important;
     }
   }
 

package/src/theme/ItaliaTheme/_home.scss

@@ -2,18 +2,16 @@
 body.public-ui.contenttype-lrf {
   .block-editor-title,
   .documentFirstHeading {
-    display: none;
+    @include visually-hidden;
   }
 }
 
-.sidebar-container-enter-done {
-  z-index: 150000 !important;
-}
-
 body.subsite.subsite-root {
   &,
   .public-ui {
-    .documentFirstHeading,
+    .documentFirstHeading {
+      @include visually-hidden;
+    }
     #briciole {
       display: none;
     }

package/src/theme/ItaliaTheme/_main.scss

@@ -91,7 +91,9 @@ iframe {
     }
 
     ul:last-child,
-    ol:last-child {
+    ol:last-child,
+    p:last-child,
+    p:last-of-type {
       margin-bottom: 0;
     }
 
@@ -121,11 +123,46 @@ iframe {
 }
 
 //slate LINK
+/*
+  Safari rendering issue workaround - B#60364
+  Safari rendering fix, icons and fonts coming late means shenanigans for Safari rendering, as
+  Safari is lazy and slow in loading fonts and icons dynamically.
+  Problem: Safari (tested on Safari 17.6) sometimes fails to calculate the layout correctly
+  when dealing with dynamic content such as lazy-loaded icons or fonts, combined with
+  `display: inline-block`. This can result in improperly positioned elements
+  until the page is re-rendered or refocused.
+
+  Solution: To fix this issue:
+  1. Replace `display: inline-block` with `display: inline-flex`. This ensures Safari
+      handles the box model and inline context properly, especially when the element's
+      size or alignment depends on dynamic content.
+  2. Add `position: relative;` to force a recalculation of layout, resolving rendering quirks.
+
+  Background: Safari's WebKit engine has known issues with `inline-block` combined
+  with delayed content rendering, such as lazy-loaded icons. Switching to `inline-flex`
+  better aligns with modern CSS rendering engines, while `position: relative;`
+  ensures the layout is recalculated.
+
+  References:
+  - CSS-Tricks: What Forces Layout or Reflow: https://css-tricks.com/what-forces-layout-reflow/
+  - WebKit Bug Reports on `inline-block` rendering issues with dynamic content.
+  - Testing and observations on Safari 17.6 behavior with lazy-loaded assets.
+*/
+@supports (-webkit-appearance: none) {
+  a.with-external-link-icon {
+    display: inline-flex; /* Evita problemi con inline-block */
+    position: relative; /* Forza Safari a calcolare il layout reflow correttamente */
+  }
+}
 // .inline-link {
 //   margin-left: 0.5rem;
 //   margin-right: 0.5rem;
 // }
 
+svg.external-link {
+  fill: currentColor;
+}
+
 .slate-editor-link {
   clear: both;
 
@@ -152,6 +189,9 @@ iframe {
         background-color: darken($primary, 8);
         color: $primary-text;
       }
+      &.link-anchorlink-theme {
+        color: $primary-text !important;
+      }
     }
   }
 }
@@ -369,3 +409,13 @@ iframe {
     }
   }
 }
+
+.public-ui
+  .it-header-slim-wrapper
+  .it-header-slim-wrapper-content
+  .it-header-slim-right-zone.header-slim-right-zone
+  .login-button {
+  @media (min-width: #{map-get($grid-breakpoints, md)}) and (max-width:#{map-get($grid-breakpoints, xl)}) {
+    flex: unset;
+  }
+}

package/src/theme/ItaliaTheme/_white-header.scss

@@ -55,7 +55,7 @@
     }
     @media (max-width: map-get($map: $grid-breakpoints, $key: 'lg') - 1px) {
       button.custom-navbar-toggler svg.icon {
-        fill: color-contrast($primary);
+        fill: $primary;
       }
     }
   }

package/src/theme/_cms-ui.scss

@@ -4,10 +4,19 @@ body.cms-ui {
   font-size: 16px;
   line-height: 1.5;
 
+  :focus:not(.focus--mouse),
+  input[type='checkbox']:focus + label:before {
+    outline: 2px solid #000 !important;
+    outline-offset: 2px;
+    border: none !important;
+    box-shadow: 0 0 0 2px #fff !important;
+  }
+
   @include media-breakpoint-up(sm) {
     font-size: 18px;
     line-height: 1.555;
   }
+
   .block {
     font-family: $font-family-sans-serif;
     font-weight: $font-weight-base;
@@ -73,6 +82,48 @@ body.cms-ui {
     .block.text {
       line-height: 1.555;
     }
+
+    &.table {
+      @import 'bootstrap/scss/reboot';
+      @import 'bootstrap/scss/tables';
+      @import 'bootstrap-italia/src/scss/custom/tables';
+      @import 'extras/tables';
+
+      .ui.table {
+        &.inverted {
+          th,
+          td {
+            border-color: inherit !important;
+          }
+        }
+        thead th {
+          font-weight: bold;
+          text-transform: unset;
+          color: var(--bs-table-color);
+        }
+
+        &.very.basic {
+          &:not(.sortable):not(.striped) {
+            th:first-child,
+            td:first-child {
+              padding-left: 0.5rem;
+            }
+            thead tr:first-child th {
+              padding-top: 0.5rem;
+            }
+            td:last-child {
+              padding-right: 0.5rem;
+            }
+          }
+        }
+
+        &.striped {
+          tbody tr:nth-child(2n) {
+            background-color: rgba(0, 0, 50, 0.02) !important;
+          }
+        }
+      }
+    }
   }
 
   &.contenttype-document,
@@ -88,14 +139,15 @@ body.cms-ui {
 
   .simple-text-editor-widget {
     .simple-text-input {
-      min-width: 1px;
       display: inline-block;
+      min-width: 1px;
+
       &:empty:before {
-        content: attr(placeholder);
-        pointer-events: none;
         display: block; /* For Firefox */
+        content: attr(placeholder);
         font-weight: inherit;
         opacity: 0.333;
+        pointer-events: none;
       }
     }
   }
@@ -106,6 +158,12 @@ body.cms-ui {
     }
   }
 
+  .blocks-widget-container {
+    .block.table .toolbar {
+      top: -3.34rem;
+    }
+  }
+
   .it-header-wrapper,
   .public-ui {
     font-size: 18px;
@@ -158,10 +216,10 @@ body.cms-ui {
 
       input#field-link {
         height: auto;
-        color: #444;
-        font-weight: normal;
         height: auto;
+        color: #444;
         font-size: 0.7rem;
+        font-weight: normal;
       }
 
       #field-data-element-select {
@@ -206,32 +264,6 @@ body.cms-ui {
     }
   }
 
-  .skiplinks {
-    position: absolute;
-    top: -100%;
-
-    a {
-      display: inline-block;
-      color: $link-color;
-
-      &:focus {
-        position: fixed;
-        z-index: 9999;
-        top: 10px;
-        left: 10px;
-        padding: 10px;
-        border: 2px solid $link-color;
-        background: #fff;
-        outline: 3px solid $link-color;
-      }
-
-      &:hover {
-        border-color: $link-color;
-        color: $link-color;
-      }
-    }
-  }
-
   .react-select__menu {
     z-index: 11;
 
@@ -266,6 +298,31 @@ body.cms-ui {
     }
   }
 
+  //cookie banner icons
+  // replaced icon code with left and right as they actually render correctly
+  // and rotated the icon
+  &.section-gdpr-cookie-settings {
+    .cookies-widget .move-buttons {
+      i.icon.arrow.up {
+        transform: rotate(90deg);
+        &::before {
+          content: '\e911';
+        }
+      }
+
+      i.icon.arrow.down {
+        transform: rotate(90deg);
+        &::before {
+          content: '\e905';
+        }
+      }
+    }
+  }
+
+  .sidebar-container-enter-done {
+    z-index: 150000 !important;
+  }
+
   .sidebar-container .object-listing,
   .icon-align-name {
     svg.icon {
@@ -276,6 +333,11 @@ body.cms-ui {
     }
   }
 
+  /*Block chooser*/
+  [data-popper-placement] {
+    z-index: 1000;
+  }
+
   .sidebar-container {
     .numbers-block-sidebar-form-container {
       padding-bottom: 1rem;
@@ -350,6 +412,11 @@ body.cms-ui {
         }
       }
     }
+
+    .slate-editor ul li {
+      display: list-item;
+      padding: 0;
+    }
   }
 
   .icon-align-name {
@@ -387,6 +454,7 @@ body.cms-ui {
     .button.tertiary.active {
       background-color: $tertiary;
     }
+
     .button.success,
     .button.success.active {
       background-color: $success;
@@ -406,6 +474,7 @@ body.cms-ui {
     .button.callout_default.active {
       background-color: $secondary;
     }
+
     .button.callout_note,
     .button.callout_note.active {
       background-color: $primary;
@@ -460,6 +529,14 @@ body.cms-ui {
   }
 
   &.section-controlpanel {
+    .grid > .row {
+      // HIDE TAXONOMIES CONTROLPANEL UNTIL #62343 IS DONE
+      > .column:has([href='/controlpanel/taxonomies']),
+      > .column:has([href='/controlpanel/volto-settings']) {
+        display: none;
+      }
+    }
+
     a {
       text-decoration: none;
 
@@ -473,6 +550,18 @@ body.cms-ui {
         display: none;
       }
     }
+    // Hide the help text in the configuration widgets
+    // TODO this is a temporary fix, a release needs to be made on every add-on to fix this
+    .footer-configuration-widget .stretched.twelve.wide.column:has(p.help),
+    .slimheader-configuration-widget
+      .wrapper:has(label[for='menu-configuration']),
+    .subfooter-configuration-widget
+      .wrapper:has(label[for='menu-configuration']),
+    .secondary-menu-configuration-widget
+      .wrapper:has(label[for='menu-configuration']),
+    .menu-configuration-widget .wrapper:has(label[for='menu-configuration']) {
+      display: none !important;
+    }
   }
 
   [data-rbd-draggable-context-id] {
@@ -544,6 +633,12 @@ body.cms-ui {
   }
 
   #page-login {
+    .ui.text.container,
+    .ui.form input[type='text'],
+    .ui.form input[type='password'] {
+      font-family: $font-family-sans-serif;
+    }
+
     .help {
       a {
         color: $link-color;
@@ -601,6 +696,14 @@ body.cms-ui {
     }
   }
 
+  #page-password-reset {
+    &,
+    h1,
+    .ui.message .header {
+      font-family: $font-family-sans-serif;
+    }
+  }
+
   .objectbrowser-field {
     .selected-values {
       .ui.label {
@@ -643,6 +746,22 @@ body.cms-ui {
     @import 'bootstrap-italia/src/scss/custom/card';
     @import './bootstrap-override/bootstrap-italia/_card.scss';
   }
+
+  .recurrence-form {
+    .byday-field {
+      .ui.button {
+        padding: 0px;
+      }
+    }
+
+    .byyear-field {
+      .byyear-byday {
+        display: flex;
+        flex-wrap: wrap;
+        align-items: center;
+      }
+    }
+  }
 }
 
 body.has-toolbar {

package/src/theme/_mixins.scss

@@ -5,3 +5,16 @@
 @mixin margin-size($key, $value) {
   #{$key}: calc($value / 18) + em;
 }
+
+@mixin blocks-with-bg-edit-buttons {
+  > .ui.basic.button.delete-button {
+    padding: 0.35rem;
+    text-align: center;
+    border-radius: 100%;
+    top: -0.25rem;
+
+    &:not(:hover):not(:focus):not(:focus-within) {
+      color: #fff !important;
+    }
+  }
+}

package/src/theme/_site-variables.scss

@@ -16,7 +16,7 @@ $primary-text: #fff !default;
 $secondary-text: #fff !default;
 $tertiary: #be2816 !default;
 $tertiary-text: #fff !default;
-$highlight-search: #ff0 !default;
+$highlight-search: #ffff00 !default;
 $font-family-monospace-light: Roboto Mono Light !default;
 
 // Per abilitare l'header bianco impostare a true
@@ -30,12 +30,7 @@ $gdpr-accept-all: #005700 !default;
 $gdpr-toggle-checked: #005700 !default;
 $gdpr-toggle: #b22515 !default;
 $gdpr-toggle-border: #000 !default;
-$gdpr-focus-color: #ff9800 !default;
 $gdpr-link-color: #004285 !default;
-$gdpr-focus-shadow:
-  inset 0 1px 0 rgba(255, 255, 255, 0.15),
-  0 1px 1px rgba(0, 0, 0, 0.075),
-  0 0 0 0.2rem $gdpr-focus-color !default;
 
 $caption-text: #455b71 !default;
 
@@ -63,3 +58,7 @@ $dvt-navigation-v-padding: 15px !default;
 $spacer: 16px;
 $ribbon-spacing-h: calc($spacer * 3);
 $ribbon-width: calc($spacer * 2);
+
+// accessible focus colors
+$outer-focus-outline: #000 !default;
+$inner-focus-shadow: #fff !default;

package/src/theme/bootstrap-override/_bootstrap-italia-site.scss

@@ -109,7 +109,9 @@
   @import 'bootstrap-italia/src/scss/custom/form-toggles';
   @import 'bootstrap-italia/src/scss/custom/form-password';
   @import 'bootstrap-italia/src/scss/custom/form-select';
+  @import './bootstrap-italia/form-select';
   @import 'bootstrap-italia/src/scss/custom/form-transfer';
+  @import './bootstrap-italia/forms';
   @import 'bootstrap-italia/src/scss/custom/dropdown';
   @import 'bootstrap-italia/src/scss/custom/pager';
   @import 'bootstrap-italia/src/scss/custom/tab';
@@ -140,6 +142,7 @@
   @import 'bootstrap-italia/src/scss/custom/dialog';
   @import 'bootstrap-italia/src/scss/custom/notifications';
   @import 'bootstrap-italia/src/scss/custom/avatar';
+  @import './bootstrap-italia/avatar';
   @import 'bootstrap-italia/src/scss/custom/thumbnav';
   @import 'bootstrap-italia/src/scss/custom/steppers';
   @import './bootstrap-italia/steppers';

package/src/theme/bootstrap-override/bootstrap/_print.scss

@@ -145,6 +145,7 @@
     // We don't set margin here because it breaks `size` in Chrome. We also
     // don't use `!important` on `size` as it breaks in Chrome.
     @page {
+      margin: 0rem;
       size: $print-page-size;
     }
   }

package/src/theme/bootstrap-override/bootstrap-italia/_avatar.scss

@@ -0,0 +1,28 @@
+// @import 'bootstrap-italia/src/scss/variables';
+@use 'sass:math';
+// $avatar-base-size: 8px;
+
+.avatar {
+  &.size-lg {
+    //  Dal figma, sti tondi sono 64x64
+    width: $avatar-base-size * 8;
+    height: $avatar-base-size * 8;
+    p {
+      font-size: 24px;
+    }
+    .icon {
+      height: 28px;
+      width: 28px;
+    }
+    .avatar-presence,
+    .avatar-status {
+      right: 2px;
+      width: 14px;
+      height: 14px;
+    }
+
+    .avatar-status {
+      top: math.div($avatar-base-size, 28);
+    }
+  }
+}