@net7/components 4.2.1 → 4.2.3-rc4

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

@@ -1,27 +1,22 @@
 /* ------------------------------------ *\
    #SELECT
 \* ------------------------------------ */
-
 .n7-input-select {
-   
     select:required:invalid {
         color: $color-gray-04;
     }
-    option[value=""][disabled] {
+    option[value=''][disabled] {
         display: none;
     }
     option {
         color: $color-gray-05;
     }
-
     option[disabled] {
         background-color: $color-gray-03;
         color: $color-gray-04;
     }
 }
 
-
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -35,5 +30,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }

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

@@ -2,31 +2,26 @@
    #INPUT TEXT
 \* ------------------------------------ */
 .n7-input-text {
-
     &__label {
         display: block;
         font-size: $font-size-s;
     }
-
     &__wrapper {
         position: relative;
     }
-
-    &__text[type="text"], &__text[type="number"] {
+    &__text[type='text'],
+    &__text[type='number'] {
         width: 100%;
         box-sizing: border-box;
     }
-
-    &__text[type="number"] {
+    &__text[type='number'] {
         padding-right: 0;
     }
-    
     .has-icon {
         input {
-            padding-right: $space*4;
+            padding-right: $space * 4;
         }
     }
-
     &__icon {
         position: absolute;
         bottom: 0;
@@ -49,5 +44,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }

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

@@ -2,17 +2,14 @@
    #INPUT TEXT
 \* ------------------------------------ */
 .n7-input-textarea {
-
     &__label {
         display: block;
         font-size: $font-size-s;
     }
-
     &__wrapper {
         position: relative;
     }
-
-    &__text[type="textarea"] {
+    &__text[type='textarea'] {
         width: 100%;
         height: 200px;
         box-sizing: border-box;
@@ -21,13 +18,11 @@
         border-radius: 3px;
         resize: vertical;
     }
-
     .has-icon {
         input {
-            padding-right: $space*4;
+            padding-right: $space * 4;
         }
     }
-
 }
 
 /* ------------------------------------ *\
@@ -43,5 +38,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }

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

@@ -13,7 +13,6 @@
         cursor: default;
         position: relative;
     }
-
     &__title {
         margin-bottom: $space;
         font-family: $font-family-headings;
@@ -21,7 +20,6 @@
         font-weight: $font-weight-bold;
         color: $color-text;
     }
-
     &__text {
         margin-bottom: $space;
         font-family: $font-family-main;
@@ -35,32 +33,26 @@
         margin-bottom: $space;
         color: $color-text;
     }
-
     &__metadata-group-title {
         margin-bottom: $space;
     }
-
     &__metadata-item {
         display: inline-block;
         margin-right: $space;
-
         &:last-child {
             margin-right: 0;
         }
     }
-
     &__metadata-item-icon {
-        margin-right: calc($space/2);
+        margin-right: calc($space / 2);
     }
-
     &__metadata-item-label {
-        margin-right: calc($space/2);
+        margin-right: calc($space / 2);
         font-family: $font-family-main;
         font-size: $font-size-s;
         font-weight: $font-weight-normal;
         vertical-align: top;
     }
-
     &__metadata-item-value {
         font-family: $font-family-main;
         font-size: $font-size-s;
@@ -77,7 +69,6 @@
     .n7-item-preview__inner {
         display: flex;
     }
-
     .n7-item-preview__image {
         /* Color background here */
         width: $item-preview-image-width;
@@ -87,7 +78,6 @@
         background-size: cover;
         background-position: center center;
     }
-
     .n7-item-preview__content {
         flex: 1;
     }
@@ -101,7 +91,6 @@
     .n7-item-preview__inner {
         display: block;
     }
-
     .n7-item-preview__image {
         /* Color background here */
         width: 100%;
@@ -121,7 +110,6 @@
     .n7-item-preview__inner {
         display: block;
     }
-
     .n7-item-preview__image {
         /* Color background here */
         width: 100%;
@@ -143,45 +131,34 @@
         display: block;
         height: $item-preview-height;
     }
-
     .n7-item-preview__image {
         /* Color background here */
         position: absolute;
-        top: 0;
-        bottom: 0;
-        left: 0;
-        right: 0;
+        inset: 0;
         width: auto;
         height: auto;
         margin-right: 0;
         z-index: 1;
     }
-
     .n7-item-preview__content {
         position: absolute;
         z-index: 2;
-        top: 0;
-        bottom: 0;
-        right: 0;
-        left: 0;
+        inset: 0;
         display: flex;
         flex-direction: column;
         align-items: center;
         justify-content: center;
         padding: $space * 2;
     }
-
     .n7-item-preview__title,
     .n7-item-preview__text,
     .n7-item-preview__metadata-group-title {
         text-align: center;
         color: $color-text-inverse;
     }
-
     .n7-item-preview__metadata-group {
         text-align: center;
     }
-
     .n7-item-preview__metadata-item-icon,
     .n7-item-preview__metadata-item-label,
     .n7-item-preview__metadata-item-value {
@@ -193,15 +170,12 @@
 .n7-item-preview.is-overlay.has-image {
     .n7-item-preview__image {
         /* Color background here */
-        &:after {
-            content: " ";
+        &::after {
+            content: ' ';
             position: absolute;
             z-index: 1;
-            top: 0;
-            bottom: 0;
-            left: 0;
-            right: 0;
-            background-color: rgba(0, 0, 0, 0.5);
+            inset: 0;
+            background-color: rgb(0 0 0 / 50%);
         }
     }
 }
@@ -209,12 +183,12 @@
 /* ------------------------------------ *\
    #HOVER
 \* ------------------------------------ */
+
 /* Only applied when the class .has-link is present */
 .n7-item-preview.has-link {
     .n7-item-preview__inner {
         cursor: pointer;
     }
-
     &:hover {
         .n7-item-preview__title {
             color: $color-text-link;
@@ -235,5 +209,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }

package/src/lib/styles/components/_loader.scss

@@ -7,7 +7,6 @@
 /* ------------------------------------ *\
     LOADER
 \* ------------------------------------ */
-
 .n7-loader {
     width: $loader-size;
     height: $loader-size;
@@ -29,4 +28,4 @@
     100% {
         transform: rotate(360deg);
     }
-} 
+}

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

@@ -3,7 +3,7 @@
  *
  * Brief description of the component here.
  */
- 
+
 /* ------------------------------------ *\
    #MAP
 \* ------------------------------------ */
@@ -13,7 +13,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -27,5 +26,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }

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

@@ -3,38 +3,33 @@
  *
  * Component to display metadata organized and nested in groups.
  */
- 
+
 /* ------------------------------------ *\
    #METADATA-VIEWER
 \* ------------------------------------ */
 .n7-metadata-viewer {
     &__group-wrapper {
         .n7-metadata-viewer__group-wrapper {
-            padding-left: $space*2;
+            padding-left: $space * 2;
         }
     }
-    
     &__group {
-        margin-bottom: $space*2;
+        margin-bottom: $space * 2;
         break-inside: avoid;
     }
-
     &__group-title {
-        margin-bottom: $space*2;
+        margin-bottom: $space * 2;
         font-size: $font-size-xl;
         font-weight: $font-weight-bold;
     }
-
     &__item {
-        margin-bottom: $space*1.5;
+        margin-bottom: $space * 1.5;
     }
-
     &__item-label {
         font-weight: $font-weight-bold;
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -48,5 +43,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

package/src/lib/styles/components/_mirador.scss

@@ -0,0 +1,19 @@
+/* mirador-custom.css */
+
+@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@400;600;700&display=swap');
+
+#mirador-container {
+    position: relative;
+    width: 100%;
+    height: 600px; /* Set the desired height */
+    margin-top: 40px;
+    overflow: hidden;
+}
+
+.Connect\(WithPlugins\(Workspace\)\)-workspaceWithControlPanel-21 {
+    padding-left: 0px !important; /* since the left navbar is hidden I don't need the padding */
+}
+
+.mirador-scrollto-scrollable {
+    scrollbar-color: #2d3439 #575d62;
+}

package/src/lib/styles/components/_nav.scss

@@ -15,35 +15,29 @@
         margin: 0;
         list-style: none;
     }
-
     &__link {
         cursor: pointer;
     }
-    
     &__item {
         padding: 0;
         margin: 0;
         display: flex;
         align-items: center;
     }
-
     &__image {
         height: $nav-image-height;
         width: $nav-image-width;
         object-fit: contain;
-        margin-right: calc($space/2);
+        margin-right: calc($space / 2);
     }
-
     &__icon {
-        margin-right: calc($space/2);
+        margin-right: calc($space / 2);
     }
-
     &__icon-secondary {
-        margin-left: calc($space/2);
+        margin-left: calc($space / 2);
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -57,5 +51,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

package/src/lib/styles/components/_pagination.scss

@@ -3,7 +3,7 @@
  *
  * Common pagination component used at the bottom of lists and feeds.
  */
- 
+
 /* ------------------------------------ *\
    #PAGINATION
 \* ------------------------------------ */
@@ -11,31 +11,30 @@
     display: flex;
     justify-content: center;
     align-items: center;
-
     &__items {
         display: flex;
         list-style: none;
         padding: 0;
         margin: 0;
     }
-
     &__items {
         > li {
-            margin-left: calc($space/2);
-            margin-right: calc($space/2);
+            margin-left: calc($space / 2);
+            margin-right: calc($space / 2);
             user-select: none;
-            
             &:first-child {
                 margin-left: 0;
             }
-
             &:last-child {
                 margin-right: 0;
             }
         }
     }
-
-    &__first-link, &__prev-link, &__page-link, &__next-link, &__last-link {
+    &__first-link,
+    &__prev-link,
+    &__page-link,
+    &__next-link,
+    &__last-link {
         display: flex;
         align-items: center;
         justify-content: center;
@@ -47,36 +46,40 @@
         border-radius: $pagination-radius;
         cursor: pointer;
         color: $pagination-color;
-
         &:hover {
             color: $pagination-color-hover;
         }
     }
 
     /* Special spacing and width for first, prev, next, last with text */
-    &__first-link, &__prev-link {
+    &__first-link,
+    &__prev-link {
         &.has-text {
             width: auto;
-            padding: 0 $space*1.5 0 calc($space/2);
+            padding: 0 $space * 1.5 0 calc($space / 2);
         }
     }
-
-    &__next-link, &__last-link {
+    &__next-link,
+    &__last-link {
         &.has-text {
             width: auto;
-            padding: 0 calc($space/2) 0 $space*1.5;
+            padding: 0 calc($space / 2) 0 $space * 1.5;
         }
     }
-
-    &__first-link, &__prev-link, &__next-link, &__last-link {
+    &__first-link,
+    &__prev-link,
+    &__next-link,
+    &__last-link {
         font-size: $font-size-l;
     }
 
     /* Text labels for text in first, prev, next, last */
-    &__first-label, &__prev-label, &__next-label, &__last-label {
+    &__first-label,
+    &__prev-label,
+    &__next-label,
+    &__last-label {
         font-size: $font-size-s;
     }
-
     &__page-link {
         font-size: $font-size-m;
     }
@@ -92,7 +95,6 @@
             cursor: not-allowed;
         }
     }
-
     .is-active {
         .n7-pagination__page-link {
             border: $pagination-border-current;
@@ -103,30 +105,28 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #HIDDEN-ICONS
 \* ------------------------------------ */
+
 /*
 if class .has-hidden-icons is added to the root element, icons for first, previous,
 next and last are hidden.
 */
 .n7-pagination.has-hidden-icons {
     .n7-pagination__first-link,
-    .n7-pagination__prev-link, 
-    .n7-pagination__next-link, 
+    .n7-pagination__prev-link,
+    .n7-pagination__next-link,
     .n7-pagination__last-link {
-        [class*=" n7-icon-"] {
+        [class*=' n7-icon-'] {
             display: none;
         }
-
         &.has-text {
-            padding: 0 $space*1.5 0 $space*1.5;
+            padding: 0 $space * 1.5 0 $space * 1.5;
         }
     }
 }
 
-
 /* ------------------------------------ *\
    #WITH-RESULTS-NUMBER-SELECT
 \* ------------------------------------ */
@@ -135,7 +135,6 @@ next and last are hidden.
     justify-content: space-between;
 }
 
-
 /* ------------------------------------ *\
    #RESULTS-NUMBER-SELECT
 \* ------------------------------------ */
@@ -145,7 +144,6 @@ next and last are hidden.
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -156,15 +154,13 @@ next and last are hidden.
 }
 
 @media all and (max-width: $breakpoint-smartphone-landscape) {
-
     .n7-pagination {
         &__page {
             display: none;
         }
     }
-
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

package/src/lib/styles/components/_progress-line.scss

@@ -3,7 +3,7 @@
  *
  * Style for the progress line.
  */
- 
+
 /* ------------------------------------ *\
    #PROGRESS-LINE
 \* ------------------------------------ */
@@ -13,20 +13,14 @@
         display: flex;
         justify-content: space-between;
     }
-    
     &__label {
-
     }
-
     &__value {
-
     }
-
     &__wrapper {
         height: $progress-line-height;
         background-color: $progress-line-bg-color;
     }
-
     &__bar {
         display: flex;
         align-items: center;
@@ -35,7 +29,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -49,5 +42,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}