@net7/boilerplate-arianna 3.0.1-rc.2

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

@@ -0,0 +1,200 @@
+/**
+ * COLLECTION
+ *
+ * Style for the collection page.
+ */
+
+/* ------------------------------------ *\
+    COLLECTION
+\* ------------------------------------ */
+.aw-collection-layout {
+    margin: $space*3 auto $space*6 auto;
+    max-width: $page-max-width;
+    box-shadow: $search-box-shadow;
+    background-color: $color-background-base;
+    padding-bottom: $space*4;
+    
+    &__header {
+        border-bottom: 1px solid $color-border-light;
+        
+        .n7-inner-title {
+            padding: $space*3;
+        }
+
+        .n7-inner-title__title {
+            margin-bottom: 0;
+            font-size: $font-size-xl;
+        }
+    }
+
+    &__description {
+        padding: $space*3;
+        background-color: $color-background-light;
+        border-bottom: 1px solid $color-border-light;
+    }
+
+    &__description-text {
+        
+    }
+    
+    &__grid {
+        padding: $space*3 $space*3 0 $space*3;
+    }
+    
+    
+    &__btn-more {
+        margin: 0 auto;
+        display: block;
+    }
+}
+
+
+/* ------------------------------------ *\
+    ITEM-PREVIEW
+\* ------------------------------------ */
+.aw-collection-layout {
+    
+    .n7-item-preview,
+    .n7-item-preview.is-overlay.has-color,
+    .n7-item-preview.is-overlay.has-image,
+    .n7-item-preview.is-overlay.has-color.has-image {
+        margin-bottom: $space*3;
+        background-color: $collection-item-preview-default-color;
+        border-radius: $border-radius*2;
+        @include card-box-shadow;
+
+        .n7-item-preview__inner {
+            height: $collection-item-preview-height;
+        }
+
+        .n7-item-preview__content {
+            display: flex;
+            flex-direction: column;
+            justify-content: flex-end;
+            align-items: flex-start;
+            box-sizing: border-box;
+            height: $collection-item-preview-height;
+            padding: $space*3;
+            border-radius: $border-radius*2;
+        }
+
+        .n7-item-preview__title {
+            margin: 0;
+            color: $color-text-inverse;
+            text-align: left;
+            font-size: $font-size-xl;
+            text-align: left;
+            text-shadow: 0 1px 2px rgba( 0,0,0,.05 );
+        }
+        
+        .n7-item-preview__text {
+            margin: $space 0 0 0;
+            color: $color-text-inverse;
+            text-align: left;
+            font-size: $font-size-m;
+            text-align: left;
+            text-shadow: 0 1px 2px rgba( 0,0,0,.05 );
+        }
+
+        .n7-item-preview__image {
+            // background-image: url(/assets/images/arianna/logo_MAXXI_w_alpha.svg);
+            background-size: cover;
+            background-repeat: no-repeat;
+            background-position: center;
+            border-radius: $border-radius*2;
+
+            &:after {
+                border-radius: $border-radius*2;
+            }
+        }
+    }
+
+    .n7-item-preview.has-color {
+        .n7-item-preview__image {
+            &:after {
+                display: none;
+            }
+        }
+    }
+
+    /* Hover */
+    .n7-item-preview,
+    .n7-item-preview.is-overlay.has-color,
+    .n7-item-preview.is-overlay.has-image,
+    .n7-item-preview.is-overlay.has-color.has-image {
+        &:hover {
+            @include card-box-shadow-hover;
+        }
+    }
+}
+
+/* Types colors */
+.aw-collection-layout {
+    
+    .n7-item-preview.is-overlay.is-persona {
+        background-color: $color-people;
+    }
+    .n7-item-preview.is-overlay.is-luogo {
+        background-color: $color-places;
+    }
+    .n7-item-preview.is-overlay.is-concetto {
+        background-color: $color-concepts;
+    }
+    .n7-item-preview.is-overlay.is-cosa-notevole {
+        background-color: $color-things;
+    }
+    .n7-item-preview.is-overlay.is-organizzazione {
+        background-color: $color-organizations;
+    }
+    .n7-item-preview.is-overlay.is-famiglia {
+        background-color: $color-families;
+    }
+    .n7-item-preview.is-overlay.is-evento {
+        background-color: $color-events;
+    }
+
+    /* Oggetti culturali */
+    .n7-item-preview.is-overlay.is-unita-archivistica,
+    .n7-item-preview.is-overlay.is-vestimento,
+    .n7-item-preview.is-overlay.is-fotografia,
+    .n7-item-preview.is-overlay.is-cartografica,
+    .n7-item-preview.is-overlay.is-scheda-dublin-core,
+    .n7-item-preview.is-overlay.is-scheda-oa,
+    .n7-item-preview.is-overlay.is-materiale-musicale,
+    .n7-item-preview.is-overlay.is-opera-arte-contemporanea,
+    .n7-item-preview.is-overlay.is-libro-antico {
+        background-color: $color-oggetto-culturale;
+    }
+
+    /* Aggregazioni logiche */
+    .n7-item-preview.is-overlay.is-fondo-fotografico,
+    .n7-item-preview.is-overlay.is-aggregazione-logica {
+        background-color: $color-aggregazione-logica;
+    }
+}
+
+/* Watermark */
+.aw-collection-layout {
+    .n7-item-preview.is-overlay.has-image.has-watermark {
+        .n7-item-preview__image {
+            background-size: auto 40px;
+            background-position: right 24px top 24px;
+
+            &:after {
+                display: none;
+            }
+        }
+    }
+}
+
+/* ------------------------------------ *\
+    LOADING
+\* ------------------------------------ */
+.aw-collection-layout {
+    .is-loading {
+        .n7-content-placeholder__item {
+            height: $collection-item-preview-height;
+            margin-bottom: $space*3;
+        }
+    }
+}

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

@@ -0,0 +1,344 @@
+/**
+ * ENTITÀ
+ *
+ * Layout for entity page
+ */
+
+/* ------------------------------------ *\
+    ENTITY
+\* ------------------------------------ */
+.aw-entity {
+    display: flex;
+    margin: $space*3 auto $space*6 auto;
+    max-width: $page-max-width;
+    position: relative;
+
+    &__content {
+        flex: 1;
+        min-width: $bubble-chart-column-container-min-width;
+        margin-top: $space*3;
+        background-color: $color-background-base;
+        box-shadow: 0 2px 20px 0 rgba(0,0,0,0.08);
+    }
+}
+
+
+/* ------------------------------------ *\
+   #SIDEBAR
+\* ------------------------------------ */
+.aw-entity {
+    &__sidebar-title-wrapper {
+        padding: $space*2;
+        background-color: $color-background-light;
+        border: 1px solid $color-border-light;
+        box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
+    }
+
+    &__sidebar-title {
+        display: flex;
+        align-items: center;
+        margin: 0;
+        font-size: $font-size-xl;
+
+        .aw-entity__sidebar-title-icon {
+            margin-right: $space*1.5;
+        }
+
+        .color-persona & {
+            color: $color-people;
+        }
+
+        .color-luogo & {
+            color: $color-places;
+        }
+
+        .color-concetto & {
+            color: $color-concepts;
+        }
+
+        .color-cosa-notevole & {
+            color: $color-things;
+        }
+
+        .color-organizzazione & {
+            color: $color-organizations;
+        }
+
+        .color-famiglia & {
+            color: $color-families;
+        }
+
+        .color-evento & {
+            color: $color-events;
+        }
+    }
+
+    &__sidebar-title-text {
+        font-weight: $font-weight-black;
+        line-height: 1.15;
+    }
+
+    &__sidebar-title-wrapper {
+        background: $entity-sidebar-title-background;
+        border-top: 1px solid $color-border-light;
+        border-right: 1px solid $color-border-light;
+        border-left: 1px solid $color-border-light;
+    }
+
+    &__sidebar-title-text {
+        font-weight: $font-weight-black;
+    }
+
+    /* Sidebar nav */
+    &__sidebar {
+        flex: 0 0 $aw-scheda-tree-width;
+        width: $aw-scheda-tree-width;
+
+        .n7-nav {
+            background-color: $color-background-base;
+            box-shadow: 0 2px 20px 0 rgba(0,0,0,0.08);
+        }
+
+        .n7-nav__item {
+            position: relative;
+            padding: $space*2;
+            
+            /* Current item */
+            &.is-selected {
+                .n7-nav__label {
+                    color: $color-text;
+                    font-weight: $font-weight-bold;
+
+                    &:hover {
+                        color: $color-text;
+                    }
+                }
+
+                &::before {
+                    content: '';
+                    display: block;
+                    width: $space;
+                    position: absolute;
+                    top: 0;
+                    right: 0;
+                    bottom: 0;
+                    background: $entity-nav-item-active-decoration-bg;
+                }
+            }
+            // hide overview tab
+            &.overview-tab {
+                display: none;
+            }
+        }
+
+        .n7-nav__link {
+            display: block;
+            padding: 0;
+            border-bottom: 1px solid $color-border-light;
+            color: $color-text-light;
+            text-transform: uppercase;
+            font-size: $font-size-l;
+
+            &:hover {
+                color: $color-text-link;
+            }
+        }
+
+        &:last-of-type {
+            .n7-nav__link {
+                border-bottom: none;
+            }
+        }
+    }
+
+    /* Loading */
+    &__sidebar-title-wrapper-loading {
+        padding: $space*2;
+        background-color: $color-background-light;
+        border: 1px solid $color-border-light;
+        box-shadow: 0 2px 20px 0 rgba(0, 0, 0, 0.08);
+
+        .entity-placeholder-title {
+            height: 29px;
+            margin-bottom: 0;
+        }
+    }
+
+    &__sidebar-nav-loading {
+        background-color: $color-background-base;
+        box-shadow: 0 2px 20px 0 rgba(0,0,0,0.08);
+
+        .n7-content-placeholder {
+            padding: $space*2;
+        }
+
+        .entity-placeholder-nav {
+            height: 25px;
+            margin-bottom: 0;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #CONTENT
+\* ------------------------------------ */
+.aw-entity {
+    &__content-section {
+        padding: $space*3;
+        // border-bottom: 2px solid $color-border-light;
+    }
+
+    &__content-section-header {
+        display: flex;
+        margin-bottom: $space*2.6;
+        align-items: center;
+
+        .n7-btn {
+            margin-left: auto;
+        }
+    }
+    
+    &__content-section-header-decorated {
+        padding-bottom: calc(#{$space}*3 - 0.3em);
+        border-bottom: 1px solid $color-border-light;
+    }
+
+    &__content-section-title {
+        font-weight: $font-weight-normal;
+        font-size: $font-size-xxl;
+    }
+
+    &__overview-description {
+        column-count: 2;
+        font-size: $font-size-m;
+        line-height: 1.70;
+    }
+
+    &-layout__button-wrapper {
+        display: flex;
+        justify-content: flex-end;
+        padding-top: $space*1.5;
+    }
+
+    /* Hover on breadcrumbs */
+    n7-smart-breadcrumbs {
+        cursor: pointer;
+
+        &:hover {
+            + n7-item-preview {
+                .n7-item-preview__title {
+                    color: $color-main;
+                }
+            }
+        }
+    }
+
+    .n7-pagination {
+        margin-top: $space*4;
+    }
+
+    /* Bubble chart */
+    .n7-bubble-chart {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
+
+    #bubbleChartContainer {
+        height: 100%;
+    }
+
+    /* Bubble chart in overview */
+    .aw-entity__bubble-chart-wrapper-small {
+        .n7-bubble-chart {
+            height: $bubble-section-entity-overview;
+        }
+    }
+
+    /* Bubble chart detail */
+    .aw-entity__bubble-chart-wrapper {
+        .n7-bubble-chart {
+            height: $bubble-section-entity-detail;
+        }
+    }
+
+    /* Related entities list */
+    .aw-entity__related-items {
+        // 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) ~ * {
+            .n7-item-preview {
+                margin-bottom: 0;
+                padding-bottom: 0;
+                border-bottom: 0;
+            }
+        }
+    }
+
+    /* Empty state */
+    &__content-section-empty {
+        display: block;
+        margin: $space auto;
+        text-align: center;
+    }
+
+    /* Loading */
+    &__content-loading {
+        flex: 1;
+        min-width: $bubble-chart-column-container-min-width;
+        margin-top: $space*3;
+        background-color: $color-background-base;
+        box-shadow: 0 2px 20px 0 rgba(0,0,0,0.08);
+
+        .aw-entity__content-loading-title {
+            width: 40%;
+            padding: $space*3;
+        }
+
+        .entity-placeholder-title {
+            height: 45px;
+        }
+
+        .aw-entity__content-loading-items {
+            .n7-content-placeholder {
+                padding: $space*1 $space*3;
+            }
+
+            .entity-placeholder-item-preview {
+                height: 25px;
+            }
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: 1120px) {
+
+    .aw-entity {
+        &__overview-description {
+            column-count: 1;
+        }
+
+        .n7-metadata-viewer {
+            column-count: 1;
+        }
+    }
+}
+
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}