@natec/mef-dev-ui-kit 0.0.2 → 0.0.5

package/src/lib/styles/pg/modules/_uploader.scss

@@ -0,0 +1,226 @@
+.upload-list{
+    .list-group-item{
+      padding: 7px 5px;
+      border: 0;
+      font-size: 12px;
+    }
+    .list-group-item-inner{
+      width: 100%;
+      display: flex;
+    }
+    .upload-error{
+      color:$color-danger;
+    }
+    .progress-circle-indeterminate{
+      width: 20px;
+      height: 20px;
+    }
+    i{
+      display:flex;
+      &:before{
+        align-self:center;
+      }
+    }
+    .img-thumbnail{
+      width: 48px;
+      height: 48px;
+      img{
+        width: 100%;
+      }
+    }
+    .list-item-name{
+      align-self: center;
+      margin-left:10px;
+    }
+    .item-progress{
+      width: 100%;
+      display: flex;
+      margin-top: 14px;
+      height: 3px;
+      flex-direction: column;
+    }
+  }
+  
+  .dropzone{
+    .upload-btn{
+      border: 1px solid rgba(0,0,0,0.03);
+      min-height: 360px;
+      background: rgba(0,0,0,0.03);
+      &:focus{
+        outline: 0;
+      }
+    }
+    .upload-drag-container{
+      display: flex;
+      width: 100%;
+      height: 360px;
+      justify-content: center;
+      flex-direction: column;
+    }
+  }
+  .upload-select-picture-card{
+    border: 1px dashed $color-master-light;
+    width: 96px;
+    height: 96px;
+    border-radius: 4px;
+    background-color:$color-master-lightest;
+    text-align: center;
+    cursor: pointer;
+    -webkit-transition: border-color .3s ease;
+    transition: border-color .3s ease;
+    display: inline-flex;
+    vertical-align: top;
+    margin:5px;
+    .upload{
+      width: 100%;
+      height: 100%;
+      &:focus{
+        outline: 0;
+       }
+    }
+    &:hover{
+      border-color:$color-master;
+    }
+    &:focus{
+     outline: 0;
+    }
+  }
+
+//Gallery List View
+.upload-list-picture{
+  margin-top: 10px;
+  .list-group-item{
+    border: 1px solid $form-control-border-color;
+    margin-bottom: 5px;
+  }
+  .img-thumbnail{
+    border: 0;
+    overflow: hidden;
+  }
+}
+
+//Gallery View Grid
+.upload-list-picture-card {
+  display: inline-flex;
+  flex-direction: row;
+  .list-group-item{
+    padding: 5px 5px;
+    border: 0;
+    margin: 4px;
+    font-size: 12px;
+    width: 96px;
+    height: 96px;
+    overflow: hidden;
+    display: flex;
+    border-radius: 2px;
+    justify-content: center;
+    flex-direction: column;
+    border: 1px solid $form-control-border-color;
+    .list-group-item-inner{
+      position: relative;
+    }
+    .list-item-name{
+      display: none;
+    }
+    &.upload-uploading{
+      justify-content: flex-start;
+      .upload-list-item-uploading-text{
+        display: none;
+      }
+      .pg-close{
+        opacity: 0.5;
+      }
+      .item-progress{
+        margin: 0;
+        flex: 1;
+        height: auto;
+        justify-content: center;
+      }
+    }
+  }
+
+  .upload-list-item-actions{
+      position: absolute;
+      visibility: hidden;
+      opacity: 0;
+      left: 0;
+      right: 0;
+      display: flex;
+      flex-direction: row;
+      justify-content: center;
+      bottom: 0;
+      top: 0;
+      background: rgba(0,0,0,0.3);
+      transition: opacity 0.2s ease;
+      border-radius: 3px;
+      a,i{
+          align-self: center;
+          padding: 0 4px;
+          font-size: 14px;
+          color:rgba(255,255,255,.76);
+          cursor: pointer;
+      }
+  }
+  .img-thumbnail{
+    width: 100%;
+    height: 100%;
+    padding: 0;
+    border: 0;
+  }
+  .list-group-item{
+      &:hover{
+          .upload-list-item-actions{
+              opacity: 1;
+              visibility: visible;
+          }
+      }
+  }
+}
+.pic-placeholder{
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  height: 100%;
+  justify-content: center;
+  &:focus{
+    outline: 0;
+  }
+}
+  @keyframes uploadAnimateIn {
+    from {
+      height: 0;
+      margin: 0;
+      opacity: 0;
+      padding: 0;
+    }
+  }
+  
+  @keyframes uploadAnimateOut {
+    to {
+      height: 0;
+      margin: 0;
+      padding: 0;
+      opacity: 0;
+    }
+  }
+  
+  @keyframes uploadAnimateInlineIn {
+    from {
+      width: 0;
+      height: 0;
+      margin: 0;
+      opacity: 0;
+      padding: 0;
+    }
+  }
+  
+  @keyframes uploadAnimateInlineOut {
+    to {
+      width: 0;
+      height: 0;
+      margin: 0;
+      padding: 0;
+      opacity: 0;
+    }
+  }
+  

package/src/lib/styles/pg/modules/_view.scss

@@ -0,0 +1,127 @@
+/*------------------------------------------------------------------
+[2. View Ports]
+*/
+.view-port{
+	position: relative;
+	width: 100%;
+	height: 100%;
+	display: block;
+	white-space: nowrap;
+    word-spacing: 0;
+    font-size: 0;
+	overflow: hidden;
+    & > *{
+      font-size: initial;
+    }
+	.navbar{
+		border-radius: 0;
+		padding-left: 0;
+		margin-bottom:0;
+		border-left: 0;
+		display: table;
+		width: 100%;
+		top: 0;
+		border-top: 0;
+		padding: 0;
+		border-bottom: 1px solid #e7e7e7;
+		.navbar-inner{
+			display: table-cell;
+			height: 50px;
+			vertical-align: middle;
+		}
+		.action{
+			position: absolute;
+			top:0;
+			line-height: 50px;
+			z-index: 1;
+			&.pull-right{
+				right: 0;
+			}
+		}
+        .action{
+            position: absolute;
+            top:0;
+            line-height: 50px;
+            z-index: 1;
+            &.pull-right{
+                right:0;
+            }
+        }
+		.view-heading{
+			font-size: 15px;
+			text-align: center;
+		}
+		& > p{
+			line-height: 12px;
+			font-size: 12px;
+			margin: 0;
+		}
+		&.navbar-sm{
+			min-height: 35px;
+			.navbar-inner{
+				height: 35px;
+			}
+			.action{
+				line-height: 35px;
+			}
+		}
+	}
+	.view{
+		display: inline-block;
+		width: 100%;
+		height: 100%;
+		vertical-align: top;
+		@include backface-visibility(hidden);
+		-webkit-perspective: 1000;
+		@include transition(all 0.4s ease);
+		&:first-child{
+			&:before{
+				position: absolute;
+				content: '';
+				width: 100%;
+				height: 100%;
+				background-color: #000;
+				opacity:0;
+				@include transition(opacity 0.2s linear);
+				z-index: -1
+			}
+		}
+		&:only-child{
+			margin: 0;
+		}
+	}
+	&.from-top{
+		& > .view{
+			&:last-child{
+				@include translate3d(-100%,0,0);
+			}
+		}
+	}
+	&.push{
+		& > .view{
+			&:first-child{
+				@include translate3d(-100%,0,0);
+			}
+			&:last-child{
+				@include translate3d(-100%,0,0);
+			}
+		}
+	}
+	&.push-parrallax{
+		& > .view{
+			&:first-child{
+				@include transition(all 400ms cubic-bezier(0.1,.7,.1,1));
+				@include translate3d(-25%,0,0);
+				&:before{
+					opacity:0;
+					z-index: 100;
+				}
+			}
+			&:last-child{
+				@include transition(all 400ms cubic-bezier(0.1,.7,.1,1));
+				@include translate3d(-100%,0,0);
+				box-shadow:0 0 9px rgba(191,191,191,.36);
+			}
+		}
+	}
+}

package/src/lib/styles/pg/modules/_z_index.scss

@@ -0,0 +1,33 @@
+// Pages z-index values
+//
+// Define all the z-index values used throughout the theme,
+// in this file to prevent any conflicts that can arise by
+// using arbitrary values
+// --------------------------------------------------
+// Copyright Reserved Revox - 2014
+
+// z-index scale
+$zIndex-1:   100;
+$zIndex-2:   200;
+$zIndex-3:   300;
+$zIndex-4:   400;
+$zIndex-5:   500;
+$zIndex-6:   600;
+$zIndex-7:   700;
+$zIndex-8:   800;
+$zIndex-9:   900;
+$zIndex-10: 1000;
+
+//TODO: add all components
+// z-index applications
+
+
+$zIndex-sidebar : $zIndex-10;
+$zIndex-tooltips : $zIndex-10;
+$zIndex-quickview: $zIndex-10;
+@zIndex-horizontal-menu-mobile: @zIndex-10;
+$zIndex-notifications : $zIndex-9;
+$zIndex-navbar : $zIndex-8;
+$zIndex-dropdown : $zIndex-7;
+$zIndex-dropdownMask : $zIndex-6;
+$zIndex-portlet : $zIndex-6;

package/src/lib/styles/pg/toaster.scss

@@ -0,0 +1,22 @@
+@use '../designe-colors.scss' as c;
+@use '../fonts.scss';
+
+.toast-success{
+    background-color: c.$White;
+    background-image: url('/assets/images/check.png');
+    border: 1px solid c.$Green;
+    border-radius: 5px;
+    @extend .body-6;
+}
+
+.toast-error{
+    background-color: c.$White;
+    background-image: url('/assets/images/warning.png');
+    border: 1px solid c.$Red;
+    border-radius: 5px;
+    @extend .body-6;
+}
+
+.toast-container .ngx-toastr{
+    color: c.$Dark-Gray-1;
+}

package/src/lib/styles/pg/utils.scss

@@ -0,0 +1,32 @@
+.cdk-overlay-container{
+    pointer-events: none;
+    top: 0;
+    left: 0;
+    height: 100%;
+    width: 100%;
+    position: fixed;
+    z-index: 1900;
+}
+
+.cdk-overlay-backdrop, .cdk-overlay-pane {
+    position: absolute;
+    pointer-events: auto;
+    z-index: 1900;
+}
+
+.cdk-overlay-backdrop {
+    top: 0;
+    bottom: 0;
+    left: 0;
+    right: 0;
+    -webkit-tap-highlight-color: transparent;
+    -webkit-transition: opacity .4s cubic-bezier(.25,.8,.25,1);
+    transition: opacity .4s cubic-bezier(.25,.8,.25,1);
+    opacity: 0;
+}
+
+.cdk-overlay-backdrop, .cdk-overlay-pane {
+    position: absolute;
+    pointer-events: auto;
+    z-index: 1900;
+}

package/src/lib/styles/pg/vendor/ng-datatable.scss

@@ -0,0 +1,263 @@
+@use '../../designe-colors.scss' as c;
+@use '../../fonts.scss';
+
+.ngx-datatable {
+  &.table-stripped{
+    .datatable-body {
+      .datatable-body-row.datatable-row-even {
+        .datatable-body-cell{
+          background: $body-background
+        }
+      }
+    }
+  }
+  &.table-condensed{
+    .datatable-row-wrapper{
+      margin-top: 1px;
+    }
+    .datatable-body {
+      .datatable-body-row {
+        .datatable-body-cell{
+          padding-top: 12px;
+          padding-bottom: 12px;
+        }
+      }
+    } 
+  }
+  &.table-hover{
+    .datatable-body {
+      .datatable-body-row {
+          &:hover{
+            .datatable-body-cell{
+              background: $color-complete-lighter !important;
+            }
+          }
+          &.active{
+            .datatable-body-cell{
+              background: $color-warning-lighter !important;
+            }
+          }
+        }
+      }
+    }
+    .datatable-body .datatable-row-detail{
+      overflow-y:initial !important;
+    }
+    .datatable-body-cell-label{
+      width: 100%;
+    }
+    font-size: 13px;
+    .datatable-header {
+      height: unset !important;
+      .datatable-header-cell {
+        padding: .75rem;
+        text-transform: uppercase;
+        font-weight: 500;
+        font-family: montserrat;
+        font-size: 10.5px;
+        letter-spacing: .06em;
+        padding-top: 9px;
+        padding-bottom: 9px;
+        vertical-align: middle;
+        color:fade-out($color-master-dark, .65);
+        border-top: 0;
+        border-bottom: 1px solid rgba(230,230,230,.7);
+        //Height fix
+        max-height: 43px;
+        .datatable-header-cell-template-wrap{
+          position: relative;
+        }
+        &.sort-active{
+          color:$color-master-dark;
+        }
+        &.sortable{
+          .sort-btn{
+            display: block;
+            cursor: pointer;
+            position: absolute;
+            left: 0;
+            right: 0;
+            top: 0;
+            bottom: 0;
+            color:fade-out($color-master-dark, .65);
+            &:before {
+              font: normal normal normal 14px/1 pages-icon;
+              content: "\e62c";
+              position: absolute;
+              right: 0;
+              font-size: 12px;
+            }
+            &:after {
+              font: normal normal normal 14px/1 pages-icon;
+              content: "\e630";
+              position: absolute;
+              right: 0;
+              top: 7px;
+              font-size: 12px;
+            }
+            &.datatable-icon-up{
+                &:before {
+                color:$color-master-dark;
+                }
+                &:after{
+                  display: none
+                }
+            }
+            &.datatable-icon-down{
+                &:before {
+                  display: none;
+                }
+                &:after{
+                  color:$color-master-dark;
+                }
+            }
+          }
+        }
+        .datatable-header-cell-label {
+          line-height: 24px;
+        }
+      }
+      overflow: initial;
+      box-shadow:none;
+    }
+    .datatable-body {
+      .datatable-row-wrapper:first-child .datatable-body-row{
+        border-top:0;
+      }
+      .datatable-body-row {
+        vertical-align: top;
+        border-top: 1px solid rgba(230,230,230,.7);
+        &.active {
+          background: $color-warning-lighter;
+        }
+        .datatable-body-cell {
+          text-align: left;
+          vertical-align: top;
+          padding: 20px;
+          font-size: 13.5px;
+          background: #fff;
+        }
+      }
+      .btn-tag {
+        background: rgba(44,44,44,.07);
+        display: inline-block;
+        margin: 5px;
+        border-radius: 4px;
+        padding: 5px;
+        color: #62605a!important;
+      }
+    }
+    .datatable-footer {
+      color: $color-master;
+      font-size: 12px;
+      margin-top: -1px;
+      .page-count {
+        line-height: 50px;
+        height: 50px;
+        padding: 0 1.2rem;
+      }
+      .datatable-pager {
+        margin: 0 10px;
+        vertical-align: top;
+        ul {
+          padding: 5px 10px;
+          @include transition(opacity .3s ease);
+          li {
+            &:not(.disabled) {
+              &.active{
+                a {
+                opacity: 1;
+                font-weight: bold;
+                }
+              }
+              &:hover {
+                a {
+                  opacity: .65;
+                }
+              }
+            }
+          }
+        }
+        a {
+          height: 22px;
+          min-width: 26px;
+          line-height: 22px;
+          color: $color-master;
+          opacity: .35;
+          text-align: center;
+          font-size: 11px;
+        }
+        .datatable-icon-left:before{
+          content: "\e629";
+          top: 2px;
+          position: relative;
+        }
+        .datatable-icon-right:before{
+          content: "\e631";
+          top: 2px;
+          position: relative;
+        }
+        .datatable-icon-left,
+        .datatable-icon-skip,
+        .datatable-icon-right,
+        .datatable-icon-prev {
+          font: normal normal normal 14px/1 pages-icon;
+          font-size: 12px;
+          line-height: 27px;
+          padding: 0 3px;
+          
+        }
+      }
+    }
+    .table-inline{
+      margin-top: 13px;
+      margin-bottom: 13px;
+      background: transparent;
+      tr,td{
+      background: transparent;
+      font-weight: 600;
+      }
+    }
+    .table-inline {
+      td {
+          border: none;
+          text-align: left;
+      }
+    }
+  }
+
+  
+.ngx-datatable.fixed-header .datatable-header .datatable-header-inner .datatable-header-cell{
+  background-color: c.$Light-Gray-2;
+  border: 2px solid;
+  border-color: white;
+  font-family: montserrat-light;
+  font-weight: 300;
+  font-size: 11px;
+  line-height: 22px;
+  color: #000;
+
+}
+.ngx-datatable .datatable-header .datatable-header-cell .datatable-header-cell-template-wrap{
+  top: -4px;
+  left: -12px;
+  overflow-y: auto;
+  width: 120%;
+}
+.ngx-datatable.material .datatable-header{
+  border: 0 !important;
+}
+.ngx-datatable{
+  overflow: initial !important;
+  box-shadow:none !important;
+}
+
+.table-responsive{
+  overflow-x: clip !important;
+}
+/*.ngx-datatable .datatable-body-cell{
+  position: relative;
+}*/
+
+
+

package/src/lib/styles/pg/vendor/ngx-google-map.scss

@@ -0,0 +1,18 @@
+.map-controls {
+	position: absolute;
+	left: 50px;
+	top: 80px;
+	z-index: 1;
+}
+.horizontal-app-menu .map-controls {
+    left: 15px;
+    top: 15px;
+}
+@media (max-width: 480px){
+	.map-controls {
+		left: 10px;
+	}
+}
+ngui-map{
+    height: 100% !important;
+}