@net7/boilerplate-arianna 3.0.1-rc.2

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

@@ -0,0 +1,32 @@
+/**
+ * CAROUSEL
+ *
+ * Few custom styles for the A4V carousel.
+ */
+
+/* ------------------------------------ *\
+   #CAROUSEL
+\* ------------------------------------ */
+.n7-carousel {
+    .n7-btn {
+        font-size: $font-size-l;
+        text-transform: uppercase;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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/_facet-header.scss

@@ -0,0 +1,58 @@
+/**
+ * FACET-HEADER
+ *
+ * Header component for facet, displaying facet title and other datas (for istance count of items).
+ */
+ 
+/* ------------------------------------ *\
+   #FACET-HEADER
+\* ------------------------------------ */
+.n7-facet-header {
+    margin-bottom: $space;
+    border-radius: $facet-header-border-radius;
+    background: $facet-header-background;
+
+    &__text {
+        // margin-right: $space;
+        // margin-left: $space;
+        font-size: $font-size-s;
+    }
+
+    &__secondary-text {
+        // font-size: $font-size-s;
+        // line-height: $facet-header-height;
+    }
+
+    &__icon-left,
+    &__icon-right {
+        // width: $facet-header-height;
+        // height: $facet-header-height;
+        // text-align: center;
+        // line-height: $facet-header-height;
+        // background: $facet-header-icon-background;
+        // font-size: $font-size-l;
+    }
+
+    &__icon-right {
+        border-top-right-radius: $facet-header-border-radius;
+        border-bottom-right-radius: $facet-header-border-radius;
+        background: $facet-header-background;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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/_facet.scss

@@ -0,0 +1,268 @@
+/**
+ * FACET
+ *
+ * Facet component including:
+ * - array of checkboxes;
+ * - search inpout with label;
+ * - list of results.
+ */
+
+/* ------------------------------------ *\
+   #INPUT CHECKBOX
+\* ------------------------------------ */
+.n7-facet {
+    &__input-checkbox-label {
+        font-size: $font-size-s;
+        color: $facet-text-color;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #INPUT TEXT
+\* ------------------------------------ */
+.n7-facet {
+    &__input-text-label {
+        display: block;
+        font-size: $font-size-s;
+    }
+
+    &__input-text-wrapper {
+        position: relative;
+    }
+
+    &__input-text[type="text"] {
+        width: 100%;
+        box-sizing: border-box;
+        padding-right: $space*4;
+    }
+
+    &__input-text-icon {
+        position: absolute;
+        bottom: 0;
+        right: $space;
+        line-height: $form-input-height;
+        color: $color-text-light;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #LIST
+\* ------------------------------------ */
+.n7-facet {
+    &__section-input-link {
+        margin-bottom: calc($space/2);
+        border-bottom: 1px solid $color-border-normal;
+
+        &:last-of-type {
+            border-bottom: none;
+        }
+    }
+
+    &__input-link {
+        padding-bottom: calc($space/2);
+
+        &[class*="color-"] {
+            .n7-facet__input-link-text {
+                font-weight: $font-weight-bold;
+            }
+        }
+    }
+
+    &__input-link-text {
+        font-size: $font-size-s;
+        color: $facet-text-color;
+    }
+
+    &__input-link-counter {
+        background-color: $facet-counter-background;
+    }
+
+    /* Hover */
+    .n7-facet__input-link:hover {
+        .n7-facet__input-link-text {
+
+        }
+    }
+
+    /* Active */
+    .n7-facet__input-link.is-active {
+        &:before {
+            content: "\e93d";
+            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});
+
+        .n7-facet__section-input,
+        .n7-facet__input-select {
+            width: 100%;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #COLORS
+\* ------------------------------------ */
+.n7-facet {
+    &__input-link {
+        &.color-persona {
+            .n7-facet__input-link-icon,
+            .n7-facet__input-link-text {
+                color: $color-people;
+            }
+
+            &:hover {
+                .n7-facet__input-link-icon,
+                .n7-facet__input-link-text {
+                    color: $color-people;
+                }
+            }
+        }
+
+        &.color-luogo {
+            .n7-facet__input-link-icon,
+            .n7-facet__input-link-text {
+                color: $color-places;
+            }
+
+            &:hover {
+                .n7-facet__input-link-icon,
+                .n7-facet__input-link-text {
+                    color: $color-places;
+                }
+            }
+        }
+
+        &.color-concetto {
+            .n7-facet__input-link-icon,
+            .n7-facet__input-link-text {
+                color: $color-concepts;
+            }
+
+            &:hover {
+                .n7-facet__input-link-icon,
+                .n7-facet__input-link-text {
+                    color: $color-concepts;
+                }
+            }
+        }
+
+        &.color-cosa-notevole {
+            .n7-facet__input-link-icon,
+            .n7-facet__input-link-text {
+                color: $color-things;
+            }
+
+            &:hover {
+                .n7-facet__input-link-icon,
+                .n7-facet__input-link-text {
+                    color: $color-things;
+                }
+            }
+        }
+
+        &.color-organizzazione {
+            .n7-facet__input-link-icon,
+            .n7-facet__input-link-text {
+                color: $color-organizations;
+            }
+            
+            &:hover {
+                .n7-facet__input-link-icon,
+                .n7-facet__input-link-text {
+                    color: $color-organizations;
+                }
+            }
+        }
+
+        &.color-famiglia {
+            .n7-facet__input-link-icon,
+            .n7-facet__input-link-text {
+                color: $color-families;
+            }
+
+            &:hover {
+                .n7-facet__input-link-icon,
+                .n7-facet__input-link-text {
+                    color: $color-families;
+                }
+            }
+        }
+
+        &.color-evento {
+            .n7-facet__input-link-icon,
+            .n7-facet__input-link-text {
+                color: $color-events;
+            }
+
+            &:hover {
+                .n7-facet__input-link-icon,
+                .n7-facet__input-link-text {
+                    ccolor: $color-events;
+                }
+            }
+        }
+
+        &.color-oggetto-culturale {
+            .n7-facet__input-link-icon,
+            .n7-facet__input-link-text {
+                color: $color-oggetto-culturale;
+            }
+
+            &:hover {
+                .n7-facet__input-link-icon,
+                .n7-facet__input-link-text {
+                    color: $color-oggetto-culturale;
+                }
+            }
+        }
+
+        &.color-aggregazione-logica {
+            .n7-facet__input-link-icon,
+            .n7-facet__input-link-text {
+                color: $color-aggregazione-logica;
+            }
+
+            &:hover {
+                .n7-facet__input-link-icon,
+                .n7-facet__input-link-text {
+                    color: $color-aggregazione-logica;
+                }
+            }
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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/_footer.scss

@@ -0,0 +1,64 @@
+/**
+ * FOOTER
+ *
+ * General footer structure, (hopefully) suitable for all needs.
+ */
+
+/* ------------------------------------ *\
+   #FOOTER
+\* ------------------------------------ */
+.n7-footer {
+    padding-top: $space*6;
+    padding-bottom: $space*6;
+    background-color: $color-gray-02;
+    border-top: 1px solid $color-border-normal;
+
+    &__column {
+
+        &-title {
+            margin-bottom: $space*2;
+        }
+
+        &-text {
+            line-height: 1.8;
+        }
+
+        &-nav {
+            &-item {
+                margin-bottom: $space;
+            }
+
+            &-link {
+                color: $color-text;
+            }
+        }
+    }
+}
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $page-max-width + $space*4) {
+
+    /* Layout utility class */
+    .n7-footer {
+        &__content {
+            padding-left: $space*2;
+            padding-right: $space*2;
+        }
+    }
+
+}
+
+@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/_header.scss

@@ -0,0 +1,61 @@
+/**
+ * HEADER
+ *
+ * Style for header, including main navigation
+ */
+
+/* ------------------------------------ *\
+    HEADER
+\* ------------------------------------ */
+.n7-header {
+    padding: 0 $space*2;
+
+    // Hide the H1 in the header.
+    &__title-subtitle {
+        display: none;
+    }
+
+    &__nav-item {
+        margin: 0;
+        padding: 0;
+        
+        &.is-active {
+            .n7-header__nav-link {
+                background: $header-active-item-color;
+                font-weight: $font-weight-bold;
+            }
+        }
+    }
+
+    &__nav-link {
+        flex-flow: column nowrap;
+        justify-content: center;
+        align-items: center;
+        padding: 0 $space*2.5;
+        text-transform: uppercase;
+
+        &:focus {
+            color: $color-text;
+        }
+    }
+
+    &__nav-icon {
+        margin-right: 0;
+        margin-bottom: calc($space/2);
+        font-size: $font-size-l;
+    }
+
+    &__nav-label {
+        font-size: $font-size-s;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $header-breakpoint-mobile) {
+}
+
+@media all and (max-width: $header-breakpoint-mobile-small) {
+}