@net7/components 3.0.2-rc.2

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

@@ -0,0 +1,69 @@
+/**
+ * SIDEBAR-HEADER
+ *
+ * Header for sidebar with icons (on the left and the right) and a text.
+ */
+ 
+/* ------------------------------------ *\
+   #SIDEBAR-HEADER
+\* ------------------------------------ */
+.n7-sidebar-header {
+    display: flex;
+    width: 100%;
+    height: $sidebar-header-height;
+    background-color: $sidebar-header-background-color;
+
+    &__icon-left {
+        display: block;
+        width: $sidebar-header-height;
+        height: $sidebar-header-height;
+        line-height: $sidebar-header-height;
+        text-align: center;
+        font-size: $font-size-l;
+        color: $sidebar-left-text-color;
+        background-color: $sidebar-left-background-color;
+    }
+    
+    &__text {
+        margin-right: $space;
+        margin-left: $space;
+        line-height: $sidebar-header-height;
+        font-size: $font-size-m;
+        color: $sidebar-header-text-color;
+    }
+
+    &__secondary-text {
+        line-height: $sidebar-header-height;
+        font-size: $font-size-s;
+        color: $sidebar-header-text-color;
+    }
+    
+    &__icon-right {
+        margin-left: auto; // Flexbox stuff
+        display: block;
+        width: $sidebar-header-height;
+        height: $sidebar-header-height;
+        color: $sidebar-right-text-color;
+        background-color: $sidebar-right-background-color;
+        line-height: $sidebar-header-height;
+        text-align: center;
+        font-size: $font-size-xl;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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/_signup.scss

@@ -0,0 +1,157 @@
+/**
+ * SIGNUP
+ *
+ * Component for login/signup/forgotten password managing. 
+ */
+ 
+/* ------------------------------------ *\
+   #SIGNUP
+\* ------------------------------------ */
+.n7-signup {
+    max-width: $signup-max-width;
+    margin-right: auto;
+    margin-left: auto;
+    padding: $space*2;
+    
+    &__text {
+        font-size: $font-size-s;
+    }
+
+    &__form-error {
+        margin-top: calc($space/2);
+        margin-bottom: calc($space/2);
+        font-size: $font-size-s;
+        color: $signup-error-color;
+    }
+
+    &__form-item {
+        display: flex;
+        flex-flow: column nowrap;
+        padding: $space 0;
+        position: relative;
+        
+        textarea,
+        input[type="date"],
+        input[type="datetime"],
+        input[type="datetime-local"],
+        input[type="email"], input[type="month"],
+        input[type="number"], input[type="password"],
+        input[type="search"], input[type="tel"],
+        input[type="text"], input[type="time"], input[type="url"], input[type="week"] {
+            background: $signup-input-background;
+
+            &:-webkit-autofill {
+                background: $signup-input-background !important;
+            }
+        }
+
+        input[type="password"] {
+            padding-right: 35px;
+        }
+
+        &.has-error {
+            textarea,
+            input[type="date"],
+            input[type="datetime"],
+            input[type="datetime-local"],
+            input[type="email"], input[type="month"],
+            input[type="number"], input[type="password"],
+            input[type="search"], input[type="tel"],
+            input[type="text"], input[type="time"], input[type="url"], input[type="week"] {
+                border-color: $signup-error-color;
+            }
+        }
+    }
+
+    &__form-item-label {
+        font-size: $font-size-s;
+    }
+
+    &__form-item-hint {
+        margin-bottom: $space;
+        font-size: $font-size-xs;
+        color: $color-text-light;
+    }
+
+    &__input-wrapper {
+        position: relative;
+        width: 100%;
+        
+        textarea,
+        input[type="date"],
+        input[type="datetime"],
+        input[type="datetime-local"],
+        input[type="email"], input[type="month"],
+        input[type="number"], input[type="password"],
+        input[type="search"], input[type="tel"],
+        input[type="text"], input[type="time"], input[type="url"], input[type="week"] {
+            width: 100%;
+            box-sizing: border-box;
+        }
+
+        .n7-signup__form-item-show-password {
+            position: absolute;
+            right: 2px;
+            line-height: $form-input-height;
+            border: none;
+            background: transparent;
+    
+            &:hover,
+            &:focus {
+                color: $color-text-hover;
+            }
+        }
+    }
+
+    &__form-item-forgot-password {
+        a {
+            text-decoration: underline;
+            font-size: $font-size-s;
+            color: $color-text;
+
+            &:hover,
+            &:focus {
+                color: $color-text-hover;
+            }
+        }
+    }
+
+    &__footer {
+        display: flex;
+        align-items: center;
+        margin-top: $space;
+        padding: $space*1.5 0;
+        border-top: 1px solid $color-border-normal;
+
+        .n7-btn {
+            margin-left: auto;
+        }
+    }
+
+    &__footer-text {
+        font-size: $font-size-s;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait - 1) {
+}
+
+@media all and (max-width: $breakpoint-smartphone-landscape) {
+}
+
+@media all and (min-width: $breakpoint-ipad-portrait) {
+    .n7-signup {
+        padding: $space*3;
+    }
+}
+
+/* Retina */
+@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
+}

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

@@ -0,0 +1,60 @@
+/**
+ * SIMPLE-AUTOCOMPLETE
+ *
+ * Autocomplete results suggestions component, simpler version of advanced-autocomplete.
+ */
+ 
+/* ------------------------------------ *\
+   #SIMPLE-AUTOCOMPLETE
+\* ------------------------------------ */
+.n7-simple-autocomplete {
+    padding: 0 $space*1.5;
+    border-radius: $border-radius;
+    border: 1px solid $color-border-normal;
+    font-size: $font-size-s;
+
+    &__list {
+        margin: 0;
+        padding: 0;
+        list-style: none;
+    }
+
+    &__item {
+        border-bottom: 1px solid $color-border-light;
+        cursor: pointer;
+
+        &:last-child {
+            border-bottom: none;
+        }
+    }
+
+    &__link {
+        display: block;
+        padding: calc($space/1.5) 0 calc($space/1.5) 0;
+        color: $color-text;
+
+        &:hover {
+            color: $color-text-link-hover;
+        }
+    }
+
+    &__label {
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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/_table.scss

@@ -0,0 +1,129 @@
+/**
+ * TABLE
+ *
+ * Table component used to display values in a table and to edit list of values in a table.
+ * Cell can contain values, HTML snippets and input fields.
+ */
+
+/* ------------------------------------ *\
+    TABLE
+\* ------------------------------------ */
+.n7-table {
+    &__table {
+        width: 100%;
+        border-collapse: collapse;
+        border: $table-border-size solid $table-border-color;
+    }
+
+    /* Header */
+    &__table-header-cell {
+        padding: $space;
+        border: $table-border-size solid $table-border-color;
+        background-color: $table-header-bg;
+        color: $table-header-text-color;
+        font-size: $table-header-font-size;
+        text-align: left;
+    }
+
+    /* Contents */
+    &__table-body-row:nth-child(even) {
+        background-color: $table-bg-even;
+    }
+
+    &__table-body-row:nth-child(odd) {
+        background-color: $table-bg-odd;
+    }
+
+    &__table-body-cell {
+        padding: $space;
+        border: $table-border-size solid $table-border-color;
+        color: $table-text-color;
+        font-size: $table-font-size;
+    }
+
+    /* Footer */
+    &__table-footer-cell {
+        padding: $space;
+        border: $table-border-size solid $table-border-color;
+        background-color: $table-footer-bg;
+        color: $table-footer-text-color;
+        font-size: $table-footer-font-size;
+    }
+
+    /* TODO Add a comment here to explain what is this! */
+    .hidden {
+        display: none;
+    }
+    
+    .showing {
+        display: table-row;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #MEDIA-QUERIES
+\* ------------------------------------ */
+@media all and (max-width: $breakpoint-laptop) {
+}
+
+@media all and (max-width: $breakpoint-ipad-portrait) {
+
+    .n7-table {
+        &__table {
+            display: block;
+            width: 100%;
+            border: 0;
+        }
+        
+        &__table-footer {
+            display: none;
+        }
+
+        &__table-header {
+            display: block;
+            display: none;
+        }
+
+        &__table-body {
+            display: block;
+            width: 100%;
+        }
+
+        &__table-body-row {
+            display: block;
+            width: 100%;
+            border-bottom: $table-border-size solid $table-border-color;
+            margin-bottom: .625em;
+        }
+
+        &__table-body-cell {
+            display: block;
+            border-top: $table-border-size solid $table-border-color;
+            border-left: $table-border-size solid $table-border-color;
+            border-right: $table-border-size solid $table-border-color;
+            border-bottom: 0;
+            font-size: .8em;
+            text-align: right;
+
+            &:before {
+                content: attr(aria-label);
+                float: left;
+                font-weight: $font-weight-bold;
+                text-transform: uppercase;
+            }
+
+            &:last-child {
+                border-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/_tag.scss

@@ -0,0 +1,51 @@
+/**
+ * TAG
+ *
+ * Tag component, with value, label and icon to click and remove it.
+ * Can be used as tag element and as active filter indication.
+ */
+
+/* ------------------------------------ *\
+    TAG
+\* ------------------------------------ */
+.n7-tag {
+    padding: calc($space/2) $space;
+    background-color: $color-second;
+    border-radius: $border-radius-hard;
+    font-size: $font-size-xs;
+
+    &__label, &__text {
+        color: $color-text-inverse;
+        font-size: $font-size-xs;
+        line-height: 1;
+    }
+
+    &__label {
+        font-weight: $font-weight-bold;
+    }
+    
+    &__icon {
+        margin-left: calc($space/2);
+        font-size: $font-size-xs;
+        color: $color-text-inverse;
+        line-height: 1;
+        cursor: pointer;
+    }
+}
+
+
+/* ------------------------------------ *\
+   #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) {
+}