@net7/boilerplate-arianna 3.0.1-rc.2

package/src/lib/styles/arianna/components/_tippy-tooltip.scss

@@ -0,0 +1,41 @@
+/**
+ * TIPPY-TOOLTIP
+ *
+ * Tippy tooltip component customizations.
+ */
+ 
+/* ------------------------------------ *\
+   #TIPPY-TOOLTIP
+\* ------------------------------------ */
+.tippy-tooltip {
+    &.light-border-theme {
+        border-radius: $border-radius;
+        border: none;
+        box-shadow: $tippy-box-shadow;
+    }
+
+    .tippy-content {
+        padding: $space*1.5 $space*2;
+        text-align: left;
+    }
+
+    .tippy-arrow:before {
+        border-top-color: #e9e9e9 !important;
+    }
+}
+
+/* ------------------------------------ *\
+   #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/_tree.scss

@@ -0,0 +1,110 @@
+/**
+ * TREE
+ *
+ * Component to navigate a tree.
+ */
+
+/* ------------------------------------ *\
+   #TREE-ITEMS
+\* ------------------------------------ */
+.n7-tree {
+    /* First level elements */
+    &__item-contents {
+        position: relative;
+        
+        /* n7-anchor-wrapper directive */
+        > * {
+        }
+    }
+
+    /* First level */
+    &__item-text {
+        font-size: $font-size-s;
+    }
+
+    /* Sub level elements */
+    &__children-wrapper {
+        .n7-tree__n7-tree__item {
+        }
+
+        .n7-tree__item-text {
+        }
+    }
+    
+    &__item-toggle {
+        position: absolute;
+        z-index: 100;
+        width: $tree-caret-width;
+        top: 0;
+        bottom: 0;
+        border: 0 !important;
+
+        &:hover {
+            
+        }
+    }
+
+    &__item-details {
+        position: relative;
+        padding-left: $tree-caret-width;
+        border-left: 1px solid $color-border-normal;
+
+        &:after {
+            content: " ";
+            position: absolute;
+            top: 0;
+            bottom: 0;
+            left: $tree-caret-width;
+            border-right: 1px solid $color-border-light;
+        }
+
+        &:hover {
+            .n7-tree__item-text {
+            }
+        }
+    }
+
+    &__item-icon {
+    }
+
+    /* Icon on the right */
+    &__item-right-icon {
+    }
+
+    &__item-img {
+        overflow: hidden;
+        color: transparent;
+    }
+
+    /* is-active */
+    &__item.is-active {
+        > .n7-tree__item-contents {
+            .n7-tree__item-text {
+                color: $color-main;
+            }
+        }
+    }
+
+    /* is-collapsed: all children are hidden */
+    &__item.is-collapsed {
+        .n7-tree__children-wrapper {
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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/generic/_color_scheme.scss

@@ -0,0 +1,60 @@
+//
+// COLOR SCHEME
+//
+// Here we define all colors used in components and project
+//
+
+// ------------------------------------ //
+// #COLOR-SCHEME
+// ------------------------------------ //
+// Grayscale (background, borders, text)
+$color-gray-00: #ffffff;
+$color-gray-01: #f9fafa; // f7f7f7;
+$color-gray-02: #eff0f1; // f0f0f0;
+$color-gray-03: #e2e3e4; // dddddd;
+$color-gray-04: #91959c; // B6B7B9; // ababab;
+$color-gray-05: #4f5259; // 494a4d;
+
+// Brand colors
+$color-main: #4388d6;
+$color-second: #8c54ff;
+$color-third: #7E8F9B;
+$color-text-hover: rgb(26, 64, 204); /* Used for text link in hover state */
+
+
+// ------------------------------------ //
+// #HIGHLIGHT-COLOR
+// ------------------------------------ //
+$color-highlight: rgba(255, 251, 0, 0.18);
+
+
+// ------------------------------------ //
+// #ENTITIES-COLORS
+// ------------------------------------ //
+$color-people: #4d8ff2; // Fallback
+$color-people: var(--color-persona);
+
+$color-places: #ebc738; // Fallback
+$color-places: var(--color-luogo);
+
+$color-concepts: #33bdcc; // Fallback
+$color-concepts: var(--color-concetto);
+
+$color-things: #5ba878; // Fallback
+$color-things: var(--color-cosa-notevole);
+
+$color-organizations: #bd883e; // Fallback
+$color-organizations: var(--color-organizzazione);
+
+$color-oggetto-culturale: #9a84c2; // Fallback
+$color-oggetto-culturale: var(--color-oggetto-culturale);
+
+$color-aggregazione-logica: #a6a5a8; // Fallback
+$color-aggregazione-logica: var(--color-aggregazione-logica);
+
+$color-families: #cc6f5c; // Fallback
+$color-families: var(--color-famiglia);
+
+$color-events: #e89827; // Fallback
+$color-events: var(--color-evento);
+

package/src/lib/styles/arianna/generic/_mixins.scss

@@ -0,0 +1,18 @@
+//
+// MIXINS
+//
+// Definition of all mixins used in the Boilerplate.
+//
+
+// ------------------------------------ //
+// #CARD SHADOWS
+// ------------------------------------ //
+@mixin card-box-shadow {
+    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.20), 0 2px 15px rgba(0, 0, 0, 0.05);
+    transition: box-shadow $transition-durations;
+    transition-timing-function: ease-in;
+}
+
+@mixin card-box-shadow-hover {
+    box-shadow: 0 0px 1px rgba(0, 0, 0, 0.15), 0 1px 2px rgba(0, 0, 0, 0.05), 0 5px 25px rgba(0, 0, 0, 0.15);
+}

package/src/lib/styles/arianna/generic/_variables.scss

@@ -0,0 +1,380 @@
+//
+// VARIABLES
+//
+// Definition of all variables used by the components library
+//
+
+// ------------------------------------ //
+// #LAYOUT
+// ------------------------------------ //
+$page-max-width: 1350px;
+$page-min-width: 960px;
+$page-readable-width: 800px;
+
+$bubble-section-patrimonio: 350px;
+$bubble-section-entity-overview: 350px;
+$bubble-section-entity-detail: 700px;
+
+$facets-wrapper-width: 200px;
+
+$results-wrapper-width: 300px;
+
+
+// ------------------------------------ //
+// #SCHEDA-LAYOUT
+// ------------------------------------ //
+$aw-scheda-tree-width: 400px;
+$aw-scheda-minimum-height: 400px;
+
+
+// ------------------------------------ //
+// #GRIDS
+// ------------------------------------ //
+// $grid-gutter-h: $space*3;
+$grid-gutter-v: 0;
+
+
+// //////////////////////////////////// //
+//            ATTENTION PLEASE          //
+// //////////////////////////////////// //
+// All commented variables are here for reference
+// just to see which ones are available to be
+// overwritten and must be removed if not used
+
+
+// ------------------------------------ //
+// #Z-INDEX
+// ------------------------------------ //
+$z-index-base: 1000;
+$z-index-digital-object-modal: $z-index-base + 10;
+
+
+// ------------------------------------ //
+// #SPACING-UNIT
+// ------------------------------------ //
+// $space: 8px;
+
+
+// ------------------------------------ //
+// #FONTS
+// ------------------------------------ //
+@import url('https://fonts.googleapis.com/css?family=Source+Sans+Pro:400,400i,700,700i,900&display=swap');
+
+
+// ------------------------------------ //
+// TYPOGRAPHY
+// ------------------------------------ //
+$font-family-main: 'Source Sans Pro', sans-serif;
+$font-family-headings: $font-family-main;
+
+// $font-size-xxxl: 38px;
+// $font-size-xxl: 30px;
+// $font-size-xl: 26px;
+// $font-size-l: 18px;
+$font-size-m: 16px;
+// $font-size-s: 14px;
+// $font-size-xs: 12px;
+
+// Font weight
+// $font-weight-normal: 400;
+// $font-weight-bold: 700;
+$font-weight-black: 900;
+
+
+// ------------------------------------ //
+// COLORS
+// ------------------------------------ //
+// Text Colors
+// $color-text: $color-gray-05;
+// $color-text-inverse: $color-gray-00;
+// $color-text-light: $color-gray-04;
+// $color-text-link: $color-main;
+// $color-text-link-hover: $color-text-hover;
+// $color-text-link-visited: $color-text-hover;
+// $color-text-form-placeholder: $color-gray-04;
+
+// Borders
+// $color-border-light: $color-gray-02;
+// $color-border-normal: $color-gray-03;
+
+// Backgrounds
+// $color-background-base: $color-gray-00;
+// $color-background-light: $color-gray-01;
+// $color-background-light-blue: #F5F7FF;
+// $color-background-medium: $color-gray-01;
+// $color-background-dark: $color-gray-03;
+$color-background-layout: $color-gray-01;
+$gradient-item-preview-list: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, $color-background-layout 100%);
+
+
+// ------------------------------------ //
+// #MEDIA-QUERIES-BREAKPOINT
+// ------------------------------------ //
+// $breakpoint-desktop-wide: 1180px;
+// $breakpoint-laptop: 960px;
+// $breakpoint-ipad-portrait: 768px;
+// $breakpoint-smartphone-landscape: 480px;
+// $breakpoint-smartphone-portrait: 400px;
+
+
+// ------------------------------------ //
+// #BORDER-RADIUS
+// ------------------------------------ //
+// $border-radius: 5px;
+// $border-radius-hard: 8px;
+
+
+// ------------------------------------ //
+// #BUTTONS
+// ------------------------------------ //
+// $button-border-width: 0px;
+// $button-border-radius: $border-radius;
+// $button-small-height: 24px;
+// $button-normal-height: 32px;
+$button-large-height: 56px;
+
+// Normal button
+// $color-button-text: $color-text-link;
+// $color-button-text-hover: $color-text-link-hover;
+// $color-button-text-disabled: rgba($color-text-link, .4);
+
+// $color-button-bg: #2EBBC7;
+// $color-button-bg-hover: #E0E7FF;
+// $color-button-bg-disabled: #E0E7FF;
+
+// $color-button-border: $color-border-normal;
+// $color-button-border-hover: $color-border-normal;
+
+// Call to action button
+// $color-button-cta-text: $color-text-inverse;
+// $color-button-cta-text-hover: $color-text-inverse;
+// $color-button-cta-text-disabled: rgba($color-text-inverse, .4);
+
+// $color-button-cta-bg: $color-main;
+// $color-button-cta-border: $color-main;
+// $color-button-cta-bg-hover: darken($color-button-cta-bg, 5%);
+// $color-button-cta-border-hover: darken($color-button-cta-bg, 5%);
+// $color-button-cta-bg-active: #3FE3F1;
+// $color-button-cta-bg-disabled: rgba($color-button-cta-bg, .4);
+
+// $color-button-cta-border: darken($color-main, 5); // $color-text-hover;
+
+// Light button (no background or border, only text)
+// $color-button-light-text: $color-text;
+// $color-button-light-text-hover: $color-text-link-hover;
+// $color-button-light-text-disabled: $color-text-light;
+// $color-button-light-text-active: $color-text-link-hover;
+
+
+// ------------------------------------ //
+// #FORMS
+// ------------------------------------ //
+// $form-input-height: 38px;
+// $form-input-small-height: 26px;
+// $form-border-radius: $border-radius;
+// $form-dropdown-height: 30px;
+
+
+// ------------------------------------ //
+// #TRANSITIONS
+// ------------------------------------ //
+// $transition-durations: 0.2s;
+
+
+// ------------------------------------ //
+// #HEADER
+// ------------------------------------ //
+$header-height: 100px;
+// $header-height-mobile: 60px;
+// $header-bg-color: $color-background-base;
+$header-active-item-color: $color-gray-02;
+// $header-logo-height: $header-height - ($space*2);
+// $header-logo-height-mobile: $header-height-mobile - ($space*2);
+// $header-user-thumb-size: 40px;
+// $header-user-thumb-size-mobile: 38px;
+// $header-search-input-height: 36px;
+// $header-search-input-height-mobile: 28px;
+$header-breakpoint-mobile: 0px;
+// $header-breakpoint-mobile-small: 600px;
+
+
+// ------------------------------------ //
+// #LOADER
+// ------------------------------------ //
+// $loader-size: 70px;
+$loader-size-small: 30px;
+// $loader-thickness: 5px;
+$loader-thickness-small: 4px;
+$loader-color-front: $color-gray-03;
+$loader-color-back: $color-gray-02;
+
+
+// ------------------------------------ //
+// #TABLE
+// ------------------------------------ //
+// $table-border-color: $color-border-normal;
+// $table-border-size: 1px;
+/* Header */
+// $table-header-font-size: $font-size-xs;
+// $table-header-text-color: $color-text;
+// $table-header-bg: $color-background-light-blue;
+/* Contents */
+// $table-font-size: $font-size-s;
+// $table-text-color: $color-text;
+// $table-bg-odd: $color-background-base;
+// $table-bg-even: $color-background-medium;
+/* Footer */
+// $table-footer-font-size: $font-size-s;
+// $table-footer-text-color: $color-text-light;
+// $table-footer-bg: $color-background-medium;
+
+
+// ------------------------------------ //
+// #TOP-HERO-HOMEPAGE
+// ------------------------------------ //
+$top-hero-height: 360px;
+$top-hero-has-carousel-height: 180px;
+$top-hero-text-max-width: 715px;
+$top-hero-input-height: 56px;
+$top-hero-input-border-radius: $border-radius;
+$top-hero-input-box-shadow: 0 2px 4px rgba(0,0,0,0.3);
+$top-hero-button-height: $top-hero-input-height;
+$top-hero-title-font-weight: $font-weight-bold;
+// $hero-height: 600px;
+// $hero-content-width: $page-max-width;
+
+
+// ------------------------------------ //
+// #BUBBLE-SECTION-HOMEPAGE
+// ------------------------------------ //
+$bubble-section-height: 780px;
+$bubble-popover-title-font-weight: $font-weight-bold;
+$bubble-results-count-font-weight: $font-weight-bold;
+
+// ------------------------------------ //
+// #BOTTTOM-HERO-HOMEPAGE
+// ------------------------------------ //
+$bottom-hero-image-border: 10px solid #ffffff;
+$bottom-hero-image-border-radius: $border-radius;
+$bottom-hero-button-bg: #ffcd00;
+$bottom-hero-button-bg-hover: darken($bottom-hero-button-bg, 5%);
+$bottom-hero-button-bg-active: #ffb600;
+$bottom-hero-button-bg-disabled: rgba($bottom-hero-button-bg, .4);
+$bottom-hero-title-font-weight: $font-weight-bold;
+
+
+// ------------------------------------ //
+// #TAG
+// ------------------------------------ //
+$n7-tag-icon-size: 16px;
+$n7-tag-icon-font-size: 8px;
+$n7-tag-icon-background: #ffffff;
+
+
+// ------------------------------------ //
+// #SIDEBAR-HEADER
+// ------------------------------------ //
+$sidebar-header-height: 50px;
+// $sidebar-header-background-color: $color-text;
+// $sidebar-header-text-color: $color-text-inverse;
+// $sidebar-left-background-color: $sidebar-header-background-color;
+// $sidebar-left-text-color: $sidebar-header-text-color;
+// $sidebar-right-background-color: $color-text-link;
+// $sidebar-right-text-color: $color-text-inverse;
+
+
+// ------------------------------------ //
+// #ITEM-PREVIEW
+// ------------------------------------ //
+$item-preview-image-size: 85px;
+
+
+// ------------------------------------ //
+// #TIPPY-COMPONENT
+// ------------------------------------ //
+$tippy-box-shadow: 0 2px 10px 0 rgba(0,0,0,0.1);
+
+
+// ------------------------------------ //
+// #SCHEDA-LAYOUT
+// ------------------------------------ //
+$aw-scheda-content-padding: $space*3;
+$scheda-title-font-weight: $font-weight-bold;
+$metadata-label-width: 200px;
+
+// ------------------------------------ //
+// #ENTITA
+// ------------------------------------ //
+$entity-sidebar-title-background: $color-gray-01;
+$entity-nav-item-active-decoration-bg: $color-gray-05;
+
+
+// ------------------------------------ //
+// #SEARCH
+// ------------------------------------ //
+$search-box-shadow: 0 0 15px 0 rgba(0,0,0,0.05);
+$search-nav-decoration-height: 5px;
+
+// ------------------------------------ //
+// #GALLERY
+// ------------------------------------ //
+$gallery-box-shadow: 0 0 15px 0 rgba(0,0,0,0.05);
+$gallery-nav-decoration-height: 5px;
+
+
+// ------------------------------------ //
+// #FACET
+// ------------------------------------ //
+$n7-facet-search-input-height: 32px;
+$n7-facet-search-input-border-radius: $border-radius;
+$facet-counter-background: $color-gray-04;
+$facet-text-color: $color-gray-05;
+
+
+// ------------------------------------ //
+// #FACET-HEADER
+// ------------------------------------ //
+$facet-header-border-radius: 3px;
+$facet-header-background: $color-gray-04;
+
+
+// ------------------------------------ //
+// #BUBBLE--CHART-COLUMN-CONTAINER-MIN-WIDTH
+// ------------------------------------ //
+$bubble-chart-column-container-min-width: 200px;
+
+
+// ------------------------------------ //
+// #TREE
+// ------------------------------------ //
+$tree-indent: $space*1.6;
+$tree-caret-width: 30px;
+
+
+// ------------------------------------ //
+// #IMAGE-VIEWER
+// ------------------------------------ //
+$image-viewer-height: 550px;
+// $image-viewer-thumb-height: 80px;
+// $image-viewer-thumb-width: 80px;
+// $image-viewer-control-height: 60px;
+// $image-viewer-control-width: 60px;
+// $image-viewer-background-color: $color-gray-05;
+// $image-viewer-thumb-active-border-color: $color-main;
+// $image-viewer-thumb-hover-border-color: $color-main;
+
+
+// ------------------------------------ //
+// #BREADCRUMBS
+// ------------------------------------ //
+// $breadcrumbs-arrow-color: $color-text-light;
+// $breadcrumbs-current-color: $color-text;
+$breadcrumbs-arrow: '\e90a';
+// $breadcrumbs-arrow-mobile: '\e908';
+
+
+// ------------------------------------ //
+// #COLLECTION
+// ------------------------------------ //
+$collection-item-preview-height: 235px;
+$collection-item-preview-default-color: $color-gray-04;