@net7/boilerplate-arianna 3.2.1 → 3.3.0

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@net7/boilerplate-arianna",
-  "version": "3.2.1",
+  "version": "3.3.0",
   "peerDependencies": {
     "@angular/common": "^13.2.0",
     "@angular/core": "^13.2.0"

package/src/lib/styles/arianna/components/_breadcrumbs.scss

@@ -3,7 +3,7 @@
  *
  * Style for breadcrumbs for desktop and mobile
  */
- 
+
 /* ------------------------------------ *\
     BREADCRUMBS
 \* ------------------------------------ */
@@ -33,8 +33,8 @@
 
     &__item {
         &:after {
-            padding-right: calc($space/2);
-            padding-left: calc($space/2);
+            padding-right: calc($space * 0.5);
+            padding-left: calc($space * 0.5);
         }
 
         &:last-child {
@@ -45,28 +45,27 @@
     }
 
     &__label {
-        padding-right: calc($space/2);
+        padding-right: calc($space * 0.5);
         color: $color-text-light;
     }
 }
 
-
 /* ------------------------------------ *\
    #SMART-BREADCRUMBS-ELLIPSIS
 \* ------------------------------------ */
 .n7-breadcrumbs {
     /* Ellipsis element */
     &__item-ellipsis {
-        margin: calc($space/2) 0;
+        margin: calc($space * 0.5) 0;
         list-style: none;
         cursor: pointer;
 
         &:after {
             content: $breadcrumbs-arrow;
-            padding-right: calc($space/2);
-            padding-left: calc($space/2);
+            padding-right: calc($space * 0.5);
+            padding-left: calc($space * 0.5);
             color: $breadcrumbs-arrow-color;
-            font-family: 'n7-icon' !important;
+            font-family: "n7-icon" !important;
             vertical-align: bottom;
         }
 
@@ -76,7 +75,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #SMART-BREADCRUMBS-TIPPY
 \* ------------------------------------ */
@@ -104,14 +102,12 @@
         margin: 0;
         cursor: pointer;
 
-        
         &:hover {
             color: $color-text-link;
         }
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */

package/src/lib/styles/arianna/components/_bubble-popup-menu.scss

@@ -10,8 +10,8 @@
 .aw-bubble-popup-menu {
     &__close {
         position: absolute;
-        top: $space*1.5;
-        right: $space*1.5;
+        top: $space * 1.5;
+        right: $space * 1.5;
         color: $color-text-light;
         cursor: pointer;
         transition: all $transition-durations;
@@ -22,8 +22,8 @@
     }
 
     &__title {
-        margin-bottom: calc($space/2);
-        padding-right: $space*3;
+        margin-bottom: calc($space * 0.5);
+        padding-right: $space * 3;
         font-weight: $font-weight-black;
     }
 
@@ -42,12 +42,12 @@
             cursor: pointer;
             transition: all $transition-durations;
             margin-right: $space;
-            padding-right: $space*0.8;
+            padding-right: $space * 0.8;
             border-right: 1px solid $color-border-normal;
 
             a {
                 color: $color-text;
-                
+
                 &:hover {
                     color: $color-text-link;
                 }
@@ -84,4 +84,4 @@
 
 /* Retina */
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+}

package/src/lib/styles/arianna/components/_facet.scss

@@ -17,7 +17,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #INPUT TEXT
 \* ------------------------------------ */
@@ -34,7 +33,7 @@
     &__input-text[type="text"] {
         width: 100%;
         box-sizing: border-box;
-        padding-right: $space*4;
+        padding-right: $space * 4;
     }
 
     &__input-text-icon {
@@ -46,13 +45,12 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #LIST
 \* ------------------------------------ */
 .n7-facet {
     &__section-input-link {
-        margin-bottom: calc($space/2);
+        margin-bottom: calc($space * 0.5);
         border-bottom: 1px solid $color-border-normal;
 
         &:last-of-type {
@@ -61,7 +59,7 @@
     }
 
     &__input-link {
-        padding-bottom: calc($space/2);
+        padding-bottom: calc($space * 0.5);
 
         &[class*="color-"] {
             .n7-facet__input-link-text {
@@ -82,7 +80,6 @@
     /* Hover */
     .n7-facet__input-link:hover {
         .n7-facet__input-link-text {
-
         }
     }
 
@@ -90,24 +87,22 @@
     .n7-facet__input-link.is-active {
         &:before {
             content: "\e93d";
-            font-family: 'n7-icon';
+            font-family: "n7-icon";
             margin-right: $space;
             color: $color-success;
         }
 
         .n7-facet__input-link-text {
-
         }
     }
 }
 
-
 /* ------------------------------------ *\
    #SELECT
 \* ------------------------------------ */
 .n7-facet {
     &__section-input-select {
-        width: calc(50% - #{$space*2});
+        width: calc(50% - #{$space * 2});
 
         .n7-facet__section-input,
         .n7-facet__input-select {
@@ -116,7 +111,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #COLORS
 \* ------------------------------------ */
@@ -183,7 +177,7 @@
             .n7-facet__input-link-text {
                 color: $color-organizations;
             }
-            
+
             &:hover {
                 .n7-facet__input-link-icon,
                 .n7-facet__input-link-text {
@@ -250,7 +244,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -265,4 +258,4 @@
 
 /* Retina */
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+}

package/src/lib/styles/arianna/components/_header.scss

@@ -8,7 +8,7 @@
     HEADER
 \* ------------------------------------ */
 .n7-header {
-    padding: 0 $space*2;
+    padding: 0 $space * 2;
 
     // Hide the H1 in the header.
     &__title-subtitle {
@@ -18,7 +18,7 @@
     &__nav-item {
         margin: 0;
         padding: 0;
-        
+
         &.is-active {
             .n7-header__nav-link {
                 background: $header-active-item-color;
@@ -31,7 +31,7 @@
         flex-flow: column nowrap;
         justify-content: center;
         align-items: center;
-        padding: 0 $space*2.5;
+        padding: 0 $space * 2.5;
         text-transform: uppercase;
 
         &:focus {
@@ -41,7 +41,7 @@
 
     &__nav-icon {
         margin-right: 0;
-        margin-bottom: calc($space/2);
+        margin-bottom: calc($space * 0.5);
         font-size: $font-size-l;
     }
 
@@ -50,7 +50,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -58,4 +57,4 @@
 }
 
 @media all and (max-width: $header-breakpoint-mobile-small) {
-}
+}

package/src/lib/styles/arianna/components/_item-preview.scss

@@ -10,7 +10,7 @@
 .n7-item-preview {
     /* Main fields */
     &__title {
-        margin-bottom: $space*1.5; //  calc($space/2);
+        margin-bottom: $space * 1.5;
         font-weight: $font-weight-bold;
         font-size: $font-size-m;
 
@@ -21,7 +21,7 @@
     }
 
     &__text {
-        margin-bottom: $space; //  calc($space/2);
+        margin-bottom: $space;
         color: $color-gray-04;
 
         em {
@@ -32,7 +32,7 @@
 
     /* Metadata wrapper  */
     &__metadata {
-        margin-top: -calc($space/2);
+        margin-top: -calc($space * 0.5);
     }
 
     /* Metadata group */
@@ -41,7 +41,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MAIN-METADATA
 \* ------------------------------------ */
@@ -74,7 +73,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #ENTITIES-METADATA
 \* ------------------------------------ */
@@ -83,10 +81,10 @@
     flex-grow: 0;
     margin-bottom: 0;
     background-color: $color-background-light;
-    padding: calc($space/2) $space;
+    padding: calc($space * 0.5) $space;
     border-radius: $border-radius;
-    box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
-    
+    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
+
     .n7-item-preview__metadata-item-icon {
         font-size: $font-size-m;
         font-weight: $font-weight-bold;
@@ -105,11 +103,11 @@
         &.color-concetto {
             color: $color-concepts;
         }
-        
+
         &.color-cosa-notevole {
             color: $color-things;
         }
-        
+
         &.color-organizzazione {
             color: $color-organizations;
         }
@@ -121,7 +119,7 @@
         &.color-evento {
             color: $color-events;
         }
-        
+
         &.has-image {
             .n7-item-preview__image {
                 width: $item-preview-image-size;
@@ -131,7 +129,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #IS-FULLWIDTH
 \* ------------------------------------ */
@@ -149,11 +146,10 @@
         margin-left: auto;
         flex: 0 0 auto;
         text-align: right;
-        margin-top: -calc($space/2);
+        margin-top: -calc($space * 0.5);
     }
 }
 
-
 /* ------------------------------------ *\
    #VERTICAL-WITH-IMAGE
 \* ------------------------------------ */
@@ -161,7 +157,6 @@
     border-bottom: 0;
 }
 
-
 /* ------------------------------------ *\
    #ENTITIES-COLOURED-TITLE
 \* ------------------------------------ */
@@ -207,18 +202,17 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #RELATION-DESCRIPTION
 \* ------------------------------------ */
 /* Description of the relation with an entity, OC or AL */
 .aw-item-preview-relation {
     display: inline-block;
-    margin-top: $space*1.5;
-    padding: calc($space/2) $space;
+    margin-top: $space * 1.5;
+    padding: calc($space * 0.5) $space;
     background-color: $color-background-light;
     border-radius: $border-radius;
-    box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
+    box-shadow: inset 0 0 8px rgba(0, 0, 0, 0.05);
 
     &__description {
         margin: 0;
@@ -237,20 +231,19 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #ITEM-PREVIEW-WRAPPER
 \* ------------------------------------ */
 /* When the item preview needs to be wrapped with other elements
 like breadcrumbs or relation description */
 .aw-item-preview-wrapper {
-    margin-bottom: $space*1.8;
-    padding-bottom: $space*2.5;
+    margin-bottom: $space * 1.8;
+    padding-bottom: $space * 2.5;
     border-bottom: 1px solid $color-border-light;
     cursor: pointer;
 
     .n7-breadcrumbs {
-        padding: 0 0 $space*1.2 0;
+        padding: 0 0 $space * 1.2 0;
         background-color: transparent;
         cursor: pointer;
 
@@ -260,7 +253,6 @@ like breadcrumbs or relation description */
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */

package/src/lib/styles/arianna/components/_metadata-viewer.scss

@@ -3,7 +3,7 @@
  *
  * Component to display metadata organized and nested in groups.
  */
- 
+
 /* ------------------------------------ *\
    #METADATA-VIEWER
 \* ------------------------------------ */
@@ -11,19 +11,19 @@
     &__group-wrapper {
         break-inside: avoid;
     }
-    
+
     &__group {
         break-inside: auto;
     }
 
     &__item {
-        margin-bottom: $space*2;
+        margin-bottom: $space * 2;
         break-inside: avoid;
     }
 
     &__item-label {
         display: block;
-        margin-bottom: calc($space/2);
+        margin-bottom: calc($space * 0.5);
         font-size: $font-size-m;
     }
 
@@ -41,18 +41,18 @@
     &__item-value {
         dl {
             display: block;
-            margin: $space*1.5 0 $space*1.5 $space*4;
-            padding-bottom: $space*1;
+            margin: $space * 1.5 0 $space * 1.5 $space * 4;
+            padding-bottom: $space * 1;
             border-bottom: 1px solid $color-border-light;
 
             &:last-child {
-                margin-bottom: $space*3;
+                margin-bottom: $space * 3;
                 padding-bottom: 0;
                 border-bottom: 0;
             }
 
             &:first-child {
-                margin-top: $space*2.5;
+                margin-top: $space * 2.5;
             }
 
             div {
@@ -77,7 +77,7 @@
             margin-left: auto;
             font-size: $font-size-s;
             vertical-align: top;
-            
+
             p {
                 display: inline;
                 margin: 0;
@@ -88,7 +88,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -103,4 +102,4 @@
 
 /* Retina */
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+}