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

package/src/theme/ItaliaTheme/Blocks/_iconBlocks.scss

@@ -3,21 +3,7 @@
     height: auto;
   }
 
-  .ui.basic.button.delete-button {
-    top: -0.2rem;
-    padding: 0.2rem;
-    border-radius: 100%;
-    line-height: 1rem;
-
-    svg:not(:hover) {
-      fill: #fff !important;
-    }
-
-    &:hover,
-    &:active {
-      background-color: #fff !important;
-    }
-  }
+  @include blocks-with-bg-edit-buttons();
 
   .background-image {
     position: absolute;
@@ -66,6 +52,10 @@
       font-weight: bold;
       line-height: 3rem;
       text-align: center;
+
+      h2 {
+        margin: 0px;
+      }
     }
 
     .description {
@@ -80,7 +70,7 @@
       h4,
       h5,
       h6,
-      a {
+      a:not(.btn) {
         color: #fff;
       }
     }
@@ -101,41 +91,6 @@
       transform: unset;
     }
 
-    .dragsubblock,
-    .ui.basic.button.delete-button {
-      z-index: 3;
-      padding: 0.3rem;
-      border-radius: 100%;
-      background-color: #8bb3b5 !important;
-      line-height: 1rem;
-
-      svg:not(:hover) {
-        fill: #fff !important;
-      }
-
-      &:hover,
-      &:active {
-        background-color: #a4dee1 !important;
-
-        svg {
-          fill: #000 !important;
-        }
-      }
-    }
-
-    .dragsubblock {
-      top: -0.75rem;
-      left: -0.55rem;
-    }
-
-    .ui.basic.button.delete-button {
-      top: -0.7rem;
-      width: unset;
-      height: unset;
-      padding: 0.36rem;
-      text-align: center;
-    }
-
     .link-form-container {
       .ui.input {
         > input {
@@ -175,6 +130,10 @@
       font-weight: bold;
       line-height: 1.8rem;
       text-align: center;
+
+      h3 {
+        margin-bottom: 0px;
+      }
     }
 
     .iconblock-text {

package/src/theme/ItaliaTheme/Blocks/_inEvidenceTemplate.scss

@@ -39,7 +39,7 @@
           height: auto;
           padding: 0;
 
-          figure.img-wrapper {
+          .img-wrapper {
             position: static;
             margin: 0;
           }

package/src/theme/ItaliaTheme/Blocks/_listing.scss

@@ -9,9 +9,6 @@
   }
 
   .event-recurrences-more {
-    position: absolute;
-    bottom: $v-gap * 8;
-
     display: flex;
     align-items: center;
     color: $body-color;

package/src/theme/ItaliaTheme/Blocks/_numbers.scss

@@ -5,21 +5,7 @@
     height: auto;
   }
 
-  > .ui.basic.button.delete-button {
-    top: -0.2rem;
-    padding: 0.2rem;
-    border-radius: 100%;
-    line-height: 1rem;
-
-    svg:not(:hover) {
-      fill: #fff !important;
-    }
-
-    &:hover,
-    &:active {
-      background-color: #fff !important;
-    }
-  }
+  @include blocks-with-bg-edit-buttons();
 
   .background-image {
     position: absolute;
@@ -79,6 +65,10 @@
       font-size: 2.25rem;
       font-weight: bold;
       line-height: 2.8rem;
+
+      h2 {
+        margin: 0;
+      }
     }
   }
 

package/src/theme/ItaliaTheme/Blocks/_photogallerytemplate.scss

@@ -6,7 +6,7 @@
   }
 
   .single-slide {
-    figure.img-wrapper {
+    .img-wrapper {
       height: auto;
       max-height: 500px;
 
@@ -16,7 +16,7 @@
     }
   }
 
-  figure.img-wrapper {
+  .img-wrapper {
     display: flex;
     flex-direction: column;
     justify-content: center;

package/src/theme/ItaliaTheme/Blocks/_search.scss

@@ -129,6 +129,10 @@
         div[class*='-placeholder'] {
           color: #484848;
         }
+
+        input {
+          height: 100%;
+        }
       }
     }
   }
@@ -151,13 +155,15 @@
         border-color: hsl(210deg, 17.6470588235%, 43.35%) !important;
         border-bottom: 1px solid;
         font-size: 1rem;
-        transition: border-color 0.3s ease-in,
+        transition:
+          border-color 0.3s ease-in,
           background-color 0.2s cubic-bezier(0, 1, 0, 1) 0.2s;
 
         &[aria-expanded='true'] {
           border-color: transparent !important;
           box-shadow: 0 1rem 2rem -0.25rem rgba(0, 0, 0, 0.15) !important;
-          transition: background-color 0.2s cubic-bezier(0, 1, 0, 1),
+          transition:
+            background-color 0.2s cubic-bezier(0, 1, 0, 1),
             border-color 0.05s cubic-bezier(1, 0, 1, 0);
         }
 
@@ -252,6 +258,18 @@
       }
     }
   }
+
+  @media (max-width: #{map-get($grid-breakpoints, md)}) {
+    //i filtri della colonna di destra vengono mostrati sotto alla barra di ricerca, prima dei risultati, perchè altrimenti su mobile verrebbero mostrati dopo i risultati.
+    .searchBlock-facets.right-column-facets {
+      > .row > :first-child {
+        order: 1;
+      }
+      .sideColumn {
+        order: 0;
+      }
+    }
+  }
 }
 
 .cms-ui .block.search .sideColumn .columnText .draftjs-buttons a {

package/src/theme/ItaliaTheme/Blocks/_sliderTemplate.scss

@@ -55,7 +55,7 @@
         position: relative;
         margin: 0 auto;
 
-        figure.img-wrapper {
+        .img-wrapper {
           position: relative;
           overflow: hidden;
           width: 100%;
@@ -129,7 +129,7 @@
 
         .slide-wrapper {
           .img-placeholder,
-          figure.img-wrapper {
+          .img-wrapper {
             height: 300px;
 
             img {
@@ -214,7 +214,7 @@
                   height: auto;
                   padding: 0;
 
-                  figure.img-wrapper {
+                  .img-wrapper {
                     position: static;
                     margin: 0;
                   }
@@ -266,7 +266,7 @@
       .slick-slide {
         .slide-wrapper {
           .img-placeholder,
-          figure.img-wrapper {
+          .img-wrapper {
             height: 150px;
 
             img {

package/src/theme/ItaliaTheme/Blocks/_subblocks-edit.scss

@@ -26,7 +26,9 @@
 
   .ui.basic.button.delete-button {
     &:hover,
-    &:active {
+    &:active,
+    &:focus,
+    &:focus-within {
       background-color: #e40166 !important;
       color: #fff;
 

package/src/theme/ItaliaTheme/Blocks/common/_searchBlockFilters.scss

@@ -15,7 +15,11 @@
         min-width: 150px;
 
         &:focus-within {
-          box-shadow: 0 0 0 2px $focus-outline-color;
+          outline: 2px solid $outer-focus-outline !important;
+          outline-offset: 2px;
+
+          border: none !important;
+          box-shadow: 0 0 0 2px $inner-focus-shadow !important;
         }
 
         .react-select__control {
@@ -57,7 +61,11 @@
             }
 
             &.DateInput_input__focused {
-              box-shadow: 0 0 0 2px $focus-outline-color;
+              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/Components/_card.scss

@@ -166,15 +166,35 @@
   }
 }
 
-.block.listing.simpleCard {
-  @include media-breakpoint-down(xl) {
-    .card {
-      row-gap: 0.56em;
+.block.listing {
+  &.simpleCard {
+    @include media-breakpoint-down(xl) {
+      .card {
+        row-gap: 0.56em;
+      }
+
+      .card-body {
+        flex-basis: 100%;
+        margin-left: 0em;
+      }
     }
+  }
 
-    .card-body {
-      flex-basis: 100%;
-      margin-left: 0em;
+  .card {
+    .card-title {
+      &.rassegna-appointment-title {
+        margin-bottom: 0px !important;
+      }
+    }
+
+    .rassegna-info {
+      font-size: 0.9rem;
+      display: inline-flex;
+      column-gap: 0.3rem;
+
+      a {
+        text-decoration: none;
+      }
     }
   }
 }

package/src/theme/ItaliaTheme/Components/_cardLocationItem.scss

@@ -3,3 +3,15 @@
     flex: 0 0 100%;
   }
 }
+
+.card-wrapper.card-teaser-wrapper .card-teaser.location-item .pin-icon {
+  margin-left: -0.5rem;
+  margin-right: 0.25rem;
+  margin-bottom: 0.5rem;
+}
+
+// Full width for last odd card in locations
+.card-wrapper.card-teaser-wrapper
+  .card-teaser.location-item:nth-child(odd):last-child {
+  flex: 0 0 100%;
+}

package/src/theme/ItaliaTheme/Components/_cardPersona.scss

@@ -11,6 +11,10 @@
     // nel momento in cui riusciremo a togliere il padding 0 important
     // dalla classe .card-big-io-comune .card-body globalmente
     padding: 24px !important;
+
+    .card-text {
+      color: $gray-secondary;
+    }
   }
 
   .card-image {
@@ -28,6 +32,17 @@
   .card-title {
     font-size: $card-big-head-size;
     line-height: $card-big-head-l-h;
+
+    a {
+      font-weight: 700;
+    }
+  }
+
+  span.text {
+    font-weight: 600;
+    letter-spacing: 1px;
+    color: $caption-text;
+    font-size: 0.875rem;
   }
 
   &.listing-item {
@@ -47,10 +62,15 @@
 
       h3.card-title {
         a {
-          font-size: 1.3rem;
+          font-size: 1.777rem;
           line-height: 1.5rem;
         }
       }
+
+      .card-text {
+        font-family: 'Lora' !important;
+        color: $card-p-color;
+      }
     }
   }
 }

package/src/theme/ItaliaTheme/Components/_metadata.scss

@@ -10,5 +10,6 @@
   &.bottom-metadata {
     margin: 1rem 0;
     font-size: 0.8rem;
+    clear: both;
   }
 }

package/src/theme/ItaliaTheme/Components/_mobileMenu.scss

@@ -1,5 +1,5 @@
 .navbar {
-  @media (max-width: 991px) {
+  @media (max-width: #{map-get($grid-breakpoints, 'lg') - 1px}) {
     .navbar-collapsable {
       &,
       .public-ui & {
@@ -26,33 +26,29 @@
             display: flex;
             align-items: center;
             justify-content: space-between;
+            text-decoration: none;
+
+            .icon {
+              width: auto;
+            }
           }
 
-          h2 {
-            margin-bottom: 0;
+          .it-brand-title {
             color: $text-color;
-            font-size: 1.5rem;
+            font-size: 1.333rem;
+            font-weight: 700;
           }
 
-          h3 {
-            margin-bottom: 0;
+          .it-brand-tagline {
             color: $gray-secondary;
             font-size: 1rem;
-          }
-
-          svg {
-            width: 3rem;
-            height: 3rem;
+            font-weight: 700;
           }
 
           .it-brand-text {
             flex: 1;
             padding-left: 1rem;
           }
-
-          a {
-            text-decoration: none;
-          }
         }
 
         .navbar-nav {
@@ -143,7 +139,7 @@
     }
   }
 
-  @media (min-width: 992px) {
+  @media (min-width: #{map-get($grid-breakpoints, 'lg')}) {
     .navbar-collapsable {
       .menu-wrapper {
         .it-brand-wrapper,

package/src/theme/ItaliaTheme/Components/_pager.scss

@@ -19,3 +19,13 @@
     }
   }
 }
+
+.pagination-wrapper {
+  li.page-item {
+    button.page-link {
+      .icon.icon-primary.disabled {
+        fill: $gray-600 !important;
+      }
+    }
+  }
+}

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

@@ -1,13 +1,26 @@
 @media print {
+  @page {
+    margin: 0 !important;
+  }
+
   body {
     display: block !important;
   }
 
   .public-ui {
-    // removed underlining from links
     a {
       font-weight: 600 !important;
-      text-decoration: none !important;
+      // text-decoration: none !important;
+      /* i link che non devono essere sottolineati hanno già regole specifiche,
+          a video è necessario mostare che i tag a sono link */
+
+      &.read-more {
+        display: none !important; // omesso il read more nelle card
+      }
+    }
+
+    .text-secondary {
+      color: $body-color !important;
     }
 
     .content-area,
@@ -17,6 +30,24 @@
       page-break-inside: avoid;
     }
 
+    .container {
+      max-width: 98%;
+    }
+
+    // padding/margin
+    .py-5 {
+      padding-top: 20px !important;
+      padding-bottom: 20px !important;
+    }
+
+    .pb-5 {
+      padding-bottom: 20px !important;
+    }
+
+    .pt-5 {
+      padding-top: 20px !important;
+    }
+
     // removed part of header header
     .it-header-slim-wrapper {
       display: none;
@@ -41,10 +72,8 @@
             }
 
             .it-brand-text {
-              .no_toc {
-                color: $link-color;
-                font-size: 2rem !important;
-              }
+              color: $link-color;
+              font-size: 2rem !important;
             }
           }
         }
@@ -76,6 +105,10 @@
       }
     }
 
+    .section {
+      padding: 1.2rem;
+    }
+
     /* Removed shadow and card's padding. Add border*/
     .card {
       border: 1px solid $gray-border !important;
@@ -89,15 +122,34 @@
         border: none !important;
         border-left-width: 0 !important;
       }
+
+      &::after {
+        display: none;
+      }
+
+      &.card-bg {
+        background-color: white !important;
+        color: $body-color !important;
+      }
     }
 
-    //card teaser 3
+    // Card teaser
     .card-wrapper.card-teaser-wrapper.card-teaser-block-3 {
       > .card-teaser {
-        flex: 0 0 32%;
+        flex: 0 0 32.5%;
       }
     }
 
+    .card.card-teaser.simple-card-default-item .card-body .card-title a,
+    .card.card-teaser .card-body .card-title a,
+    .card .card-title a {
+      font-size: 1.1rem !important;
+    }
+
+    .card .card-body .category-top {
+      flex-wrap: wrap;
+    }
+
     #text-tempi_e_scadenze > div > p {
       padding: 1rem 0 0 0 !important;
       box-shadow: none !important;
@@ -155,7 +207,7 @@
       .it-page-sections-container {
         border-top: none;
 
-        .it-carousel-wrapper {
+        .it-carousel-wrapper:not(#galleria) {
           display: none;
         }
 
@@ -223,18 +275,49 @@
       box-shadow: none;
       font-size: 1rem;
     }
+
+    .callout {
+      page-break-inside: avoid;
+
+      .callout-inner {
+        // padding-top: 0px;
+        p {
+          margin-top: -2rem;
+        }
+      }
+    }
+    // buttons
+    button.btn,
+    .btn.btn-primary,
+    .draftjs-buttons a {
+      padding: 0.5rem 1rem;
+      border: 1px solid $link-color;
+      background-color: white;
+      color: $link-color;
+
+      svg.icon {
+        color: $link-color;
+        fill: $link-color;
+      }
+    }
+
+    // blockquote text
+    blockquote.blockquote-card.dark,
+    .blockquote.blockquote-card.dark {
+      border: 1px solid $body-color;
+      background-color: white;
+      color: $body-color;
+
+      a:not(.btn) {
+        color: $body-color;
+      }
+    }
   }
 
   .draft-text-larger {
     font-size: 1.2rem;
   }
 
-  .public-ui .draftjs-buttons a {
-    padding: 0rem;
-    background-color: white;
-    color: $link-color;
-  }
-
   //external link icon
   svg.external-link {
     display: none;