@net7/components 4.2.1 → 4.2.3-rc4

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

@@ -21,8 +21,8 @@
 
     &__item-text {
         display: block;
-        margin: 0 $space*1;
-        padding: $space*1 0;
+        margin: 0 $space * 1;
+        padding: $space * 1 0;
         color: $color-text;
         font-size: $font-size-m;
         font-weight: $font-weight-bold;
@@ -39,7 +39,7 @@
             font-weight: $font-weight-normal;
         }
     }
-    
+
     &__item-toggle {
         display: flex;
         align-items: center;
@@ -76,7 +76,7 @@
         align-items: center;
         justify-content: center;
         width: $tree-image-size;
-        margin-left: $space*1;
+        margin-left: $space * 1;
         color: $color-text-light;
         flex-shrink: 0;
     }
@@ -93,7 +93,7 @@
     }
 
     &__item-img {
-        margin-left: $space*1;
+        margin-left: $space * 1;
         width: $tree-image-size;
         height: $tree-image-size;
         object-fit: cover;
@@ -117,7 +117,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #INDENTATION
 \* ------------------------------------ */
@@ -126,57 +125,61 @@
     .n7-tree__item-contents {
         padding-left: $tree-indent;
     }
+
     .n7-tree__item-toggle {
         border-left: 1px solid $color-border-light;
     }
+
     .n7-tree__children-wrapper {
         /* 3rd level */
         .n7-tree__item-contents {
-            padding-left: $tree-indent*2;
+            padding-left: $tree-indent * 2;
         }
+
         .n7-tree__item-toggle {
             border-left: 1px solid $color-border-light;
         }
+
         .n7-tree__children-wrapper {
             /* 4th level */
             .n7-tree__item-contents {
-                padding-left: $tree-indent*3;
+                padding-left: $tree-indent * 3;
             }
-    
+
             .n7-tree__children-wrapper {
                 /* 5th level */
                 .n7-tree__item-contents {
-                    padding-left: $tree-indent*4;
+                    padding-left: $tree-indent * 4;
                 }
-    
+
                 .n7-tree__children-wrapper {
                     /* 6th level */
                     .n7-tree__item-contents {
-                        padding-left: $tree-indent*5;
+                        padding-left: $tree-indent * 5;
                     }
-    
+
                     .n7-tree__children-wrapper {
                         /* 7th level */
                         .n7-tree__item-contents {
-                            padding-left: $tree-indent*6;
+                            padding-left: $tree-indent * 6;
                         }
-    
+
                         .n7-tree__children-wrapper {
                             /* 8th level */
                             .n7-tree__item-contents {
-                                padding-left: $tree-indent*7;
+                                padding-left: $tree-indent * 7;
                             }
-    
+
                             .n7-tree__children-wrapper {
                                 /* 9th level */
                                 .n7-tree__item-contents {
-                                    padding-left: $tree-indent*8;
+                                    padding-left: $tree-indent * 8;
                                 }
-    
+
                                 .n7-tree__children-wrapper {
                                     /* 10th level */
                                     .n7-tree__item-contents {
-                                        padding-left: $tree-indent*9;
+                                        padding-left: $tree-indent * 9;
                                     }
 
                                     /* All flats */
@@ -189,6 +192,7 @@
         }
     }
 }
+
 /* stylelint-enable */
 
 /* ------------------------------------ *\
@@ -204,5 +208,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (-webkit-min-resolution: 2), (min-resolution: 192dpi) {
+}

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

@@ -3,10 +3,11 @@
  *
  * Component to guide the user through a step-by-step process.
  */
- 
+
 /* ------------------------------------ *\
    #WIZARD
 \* ------------------------------------ */
+
 .n7-wizard {
     height: $wizard-height;
 
@@ -22,16 +23,16 @@
         height: $wizard-height;
         line-height: $wizard-height;
         padding: 0 0 0 $wizard-number-circle-margin;
-        
+
         &:not(:first-child) {
-            padding-left: calc($wizard-height/2.5) + $wizard-number-circle-margin;
+            padding-left: calc($wizard-height / 2.5) + $wizard-number-circle-margin;
         }
 
         /* Past items */
         background-color: $wizard-past-bg-color;
         color: $wizard-past-text-color;
         cursor: pointer;
-        
+
         /* Current item */
         &.is-active {
             background-color: $wizard-present-bg-color;
@@ -44,7 +45,7 @@
         }
 
         /* Future items */
-        &.is-active ~ * {
+        &.is-active~* {
             background-color: $wizard-future-bg-color;
             color: $wizard-future-text-color;
             cursor: not-allowed;
@@ -55,12 +56,12 @@
         }
 
         &:first-child {
-            border-radius: calc($wizard-height/2) 0 0 calc($wizard-height/2);
+            border-radius: calc($wizard-height / 2) 0 0 calc($wizard-height / 2);
         }
 
         &:last-child {
             padding-right: $wizard-number-circle-margin;
-            border-radius: 0 calc($wizard-height/2) calc($wizard-height/2) 0;
+            border-radius: 0 calc($wizard-height / 2) calc($wizard-height / 2) 0;
 
             .n7-wizard__text {
                 margin-right: $wizard-number-circle-margin;
@@ -69,40 +70,50 @@
 
         /* Arrows */
         &:not(:last-child) {
-            &:after {
-                content: " ";
+            &::after {
+                content: ' ';
                 width: 0;
                 height: 0;
                 border-style: solid;
-                border-width: calc($wizard-height/2) 0 calc($wizard-height/2) calc($wizard-height/3);
+                border-width: calc($wizard-height / 2) 0 calc($wizard-height / 2) calc($wizard-height / 3);
                 border-color: transparent transparent transparent $wizard-past-bg-color;
                 position: absolute;
                 top: 0;
-                right: ceil(- calc($wizard-height/3)); // ceil is used to avoid showing fractions of pixel
+                right: round(-calc($wizard-height / 3));
+
+                // right: ceil(
+                //     -calc($wizard-height / 3)
+                // ); // ceil is used to avoid showing fractions of pixel
+
                 z-index: 10;
             }
 
-            &:before {
-                content: " ";
+            &::before {
+                content: ' ';
                 width: 0;
                 height: 0;
                 border-style: solid;
-                border-width: calc($wizard-height/1.5) 0 calc($wizard-height/1.5) calc($wizard-height/2.5);
+                border-width: calc($wizard-height / 1.5) 0 calc($wizard-height / 1.5) calc($wizard-height / 2.5);
                 border-color: transparent transparent transparent $color-background-base;
                 position: absolute;
-                top: - calc((( calc($wizard-height/1.5) * 2) - ( calc($wizard-height/2) * 2)) /2);
-                right: ceil(- calc($wizard-height/2.5)); // ceil is used to avoid showing fractions of pixel
+                top: -calc(((calc($wizard-height / 1.5) * 2) - (calc($wizard-height / 2) * 2)) / 2);
+                right: -calc($wizard-height / 2.5);
+
+                // right: ceil(
+                //     -calc($wizard-height / 2.5)
+                // ); // ceil is used to avoid showing fractions of pixel
+
                 z-index: 5;
             }
 
             &.is-active {
-                &:after {
+                &::after {
                     border-color: transparent transparent transparent $wizard-present-bg-color;
                 }
             }
 
-            &.is-active ~ * {
-                &:after {
+            &.is-active~* {
+                &::after {
                     border-color: transparent transparent transparent $wizard-future-bg-color;
                 }
             }
@@ -119,7 +130,7 @@
         font-weight: $font-weight-bold;
         font-size: $wizard-number-size;
         vertical-align: top;
-        border-radius: calc(($wizard-height - ($wizard-number-circle-margin * 2))/2);
+        border-radius: calc(($wizard-height - ($wizard-number-circle-margin * 2)) / 2);
         background-color: $wizard-past-number-bg-color;
     }
 
@@ -132,19 +143,15 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
-@media all and (max-width: $breakpoint-laptop) {
-}
+@media all and (max-width: $breakpoint-laptop) {}
 
-@media all and (max-width: $breakpoint-ipad-portrait) {
-}
+@media all and (max-width: $breakpoint-ipad-portrait) {}
 
-@media all and (max-width: $breakpoint-smartphone-landscape) {
-}
+@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/generic/_color_scheme.scss

@@ -19,9 +19,9 @@ $color-gray-05: #262216;
 $color-main: #2e5bff;
 $color-second: #8c54ff;
 $color-third: #f5a623;
-$color-text-hover: rgb(26, 64, 204); /* Used for text link in hover state */
+$color-text-hover: rgb(26 64 204); /* Used for text link in hover state */
 
 // Status colors
 $color-error: #d12c47;
 $color-warning: #f5a623;
-$color-success: #3f7600;
+$color-success: #3f7600;

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

@@ -9,56 +9,53 @@
 // ------------------------------------ //
 @mixin overlay {
     position: absolute;
-    content: " ";
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
-    background-color: rgba(#000000, .4) !important;
+    content: ' ';
+    inset: 0;
+    background-color: rgba(#000000, 0.4) !important;
     transition: all $transition-durations;
 }
 
 @mixin overlay-bottom-gradient {
     position: absolute;
-    content: " ";
-    top: 0;
-    bottom: 0;
-    left: 0;
-    right: 0;
+    content: ' ';
+    inset: 0;
+    background: linear-gradient(
+        top,
+        rgb(0 0 0 / 0%) 0%,
+        rgb(0 0 0 / 0%) 50%,
+        rgb(0 0 0 / 100%) 100%
+    ); /* FF3.6-15 */
 
-    background: -moz-linear-gradient(top, rgba(0,0,0,0) 0%, rgba(0,0,0,0) 50%, rgba(0,0,0,1) 100%); /* FF3.6-15 */
-    background: -webkit-linear-gradient(top, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* Chrome10-25,Safari5.1-6 */
-    background: linear-gradient(to bottom, rgba(0,0,0,0) 0%,rgba(0,0,0,0) 50%,rgba(0,0,0,1) 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+    background: linear-gradient(
+        top,
+        rgb(0 0 0 / 0%) 0%,
+        rgb(0 0 0 / 0%) 50%,
+        rgb(0 0 0 / 100%) 100%
+    ); /* Chrome10-25,Safari5.1-6 */
+
+    background: linear-gradient(
+        to bottom,
+        rgb(0 0 0 / 0%) 0%,
+        rgb(0 0 0 / 0%) 50%,
+        rgb(0 0 0 / 100%) 100%
+    ); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
 
     transition: all $transition-durations;
 }
 
 @mixin consistent {
-    &:after {
+    &::after {
         content: ' ';
         clear: both;
         display: block;
     }
 }
 
-
 // ------------------------------------ //
 // #INPUT PLACEHOLDER STYLE
 // ------------------------------------ //
 @mixin placeholder {
-    &::-webkit-input-placeholder {
-        @content;
-    }
-
-    &:-moz-placeholder {
-        @content;
-    }
-
-    &::-moz-placeholder {
-        @content;
-    }
-
-    &:-ms-input-placeholder {
+    &::placeholder {
         @content;
     }
 }
@@ -75,7 +72,7 @@
 // #FIRST LETTER CAPITAL
 // ------------------------------------ //
 @mixin first-letter-capital() {
-    &:first-letter {
+    &::first-letter {
         text-transform: uppercase;
     }
-}
+}

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

@@ -23,14 +23,13 @@ $grid-gutter-v: $space * 2;
 // ------------------------------------ //
 // #FONTS
 // ------------------------------------ //
-@import url("https://fonts.googleapis.com/css?family=Lato:400,400i,700,700i");
+@import '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
 $font-size-xl: 26px; // 1.425rem; // 26px
@@ -98,11 +97,9 @@ $button-large-height: 50px;
 $color-button-text: $color-text-light;
 $color-button-text-hover: $color-text-link;
 $color-button-text-disabled: rgba($color-text, 0.4);
-
 $color-button-bg: $color-gray-02;
 $color-button-bg-hover: $color-gray-01;
 $color-button-bg-disabled: $color-gray-01;
-
 $color-button-border: $color-border-normal;
 $color-button-border-hover: $color-border-normal;
 
@@ -110,12 +107,10 @@ $color-button-border-hover: $color-border-normal;
 $color-button-cta-text: $color-text-inverse;
 $color-button-cta-text-hover: $color-text-inverse;
 $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, 0.4);
-
 $color-button-cta-border: $color-main; // Change this if you want a darker button border.
 
 // Light button (no background or border, only text)
@@ -165,15 +160,18 @@ $loader-color-back: rgba($color-main, 0.3);
 // ------------------------------------ //
 $table-border-color: $color-border-normal;
 $table-border-size: 2px;
+
 /* Header */
 $table-header-font-size: $font-size-m;
 $table-header-text-color: $color-text;
 $table-header-bg: $color-background-medium;
+
 /* Contents */
 $table-font-size: $font-size-s;
 $table-text-color: $color-text;
 $table-bg-odd: $color-background-base;
 $table-bg-even: $color-background-medium;
+
 /* Footer */
 $table-footer-font-size: $font-size-s;
 $table-footer-text-color: $color-text-light;
@@ -185,8 +183,8 @@ $table-footer-bg: $color-background-medium;
 $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
@@ -289,7 +287,7 @@ $signup-error-color: $color-error;
 $advanced-autocomplete-results-max-height: 300px;
 $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);
+$advanced-autocomplete-action-bar-shadow: 0 -5px 15px -5px rgb(0 0 0 / 30%);
 
 // ------------------------------------ //
 // #FACET-HEADER

package/src/lib/styles/global/_forms.scss

@@ -7,11 +7,21 @@
 /* ------------------------------------ *\
    #GENERAL
 \* ------------------------------------ */
-select, textarea, input[type="date"], input[type="datetime"],
-input[type="datetime-local"], input[type="email"],
-input[type="month"], input[type="number"], input[type="password"],
-input[type="search"], input[type="tel"], input[type="text"],
-input[type="time"], input[type="url"], input[type="week"] {
+select,
+textarea,
+input[type='date'],
+input[type='datetime'],
+input[type='datetime-local'],
+input[type='email'],
+input[type='month'],
+input[type='number'],
+input[type='password'],
+input[type='search'],
+input[type='tel'],
+input[type='text'],
+input[type='time'],
+input[type='url'],
+input[type='week'] {
     box-sizing: border-box;
     padding: 0 $space;
     border-width: $form-border-size;
@@ -23,56 +33,50 @@ input[type="time"], input[type="url"], input[type="week"] {
     font-size: $font-size-s;
     font-weight: $font-weight-normal;
     outline: none;
+    height: $form-input-height;
+    line-height: $form-input-height;
+
     // box-shadow: inset 0px 0px 6px 0px rgba(0,0,0,0.05);
     // transition-property: border;
     // transition-duration: $transition-durations;
-
     &:hover {
     }
-
     &:focus,
     &:active {
         // border-color: $color-brand;
         // box-shadow: inset 0 0 6px 0 rgba(0,0,0,0.05), 0 0 2px fade($color-brand, 20%);
     }
-
     &.small {
         // height: $form-input-small-height;
         // padding: 0 8px;
         // font-size: $font-size-s;
         // line-height: $form-input-small-height;
     }
-
-    &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-        color: $color-text-light !important;
-        font-weight: $font-weight-normal!important;
-    }
-    &::-moz-placeholder { /* Firefox 19+ */
-        color: $color-text-light !important;
-        font-weight: $font-weight-normal !important;
-    }
-    &:-ms-input-placeholder { /* IE 10+ */
-        color: $color-text-light !important;
-        font-weight: $font-weight-normal !important;
-    }
-    &:-moz-placeholder { /* Firefox 18- */
+    &::placeholder {
         color: $color-text-light !important;
         font-weight: $font-weight-normal !important;
     }
-}
 
-/* Set Height */
-textarea, input[type="date"], input[type="datetime"],
-input[type="datetime-local"], input[type="email"],
-input[type="month"], input[type="number"], input[type="password"],
-input[type="search"], input[type="tel"], input[type="text"],
-input[type="time"], input[type="url"], input[type="week"] {
-    height: $form-input-height;
-    line-height: $form-input-height;
+    /* ------------------------------------ *\
+       #DISABLED
+    \* ------------------------------------ */
+    &:disabled,
+    &.is-disabled {
+        border-color: $color-border-light;
+        background-color: $color-background-medium;
+        color: $color-text-light;
+
+        /* Placeholder text for disableds */
+        &::placeholder {
+            color: rgba($color-text-light, 0.5);
+        }
+    }
 }
 
 /* Select */
-select, #new_post select {
+/* stylelint-disable-next-line */
+select,
+#new_post select {
     height: $form-input-height;
 }
 
@@ -86,37 +90,8 @@ label {
 }
 
 /* Textarea */
-textarea, .form-control textarea {
+textarea,
+.form-control textarea {
     line-height: 1.2;
     padding: $space;
 }
-
-
-/* ------------------------------------ *\
-   #DISABLED
-\* ------------------------------------ */
-select, textarea, input[type="date"], input[type="datetime"],
-input[type="datetime-local"], input[type="email"],
-input[type="month"], input[type="number"], input[type="password"],
-input[type="search"], input[type="tel"], input[type="text"],
-input[type="time"], input[type="url"], input[type="week"] {
-    &:disabled, &.is-disabled {
-        border-color: $color-border-light;
-        background-color: $color-background-medium;
-        color: $color-text-light;
-
-        /* Placeholder text for disableds */
-        &::-webkit-input-placeholder { /* Chrome/Opera/Safari */
-            color: rgba($color-text-light, .5);
-        }
-        &::-moz-placeholder { /* Firefox 19+ */
-            color: rgba($color-text-light, .5);
-        }
-        &:-ms-input-placeholder { /* IE 10+ */
-            color: rgba($color-text-light, .5);
-        }
-        &:-moz-placeholder { /* Firefox 18- */
-            color: rgba($color-text-light, .5);
-        }
-    }
-}

package/src/lib/styles/global/_global.scss

@@ -9,13 +9,13 @@
 /* ------------------------------------ *\
    #TAGS
 \* ------------------------------------ */
-html, body {
+html,
+body {
     height: 100%;
     margin: 0;
     padding: 0;
     font-size: 16px;
 }
-
 body {
     box-sizing: border-box;
     background-color: $color-background-base;
@@ -23,12 +23,10 @@ body {
     font-family: $font-family-main;
     -webkit-font-smoothing: antialiased;
 }
-
 :focus {
     outline: 0;
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -42,5 +40,5 @@ body {
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }