@mediusinc/mng-commons 5.0.0-rc.0-c31d5206 → 5.0.0-rc.1

package/scss/common/layout/_login.scss

@@ -1,106 +0,0 @@
-.login-body {
-    display: flex;
-    box-sizing: border-box;
-    min-height: 100vh;
-
-    .login-image {
-        height: 100vh;
-
-        img {
-            height: 100vh;
-            max-width: 490px;
-        }
-    }
-
-    .login-panel {
-        background-image: $bodyImage;
-        background-repeat: no-repeat;
-        text-align: center;
-        width: 100%;
-        padding: 260px 100px 75px 100px;
-        box-sizing: border-box;
-
-        .login-logo {
-            width: 45px;
-        }
-
-        .login-appname {
-            width: 100px;
-            margin-left: 1rem;
-        }
-
-        .form-container {
-            input {
-                display: block;
-                max-width: 320px;
-                min-width: 270px;
-                margin-bottom: 10px;
-            }
-
-            a {
-                color: $textThirdColor;
-                margin-bottom: 20px;
-                font-size: 11px;
-            }
-        }
-
-        .button-container {
-            button {
-                display: block;
-                max-width: 320px;
-                margin-bottom: 32px;
-            }
-
-            > span {
-                display: flex;
-                font-size: 11px;
-                color: $textThirdColor;
-
-                a {
-                    cursor: pointer;
-                    margin-left: 0.25rem;
-                }
-            }
-        }
-
-        .login-footer {
-            bottom: 60px;
-            margin-bottom: 2rem;
-
-            .login-footer-logo-container {
-                padding-right: 1.5rem;
-                border-right: 1px solid $dividerColor;
-
-                .login-footer-logo {
-                    width: 22px;
-                }
-
-                .login-footer-appname {
-                    width: 45px;
-                    margin-left: 0.5rem;
-                }
-            }
-
-            span {
-                margin-left: 1rem;
-                font-size: 11px;
-                color: $textThirdColor;
-            }
-        }
-    }
-}
-
-@media (max-width: $tabletBreakpoint) {
-    .login-body {
-        .login-image {
-            display: none;
-        }
-
-        .login-panel {
-            display: flex;
-            align-items: center;
-            justify-content: center;
-            padding: 60px 50px;
-        }
-    }
-}

package/scss/common/layout/_main.scss

@@ -1,45 +0,0 @@
-html {
-    height: 100%;
-    font-size: $fontSize;
-}
-
-body {
-    font-family: $fontFamily;
-    font-size: $fontSize;
-    color: $textColor;
-    -webkit-font-smoothing: antialiased;
-    -moz-osx-font-smoothing: grayscale;
-    padding: 0;
-    margin: 0;
-    min-height: 100%;
-    background: $bodyBg;
-    background-repeat: no-repeat;
-    background-attachment: fixed;
-
-    a {
-        color: $primaryColor;
-        text-decoration: none;
-    }
-}
-
-.layout-wrapper {
-    display: flex;
-    flex-direction: column;
-    justify-content: space-between;
-    min-height: 100vh;
-    background: $bodyImage;
-    background-repeat: no-repeat;
-
-    .layout-main {
-        @include flex();
-        @include flex-direction-column();
-        @include flex-justify-between();
-        min-height: 100vh;
-        @include transition(margin-left 0.3s);
-
-        .layout-main-content {
-            flex: 1 1 0;
-            padding: 30px;
-        }
-    }
-}

package/scss/common/layout/_mixins.scss

@@ -1,222 +0,0 @@
-@mixin border-radius($val) {
-    -moz-border-radius: $val;
-    -webkit-border-radius: $val;
-    border-radius: $val;
-}
-
-@mixin border-radius-right($val) {
-    -moz-border-radius-topright: $val;
-    -webkit-border-top-right-radius: $val;
-    border-top-right-radius: $val;
-    -moz-border-radius-bottomright: $val;
-    -webkit-border-bottom-right-radius: $val;
-    border-bottom-right-radius: $val;
-}
-
-@mixin border-radius-left($val) {
-    -moz-border-radius-topleft: $val;
-    -webkit-border-top-left-radius: $val;
-    border-top-left-radius: $val;
-    -moz-border-radius-bottomleft: $val;
-    -webkit-border-bottom-left-radius: $val;
-    border-bottom-left-radius: $val;
-}
-
-@mixin border-radius-top($val) {
-    -moz-border-radius-topleft: $val;
-    -webkit-border-top-left-radius: $val;
-    border-top-left-radius: $val;
-    -moz-border-radius-topright: $val;
-    -webkit-border-top-right-radius: $val;
-    border-top-right-radius: $val;
-}
-
-@mixin border-radius-bottom($val) {
-    -moz-border-radius-bottomleft: $val;
-    -webkit-border-bottom-left-radius: $val;
-    border-bottom-left-radius: $val;
-    -moz-border-radius-bottomright: $val;
-    -webkit-border-bottom-right-radius: $val;
-    border-bottom-right-radius: $val;
-}
-
-@mixin transition($transition...) {
-    -moz-transition: $transition;
-    -o-transition: $transition;
-    -webkit-transition: $transition;
-    transition: $transition;
-}
-
-@mixin rotate($deg) {
-    -webkit-transform: rotate($deg);
-    -moz-transform: rotate($deg);
-    -o-transform: rotate($deg);
-    -ms-transform: rotate($deg);
-    transform: rotate($deg);
-}
-
-@mixin scale($deg) {
-    -webkit-transform: scale($deg);
-    -moz-transform: scale($deg);
-    -o-transform: scale($deg);
-    -ms-transform: scale($deg);
-    transform: scale($deg);
-}
-
-@mixin opacity($opacity) {
-    opacity: $opacity;
-    $opacity-ie: $opacity * 100;
-    filter: alpha(opacity=$opacity-ie);
-}
-
-@mixin no-shadow() {
-    box-shadow: none;
-    -webkit-box-shadow: none;
-    -moz-box-shadow: none;
-}
-
-@mixin list-item-hover {
-    background-color: $listItemHoverBgColor;
-    color: $listItemHoverTextColor;
-}
-
-@mixin list-item-highlight {
-    background-color: $primaryColor;
-    color: $highlightTextColor;
-}
-
-@mixin menu-item-hover {
-    background-color: $primaryColor;
-    color: $highlightTextColor;
-}
-
-@mixin background-gradient-top2bottom($start-colour, $end-colour) {
-    background-color: $start-colour;
-    background-image: -webkit-gradient(linear, left top, left bottom, from($start-colour), to($end-colour));
-    background-image: -webkit-linear-gradient(to bottom, $start-colour, $end-colour);
-    background-image: -moz-linear-gradient(to bottom, $start-colour, $end-colour);
-    background-image: -ms-linear-gradient(to bottom, $start-colour, $end-colour);
-    background-image: -o-linear-gradient(to bottom, $start-colour, $end-colour);
-    background-image: linear-gradient(to bottom, $start-colour, $end-colour);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-colour}', endColorstr='#{$end-colour}');
-}
-
-@mixin background-gradient-bottom2top($start-color, $end-color) {
-    background-color: $end-color;
-    background-image: -webkit-gradient(linear, left bottom, left top, from($start-color), to($end-color));
-    background-image: -webkit-linear-gradient(to top, $start-color, $end-color);
-    background-image: -moz-linear-gradient(to top, $start-color, $end-color);
-    background-image: -ms-linear-gradient(to top, $start-color, $end-color);
-    background-image: -o-linear-gradient(to top, $start-color, $end-color);
-    background-image: linear-gradient(to top, $start-color, $end-color);
-    filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#{$start-color}', endColorstr='#{$end-color}');
-}
-
-@mixin border-shadow() {
-    -webkit-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
-    -moz-box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
-    box-shadow: 0 0 4px 0 rgba(0, 0, 0, 0.2);
-}
-
-@mixin overlay-shadow {
-    -webkit-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-    -moz-box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-    box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.3);
-}
-
-@mixin placeholder {
-    &::-webkit-input-placeholder {
-        @content;
-    }
-    &:-moz-placeholder {
-        @content;
-    }
-    &::-moz-placeholder {
-        @content;
-    }
-    &:-ms-input-placeholder {
-        @content;
-    }
-}
-
-@mixin link-focus-shadow() {
-    -webkit-box-shadow: 0 0 4px 0 $primaryColor;
-    -moz-box-shadow: 0 0 4px 0 $primaryColor;
-    box-shadow: 0 0 4px 0 $primaryColor;
-}
-@mixin flex() {
-    display: -ms-flexbox;
-    display: flex;
-}
-
-@mixin flex-wrap($value) {
-    -ms-flex-wrap: $value;
-    flex-wrap: $value;
-}
-
-@mixin flex-direction-row() {
-    -ms-flex-direction: row;
-    flex-direction: row;
-}
-
-@mixin flex-direction-column() {
-    -ms-flex-direction: column;
-    flex-direction: column;
-}
-
-@mixin flex-justify-center() {
-    -ms-flex-pack: center;
-    justify-content: center;
-}
-
-@mixin flex-justify-between() {
-    -ms-flex-pack: justify;
-    justify-content: space-between;
-}
-
-@mixin flex-align-center() {
-    -ms-flex-align: center;
-    align-items: center;
-}
-
-@mixin flex-align-start() {
-    -ms-flex-align: start;
-    align-items: flex-start;
-}
-
-@mixin flex-align-end() {
-    -ms-flex-align: end;
-    align-items: flex-end;
-}
-
-@mixin flex-justify-start() {
-    -ms-flex-pack: start;
-    justify-content: flex-start;
-}
-
-@mixin flex-justify-end() {
-    -ms-flex-pack: end;
-    justify-content: flex-end;
-}
-
-@mixin nested-submenu-indents($val, $index, $length) {
-    ul {
-        li {
-            a {
-                padding-left: $val * $index * 1px;
-            }
-
-            @if $index < $length {
-                @include nested-submenu-indents($val, $index + 1, $length);
-            }
-        }
-    }
-}
-
-@mixin reset-list {
-    margin: 0;
-    padding: 0;
-    outline: 0;
-    overflow: hidden;
-    list-style-type: none;
-}

package/scss/common/layout/_rightmenu.scss

@@ -1,130 +0,0 @@
-.layout-rightmenu-button {
-    background: linear-gradient(271.89deg, rgba(70, 82, 104, 1), rgba(115, 130, 161, 1));
-    border-radius: 6px 0px 0px 6px;
-    border-color: transparent;
-    border-left: 0 none;
-
-    &:enabled:hover {
-        background: linear-gradient(271.89deg, rgba(70, 82, 104, 0.5), rgba(115, 130, 161, 0.5));
-        border-color: transparent;
-    }
-}
-
-.layout-rightmenu {
-    height: 100%;
-    width: $rightMenuWidth;
-    overflow-y: auto;
-    overflow-x: hidden;
-    position: fixed;
-    right: 0;
-    top: 0;
-    z-index: 1000;
-    padding: 32px 16px;
-    border-radius: 40px 0px 0px 40px;
-    background: $rightMenuBg;
-    transform: translateX(100%);
-    transition: transform $animationDuration $animationTimingFunction;
-
-    &.layout-rightmenu-active {
-        transform: translateX(0);
-    }
-
-    .layout-rightmenu-close {
-        width: 32px;
-        height: 32px;
-        background-color: $rightMenuButtonBg;
-        color: $textColor;
-        position: absolute;
-        right: 18px;
-        text-align: center;
-        padding: 9px;
-        border-radius: 6px;
-    }
-
-    .user-detail-wrapper {
-        text-align: center;
-        padding: 4.5rem 0 2rem 0;
-
-        .user-name {
-            font-size: 20px;
-            color: $textColor;
-            text-align: center;
-            display: block;
-            margin-top: 1.25rem;
-            margin-bottom: 0.25rem;
-        }
-    }
-
-    .user-tasks {
-        display: flex;
-        justify-content: space-between;
-        padding: 1.5rem 1rem;
-        border-bottom: 1px solid $dividerColor;
-
-        .user-tasks-item {
-            font-weight: 500;
-
-            &.in-progress {
-                .task-number {
-                    color: #fc6161;
-                }
-            }
-
-            .task-number {
-                display: flex;
-                justify-content: center;
-                align-items: center;
-                background-color: $rightMenuButtonBg;
-                color: $textColor;
-                text-align: center;
-                padding: 9px;
-                border-radius: 6px;
-                width: 50px;
-                height: 50px;
-                font-size: 30px;
-            }
-
-            .task-name {
-                display: block;
-                color: $textColor;
-                margin-top: 0.75rem;
-            }
-        }
-    }
-
-    .p-datepicker {
-        padding-left: 0;
-        padding-right: 0;
-    }
-
-    .daily-plan-wrapper {
-        margin-top: 2rem;
-        color: $textColor;
-
-        ul {
-            margin: 0;
-            padding: 0;
-            outline: 0;
-            overflow: hidden;
-            list-style-type: none;
-
-            li {
-                margin-top: 8px;
-                border-radius: 6px;
-                background: $rightMenuListItemBg;
-                padding: 8px 12px;
-
-                span {
-                    display: block;
-                    line-height: 20px;
-                    color: $textColor;
-
-                    &.event-time {
-                        font-weight: 600;
-                        color: $textThirdColor;
-                    }
-                }
-            }
-        }
-    }
-}

package/scss/common/layout/_topbar.scss

@@ -1,191 +0,0 @@
-.layout-topbar {
-    z-index: 100;
-    border-radius: 0 0 20px 20px;
-    padding: 0 10px;
-    display: flex;
-    flex-wrap: wrap;
-    min-height: 4em;
-    align-items: center;
-    justify-content: space-between;
-
-    .layout-topbar-left {
-        -webkit-box-flex: 0;
-        -ms-flex: 0 0 auto;
-        flex: 0 0 auto;
-        display: flex;
-        align-items: center;
-
-        .logo {
-            margin-left: 20px;
-
-            img {
-                height: 2rem;
-            }
-        }
-
-        .app-name {
-            margin-left: 9px;
-            height: 1.714rem;
-        }
-
-        .topbar-menu-button {
-            width: 32px;
-            height: 32px;
-            line-height: 35px;
-            margin-left: 20px;
-            text-align: center;
-            border-radius: 6px;
-            background-color: $topbarIconBg;
-            color: $topbarTextColor;
-            @include transition(color 0.3s);
-
-            &:hover {
-                color: $topbarTextHoverColor;
-            }
-
-            i {
-                font-size: 1.25rem;
-            }
-        }
-    }
-
-    .layout-topbar-right {
-        -webkit-box-flex: 0;
-        -ms-flex: 0 0 auto;
-        flex: 0 0 auto;
-
-        .layout-topbar-right-items {
-            list-style-type: none;
-            display: flex;
-            flex-direction: row-reverse;
-            justify-content: center;
-            height: 100%;
-
-            > li {
-                display: flex;
-                align-items: center;
-                position: relative;
-
-                > a {
-                    position: relative;
-                    display: flex;
-                    align-items: center;
-                    color: $topbarTextColor;
-                    background-color: $topbarIconBg;
-                    width: 36px;
-                    height: 36px;
-                    margin: 0 0.4rem;
-                    padding: 0.75rem 0.5rem;
-                    border-radius: $borderRadius;
-
-                    &:hover {
-                        color: $topbarTextHoverColor;
-                        background-color: $topbarIconHoverBg;
-                    }
-
-                    .topbar-icon {
-                        font-size: 1.5rem;
-                        @include transition(color 0.3s);
-                    }
-
-                    .topbar-item-name {
-                        display: none;
-                    }
-
-                    .topbar-badge {
-                        position: absolute;
-                        right: 2px;
-                        top: 2px;
-                        background-color: $primaryColor;
-                        color: $primaryTextColor;
-                        padding: 2px 4px;
-                        display: block;
-                        font-size: 11px;
-                        line-height: 10px;
-                        @include border-radius($borderRadius);
-                    }
-                }
-
-                &.profile-item {
-                    margin-right: 20px;
-
-                    > a {
-                        background-color: transparent;
-                        padding: 0;
-
-                        img {
-                            width: 32px;
-                            height: 32px;
-                        }
-
-                        i {
-                            font-size: 1.5rem;
-                        }
-                    }
-                }
-
-                > ul {
-                    position: absolute;
-                    top: 56px;
-                    right: 0;
-                    display: none;
-                    min-width: 12rem;
-                    animation-duration: 0.5s;
-                    list-style-type: none;
-                    margin: 0;
-                    z-index: 1;
-                    padding: 8px 0;
-                    border-radius: 6px;
-                    background: $topbarSubmenuBg;
-
-                    a {
-                        padding: 10px;
-                        display: block;
-                        width: 100%;
-                        box-sizing: border-box;
-                        color: $textSecondaryColor;
-
-                        i {
-                            margin-right: 8px;
-                        }
-
-                        img {
-                            margin-right: 8px;
-                        }
-
-                        i,
-                        img,
-                        span {
-                            vertical-align: middle;
-                        }
-
-                        &:hover {
-                            color: $textColor;
-                            background-color: $topbarSubmenuItemHoverBgColor;
-                        }
-                    }
-                }
-
-                &.active-topmenuitem {
-                    > ul {
-                        display: block;
-                    }
-                }
-            }
-        }
-    }
-}
-
-@media (max-width: $tabletBreakpoint) {
-    .layout-wrapper {
-        .layout-topbar {
-            padding: 0;
-
-            .layout-topbar-left {
-                .app-name {
-                    height: 0.714em;
-                }
-            }
-        }
-    }
-}