@net7/components 3.2.0 → 3.3.0

package/lib/components/text-viewer/text-viewer.d.ts

@@ -15,6 +15,7 @@ export interface TextViewerData {
         view: string;
         channel?: string;
         translation?: boolean;
+        download?: string;
     }[];
     facsimile?: any;
     /**

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@net7/components",
-  "version": "3.2.0",
+  "version": "3.3.0",
   "dependencies": {
     "apexcharts": "^3.8.5",
     "d3": "^7.1.1",

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

@@ -3,7 +3,7 @@
  *
  * Component used to preview any kind of element with image, title, text, metadata and icons.
  */
- 
+
 /* ------------------------------------ *\
    #ITEM-PREVIEW
 \* ------------------------------------ */
@@ -13,7 +13,7 @@
         cursor: default;
         position: relative;
     }
-    
+
     &__title {
         margin-bottom: $space;
         font-family: $font-family-headings;
@@ -29,7 +29,7 @@
         font-weight: $font-weight-normal;
         color: $color-text;
     }
-    
+
     /* Metadata */
     &__metadata-group {
         margin-bottom: $space;
@@ -69,7 +69,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #HAS-IMAGE, #HAS-COLOR
 \* ------------------------------------ */
@@ -79,10 +78,11 @@
         display: flex;
     }
 
-    .n7-item-preview__image { /* Color background here */
+    .n7-item-preview__image {
+        /* Color background here */
         width: $item-preview-image-width;
         height: $item-preview-image-height;
-        margin-right: $space*1.5;
+        margin-right: $space * 1.5;
         background-repeat: no-repeat;
         background-size: cover;
         background-position: center center;
@@ -93,7 +93,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #IS-VERTICAL
 \* ------------------------------------ */
@@ -102,8 +101,9 @@
     .n7-item-preview__inner {
         display: block;
     }
-    
-    .n7-item-preview__image { /* Color background here */
+
+    .n7-item-preview__image {
+        /* Color background here */
         width: 100%;
         height: $item-preview-vertical-image-height;
         margin-bottom: $space;
@@ -113,6 +113,26 @@
     }
 }
 
+/* ------------------------------------ *\
+   #IS-FRONTPAGE
+\* ------------------------------------ */
+.n7-item-preview.is-frontpage.has-image,
+.n7-item-preview.is-frontpage.has-color {
+    .n7-item-preview__inner {
+        display: block;
+    }
+
+    .n7-item-preview__image {
+        /* Color background here */
+        width: 100%;
+        height: auto;
+        aspect-ratio: $item-preview-frontpage-aspect-ratio;
+        margin-bottom: $space;
+        margin-right: 0;
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+}
 
 /* ------------------------------------ *\
    #IS-OVERLAY
@@ -123,8 +143,9 @@
         display: block;
         height: $item-preview-height;
     }
-    
-    .n7-item-preview__image { /* Color background here */
+
+    .n7-item-preview__image {
+        /* Color background here */
         position: absolute;
         top: 0;
         bottom: 0;
@@ -147,9 +168,9 @@
         flex-direction: column;
         align-items: center;
         justify-content: center;
-        padding: $space*2;
+        padding: $space * 2;
     }
-    
+
     .n7-item-preview__title,
     .n7-item-preview__text,
     .n7-item-preview__metadata-group-title {
@@ -170,7 +191,8 @@
 
 /* Dark overlay behind the text only with image (not with color bg only) */
 .n7-item-preview.is-overlay.has-image {
-    .n7-item-preview__image { /* Color background here */
+    .n7-item-preview__image {
+        /* Color background here */
         &:after {
             content: " ";
             position: absolute;
@@ -179,12 +201,11 @@
             bottom: 0;
             left: 0;
             right: 0;
-            background-color: rgba(0,0,0,0.5);
+            background-color: rgba(0, 0, 0, 0.5);
         }
     }
 }
 
-
 /* ------------------------------------ *\
    #HOVER
 \* ------------------------------------ */
@@ -215,4 +236,4 @@
 
 /* Retina */
 @media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+}

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

@@ -9,31 +9,27 @@
 // ------------------------------------ //
 $space: 8px;
 
-
 // ------------------------------------ //
 // #LAYOUT
 // ------------------------------------ //
 $page-max-width: 1350px;
 
-
 // ------------------------------------ //
 // #GRIDS
 // ------------------------------------ //
-$grid-gutter-h: $space*3;
-$grid-gutter-v: $space*2;
-
+$grid-gutter-h: $space * 3;
+$grid-gutter-v: $space * 2;
 
 // ------------------------------------ //
 // #FONTS
 // ------------------------------------ //
-@import url('https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i');
-
+@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i");
 
 // ------------------------------------ //
 // TYPOGRAPHY
 // ------------------------------------ //
-$font-family-main: 'Lato', sans-serif;
-$font-family-headings: 'Lato', sans-serif;
+$font-family-main: "Lato", sans-serif;
+$font-family-headings: "Lato", sans-serif;
 
 $font-size-xxxl: 38px; // 2.875rem; // 46px
 $font-size-xxl: 30px; // 1.85rem; // 40px
@@ -47,7 +43,6 @@ $font-size-xs: 12px; // 0.75rem; // 12px
 $font-weight-normal: 400;
 $font-weight-bold: 700;
 
-
 // ------------------------------------ //
 // COLORS
 // ------------------------------------ //
@@ -70,7 +65,6 @@ $color-background-light: $color-gray-01;
 $color-background-medium: $color-gray-02;
 $color-background-dark: $color-gray-03;
 
-
 // ------------------------------------ //
 // #MEDIA-QUERIES-BREAKPOINT
 // ------------------------------------ //
@@ -85,14 +79,12 @@ $breakpoint-smartphone-portrait: 400px;
 $breakpoint-inner-title-medium: $breakpoint-desktop-wide - 1;
 $breakpoint-inner-title-small: $breakpoint-ipad-portrait - 1;
 
-
 // ------------------------------------ //
 // #BORDER-RADIUS
 // ------------------------------------ //
 $border-radius: 3px;
 $border-radius-hard: 8px;
 
-
 // ------------------------------------ //
 // #BUTTONS
 // ------------------------------------ //
@@ -105,7 +97,7 @@ $button-large-height: 50px;
 // Normal button
 $color-button-text: $color-text-light;
 $color-button-text-hover: $color-text-link;
-$color-button-text-disabled: rgba($color-text, .4);
+$color-button-text-disabled: rgba($color-text, 0.4);
 
 $color-button-bg: $color-gray-02;
 $color-button-bg-hover: $color-gray-01;
@@ -117,12 +109,12 @@ $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-text-disabled: rgba($color-text-inverse, 0.4);
 
 $color-button-cta-bg: $color-main;
 $color-button-cta-bg-hover: $color-text-hover;
 $color-button-cta-bg-active: $color-text-hover;
-$color-button-cta-bg-disabled: rgba($color-main, .4);
+$color-button-cta-bg-disabled: rgba($color-main, 0.4);
 
 $color-button-cta-border: $color-main; // Change this if you want a darker button border.
 
@@ -132,7 +124,6 @@ $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
 // ------------------------------------ //
@@ -141,21 +132,19 @@ $form-input-small-height: 26px;
 $form-border-radius: $border-radius;
 $form-border-size: 1px;
 
-
 // ------------------------------------ //
 // #TRANSITIONS
 // ------------------------------------ //
 $transition-durations: 0.2s;
 
-
 // ------------------------------------ //
 // #HEADER
 // ------------------------------------ //
 $header-height: 80px;
 $header-height-mobile: 60px;
 $header-bg-color: $color-background-base;
-$header-logo-height: $header-height - ($space*2);
-$header-logo-height-mobile: $header-height-mobile - ($space*2);
+$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: 28px;
 $header-search-input-height: 36px;
@@ -163,15 +152,13 @@ $header-search-input-height-mobile: 28px;
 $header-breakpoint-mobile: 1180px;
 $header-breakpoint-mobile-small: 600px;
 
-
 // ------------------------------------ //
 // #LOADER
 // ------------------------------------ //
 $loader-size: 70px;
 $loader-thickness: 5px;
 $loader-color-front: $color-main;
-$loader-color-back: rgba($color-main, .3);
-
+$loader-color-back: rgba($color-main, 0.3);
 
 // ------------------------------------ //
 // #TABLE
@@ -192,16 +179,14 @@ $table-footer-font-size: $font-size-s;
 $table-footer-text-color: $color-text-light;
 $table-footer-bg: $color-background-medium;
 
-
 // ------------------------------------ //
 // #BREADCRUMBS
 // ------------------------------------ //
 $breadcrumbs-background: $color-background-light;
 $breadcrumbs-arrow-color: $color-text-light;
 $breadcrumbs-current-color: $color-text;
-$breadcrumbs-arrow: '\e90a';
-$breadcrumbs-arrow-mobile: '\e908';
-
+$breadcrumbs-arrow: "\e90a";
+$breadcrumbs-arrow-mobile: "\e908";
 
 // ------------------------------------ //
 // #PAGINATION
@@ -218,7 +203,6 @@ $pagination-color-hover: $color-text-link;
 $pagination-color-disabled: $color-text-light;
 $pagination-color-current: $color-text-inverse;
 
-
 // ------------------------------------ //
 // #ALERT
 // ------------------------------------ //
@@ -231,7 +215,6 @@ $alert-color-text-success: $color-text-inverse;
 $alert-color-text-warning: $color-text-inverse;
 $alert-color-text-error: $color-text-inverse;
 
-
 // ------------------------------------ //
 // #ITEM-PREVIEW
 // ------------------------------------ //
@@ -239,7 +222,7 @@ $item-preview-image-width: 60px;
 $item-preview-image-height: $item-preview-image-width;
 $item-preview-vertical-image-height: 180px;
 $item-preview-height: 250px;
-
+$item-preview-frontpage-aspect-ratio: 0.75;
 
 // ------------------------------------ //
 // #HERO
@@ -249,32 +232,29 @@ $hero-content-width: 1140px;
 $hero-image-text-width: 300px;
 $hero-background-color: $color-gray-05;
 
-
 // ------------------------------------ //
 // #WIZARD
 // ------------------------------------ //
 $wizard-height: 40px;
 $wizard-number-circle-margin: 5px;
 $wizard-past-bg-color: $color-main;
-$wizard-past-number-bg-color: rgba($color-background-base, .2);
+$wizard-past-number-bg-color: rgba($color-background-base, 0.2);
 $wizard-past-text-color: $color-text-inverse;
 $wizard-present-bg-color: $color-second;
-$wizard-present-number-bg-color: rgba($color-background-base, .2);
+$wizard-present-number-bg-color: rgba($color-background-base, 0.2);
 $wizard-present-text-color: $color-text-inverse;
 $wizard-future-bg-color: $color-background-medium;
-$wizard-future-number-bg-color: rgba($color-background-dark, .4);
+$wizard-future-number-bg-color: rgba($color-background-dark, 0.4);
 $wizard-future-text-color: $color-text;
 $wizard-number-size: $font-size-s;
 $wizard-text-size: $font-size-s;
 
-
 // ------------------------------------ //
 // #TREE
 // ------------------------------------ //
-$tree-image-size:28px;
+$tree-image-size: 28px;
 $tree-indent: $space;
 
-
 // ------------------------------------ //
 // #SIDEBAR-HEADER
 // ------------------------------------ //
@@ -286,7 +266,6 @@ $sidebar-left-text-color: $sidebar-header-text-color;
 $sidebar-right-background-color: $color-text-link;
 $sidebar-right-text-color: $color-text-inverse;
 
-
 // ------------------------------------ //
 // #TOAST
 // ------------------------------------ //
@@ -297,7 +276,6 @@ $toast-title-color: $color-text;
 $toast-text-color: $color-text;
 $toast-max-width: 300px;
 
-
 // ------------------------------------ //
 // #SIGNUP
 // ------------------------------------ //
@@ -305,7 +283,6 @@ $signup-max-width: 400px;
 $signup-input-background: $color-gray-01;
 $signup-error-color: $color-error;
 
-
 // ------------------------------------ //
 // #ADVANCED-AUTOCOMPLETE
 // ------------------------------------ //
@@ -314,7 +291,6 @@ $advanced-autocomplete-group-title-width: 180px;
 $advanced-autocomplete-empty-height: 180px;
 $advanced-autocomplete-action-bar-shadow: 0 -5px 15px -5px rgba(0, 0, 0, 0.3);
 
-
 // ------------------------------------ //
 // #FACET-HEADER
 // ------------------------------------ //
@@ -323,21 +299,18 @@ $facet-header-background: $color-gray-05;
 $facet-header-icon-background: $color-second;
 $facet-header-height: 30px;
 
-
 // ------------------------------------ //
 // #FACET
 // ------------------------------------ //
 $facet-inner-padding: $space;
 $facet-links-max-height: 200px;
 
-
 // ------------------------------------ //
 // #INNER-TITLE
 // ------------------------------------ //
 $inner-title-filters-height: $button-normal-height;
 $inner-title-image-size: 60px;
 
-
 // ------------------------------------ //
 // #IMAGE-VIEWER
 // ------------------------------------ //
@@ -353,7 +326,6 @@ $image-viewer-thumb-hover-border-color: $color-main;
 $image-viewer-tools-control-color: $color-main;
 $image-viewer-tools-control-color-active: $color-second;
 
-
 // ------------------------------------ //
 // #FOOTER
 // ------------------------------------ //
@@ -362,24 +334,21 @@ $footer-background-color: $color-gray-03;
 $footer-breakpoint-desktop: $page-max-width + $grid-gutter-h;
 $footer-breakpoint-mobile: 700px;
 
-
 // ------------------------------------ //
 // #CAROUSEL
 // ------------------------------------ //
-$carousel-content-width:960px;
+$carousel-content-width: 960px;
 $carousel-height: 400px;
 
-
 // ------------------------------------ //
 // #NAV
 // ------------------------------------ //
 $nav-image-height: 50px;
 $nav-image-width: 50px;
 
-
 // ------------------------------------ //
 // #PROGRESS-LINE
 // ------------------------------------ //
 $progress-line-bg-color: $color-gray-02;
 $progress-line-front-color: $color-main;
-$progress-line-height: $space*3;
+$progress-line-height: $space * 3;