@net7/components 4.2.0 → 4.2.3-rc4

package/src/lib/styles/components/_advanced-autocomplete.scss

@@ -3,7 +3,7 @@
  *
  * Search bar autocomplete component which shows datas preview matching the typed words or words parts
  */
- 
+
 /* ------------------------------------ *\
    #ADVANCED-AUTOCOMPLETE
 \* ------------------------------------ */
@@ -11,55 +11,48 @@
     &__results {
         max-height: $advanced-autocomplete-results-max-height;
         overflow-y: auto;
-        padding: $space*2 $space*2;
+        padding: $space * 2 $space * 2;
     }
-
     &__group {
         display: flex;
+
         // display: grid;
         // grid-template-columns: 180px 2fr;
         // grid-template-rows: 1fr;
         // grid-column-gap: $space*2;
-        margin-bottom: $space*2;
-        padding-bottom: $space*2;
+        margin-bottom: $space * 2;
+        padding-bottom: $space * 2;
         border-bottom: 1px solid $color-border-normal;
-
         &:last-child {
             border-bottom: 0;
             margin-bottom: 0;
         }
     }
-
     &__group-title-wrapper {
         flex: 0 0 $advanced-autocomplete-group-title-width;
         width: $advanced-autocomplete-group-title-width;
-        margin-right: $space*2;
+        margin-right: $space * 2;
         color: $color-text-light;
     }
-
     &__group-title {
         font-size: $font-size-m;
         font-family: $font-family-headings;
         line-height: 1.4;
         vertical-align: middle;
     }
-
     &__group-icon {
-        margin-right: calc($space/2);
+        margin-right: calc($space / 2);
         font-size: $font-size-l;
         vertical-align: middle;
     }
-
     &__items {
         flex: 1;
-
         > *:last-child {
             .n7-advanced-autocomplete__item {
                 margin-bottom: 0;
             }
         }
     }
-
     &__item {
         display: block;
         margin-bottom: $space;
@@ -67,7 +60,6 @@
         color: $color-text;
         word-break: break-all;
         cursor: pointer;
-
         &:hover {
             color: $color-text-link;
         }
@@ -82,13 +74,12 @@
     &__item-metadata {
         font-size: $font-size-s;
     }
-
     &__item-metadata-key {
-        margin-right: calc($space/2);
+        margin-right: calc($space / 2);
         color: $color-text-light;
     }
     &__item-metadata-value {
-        margin-right: calc($space/2);
+        margin-right: calc($space / 2);
         color: $color-text-light;
         font-weight: $font-weight-bold;
     }
@@ -98,10 +89,8 @@
         display: flex;
         justify-content: center;
         padding: $space;
-        
         .n7-btn {
             margin-right: $space;
-
             &:last-child {
                 margin-right: 0;
             }
@@ -109,7 +98,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #EMPTY
 \* ------------------------------------ */
@@ -123,7 +111,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #LOADING
 \* ------------------------------------ */
@@ -136,7 +123,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -144,47 +130,38 @@
 }
 
 @media all and (max-width: $breakpoint-ipad-portrait - 1) {
-    
     .n7-advanced-autocomplete {
         &__results {
-            padding: $space*1.5 $space*1.5;
+            padding: $space * 1.5 $space * 1.5;
         }
-    
         &__group {
             display: block;
-            margin-bottom: $space*1.5;
-            padding-bottom: $space*1.5;
+            margin-bottom: $space * 1.5;
+            padding-bottom: $space * 1.5;
         }
-
         &__group-title {
             margin-bottom: $space;
             font-size: $font-size-m;
         }
-
         &__item {
-            margin-bottom: $space*1.5;
+            margin-bottom: $space * 1.5;
         }
-
-        
         &__action-bar {
             flex-flow: column nowrap;
-
             .n7-btn {
                 margin-right: 0;
                 margin-bottom: $space;
-
                 &:last-child {
                     margin-bottom: 0;
                 }
             }
         }
     }
-
 }
 
 @media all and (max-width: $breakpoint-smartphone-landscape) {
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

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

@@ -11,17 +11,15 @@
 \* ------------------------------------ */
 .n7-alert {
     position: relative;
-    padding: $space*2 $space*5 $space*2 $space*2;
+    padding: $space * 2 $space * 5 $space * 2 $space * 2;
     border-radius: $border-radius;
     background-color: $alert-background;
-    
     &__close-button {
         position: absolute;
-        top: $space*1.5;
-        right: $space*1.5;
+        top: $space * 1.5;
+        right: $space * 1.5;
         cursor: pointer;
     }
-
     &__text {
         margin: 0;
         padding: 0;
@@ -31,7 +29,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #WITH-ICON
 \* ------------------------------------ */
@@ -41,19 +38,17 @@
         top: 0;
         left: 0;
         bottom: 0;
-        width: $space*6;
+        width: $space * 6;
         display: flex;
         align-items: center;
         justify-content: center;
         font-size: $font-size-l;
     }
-
     .n7-alert__text {
-        margin-left: $space*3.5;
+        margin-left: $space * 3.5;
     }
 }
 
-
 /* ------------------------------------ *\
    #COLORS
 \* ------------------------------------ */
@@ -66,30 +61,24 @@
         color: $color-text-inverse;
     }
 }
-
 .n7-alert.is-success {
     background-color: $alert-background-success;
-
     .n7-alert__close-button,
     .n7-alert__text,
     .n7-alert__icon {
         color: $alert-color-text-success;
     }
 }
-
 .n7-alert.is-warning {
     background-color: $alert-background-warning;
-
     .n7-alert__close-button,
     .n7-alert__text,
     .n7-alert__icon {
         color: $alert-color-text-warning;
     }
 }
-
 .n7-alert.is-error {
     background-color: $alert-background-error;
-
     .n7-alert__close-button,
     .n7-alert__text,
     .n7-alert__icon {
@@ -97,7 +86,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -111,5 +99,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }

package/src/lib/styles/components/_anchor-wrapper.scss

@@ -3,7 +3,7 @@
  *
  * Brief description of the component here.
  */
- 
+
 /* ------------------------------------ *\
    #ANCHOR-WRAPPER
 \* ------------------------------------ */
@@ -11,7 +11,6 @@
     // TODO
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -25,5 +24,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

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

@@ -10,20 +10,17 @@
 .n7-avatar {
     padding: 0;
     margin: 0;
-    
     &__background {
         border-radius: 50%;
         background-size: cover;
         display: flex;
         align-items: center;
         justify-content: center;
-
         font-family: $font-family-main;
         font-weight: $font-weight-bold;
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -37,5 +34,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }

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

@@ -3,50 +3,45 @@
  *
  * Style for breadcrumbs for desktop and mobile
  */
- 
+
 /* ------------------------------------ *\
     BREADCRUMBS
 \* ------------------------------------ */
 .n7-breadcrumbs {
     display: flex;
     box-sizing: border-box;
-    padding: calc($space/2);
+    padding: calc($space / 2);
     background-color: $breadcrumbs-background;
+
     @include consistent;
-    
     &__nav {
         display: flex;
     }
-
     &__list {
         display: flex;
         margin: 0;
         padding: 0;
         align-items: center;
     }
-
     &__item {
-        margin: calc($space/2) 0;
+        margin: calc($space / 2) 0;
         list-style: none;
-
-        &:after {
+        &::after {
             content: $breadcrumbs-arrow;
             color: $breadcrumbs-arrow-color;
             font-family: 'n7-icon' !important;
             vertical-align: bottom;
         }
-
         &:last-child {
             a {
                 color: $breadcrumbs-current-color;
                 cursor: default;
             }
-            &:after {
-                content: ''
+            &::after {
+                content: '';
             }
         }
     }
-
     &__label {
         padding: $space;
         text-decoration: none;
@@ -61,39 +56,33 @@
 }
 
 @media all and (max-width: $breakpoint-ipad-portrait) {
-    
     .n7-breadcrumbs {
         background: none;
-
         &__item {
             display: none;
-
             &:nth-last-child(2) {
                 display: block;
-
                 .n7-breadcrumbs__label {
                     /* The back arrow is inserted within the A tag so it's clickable */
-                    &:before {
+                    &::before {
                         content: $breadcrumbs-arrow-mobile;
-                        margin-right: calc($space/2);
+                        margin-right: calc($space / 2);
                         font-family: 'n7-icon' !important;
                         color: $breadcrumbs-arrow-color;
                         vertical-align: bottom;
                     }
                 }
-                
-                &:after {
-                    content: ''
+                &::after {
+                    content: '';
                 }
             }
         }
     }
-    
 }
 
 @media all and (max-width: $breakpoint-smartphone-landscape) {
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }

package/src/lib/styles/components/_bubble-chart.scss

@@ -3,7 +3,7 @@
  *
  * Component displaying a bubble graph. Based on 3djs.
  */
- 
+
 /* ------------------------------------ *\
    #BUBBLECHART
 \* ------------------------------------ */
@@ -15,7 +15,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -29,5 +28,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

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

@@ -3,20 +3,17 @@
  *
  * 
  */
- 
+
 /* ------------------------------------ *\
    #BUTTON
 \* ------------------------------------ */
-
 .n7-btn {
     display: inline-flex;
     align-items: center;
     justify-content: center;
 }
-
 .n7-btn.is-loading {
     min-width: 80px;
-
     .n7-loader {
         width: 18px;
         height: 18px;
@@ -24,30 +21,23 @@
         border-bottom-color: $loader-color-front;
     }
 }
-
 .n7-btn.n7-btn-cta {
     .n7-loader {
         border: 3px solid rgb(200 212 255 / 30%);
         border-bottom-color: $color-gray-00;
     }
 }
-
-
-.n7-btn-cta.is-disabled, 
+.n7-btn-cta.is-disabled,
 .n7-btn-cta.is-disabled:hover {
     border-color: unset;
 }
-
 .n7-btn__text {
     margin: 0 $space * 0.5;
 }
-
 n7-loader {
     display: inline-flex;
 }
 
-
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -61,5 +51,5 @@ n7-loader {
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }

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

@@ -10,7 +10,6 @@
 .n7-carousel {
     position: relative;
     height: $carousel-height;
-
     &__slide {
         position: relative;
         width: 100%;
@@ -19,7 +18,6 @@
         background-position: center;
         background-size: cover;
     }
-
     &__slide-content-wrapper {
         position: relative;
         display: flex;
@@ -29,18 +27,15 @@
         margin: 0 auto;
         z-index: 2;
     }
-
     &__slide-content {
         display: flex;
         width: 100%;
         padding: 3px;
     }
-
     &__slide-content-left {
         max-width: 60%;
         padding: 3px;
     }
-
     &__slide-content-right {
         flex-grow: 1;
         display: flex;
@@ -49,67 +44,54 @@
         padding: 3px;
         position: relative;
     }
-
     &__slide-title {
         display: block;
-        margin-bottom: $space*2;
+        margin-bottom: $space * 2;
         font-family: $font-family-headings;
         font-size: $font-size-xxxl;
         color: $color-text-inverse;
     }
-
     &__slide-text {
         display: block;
-        margin-bottom: $space*2;
+        margin-bottom: $space * 2;
         font-family: $font-family-main;
         font-size: $font-size-l;
         color: $color-text-inverse;
     }
-
     &__slide-img {
         height: 100px;
     }
-
     .n7-carousel__side-img {
-        height: 100px;
         position: absolute;
         z-index: -1;
         height: 100%;
     }
-
     &__slide-metadata-wrapper {
     }
-
     &__slide-metadata {
         color: $color-text-inverse;
     }
-
     &__slide-metadata-label {
-        margin-right: calc($space/2);
+        margin-right: calc($space / 2);
     }
 }
 
-
 /* ------------------------------------ *\
    #SLIDE-WITH-IMAGE
 \* ------------------------------------ */
 .n7-carousel {
     &__slide.has-image {
         /* Overlay */
-        &:after {
-            content: " ";
+        &::after {
+            content: ' ';
             position: absolute;
-            top: 0;
-            left: 0;
-            right: 0;
-            bottom: 0;
-            background-color: rgba(0,0,0,.4);
+            inset: 0;
+            background-color: rgb(0 0 0 / 40%);
             z-index: 1;
         }
     }
 }
 
-
 /* ------------------------------------ *\
    #SLIDE-WITH-VIDEO
 \* ------------------------------------ */
@@ -124,61 +106,51 @@
         width: auto;
         height: auto;
         z-index: 0;
-        -ms-transform: translateX(-50%) translateY(-50%);
-        -moz-transform: translateX(-50%) translateY(-50%);
-        -webkit-transform: translateX(-50%) translateY(-50%);
+        transform: translateX(-50%) translateY(-50%);
+        transform: translateX(-50%) translateY(-50%);
+        transform: translateX(-50%) translateY(-50%);
         transform: translateX(-50%) translateY(-50%);
     }
-    
+
     /* Video overlay */
     &__slide-video-overlay {
         position: absolute;
-        background-color: rgba(0,0,0,.6);
-        top: 0;
-        left: 0;
-        right: 0;
-        bottom: 0;
+        background-color: rgb(0 0 0 / 60%);
+        inset: 0;
         z-index: 1;
     }
 }
 
-
 /* ------------------------------------ *\
    #LATTE-CAROUSEL
 \* ------------------------------------ */
 .n7-carousel {
     .latte-dots {
-        bottom: $space*2;
-
+        bottom: $space * 2;
         .latte-dot {
             background-color: $color-background-base;
-            
             &.active {
                 background-color: $color-main;
             }
         }
     }
-
-    .latte-next, .latte-previous {
+    .latte-next,
+    .latte-previous {
         border-color: $color-gray-00;
-        opacity: .7;
+        opacity: 0.7;
         transition: all $transition-durations;
-
         &:hover {
             opacity: 1;
         }
     }
-
     .latte-previous {
         left: 16px;
     }
-
     .latte-next {
         right: 16px;
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -192,5 +164,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }