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

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

@@ -0,0 +1,259 @@
+/* Header
+------------------------------------
+*/
+.header {
+	position: relative;
+	display: -webkit-box;
+	display: -webkit-flex;
+	display: -ms-flexbox;
+	display: flex;
+	height: $layout-header-height;
+	width: 100%;
+	padding: 0 20px 0 0;
+	z-index: $zIndex-navbar;
+	background-color: #fff;
+	border-bottom: 1px solid fade($color-master-light, 70%);
+	-webkit-box-align: center;
+	-webkit-align-items: center;
+	-ms-flex-align: center;
+	align-items: center;
+	-webkit-box-pack: justify;
+	-webkit-justify-content: space-between;
+	-ms-flex-pack: justify;
+	justify-content: space-between;
+	a {
+		color: $color-master;
+		&:hover,
+		&:active,
+		&:focus {
+			color: $color-master;
+		}
+	}
+	//Used only in Boxed layout
+	.header-inner {
+		height: inherit;
+		display: -webkit-box;
+		display: -webkit-flex;
+		display: -ms-flexbox;
+		display: flex;
+		-webkit-box-align: center;
+		-webkit-align-items: center;
+		-ms-flex-align: center;
+		align-items: center;
+		-webkit-box-pack: justify;
+		-webkit-justify-content: space-between;
+		-ms-flex-pack: justify;
+		justify-content: space-between;
+	}
+	&.transparent {
+		background-color: transparent !important;
+	}
+	.brand {
+		vertical-align: middle;
+		width: $layout-sidepanel-width;
+		text-align: center;
+	}
+
+	.lang {
+		vertical-align: middle;
+		text-align: center;
+	}
+
+	.bubble {
+		border-radius: 100%;
+		height: 15px;
+		width: 15px;
+		background-color: $color-danger;
+		color: $color-white;
+		position: absolute;
+		top: -7px;
+		float: right;
+		right: -8px;    
+		font-family: Lato-Regular;
+		font-size: 13px;
+	}
+	.notification-list {
+		display: inline-block;
+		line-height: 23px;
+	}
+	.search-link {
+		display: inline-block;
+		margin-left: 15px;
+		color: $color-master;
+		opacity: 0.7;
+		font-size: 14px;
+		vertical-align: middle;
+		line-height: 12px;
+		font-family: $base-font-family;
+		i {
+			margin-right: 15px;
+			font-size: 16px;
+			vertical-align: middle;
+		}
+		&:hover {
+			opacity: 1;
+		}
+	}
+	.pg {
+		font-size: 16px;
+	}
+	ul {
+		li {
+			line-height: 12px;
+			vertical-align: middle;
+		}
+	}
+	.dropdown {
+		line-height: 12px;
+	}
+	.dropdown-menu {
+		margin-top: 10px;
+	}
+}
+/* Bootstrap navbar
+------------------------------------
+*/
+.navbar {
+	min-height: 50px;
+	position: relative;
+	margin-bottom: 20px;
+	border: 1px solid transparent;
+	top: -1px;
+}
+.navbar-nav > li {
+	& > a {
+		position: relative;
+		display: block;
+		padding: 10px 15px;
+		padding-top: 20px;
+		padding-bottom: 20px;
+	}
+}
+
+.nav > li > a {
+	padding: 10px 15px;
+}
+
+.navbar-default {
+	background-color: $color-white;
+	.navbar-nav > .active > a,
+	.navbar-default .navbar-nav > .active > a:hover,
+	.navbar-default .navbar-nav > .active > a:focus {
+		background-color: transparent;
+	}
+	.navbar-nav > .active > a,
+	.navbar-default .navbar-nav > .active > a:hover,
+	.navbar-default .navbar-nav > .active > a:focus {
+		background-color: transparent;
+	}
+}
+
+.navbar-toggle {
+	border-radius: 0;
+	background-color: transparent !important;
+}
+
+.navbar-default .navbar-nav > li > a {
+	color: $color-master;
+}
+
+.nav-collapse {
+	&.collapse {
+		height: 100% !important;
+	}
+}
+.navbar-center,
+.navbar-center > li {
+	float: none;
+	display: inline-block;
+	*display: inline; /* ie7 fix */
+	*zoom: 1; /* hasLayout ie7 trigger */
+	vertical-align: top;
+}
+
+.navbar-nav {
+	li a {
+		min-width: 50px;
+	}
+}
+
+/*** General tablets and phones ***/
+@media (max-width: 991px) {
+	.header {
+		padding: 0 15px;
+		width: 100%;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+		.header-inner {
+			text-align: center;
+			.mark-email {
+				left: 45px;
+				position: absolute;
+				top: 23px;
+			}
+			.quickview-link {
+				position: absolute;
+				right: 0;
+				top: 12px;
+			}
+		}
+		.brand {
+			width: auto;
+		}
+	}
+}
+
+@media (max-width: 767px) {
+	.header {
+		height: $layout-mobile-header-height;
+		.header-inner {
+			height: $layout-mobile-header-height;
+		}
+	}
+	.header .user-info-wrapper {
+		display: none;
+	}
+	.header .search-link {
+		height: 19px;
+		width: 16px;
+		overflow: hidden;
+	}
+}
+
+@media (max-width: 480px) {
+	.header {
+		width: 100%;
+		height: $layout-mobile-header-height;
+		border-bottom: 1px solid rgba(0, 0, 0, 0.07);
+		.header-inner {
+			height: $layout-mobile-header-height;
+			text-align: center;
+			.toggle-email-sidebar {
+				font-size: 16px;
+				top: 12px;
+			}
+			.mark-email {
+				left: 35px;
+				top: 14px;
+			}
+			.quickview-link {
+				top: 14px;
+			}
+		}
+		.dropdown-submenu {
+			top: 12px;
+		}
+	}
+}
+//Windows Rendering
+.windows {
+	.header .search-link {
+		font-size: 15px;
+	}
+}
+
+.m-t-10 {
+	margin-top: 10px;
+}
+/* END Header
+------------------------------------
+*/

package/src/lib/styles/pg/modules/_horizontal-layout.scss

@@ -0,0 +1,183 @@
+
+$hm-mobile-left-padding: 20px;
+$hm-mobile-right-padding: 32px;
+$hm-mobile-sub-height: 40px;
+
+
+@media (max-width:991px){
+  body.horizontal-menu-open{
+    .header{
+      z-index: $zIndex-quickview;
+    }
+  }
+  .horizontal-menu-backdrop{
+    background: rgba(0, 0, 0, .5);
+    position: fixed;
+    left:0;
+    right:0;
+    bottom: 0;
+    top: 0;
+    z-index: 0;
+    transition:opacity .3s ease;
+    display: none;
+  }
+    body.horizontal-app-menu{
+        .menu-bar{
+            position: fixed;
+            top: 0;
+            bottom: 0;
+            background-color: $color-menu;
+            width: 270px;
+            left:-270px;
+            overflow-y: auto;
+            -webkit-transition: -webkit-transform 400ms cubic-bezier($menu-bezier);
+            transition: transform 400ms cubic-bezier($menu-bezier);
+            -webkit-backface-visibility: hidden;
+            -ms-backface-visibility:hidden;
+            -webkit-perspective: 1000;
+            flex-direction: column;
+            z-index: 1;
+            &.open{
+                @include translate3d(100%,0,0);
+            }
+            &  > ul{
+                flex-flow: column nowrap;
+                overflow-x: hidden;
+                & > li:first-child,
+                & > li:last-child{
+                    a{
+                      padding-right: $hm-mobile-right-padding !important;
+                      padding-left: $hm-mobile-left-padding !important;
+                    }
+                }
+            }
+            ul {
+                width: 100%;
+                li{
+                    min-height: 45px;
+                    @include flexbox();
+                    flex-direction: column;
+                    &  > ul{
+                        padding: 0;
+                        overflow: hidden;
+                        margin-top: 6px;
+                        position: static;
+                        background: $color-menu-dark;
+                        opacity: 1;
+                        padding:12px 0 10px 10px;
+                        min-width: 0;
+                        left:0;
+                        box-shadow: none;
+                        &:before{
+                          display: none;
+                        }
+                        & > li {
+                          padding-left:0;
+                          min-height: $hm-mobile-sub-height;
+                          & > a {
+                            font-size: 13px;
+                            padding-top: 0 !important;
+                            padding-bottom: 0 !important;
+                            line-height: $hm-mobile-sub-height;
+                          }
+                        }
+                    }
+                    width: 100%;
+                    a{
+                        font-family: Arial, sans-serif;
+                        display: inline-block;
+                        padding-left: $hm-mobile-left-padding !important;
+                        padding-right: $hm-mobile-right-padding !important;
+                        min-height: 40px;
+                        line-height: 40px;
+                        font-size: 14px;
+                        clear: both;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        width: 100%;
+                        & > .arrow{
+                            float:right;
+                            @include rotate(90deg);
+                            transition: all 0.12s ease;
+                            transform-origin: 90% 50%;
+                            padding-left:17px;
+                            &.open{
+                              @include rotate(0);
+                            }
+                        }
+                    }
+                    &.active{
+                      border: none;
+                    }
+                    &.open{
+                      ul {
+                        li {
+                          opacity: 1;
+                          transform: none;
+                        }
+                      }
+                      & > a {
+                        opacity: 1;
+                        transform: none;
+                        color: #fff;
+                        padding-left: $hm-mobile-left-padding !important;
+                      }
+                    }
+                }
+            }
+            .search-link{
+              background: rgba($color-menu-light, .1);
+              display: block;
+              height: 54px;
+              width: 100%;
+              margin: 0;
+              padding-left: $hm-mobile-left-padding;
+              padding-right: $hm-mobile-left-padding;
+              color: $color-menu-light;
+              flex-shrink: 0;
+              margin-top: auto;
+              i{
+                margin: 0;
+              }
+            }
+            .toggle-sidebar{
+              width: 35px;
+              text-align: center;
+              margin:7px 10px 10px 8px;
+              padding: 10px;
+            }
+        }
+        &[data-pages-direction="slideRight"] {
+            right:0;
+        }
+        .header .header-sm-height{
+          height: 100%;
+        }
+        .ghost-nav-dropdown{
+          display: none;
+        }
+        .options{
+            padding-left:10px !important;
+        }
+    }
+
+}
+@media (max-width: 1400px){
+    .header {
+        .brand.inline::after {
+            top: -7px !important;
+        }
+    }
+}
+
+@media (min-width: 980px){
+    .horizontal-menu{
+        .page-content {
+            margin-left:0;
+            .content {
+                padding-top: 123px;
+            }
+        }
+    }
+}