@mediusinc/mng-commons 0.2.4 → 0.2.8

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;
             }
         }
     }

package/scss/common/layout/_topbar.scss

@@ -37,7 +37,7 @@
             border-radius: 6px;
             background-color: $topbarIconBg;
             color: $topbarTextColor;
-            @include transition(color .3s);
+            @include transition(color 0.3s);
 
             &:hover {
                 color: $topbarTextHoverColor;
@@ -75,7 +75,7 @@
                     width: 36px;
                     height: 36px;
                     margin: 0 0.4rem;
-                    padding: .75rem .5rem;
+                    padding: 0.75rem 0.5rem;
                     border-radius: $borderRadius;
 
                     &:hover {
@@ -85,7 +85,7 @@
 
                     .topbar-icon {
                         font-size: 1.5rem;
-                        @include transition(color .3s);
+                        @include transition(color 0.3s);
                     }
 
                     .topbar-item-name {
@@ -130,7 +130,7 @@
                     right: 0;
                     display: none;
                     min-width: 12rem;
-                    animation-duration: .5s;
+                    animation-duration: 0.5s;
                     list-style-type: none;
                     margin: 0;
                     z-index: 1;
@@ -153,7 +153,9 @@
                             margin-right: 8px;
                         }
 
-                        i, img, span {
+                        i,
+                        img,
+                        span {
                             vertical-align: middle;
                         }
 

package/scss/common/layout/_typography.scss

@@ -1,4 +1,9 @@
-h1, h2, h3, h4, h5, h6 {
+h1,
+h2,
+h3,
+h4,
+h5,
+h6 {
     margin: 1.5rem 0 1rem 0;
     font-family: inherit;
     font-weight: 600;
@@ -35,8 +40,8 @@ h6 {
 }
 
 mark {
-    background: #FFF8E1;
-    padding: .25rem .4rem;
+    background: #fff8e1;
+    padding: 0.25rem 0.4rem;
     border-radius: $borderRadius;
     font-family: monospace;
 }
@@ -44,13 +49,13 @@ mark {
 blockquote {
     margin: 1rem 0;
     padding: 0 2rem;
-    border-left: 4px solid #90A4AE;
+    border-left: 4px solid #90a4ae;
 }
 
 hr {
     border-top: solid $dividerColor;
     border-width: 1px 0 0 0;
-    margin: 1rem 0; 
+    margin: 1rem 0;
 }
 
 p {
@@ -60,4 +65,4 @@ p {
     &:last-child {
         margin-bottom: 0;
     }
-}
+}

package/scss/common/layout/_utils.scss

@@ -1,6 +1,6 @@
 /* Utils */
 .clearfix:after {
-    content: " ";
+    content: ' ';
     display: block;
     clear: both;
 }

package/scss/common/layout/_widgets.scss

@@ -20,8 +20,8 @@
         height: 32px;
         width: 70px;
         border-radius: 6px;
-        padding: .5em;
-        margin-top: .5em;
+        padding: 0.5em;
+        margin-top: 0.5em;
         margin-right: 12px;
 
         i {
@@ -41,7 +41,7 @@
 
     &.widget-overview-box-1 {
         .overview-badge {
-            background-color: #FC6161;
+            background-color: #fc6161;
             box-shadow: 0px 6px 20px rgba(252, 97, 97, 0.3);
         }
     }
@@ -49,14 +49,14 @@
     &.widget-overview-box-2 {
         .overview-badge {
             margin-right: 12px;
-            background-color: #0BD18A;
+            background-color: #0bd18a;
             box-shadow: 0px 6px 20px rgba(11, 209, 138, 0.3);
         }
     }
 
     &.widget-overview-box-3 {
         .overview-badge {
-            background-color: #00D0DE;
+            background-color: #00d0de;
             box-shadow: 0px 6px 20px rgba(0, 208, 222, 0.3);
         }
     }
@@ -76,7 +76,7 @@
                 }
 
                 i {
-                    margin-left: .5rem;
+                    margin-left: 0.5rem;
                 }
             }
         }
@@ -115,7 +115,7 @@
 
         .header-icons {
             i {
-                margin-left: .5rem;
+                margin-left: 0.5rem;
             }
         }
     }
@@ -129,7 +129,8 @@
         }
 
         .p-timeline-event-content {
-            p, h6 {
+            p,
+            h6 {
                 margin: 0;
             }
 
@@ -145,7 +146,7 @@
 
         .custom-marker {
             border-radius: 50%;
-            padding: .25rem;
+            padding: 0.25rem;
             width: 24px;
             height: 24px;
             text-align: center;
@@ -185,7 +186,7 @@
                     width: 24px;
                     height: 24px;
                     border-radius: 4px;
-                    margin-right: .5rem;
+                    margin-right: 0.5rem;
                 }
             }
         }
@@ -202,7 +203,7 @@
                 align-items: center;
 
                 i {
-                    margin-left: .5rem;
+                    margin-left: 0.5rem;
                 }
             }
         }
@@ -242,7 +243,7 @@
                 }
 
                 .person-info {
-                    margin-left: .5rem;
+                    margin-left: 0.5rem;
 
                     .amount {
                         font-size: 18px;
@@ -268,7 +269,7 @@
 
             .actions {
                 i {
-                    margin-left: .5rem;
+                    margin-left: 0.5rem;
                 }
             }
         }
@@ -287,7 +288,7 @@
         }
 
         p {
-            margin-left: .5rem;
+            margin-left: 0.5rem;
             color: $textThirdColor;
             font-size: 12px;
             line-height: 1rem;
@@ -305,7 +306,7 @@
         .rate {
             font-size: 13px;
             line-height: 1rem;
-            color: #0BD18A;
+            color: #0bd18a;
 
             i {
                 font-size: 12px;
@@ -321,7 +322,7 @@
         margin-top: 1.5rem;
         min-height: 235px;
         position: relative;
-        color: #FC6161;
+        color: #fc6161;
         display: flex;
         justify-content: space-between;
 
@@ -348,14 +349,14 @@
 
             &.success {
                 span:first-child {
-                    color: #0BD18A;
+                    color: #0bd18a;
                 }
 
                 .p-progressbar {
                     box-shadow: 0px 0px 10px rgba(11, 209, 138, 0.3);
 
                     .p-progressbar-value {
-                        background-color: #0BD18A;
+                        background-color: #0bd18a;
                     }
                 }
             }
@@ -368,7 +369,7 @@
                 background-color: $progressBarBg;
 
                 .p-progressbar-value {
-                    background-color: #FC6161;
+                    background-color: #fc6161;
                     box-shadow: 0px 0px 10px rgba(252, 97, 97, 0.3);
                 }
             }

package/scss/common/layout/menu/_menu_common.scss

@@ -68,11 +68,11 @@
                 &.layout-root-menuitem {
                     > div {
                         padding-left: 1.5rem;
-                        margin-bottom: .5rem;
+                        margin-bottom: 0.5rem;
                         font-size: 12px;
 
                         > .layout-menuitem-text {
-                            font-size: .857rem;
+                            font-size: 0.857rem;
                             font-weight: 600;
                             text-transform: uppercase;
                         }
@@ -82,7 +82,7 @@
                 > a {
                     display: flex;
                     align-items: center;
-                    padding: .5rem 1rem;
+                    padding: 0.5rem 1rem;
                     cursor: pointer;
                     user-select: none;
                     border-radius: 8px;
@@ -117,13 +117,13 @@
 
                     li {
                         ul {
-                            padding: 0 0 .25rem;
+                            padding: 0 0 0.25rem;
                             overflow: hidden;
                         }
                     }
 
                     > li {
-                        margin-top: .2rem;
+                        margin-top: 0.2rem;
 
                         &.layout-root-menuitem {
                             > a {
@@ -168,7 +168,7 @@
                     padding: 6px;
 
                     > a {
-                        padding: .75rem 1.25rem;
+                        padding: 0.75rem 1.25rem;
                     }
                 }
             }

package/scss/common/layout/menu/_menu_overlay.scss

@@ -29,7 +29,7 @@
                             padding: 6px;
 
                             > a {
-                                padding: .75rem 1rem;
+                                padding: 0.75rem 1rem;
                             }
                         }
                     }

package/scss/common/layout/menu/_menu_sidebar.scss

@@ -81,7 +81,8 @@
 
                     .layout-inline-menu {
                         .layout-inline-menu-action {
-                            .layout-inline-menu-text, .layout-inline-menu-icon {
+                            .layout-inline-menu-text,
+                            .layout-inline-menu-icon {
                                 visibility: visible;
                             }
 
@@ -113,7 +114,6 @@
                         overflow: hidden;
 
                         > li {
-
                             .layout-menuitem-root-text {
                                 display: none;
                             }
@@ -147,7 +147,7 @@
                                 cursor: pointer;
 
                                 > span {
-                                    margin: 0 .5rem;
+                                    margin: 0 0.5rem;
                                     margin-left: 1rem;
                                     visibility: hidden;
                                     white-space: nowrap;
@@ -160,7 +160,7 @@
                                     &.layout-submenu-toggler {
                                         @include transition(transform $transitionDuration);
                                         margin-left: auto;
-                                        font-size:12px ;
+                                        font-size: 12px;
                                         visibility: hidden;
                                     }
                                 }
@@ -205,7 +205,8 @@
 
                 .layout-inline-menu {
                     .layout-inline-menu-action {
-                        .layout-inline-menu-text, .layout-inline-menu-icon {
+                        .layout-inline-menu-text,
+                        .layout-inline-menu-icon {
                             white-space: nowrap;
                             visibility: hidden;
                         }

package/scss/common/layout/menu/_menu_slim.scss

@@ -82,7 +82,7 @@
                                     min-height: 32px;
 
                                     .layout-menuitem-text {
-                                        margin-left: .5rem;
+                                        margin-left: 0.5rem;
                                     }
 
                                     > span {
@@ -97,7 +97,6 @@
                                 }
                                 @include nested-submenu-indents(8, 2, 8);
                             }
-
                         }
                     }
                 }
@@ -111,7 +110,7 @@
                     }
 
                     .layout-inline-menu-action-panel {
-                        padding: 0 .5rem;
+                        padding: 0 0.5rem;
                         padding-left: 1.5rem;
 
                         .layout-inline-menu-action-item {

package/scss/common/layout/menu/_menu_static.scss

@@ -10,7 +10,7 @@
                 border-radius: 6px;
                 background-color: $topbarIconBg;
                 color: $topbarTextColor;
-                @include transition(color .3s);
+                @include transition(color 0.3s);
 
                 &:hover {
                     color: $topbarTextHoverColor;

package/scss/common/layout/menu/_menu_theme.scss

@@ -134,7 +134,6 @@
                 .layout-menu-container {
                     .layout-menu {
                         > li {
-
                             &.layout-root-menuitem {
                                 > div {
                                     color: $rootMenuItemTextColor;
@@ -156,7 +155,8 @@
             }
         }
 
-        &.layout-overlay, &.layout-sidebar {
+        &.layout-overlay,
+        &.layout-sidebar {
             .layout-menu-wrapper {
                 background: $menuBg;
 
@@ -176,7 +176,6 @@
                                 background: $overlayMenuActiveBg;
 
                                 > a {
-
                                     i {
                                         color: $rootMenuItemTextColor;
                                     }

package/scss/common/theme/designer/_colors.scss

@@ -1,18 +1,17 @@
 :root {
-  @if variable-exists(colors) {
-    @each $name, $color in $colors {
-        @for $i from 0 through 5 {
-            @if ($i == 0) {
-                --#{$name}-50:#{tint($color, (5 - $i) * 19%)};
+    @if variable-exists(colors) {
+        @each $name, $color in $colors {
+            @for $i from 0 through 5 {
+                @if ($i == 0) {
+                    --#{$name}-50: #{tint($color, (5 - $i) * 19%)};
+                } @else {
+                    --#{$name}-#{$i * 100}: #{tint($color, (5 - $i) * 19%)};
+                }
             }
-            @else {
-                --#{$name}-#{$i * 100}:#{tint($color, (5 - $i) * 19%)};
-            }
-        }
 
-        @for $i from 1 through 4 {
-            --#{$name}-#{($i + 5) * 100}:#{shade($color, $i * 15%)};
+            @for $i from 1 through 4 {
+                --#{$name}-#{($i + 5) * 100}: #{shade($color, $i * 15%)};
+            }
         }
     }
-  }
 }

package/scss/common/theme/designer/_common.scss

@@ -1,5 +1,5 @@
 * {
-	box-sizing: border-box;
+    box-sizing: border-box;
 }
 
 .p-component {
@@ -13,7 +13,8 @@
     transition-duration: $transitionDuration;
 }
 
-.p-disabled, .p-component:disabled {
+.p-disabled,
+.p-component:disabled {
     opacity: $disabledOpacity;
 }
 
@@ -37,4 +38,4 @@
     &:focus {
         @include focused();
     }
-}
+}