@net7/components 3.0.2-rc.2

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

@@ -0,0 +1,474 @@
+/**
+ * HEADER
+ *
+ * Style for header, including main navigation
+ */
+
+/* ------------------------------------ *\
+    HEADER
+\* ------------------------------------ */
+.n7-header {
+    height: $header-height;
+    background-color: $header-bg-color;
+
+    &__content {
+        height: $header-height;
+        display: flex;
+        flex-wrap: nowrap;
+    }
+
+    /* Logo and title */
+    &__logo-title {
+        flex-grow: 0;
+        flex-shrink: 0;
+        flex-basis: auto;
+        cursor: pointer;
+    }
+
+    &__logo-link {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        height: 100%;
+    }
+
+    &__logo {
+        max-height: $header-logo-height;
+        width: auto;
+        height: auto;
+    }
+
+    &__title-subtitle {
+        padding: $space;
+    }
+
+    &__title {
+        margin: 0 0 calc($space/2) 0;
+        color: $color-text;
+        font-size: $font-size-m;
+        font-weight: $font-weight-bold;
+    }
+
+    &__subtitle {
+        margin: 0;
+        color: $color-text;
+        font-size: $font-size-s;
+        font-weight: $font-weight-normal;
+    }
+
+    /* Main menu */
+    &__nav {
+        flex-grow: 2;
+        flex-basis: auto;
+        z-index: 2;
+    }
+
+    &__nav-content {
+        height: 100%;
+    }
+
+    &__nav-list {
+        height: 100%;
+        margin: 0;
+        padding: 0;
+        list-style: none;
+        text-align: right;
+    }
+
+    &__nav-item {
+        display: inline-block;
+        position: relative;
+        height: 100%;
+        margin: 0;
+        cursor: pointer;
+
+        &:hover {
+            .n7-header__subnav-list {
+                display: block;
+            }
+        }
+    }
+
+    &__nav-link {
+        display: flex;
+        align-items: center;
+        height: 100%;
+        color: $color-text;
+    }
+
+    &__nav-icon {
+        margin-right: $space;
+    }
+
+    &__nav-label {
+        font-size: $font-size-m;
+    }
+
+    /* Current page */
+    &__nav-item.is-current {
+        .n7-header__nav-label {
+            font-weight: $font-weight-bold;
+        }
+    }
+
+    /* Sublevel (dropdown) menu */
+    &__subnav-list {
+        display: none;
+        position: absolute;
+        left: -50%;
+        margin: 0;
+        padding: 0;
+        background-color: $color-background-base;
+        list-style: none;
+        text-align: left;
+    }
+
+    &__subnav-item {
+        margin: 0;
+        padding: 0;
+
+        &:last-child {
+            .n7-header__subnav-link {
+                border-bottom: 0;
+            }
+        }
+    }
+
+    &__subnav-link {
+        display: block;
+        padding: $space*1.5;
+        border-bottom: 1px solid $color-border-light;
+        color: $color-text;
+    }
+
+    /* Current page */
+    &__subnav-item.is-current {
+        .n7-header__subnav-label {
+            font-weight: $font-weight-bold;
+        }
+    }
+
+    /* Tools: search, actions, buttons, user profile */
+    &__tools {
+        flex-grow: 0;
+        // flex-basis: 0;
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+        justify-content: flex-end;
+        height: 100%;
+        margin-left: auto;
+        padding: 0 0 0 $space*2;
+    }
+
+    /* Search */
+    &__search {
+        position: relative;
+    }
+
+    &__search-input[type="search"] {
+        height: $header-search-input-height;
+        line-height: $header-search-input-height;
+    }
+
+    &__search-btn {
+        position: absolute;
+        right: 0;
+        border: 0;
+        background-color: transparent;
+
+        &:after {
+            content: "\e9b9";
+            color: $color-text-light;
+            font-family: "n7-icon";
+            font-size: $font-size-l;
+            vertical-align: middle;
+            line-height: $header-search-input-height;
+        }
+    }
+
+    &__search-btn-label {
+        display: none;
+    }
+
+    /* Actions */
+    &__actions {
+        display: flex;
+        height: $header-height;
+    }
+
+    &__action {
+        position: relative;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: $header-height;
+        height: $header-height;
+        cursor: pointer;
+    }
+
+    &__action-icon {
+        font-size: $font-size-xxl;
+    }
+
+    &__action-badge {
+        display: block;
+        position: absolute;
+        top: 31%;
+        right: 34%;
+        width: 10px;
+        height: 10px;
+        border-radius: 50%;
+        background-color: $color-main;
+
+        &.has-text {
+            top: 24%;
+            right: 23%;
+            width: auto;
+            height: 18px;
+            line-height: 18px;
+            border-radius: 9px;
+            padding: 0 calc($space/2);
+            color: $color-text-inverse;
+            font-size: $font-size-xs - 1;
+            font-weight: $font-weight-bold;
+        }
+    }
+
+    /* Buttons */
+    &__buttons {
+        flex-shrink: 0;
+
+        > * {
+            margin-right: $space;
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+
+    /* User */
+    &__user {
+        flex-shrink: 0;
+        padding-left: $space * 2;
+    }
+
+    &__user-content {
+        display: flex;
+        flex-wrap: nowrap;
+        align-items: center;
+    }
+
+    &__user-img {
+        flex-grow: 0;
+        flex-shrink: 0;
+        width: $header-user-thumb-size;
+        height: $header-user-thumb-size;
+        margin-right: $space;
+        border-radius: 50%;
+    }
+
+    &__user-name {
+        display: flex;
+        align-items: center;
+        margin: 0;
+        line-height: 1.2;
+        font-size: $font-size-s;
+
+        &:after {
+            content: "\e908";
+            font-family: "n7-icon";
+            font-size: $font-size-m;
+            vertical-align: middle;
+        }
+    }
+
+    &__user-name-label {
+        margin-right: $space;
+    }
+
+    /* Mobile menu toggle */
+    &__mobile-menu-toggle {
+        display: none;
+        align-items: center;
+        height: $header-height;
+    }
+
+    &__mobile-menu-icon {
+        font-size: $font-size-xl;
+        cursor: pointer;
+    }
+
+    /* Mobile menu toggle */
+    &__mobile-menu-close {
+        display: none;
+        position: fixed;
+        z-index: 2;
+        width: 30px;
+        height: 30px;
+        top: $space*3;
+        right: $space*3;
+        font-size: $font-size-xl;
+        color: $color-text;
+        cursor: pointer;
+
+        &:hover {
+            color: $color-text-link;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $header-breakpoint-mobile) {
+
+    .n7-header {
+        &__nav-content {
+            display: none;
+        }
+
+        &__user-name {
+            display: none;
+        }
+
+        &__tools {
+            align-self: flex-end;
+        }
+
+        &__mobile-menu-toggle {
+            display: flex;
+            align-self: flex-end;
+        }
+    }
+
+    /* Style for fullscreen responsive navigation */
+    .n7-header {
+        &__nav-content {
+            position: fixed;
+            // display: flex;
+            align-items: center;
+            justify-content: center;
+            flex-direction: column;
+            background-color: $color-background-base;
+            top: 0;
+            left: 0;
+            bottom: 0;
+            right: 0;
+        }
+
+        /* Displays mobile nav when .is-mobile-nav-displayed is inserted into .n7-header */
+        &.is-mobile-nav-displayed {
+            .n7-header__nav-content {
+                display: flex;
+            }
+
+            .n7-header__mobile-menu-close {
+                display: block;
+            }
+        }
+
+        &__nav-content {
+            height: 100%;
+        }
+
+        &__nav-list {
+            width: 100%;
+            height: auto;
+            overflow-y: auto;
+        }
+
+        &__nav-item {
+            display: block;
+            height: auto;
+            padding: $space*2 0;
+        }
+
+        &__nav-link {
+            display: block;
+            text-align: center;
+            height: auto;
+        }
+
+        &__nav-icon {
+            font-size: $font-size-l;
+        }
+
+        &__nav-label {
+            font-size: $font-size-xl;
+        }
+
+        /* Sublevel (dropdown) menu */
+        &__subnav-list {
+            display: block;
+            position: relative;
+            left: auto;
+            margin-top: $space*2;
+            background-color: transparent;
+            text-align: center;
+        }
+
+        &__subnav-item {
+            &:last-child {
+                .n7-header__subnav-link {
+                    padding-bottom: 0;
+                }
+            }
+        }
+
+        &__subnav-link {
+            border-bottom: 0;
+            padding: $space*2;
+        }
+
+        &__subnav-icon {
+            font-size: $font-size-m;
+        }
+
+        &__subnav-label {
+            font-size: $font-size-l;
+        }
+    }
+
+}
+
+@media all and (max-width: $header-breakpoint-mobile-small) {
+
+    .n7-header {
+        height: $header-height-mobile;
+
+        &__logo {
+            max-height: $header-logo-height-mobile;
+        }
+
+        &__title {
+            font-size: $font-size-s;
+        }
+
+        &__subtitle {
+            font-size: $font-size-xs;
+        }
+
+        &__search-input[type="search"] {
+            height: $header-search-input-height-mobile;
+            line-height: $header-search-input-height-mobile;
+        }
+
+        &__search-btn {
+            &:after {
+                line-height: $header-search-input-height-mobile;
+            }
+        }
+
+        &__user-img {
+            width: $header-user-thumb-size-mobile;
+            height: $header-user-thumb-size-mobile;
+        }
+
+        &__mobile-menu-toggle {
+            height: $header-height-mobile;
+        }
+    }
+    
+}

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

@@ -0,0 +1,207 @@
+/**
+ * HERO
+ *
+ * Component displaying the following elements:
+ * - title
+ * - text
+ * - input (usually used for seacrh purposes)
+ * - button/call to action
+ * - image
+ * - background image
+ *
+ * This component is used for hero section at the top of the homepage or
+ *  for call to action sections (usually in homepage)
+ */
+ 
+/* ------------------------------------ *\
+   #HERO
+\* ------------------------------------ */
+.n7-hero {
+    position: relative;
+    height: $hero-height;
+    background-repeat: no-repeat;
+    background-size: cover;
+    background-color: $hero-background-color;
+    background-position: center center;
+
+    /* Overlay */
+    &.has-background-image:after {
+        @include overlay();
+    }
+
+    &__content {
+        position: relative;
+        z-index: 10;
+        max-width: $hero-content-width;
+        margin: 0 auto;
+    }
+
+    /* Text wrapper */
+    &__text-wrapper {
+        display: flex;
+        flex-direction: column;
+        justify-content: center;
+        align-items: flex-start;
+        height: $hero-height;
+    }
+
+    &__title {
+        margin: 0 0 $space*2 0;
+        font-family: $font-family-headings;
+        font-size: $font-size-xxl;
+        font-weight: $font-weight-bold;
+        line-height: 1.1;
+        color: $color-text-inverse;
+    }
+
+    &__text {
+        margin: 0 0 $space*2 0;
+        font-family: $font-family-main;
+        font-size: $font-size-l;
+        font-weight: $font-weight-normal;
+        line-height: 1.3;
+        color: $color-text-inverse;
+
+        p {
+            margin-bottom: 0;
+            font-size: $font-size-l;
+            color: $color-text-inverse;
+        }
+    }
+
+    &__input-wrapper {
+        min-width: 50%;
+        position: relative;
+    }
+
+    &__input {
+        width: 100%;
+        margin: 0 0 $space*2 0;
+        box-sizing: border-box;
+    }
+
+    &__input-icon {
+        position: absolute;
+        top: 0;
+        right: $space;
+        font-size: $font-size-l;
+        color: $color-text-light;
+        line-height: $form-input-height;
+    }
+
+    &__btn {
+        display: inline-block;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #WITH-IMAGE
+\* ------------------------------------ */
+.n7-hero.has-image {
+    .n7-hero__content {
+        display: flex;
+        // display: grid;
+        // grid-template-columns: 1fr 300px;
+        // grid-column-gap: $grid-gutter-h;
+    }
+
+    /* Text */
+    .n7-hero__text-wrapper {
+        flex: 1;
+        margin-right: $grid-gutter-h;
+    }
+
+    .n7-hero__title,
+    .n7-hero__text {
+        width: 100%; /* For IE bug, text overflowing container when contained in flex item */
+    }
+
+    /* Image */
+    .n7-hero__image-wrapper {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        @include flex-item-width($hero-image-text-width);
+        padding: $space*3 0;
+    }
+
+    .n7-hero__image {
+        max-width: 100%;
+        max-height: 100%;
+        width: auto;
+        height: auto;
+        box-sizing: border-box;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $hero-content-width + $space*4) {
+
+    .n7-hero {
+        &__content {
+            padding: 0 $space*2;
+        }
+    }
+
+}
+
+@media all and (max-width: $breakpoint-laptop) {
+
+    /* With image */
+    .n7-hero.has-image {
+        .n7-hero__content {
+            grid-template-columns: 1fr 220px;
+        }
+    }
+
+}
+
+@media all and (max-width: $breakpoint-mobile) {
+
+    .n7-hero {
+        height: auto;
+        padding: $space*2 0;
+
+        &__text-wrapper {
+            height: auto;
+        }
+        
+        &__title {
+            margin: 0 0 $space*2 0;
+            font-size: $font-size-l;
+        }
+    
+        &__text {
+            margin: 0 0 $space*2 0;
+            font-size: $font-size-m;
+        }
+    }
+
+    /* With image */
+    .n7-hero.has-image {
+        .n7-hero__content {
+            display: flex;
+            flex-direction: column;
+        }
+
+        /* Invert text and image order */
+        .n7-hero__text-wrapper {
+            order: 2;
+        }
+
+        .n7-hero__image-wrapper {
+            order: 1;
+            padding: 0;
+            margin-bottom: $space*2;
+        }
+    }
+
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}

package/src/lib/styles/components/_histogram-range.scss

@@ -0,0 +1,36 @@
+/**
+ * HISTOGRAM-RANGE
+ *
+ * Brief description of the component here.
+ */
+
+/* ------------------------------------ *\
+   #HISTOGRAM-RANGE
+\* ------------------------------------ */
+.n7-histogram-range {
+    box-sizing: border-box;
+    display: inline-block;
+    position: relative;
+    width: 100%;
+
+    & > svg {
+        width: 100% !important;
+        box-sizing: border-box;
+    }
+}
+
+/* ------------------------------------ *\
+   #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) {
+}