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

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

@@ -0,0 +1,281 @@
+/*------------------------------------------------------------------
+[10. Modals]
+*/
+.modal{
+	.close {
+	    position: absolute;
+	    right: 25px;
+	    top: 15px;
+	}
+	.close:focus {
+		outline:0;
+	}
+	.modal-dialog{
+		transition: all .2s !important;
+	}
+    .modal-content{
+    	border: 1px solid #f2f6f7;
+    	border-radius:3px;
+    	box-shadow:none;
+    }
+	.modal-header {
+	    text-align: center;
+	    border-bottom: 0;
+	    padding: 25px 25px 0 25px;
+		position: relative;
+		flex-direction: column;
+		align-items: flex-start;
+	    p {
+	        color: #8b91a0;
+	    }
+	}
+	.modal-body {
+	    box-shadow: none;
+	    padding: 25px;
+	    padding-top: 0;
+	    white-space: normal;
+	}
+	.modal-footer {
+	    border-top: none;
+	    box-shadow: none;
+	    margin-top: 0;
+	    padding: 25px;
+	    padding-top: 0;
+	}
+	.drop-shadow{
+		box-shadow:0 0 9px rgba(191,191,191,.36) !important;
+	}
+	&.fade{
+		opacity: 1 !important;
+		&.stick-up{
+			.modal-dialog{
+				@include translate3d(0,-100%,0);
+				margin-top: -5px;
+			}
+			// &.in{
+			// 	.modal-dialog{
+			// 		@include translate3d(0,0,0);
+			// 	}	
+			// }
+			&.show{
+				.modal-dialog{
+					@include translate3d(0,0,0);
+				}	
+			}
+		}
+
+		&.slide-up{
+			height: 100%;
+		  /* 	top: auto; */
+
+			// &.in{
+	  // 			.modal-dialog{
+			// 		@include translate3d(0,0,0);
+			// 	}
+			// }
+			&.show{
+	  			.modal-dialog{
+					@include translate3d(0,0,0);
+				}
+			}
+			&.disable-scroll{
+				overflow: hidden;
+			}
+			.modal-dialog{
+				display: table;
+				height: 100%;
+				@include translate3d(0,75%,0);
+			}
+			.modal-content-wrapper{
+				display: table-cell;
+				vertical-align: middle;
+			}
+		}
+		&.center-scale{
+			.modal-dialog {
+				display: table;
+				height: 100%;
+			}
+			.modal-content{
+				display: table-cell;
+				vertical-align: middle;
+				border: 0;
+				background: transparent;
+				.modal-header{
+					border-bottom: 0px;
+				}
+			}
+			// &.in{
+	  // 			.modal-dialog{
+	  // 				opacity: 1;
+			// 		@include scale(1);
+			// 	}
+			// }
+			&.show{
+	  			.modal-dialog{
+	  				opacity: 1;
+					@include scale(1);
+				}
+			}
+			.modal-dialog{
+				opacity: 0;
+				@include scale(0.6);
+			}
+		}
+		&.fill-in{
+			background-color: rgba(255, 255, 255, 0);
+			@include transition(background-color .3s);
+			& > .close{
+				opacity: 0.6;
+				z-index: 9999;
+				& > i{
+					font-size: 16px;
+				}
+			}
+			.modal-dialog {
+				display: table;
+				height: 100%;
+			}
+			.modal-content{
+				display: table-cell;
+				vertical-align: middle;
+				border: 0;
+				background: transparent;
+				.modal-header{
+					border-bottom: 0px;
+				}
+			}
+			// &.in{
+			// 	background-color: rgba(255, 255, 255, 0.85);
+	  // 			.modal-dialog{
+	  // 				opacity: 1;
+			// 		@include scale(1);
+			// 	}
+			// }
+			&.show{
+				background-color: rgba(255, 255, 255, 0.85);
+	  			.modal-dialog{
+	  				opacity: 1;
+					@include scale(1);
+				}
+			}
+			.modal-dialog{
+				opacity: 0;
+				@include scale(0.6);
+			}
+		}
+		&.slide-right{
+			.close{
+				position: absolute;
+				top:0;
+				right: 0;
+				margin-right: 10px;
+				z-index: 10;
+			}
+			// &.in{
+	  // 			.modal-dialog{
+			// 		@include translate3d(0,0,0);
+			// 	}
+			// }
+			&.show{
+	  			.modal-dialog{
+					@include translate3d(0,0,0);
+				}
+			}
+			.modal-dialog{
+				position: absolute;
+				right: 0;
+				margin:0;
+				height: 100%;
+				@include translate3d(100%,0,0);
+				.modal-content-wrapper{
+					height: 100%;
+				}
+				.modal-content{
+					height: 100%;
+				}
+				.modal-body{
+					background-color: #fff;
+				}
+			}
+			.modal-content{
+				border-radius: 0px;
+			}
+		}
+	}
+}
+.fill-in-modal{
+	.modal-backdrop{
+		background-color: transparent;
+	}
+}
+.modal-backdrop{
+	opacity: 0;
+	  @include transition(opacity 0.2s linear);
+	// &.in{
+	// 	opacity: 0.30;
+	// }
+	&.show{
+		opacity: 0.30;
+	}
+}
+
+/* Responsive Handlers: Modals
+------------------------------------
+*/
+
+@media (min-width: 992px){
+	.modal-lg {
+		width: 900px;
+	}
+}
+
+@media (max-width: 768px){
+	.modal{
+		&.fill-in{
+			.modal-dialog {
+				width: calc(100% - 20px);
+			}
+		}
+		&.slide-up{
+			.modal-dialog {
+				width: calc(100% - 20px);
+			}
+		}
+	}
+}
+@media (min-width: 768px){
+	.modal{
+		&.stick-up{
+			.modal-dialog{
+			margin: -5px auto;
+			}
+		}
+		&.slide-up{
+			.modal-dialog {
+				margin: 0 auto;
+			}
+		}
+		&.fill-in{
+			.modal-dialog {
+				margin: 0 auto;
+			}
+		}
+		.modal-content{
+			box-shadow: none;
+		}
+		.modal-dialog {
+		    width: 600px;
+		}
+		.modal-sm {
+		    width: 300px;
+		}
+		.modal-sm {
+		    min-width: auto;
+		}
+	}
+}
+
+@media (min-width: 576px){
+	
+}

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

@@ -0,0 +1,32 @@
+/*------------------------------------------------------------------
+[29. Print]
+*/
+
+@media print{
+	.header, 
+	.page-sidebar, 
+	.quickview-wrapper, 
+	.overlay {
+		display: none;
+	}
+	.page-container{
+		padding-left: 0;
+	}
+	.page-content-wrapper {
+		.content{
+		border-top:0;
+			.card {
+				border: none;
+				.card-body{
+				padding: 0;
+				}
+			}
+		}
+	}
+	[class^='padding-'],
+	[class*='padding-'], 
+	.table tbody tr td{
+		padding: 10px;
+	}
+
+}

package/src/lib/styles/pg/modules/_secondary-sidebar.scss

@@ -0,0 +1,243 @@
+/* Secondary Sidebar
+------------------------------------
+*/
+//TODO : add this to theme var
+$secondary-sidebar-width : 250px;
+
+$_sidebar-background-color : blend-multiply($color-menu-light, $color-menu-light);
+$sidebar-background-color : mix($_sidebar-background-color , #000, 80%);
+.toggle-secondary-sidebar{
+    display: none;
+}
+
+.secondary-sidebar {
+    background: $sidebar-background-color;
+    width: $secondary-sidebar-width;
+    float: left;
+    padding-left: 47px;
+    height: 100%;
+    position: fixed;
+    &.not-fixed{
+        position: inherit;
+    }
+    &.open{
+        position: fixed;
+        visibility: hidden;
+        display: block;
+    }
+    .btn-compose {
+        font-family: 'Montserrat';
+        font-size: 13px;
+        font-weight: normal;
+        letter-spacing: 0.02em;
+        text-transform: uppercase;
+    }
+    .menu-title {
+        color: rgba($color-menu-light, .70);
+        font-size: 10.8px;
+        font-family: 'Montserrat';
+        font-weight: normal;
+        letter-spacing: 0.03em;
+        text-transform: uppercase;
+    }
+        //Offset by 25px;
+        padding: 20px 0;
+        .menu-title{
+            padding-left:30px;
+        }
+        //With Multiple LEVELS
+        & > ul > li{
+            padding-left:0;
+        }
+        ul{
+            li{
+                a{
+                    @include flexbox();
+                    padding-left: 30px;
+                    padding-right: 30px;
+                    & > .icon-thumbnail{
+                        @include flexbox();
+                        height: auto;
+                        width: auto;
+                        line-height: auto;
+                        & > svg{
+                            -webkit-align-self: center;
+                            -ms-flex-item-align: center;
+                            -ms-grid-row-align: center;
+                            align-self: center;
+                        }
+                    }
+                    &.active{
+                        color: $color-master-dark;
+                    }
+                    & > .title{
+                        width: 100%;
+                        -webkit-align-self: center;
+                        -ms-flex-item-align: center;
+                        -ms-grid-row-align: center;
+                        align-self: center;
+                        &:after{
+                            display: none;
+                        }
+                    }
+                    & > .badge{
+                        -webkit-align-self: center;
+                        -ms-flex-item-align: center;
+                        -ms-grid-row-align: center;
+                        align-self: center;
+                    }
+                    & > .arrow {
+                        &:before {
+                            float: right;
+                            display: inline;
+                            font-size: 16px;
+                            font-family: FontAwesome;
+                            height: auto;
+                            content: "\f104";
+                            font-weight: 300;
+                            text-shadow: none;
+                            @include transition(all 0.12s ease);
+                        }
+                    }
+                }
+                ul {
+                    margin: 0;
+                    padding-top: 7px;
+                    padding-bottom: 5px;
+                    padding-left:7px;
+                    li{
+                        padding: 0;
+                        margin-bottom: 9px;
+                        margin-top: 5px;
+                    }
+                }
+                &.open{
+                    & > a{
+                        color: $color-master-dark;
+                        .arrow:before {
+                            @include rotate(-90deg);
+                        }
+                    }
+                    & > ul{
+                        display: block;
+                    }
+                }
+                & > ul{
+                    display: none;
+                }
+            }
+        }
+    .main-menu {
+        padding-left: 0;
+        & > li{
+            list-style: none;
+
+            &.active{
+                & > a{
+                    color: $color-complete;
+                    &:hover{
+                       color: $color-complete;
+                    }
+                    & > .title{
+                        position: relative;
+                        &:after{
+                            background: $color-complete;
+                            border-radius: 50%;
+                            content: "";
+                            height: 7px;
+                            position: absolute;
+                            right: -14px;
+                            top: 6.5px;
+                            width: 7px;
+                        }
+
+                    }
+                }
+            }
+            a{
+                font-size: 14px;
+                color: $color-menu-light;
+                line-height: 37px;
+                &:hover{
+                    color: #fff;
+                }
+                & > .title{
+                    i{
+                            margin-right: 6px;
+                            opacity: .9;
+                        }
+                }
+            }
+        }
+    }
+    .sub-menu{
+        margin-left: 23px;
+        li{
+            list-style: none;
+            padding: 0;
+            &.active{
+                a{
+                    color: #fff !important;
+                }
+            }
+            a{
+                color: rgba($color-menu-light,.89);
+                line-height: 25px;
+                &:hover{
+                    color: #fff;
+                }
+            }
+        }
+    }
+    .sub-menu li a, .main-menu li a {
+
+        .badge {
+           background: transparent;
+           font-size: 13px;
+           color: $color-menu-light;
+           line-height: 25px;
+        }
+    }
+    &.light{
+        background-color: #fff;
+        border-right: 1px solid $form-control-border-color;
+        .menu-title {
+            color: fade($color-menu-light, 60%);
+            opacity: 1;
+        }
+        .icon-thumbnail{
+            background-color: transparent;
+        }
+        .main-menu {
+            li{
+                a{
+                    &:hover{
+                         color: $color-master-dark;
+                    }
+
+                }
+                &.active{
+                   & >  a{
+                        color: $color-master-dark;
+                    }
+                }
+            }
+        }
+        .sub-menu{
+            margin-top: 5px;
+            li{
+                &.active{
+                    a{
+                        color: $color-master-dark !important;
+                    }
+                }
+                a{
+                    color: fade($color-menu-light,60%);
+                    &:hover{
+                        color: $color-master-dark;
+                    }
+                }
+            }
+        }
+    }
+}