@net7/components 3.0.2-rc.2

package/src/lib/styles/components/_image-viewer-tools.scss

@@ -0,0 +1,225 @@
+/**
+ * IMAGE-VIEWER-TOOLS
+ *
+ * Component that is overlapped on the image tools to add thumbs, caption and other functionalities.
+ */
+ 
+/* ------------------------------------ *\
+   #IMAGE-VIEWER-TOOLS
+\* ------------------------------------ */
+.n7-image-viewer-tools {
+    width: 100%;
+    position: relative;
+    // height: 600px;
+    // background-color: $image-viewer-background-color;
+    
+    /* Test layout */
+    &__test {
+        height: 600px;
+        background-color: $image-viewer-background-color;
+    }
+
+    &__bar {
+        position: absolute;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: flex-end;
+    }
+
+    &__thumbs-description {
+        width: 100%;
+    }
+}
+
+/* ------------------------------------ *\
+   #CONTROLS
+\* ------------------------------------ */
+/* Buttons to show/fide the thumbs strip or the caption. */
+.n7-image-viewer-tools {
+    &__controls {
+        margin: 0 $space*2 $space*2 0;
+    }
+
+    &__control-wrapper {
+        display: block;
+        margin-top: $space;
+    }
+
+    &__control-btn {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: $image-viewer-control-width;
+        height: $image-viewer-control-height;
+        margin-top: $space;
+        cursor: pointer;
+        background-color: $image-viewer-tools-control-color;
+        border-radius: $border-radius;
+        box-shadow: 0 0 14px $image-viewer-background-color;
+
+        &:hover {
+            .n7-image-viewer-tools__control-btn-icon {
+                color: rgba($color-text-inverse, 1);
+            }
+        }
+    }
+
+    &__control-btn-icon {
+        color: rgba($color-text-inverse, .8);
+        font-size: $image-viewer-control-icon-size;
+        transition: color $transition-durations;
+    }
+
+    &__control-btn.is-active {
+        background-color: $image-viewer-tools-control-color-active;
+
+        &:hover {
+            .n7-image-viewer-tools__control-btn-icon {
+                color: rgba($color-text-inverse, 1);
+            }
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #THUMBS
+\* ------------------------------------ */
+.n7-image-viewer-tools {
+    &__thumbs {
+        position: relative;
+        background: rgba(0,0,0,0.65);
+        box-shadow: 0 -3px 30px rgba(0,0,0,.1), inset 0 1px 1px rgba(255,255,255,.1);
+        width: 100%;
+        height: auto;
+        bottom: 0;
+        overflow-x: hidden;
+    }
+
+    &__thumbs-strip {
+        position: relative;
+        display: flex;
+        flex-wrap: nowrap;
+        padding: $space 0;
+        overflow-x: hidden;
+    }
+
+    &__thumb {
+        margin: 0 calc($space/2);
+
+        &.active {
+            .n7-image-viewer-tools__thumb-image {
+                border: 3px solid $image-viewer-thumb-active-border-color;
+            }
+        }
+    }
+
+    &__thumb-image {
+        height: $image-viewer-thumb-height;
+        width: $image-viewer-thumb-width;
+        object-fit: contain;
+        background: rgba(0,0,0,0.4);
+        border-radius: $border-radius;
+        border: 3px solid transparent;
+
+        &:hover {
+            cursor: pointer;
+            border: 3px solid $image-viewer-thumb-hover-border-color;
+        }
+    }
+
+    /* Left/right arrows to scroll thumbs */
+    &__thumbs-scroll-left,
+    &__thumbs-scroll-right {
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        width: 40px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+
+        span {
+            color: $color-text-inverse;
+            font-size: $font-size-xxxl;
+            cursor: pointer;
+        }
+
+        &.is_disabled {
+            display: none;
+        }
+    }
+
+    &__thumbs-scroll-left {
+        left: 0;
+        background: linear-gradient(90deg, rgba(0,0,0,0.75) 0%, rgba(0,0,0,0) 100%);
+    }
+
+    &__thumbs-scroll-right {
+        right: 0;
+        background: linear-gradient(90deg, rgba(0,0,0,0) 0%, rgba(0,0,0,0.75) 100%);
+    }
+}
+
+
+/* ------------------------------------ *\
+   #DESCRIPTION/CAPTION
+\* ------------------------------------ */
+.n7-image-viewer-tools {
+    &__description {
+        position: relative;
+        box-sizing: border-box;
+        width: 100%;
+        height: auto;
+        background: rgba(0,0,0,0.65);
+        bottom: 0;
+        box-shadow: 0 -3px 30px rgba(0,0,0,.1), inset 0 1px 1px rgba(255,255,255,.1);
+        color: $color-text-inverse;
+    }
+
+    &__description-text-wrapper {
+        box-sizing: border-box;
+        max-height: 300px;
+        overflow-y: auto;
+        padding: $space*4 $space*5;
+    }
+
+    &__description-close {
+        position: absolute;
+        width: $image-viewer-control-width;
+        height: $image-viewer-control-height;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        right: $space*2;
+        top: $space*2;
+        font-size: $image-viewer-control-icon-size;
+        cursor: pointer;
+        color: $color-text-inverse;
+        transition: color $transition-durations;
+
+        &:hover {
+            color: $color-text-link;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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/components/_image-viewer.scss

@@ -0,0 +1,173 @@
+/**
+ * IMAGE-VIEWER
+ *
+ * Image viewer component based on OpenSeaDragon.
+ * The component includes a thumb preview tool and
+ * native controls for zoomin zoomout home and fullscreen.
+ */
+ 
+/* ------------------------------------ *\
+   #IMAGE-VIEWER
+\* ------------------------------------ */
+.n7-image-viewer {
+    position: relative;
+    background-color: $image-viewer-background-color;
+
+    &__viewer {
+        height: $image-viewer-height;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #THUMBS
+\* ------------------------------------ */
+/* This is the style for the default OpenSeaDragon thumbs. 
+For our custom thumbs please refer to ImageViewerTools. */
+.n7-image-viewer {
+    &__thumbs {
+        position: absolute;
+        top: 50%;
+        transform: translateY(-50%);
+        right: $space*2;
+    }
+
+    &__thumb-list {
+        list-style: none;
+    }
+
+    &__thumb-item {
+        width: $image-viewer-thumb-width !important;
+        height: $image-viewer-thumb-height !important;
+        margin-bottom: $space;
+        background-size: cover;
+        background-position: center center;
+        background-repeat: none;
+        border: 2px solid transparent;
+        cursor: pointer;
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+
+        &:hover:not(.is-active) {
+            border: 2px solid $image-viewer-thumb-hover-border-color;
+        }
+
+        &.is-active {
+            border: 2px solid $image-viewer-thumb-active-border-color;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #CONTROLS
+\* ------------------------------------ */
+.n7-image-viewer__controls {
+    position: absolute;
+    top: $space*2;
+    right: $space*2;
+    
+    .n7-image-viewer__controls-list {
+        margin: 0;
+        padding: 0;
+    }
+
+    .n7-image-viewer__controls-item {
+        display: flex !important;
+        align-items: center;
+        justify-content: center;
+        width: $image-viewer-control-width;
+        height: $image-viewer-control-height;
+        margin-bottom: $space !important;
+        cursor: pointer;
+        background-color: rgba(#000000, .9);
+        border-radius: $border-radius;
+
+        span {
+            color: rgba($color-text-inverse, .8);
+            font-size: $image-viewer-control-icon-size;
+            transition: color $transition-durations;
+        }
+
+        &:hover {
+            background-color: rgba(#000000, 1);
+            span {
+                color: rgba($color-text-inverse, 1);
+            }
+        }
+
+        &:last-child {
+            margin-bottom: 0;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #PREV-NEXT
+\* ------------------------------------ */
+.n7-image-viewer__prev, .n7-image-viewer__next {
+    position: absolute !important;
+    top: 50%;
+    transform: translateY(-50%);
+    
+    span {
+        color: rgba($color-text-inverse, .8);
+        font-size: $font-size-xxl*2;
+        transition: all $transition-durations;
+        cursor: pointer !important;
+        text-shadow: 0 2px 4px rgba(#000000, .5);
+
+        &:hover {
+            color: rgba($color-text-inverse, 1);
+        }
+    }
+}
+
+.n7-image-viewer__prev {
+    left: 0;
+}
+
+.n7-image-viewer__next {
+    right: 0;
+}
+
+
+/* ------------------------------------ *\
+   #REFERENCE-STRIP
+\* ------------------------------------ */
+.openseadragon-container {
+    &:hover {
+        .referencestrip {
+            margin-bottom: 0 !important;
+        }
+    }
+}
+
+.referencestrip {
+    margin-bottom: -100px !important;
+    transition: all $transition-durations*2;
+
+    > *, .openseadragon-container, .openseadragon-canvas, canvas, .displayregion {
+        cursor: pointer !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/components/_inner-title.scss

@@ -0,0 +1,161 @@
+/**
+ * INNER-TITLE
+ *
+ * Title component for page, sections, with title, subtitle and some sortings items.
+ */
+ 
+/* ------------------------------------ *\
+   #INNER-TITLE
+\* ------------------------------------ */
+.n7-inner-title {
+    display: flex;
+    align-items: center;
+    padding: $space*2;
+    
+    select,
+    input[type="text"] {
+        height: $inner-title-filters-height;
+    }
+
+    &__left-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    &__icon-left {
+        padding: 0;
+        margin-right: $space;
+        font-size: $font-size-xxl;
+    }
+
+    &__image-left {
+        flex-shrink: 0;
+        padding: 0;
+        margin-right: $space;
+        width: $inner-title-image-size;
+        height: $inner-title-image-size;
+        background-size: cover;
+        background-repeat: no-repeat;
+    }
+
+    &__title {
+        margin-bottom: calc($space/2)     ;
+        font-weight: $font-weight-bold;
+        font-size: $font-size-xxl;
+    }
+
+    &__subtitle {
+        font-size: $font-size-l;
+    }
+
+    &__tools {
+        display: flex;
+        align-items: center;
+        margin-left: auto;
+
+        > div {
+            margin-left: $space*2;
+
+            &:first-child {
+                margin-left: 0;
+            }
+        }
+    }
+
+    &__tools-label {
+        font-size: $font-size-l;
+    }
+
+    &__sorting {
+    }
+
+    &__sorting-label {
+        margin-right: $space;
+    }
+
+    &__search {
+        display: flex;
+        align-items: center;
+
+        @include placeholder {
+            font-size: $font-size-m;
+        }
+    }
+
+    &__search-bar {
+        margin-right: calc($space/2);
+    }
+
+    &__buttons-wrapper {
+        display: flex;
+        align-items: center;
+    }
+
+    &__buttons-icon {
+        padding: 0;
+        margin-right: $space;
+        font-size: $font-size-l;
+    }
+
+    &__single-button-wrapper {
+        margin-right: $space;
+
+        &:last-of-type {
+            margin-right: 0;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-inner-title-medium) {
+
+    .n7-inner-title {
+        flex-wrap: wrap;
+
+        &__tools {
+            margin-left: 0;
+            padding: $space*2 0 0 0;
+            @include flex-item-width(calc(100% - #{$space*6}));
+        }
+    }
+
+}
+
+@media all and (max-width: $breakpoint-inner-title-small) {
+    
+    .n7-inner-title {
+     
+        &__wrapper-texts {
+            margin-bottom: $space;
+        }
+
+        &__tools {
+            align-items: stretch;
+            flex-flow: column nowrap;
+            @include flex-item-width(100%);
+
+            > div {
+                margin-left: 0;
+                margin-bottom: $space*1.5;
+
+                &:last-child {
+                    margin-bottom: 0;
+                }
+            }
+        }
+    }
+
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+@media all and (min-width: $breakpoint-desktop-wide) {
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}

package/src/lib/styles/components/_input-checkbox.scss

@@ -0,0 +1,50 @@
+/* ------------------------------------ *\
+#INPUT CHECKBOX
+\* ------------------------------------ */
+.n7-input-checkbox {
+    display: inline-block;
+    margin-right: $space*2;
+
+    &__input-wrapper {
+        display: inline-block;
+        margin-right: $space;
+    }
+
+    &__input {
+        margin-right: calc($space/2);
+    }
+
+    &__label {
+        font-size: $font-size-s;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #FIELDSET 
+\* ------------------------------------ */
+/* Wraps all the checkboxes to add a common label (tag: legend) */
+.n7-input-checkbox {
+    &__fieldset {
+        border: 0;
+    }
+
+    &__legend {}
+}
+
+
+/* ------------------------------------ *\
+   #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/components/_input-link.scss

@@ -0,0 +1,78 @@
+/* ------------------------------------ *\
+   #LINKS
+\* ------------------------------------ */
+.n7-input-link {
+    max-height: $facet-links-max-height;
+    padding-right: $space;
+    overflow-y: auto;
+
+    &__link {
+        display: flex;
+        align-items: center;
+        padding-bottom: $space;
+        margin-bottom: $space;
+        border-bottom: 1px solid $color-border-normal;
+        cursor: pointer;
+
+        &:last-child {
+            margin-bottom: 0;
+            border-bottom: 0;
+        }
+    }
+
+    &__icon {
+        margin-right: $space;
+        font-size: $font-size-m;
+    }
+
+    &__text {
+        padding-right: $space;
+        font-size: $font-size-m;
+    }
+
+    &__counter {
+        margin-left: auto;
+        padding: calc($space/4) calc($space/2);
+        border-radius: $border-radius;
+        font-size: $font-size-xs;
+        color: $color-text-inverse;
+        background-color: $color-second;
+    }
+
+    /* Hover */
+    .n7-input-link__link:hover {
+        .n7-input-link__text {
+            color: $color-text-link;
+        }
+    }
+
+    /* Active */
+    .n7-input-link__link.is-active {
+        &:before {
+            content: "\e938";
+            font-family: 'n7-icon';
+            margin-right: $space;
+            color: $color-success;
+        }
+
+        .n7-input-link__text {
+            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/components/_input-select.scss

@@ -0,0 +1,25 @@
+/* ------------------------------------ *\
+   #SELECT
+\* ------------------------------------ */
+.n7-input-select {
+    display: inline-block;
+    margin-bottom: calc($space/2);
+    margin-right: $space;
+}
+
+
+/* ------------------------------------ *\
+   #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) {
+}