@net7/components 3.0.2-rc.2

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

@@ -0,0 +1,190 @@
+/**
+ * ADVANCED-AUTOCOMPLETE
+ *
+ * Search bar autocomplete component which shows datas preview matching the typed words or words parts
+ */
+ 
+/* ------------------------------------ *\
+   #ADVANCED-AUTOCOMPLETE
+\* ------------------------------------ */
+.n7-advanced-autocomplete {
+    &__results {
+        max-height: $advanced-autocomplete-results-max-height;
+        overflow-y: auto;
+        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;
+        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;
+        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);
+        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;
+        font-size: $font-size-m;
+        color: $color-text;
+        word-break: break-all;
+        cursor: pointer;
+
+        &:hover {
+            color: $color-text-link;
+        }
+    }
+
+    /* Title */
+    &__item-title {
+        margin-right: $space;
+    }
+
+    /* Metadata */
+    &__item-metadata {
+        font-size: $font-size-s;
+    }
+
+    &__item-metadata-key {
+        margin-right: calc($space/2);
+        color: $color-text-light;
+    }
+    &__item-metadata-value {
+        margin-right: calc($space/2);
+        color: $color-text-light;
+        font-weight: $font-weight-bold;
+    }
+
+    /* Action bar at the bottom */
+    &__action-bar {
+        display: flex;
+        justify-content: center;
+        padding: $space;
+        
+        .n7-btn {
+            margin-right: $space;
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #EMPTY
+\* ------------------------------------ */
+.n7-advanced-autocomplete.is-empty {
+    .n7-advanced-autocomplete__empty {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: $advanced-autocomplete-empty-height;
+        text-align: center;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #LOADING
+\* ------------------------------------ */
+.n7-advanced-autocomplete.is-loading {
+    .n7-advanced-autocomplete__loader {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        height: $advanced-autocomplete-empty-height;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait - 1) {
+    
+    .n7-advanced-autocomplete {
+        &__results {
+            padding: $space*1.5 $space*1.5;
+        }
+    
+        &__group {
+            display: block;
+            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;
+        }
+
+        
+        &__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) {
+}

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

@@ -0,0 +1,115 @@
+/**
+ * ALERT
+ *
+ * Alert component, with a body (html), an optional icon and an optional close button.
+ * Can be used as an alert for events/warnings/informations.
+ * Classes to be added to the root element: .is-success, .is-warning, .is-error
+ */
+
+/* ------------------------------------ *\
+   #ALERT
+\* ------------------------------------ */
+.n7-alert {
+    position: relative;
+    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;
+        cursor: pointer;
+    }
+
+    &__text {
+        margin: 0;
+        padding: 0;
+        font-size: $font-size-m;
+        line-height: 1.4;
+        color: $alert-color-text;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #WITH-ICON
+\* ------------------------------------ */
+.n7-alert.has-icon {
+    .n7-alert__icon {
+        position: absolute;
+        top: 0;
+        left: 0;
+        bottom: 0;
+        width: $space*6;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        font-size: $font-size-l;
+    }
+
+    .n7-alert__text {
+        margin-left: $space*3.5;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #COLORS
+\* ------------------------------------ */
+.n7-alert.is-success,
+.n7-alert.is-warning,
+.n7-alert.is-error {
+    .n7-alert__close-button,
+    .n7-alert__text,
+    .n7-alert__icon {
+        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 {
+        color: $alert-color-text-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/_anchor-wrapper.scss

@@ -0,0 +1,29 @@
+/**
+ * ANCHOR-WRAPPER
+ *
+ * Brief description of the component here.
+ */
+ 
+/* ------------------------------------ *\
+   #ANCHOR-WRAPPER
+\* ------------------------------------ */
+.n7-anchor-wrapper {
+    // 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/_breadcrumbs.scss

@@ -0,0 +1,99 @@
+/**
+ * BREADCRUMBS
+ *
+ * Style for breadcrumbs for desktop and mobile
+ */
+ 
+/* ------------------------------------ *\
+    BREADCRUMBS
+\* ------------------------------------ */
+.n7-breadcrumbs {
+    display: flex;
+    box-sizing: border-box;
+    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;
+        list-style: none;
+
+        &: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: ''
+            }
+        }
+    }
+
+    &__label {
+        padding: $space;
+        text-decoration: none;
+        cursor: pointer;
+    }
+}
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@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 {
+                        content: $breadcrumbs-arrow-mobile;
+                        margin-right: calc($space/2);
+                        font-family: 'n7-icon' !important;
+                        color: $breadcrumbs-arrow-color;
+                        vertical-align: bottom;
+                    }
+                }
+                
+                &:after {
+                    content: ''
+                }
+            }
+        }
+    }
+    
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}

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

@@ -0,0 +1,33 @@
+/**
+ * BUBBLECHART
+ *
+ * Component displaying a bubble graph. Based on 3djs.
+ */
+ 
+/* ------------------------------------ *\
+   #BUBBLECHART
+\* ------------------------------------ */
+.n7-bubble-chart {
+    .monospace-text {
+        font-family: monospace;
+        user-select: none;
+        font-weight: $font-weight-bold;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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/_carousel.scss

@@ -0,0 +1,184 @@
+/**
+ * CAROUSEL
+ *
+ * Brief description of the component here.
+ */
+
+/* ------------------------------------ *\
+   #CAROUSEL
+\* ------------------------------------ */
+.n7-carousel {
+    position: relative;
+    height: $carousel-height;
+
+    &__slide {
+        position: relative;
+        width: 100%;
+        height: $carousel-height;
+        background-repeat: no-repeat;
+        background-position: center;
+        background-size: cover;
+    }
+
+    &__slide-content-wrapper {
+        position: relative;
+        display: flex;
+        align-items: center;
+        height: 100%;
+        max-width: $carousel-content-width;
+        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;
+        justify-content: flex-end;
+        align-items: flex-end;
+        padding: 3px;
+    }
+
+    &__slide-title {
+        display: block;
+        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;
+        font-family: $font-family-main;
+        font-size: $font-size-l;
+        color: $color-text-inverse;
+    }
+
+    &__slide-metadata-wrapper {
+    }
+
+    &__slide-metadata {
+        color: $color-text-inverse;
+    }
+
+    &__slide-metadata-label {
+        margin-right: calc($space/2);
+    }
+}
+
+
+/* ------------------------------------ *\
+   #SLIDE-WITH-IMAGE
+\* ------------------------------------ */
+.n7-carousel {
+    &__slide.has-image {
+        /* Overlay */
+        &:after {
+            content: " ";
+            position: absolute;
+            top: 0;
+            left: 0;
+            right: 0;
+            bottom: 0;
+            background-color: rgba(0,0,0,.4);
+            z-index: 1;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #SLIDE-WITH-VIDEO
+\* ------------------------------------ */
+.n7-carousel {
+    /* Video bg */
+    &__slide-video {
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        min-width: 100%;
+        min-height: 100%;
+        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%);
+    }
+    
+    /* Video overlay */
+    &__slide-video-overlay {
+        position: absolute;
+        background-color: rgba(0,0,0,.6);
+        top: 0;
+        left: 0;
+        right: 0;
+        bottom: 0;
+        z-index: 1;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #LATTE-CAROUSEL
+\* ------------------------------------ */
+.n7-carousel {
+    .latte-dots {
+        bottom: $space*2;
+
+        .latte-dot {
+            background-color: $color-background-base;
+            
+            &.active {
+                background-color: $color-main;
+            }
+        }
+    }
+
+    .latte-next, .latte-previous {
+        border-color: $color-gray-00;
+        opacity: .7;
+        transition: all $transition-durations;
+
+        &:hover {
+            opacity: 1;
+        }
+    }
+
+    .latte-previous {
+        left: 16px;
+    }
+
+    .latte-next {
+        right: 16px;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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/_chart.scss

@@ -0,0 +1,28 @@
+/**
+ * CHART
+ *
+ * Style to overwrite or complete default library style.
+ */
+ 
+/* ------------------------------------ *\
+   #CHART
+\* ------------------------------------ */
+.n7-chart {
+}
+
+
+/* ------------------------------------ *\
+   #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) {
+}