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

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

@@ -0,0 +1,344 @@
+/* Horizontal Menu
+------------------------------------
+*/
+.horizontal-app-menu {
+    @include flexbox();
+    @include flex-column();
+    &.fixed-header{
+        overflow: hidden;
+        .header {
+            position: relative;
+        }
+        .page-container{
+        overflow: scroll;
+        overflow-x: hidden;
+        -webkit-overflow-scrolling: touch;
+        }
+    }
+    //Header
+    .header {
+        display: block;
+        height: auto;
+        border-bottom: none;
+        background-color:$color-menu;
+        color: $color-menu-light;
+        -webkit-flex-shrink: 0;
+        -ms-flex-negative: 0;
+        flex-shrink: 0;
+        .header-inner{
+            height: 60px;
+            background-color:transparent;
+            position: relative;
+            color: $color-menu-light;
+        }
+        .header-lg-height{
+            height: $header-lg-height;
+        }
+        .header-md-height{
+            height: $header-md-height;
+        }
+        .header-sm-height{
+            height: $header-sm-height;
+        }
+        .search-link {
+            color: $color-menu-light;
+        }
+        .header-inner {
+            .brand.inline {
+                position: relative;
+                border-right:1px solid #40444d;
+                padding-right:15px;
+                margin-right:0px;
+                width: auto;
+                & > img {
+                    width: auto;
+                }
+            }
+        }
+        .notification-list {
+            border: none;
+        }
+        .title-bar{
+            padding-bottom: 18px;
+        }
+        .page-title{
+            color: $color-menu-light;
+            font-size: 21px;
+            line-height: 21px;
+            font-weight: normal;
+            margin-bottom: 0;
+            margin-left:15px;
+        }
+        .pg{
+            color: $color-menu-light;
+            display: block;
+        }
+        .dropdown-menu{
+            z-index: 1000 !important;
+        }
+    }
+    //Main Menu Bar
+    .menu-bar{
+        @include flexbox();
+        @include flex-row();
+        position: relative;
+        color: $color-menu-light;
+        z-index: 500;
+        //Globals Nav Items
+        ul{
+            margin: 0;
+            padding: 0;
+            list-style: none;
+            border-radius:3px;
+            li  a {
+                .arrow{
+                    position: relative;
+                    @include flex-inline();
+                    align-items:center;
+                    padding-left:15px;
+                    width: 23px;
+                    &:before{
+                        font-size: 16px;
+                        font-family: FontAwesome;
+                        height: auto;
+                        content: "\f104";
+                        font-weight: 300;
+                        text-shadow: none;
+                        position: relative;
+                        top: 2px;
+                        @include rotate(-90deg);
+                        @include transition(all 0.12s ease);
+                    }
+                }
+            }
+            li{
+                line-height: 24px;
+                .sub-menu{
+                    padding: 0;
+                    left:50%;
+                    top: 0;
+                    position: absolute;
+                    visibility: hidden;
+                    opacity: 0;
+                    min-width: calc(100% + 4px);
+                    padding: 18px $menu-padding;
+                    background: #fff;
+                    z-index: 1;
+                    position: absolute;
+                    @include box-shadow(0px 0px 16px 0px rgba(0, 0, 0, 0.08));
+                    @include translate3d(15px, 0, 0);
+                    @include transition(all 0.15s ease-in);
+                    li a{
+                        min-width: 50px;
+                        width: 100%;
+                        padding: 4px 0;
+                        white-space: nowrap;
+                        overflow: hidden;
+                        text-overflow: ellipsis;
+                        display: block;
+                     }
+                }
+                &:hover{
+                    & > .sub-menu{
+                        visibility: visible;
+                        opacity: 1;
+                        @include translate3d(34%, 0, 0);
+                    }
+                }
+                &.more{
+                    .pg{
+                       position: relative; 
+                       top:4px;    
+                    }
+                }
+            }
+        }
+        //Level One
+        & > ul {
+            @include flexbox();
+    -webkit-box-orient: horizontal;
+    -webkit-box-direction: normal;
+        -ms-flex-flow: row nowrap;
+            flex-flow: row nowrap;
+            & > li {
+        -webkit-box-flex: 1;
+            -ms-flex: 1 0 auto;
+                flex: 1 0 auto;
+                @include flex-inline();
+                align-items:center;
+                padding: 0;
+                position: relative;
+                &:hover:not(.open){
+                    & > a{
+                        color: $color-menu-link-hover;
+                    }
+                }
+                &:first-child{
+                    & > a{
+                        padding-left:0;
+                    }
+                }
+                &:last-child{
+                    & > a {
+                        padding-right:0;
+                    }
+                }
+                & > a{
+                    padding: 0 20px;
+                }
+                & > ul{
+                    display: none;
+                    opacity: 0;
+                    list-style: none;
+                    border: 0;
+                    top: -7px;
+                    left:-4px;
+                    min-width: calc(100% + 4px);
+                    padding: 0 $menu-padding;
+                    padding-top: 60px;
+                    padding-bottom: 18px;
+                    background: #fff;
+                    z-index: 1;
+                    position: absolute;
+                    @include box-shadow(0px 0px 16px 0px rgba(0, 0, 0, 0.08));
+                }
+                &.open{
+                    //Level two and below
+                    & > ul{
+                        display: block;
+                        &:before{
+                            content: '';
+                            position: absolute;
+                            height: 1px;
+                            top: $navbar-width + 7px;
+                            width: calc(100% - #{$menu-padding} * 2);
+                            background-color: $form-control-border-color;
+                        }
+                        & > li{
+                            padding-left: 0;
+                            @include translate3d(0, -10px, 0);
+                            opacity: 0;
+                            transition: all 0.18s ease;
+                            border-bottom: none;
+                            &  > a{
+                                min-width: 50px;
+                                width: 100%;
+                                padding: 4px 0;
+                                white-space: nowrap;
+                                overflow: hidden;
+                                text-overflow: ellipsis;
+                                @include flexbox();
+                                -webkit-box-pack: justify;
+                                -webkit-justify-content: space-between;
+                                -ms-flex-pack: justify;
+                                justify-content: space-between;
+                                & > .arrow:before{
+                                    @include rotate(180deg);
+                                }
+                            }
+                            &:last-child{
+                                &  > a{
+                                padding-bottom: 0;
+                                }
+                            }
+                        }
+
+                    }
+                    & > a{
+                        @include translate3d(0, -10px, 0);
+                        opacity: 0;
+                        transition: all 0.18s ease !important;
+                    }
+                }
+                &.opening{
+                    & > ul{
+                        opacity: 1;
+                        &  > li {
+                             @include translate3d(0, 0, 0);
+                             opacity: 1;
+                        }
+                    }
+                    & > a{
+                        position: relative;
+                        z-index: 10;
+                        @include translate3d(0, 0, 0);
+                        opacity: 1;
+                    }
+                }
+                &.closing{
+                    & > ul{
+                        opacity: 0;
+                        &  > li {
+                            @include translate3d(0, -10px, 0);
+                            opacity: 0;
+                        }
+                    }
+                    & > a{
+                        @include translate3d(0, -10px, 0);
+                        opacity: 0;
+                    }
+                }
+            }
+            li > a{
+                color: $color-menu-light;
+            }
+        }
+    }
+    .secondary-sidebar{
+        margin-left:-25px;
+        border: 1px solid $form-control-border-color;
+    }
+    //Add 30px offset
+    .inner-content{
+      margin-left:225px;
+    }
+    .content{
+        -ms-flex: 1;
+        -webkit-box-flex: 1;
+        -moz-box-flex: 1;
+        -ms-box-flex: 1;
+        box-flex: 1;
+    }
+    .page-container{
+        padding-left:0;
+        .page-content-wrapper .content{
+            padding-top: 0;
+        }
+    }
+    .ghost-nav-dropdown{
+        top: -7px;
+        left:-4px;
+        background: #fff;
+        z-index: 1000;
+        position: absolute;
+        @include box-shadow(0px 0px 16px 0px rgba(0, 0, 0, 0.08));
+        @include border-radius(3px);
+        transition: all 0.18s ease-in;
+    }
+
+    //calendar overwrites
+    .calendar {
+        .calendar-header{
+            background-color: transparent;
+            padding-left:0;
+            position: relative;
+            left:-20px;
+        }
+        .options{
+            padding-left:0;
+        }
+        .months .month:first-child{
+            padding-left:0;
+        }
+        .weeks-wrapper{
+            margin-left:0;
+            padding-left:0;
+        }
+        .week-dragger{
+            margin-left:0;
+        }
+        .calendar-container .grid{
+            overflow: hidden;
+        }
+    }
+}

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

@@ -0,0 +1,11 @@
+input[type="text"].jqx-input,
+input[type="password"].jqx-input {
+	min-height: 16px;
+	min-width: 16px;
+	margin: 0px;
+	border: none !important;
+	font-size: 13px;
+	padding: 3px;
+	padding-left: 3px;
+	padding-right: 3px;
+}

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

@@ -0,0 +1,180 @@
+/*------------------------------------------------------------------
+[1. Layouts]
+*/
+html {
+	height: 100%;
+}
+/* Body Triggers for layout options
+------------------------------------------------------------------
+*/
+body {
+	height: 100%;
+	margin: 0;
+	padding: 0;
+	background-color: $color-master-lightest;
+	-moz-osx-font-smoothing: grayscale;
+	&.fixed-header {
+		.header {
+			position: fixed;
+			left: 0;
+			top: 0;
+		}
+	}
+	&.no-header {
+		.page-container .page-content-wrapper .content {
+			padding-top: 0px;
+		}
+		.header {
+			border-bottom-color: transparent;
+		}
+	}
+	&.dashboard {
+		background: $dashboard-background;
+		.page-container {
+			background: $dashboard-background;
+		}
+	}
+	&.menu-pin {
+		.overlay {
+			padding-left: 0;
+			.overlay-brand {
+				margin-left: 0;
+			}
+		}
+	}
+}
+
+/* Page Container
+------------------------------------
+*/
+.page-container {
+	width: 100%;
+	height: 100%;
+	
+	padding-left: $layout-sidepanel-width-collapsed;
+	.page-content-wrapper {
+		min-height: 100%;
+		position: relative;
+		.content {
+			/* Content holder */
+			z-index: 10;
+			padding-top: $layout-header-height;
+			padding-bottom: 44px;
+			min-height: 100%;
+			@include transition(all 0.3s ease);
+			&.full-width {
+				width: 100%;
+			}
+			.content-inner {
+				display: inline-block;
+				vertical-align: top;
+				height: 100%;
+				padding-left: 30px;
+				position: relative;
+			}
+			&:only-child {
+				padding-bottom: 0px;
+			}
+			&.overlay-footer {
+				padding-bottom: 0px;
+			}
+		}
+		.footer {
+			/* Footer */
+			width: auto;
+			position: absolute;
+			left: 0;
+			right: 0;
+			bottom: 0;
+			@include transition(left 0.3s ease);
+			&.fixed {
+				position: fixed;
+				background-color: #fff;
+			}
+		}
+	}
+}
+.page-title {
+	margin-top: 0px;
+}
+
+.group-container {
+	white-space: nowrap !important;
+	.single-group {
+		vertical-align: top;
+		display: inline-block;
+		white-space: normal;
+	}
+}
+
+.jumbotron {
+	position: relative;
+	overflow: hidden;
+	display: block;
+	padding: 0;
+	.inner {
+		position: relative;
+		z-index: 2;
+	}
+	&.lg {
+		height: 600px;
+	}
+
+	background-color: $color-master-lighter;
+	.cover-photo {
+		width: 100%;
+		height: inherit;
+		overflow: hidden;
+		@include transition(opacity 0.3s ease);
+		background-size: cover;
+		background-color: $color-success;
+	}
+	h1 {
+		font-size: 44px;
+	}
+}
+
+/* Other overides */
+
+.container-fluid {
+	// padding-left: 30px;
+	// padding-right: 30px;
+	position: relative;
+}
+
+.copyright {
+	padding: 12px 0; // 25px 0;
+	border-top: 1px solid fade($color-master-light, 70%);
+}
+
+.pager {
+	margin: 0;
+}
+
+.pb-36 {
+	padding-bottom: 36px;
+}
+
+.pb-41 {
+	padding-bottom: 41px;
+}
+
+.pb-44 {
+	padding-bottom: 44px;
+}
+
+.pb-60 {
+	padding-bottom: 60px;
+}
+
+.pb-66 {
+	padding-bottom: 66px;
+}
+
+.pb-81 {
+	padding-bottom: 81px;
+}
+
+.pb-96 {
+	padding-bottom: 96px;
+}

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

@@ -0,0 +1,92 @@
+/*------------------------------------------------------------------
+[23. Lock Screen]
+*/
+
+.lock-container{
+    margin-left: auto;
+    margin-right: auto;
+    width: 600px;
+}
+
+.lock-screen-wrapper {
+    .credentials {
+        margin-top: -84px;
+        position: absolute;
+        top: 50%;
+        .thumbnail-wrapper {
+            width: 53px;
+            height: 53px;
+        }
+        .logged {
+            opacity: .21;
+            margin-top: -5px !important;
+        }
+        .name {
+            opacity: .69;
+            margin-top: -5px !important;
+            font-size: 36px;
+            height: 45px;
+            overflow: hidden;
+        }
+    }
+    .terms-wrapper {
+        & > div {
+            display: table;
+        }
+        .terms {
+            display: table-cell;
+            vertical-align: middle;
+        }
+        .logo-terms {
+            width: 60px;
+            height: 60px;
+            border-radius: 15px;
+            text-align: center;
+            position: relative;
+            .brand {
+                left: 50%;
+                margin-left: -21px;
+                margin-top: -5px;
+                position: absolute;
+                top: 50%;
+            }
+        }
+    }
+}
+
+/* Responsive Handlers : Lockscreen 
+------------------------------------
+*/
+@media (max-width: 767px) {
+    .lock-container{
+        width: 80%;
+    }
+    .lock-screen-wrapper {
+        .credentials {
+            form {
+                margin-top: 15px;
+            }
+        }
+    }
+}
+
+@media (max-width: 480px) {
+
+    .lock-screen-wrapper {
+        .credentials {
+            margin: 0;
+            position: static;
+            margin-top: 100px;
+            width: 100%;
+            float: left;
+            clear: both;
+            & > div {
+                text-align: center;
+            }
+            .thumbnail-wrapper {
+                float: none;
+                margin: 0 auto;
+            }
+        }        
+    }
+}

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

@@ -0,0 +1,62 @@
+/*------------------------------------------------------------------
+[22. Login]
+*/
+
+
+.login-wrapper{
+	height: 100%;
+	overflow: hidden;
+	& > * {
+		height: 100%;
+	}
+	.bg-pic{
+		position: absolute;
+		width: 100%;
+		overflow: hidden;
+		& > .img-holder{
+			height: 100%;
+			width: 100%;
+			opacity: 0.6;
+			background-size: cover;
+		}
+	}
+	.login-container{
+		width: 470px;
+		display: block;
+		position: relative;
+		float:left;
+	}
+	.bg-caption{
+		width: 500px;
+	}
+}
+.register-container{
+	width: 550px;
+	margin: auto;
+	height: 100%;
+}
+
+
+/* Responsive handlers : Login
+------------------------------------
+*/
+
+@media (max-width: 768px) {
+	.login-wrapper{
+		.login-container{
+			width: 100%;
+		}
+	}
+	.register-container{
+		width: 100%;
+		padding: 15px;
+	}
+}
+
+@media only screen and (max-width : 321px) {
+	.login-wrapper{
+		.login-container{
+			width: 100%;
+		}
+	}
+}