@posiwise/shared-components 0.0.38 → 0.0.40

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

@@ -1,314 +0,0 @@
-@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

@@ -1,107 +0,0 @@
-// 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

@@ -1,23 +0,0 @@
-// 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

@@ -1,220 +0,0 @@
-// 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

@@ -1,27 +0,0 @@
-.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%;
-}