@net7/boilerplate-arianna 3.2.3 → 3.3.0

package/src/lib/styles/arianna/layouts/_scheda-layout.scss

@@ -4,13 +4,13 @@
  * Layout for page detail of Cultural Objects and Aggregations.
  * Includes traa navigation on the right.
  */
- 
+
 /* ------------------------------------ *\
     LAYOUT
 \* ------------------------------------ */
 .aw-scheda {
-    padding-top: $space*3;
-    margin-bottom: $space*6;
+    padding-top: $space * 3;
+    margin-bottom: $space * 6;
 
     &__content {
         display: flex;
@@ -26,7 +26,9 @@
 
         &.is-sticky {
             .n7-tree {
-                height: calc(100% - #{$sidebar-header-height}); /* space for sidebar header */
+                height: calc(
+                    100% - #{$sidebar-header-height}
+                ); /* space for sidebar header */
                 overflow-y: auto;
                 overflow-x: hidden;
             }
@@ -38,11 +40,11 @@
         min-width: $bubble-chart-column-container-min-width;
         position: relative;
         z-index: 4;
-        box-shadow: 0 2px 20px 0 rgba(0,0,0,0.08);
+        box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
 
         &-no-item {
             width: 50%;
-            margin: $space*5 auto;
+            margin: $space * 5 auto;
             text-align: center;
         }
     }
@@ -53,12 +55,11 @@
     }
 }
 
-
 /* ------------------------------------ *\
     TREE
 \* ------------------------------------ */
 .aw-scheda__tree {
-    box-shadow: 0 2px 20px 0 rgba(0,0,0,0.10);
+    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.1);
 
     .n7-tree {
         background-color: $color-background-base;
@@ -79,7 +80,7 @@
             justify-content: center;
             align-items: center;
             height: 40px;
-            padding: 0 $space*2;
+            padding: 0 $space * 2;
             background-color: $color-background-base;
         }
         .tree-placeholder-item {
@@ -89,7 +90,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
     COLLAPSED
 \* ------------------------------------ */
@@ -113,7 +113,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
     SCHEDA-DETAILS
 \* ------------------------------------ */
@@ -124,7 +123,7 @@
     /* Intro text */
     .aw-scheda__intro-text {
         min-height: 650px;
-        padding: $space*2 $space*2.5;
+        padding: $space * 2 $space * 2.5;
         text-align: left;
 
         h2 {
@@ -132,7 +131,7 @@
         }
 
         h3 {
-            margin-top: $space*2;
+            margin-top: $space * 2;
             font-size: $font-size-l;
         }
 
@@ -141,7 +140,7 @@
         }
 
         li {
-            margin: 0 0 calc($space/2) 0;
+            margin: 0 0 calc($space * 0.5) 0;
             padding: 0;
             color: $color-text;
             font-size: $font-size-m;
@@ -153,8 +152,8 @@
         img {
             float: left;
             margin-top: $space;
-            margin-right: $space*3;
-            margin-bottom: $space*3;
+            margin-right: $space * 3;
+            margin-bottom: $space * 3;
             max-width: 400px;
             max-height: 400px;
             height: auto;
@@ -167,10 +166,10 @@
     .n7-breadcrumbs {
         height: $sidebar-header-height;
         overflow: hidden;
-        padding-left: $space*2;
+        padding-left: $space * 2;
         box-sizing: border-box;
         background-color: $color-background-medium;
-        box-shadow: inset 0 3px 20px rgba(0,0,0,.03);
+        box-shadow: inset 0 3px 20px rgba(0, 0, 0, 0.03);
 
         .n7-breadcrumbs__label {
             &:hover {
@@ -189,7 +188,7 @@
         height: $sidebar-header-height;
         box-sizing: border-box;
         background-color: $color-background-medium;
-        box-shadow: inset 0 3px 20px rgba(0,0,0,.03);
+        box-shadow: inset 0 3px 20px rgba(0, 0, 0, 0.03);
     }
 
     .aw-scheda__fake-breadcrumbs-open {
@@ -197,7 +196,7 @@
         align-items: center;
         height: $sidebar-header-height;
         margin-left: $sidebar-header-height;
-        padding-left: $space*2;
+        padding-left: $space * 2;
         color: $color-text-light;
         cursor: pointer;
         transition: color $transition-durations;
@@ -220,7 +219,8 @@
 
     /* Minor inner titles that describes the various sections */
     .aw-scheda__inner-title {
-        padding: 0 $aw-scheda-content-padding $aw-scheda-content-padding $aw-scheda-content-padding;
+        padding: 0 $aw-scheda-content-padding $aw-scheda-content-padding
+            $aw-scheda-content-padding;
         font-size: $font-size-xxl;
         font-weight: $font-weight-normal;
     }
@@ -229,7 +229,7 @@
     /* Sections that contains ImageViewer, Text, metadata, Buubble chart, Similar objects */
     .aw-scheda__section {
         // margin-bottom: $aw-scheda-content-padding;
-        padding-top: $space*3;
+        padding-top: $space * 3;
         border-bottom: 2px solid $color-border-normal;
 
         &:last-child {
@@ -243,13 +243,14 @@
         padding: $aw-scheda-content-padding;
         columns: 2;
         font-size: $font-size-m;
-        line-height: 1.70;
+        line-height: 1.7;
     }
 
     /* Metadata */
     .aw-scheda__metadata {
         .n7-metadata-viewer {
-            padding: 0 $aw-scheda-content-padding $aw-scheda-content-padding $aw-scheda-content-padding;
+            padding: 0 $aw-scheda-content-padding $aw-scheda-content-padding
+                $aw-scheda-content-padding;
         }
     }
 
@@ -259,7 +260,8 @@
             display: flex;
             align-items: center;
             justify-content: center;
-            padding: 0 $aw-scheda-content-padding $aw-scheda-content-padding $aw-scheda-content-padding;
+            padding: 0 $aw-scheda-content-padding $aw-scheda-content-padding
+                $aw-scheda-content-padding;
             height: $bubble-section-patrimonio;
         }
 
@@ -267,18 +269,19 @@
             height: 100%;
         }
     }
-    
+
     /* Related items */
     .aw-scheda__related {
         overflow: hidden; /* For fake grid gap */
     }
 
     .aw-scheda__related-items {
-        padding: 0 $aw-scheda-content-padding $aw-scheda-content-padding $aw-scheda-content-padding;
+        padding: 0 $aw-scheda-content-padding $aw-scheda-content-padding
+            $aw-scheda-content-padding;
 
         /* Targeting elements in the last row */
-        >*:nth-child(2n + 1):nth-last-child(-n + 2),
-        >*:nth-child(2n + 1):nth-last-child(-n + 2) ~ * {
+        > *:nth-child(2n + 1):nth-last-child(-n + 2),
+        > *:nth-child(2n + 1):nth-last-child(-n + 2) ~ * {
             .n7-item-preview {
                 margin-bottom: 0;
                 padding-bottom: 0;
@@ -294,7 +297,7 @@
 .aw-scheda__scheda-wrapper-loading {
     background-color: $color-background-base;
     z-index: 4;
-    box-shadow: 0 2px 20px 0 rgba(0,0,0,0.08);
+    box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
 }
 
 /* ------------------------------------ *\
@@ -304,9 +307,6 @@
     text-align: center;
 }
 
-
-
-
 /* ------------------------------------ *\
    #DIGITAL OBJECTS: IMAGE VIEWER, EXTERNAL LINKS, PDF
 \* ------------------------------------ */
@@ -314,20 +314,20 @@
     /* Digital object selection */
     &__digital-object-dropdown-label {
         margin: 0 $space 0 0;
-        height: $space*4;
-        line-height: $space*4;
+        height: $space * 4;
+        line-height: $space * 4;
     }
 
     &__digital-object-dropdown {
         display: flex;
-        padding: $space*2 $space*2;
+        padding: $space * 2 $space * 2;
         border-bottom: 2px solid $color-border-normal;
 
         .aw-scheda-dropdown__header {
             display: flex;
             align-items: center;
-            height: $space*4;
-            line-height: $space*4;
+            height: $space * 4;
+            line-height: $space * 4;
             padding: 0 $space;
             border: 1px solid $color-border-normal;
             background-color: $color-background-light;
@@ -345,11 +345,12 @@
         .aw-scheda-dropdown__items {
             display: none;
             position: absolute;
-            padding: $space*2;
+            padding: $space * 2;
             z-index: $z-index-digital-object-modal;
             background-color: $color-background-base;
             border: 1px solid $color-border-normal;
-            box-shadow: 0 1px 1px rgba(0,0,0,0.04), 0 2px 10px rgba(0,0,0,0.04);
+            box-shadow: 0 1px 1px rgba(0, 0, 0, 0.04),
+                0 2px 10px rgba(0, 0, 0, 0.04);
 
             ul {
                 padding: 0;
@@ -401,30 +402,25 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
 @media all and (max-width: 1179px) {
-
     .aw-scheda__scheda-wrapper {
         .n7-inner-title__tools {
             margin-left: 39px;
-            padding-top: calc($space/2);
+            padding-top: calc($space * 0.5);
         }
     }
-
 }
 
 @media all and (max-width: 1120px) {
-
     .aw-scheda__scheda-wrapper {
         /* Description text */
         .aw-scheda__description {
             columns: 1;
         }
     }
-    
 }
 
 @media all and (max-width: $breakpoint-ipad-portrait) {