@net7/components 4.2.0 → 4.2.3-rc4

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

@@ -10,7 +10,6 @@
 .n7-header {
     height: $header-height;
     background-color: $header-bg-color;
-
     &__content {
         height: $header-height;
         display: flex;
@@ -19,36 +18,29 @@
 
     /* Logo and title */
     &__logo-title {
-        flex-grow: 0;
-        flex-shrink: 0;
-        flex-basis: auto;
+        flex: 0 0 auto;
         cursor: pointer;
     }
-
     &__logo-link {
         display: flex;
         flex-wrap: nowrap;
         align-items: center;
         height: 100%;
     }
-
     &__logo {
         max-height: $header-logo-height;
         width: auto;
         height: auto;
     }
-
     &__title-subtitle {
         padding: $space;
     }
-
     &__title {
-        margin: 0 0 calc($space/2) 0;
+        margin: 0 0 calc($space / 2) 0;
         color: $color-text;
         font-size: $font-size-m;
         font-weight: $font-weight-bold;
     }
-
     &__subtitle {
         margin: 0;
         color: $color-text;
@@ -62,11 +54,9 @@
         flex-basis: auto;
         z-index: 2;
     }
-
     &__nav-content {
         height: 100%;
     }
-
     &__nav-list {
         height: 100%;
         margin: 0;
@@ -74,32 +64,27 @@
         list-style: none;
         text-align: right;
     }
-
     &__nav-item {
         display: inline-block;
         position: relative;
         height: 100%;
         margin: 0;
         cursor: pointer;
-
         &:hover {
             .n7-header__subnav-list {
                 display: block;
             }
         }
     }
-
     &__nav-link {
         display: flex;
         align-items: center;
         height: 100%;
         color: $color-text;
     }
-
     &__nav-icon {
         margin-right: $space;
     }
-
     &__nav-label {
         font-size: $font-size-m;
     }
@@ -122,18 +107,15 @@
         list-style: none;
         text-align: left;
     }
-
     &__subnav-item {
         margin: 0;
         padding: 0;
-
         &:last-child {
             .n7-header__subnav-link {
                 border-bottom: 0;
             }
         }
     }
-
     &__subnav-link {
         display: block;
         padding: $space * 1.5;
@@ -151,6 +133,7 @@
     /* Tools: search, actions, buttons, user profile */
     &__tools {
         flex-grow: 0;
+
         // flex-basis: 0;
         display: flex;
         flex-wrap: nowrap;
@@ -165,28 +148,24 @@
     &__search {
         position: relative;
     }
-
-    &__search-input[type="search"] {
+    &__search-input[type='search'] {
         height: $header-search-input-height;
         line-height: $header-search-input-height;
     }
-
     &__search-btn {
         position: absolute;
         right: 0;
         border: 0;
         background-color: transparent;
-
-        &:after {
-            content: "\e9b9";
+        &::after {
+            content: '\e9b9';
             color: $color-text-light;
-            font-family: "n7-icon";
+            font-family: 'n7-icon';
             font-size: $font-size-l;
             vertical-align: middle;
             line-height: $header-search-input-height;
         }
     }
-
     &__search-btn-label {
         display: none;
     }
@@ -196,7 +175,6 @@
         display: flex;
         height: $header-height;
     }
-
     &__action {
         position: relative;
         display: flex;
@@ -206,11 +184,9 @@
         height: $header-height;
         cursor: pointer;
     }
-
     &__action-icon {
         font-size: $font-size-xxl;
     }
-
     &__action-badge {
         display: block;
         position: absolute;
@@ -220,7 +196,6 @@
         height: 10px;
         border-radius: 50%;
         background-color: $color-main;
-
         &.has-text {
             top: 24%;
             right: 23%;
@@ -228,7 +203,7 @@
             height: 18px;
             line-height: 18px;
             border-radius: 9px;
-            padding: 0 calc($space/2);
+            padding: 0 calc($space / 2);
             color: $color-text-inverse;
             font-size: $font-size-xs - 1;
             font-weight: $font-weight-bold;
@@ -239,21 +214,17 @@
     &__selects {
         margin-left: $space;
         flex-shrink: 0;
-
         > *:not(:last-child) {
             margin-right: $space;
         }
-
         .n7-input-select {
             margin: 0;
-
             label {
                 margin-right: $space * 0.5;
                 color: $color-text;
                 font-size: $font-size-s;
             }
         }
-
         .n7-facet__input-select {
             height: $button-normal-height;
             font-size: $font-size-s;
@@ -263,7 +234,6 @@
     /* Buttons */
     &__buttons {
         flex-shrink: 0;
-
         > * {
             margin-right: $space;
             &:last-child {
@@ -277,17 +247,14 @@
         flex-shrink: 0;
         padding-left: $space * 2;
     }
-
     &__user-content {
         display: flex;
         flex-wrap: nowrap;
         align-items: center;
-
         .n7-avatar {
             margin-right: $space;
         }
     }
-
     &__user-img {
         flex-grow: 0;
         flex-shrink: 0;
@@ -296,22 +263,19 @@
         margin-right: $space;
         border-radius: 50%;
     }
-
     &__user-name {
         display: flex;
         align-items: center;
         margin: 0;
         line-height: 1.2;
         font-size: $font-size-s;
-
-        &:after {
-            content: "\e908";
-            font-family: "n7-icon";
+        &::after {
+            content: '\e908';
+            font-family: 'n7-icon';
             font-size: $font-size-m;
             vertical-align: middle;
         }
     }
-
     &__user-name-label {
         margin-right: $space;
     }
@@ -322,7 +286,6 @@
         align-items: center;
         height: $header-height;
     }
-
     &__mobile-menu-icon {
         font-size: $font-size-xl;
         cursor: pointer;
@@ -340,7 +303,6 @@
         font-size: $font-size-xl;
         color: $color-text;
         cursor: pointer;
-
         &:hover {
             color: $color-text-link;
         }
@@ -355,15 +317,12 @@
         &__nav-content {
             display: none;
         }
-
         &__user-name {
             display: none;
         }
-
         &__tools {
             align-self: flex-end;
         }
-
         &__mobile-menu-toggle {
             display: flex;
             align-self: flex-end;
@@ -374,15 +333,13 @@
     .n7-header {
         &__nav-content {
             position: fixed;
+
             // display: flex;
             align-items: center;
             justify-content: center;
             flex-direction: column;
             background-color: $color-background-base;
-            top: 0;
-            left: 0;
-            bottom: 0;
-            right: 0;
+            inset: 0;
         }
 
         /* Displays mobile nav when .is-mobile-nav-displayed is inserted into .n7-header */
@@ -390,38 +347,31 @@
             .n7-header__nav-content {
                 display: flex;
             }
-
             .n7-header__mobile-menu-close {
                 display: block;
             }
         }
-
         &__nav-content {
             height: 100%;
         }
-
         &__nav-list {
             width: 100%;
             height: auto;
             overflow-y: auto;
         }
-
         &__nav-item {
             display: block;
             height: auto;
             padding: $space * 2 0;
         }
-
         &__nav-link {
             display: block;
             text-align: center;
             height: auto;
         }
-
         &__nav-icon {
             font-size: $font-size-l;
         }
-
         &__nav-label {
             font-size: $font-size-xl;
         }
@@ -435,7 +385,6 @@
             background-color: transparent;
             text-align: center;
         }
-
         &__subnav-item {
             &:last-child {
                 .n7-header__subnav-link {
@@ -443,16 +392,13 @@
                 }
             }
         }
-
         &__subnav-link {
             border-bottom: 0;
             padding: $space * 2;
         }
-
         &__subnav-icon {
             font-size: $font-size-m;
         }
-
         &__subnav-label {
             font-size: $font-size-l;
         }
@@ -462,35 +408,28 @@
 @media all and (max-width: $header-breakpoint-mobile-small) {
     .n7-header {
         height: $header-height-mobile;
-
         &__logo {
             max-height: $header-logo-height-mobile;
         }
-
         &__title {
             font-size: $font-size-s;
         }
-
         &__subtitle {
             font-size: $font-size-xs;
         }
-
-        &__search-input[type="search"] {
+        &__search-input[type='search'] {
             height: $header-search-input-height-mobile;
             line-height: $header-search-input-height-mobile;
         }
-
         &__search-btn {
-            &:after {
+            &::after {
                 line-height: $header-search-input-height-mobile;
             }
         }
-
         &__user-img {
             width: $header-user-thumb-size-mobile;
             height: $header-user-thumb-size-mobile;
         }
-
         &__mobile-menu-toggle {
             height: $header-height-mobile;
         }

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

@@ -25,10 +25,9 @@
     background-position: center center;
 
     /* Overlay */
-    &.has-background-image:after {
-        @include overlay();
+    &.has-background-image::after {
+        @include overlay;
     }
-
     &__content {
         position: relative;
         z-index: 10;
@@ -44,7 +43,6 @@
         align-items: flex-start;
         height: $hero-height;
     }
-
     &__title {
         margin: 0 0 $space * 2 0;
         font-family: $font-family-headings;
@@ -53,7 +51,6 @@
         line-height: 1.1;
         color: $color-text-inverse;
     }
-
     &__pre-title {
         margin: 0 0 $space * 2 0;
         font-family: $font-family-main;
@@ -62,7 +59,6 @@
         line-height: 1.1;
         color: $color-text-inverse;
     }
-
     &__text {
         margin: 0 0 $space * 2 0;
         font-family: $font-family-main;
@@ -70,25 +66,21 @@
         font-weight: $font-weight-normal;
         line-height: 1.3;
         color: $color-text-inverse;
-
         p {
             margin-bottom: 0;
             font-size: $font-size-l;
             color: $color-text-inverse;
         }
     }
-
     &__input-wrapper {
         min-width: 50%;
         position: relative;
     }
-
     &__input {
         width: 100%;
         margin: 0 0 $space * 2 0;
         box-sizing: border-box;
     }
-
     &__input-icon {
         position: absolute;
         top: 0;
@@ -97,7 +89,6 @@
         color: $color-text-light;
         line-height: $form-input-height;
     }
-
     &__btn {
         display: inline-block;
     }
@@ -109,6 +100,7 @@
 .n7-hero.has-image {
     .n7-hero__content {
         display: flex;
+
         // display: grid;
         // grid-template-columns: 1fr 300px;
         // grid-column-gap: $grid-gutter-h;
@@ -119,10 +111,11 @@
         flex: 1;
         margin-right: $grid-gutter-h;
     }
-
     .n7-hero__title,
     .n7-hero__text {
-        width: 100%; /* For IE bug, text overflowing container when contained in flex item */
+        width: 100%;
+
+        /* For IE bug, text overflowing container when contained in flex item */
     }
 
     /* Image */
@@ -130,10 +123,11 @@
         display: flex;
         align-items: center;
         justify-content: center;
+
         @include flex-item-width($hero-image-text-width);
+
         padding: $space * 3 0;
     }
-
     .n7-hero__image {
         max-width: 100%;
         max-height: 100%;
@@ -146,7 +140,7 @@
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
-@media all and (max-width: calc(#{$hero-content-width} + #{$space}*4)) {
+@media all and (width <=calc(#{$hero-content-width} + #{$space} * 4)) {
     .n7-hero {
         &__content {
             padding: 0 $space * 2;
@@ -167,16 +161,13 @@
     .n7-hero {
         height: auto;
         padding: $space * 2 0;
-
         &__text-wrapper {
             height: auto;
         }
-
         &__title {
             margin: 0 0 $space * 2 0;
             font-size: $font-size-l;
         }
-
         &__text {
             margin: 0 0 $space * 2 0;
             font-size: $font-size-m;
@@ -194,7 +185,6 @@
         .n7-hero__text-wrapper {
             order: 2;
         }
-
         .n7-hero__image-wrapper {
             order: 1;
             padding: 0;
@@ -204,5 +194,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }

package/src/lib/styles/components/_histogram-range.scss

@@ -12,7 +12,6 @@
     display: inline-block;
     position: relative;
     width: 100%;
-
     & > svg {
         width: 100% !important;
         box-sizing: border-box;
@@ -32,5 +31,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }

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

@@ -12,14 +12,12 @@
     display: inline-flex;
     align-items: center;
 }
-
 n7-icon {
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -33,5 +31,5 @@ n7-icon {
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }