@mediusinc/mng-commons 0.2.6 → 0.2.8

package/scss/common/layout/_invoice.scss

@@ -16,7 +16,7 @@
 
             .invoice-appname {
                 height: 1.25rem;
-                margin-left: .75rem;
+                margin-left: 0.75rem;
             }
         }
 
@@ -27,7 +27,7 @@
         }
 
         .invoice-address {
-            font-size: .786rem;
+            font-size: 0.786rem;
             line-height: 16px;
             color: $textThirdColor;
         }
@@ -40,7 +40,7 @@
         border-top: 1px solid $dividerColor;
 
         .invoice-date {
-            font-size: .786rem;
+            font-size: 0.786rem;
             font-weight: 500;
             color: $textThirdColor;
         }
@@ -50,7 +50,7 @@
             font-weight: 500;
 
             span {
-                margin-left: .5rem;
+                margin-left: 0.5rem;
                 font-size: 1.429rem;
                 font-weight: 300;
                 color: $textThirdColor;
@@ -64,7 +64,7 @@
         }
 
         .invoice-to-info {
-            margin-top: .25rem;
+            margin-top: 0.25rem;
             color: $textThirdColor;
             font-size: 0.857rem;
         }
@@ -90,12 +90,13 @@
                 color: $textThirdColor;
             }
 
-            th, td {
-                padding: .5rem 1rem;
+            th,
+            td {
+                padding: 0.5rem 1rem;
                 text-align: right;
             }
 
-            tr{
+            tr {
                 &:first-child {
                     td {
                         padding-top: 1rem;
@@ -109,7 +110,8 @@
                 }
             }
 
-            th:first-child, td:first-child {
+            th:first-child,
+            td:first-child {
                 text-align: left;
             }
         }
@@ -132,7 +134,8 @@
                     }
                 }
 
-                &:first-child, &:nth-child(2) {
+                &:first-child,
+                &:nth-child(2) {
                     td:first-child {
                         color: $textThirdColor;
                     }
@@ -143,7 +146,7 @@
                 }
 
                 td {
-                    padding: .5rem 1rem;
+                    padding: 0.5rem 1rem;
                 }
             }
         }
@@ -151,11 +154,11 @@
 
     .invoice-notes {
         margin-top: 2rem;
-        padding-left: .5rem;
+        padding-left: 0.5rem;
     }
 }
 
-@media print{
+@media print {
     body * {
         visibility: hidden;
     }
@@ -171,6 +174,3 @@
         margin: 0;
     }
 }
-
-
-

package/scss/common/layout/_landing.scss

@@ -1,16 +1,17 @@
 .landing-container {
-    background: #100E23;
+    background: #100e23;
 
-    .layout-topbar-logo, .layout-footer-logo {
+    .layout-topbar-logo,
+    .layout-footer-logo {
         .appname {
-            margin-left: .5rem;
+            margin-left: 0.5rem;
         }
     }
 
     #header {
         width: 100%;
         min-height: 1000px;
-        background: url("#{$baseHref}assets/images/mng/landing/landing-header-2x.jpg") top left no-repeat;
+        background: url('#{$baseHref}assets/images/mng/landing/landing-header-2x.jpg') top left no-repeat;
         background-size: cover;
         padding: 2.5rem 3rem;
 
@@ -24,14 +25,14 @@
             .header-right-elements {
                 .contact-button {
                     background: rgba(68, 72, 109, 0.05);
-                    color: #44486D;
+                    color: #44486d;
                     font-weight: 500;
                     border-radius: 8px;
                 }
 
                 .contact-icons {
                     i {
-                        color: #44486D;
+                        color: #44486d;
                         opacity: 0.8;
                         margin-right: 1rem;
                         font-size: 18px;
@@ -39,7 +40,7 @@
 
                     &:hover {
                         i {
-                            color: darken(#44486D, 20%);
+                            color: darken(#44486d, 20%);
                         }
                     }
                 }
@@ -47,7 +48,7 @@
 
             a {
                 font-weight: 500;
-                color: #44486D;
+                color: #44486d;
                 cursor: pointer;
             }
 
@@ -65,24 +66,24 @@
             h1 {
                 font-size: 80px;
                 line-height: 95px;
-                color: #44486D;
+                color: #44486d;
             }
 
             h2 {
                 font-weight: 500;
                 font-size: 30px;
                 line-height: 36px;
-                color: #44486D;
+                color: #44486d;
             }
 
             .p-button {
-                background: #04E3F2;
-                border-color: #04E3F2;
+                background: #04e3f2;
+                border-color: #04e3f2;
                 font-weight: bold;
                 color: #000000;
                 mix-blend-mode: multiply;
                 border-radius: 8px;
-                padding: 0.858rem 1.142rem
+                padding: 0.858rem 1.142rem;
             }
         }
 
@@ -115,7 +116,7 @@
     #meet-atlantis {
         width: 100%;
         min-height: 620px;
-        background: #100E23;
+        background: #100e23;
         position: relative;
         padding-top: 65px;
 
@@ -157,13 +158,13 @@
     }
 
     .clip-background {
-        background: #100E23;
+        background: #100e23;
         position: relative;
     }
 
     .landing-wrapper-back {
         background: transparent;
-        color: #F4F8FB;
+        color: #f4f8fb;
         margin-top: calc((var(--clip-padding) * -1) - 300px);
         padding: calc((var(--clip-padding) * 4) - (var(--clip-padding) - var(--skew-padding))) 0 4em;
         padding-left: 3rem;
@@ -199,7 +200,7 @@
                     margin-bottom: 170px;
 
                     .widget-overview-box {
-                        background: #FFFFFF;
+                        background: #ffffff;
                         box-shadow: 0px 8px 30px rgba(59, 56, 109, 0.07);
                         border-radius: 12px;
                         margin-bottom: 2rem;
@@ -211,12 +212,12 @@
     }
 
     .landing-wrapper {
-        background: linear-gradient(180deg, #F4F8FB 17.13%, #EEEEFA 65.89%);
+        background: linear-gradient(180deg, #f4f8fb 17.13%, #eeeefa 65.89%);
         padding-left: 3rem;
         padding-right: 3rem;
         padding-bottom: 5rem;
         position: absolute;
-        color: #44486D;
+        color: #44486d;
         width: 100%;
 
         #features {
@@ -247,7 +248,7 @@
                     margin-bottom: 170px;
 
                     .widget-overview-box {
-                        background: #FFFFFF;
+                        background: #ffffff;
                         box-shadow: 0px 8px 30px rgba(59, 56, 109, 0.07);
                         border-radius: 12px;
                         margin-bottom: 2rem;
@@ -259,7 +260,7 @@
                     margin-bottom: 140px;
 
                     .customer-box {
-                        background: #FFFFFF;
+                        background: #ffffff;
                         box-shadow: 0px 8px 30px rgba(68, 72, 109, 0.07);
                         border-radius: 8px;
                         max-width: 180px;
@@ -277,15 +278,15 @@
                             font-weight: 500;
                             font-size: 18px;
                             line-height: 21px;
-                            color: #878D9C;
+                            color: #878d9c;
                         }
 
                         &:nth-child(3) {
-                            opacity: .5;
+                            opacity: 0.5;
                         }
 
                         &:last-child {
-                            opacity: .3;
+                            opacity: 0.3;
                         }
                     }
 
@@ -318,7 +319,7 @@
 
                         .chart-widget {
                             max-height: 260px;
-                            opacity: .6;
+                            opacity: 0.6;
                         }
                     }
                 }
@@ -348,7 +349,7 @@
 
                 .card {
                     height: 100%;
-                    background: #FFFFFF;
+                    background: #ffffff;
                     box-shadow: 0px 10px 50px rgba(29, 15, 57, 0.13);
                     border-radius: 20px;
                 }
@@ -375,21 +376,21 @@
                         justify-content: center;
                         font-size: 18px;
                         line-height: 26px;
-                        padding: .5rem;
+                        padding: 0.5rem;
                         text-align: center;
                     }
                 }
 
                 .buy-button {
-                    background: #EFEFFB;
-                    color: #44486D;
+                    background: #efeffb;
+                    color: #44486d;
                     font-weight: 600;
                     line-height: 24px;
                     border-radius: 8px;
                 }
 
                 .active-buy-button {
-                    background: #00CAE6;
+                    background: #00cae6;
                     color: #ffffff;
                     border-radius: 8px;
                     font-weight: 600;
@@ -403,15 +404,15 @@
 
             .footer-header-container {
                 padding-bottom: 1.5rem;
-                border-bottom: 2px solid #EFEFFB;
+                border-bottom: 2px solid #efeffb;
                 mix-blend-mode: multiply;
 
                 .layout-footer-logo {
                     span {
                         font-size: 14px;
                         line-height: 26px;
-                        color: #44486D;
-                        opacity: .7;
+                        color: #44486d;
+                        opacity: 0.7;
                         margin-left: 2.5rem;
                     }
                 }
@@ -421,7 +422,7 @@
                         cursor: pointer;
 
                         i {
-                            color: #44486D;
+                            color: #44486d;
                             opacity: 0.8;
                             margin-right: 1rem;
                             font-size: 18px;
@@ -429,7 +430,7 @@
 
                         &:hover {
                             i {
-                                color: darken(#44486D, 20%);
+                                color: darken(#44486d, 20%);
                             }
                         }
                     }
@@ -441,7 +442,7 @@
                     font-weight: 500;
                     font-size: 16px;
                     line-height: 19px;
-                    opacity: .6;
+                    opacity: 0.6;
                 }
 
                 p {
@@ -452,27 +453,27 @@
                 }
 
                 input {
-                    background: #EFEFFB;
+                    background: #efeffb;
                     mix-blend-mode: multiply;
                     opacity: 0.8;
-                    color: #44486D;
+                    color: #44486d;
                     border-radius: 8px 0 0 8px;
                     border-color: transparent;
-                    padding: .714rem 1rem;
+                    padding: 0.714rem 1rem;
                     min-width: 400px;
 
                     &::placeholder {
                         font-weight: 500;
                         font-size: 14px;
                         line-height: 17px;
-                        color: #44486D;
+                        color: #44486d;
                         mix-blend-mode: multiply;
                         opacity: 0.25;
                     }
                 }
 
                 .join-button {
-                    background: #7272B2;
+                    background: #7272b2;
                     mix-blend-mode: multiply;
                     border-radius: 0 8px 8px 0;
                 }
@@ -484,7 +485,8 @@
 @media screen and (max-width: 991px) {
     .landing-container {
         #header {
-            .header-features, .header-text {
+            .header-features,
+            .header-text {
                 padding: 100px 0;
             }
 
@@ -501,18 +503,17 @@
                     top: 6rem;
                     right: 5rem;
                     width: 250px;
-                    background: linear-gradient(180deg, #F4F8FB 17.13%, #EEEEFA 65.89%);
+                    background: linear-gradient(180deg, #f4f8fb 17.13%, #eeeefa 65.89%);
                     animation-duration: $transitionDuration;
 
                     a {
-                        color: #44486D;
+                        color: #44486d;
                     }
 
                     > li {
                         width: 100%;
 
                         &:hover {
-
                         }
                     }
 
@@ -529,8 +530,10 @@
         #meet-atlantis {
             min-height: 320px;
 
-            .ellipsis-1, .ellipsis-2,
-            .ellipsis-3, .ellipsis-4 {
+            .ellipsis-1,
+            .ellipsis-2,
+            .ellipsis-3,
+            .ellipsis-4 {
                 display: none;
             }
 
@@ -553,13 +556,14 @@
                 margin-top: 0;
             }
 
-
             #features {
                 padding-left: 0;
                 padding-right: 0;
 
                 .feature-boxes {
-                    &.feature-boxes-1, &.feature-boxes-2, &.feature-boxes-3 {
+                    &.feature-boxes-1,
+                    &.feature-boxes-2,
+                    &.feature-boxes-3 {
                         margin-bottom: 50px;
                     }
 
@@ -591,7 +595,8 @@
 
             #footer {
                 .newsletter {
-                    p, input {
+                    p,
+                    input {
                         min-width: auto;
                         max-width: 300px;
                     }
@@ -626,14 +631,6 @@
     position: relative;
     margin-top: calc((var(--clip-padding) * -1) - 300px);
     padding: calc((var(--clip-padding) * 4) - (var(--clip-padding) - var(--skew-padding))) 0 4em;
-    clip-path: polygon(
-            0% 18%,
-            100% 0%,
-            100% 100%,
-            0% 100%);
-    -webkit-clip-path: polygon(
-            0% 18%,
-            100% 0%,
-            100% 100%,
-            0% 100%);
+    clip-path: polygon(0% 18%, 100% 0%, 100% 100%, 0% 100%);
+    -webkit-clip-path: polygon(0% 18%, 100% 0%, 100% 100%, 0% 100%);
 }

package/scss/common/layout/_loader.scss

@@ -13,6 +13,5 @@
         transform: translate(-50%, -50%);
         width: 60px;
         height: 60px;
-
     }
 }

package/scss/common/layout/_login.scss

@@ -55,9 +55,9 @@
                 font-size: 11px;
                 color: $textThirdColor;
 
-                a{
+                a {
                     cursor: pointer;
-                    margin-left: .25rem;
+                    margin-left: 0.25rem;
                 }
             }
         }
@@ -76,9 +76,8 @@
 
                 .login-footer-appname {
                     width: 45px;
-                    margin-left: .5rem;
+                    margin-left: 0.5rem;
                 }
-
             }
 
             span {

package/scss/common/layout/_main.scss

@@ -9,8 +9,8 @@ body {
     color: $textColor;
     -webkit-font-smoothing: antialiased;
     -moz-osx-font-smoothing: grayscale;
-    padding:0;
-    margin:0;
+    padding: 0;
+    margin: 0;
     min-height: 100%;
     background: $bodyBg;
     background-repeat: no-repeat;
@@ -35,7 +35,7 @@ body {
         @include flex-direction-column();
         @include flex-justify-between();
         min-height: 100vh;
-        @include transition(margin-left .3s);
+        @include transition(margin-left 0.3s);
 
         .layout-main-content {
             flex: 1 1 0;

package/scss/common/layout/_mixins.scss

@@ -41,10 +41,10 @@
 }
 
 @mixin transition($transition...) {
-    -moz-transition:    $transition;
-    -o-transition:      $transition;
+    -moz-transition: $transition;
+    -o-transition: $transition;
     -webkit-transition: $transition;
-    transition:         $transition;
+    transition: $transition;
 }
 
 @mixin rotate($deg) {
@@ -64,9 +64,9 @@
 }
 
 @mixin opacity($opacity) {
-  opacity: $opacity;
-  $opacity-ie: $opacity * 100;
-  filter: alpha(opacity=$opacity-ie);
+    opacity: $opacity;
+    $opacity-ie: $opacity * 100;
+    filter: alpha(opacity=$opacity-ie);
 }
 
 @mixin no-shadow() {
@@ -94,22 +94,22 @@
     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}');
+    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}');
+    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() {
@@ -125,10 +125,18 @@
 }
 
 @mixin placeholder {
-    &::-webkit-input-placeholder {@content}
-    &:-moz-placeholder           {@content}
-    &::-moz-placeholder          {@content}
-    &:-ms-input-placeholder      {@content}
+    &::-webkit-input-placeholder {
+        @content;
+    }
+    &:-moz-placeholder {
+        @content;
+    }
+    &::-moz-placeholder {
+        @content;
+    }
+    &:-ms-input-placeholder {
+        @content;
+    }
 }
 
 @mixin link-focus-shadow() {

package/scss/common/layout/_rightmenu.scss

@@ -1,11 +1,11 @@
 .layout-rightmenu-button {
-    background: linear-gradient(271.89deg, rgba(70,82,104,1), rgba(115,130,161,1));
+    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));
+        background: linear-gradient(271.89deg, rgba(70, 82, 104, 0.5), rgba(115, 130, 161, 0.5));
         border-color: transparent;
     }
 }
@@ -51,7 +51,7 @@
             text-align: center;
             display: block;
             margin-top: 1.25rem;
-            margin-bottom: .25rem;
+            margin-bottom: 0.25rem;
         }
     }
 
@@ -64,7 +64,7 @@
 
             &.in-progress {
                 .task-number {
-                    color: #FC6161;
+                    color: #fc6161;
                 }
             }
 
@@ -82,7 +82,7 @@
             .task-name {
                 display: block;
                 color: $textColor;
-                margin-top: .75rem;
+                margin-top: 0.75rem;
             }
         }
     }