@net7/components 3.0.2-rc.2

package/src/lib/styles/components/_input-text.scss

@@ -0,0 +1,53 @@
+/* ------------------------------------ *\
+   #INPUT TEXT
+\* ------------------------------------ */
+.n7-input-text {
+
+    &__label {
+        display: block;
+        font-size: $font-size-s;
+    }
+
+    &__wrapper {
+        position: relative;
+    }
+
+    &__text[type="text"], &__text[type="number"] {
+        width: 100%;
+        box-sizing: border-box;
+    }
+
+    &__text[type="number"] {
+        padding-right: 0;
+    }
+    
+    .has-icon {
+        input {
+            padding-right: $space*4;
+        }
+    }
+
+    &__icon {
+        position: absolute;
+        bottom: 0;
+        right: $space;
+        line-height: $form-input-height;
+        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/_item-preview.scss

@@ -0,0 +1,218 @@
+/**
+ * ITEM-PREVIEW
+ *
+ * Component used to preview any kind of element with image, title, text, metadata and icons.
+ */
+ 
+/* ------------------------------------ *\
+   #ITEM-PREVIEW
+\* ------------------------------------ */
+.n7-item-preview {
+    /* anchor-wrapper wrapper af all contents */
+    &__inner {
+        cursor: default;
+        position: relative;
+    }
+    
+    &__title {
+        margin-bottom: $space;
+        font-family: $font-family-headings;
+        font-size: $font-size-l;
+        font-weight: $font-weight-bold;
+        color: $color-text;
+    }
+
+    &__text {
+        margin-bottom: $space;
+        font-family: $font-family-main;
+        font-size: $font-size-s;
+        font-weight: $font-weight-normal;
+        color: $color-text;
+    }
+    
+    /* Metadata */
+    &__metadata-group {
+        margin-bottom: $space;
+        color: $color-text;
+    }
+
+    &__metadata-group-title {
+        margin-bottom: $space;
+    }
+
+    &__metadata-item {
+        display: inline-block;
+        margin-right: $space;
+
+        &:last-child {
+            margin-right: 0;
+        }
+    }
+
+    &__metadata-item-icon {
+        margin-right: calc($space/2);
+    }
+
+    &__metadata-item-label {
+        margin-right: calc($space/2);
+        font-family: $font-family-main;
+        font-size: $font-size-s;
+        font-weight: $font-weight-normal;
+        vertical-align: top;
+    }
+
+    &__metadata-item-value {
+        font-family: $font-family-main;
+        font-size: $font-size-s;
+        font-weight: $font-weight-bold;
+        vertical-align: top;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #HAS-IMAGE, #HAS-COLOR
+\* ------------------------------------ */
+.n7-item-preview.has-image,
+.n7-item-preview.has-color {
+    .n7-item-preview__inner {
+        display: flex;
+    }
+
+    .n7-item-preview__image { /* Color background here */
+        width: $item-preview-image-width;
+        height: $item-preview-image-height;
+        margin-right: $space*1.5;
+        background-repeat: no-repeat;
+        background-size: cover;
+        background-position: center center;
+    }
+
+    .n7-item-preview__content {
+        flex: 1;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #IS-VERTICAL
+\* ------------------------------------ */
+.n7-item-preview.is-vertical.has-image,
+.n7-item-preview.is-vertical.has-color {
+    .n7-item-preview__inner {
+        display: block;
+    }
+    
+    .n7-item-preview__image { /* Color background here */
+        width: 100%;
+        height: $item-preview-vertical-image-height;
+        margin-bottom: $space;
+        margin-right: 0;
+        background-repeat: no-repeat;
+        background-size: cover;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #IS-OVERLAY
+\* ------------------------------------ */
+.n7-item-preview.is-overlay.has-image,
+.n7-item-preview.is-overlay.has-color {
+    .n7-item-preview__inner {
+        display: block;
+        height: $item-preview-height;
+    }
+    
+    .n7-item-preview__image { /* Color background here */
+        position: absolute;
+        top: 0;
+        bottom: 0;
+        left: 0;
+        right: 0;
+        width: auto;
+        height: auto;
+        margin-right: 0;
+        z-index: 1;
+    }
+
+    .n7-item-preview__content {
+        position: absolute;
+        z-index: 2;
+        top: 0;
+        bottom: 0;
+        right: 0;
+        left: 0;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        padding: $space*2;
+    }
+    
+    .n7-item-preview__title,
+    .n7-item-preview__text,
+    .n7-item-preview__metadata-group-title {
+        text-align: center;
+        color: $color-text-inverse;
+    }
+
+    .n7-item-preview__metadata-group {
+        text-align: center;
+    }
+
+    .n7-item-preview__metadata-item-icon,
+    .n7-item-preview__metadata-item-label,
+    .n7-item-preview__metadata-item-value {
+        color: $color-text-inverse;
+    }
+}
+
+/* Dark overlay behind the text only with image (not with color bg only) */
+.n7-item-preview.is-overlay.has-image {
+    .n7-item-preview__image { /* Color background here */
+        &:after {
+            content: " ";
+            position: absolute;
+            z-index: 1;
+            top: 0;
+            bottom: 0;
+            left: 0;
+            right: 0;
+            background-color: rgba(0,0,0,0.5);
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #HOVER
+\* ------------------------------------ */
+/* Only applied when the class .has-link is present */
+.n7-item-preview.has-link {
+    .n7-item-preview__inner {
+        cursor: pointer;
+    }
+
+    &:hover {
+        .n7-item-preview__title {
+            color: $color-text-link;
+        }
+    }
+}
+
+/* ------------------------------------ *\
+   #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/_loader.scss

@@ -0,0 +1,54 @@
+/**
+ * LOADER
+ *
+ * Style for loader.
+ */
+
+/* ------------------------------------ *\
+    LOADER
+\* ------------------------------------ */
+.n7-loader {
+    position: relative;
+    text-indent: -9999em;
+    border-top: 1.1em solid $loader-color-back;
+    border-right: 1.1em solid $loader-color-back;
+    border-bottom: 1.1em solid $loader-color-back;
+    border-left: 1.1em solid $loader-color-front;
+    border-width: $loader-thickness;
+    -webkit-transform: translateZ(0);
+    -ms-transform: translateZ(0);
+    transform: translateZ(0);
+    -webkit-animation: load8 1s infinite linear;
+    animation: load8 1s infinite linear;
+
+    &, &:after {
+        border-radius: 50%;
+        width: $loader-size !important;
+        height: $loader-size !important;
+    }
+}
+
+
+/* ------------------------------------ *\
+    ANIMATION
+\* ------------------------------------ */
+@-webkit-keyframes load8 {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}
+@keyframes load8 {
+    0% {
+        -webkit-transform: rotate(0deg);
+        transform: rotate(0deg);
+    }
+    100% {
+        -webkit-transform: rotate(360deg);
+        transform: rotate(360deg);
+    }
+}

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

@@ -0,0 +1,31 @@
+/**
+ * MAP
+ *
+ * Brief description of the component here.
+ */
+ 
+/* ------------------------------------ *\
+   #MAP
+\* ------------------------------------ */
+.n7-map {
+    &__container {
+        height: 600px;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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/_metadata-viewer.scss

@@ -0,0 +1,52 @@
+/**
+ * METADATA-VIEWER
+ *
+ * Component to display metadata organized and nested in groups.
+ */
+ 
+/* ------------------------------------ *\
+   #METADATA-VIEWER
+\* ------------------------------------ */
+.n7-metadata-viewer {
+    &__group-wrapper {
+        .n7-metadata-viewer__group-wrapper {
+            padding-left: $space*2;
+        }
+    }
+    
+    &__group {
+        margin-bottom: $space*2;
+        break-inside: avoid;
+    }
+
+    &__group-title {
+        margin-bottom: $space*2;
+        font-size: $font-size-xl;
+        font-weight: $font-weight-bold;
+    }
+
+    &__item {
+        margin-bottom: $space*1.5;
+    }
+
+    &__item-label {
+        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/_nav.scss

@@ -0,0 +1,57 @@
+/**
+ * NAV
+ *
+ * Generic navigation tool that can be user for secondary navigation,
+ * inner page navigation and virtually any situation when you need
+ * a menu.
+ */
+
+/* ------------------------------------ *\
+    NAV
+\* ------------------------------------ */
+.n7-nav {
+    &__list {
+        padding: 0;
+        margin: 0;
+        list-style: none;
+    }
+
+    &__link {
+        cursor: pointer;
+    }
+    
+    &__item {
+        padding: 0;
+        margin: 0;
+        display: flex;
+        align-items: center;
+    }
+
+    &__image {
+        height: $nav-image-height;
+        width: $nav-image-width;
+        object-fit: contain;
+        margin-right: calc($space/2);
+    }
+
+    &__icon {
+        margin-right: calc($space/2);
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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/_pagination.scss

@@ -0,0 +1,170 @@
+/**
+ * PAGINATION
+ *
+ * Common pagination component used at the bottom of lists and feeds.
+ */
+ 
+/* ------------------------------------ *\
+   #PAGINATION
+\* ------------------------------------ */
+.n7-pagination {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+
+    &__items {
+        display: flex;
+        list-style: none;
+        padding: 0;
+        margin: 0;
+    }
+
+    &__items {
+        > li {
+            margin-left: calc($space/2);
+            margin-right: calc($space/2);
+            user-select: none;
+            
+            &:first-child {
+                margin-left: 0;
+            }
+
+            &:last-child {
+                margin-right: 0;
+            }
+        }
+    }
+
+    &__first-link, &__prev-link, &__page-link, &__next-link, &__last-link {
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        width: $pagination-item-width;
+        height: $pagination-item-height;
+        border: $pagination-border;
+        box-sizing: border-box;
+        background-color: $pagination-background;
+        border-radius: $pagination-radius;
+        cursor: pointer;
+        color: $pagination-color;
+
+        &:hover {
+            color: $pagination-color-hover;
+        }
+    }
+
+    /* Special spacing and width for first, prev, next, last with text */
+    &__first-link, &__prev-link {
+        &.has-text {
+            width: auto;
+            padding: 0 $space*1.5 0 calc($space/2);
+        }
+    }
+
+    &__next-link, &__last-link {
+        &.has-text {
+            width: auto;
+            padding: 0 calc($space/2) 0 $space*1.5;
+        }
+    }
+
+    &__first-link, &__prev-link, &__next-link, &__last-link {
+        font-size: $font-size-l;
+    }
+
+    /* Text labels for text in first, prev, next, last */
+    &__first-label, &__prev-label, &__next-label, &__last-label {
+        font-size: $font-size-s;
+    }
+
+    &__page-link {
+        font-size: $font-size-m;
+    }
+
+    /* Modifiers */
+    .is-disabled {
+        .n7-pagination__first-link,
+        .n7-pagination__prev-link,
+        .n7-pagination__page-link,
+        .n7-pagination__next-link,
+        .n7-pagination__last-link {
+            color: $pagination-color-disabled;
+            cursor: not-allowed;
+        }
+    }
+
+    .is-active {
+        .n7-pagination__page-link {
+            border: $pagination-border-current;
+            background-color: $pagination-background-current;
+            color: $pagination-color-current;
+            cursor: default;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #HIDDEN-ICONS
+\* ------------------------------------ */
+/*
+if class .has-hidden-icons is added to the root element, icons for first, previous,
+next and last are hidden.
+*/
+.n7-pagination.has-hidden-icons {
+    .n7-pagination__first-link,
+    .n7-pagination__prev-link, 
+    .n7-pagination__next-link, 
+    .n7-pagination__last-link {
+        [class*=" n7-icon-"] {
+            display: none;
+        }
+
+        &.has-text {
+            padding: 0 $space*1.5 0 $space*1.5;
+        }
+    }
+}
+
+
+/* ------------------------------------ *\
+   #WITH-RESULTS-NUMBER-SELECT
+\* ------------------------------------ */
+.n7-pagination.has-results-select {
+    display: flex;
+    justify-content: space-between;
+}
+
+
+/* ------------------------------------ *\
+   #RESULTS-NUMBER-SELECT
+\* ------------------------------------ */
+.n7-pagination {
+    &__setting-select {
+        margin-left: $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) {
+
+    .n7-pagination {
+        &__page {
+            display: none;
+        }
+    }
+
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}

package/src/lib/styles/components/_progress-line.scss

@@ -0,0 +1,53 @@
+/**
+ * PROGRESS-LINE
+ *
+ * Style for the progress line.
+ */
+ 
+/* ------------------------------------ *\
+   #PROGRESS-LINE
+\* ------------------------------------ */
+.n7-progress-line {
+    &__text-wrapper {
+        margin-bottom: $space;
+        display: flex;
+        justify-content: space-between;
+    }
+    
+    &__label {
+
+    }
+
+    &__value {
+
+    }
+
+    &__wrapper {
+        height: $progress-line-height;
+        background-color: $progress-line-bg-color;
+    }
+
+    &__bar {
+        display: flex;
+        align-items: center;
+        height: $progress-line-height;
+        background-color: $progress-line-front-color;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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) {
+}