@natec/mef-dev-ui-kit 0.0.3 → 0.0.6

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

@@ -0,0 +1,197 @@
+// Pages Default Theme
+// --------------------------------------------------
+// Copyright Reserved Revox - 2014
+// --------------------------------------------------
+
+@import '../designe-colors.scss';
+
+$base-img-url: "../img" ;
+$assets-url: "../../assets" ;
+
+// Global Color
+// --------------------------------------------------
+// Base Grey Guided Color * change only $base-light
+// --------------------------------------------------
+
+//Base Grey Color
+$color-master: $Light-Gray-1 ;
+
+// Lighter Grey colors
+$color-master-light:mix($color-master, #fff, 16%) ;
+$color-master-lighter:mix($color-master, #fff, 9.5%) ;
+$color-master-lightest:mix($color-master, #fff, 3%) ;
+
+// Darker Grey colors
+$color-master-dark:mix($color-master, #000, 45%) ;
+$color-master-darker:mix($color-master, #000, 27%) ;
+$color-master-darkest:mix($color-master, #000, 18%) ;
+
+$color-white: #fff ;
+$color-black: #000 ;
+
+$color-success: $Green ;
+$color-complete : #48b0f7 ;
+$color-primary: #6d5cae ;
+$color-warning: #f8d053 ;
+$color-danger: $Red ;
+$color-info: $Dark-Gray-1;
+
+$base-font-family: Lato-Regular, Lato-Bold, montserrat-regular, montserrat-bold, montserrat-light;
+
+// Menu Vars
+// --------------------------------------------------
+//Menu Animation Curve
+$menu-bezier:.05, .74, .27, .99 ;
+$menu-icon-size:40px ;
+$color-menu :#2b303b ;
+$color-menu-dark :mix($color-menu, #000, 77%) ;
+$color-menu-darker :mix($color-menu, #000, 90%) ;
+
+//Generating Menu font color
+$menu-mix-temp : mix($color-menu, #fff, 92%) ;
+$menu :blend-hardlight($menu-mix-temp,#fff) ;
+$color-menu-light :$menu !global;
+//Menu Font Color
+$color-menu-link-hover:#fff ;
+
+// Body
+// --------------------------------------------------
+$body-background: $color-master-lightest ;
+$body-color: $color-master ;
+$body-font-family : $base-font-family ;
+$body-font-size : 13px ;
+
+// Layout
+// --------------------------------------------------
+$layout-header-height:60px ;
+$layout-mobile-header-height:48px ;
+$layout-mobile-logo-scale:0.8 ;
+$layout-sidepanel-width-collapsed : 70px ;
+$layout-sidepanel-width:280px ;
+$layout-sidepanel-pin-width:250px ;
+$layout-right-quickview-width: 285px ;
+$layout-user-profile-margin:25px ;
+$layout-container-fixed-lg: 1700px ;
+
+$layout-gutter-sm : 5px ;
+
+//Horizontal Dropdown
+//---------------------------------------------------
+$navbar-width:45px;
+$menu-padding:25px;
+
+$header-lg-height:75px;
+$header-md-height:51px;
+$header-sm-height:50px;
+
+// Panels
+$panel-border-color: rgba(0, 0, 0, 0.07) ;
+$panel-padding: 20px ;
+$panel-heading-padding: $panel-padding $panel-padding 7px $panel-padding ;
+$panel-heading-min-height: 48px ;
+$panel-condensed-heading-padding: 13px 13px 0 13px ;
+$panel-condensed-body-padding: 13px ;
+$panel-condensed-heading-min-height: 48px ;
+
+//Forms
+$form-group-height: 54px ;
+$form-control-border-color: $Light-Gray-3 ;
+
+//Dashboard
+$dashboard-background : #f5f5f5 ;
+
+//Mixing Color varriable for creating both light and dark colors
+$mix-percentage-dark: 81% ;
+$mix-percentage-darker: 60% ;
+$mix-percentage-light: 80% ;
+$mix-percentage-lighter: 20% ;
+
+//Lighter colors
+$color-success-light: mix($color-success, $color-white, $mix-percentage-light) ;
+$color-success-lighter: mix($color-success, $color-white, $mix-percentage-lighter) ;
+
+$color-complete-light: mix($color-complete, $color-white, $mix-percentage-light) ;
+$color-complete-lighter: mix($color-complete, $color-white, $mix-percentage-lighter) ;
+
+$color-primary-light: mix($color-primary, $color-white, $mix-percentage-light) ;
+$color-primary-lighter: mix($color-primary, $color-white, $mix-percentage-lighter) ;
+
+$color-warning-light: mix($color-warning, $color-white, $mix-percentage-light) ;
+$color-warning-lighter: mix($color-warning, $color-white, $mix-percentage-lighter) ;
+
+$color-danger-light: mix($color-danger, $color-white, $mix-percentage-light) ;
+$color-danger-lighter: mix($color-danger, $color-white, $mix-percentage-lighter) ;
+
+$color-info-light: mix($color-info, $color-white, $mix-percentage-light) ;
+$color-info-lighter: mix($color-info, $color-white, $mix-percentage-lighter) ;
+
+//Darker colors
+$color-success-dark: mix($color-success, $color-black, $mix-percentage-dark) ;
+$color-success-darker: mix($color-success, $color-black, $mix-percentage-darker) ;
+
+$color-complete-dark: mix($color-complete, $color-black, $mix-percentage-dark) ;
+$color-complete-darker: mix($color-complete, $color-black, $mix-percentage-darker) ;
+
+$color-primary-dark: mix($color-primary, $color-black, $mix-percentage-dark) ;
+$color-primary-darker: mix($color-primary, $color-black, $mix-percentage-darker) ;
+
+$color-warning-dark: mix($color-warning, $color-black, $mix-percentage-dark) ;
+$color-warning-darker: mix($color-warning, $color-black, $mix-percentage-darker) ;
+
+$color-danger-dark: mix($color-danger, $color-black, $mix-percentage-dark) ;
+$color-danger-darker: mix($color-danger, $color-black, $mix-percentage-darker) ;
+
+$color-info-dark: mix($color-info, $color-black, $mix-percentage-dark) ;
+$color-info-darker: mix($color-info, $color-black, $mix-percentage-darker) ;
+
+// Email colors
+// $sidebar-background-color : $color-menu-dark ;
+$_sidebar-background-color: blend-multiply($color-menu-light, $color-menu-light);
+$sidebar-background-color : mix($_sidebar-background-color , #000, 80%);
+
+$secondary-sidebar-width : 250px;
+// Components
+// --------------------------------------------------
+//## Define common padding and border radius sizes and more. Values based on 14px text and 1.428 line-height (~20px to start).
+
+//$padding-base-vertical:     6px ;
+$padding-base-horizontal:   17px ;
+
+// $padding-lg-vertical:    28px ;
+$padding-lg-horizontal:  28px ;
+
+// $padding-sm-vertical:    5px ;
+$padding-sm-horizontal:  16px ;
+
+$padding-xs-vertical:       2px ;
+$padding-xs-horizontal:     9px ;
+
+$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;
+
+
+$zIndex-navbar : $zIndex-5;
+$zIndex-sidebar : $zIndex-10;
+$zIndex-tooltips : $zIndex-10;

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

@@ -0,0 +1,275 @@
+//Core Libs
+
+@use '../designe-colors.scss' as c;
+@import '../icons.scss';
+@import '../fonts.scss';
+
+@import 'toaster.scss';
+@import '_color.scss';
+@import '_mixins.scss';
+@import 'modules/_z_index.scss';
+
+//Theme Var
+@import '_var.scss';
+
+@import "_dropdown.scss";
+@import "modules/_layout.scss";
+@import "modules/_sidebar.scss";
+@import "modules/_secondary-sidebar.scss";
+@import "modules/_header.scss";
+
+
+//UI Components
+@import "modules/_typography.scss";
+@import "modules/_jqx.scss";
+@import "modules/_breadcrumb.scss";
+@import "modules/_buttons.scss";
+@import "modules/_tabs_accordian.scss";
+@import "modules/_modals.scss";
+
+//Pages Components
+@import "modules/_timepicker.scss";
+@import "modules/_select.scss";
+@import "modules/_switch.scss";
+@import "modules/_tabs.scss";
+@import "modules/_uploader.scss";
+
+//View
+@import "modules/_view.scss";
+
+//Cards
+@import "modules/_cards.scss";
+
+//Form Elements
+@import "modules/_form_elements.scss";
+
+//Login
+@import "modules/_login.scss";
+
+//Lock screen
+@import "modules/_lock_screen.scss";
+
+//Z-indexes
+@import "modules/z_index.scss";
+
+//Misc
+@import "modules/_misc.scss";
+
+//Print
+@import "modules/_print.scss";
+
+//Misc Helpers
+@import "modules/_misc.scss";
+
+//Responsive Classes
+@import "_responsive.scss";
+
+//Utils
+@import "utils.scss";
+
+//Vendor
+@import "vendor/typehead.scss";
+@import "vendor/ng-datatable.scss";
+@import "vendor/ngx-google-map.scss";
+
+
+$base-img-url: "/assets/images" !global;
+$assets-url: "/assets" !global;
+
+.notification-block-header {
+	border-bottom: 1px solid #e2e6ea;
+	margin: 0;
+	padding: 7px 0 7px 30px;
+
+	span {
+		color: #c3b9b9;
+		font-weight: 600;
+		text-transform: uppercase;
+	}
+}
+
+.notification-body>.item {
+	overflow-y: scroll;
+	height: 100%;
+	padding: 0;
+}
+
+.msg {
+	.point {
+		width: 10px;
+		display: inline-block;
+		background: #ecc80f;
+		height: 10px;
+		border-radius: 6px;
+	}
+
+	.message {
+		padding-left: 5px;
+		color: black;
+	}
+}
+
+#scrollbar-panel::-webkit-scrollbar-track {
+	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+	border-radius: 10px;
+	background-color: #f5f5f5;
+}
+
+#scrollbar-panel::-webkit-scrollbar {
+	width: 8px;
+	background-color: #f5f5f5;
+}
+
+#scrollbar-panel::-webkit-scrollbar-thumb {
+	border-radius: 10px;
+	-webkit-box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.3);
+	background-color: #121212;
+}
+
+.lh-24 {
+	line-height: 24px;
+}
+
+.w-100 {
+	width: 100%;
+}
+
+.border-none {
+	border: none !important;
+}
+
+.p-l-50 {
+	padding-left: 50px;
+}
+
+.p-t-15 {
+	padding-top: 15px;
+}
+
+.header-menu>.item {
+	background: #212020f2;
+	margin-right: 0;
+	margin-left: 0;
+}
+
+.paragraph-4 {
+	color: #c3b9b9;
+	font-weight: 600;
+}
+
+.not-close {
+	color: #c3b9b9;
+	font-weight: 600;
+	cursor: pointer;
+}
+
+a.btn-primary {
+
+	color: white !important;
+
+}
+
+.lock-btn{
+	position: absolute;
+	right: -1px;
+	top: 15px;
+}
+
+.header{
+	border: 0;
+}
+
+.page-container{
+	background-color: white;
+	overflow-y: hidden;
+}
+
+.gray-bg{
+	background-color: c.$Light-Gray-2 ;
+	& > .header{
+		background-color: c.$Light-Gray-2 ;
+
+	}
+}
+.dark-bg{
+	& > .header{
+	background-color: #010101;
+	}
+}
+.show-mobile{
+	@media screen and (min-width: 960px) {
+		visibility: hidden;
+	}
+}
+
+.ql-container {
+    height: 240px;
+}
+
+a:hover *{
+    color: c.$Red !important;    
+}
+
+.avatar-img-lg{
+    max-width: -webkit-fill-available; 
+    max-height: 150px; 
+    border-radius: 50%
+}
+
+.ngx-pagination .current {
+    background: #4D4D4D !important;
+}
+
+.jqx-enableselect{
+    overflow: auto !important;
+}
+
+.p-multiselect-panel .p-multiselect-items .p-multiselect-item.p-highlight{
+    background-color: c.$Light-Gray-3;    
+    color: #333333
+}
+
+.p-checkbox .p-checkbox-box.p-highlight{
+    background: c.$Dark-Gray-1; 
+}
+
+.p-highlight .p-checkbox .p-checkbox-box{
+    border: 0;
+}
+
+.p-multiselect{
+    border: 1px solid #f3f3f3;
+}
+
+input[type=checkbox]{
+    accent-color: c.$Dark-Gray-2;
+}
+
+.p-inputtext{
+    border: 2px solid #F3F3F3;
+    width: 100%;
+}
+.p-inputtext:enabled:hover {
+    border: 2px solid #F3F3F3;
+}
+
+.p-inputtext:enabled:focus{
+    border: 2px solid #F3F3F3;
+    box-shadow: none;
+}
+
+.p-autocomplete{
+    width: 100%;
+}
+
+.p-autocomplete-panel{
+    border: 0;
+}
+
+a:focus, a:hover, a:active {
+    color: c.$Red;
+}
+
+.ngx-datatable.material .datatable-body .datatable-row-detail {
+    background: #fff;
+}

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

@@ -0,0 +1,66 @@
+/* Breadcrumbs
+------------------------------------
+*/
+.breadcrumb {
+  font-family: montserrat-regular;
+  -webkit-border-radius: 0px;
+  -moz-border-radius: 0px;
+  border-radius: 0px;
+  box-shadow: none;
+  background-color: transparent;
+  padding: 7px;
+  margin: 0;
+  border: none;
+  text-transform: uppercase;
+  &.breadcrumb-alt {
+    padding: 8px 0;
+    text-transform: none;
+    a {
+      letter-spacing: normal;
+      color: #000;
+      font-size: 12px !important;
+    }
+    & > .breadcrumb-item,
+    & > .breadcrumb-item.active {
+      letter-spacing: normal;
+      opacity: 0.46;
+      color: #000;
+      font-size: 12px !important;
+    }
+  }
+  a {
+    margin-left: 5px;
+    margin-right: 5px;
+    font-size: 10.5px !important;
+    letter-spacing: 0.06em;
+    font-weight: 400;
+    color: #7b7d82;
+  }
+  .breadcrumb-item {
+    float: left;
+    padding-left: 0px;
+  }
+  & > .breadcrumb-item {
+    & + .breadcrumb-item {
+      &:before {
+        padding: 0 5px;
+        color: #515050;
+        font-family: FontAwesome;
+        content: "\f105";
+        font-size: 12px;
+        font-weight: bold;
+      }
+    }
+    &.active {
+      font-weight: 500;
+      color: #0090d9;
+      margin-left: 5px;
+      margin-right: 5px;
+      font-size: 10.5px !important;
+      letter-spacing: 0.06em;
+      &:before {
+        padding-right: 10px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,65 @@
+@use '../../designe-colors.scss' as v;
+
+
+@mixin _button($main_color, $hover_color, $text_color, $hover_text_color, $hover_color_opacity) {
+    padding-left: 2em ;
+    padding-right: 2em ;
+    min-height: 36px ;
+    border: 0 ;
+    border-radius: 5px ;
+    color: $text_color ;
+    background-color: $main_color ;
+    font-family: montserrat-regular ;
+    font-weight: 500 ;
+    font-size: 14px ;
+    line-height: 24px ;
+    &:hover{
+        color: $hover_text_color ;
+        background-color: $hover_color ;
+        opacity: $hover_color_opacity;
+    }
+}
+
+@mixin _button_status($main_color, $hover_color, $text_color, $hover_text_color) {
+    padding-left: 2em ;
+    padding-right: 2em ;
+    min-height: 23px ;
+    border: 0 ;
+    border-radius: 5px ;
+    color: $text_color ;
+    background-color: $main_color ;
+    font-family: Lato-regular ;
+    font-size: 11px ;
+    line-height: 13px ;
+    &:hover{
+        color: $hover_text_color ;
+        background-color: $hover_color ;
+    }
+}
+.btn-primary {
+    @include _button(v.$Dark-Gray-2, v.$Light-Gray-1, #fff, #fff, 1);
+}
+
+.btn-secondary {
+    @include _button(v.$Light-Gray-2, v.$Light-Gray-2, #000, v.$Red, 1);
+}
+
+.btn-success {
+    @include _button(v.$Green, v.$Green, #fff, #fff, 0.8);
+}
+
+.btn-danger {
+    @include _button(v.$Red, v.$Dark-Gray-2, #fff, #fff, 1);
+}
+
+.btn-light {
+    @include _button(v.$White,v.$White, #000, v.$Red, 1);
+}
+
+.btn-status-primary {
+    @include _button_status(v.$Light-Gray-2, v.$Light-Gray-3, #000, v.$Red);
+}
+
+.btn-status-danger {
+    @include _button_status(v.$Light-Gray-2, v.$Light-Gray-3, v.$Red, #000);
+}