@posiwise/shared-components 0.0.9 → 0.0.11

package/assets/scss/custom-bootstrap/_navbar.scss

@@ -0,0 +1,42 @@
+.navbar {
+    border: 0;
+    border-radius: 0;
+    z-index: 3; // required to make the shadow overlap the below content (need is visible in mobile drawer overlay)
+
+    .navbar-brand {
+        position: relative;
+    }
+
+    .navbar-nav {
+        display: block;
+        margin-right: -18px;
+
+        .dropdown-menu {
+            position: absolute;
+        }
+    }
+
+    .nav-link {
+        padding-bottom: 0 !important;
+    }
+
+    .navbar-toggle {
+        background-color: transparent;
+        border: 0;
+
+        .icon-bar {
+            background-color: inherit;
+            border: 1px solid;
+
+            & + .icon-bar {
+                margin-top: 4px;
+            }
+        }
+    }
+
+    .notification {
+        position: absolute;
+        right: 13px;
+        top: -1px;
+    }
+}

package/assets/scss/custom-bootstrap/_popover.scss

@@ -0,0 +1,10 @@
+.popover {
+    border-color: rgb(0 157 160 / 20%);
+    padding: 0;
+
+    .popover-header {
+        background-color: map-get($primary, base);
+        border-color: map-get($primary, base);
+        color: rgb(255 255 255);
+    }
+}

package/assets/scss/custom-bootstrap/_progress.scss

@@ -0,0 +1,12 @@
+// Progress Bar
+ngb-progressbar.progress-bar-md {
+    .progress {
+        height: 0.5rem;
+    }
+}
+
+ngb-progressbar.progress-bar-sm {
+    .progress {
+        height: 0.25rem;
+    }
+}

package/assets/scss/custom-bootstrap/_reboot.scss

@@ -0,0 +1,93 @@
+html {
+    font-size: $font-size-root;
+}
+
+body {
+    color: rgb(0 0 0 / 87%);
+    font-family: $mainFontFamily;
+    line-height: 1.5em;
+    min-height: 100vh;
+
+    &.inverse {
+        background: $font-color-main;
+
+        &,
+        .form-control {
+            color: rgb(255 255 255);
+        }
+
+        .modal,
+        .panel-default,
+        .card {
+            &,
+            .form-control {
+                background-color: initial;
+                color: initial;
+            }
+        }
+    }
+}
+
+.wrapper {
+    &.wrapper-full-page {
+        height: auto;
+        min-height: 100vh;
+    }
+}
+
+h1,
+h2,
+h3,
+h4,
+h5,
+h6,
+.h1,
+.h2,
+.h3,
+.h4,
+.h5,
+.h6 {
+    font-family: $mainFontFamily;
+    line-height: 1.15em;
+}
+
+.serif-font {
+    font-family: $mainFontFamily;
+}
+
+.page-header {
+    background-position: center center;
+    background-size: cover;
+    border: 0;
+    border-bottom-left-radius: 6px;
+    border-bottom-right-radius: 6px;
+    height: 60vh;
+    margin: 0;
+    padding: 0;
+}
+
+a {
+    color: map-get($primary, base);
+
+    &:hover,
+    &:focus {
+        color: darken(map-get($primary, base), 5%);
+        text-decoration: none;
+    }
+
+    &.text-info {
+        &:hover,
+        &:focus {
+            color: darken(map-get($info, base), 5%);
+        }
+    }
+}
+
+p {
+    font-size: 15px;
+    letter-spacing: 0.3px;
+}
+
+button:focus {
+    outline: none;
+}

package/assets/scss/custom-bootstrap/_type.scss

@@ -0,0 +1,202 @@
+h1,
+.h1 {
+    font-size: 38px;
+    font-weight: 800;
+    padding-bottom: 20px;
+}
+
+h2,
+.h2 {
+    font-size: 32px;
+    font-weight: 600;
+    margin-bottom: 20px !important;
+}
+
+h3,
+.h3 {
+    font-size: 26px;
+    font-weight: 400;
+    margin-bottom: 20px !important;
+    padding-bottom: 5px;
+}
+
+h4,
+.h4 {
+    font-size: 20px;
+    font-weight: 400;
+}
+
+h5,
+.h5 {
+    font-size: 18px;
+    font-weight: 400;
+}
+
+h6,
+.h6 {
+    font-size: 16px;
+    font-weight: 300;
+}
+
+h2.title {
+    margin-bottom: $margin-base * 2;
+}
+
+small,
+.small {
+    font-size: 90%;
+}
+
+blockquote,
+.blockquote {
+    border-left: 5px solid rgb(238 238 238);
+    font-size: 1.1rem;
+    margin: 0 0 20px;
+    padding: 10px 20px;
+
+    p {
+        font-style: italic;
+    }
+
+    footer,
+    small,
+    .small {
+        color: rgb(119 119 119);
+        display: block;
+        font-size: 80%;
+        line-height: 1.42857143;
+    }
+}
+
+.blockquote-reverse,
+blockquote.float-end {
+    border-left: 0;
+    border-right: 5px solid rgb(238 238 238);
+    padding-left: 0;
+    padding-right: 15px;
+    text-align: right;
+}
+
+.description,
+.card-description,
+.footer-big p {
+    color: color('gray');
+}
+
+.text-warning {
+    color: map-get($warning, base) !important;
+}
+
+.text-default {
+    color: map-get($default, base) !important;
+}
+
+.text-primary {
+    color: map-get($primary, base) !important;
+}
+
+.text-danger {
+    color: map-get($danger, base) !important;
+}
+
+.text-success {
+    color: map-get($success, base) !important;
+}
+
+.text-info {
+    color: map-get($info, base) !important;
+}
+
+// small
+.font-small-1 {
+    font-size: 0.7rem !important;
+}
+
+.font-small-2 {
+    font-size: 0.8rem !important;
+}
+
+.font-small-3 {
+    font-size: 0.9rem !important;
+}
+
+// medium
+.font-medium-1 {
+    font-size: 1.1rem !important;
+}
+
+.font-medium-2 {
+    font-size: 1.2rem !important;
+}
+
+.font-medium-3 {
+    font-size: 1.3rem !important;
+}
+
+.font-medium-4 {
+    font-size: 1.4rem !important;
+}
+
+.font-medium-5 {
+    font-size: 1.5rem !important;
+}
+
+// large
+.font-large-1 {
+    font-size: 2rem !important;
+    line-height: 2rem;
+}
+
+.font-large-2 {
+    font-size: 3rem !important;
+    line-height: 2.95rem;
+}
+
+.font-large-3 {
+    font-size: 4rem !important;
+    line-height: 3.5rem;
+}
+
+.font-large-4 {
+    font-size: 5rem !important;
+    line-height: 4.2rem;
+}
+
+.font-large-5 {
+    font-size: 6rem !important;
+    line-height: 5.2rem;
+}
+
+// Text styling
+// -------------------------
+
+// Font weights
+
+.text-bold-300 {
+    @include font-weight(light);
+}
+
+.text-bold-400 {
+    @include font-weight(book);
+}
+
+.text-bold-500 {
+    @include font-weight(medium);
+}
+
+.text-bold-600 {
+    @include font-weight(semi-bold);
+}
+
+.text-bold-700 {
+    @include font-weight(bold);
+}
+
+// Font style
+.text-italic {
+    font-style: italic;
+}
+
+.text-highlight {
+    padding: 4px 6px;
+}

package/assets/scss/dashboard/_admin.scss

@@ -0,0 +1,15 @@
+label.form-control {
+    background: rgb(239 239 239);
+}
+
+.tree-item-icon-color {
+    color: rgb(255 184 34) !important;
+}
+
+.bg-transparent {
+    background: transparent;
+}
+
+.item-hoverable:hover {
+    color: rgb(23 105 225) !important;
+}

package/assets/scss/dashboard/_animations.scss

@@ -0,0 +1,20 @@
+/*           Animations              */
+
+.animation-transition-general {
+    @include transition($general-transition-time, $transition-linear);
+}
+
+.animation-transition-slow {
+    @include transition($slow-transition-time, $transition-linear);
+}
+
+.animation-transition-fast {
+    @include transition($fast-transition-time, $transition-ease);
+}
+
+.path {
+    animation: dash 1.5s ease-in-out infinite, color 2s ease-in-out infinite;
+    stroke-dasharray: 1, 200;
+    stroke-dashoffset: 0;
+    stroke-linecap: round;
+}