@net7/components 3.0.2-rc.2

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

@@ -0,0 +1,74 @@
+/**
+ * CONTENT-PLACEHOLDER
+ *
+ * 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;
+        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-size: 500px 104px;
+        position: relative;
+    }
+
+    // Example application
+    .thumb-placeholder {
+        float: left;
+        height: $space*7;
+        width: $space*7;
+        border-radius: 50%;
+    }
+
+    .title-placeholder {
+        margin-left: $space*9;
+    }
+
+    .text-placeholder {
+        margin-left: $space*9;
+        height: $space*4;
+    }
+
+    .text-placeholder + .n7-content-placeholder__item {
+        clear: both;
+    }
+}
+
+@keyframes contentPlaceholderAnimation {
+    0% {
+        background-position: 0 0
+    }
+    100% {
+        background-position: 1000px 0
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}

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

@@ -0,0 +1,93 @@
+/**
+ * DATA WIDGET
+ *
+ * Brief description of the component here.
+ */
+ 
+/* ------------------------------------ *\
+   #DATA WIDGET
+\* ------------------------------------ */
+.n7-data-widget {
+    /* First row */
+    &__main {
+        display: flex;
+        align-items: center;
+    }
+
+    &__main-icon {
+        margin-right: calc($space/2);
+        font-size: $font-size-xl;
+    }
+
+    &__main-title {
+        margin: 0;
+        font-size: $font-size-xl;
+    }
+
+    /* Second row */
+    &__sub {
+        display: flex;
+        align-items: center;
+    }
+
+    &__sub-title {
+        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
+\* ------------------------------------ */
+.n7-data-widget.is-positive {
+    .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
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}

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

@@ -0,0 +1,29 @@
+/**
+ * DATEPICKER
+ *
+ * Brief description of the component here.
+ */
+ 
+/* ------------------------------------ *\
+   #DATEPICKER
+\* ------------------------------------ */
+.n7-datepicker {
+    // TODO
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}

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

@@ -0,0 +1,58 @@
+/**
+ * FACET-HEADER
+ *
+ * Header component for facet, displaying facet title and other datas (for istance count of items).
+ */
+ 
+/* ------------------------------------ *\
+   #FACET-HEADER
+\* ------------------------------------ */
+.n7-facet-header {
+    display: flex;
+    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;
+        height: $facet-header-height;
+        text-align: center;
+        line-height: $facet-header-height;
+        background: $facet-header-icon-background;
+        font-size: $font-size-l;
+    }
+
+    &__icon-right {
+        margin-left: auto;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}

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

@@ -0,0 +1,63 @@
+/**
+ * FACET-YEAR-RANGE
+ *
+ * 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;
+    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;
+        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-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
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}

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

@@ -0,0 +1,164 @@
+/**
+ * FACET
+ *
+ * Facet component including:
+ * - array of checkboxes;
+ * - search inpout with label;
+ * - list of results.
+ */
+ 
+/* ------------------------------------ *\
+   #FACET
+\* ------------------------------------ */
+.n7-facet {
+    /* General section inside facet */
+    &__section {
+        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;
+    }
+
+    &__input-checkbox-input {
+        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"] {
+        width: 100%;
+        box-sizing: border-box;
+        padding-right: $space*4;
+    }
+
+    &__input-text-icon {
+        position: absolute;
+        bottom: 0;
+        right: $space;
+        line-height: $form-input-height;
+        color: $color-text-light;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #LIST
+\* ------------------------------------ */
+.n7-facet {
+    &__section-input-links {
+        max-height: $facet-links-max-height;
+        padding-right: $space;
+        overflow-y: auto;
+    }
+
+    &__input-link {
+        display: flex;
+        align-items: center;
+        padding-bottom: $space;
+        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);
+        border-radius: $border-radius;
+        font-size: $font-size-xs;
+        color: $color-text-inverse;
+        background-color: $color-second;
+    }
+
+    /* Hover */
+    .n7-facet__input-link:hover {
+        .n7-facet__input-link-text {
+            color: $color-text-link;
+        }
+    }
+
+    /* Active */
+    .n7-facet__input-link.is-active {
+        &: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-right: $space;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}

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

@@ -0,0 +1,116 @@
+/**
+ * FOOTER
+ *
+ * General footer structure, (hopefully) suitable for all needs.
+ */
+
+/* ------------------------------------ *\
+   #FOOTER
+\* ------------------------------------ */
+.n7-footer {
+    background-color: $footer-background-color;
+
+    &__content {
+        display: flex;
+        max-width: $page-max-width;
+        margin-right: auto;
+        margin-left: auto;
+        padding: $space*3 0;
+    }
+
+    &__column {
+        flex: 1;
+        padding: 0 calc($grid-gutter-h/2);
+
+        &:first-of-type {
+            padding-left: 0;
+        }
+
+        &:last-of-type {
+            padding-right: 0;
+        }
+    }
+
+    &__column-nav-list {
+        padding-left: 0;
+        list-style: none;
+        font-size: $font-size-xs;
+    }
+
+    &__column-nav-item {
+        margin-bottom: calc($space/2);
+    }
+
+    &__column-nav-link {
+        text-decoration: underline;
+        cursor: pointer;
+    }
+
+    &__column-title,
+    &__column-text {
+        font-size: $font-size-xs;
+    }
+
+    &__column-images {
+        padding-top: $space;
+        
+        img {
+            width: auto;
+            height: $footer-image-height;
+            margin-right: calc($space/2);
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $footer-breakpoint-desktop) {
+    .n7-footer {
+        &__column {
+            
+            &:first-of-type {
+                padding-left: calc($grid-gutter-h/2);
+            }
+
+            &:last-of-type {
+                padding-right: calc($grid-gutter-h/2);
+            }
+        }
+    }
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+}
+
+@media all and (max-width: $footer-breakpoint-mobile) {
+    
+    .n7-footer {
+        &__content {
+            flex-flow: column nowrap;
+        }
+
+        &__column {
+            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;
+        }
+    }
+
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}