@net7/boilerplate-arianna 3.0.1-rc.2

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

@@ -0,0 +1,278 @@
+/**
+ * ITEM-PREVIEW
+ *
+ * Component used to preview any kind of element with image, title, text, metadata and icons.
+ */
+
+/* ------------------------------------ *\
+   #ITEM-PREVIEW
+\* ------------------------------------ */
+.n7-item-preview {
+    /* Main fields */
+    &__title {
+        margin-bottom: $space*1.5; //  calc($space/2);
+        font-weight: $font-weight-bold;
+        font-size: $font-size-m;
+
+        em {
+            font-style: normal;
+            background-color: $color-highlight;
+        }
+    }
+
+    &__text {
+        margin-bottom: $space; //  calc($space/2);
+        color: $color-gray-04;
+
+        em {
+            font-style: normal;
+            background-color: $color-highlight;
+        }
+    }
+
+    /* Metadata wrapper  */
+    &__metadata {
+        margin-top: -calc($space/2);
+    }
+
+    /* Metadata group */
+    &__metadata-group:last-child {
+        margin-bottom: 0;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MAIN-METADATA
+\* ------------------------------------ */
+.aw-item-preview_metadata {
+    .n7-item-preview__metadata-item {
+        display: inline;
+        align-items: baseline;
+        padding-right: $space;
+        border-right: 1px solid $color-border-normal;
+        line-height: 1.38;
+
+        &:last-of-type {
+            border-right: none;
+        }
+    }
+
+    .n7-item-preview__metadata-item-label {
+        font-size: $font-size-s;
+        font-weight: $font-weight-bold;
+    }
+
+    .n7-item-preview__metadata-item-value {
+        font-size: $font-size-s;
+        font-weight: $font-weight-normal;
+
+        em {
+            font-style: normal;
+            background-color: $color-highlight;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #ENTITIES-METADATA
+\* ------------------------------------ */
+.aw-item-preview-entities {
+    display: inline-block;
+    flex-grow: 0;
+    margin-bottom: 0;
+    background-color: $color-background-light;
+    padding: calc($space/2) $space;
+    border-radius: $border-radius;
+    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;
+    }
+
+    /* Main metadata */
+    .n7-item-preview__metadata-item {
+        &.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;
+        }
+        
+        &.has-image {
+            .n7-item-preview__image {
+                width: $item-preview-image-size;
+                height: $item-preview-image-size;
+            }
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #IS-FULLWIDTH
+\* ------------------------------------ */
+.n7-item-preview.is-fullwidth {
+    .n7-item-preview__metadata {
+        display: flex;
+        align-items: flex-start;
+    }
+
+    .aw-item-preview_metadata {
+        margin-bottom: 0;
+    }
+
+    .aw-item-preview-entities {
+        margin-left: auto;
+        flex: 0 0 auto;
+        text-align: right;
+        margin-top: -calc($space/2);
+    }
+}
+
+
+/* ------------------------------------ *\
+   #VERTICAL-WITH-IMAGE
+\* ------------------------------------ */
+.n7-item-preview.is-vertical.has-image {
+    border-bottom: 0;
+}
+
+
+/* ------------------------------------ *\
+   #ENTITIES-COLOURED-TITLE
+\* ------------------------------------ */
+.n7-item-preview.is-persona {
+    .n7-item-preview__title {
+        color: $color-people;
+    }
+}
+
+.n7-item-preview.is-luogo {
+    .n7-item-preview__title {
+        color: $color-places;
+    }
+}
+
+.n7-item-preview.is-concetto {
+    .n7-item-preview__title {
+        color: $color-concepts;
+    }
+}
+
+.n7-item-preview.is-cosa-notevole {
+    .n7-item-preview__title {
+        color: $color-things;
+    }
+}
+
+.n7-item-preview.is-organizzazione {
+    .n7-item-preview__title {
+        color: $color-organizations;
+    }
+}
+
+.n7-item-preview.is-famiglia {
+    .n7-item-preview__title {
+        color: $color-families;
+    }
+}
+
+.n7-item-preview.is-evento {
+    .n7-item-preview__title {
+        color: $color-events;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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;
+    background-color: $color-background-light;
+    border-radius: $border-radius;
+    box-shadow: inset 0 0 8px rgba(0,0,0,0.05);
+
+    &__description {
+        margin: 0;
+        padding: 0;
+        font-size: $font-size-xs;
+        color: $color-text-light;
+    }
+
+    &__key {
+        color: $color-text;
+    }
+
+    &__value {
+        // font-weight: $font-weight-bold;
+        color: $color-text;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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;
+    border-bottom: 1px solid $color-border-light;
+    cursor: pointer;
+
+    .n7-breadcrumbs {
+        padding: 0 0 $space*1.2 0;
+        background-color: transparent;
+        cursor: pointer;
+
+        a {
+            font-size: $font-size-xs;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@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) {
+}

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

@@ -0,0 +1,59 @@
+/**
+ * MAP
+ *
+ * Style for map component
+ */
+
+/* ------------------------------------ *\
+    MAP
+\* ------------------------------------ */
+.n7-map {
+    .leaflet-popup-content {
+        font-family: $font-family-main;
+    }
+
+    .leaflet-popup-content-wrapper {
+        border-radius: $border-radius;
+    }
+
+    .leaflet-popup-content-wrapper, .leaflet-popup-tip {
+        box-shadow: 0 2px 10px rgba(0,0,0,.2);
+    }
+}
+
+.marker-cluster-small, .marker-cluster-medium {
+    background-color: transparent;
+    div {
+        background-color: $color-main;
+        font-family: $font-family-main;
+        color: $color-text-inverse;
+        font-weight: $font-weight-bold;
+
+        &:after {
+            content: " ";
+            position: absolute;
+            display: block;
+            top: 0px;
+            width: 40px;
+            left: 0;
+            height: 40px;
+            background-color: $color-main;
+            border-radius: 20px;
+            opacity: 0.5;
+            z-index: -1;
+        }
+    }
+}
+
+
+
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $header-breakpoint-mobile) {
+}
+
+@media all and (max-width: $header-breakpoint-mobile-small) {
+}

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

@@ -0,0 +1,106 @@
+/**
+ * METADATA-VIEWER
+ *
+ * Component to display metadata organized and nested in groups.
+ */
+ 
+/* ------------------------------------ *\
+   #METADATA-VIEWER
+\* ------------------------------------ */
+.n7-metadata-viewer {
+    &__group-wrapper {
+        break-inside: avoid;
+    }
+    
+    &__group {
+        break-inside: auto;
+    }
+
+    &__item {
+        margin-bottom: $space*2;
+        break-inside: avoid;
+    }
+
+    &__item-label {
+        display: block;
+        margin-bottom: calc($space/2);
+        font-size: $font-size-m;
+    }
+
+    &__item-value {
+        clear: both;
+        white-space: pre-wrap;
+        font-size: $font-size-m;
+
+        p {
+            font-size: $font-size-m;
+        }
+    }
+
+    /* Recurrent fields */
+    &__item-value {
+        dl {
+            display: block;
+            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;
+                padding-bottom: 0;
+                border-bottom: 0;
+            }
+
+            &:first-child {
+                margin-top: $space*2.5;
+            }
+
+            div {
+                display: flex;
+                margin-bottom: $space;
+            }
+        }
+
+        dt {
+            width: 140px;
+            flex-basis: 140px;
+            flex-grow: 0;
+            flex-shrink: 0;
+            font-size: $font-size-s;
+            font-weight: $font-weight-bold;
+            vertical-align: top;
+            padding-right: $space;
+        }
+
+        dd {
+            flex-grow: 2;
+            margin-left: auto;
+            font-size: $font-size-s;
+            vertical-align: top;
+            
+            p {
+                display: inline;
+                margin: 0;
+                padding: 0;
+                font-size: $font-size-s;
+            }
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@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) {
+}

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

@@ -0,0 +1,93 @@
+/**
+ * PDF-VIEWER
+ *
+ * Style for the PDF viewer.
+ */
+
+/* ------------------------------------ *\
+    PDF-VIEWER
+\* ------------------------------------ */
+.aw-pdf-viewer {
+    position: relative;
+
+    .toolbar {
+        border-top: 0;
+    }
+
+    .toolbarField.pageNumber {
+        height: auto;
+    }
+    
+    /* Multiple PDF navigation */
+    &__navigation {
+        padding: $space*2 $space;
+        border-top: 2px solid $color-border-normal;
+    }
+    
+    &__navigation-tools {
+        display: flex;
+        flex-wrap: nowrap;
+        justify-content: space-between;
+        align-items: center;
+    }
+
+    &__navigation-prev:not(.is-disabled), &__navigation-next:not(.is-disabled) {
+        span {
+            color: $color-text-light;
+            cursor: pointer;
+            font-size: $font-size-xxxl;
+            transition: all $transition-durations;
+
+            &:hover {
+                color: $color-text-link;
+            }
+        }
+    }
+    
+    &__navigation-prev.is-disabled, &__navigation-next.is-disabled {
+        span {
+            color: $color-gray-02;
+            font-size: $font-size-xxxl;
+        }
+    }
+    
+    &__navigation-select {
+        text-align: center;
+
+        select {
+            max-width: 400px;
+            text-overflow: ellipsis;
+        }
+    }
+
+    /* Loader */
+    .aw-pdf-viewer__loader {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translateX(-50%) translateY(-50%);
+
+        .n7-loader {
+            border-top-color: $color-gray-03;
+            border-right-color: $color-gray-03;
+            border-bottom-color: $color-gray-03;
+            border-left-color: $color-gray-04;
+        }
+    }
+
+    &.is-loaded {
+        .aw-pdf-viewer__loader {
+            display: none;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $header-breakpoint-mobile) {
+}
+
+@media all and (max-width: $header-breakpoint-mobile-small) {
+}

package/src/lib/styles/arianna/components/_simple-autocomplete.scss

@@ -0,0 +1,60 @@
+/**
+ * SIMPLE-AUTOCOMPLETE
+ *
+ * Autocomplete results suggestions component, simpler version of advanced-autocomplete.
+ */
+ 
+/* ------------------------------------ *\
+   #SIMPLE-AUTOCOMPLETE
+\* ------------------------------------ */
+.n7-simple-autocomplete {
+    // padding: $space $space;
+    // border-radius: $border-radius;
+    // border: 1px solid $color-border-normal;
+    // font-size: $font-size-s;
+
+    &__list {
+        // margin: 0;
+        // padding: 0;
+        // list-style: none;
+    }
+
+    &__item {
+        // padding: 0 0 calc($space/1.5) 0;
+        // margin-bottom: calc($space/1.5);
+        // border-bottom: 2px solid $color-border-light;
+        font-weight: $font-weight-normal;
+        cursor: pointer;
+
+        &:last-child {
+            // padding-bottom: 0;
+            // margin-bottom: 0;
+            // border-bottom: none;
+        }
+
+        &:hover {
+            // color: $color-text-link-hover;
+        }
+    }
+
+    &__typed {
+        font-weight: $font-weight-bold;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@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) {
+}

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

@@ -0,0 +1,112 @@
+/**
+ * TIMELINE
+ *
+ * Style for timeline component
+ */
+
+/* ------------------------------------ *\
+    TIMELINE
+\* ------------------------------------ */
+.n7-timeline {
+    > div {
+        border: 0 !important;
+    }
+
+    .vis-timeline {
+        border: 1px solid $color-border-normal;
+    }
+
+    .vis-panel.vis-center {
+        border: 0;
+    }
+
+    .vis-panel.vis-bottom {
+        border: 1px solid $color-border-normal;
+    }
+
+    /* Single item */
+    .vis-box {
+        border-top: 0;
+        border-bottom: 0;
+        border-right: 0;
+        border-radius: 0;
+        border-width: 2px;
+        border-color: $color-third;
+        background-color: $color-background-medium;
+        box-shadow: 0 2px 8px rgba(0,0,0,.1);
+        cursor: pointer;
+    }
+
+    .vis-item-content {
+        .dates {
+            font-size: $font-size-s;
+            text-align: left;
+            color: $color-text-light;
+        }
+
+        .content {
+            font-size: $font-size-s;
+            text-align: left;
+        }
+    }
+    
+    /* Range */
+    .vis-range {
+        border-top: 0;
+        border-bottom: 0;
+        border-radius: 0;
+        border-width: 2px;
+        border-color: $color-third;
+        background-color: $color-background-medium;
+        box-shadow: 0 2px 8px rgba(0,0,0,.1);
+        cursor: pointer;
+    }
+
+    /* Clusters */
+    .vis-cluster {
+        width: auto !important;
+        background-color: $color-third;
+        color: $color-text-inverse;
+        font-weight: $font-weight-bold;
+    }
+
+    /* Selected items */
+    .vis-box.vis-selected,
+    .vis-range.vis-selected:not(.vis-cluster) {
+        border-color: $color-main;
+        background-color: $color-background-base;
+    }
+
+    .vis-dot.vis-selected,
+    .vis-line.vis-selected {
+        border-color: $color-main;
+    }
+
+    /* Line */
+    .vis-line {
+        border-width: 2px;
+        border-color: $color-third;
+    }
+
+    /* Dot */
+    .vis-dot {
+        border-color: $color-third;
+    }
+
+    /* Data */
+    .vis-time-axis {
+        .vis-text {
+            font-family: $font-family-main;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $header-breakpoint-mobile) {
+}
+
+@media all and (max-width: $header-breakpoint-mobile-small) {
+}