@posiwise/shared-components 0.0.10 → 0.0.11

package/assets/scss/dashboard/_palette.scss

@@ -0,0 +1,308 @@
+// ================================================================================================
+//   File Name: pallette
+//   Description: Custom color system styles, includes background, border and text colors
+// ================================================================================================
+//  WARNING: PLEASE DO NOT CHANGE THIS VARIABLE FILE.
+//  ================================================================================================
+
+@import '../dashboard/mixins/colors';
+
+// usage: color("name_of_color", "type_of_color")
+// to avoid to repeating map-get($colors, ...)
+@function color-function($color, $type) {
+    @if map-has-key($colors, $color) {
+        $curr_color: map-get($colors, $color);
+
+        @if map-has-key($curr_color, $type) {
+            @return map-get($curr_color, $type);
+        }
+    }
+
+    @return null;
+}
+
+// Color palettes
+@import '../variables/app-colors-variables';
+
+@each $gcolor_name, $gcolor in $gradient-colors {
+    $end-color: map-get($gcolor, end-color);
+    $start-color: map-get($gcolor, start-color);
+    .#{$gcolor_name} {
+        @include gradient-directional($start-color, $end-color);
+    }
+
+    .btn.#{$gcolor_name} {
+        &:active,
+        &.active {
+            @include gradient-directional($start-color, $end-color);
+        }
+    }
+}
+
+@each $color_name, $color in $colors {
+    @each $color_type, $color_value in $color {
+        @if $color_type== 'base' {
+            .#{$color_name} {
+                color: $color_value !important;
+            }
+
+            .bg-#{$color_name} {
+                background-color: $color_value !important;
+
+                .card-header,
+                .card-footer {
+                    background-color: transparent;
+                }
+            }
+
+            .toast-#{$color_name} {
+                background-color: $color_value;
+            }
+
+            .alert-#{$color_name} {
+                background-color: lighten($color_value, 7%) !important;
+                border-color: $color_value !important;
+                color: darken($color_value, 35%) !important;
+
+                .alert-link {
+                    color: darken($color_value, 43%) !important;
+                }
+            }
+
+            .border-#{$color_name} {
+                border-color: $color_value;
+            }
+
+            .border-top-#{$color_name} {
+                border-top-color: $color_value;
+            }
+
+            .border-bottom-#{$color_name} {
+                border-bottom-color: $color_value;
+            }
+
+            .border-left-#{$color_name} {
+                border-left-color: $color_value;
+            }
+
+            .border-right-#{$color_name} {
+                border-right-color: $color_value;
+            }
+
+            .badge-#{$color_name} {
+                background-color: $color_value;
+            }
+
+            .panel-#{$color_name} {
+                border-color: $color_value;
+
+                .panel-heading {
+                    background-color: lighten($color_value, 5%);
+                    border-color: $color_value;
+                    color: rgb(255 255 255);
+                }
+            }
+
+            .bg-#{$color_name},
+            .border-#{$color_name} {
+                &.tag-glow {
+                    box-shadow: 0 0 10px $color_value;
+                }
+            }
+
+            .overlay-#{$color_name} {
+                @include bg-opacity($color_value, 0.8);
+            }
+
+            .card.card-outline-#{$color_name} {
+                background-color: transparent;
+                border-color: $color_value;
+                border-style: solid;
+                border-width: 1px;
+
+                .card-header,
+                .card-footer {
+                    background-color: transparent;
+                }
+            }
+
+            .btn-#{$color_name} {
+                background-color: $color_value !important;
+                border: 1px solid;
+                border-color: $color_value !important;
+                color: rgb(255 255 255) !important;
+
+                &:focus {
+                    background-color: darken($color_value, 5%) !important;
+                    box-shadow: transparent !important;
+                    color: rgb(255 255 255) !important;
+                }
+
+                &.active {
+                    background-color: $color_value !important;
+                    color: rgb(255 255 255) !important;
+                }
+
+                &:hover {
+                    background-color: darken($color_value, 5%) !important;
+                    color: rgb(255 255 255) !important;
+                }
+            }
+
+            .btn-#{$color_name} {
+                color: rgb(255 255 255) !important;
+
+                &.btn-flat {
+                    background-color: transparent !important;
+                    border: 0;
+                    color: $color_value;
+                }
+
+                &.btn-raised,
+                &.btn-fab {
+                    background-color: $color_value !important;
+                    border-color: $color_value;
+                    color: rgb(255 255 255) !important;
+
+                    &.active {
+                        background-color: darken($color_value, 7%) !important;
+                        border-color: darken($color_value, 7%) !important;
+                    }
+                }
+            }
+
+            .btn-group-raised {
+                .btn-#{$color_name} {
+                    background-color: $color_value !important;
+                    color: rgb(255 255 255) !important;
+                }
+            }
+
+            .btn-outline-#{$color_name} {
+                background-color: transparent !important;
+                border: 1px solid;
+                border-color: $color_value !important;
+                box-shadow: none !important;
+                color: $color_value !important;
+
+                &:focus {
+                    background-color: transparent !important;
+                    box-shadow: transparent !important;
+                    color: $color_value !important;
+                }
+
+                &.active {
+                    background-color: $color_value !important;
+                    color: rgb(255 255 255) !important;
+                }
+
+                &:hover {
+                    background-color: darken($color_value, 3%) !important;
+                    color: rgb(255 255 255) !important;
+                }
+            }
+
+            .btn-outline-#{$color_name} {
+                &.btn-raised,
+                &.btn-fab {
+                    background-color: transparent;
+                    border: 1px solid;
+                    border-color: $color_value;
+                    box-shadow: none !important;
+                    color: $color_value;
+
+                    &:focus {
+                        background-color: transparent;
+                    }
+
+                    &.active {
+                        background-color: $color_value !important;
+                        color: rgb(255 255 255) !important;
+                    }
+
+                    &:hover {
+                        background-color: darken($color_value, 3%) !important;
+                        color: rgb(255 255 255) !important;
+                    }
+                }
+            }
+
+            .progress {
+                .progress-bar {
+                    &.progress-bar-#{$color_name} {
+                        @include progress-variant($color_value);
+                    }
+                }
+            }
+
+            input:focus ~ .bg-#{$color_name} {
+                box-shadow: 0 0 0 0.075rem rgb(255 255 255), 0 0 0 0.21rem $color_value !important;
+            }
+        } @else {
+            .#{$color_name}.#{$color_type} {
+                color: $color_value !important;
+            }
+
+            .bg-#{$color_name}.bg-#{$color_type} {
+                background-color: $color_value !important;
+            }
+
+            .btn-#{$color_name}.btn-#{$color_type} {
+                background-color: $color_value !important;
+                border-color: color-function($color_name, 'darken-2') !important;
+
+                &:hover {
+                    background-color: color-function($color_name, 'darken-3') !important;
+                    border-color: color-function($color_name, 'darken-2') !important;
+                }
+
+                &:focus,
+                &:active {
+                    background-color: color-function($color_name, 'darken-4') !important;
+                    border-color: color-function($color_name, 'darken-3') !important;
+                }
+            }
+
+            .btn-outline-#{$color_name}.btn-outline-#{$color_type} {
+                border-color: $color_value !important;
+                color: $color_value !important;
+
+                &:hover {
+                    background-color: $color_value !important;
+                }
+            }
+
+            .progress-#{$color_name}.progress-#{$color_type} {
+                @include progress-variant($color_value);
+            }
+
+            input:focus ~ .bg-#{$color_name} {
+                box-shadow: 0 0 0 0.075rem rgb(255 255 255), 0 0 0 0.21rem $color_value !important;
+            }
+
+            .border-#{$color_name}.border-#{$color_type} {
+                border: 1px solid $color_value !important;
+            }
+
+            .border-top-#{$color_name}.border-top-#{$color_type} {
+                border-top: 1px solid $color_value !important;
+            }
+
+            .border-bottom-#{$color_name}.border-bottom-#{$color_type} {
+                border-bottom: 1px solid $color_value !important;
+            }
+
+            .border-left-#{$color_name}.border-left-#{$color_type} {
+                border-left: 1px solid $color_value !important;
+            }
+
+            .border-right-#{$color_name}.border-right-#{$color_type} {
+                border-right: 1px solid $color_value !important;
+            }
+
+            .overlay-#{$color_name}.overlay-#{$color_type} {
+                @include bg-opacity($color_value, 0.8);
+            }
+        }
+    }
+}

package/assets/scss/dashboard/_profile.scss

@@ -0,0 +1,36 @@
+#user-profile {
+    .profile-with-cover {
+        position: relative;
+
+        .profil-cover-details {
+            margin-top: -65px;
+
+            .profile-image {
+                img.img-border {
+                    border: 5px solid rgb(255 255 255);
+                }
+            }
+        }
+
+        .profile-cover-buttons {
+            position: absolute;
+            right: 0;
+            top: 250px;
+        }
+    }
+}
+
+@media (max-width: 550px) {
+    #user-profile {
+        .profile-with-cover {
+            .profile-cover-buttons {
+                right: 0;
+                top: 15px;
+            }
+        }
+
+        h3.card-title {
+            font-size: 1rem;
+        }
+    }
+}

package/assets/scss/dashboard/_responsive.scss

@@ -0,0 +1,209 @@
+@media (min-width: 992px) {
+    .main-panel {
+        .main-content {
+            padding-left: 220px;
+        }
+    }
+
+    .navbar {
+        .navbar-header {
+            padding-left: 250px;
+        }
+
+        .navbar-container {
+            padding-left: 120px;
+        }
+    }
+
+    footer {
+        padding-left: 250px;
+    }
+
+    .sidebar-sm {
+        .main-panel .main-content {
+            padding-left: 220px;
+        }
+
+        .navbar {
+            .navbar-header {
+                padding-left: 210px;
+            }
+
+            .navbar-container {
+                padding-left: 220px;
+            }
+        }
+
+        footer {
+            padding-left: 220px;
+        }
+    }
+
+    .sidebar-lg {
+        .main-panel .main-content {
+            padding-left: 280px;
+        }
+
+        .navbar {
+            .navbar-header {
+                padding-left: 270px;
+            }
+
+            .navbar-container {
+                padding-left: 280px;
+            }
+        }
+
+        footer {
+            padding-left: 280px;
+        }
+    }
+}
+
+@media (max-width: 992px) {
+    .app-sidebar {
+        transition: transform 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
+    }
+
+    .navbar-toggle {
+        display: block;
+        margin-right: 20px;
+        margin-top: 15px;
+    }
+
+    .navbar-toggle .icon-bar {
+        background: rgb(255 255 255);
+        border-radius: 1px;
+        display: block;
+        height: 2px;
+        margin: 0 auto;
+        position: relative;
+        width: 24px;
+    }
+
+    // .navbar-form {
+    //   margin-top: 0.75rem !important;
+    // }
+
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    .bar1,
+    .bar2,
+    .bar3 {
+        outline: 1px solid transparent;
+    }
+
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+
+    @keyframes fadeIn {
+        0% {
+            opacity: 0;
+        }
+
+        100% {
+            opacity: 1;
+        }
+    }
+}
+
+@media (min-width: 640px) {
+    .app-sidebar {
+        .navigation {
+            .sidebar-search {
+                display: none;
+            }
+        }
+    }
+}
+
+@media (max-width: 640px) {
+    .navbar-toggle {
+        margin-top: 5px;
+    }
+
+    .navbar-form {
+        display: none;
+    }
+
+    .app-sidebar {
+        .navigation {
+            .sidebar-search {
+                display: block;
+
+                i {
+                    color: rgb(0 0 0);
+                    font-size: 14px;
+                    left: -2px;
+                    opacity: 0.4;
+                    top: 1px;
+                }
+            }
+        }
+    }
+}
+
+@media (min-width: 320px) {
+    .navbar-header {
+        float: left;
+    }
+
+    .navbar-right {
+        float: right !important;
+    }
+
+    .navbar-nav > li {
+        float: left;
+    }
+}
+
+@media (max-width: 320px) {
+    .navbar-right {
+        display: none;
+    }
+}

package/assets/scss/dashboard/_search.scss

@@ -0,0 +1,33 @@
+// Search Navbar
+#search-nav {
+    .nav {
+        border-bottom: 2px solid $searchNav;
+    }
+
+    .nav-link {
+        &.active {
+            border-bottom: 2px solid map-get($primary, base);
+            margin-bottom: -2px;
+            padding-bottom: 6px;
+        }
+    }
+}
+
+#search-results {
+    .media-search {
+        padding-top: 5px;
+    }
+
+    p {
+        font-size: 0.9rem;
+    }
+
+    //.media-list {
+    //    padding: 0;
+    //
+    //    .media {
+    //        margin-top: 0;
+    //        padding: 1.25rem;
+    //    }
+    //}
+}

package/assets/scss/dashboard/_select.scss

@@ -0,0 +1,16 @@
+.select-option select {
+    appearance: none;
+    background: url('/assets/img/icons/small-down-arrow-icon-15593.png');
+    background-color: rgb(255 255 255);
+    background-position: right 5px top 8px;
+    background-repeat: no-repeat;
+    background-size: 18px 19px;
+    color: rgb(34 34 34);
+    font-weight: bold;
+    padding-right: 2.5em;
+    text-align-last: center;
+}
+
+body .ui-multiselect .ui-multiselect-trigger {
+    background-color: transparent !important;
+}