@net7/components 4.2.0 → 4.2.3-rc4

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

@@ -3,22 +3,22 @@
  *
  * 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;
@@ -28,7 +28,6 @@
         flex-direction: column;
         align-items: flex-end;
     }
-
     &__thumbs-description {
         width: 100%;
     }
@@ -37,17 +36,16 @@
 /* ------------------------------------ *\
    #CONTROLS
 \* ------------------------------------ */
+
 /* Buttons to show/fide the thumbs strip or the caption. */
 .n7-image-viewer-tools {
     &__controls {
-        margin: 0 $space*2 $space*2 0;
+        margin: 0 $space * 2 $space * 2 0;
     }
-
     &__control-wrapper {
         display: block;
         margin-top: $space;
     }
-
     &__control-btn {
         display: flex;
         align-items: center;
@@ -59,24 +57,20 @@
         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);
+        color: rgba($color-text-inverse, 0.8);
         font-size: $image-viewer-control-icon-size;
         transition: color $transition-durations;
         padding: 10px;
     }
-
     &__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);
@@ -85,21 +79,21 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #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);
+        background: rgb(0 0 0 / 65%);
+        box-shadow:
+            0 -3px 30px rgb(0 0 0 / 10%),
+            inset 0 1px 1px rgb(255 255 255 / 10%);
         width: 100%;
         height: auto;
         bottom: 0;
         overflow-x: hidden;
     }
-
     &__thumbs-strip {
         position: relative;
         display: flex;
@@ -107,25 +101,21 @@
         padding: $space 0;
         overflow-x: hidden;
     }
-
     &__thumb {
-        margin: 0 calc($space/2);
-
+        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);
+        background: rgb(0 0 0 / 40%);
         border-radius: $border-radius;
         border: 3px solid transparent;
-
         &:hover {
             cursor: pointer;
             border: 3px solid $image-viewer-thumb-hover-border-color;
@@ -142,30 +132,33 @@
         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%);
+        background: linear-gradient(
+            90deg,
+            rgb(0 0 0 / 75%) 0%,
+            rgb(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%);
+        background: linear-gradient(
+            90deg,
+            rgb(0 0 0 / 0%) 0%,
+            rgb(0 0 0 / 75%) 100%
+        );
     }
 }
 
-
 /* ------------------------------------ *\
    #DESCRIPTION/CAPTION
 \* ------------------------------------ */
@@ -175,19 +168,19 @@
         box-sizing: border-box;
         width: 100%;
         height: auto;
-        background: rgba(0,0,0,0.65);
+        background: rgb(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);
+        box-shadow:
+            0 -3px 30px rgb(0 0 0 / 10%),
+            inset 0 1px 1px rgb(255 255 255 / 10%);
         color: $color-text-inverse;
     }
-
     &__description-text-wrapper {
         box-sizing: border-box;
         max-height: 300px;
         overflow-y: auto;
-        padding: $space*4 $space*5;
+        padding: $space * 4 $space * 5;
     }
-
     &__description-close {
         position: absolute;
         width: $image-viewer-control-width;
@@ -195,20 +188,18 @@
         display: flex;
         align-items: center;
         justify-content: center;
-        right: $space*2;
-        top: $space*2;
+        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
 \* ------------------------------------ */
@@ -222,5 +213,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

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

@@ -5,23 +5,22 @@
  * 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 {
@@ -29,13 +28,11 @@ For our custom thumbs please refer to ImageViewerTools. */
         position: absolute;
         top: 50%;
         transform: translateY(-50%);
-        right: $space*2;
+        right: $space * 2;
     }
-
     &__thumb-list {
         list-style: none;
     }
-
     &__thumb-item {
         width: $image-viewer-thumb-width !important;
         height: $image-viewer-thumb-height !important;
@@ -45,35 +42,29 @@ For our custom thumbs please refer to ImageViewerTools. */
         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;
-    
+    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;
@@ -82,59 +73,51 @@ For our custom thumbs please refer to ImageViewerTools. */
         height: $image-viewer-control-height;
         margin-bottom: $space !important;
         cursor: pointer;
-        background-color: rgba(#000000, .9);
+        background-color: rgba(#000000, 0.9);
         border-radius: $border-radius;
-
         span {
-            color: rgba($color-text-inverse, .8);
+            color: rgba($color-text-inverse, 0.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 {
+.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;
+        color: rgba($color-text-inverse, 0.8);
+        font-size: $font-size-xxl * 2;
         transition: all $transition-durations;
         cursor: pointer !important;
-        text-shadow: 0 2px 4px rgba(#000000, .5);
-
+        text-shadow: 0 2px 4px rgba(#000000, 0.5);
         &:hover {
             color: rgba($color-text-inverse, 1);
         }
     }
 }
-
 .n7-image-viewer__prev {
     left: 0;
 }
-
 .n7-image-viewer__next {
     right: 0;
 }
 
-
 /* ------------------------------------ *\
    #REFERENCE-STRIP
 \* ------------------------------------ */
@@ -145,17 +128,18 @@ For our custom thumbs please refer to ImageViewerTools. */
         }
     }
 }
-
 .referencestrip {
     margin-bottom: -100px !important;
-    transition: all $transition-durations*2;
-
-    > *, .openseadragon-container, .openseadragon-canvas, canvas, .displayregion {
+    transition: all $transition-durations * 2;
+    > *,
+    .openseadragon-container,
+    .openseadragon-canvas,
+    canvas,
+    .displayregion {
         cursor: pointer !important;
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -169,5 +153,5 @@ For our custom thumbs please refer to ImageViewerTools. */
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

package/src/lib/styles/components/_inner-title.scss

@@ -3,31 +3,27 @@
  *
  * 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;
-    
+    padding: $space * 2;
     select,
-    input[type="text"] {
+    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;
@@ -37,42 +33,33 @@
         background-size: cover;
         background-repeat: no-repeat;
     }
-
     &__title {
-        margin-bottom: calc($space/2)     ;
+        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;
-
+            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;
@@ -81,73 +68,60 @@
             font-size: $font-size-m;
         }
     }
-
     &__search-bar {
-        margin-right: calc($space/2);
+        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}));
+            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%);
 
+            @include flex-item-width(100%);
             > div {
                 margin-left: 0;
-                margin-bottom: $space*1.5;
-
+                margin-bottom: $space * 1.5;
                 &:last-child {
                     margin-bottom: 0;
                 }
             }
         }
     }
-
 }
 
 @media all and (max-width: $breakpoint-smartphone-landscape) {
@@ -157,5 +131,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

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

@@ -3,36 +3,32 @@
 \* ------------------------------------ */
 .n7-input-checkbox {
     display: inline-block;
-    margin-right: $space*2;
-
+    margin-right: $space * 2;
     &__input-wrapper {
         display: inline-block;
         margin-right: $space;
     }
-
     &__input {
-        margin-right: calc($space/2);
+        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 {}
+    &__legend {
+    }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -46,5 +42,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }

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

@@ -5,7 +5,6 @@
     max-height: $facet-links-max-height;
     padding-right: $space;
     overflow-y: auto;
-
     &__link {
         display: flex;
         align-items: center;
@@ -13,26 +12,22 @@
         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);
+        padding: calc($space / 4) calc($space / 2);
         border-radius: $border-radius;
         font-size: $font-size-xs;
         color: $color-text-inverse;
@@ -48,13 +43,12 @@
 
     /* Active */
     .n7-input-link__link.is-active {
-        &:before {
-            content: "\e938";
+        &::before {
+            content: '\e938';
             font-family: 'n7-icon';
             margin-right: $space;
             color: $color-success;
         }
-
         .n7-input-link__text {
             font-weight: $font-weight-bold;
         }
@@ -74,5 +68,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }