@net7/components 4.2.1 → 4.2.3-rc4

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

@@ -3,14 +3,13 @@
  *
  * Style to overwrite or complete default library style.
  */
- 
+
 /* ------------------------------------ *\
    #CHART
 \* ------------------------------------ */
 .n7-chart {
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -24,5 +23,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

package/src/lib/styles/components/_content-placeholder.scss

@@ -3,24 +3,28 @@
  *
  * Component used in loading status to show a preview of what real results/contents will be.
  */
- 
+
 /* ------------------------------------ *\
    #CONTENT-PLACEHOLDER
 \* ------------------------------------ */
 .n7-content-placeholder {
     &__item {
         background-color: $color-background-light;
-        height: $space*2;
+        height: $space * 2;
         width: auto;
         margin-bottom: $space;
         border-radius: $border-radius;
-
         animation-duration: 1.3s;
         animation-fill-mode: forwards;
         animation-iteration-count: infinite;
         animation-name: contentPlaceholderAnimation;
         animation-timing-function: linear;
-        background: linear-gradient(to right, $color-background-light 0%, $color-background-medium 30%, $color-background-light 60%);
+        background: linear-gradient(
+            to right,
+            $color-background-light 0%,
+            $color-background-medium 30%,
+            $color-background-light 60%
+        );
         background-size: 500px 104px;
         position: relative;
     }
@@ -28,20 +32,17 @@
     // Example application
     .thumb-placeholder {
         float: left;
-        height: $space*7;
-        width: $space*7;
+        height: $space * 7;
+        width: $space * 7;
         border-radius: 50%;
     }
-
     .title-placeholder {
-        margin-left: $space*9;
+        margin-left: $space * 9;
     }
-
     .text-placeholder {
-        margin-left: $space*9;
-        height: $space*4;
+        margin-left: $space * 9;
+        height: $space * 4;
     }
-
     .text-placeholder + .n7-content-placeholder__item {
         clear: both;
     }
@@ -49,14 +50,13 @@
 
 @keyframes contentPlaceholderAnimation {
     0% {
-        background-position: 0 0
+        background-position: 0 0;
     }
     100% {
-        background-position: 1000px 0
+        background-position: 1000px 0;
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -70,5 +70,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

package/src/lib/styles/components/_data-widget.scss

@@ -3,7 +3,7 @@
  *
  * Brief description of the component here.
  */
- 
+
 /* ------------------------------------ *\
    #DATA WIDGET
 \* ------------------------------------ */
@@ -13,17 +13,14 @@
         display: flex;
         align-items: center;
     }
-
     &__main-icon {
-        margin-right: calc($space/2);
+        margin-right: calc($space / 2);
         font-size: $font-size-xl;
     }
-
     &__second-icon {
-        margin-right: calc($space/2);
+        margin-right: calc($space / 2);
         height: $font-size-xl;
     }
-
     &__main-title {
         margin: 0;
         font-size: $font-size-xl;
@@ -34,29 +31,24 @@
         display: flex;
         align-items: center;
     }
-
     &__sub-title {
-        margin: 0 calc($space/2) 0 0;
+        margin: 0 calc($space / 2) 0 0;
         font-size: $font-size-xs;
         line-height: 1;
     }
-
     &__sub-info {
         display: flex;
     }
-
     &__sub-info-icon {
         font-size: $font-size-xs;
         line-height: 1;
     }
-
     &__sub-info-label {
         font-size: $font-size-xs;
         line-height: 1;
     }
 }
 
-
 /* ------------------------------------ *\
    #POSITIVE/NEGATIVE COLORS
 \* ------------------------------------ */
@@ -64,23 +56,19 @@
     .n7-data-widget__sub-info-icon {
         color: $color-success;
     }
-
     .n7-data-widget__sub-info-label {
         color: $color-success;
     }
 }
-
 .n7-data-widget.is-error {
     .n7-data-widget__sub-info-icon {
         color: $color-error;
     }
-
     .n7-data-widget__sub-info-label {
         color: $color-error;
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -94,5 +82,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }

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

@@ -3,7 +3,7 @@
  *
  * Brief description of the component here.
  */
- 
+
 /* ------------------------------------ *\
    #DATEPICKER
 \* ------------------------------------ */
@@ -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/_facet-header.scss

@@ -3,7 +3,7 @@
  *
  * Header component for facet, displaying facet title and other datas (for istance count of items).
  */
- 
+
 /* ------------------------------------ *\
    #FACET-HEADER
 \* ------------------------------------ */
@@ -12,19 +12,16 @@
     height: $facet-header-height;
     background: $facet-header-background;
     color: $facet-header-text-color;
-
     &__text {
         margin-right: $space;
         margin-left: $space;
         font-size: $font-size-m;
         line-height: $facet-header-height;
     }
-
     &__secondary-text {
         font-size: $font-size-s;
         line-height: $facet-header-height;
     }
-
     &__icon-left,
     &__icon-right {
         width: $facet-header-height;
@@ -34,13 +31,11 @@
         background: $facet-header-icon-background;
         font-size: $font-size-l;
     }
-
     &__icon-right {
         margin-left: auto;
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -54,5 +49,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

package/src/lib/styles/components/_facet-year-range.scss

@@ -3,49 +3,44 @@
  *
  * Content of the facet that includes to selects to select a raneg of values/years.
  */
- 
+
 /* ------------------------------------ *\
    #FACET-YEAR-RANGE
 \* ------------------------------------ */
 .n7-facet-year-range {
-    padding: $space*1.5 0 $space*1.5 $space*1.5;
+    padding: $space * 1.5 0 $space * 1.5 $space * 1.5;
     display: flex;
     box-sizing: border-box;
+
     // display: grid;
     // grid-template-columns: repeat(2, 1fr);
     // grid-column-gap: $space*1.5;
-
     .n7-facet-year-range__in,
     .n7-facet-year-range__out {
         display: flex;
         box-sizing: border-box;
-        padding-right: $space*1.5;
+        padding-right: $space * 1.5;
         flex: 0 0 50%;
         max-width: 50%;
         align-items: center;
     }
-
     .n7-facet-year-range__in {
     }
-
     .n7-facet-year-range__in-label,
     .n7-facet-year-range__out-label {
-        margin-right: calc($space/2);
+        margin-right: calc($space / 2);
         margin-bottom: 0;
     }
-
     .n7-facet-year-range__in-select,
     .n7-facet-year-range__out-select {
         flex-grow: 1;
     }
-
     .n7-facet-year-range__in-select-placeholder,
     .n7-facet-year-range__out-select-placeholder {
         color: $color-text-light;
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -59,5 +54,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
-}
+@media (resolution >= 2), (resolution >=192dpi) {
+}

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

@@ -6,59 +6,51 @@
  * - search inpout with label;
  * - list of results.
  */
- 
+
 /* ------------------------------------ *\
    #FACET
 \* ------------------------------------ */
 .n7-facet {
     /* General section inside facet */
     &__section {
-        margin-bottom: $facet-inner-padding*2;
+        margin-bottom: $facet-inner-padding * 2;
         margin-left: $facet-inner-padding;
         margin-right: $facet-inner-padding;
     }
 }
 
-
 /* ------------------------------------ *\
    #INPUT CHECKBOX
 \* ------------------------------------ */
 .n7-facet {
     &__section-input-checkbox {
         display: inline-block;
-        margin-right: $space*2;
+        margin-right: $space * 2;
     }
-
     &__input-checkbox-input {
-        margin-right: calc($space/2);
+        margin-right: calc($space / 2);
     }
-
     &__input-checkbox-label {
         font-size: $font-size-s;
     }
 }
 
-
 /* ------------------------------------ *\
    #INPUT TEXT
 \* ------------------------------------ */
 .n7-facet {
-
     &__input-text-label {
         display: block;
         font-size: $font-size-s;
     }
-
     &__input-text-wrapper {
         position: relative;
     }
-
-    &__input-text[type="text"] {
+    &__input-text[type='text'] {
         width: 100%;
         box-sizing: border-box;
-        padding-right: $space*4;
+        padding-right: $space * 4;
     }
-
     &__input-text-icon {
         position: absolute;
         bottom: 0;
@@ -68,7 +60,6 @@
     }
 }
 
-
 /* ------------------------------------ *\
    #LIST
 \* ------------------------------------ */
@@ -78,7 +69,6 @@
         padding-right: $space;
         overflow-y: auto;
     }
-
     &__input-link {
         display: flex;
         align-items: center;
@@ -86,26 +76,22 @@
         margin-bottom: $space;
         border-bottom: 1px solid $color-border-normal;
         cursor: pointer;
-
         &:last-child {
             margin-bottom: 0;
             border-bottom: 0;
         }
     }
-
     &__input-link-icon {
         margin-right: $space;
         font-size: $font-size-m;
     }
-
     &__input-link-text {
         padding-right: $space;
         font-size: $font-size-m;
     }
-
     &__input-link-counter {
         margin-left: auto;
-        padding: calc($space/4) calc($space/2);
+        padding: calc($space / 4) calc($space / 2);
         border-radius: $border-radius;
         font-size: $font-size-xs;
         color: $color-text-inverse;
@@ -121,32 +107,29 @@
 
     /* Active */
     .n7-facet__input-link.is-active {
-        &:before {
-            content: "\e938";
+        &::before {
+            content: '\e938';
             font-family: 'n7-icon';
             margin-right: $space;
             color: $color-success;
         }
-
         .n7-facet__input-link-text {
             font-weight: $font-weight-bold;
         }
     }
 }
 
-
 /* ------------------------------------ *\
    #SELECT
 \* ------------------------------------ */
 .n7-facet {
     &__section-input-select {
         display: inline-block;
-        margin-bottom: calc($space/2);
+        margin-bottom: calc($space / 2);
         margin-right: $space;
     }
 }
 
-
 /* ------------------------------------ *\
    #MEDIA-QUERIES
 \* ------------------------------------ */
@@ -160,5 +143,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }

package/src/lib/styles/components/_file-selector.scss

@@ -3,7 +3,7 @@
  *
  * Brief description of the component here.
  */
- 
+
 /* ------------------------------------ *\
    #FILE-SELECTOR
 \* ------------------------------------ */
@@ -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/_footer.scss

@@ -9,7 +9,6 @@
 \* ------------------------------------ */
 .n7-footer {
     background-color: $footer-background-color;
-
     &__content {
         display: flex;
         max-width: $page-max-width;
@@ -17,78 +16,63 @@
         margin-left: auto;
         padding: $space * 4 0 $space * 2 0;
     }
-
     &__column {
         flex: 1;
-        padding: 0 calc($grid-gutter-h/2);
-
+        padding: 0 calc($grid-gutter-h / 2);
         &:first-of-type {
             padding-left: 0;
         }
-
         &:last-of-type {
             padding-right: 0;
         }
     }
-
     &__column-nav {
         margin-bottom: $space * 2;
     }
-
     &__column-nav-list {
         padding-left: 0;
         list-style: none;
         font-size: $font-size-xs;
     }
-
     &__column-nav-item {
-        margin-bottom: calc($space/2);
+        margin-bottom: calc($space / 2);
     }
-
     &__column-nav-list {
         margin: 0;
         text-decoration: underline;
         cursor: pointer;
     }
-
     &__column-title {
         margin-bottom: $space;
         font-size: $font-size-s;
     }
-
     &__column-text {
         margin-bottom: $space * 2;
         font-size: $font-size-xs;
     }
-
     &__column-images {
         margin-bottom: $space * 2;
-
         img {
             width: auto;
             height: $footer-image-height;
-            margin-right: calc($space/2);
+            margin-right: calc($space / 2);
         }
     }
 
     /* Select */
     &__column-selects {
         margin-bottom: $space * 2;
-
         > * {
             display: block;
         }
-
         > *:not(:last-child) {
             margin-bottom: $space;
         }
-
         label {
             display: block;
             margin-bottom: $space * 0.5;
             font-size: $font-size-s;
         }
-
         .n7-facet__input-select {
             font-size: $font-size-s;
         }
@@ -102,11 +86,10 @@
     .n7-footer {
         &__column {
             &:first-of-type {
-                padding-left: calc($grid-gutter-h/2);
+                padding-left: calc($grid-gutter-h / 2);
             }
-
             &:last-of-type {
-                padding-right: calc($grid-gutter-h/2);
+                padding-right: calc($grid-gutter-h / 2);
             }
         }
     }
@@ -120,20 +103,16 @@
         &__content {
             flex-flow: column nowrap;
         }
-
         &__column {
-            padding-bottom: calc($grid-gutter-h/2);
-
+            padding-bottom: calc($grid-gutter-h / 2);
             &:last-of-type {
                 padding-bottom: 0;
             }
         }
-
         &__column-nav-list,
         &__column-nav-item {
             margin-bottom: 0;
         }
-
         &__column-nav-list {
             margin-top: 0;
         }
@@ -141,5 +120,5 @@
 }
 
 /* Retina */
-@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+@media (resolution >= 2), (resolution >=192dpi) {
 }