@posiwise/shared-components 0.0.10 → 0.0.11

package/assets/scss/dashboard/_horizontal-timeline.scss

@@ -0,0 +1,314 @@
+@import 'partials/variables'; // colors, fonts etc...
+@import 'partials/mixins'; // custom mixins
+@import 'partials/layout'; // responsive grid and media queries
+
+.cd-horizontal-timeline {
+    margin: 2em auto;
+    opacity: 0;
+    transition: opacity 0.2s;
+
+    @include MQ(L) {
+        margin: 6em auto;
+
+        &::before {
+            /* never visible - this is used in jQuery to check the current MQ */
+            content: 'desktop';
+        }
+    }
+
+    &::before {
+        /* never visible - this is used in jQuery to check the current MQ */
+        content: 'mobile';
+        display: none;
+    }
+
+    &.loaded {
+        /* show the timeline after events position has been set (using JavaScript) */
+        opacity: 1;
+    }
+
+    .timeline {
+        height: 100px;
+        margin: 0 auto;
+        max-width: 800px;
+        position: relative;
+        width: 90%;
+
+        ul,
+        ol {
+            li {
+                list-style: none;
+            }
+        }
+    }
+
+    .events-wrapper {
+        height: 100%;
+        margin: 0 40px;
+        overflow: hidden;
+        position: relative;
+
+        &::after,
+        &::before {
+            /* these are used to create a shadow effect at the sides of the timeline */
+            content: '';
+            height: 100%;
+            position: absolute;
+            top: 0;
+            width: 20px;
+            z-index: 2;
+        }
+
+        &::before {
+            left: 0;
+        }
+
+        &::after {
+            right: 0;
+        }
+    }
+
+    .events {
+        background: darken($color-4, 10%);
+        height: 2px;
+        left: 0;
+        position: absolute;
+
+        /* width will be set using JavaScript */
+        top: 49px;
+
+        /* this is the grey line/timeline */
+        transition: transform 0.4s;
+        z-index: 1;
+    }
+
+    .filling-line {
+        background-color: map-get($primary, base);
+        height: 100%;
+        left: 0;
+        position: absolute;
+        top: 0;
+
+        /* this is used to create the green line filling the timeline */
+        transform: scaleX(0); /* IE 9 */
+        transform-origin: left center; /* IE 9 */
+        transition: transform 0.3s;
+        width: 100%;
+        z-index: 1;
+    }
+
+    .events a {
+        bottom: 0;
+        color: $color-1;
+        padding-bottom: 15px;
+        position: absolute;
+
+        /* fix bug on Safari - text flickering while timeline translates */
+        text-align: center;
+        transform: translateZ(0);
+        z-index: 2;
+
+        &::after {
+            @include center(x);
+
+            background-color: $whiteColor;
+            border: 2px solid $eventAfter;
+            border-radius: 50%;
+            bottom: -5px;
+            content: '';
+            height: 12px;
+            position: absolute;
+
+            /* this is used to create the event spot */
+            transition: background-color 0.3s, border-color 0.3s; /* Safari */
+            width: 12px;
+        }
+
+        .no-touch &:hover::after {
+            background-color: map-get($primary, base);
+            border-color: map-get($primary, base);
+        }
+
+        &.selected {
+            pointer-events: none;
+
+            &::after {
+                background-color: map-get($primary, base);
+                border-color: map-get($primary, base);
+            }
+        }
+
+        &.older-event::after {
+            border-color: map-get($primary, base);
+        }
+    }
+}
+
+.cd-timeline-navigation a {
+    @include center(y);
+
+    border: 2px solid darken($color-4, 10%);
+    border-radius: 50%;
+    color: transparent;
+    height: 34px;
+    overflow: hidden;
+
+    /* replace text with an icon */
+    position: absolute;
+    text-indent: 100%;
+
+    /* these are the left/right arrows to navigate the timeline */
+    transition: border-color 0.3s;
+    white-space: nowrap;
+    width: 34px;
+    z-index: 1;
+
+    &::after {
+        /* arrow icon */
+        background: url('/../../img/dahsboard/svg/cd-arrow.svg') no-repeat 0 0;
+        bottom: auto;
+        content: '';
+        height: 16px;
+        left: 25%;
+        position: absolute;
+        right: auto;
+        top: 25%;
+        width: 16px;
+    }
+
+    &.prev {
+        left: 0;
+        transform: translateY(-50%) rotate(180deg);
+    }
+
+    &.next {
+        right: 0;
+    }
+
+    .no-touch &:hover {
+        border-color: map-get($primary, base);
+    }
+
+    &.inactive {
+        cursor: not-allowed;
+
+        &::after {
+            background-position: 0 -16px;
+        }
+
+        .no-touch &:hover {
+            border-color: darken($color-4, 10%);
+        }
+    }
+}
+
+.cd-horizontal-timeline .events-content {
+    margin: 2em 0;
+    overflow: hidden;
+    position: relative;
+    transition: height 0.4s;
+    width: 100%;
+
+    li {
+        left: 0;
+        list-style: none;
+        opacity: 0;
+        padding: 0 5%;
+        position: absolute;
+        top: 0;
+        width: 100%;
+        z-index: 1;
+
+        &.selected {
+            opacity: 1;
+            position: relative;
+
+            /* visible event content */
+            transform: translateX(0);
+            z-index: 2;
+        }
+
+        &.enter-right,
+        &.leave-right {
+            animation-name: cd-enter-right;
+        }
+
+        &.enter-left,
+        &.leave-left {
+            animation-name: cd-enter-left;
+        }
+
+        &.leave-right,
+        &.leave-left {
+            animation-direction: reverse;
+        }
+    }
+
+    li > * {
+        margin: 0 auto;
+        max-width: 800px;
+    }
+
+    em {
+        display: block;
+        font-style: italic;
+        margin: 10px auto;
+
+        &::before {
+            content: '- ';
+        }
+    }
+
+    em,
+    p {
+        line-height: 1.6;
+    }
+}
+
+@keyframes cd-enter-right {
+    0% {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0%);
+    }
+}
+
+@keyframes cd-enter-right {
+    0% {
+        opacity: 0;
+        transform: translateX(100%);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0%);
+    }
+}
+
+@keyframes cd-enter-left {
+    0% {
+        opacity: 0;
+        transform: translateX(-100%);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0%);
+    }
+}
+
+@keyframes cd-enter-left {
+    0% {
+        opacity: 0;
+        transform: translateX(-100%);
+    }
+
+    100% {
+        opacity: 1;
+        transform: translateX(0%);
+    }
+}

package/assets/scss/dashboard/_icons.scss

@@ -0,0 +1,107 @@
+// Main branding colors
+
+.add-icon {
+    color: $branding-color-1;
+    font-size: 18px;
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
+.delete-icon {
+    color: rgb(243 67 67);
+    font-size: 18px;
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
+.edit-icon {
+    color: rgb(87 84 84);
+    font-size: 18px;
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
+.see-icon {
+    color: rgb(185 182 182);
+    font-size: 18px;
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
+.danger-icon {
+    color: rgb(255 88 107);
+    font-size: 18px;
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
+// Branding color CTAs
+
+.cta1-icon {
+    color: $branding-color-1;
+    font-size: 18px;
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
+.cta2-icon {
+    color: $branding-color-2;
+    font-size: 18px;
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
+.cta3-icon {
+    color: $branding-color-3;
+    font-size: 18px;
+    padding-left: 3px;
+    padding-right: 3px;
+}
+
+// Font icons
+
+.fonticon-container {
+    > .fonticon-wrap {
+        border-radius: 0.1875rem;
+        float: left;
+        height: 60px;
+        line-height: 4.8rem;
+        margin-bottom: 1.5rem;
+        margin-right: 1rem;
+        text-align: center;
+        width: 60px;
+
+        > i {
+            font-size: 2.28rem;
+            transition: all 0.2s ease-in-out;
+
+            &.fa {
+                font-size: 2.28rem !important;
+            }
+        }
+
+        &.youtube {
+            width: 100px;
+        }
+    }
+
+    &:hover {
+        i {
+            color: map-get($primary, base);
+            font-size: 2.9rem;
+            transform: scale(1.3);
+        }
+    }
+
+    > .fonticon-classname,
+    > .fonticon-unit {
+        display: block;
+        font-size: 1.5rem;
+        line-height: 1.2;
+    }
+
+    > .fonticon-unit {
+        font-size: 1rem;
+        font-style: italic;
+    }
+}

package/assets/scss/dashboard/_layout.scss

@@ -0,0 +1,23 @@
+// breakpoints
+
+$S: 480px;
+$M: 768px;
+$L: 1100px;
+
+// media queries
+
+@mixin MQ($canvas) {
+    @if $canvas == S {
+        @media only screen and (min-width: $S) {
+            @content;
+        }
+    } @else if $canvas == M {
+        @media only screen and (min-width: $M) {
+            @content;
+        }
+    } @else if $canvas == L {
+        @media only screen and (min-width: $L) {
+            @content;
+        }
+    }
+}

package/assets/scss/dashboard/_misc.scss

@@ -0,0 +1,220 @@
+// Lines
+
+hr {
+    border-color: rgb(168 168 168);
+}
+
+// List
+
+ul.list-inline {
+    i {
+        line-height: 18px;
+    }
+
+    li {
+        display: inline-block;
+    }
+
+    &.list-inline-pipe {
+        > li + li::before {
+            color: rgb(134 142 150);
+            content: ' | ';
+        }
+    }
+}
+
+// List Group
+.list-group-item {
+    &:hover {
+        z-index: 0;
+    }
+
+    &.active,
+    &.active:focus,
+    &.active:hover {
+        background-color: map-get($primary, base);
+        border-color: map-get($primary, base);
+    }
+}
+
+// Labels
+.label {
+    letter-spacing: 0.5px;
+    padding-bottom: 0.1em !important;
+
+    &.label-default {
+        background-color: rgb(119 119 119) !important;
+    }
+}
+
+// Keyframes
+
+@keyframes rotate {
+    100% {
+        transform: rotate(360deg);
+    }
+}
+
+@keyframes dash {
+    0% {
+        stroke-dasharray: 1, 200;
+        stroke-dashoffset: 0;
+    }
+
+    50% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -35px;
+    }
+
+    100% {
+        stroke-dasharray: 89, 200;
+        stroke-dashoffset: -124px;
+    }
+}
+
+@keyframes color {
+    100%,
+    0% {
+        stroke: map-get($primary, base);
+    }
+
+    50% {
+        stroke: map-get($warning, base);
+    }
+
+    100% {
+        stroke: map-get($primary, base);
+    }
+}
+
+// Legend
+
+legend {
+    border-bottom: 0;
+}
+
+// Prevent highlight on mobile
+* {
+    -webkit-tap-highlight-color: rgb(255 255 255 / 0%) transparent;
+
+    &:focus {
+        outline: 0;
+    }
+}
+
+a:focus,
+a:active,
+button:active,
+button:focus,
+button:hover,
+button::-moz-focus-inner,
+input[type='reset']::-moz-focus-inner,
+input[type='button']::-moz-focus-inner,
+input[type='submit']::-moz-focus-inner,
+select::-moz-focus-inner,
+input[type='file'] > input[type='button']::-moz-focus-inner {
+    outline: 0 !important;
+}
+
+// Datetime
+//datetime .mb-3 {
+//    margin: 0;
+//}
+
+// Checkbox css
+.form-check-input:active ~ .custom-control-indicator {
+    background-color: map-get($primary, base);
+}
+
+// Drag and dropp
+.dragdrop-container {
+    min-height: 200px;
+}
+
+// Content overlay
+.content-overlay {
+    bottom: 0;
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    top: 0;
+    visibility: hidden;
+    z-index: 2;
+
+    &.show {
+        background-color: rgb(0 0 0 / 60%);
+        visibility: visible;
+    }
+}
+
+// Previous arrow icon size
+
+a {
+    &.previous {
+        border-radius: 50%;
+        color: rgb(101 98 98);
+        display: inline-block;
+        font-size: 22px;
+        margin-bottom: 10px;
+        margin-right: 5px;
+        padding: 0 10px 0 0;
+        text-decoration: none;
+
+        &:hover {
+            color: rgb(0 0 0);
+        }
+
+        i {
+            font-size: 38px;
+            position: relative;
+            top: 8px;
+        }
+    }
+}
+
+// Header
+.m-subheader {
+    border-bottom: 4px solid map-get($primary, base);
+    padding: 0;
+
+    .m-section__sub {
+        background-color: map-get($primary, base);
+        color: rgb(255 255 255);
+        font-size: 16px;
+        margin: 0;
+        padding: 7px 25px;
+        top: 0;
+    }
+}
+
+// Dropdown menus
+.dropdown-menu {
+    display: none;
+    opacity: inherit;
+
+    .active {
+        a {
+            background-color: map-get($primary, base);
+
+            &:focus,
+            &:hover {
+                background-color: map-get($primary, base);
+            }
+        }
+    }
+
+    &.show {
+        opacity: 1;
+        transform: none;
+    }
+}
+
+.form-control {
+    &.open {
+        ~ .dropdown-menu {
+            opacity: 1;
+            transform: none;
+        }
+    }
+}

package/assets/scss/dashboard/_notifications.scss

@@ -0,0 +1,27 @@
+.notification-dropdown {
+    width: 400px;
+
+    .noti-list {
+        height: 390px;
+        position: relative;
+    }
+
+    &.dropdown-menu {
+        padding: 0;
+    }
+
+    @media screen and (max-width: 575px) {
+        left: -260px !important;
+        width: 350px;
+    }
+}
+
+.noti-text {
+    color: $gray-600;
+    display: inline-block;
+    font-size: 90%;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    width: 80%;
+}