@net7/components 4.2.0 → 4.2.3-rc4

package/src/lib/styles/components/_sidebar-header.scss

@@ -3,7 +3,7 @@
  *
  * Header for sidebar with icons (on the left and the right) and a text.
  */
- 
+
 /* ------------------------------------ *\
    #SIDEBAR-HEADER
 \* ------------------------------------ */
@@ -12,7 +12,6 @@
     width: 100%;
     height: $sidebar-header-height;
     background-color: $sidebar-header-background-color;
-
     &__icon-left {
         display: block;
         width: $sidebar-header-height;
@@ -23,7 +22,6 @@
         color: $sidebar-left-text-color;
         background-color: $sidebar-left-background-color;
     }
-    
     &__text {
         margin-right: $space;
         margin-left: $space;
@@ -31,13 +29,11 @@
         font-size: $font-size-m;
         color: $sidebar-header-text-color;
     }
-
     &__secondary-text {
         line-height: $sidebar-header-height;
         font-size: $font-size-s;
         color: $sidebar-header-text-color;
     }
-    
     &__icon-right {
         margin-left: auto; // Flexbox stuff
         display: block;
@@ -51,7 +47,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -65,5 +60,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

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

@@ -3,7 +3,7 @@
  *
  * Component for login/signup/forgotten password managing. 
  */
- 
+
 /* ------------------------------------ *\
    #SIGNUP
 \* ------------------------------------ */
@@ -11,129 +11,128 @@
     max-width: $signup-max-width;
     margin-right: auto;
     margin-left: auto;
-    padding: $space*2;
-    
+    padding: $space * 2;
     &__text {
         font-size: $font-size-s;
     }
-
     &__form-error {
-        margin-top: calc($space/2);
-        margin-bottom: calc($space/2);
+        margin-top: calc($space / 2);
+        margin-bottom: calc($space / 2);
         font-size: $font-size-s;
         color: $signup-error-color;
     }
-
     &__form-item {
         display: flex;
         flex-flow: column nowrap;
         padding: $space 0;
         position: relative;
-        
         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"] {
+        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'] {
             background: $signup-input-background;
-
             &:-webkit-autofill {
                 background: $signup-input-background !important;
             }
         }
-
-        input[type="password"] {
+        input[type='password'] {
             padding-right: 35px;
         }
-
         &.has-error {
             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"] {
+            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'] {
                 border-color: $signup-error-color;
             }
         }
     }
-
     &__form-item-label {
         font-size: $font-size-s;
     }
-
     &__form-item-hint {
         margin-bottom: $space;
         font-size: $font-size-xs;
         color: $color-text-light;
     }
-
     &__input-wrapper {
         position: relative;
         width: 100%;
-        
         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"] {
+        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'] {
             width: 100%;
             box-sizing: border-box;
         }
-
         .n7-signup__form-item-show-password {
             position: absolute;
             right: 2px;
             line-height: $form-input-height;
             border: none;
             background: transparent;
-    
             &:hover,
             &:focus {
                 color: $color-text-hover;
             }
         }
     }
-
     &__form-item-forgot-password {
         a {
             text-decoration: underline;
             font-size: $font-size-s;
             color: $color-text;
-
             &:hover,
             &:focus {
                 color: $color-text-hover;
             }
         }
     }
-
     &__footer {
         display: flex;
         align-items: center;
         margin-top: $space;
-        padding: $space*1.5 0;
+        padding: $space * 1.5 0;
         border-top: 1px solid $color-border-normal;
-
         .n7-btn {
             margin-left: auto;
         }
     }
-
     &__footer-text {
         font-size: $font-size-s;
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -148,10 +147,10 @@
 
 @media all and (min-width: $breakpoint-ipad-portrait) {
     .n7-signup {
-        padding: $space*3;
+        padding: $space * 3;
     }
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

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

@@ -3,46 +3,39 @@
  *
  * Autocomplete results suggestions component, simpler version of advanced-autocomplete.
  */
- 
+
 /* ------------------------------------ *\
    #SIMPLE-AUTOCOMPLETE
 \* ------------------------------------ */
 .n7-simple-autocomplete {
-    padding: 0 $space*1.5;
+    padding: 0 $space * 1.5;
     border-radius: $border-radius;
     border: 1px solid $color-border-normal;
     font-size: $font-size-s;
-
     &__list {
         margin: 0;
         padding: 0;
         list-style: none;
     }
-
     &__item {
         border-bottom: 1px solid $color-border-light;
         cursor: pointer;
-
         &:last-child {
             border-bottom: none;
         }
     }
-
     &__link {
         display: block;
-        padding: calc($space/1.5) 0 calc($space/1.5) 0;
+        padding: calc($space / 1.5) 0 calc($space / 1.5) 0;
         color: $color-text;
-
         &:hover {
             color: $color-text-link-hover;
         }
     }
-
     &__label {
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -56,5 +49,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

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

@@ -29,11 +29,9 @@
     &__table-body-row:nth-child(even) {
         background-color: $table-bg-even;
     }
-
     &__table-body-row:nth-child(odd) {
         background-color: $table-bg-odd;
     }
-
     &__table-body-cell {
         padding: $space;
         border: $table-border-size solid $table-border-color;
@@ -54,13 +52,11 @@
     .hidden {
         display: none;
     }
-    
     .showing {
         display: table-row;
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -68,62 +64,53 @@
 }
 
 @media all and (max-width: $breakpoint-ipad-portrait) {
-
     .n7-table {
         &__table {
             display: block;
             width: 100%;
             border: 0;
         }
-        
         &__table-footer {
             display: none;
         }
-
         &__table-header {
             display: block;
             display: none;
         }
-
         &__table-body {
             display: block;
             width: 100%;
         }
-
         &__table-body-row {
             display: block;
             width: 100%;
             border-bottom: $table-border-size solid $table-border-color;
-            margin-bottom: .625em;
+            margin-bottom: 0.625em;
         }
-
         &__table-body-cell {
             display: block;
             border-top: $table-border-size solid $table-border-color;
             border-left: $table-border-size solid $table-border-color;
             border-right: $table-border-size solid $table-border-color;
             border-bottom: 0;
-            font-size: .8em;
+            font-size: 0.8em;
             text-align: right;
-
-            &:before {
+            &::before {
                 content: attr(aria-label);
                 float: left;
                 font-weight: $font-weight-bold;
                 text-transform: uppercase;
             }
-
             &:last-child {
                 border-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/_tag.scss

@@ -9,26 +9,24 @@
     TAG
 \* ------------------------------------ */
 .n7-tag {
-    padding: calc($space/2) + 2 $space;
+    padding: calc($space / 2) + 2 $space;
     background-color: $color-second;
     border-radius: $border-radius-hard;
     font-size: $font-size-xs;
     display: inline-flex;
     align-items: center;
-
-    &__label, &__text {
+    &__label,
+    &__text {
         color: $color-text-inverse;
         font-size: $font-size-xs;
         line-height: 1;
     }
-
     &__label {
         font-weight: $font-weight-bold;
-        margin-right: calc($space/2);
+        margin-right: calc($space / 2);
     }
-    
     &__icon {
-        margin: 0 calc($space/2);
+        margin: 0 calc($space / 2);
         font-size: $font-size-xs;
         color: $color-text-inverse;
         line-height: 1;
@@ -36,7 +34,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -50,5 +47,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}