keevo-components 1.8.494 → 1.8.495

package/src/lib/components/kv-layout/layout/kv-layout.component.scss

@@ -0,0 +1,416 @@
+@import "../../keevo-components-styles.scss";
+
+
+::ng-deep body {
+  // display: initial;
+  margin: 0px !important;
+}
+
+.full-container{
+  background: rgb(var(--kv-kc-background-system), 1);
+  width: 100vw;
+  height: 100vh;
+  overflow-x: hidden;
+  overflow-y: hidden;
+}
+
+
+::ng-deep p-sidebar .p-sidebar {
+  position: relative !important;
+  background: rgb(var(--kv-background-card), 1);
+  box-shadow: 0 0 .8rem 0 rgba(0, 0, 0, 0.1);
+  border: 1px solid rgb(var(--kv-color-system), .1);
+  margin-left: .5rem;
+  margin-top: .5rem;
+  border-radius: .5rem;
+  height: calc(100vh - 1rem);
+}
+
+.page-content {
+  background: none;
+  margin-left: .5rem;
+  backdrop-filter: blur(50px);
+}
+
+::ng-deep .card-container {
+  background: rgb(var(--kv-kc-background-system), 1);
+  backdrop-filter: blur(50px);
+  border: none;
+  box-shadow: none;
+  &::-webkit-scrollbar {
+    width: 6px;
+
+    &:hover {
+      background-color: rgba(222, 222, 222, 0.75);
+    }
+  }
+
+  &::-webkit-scrollbar-thumb {
+    border-radius: 4px;
+    background-color: transparent;
+  }
+
+  &:hover::-webkit-scrollbar-thumb {
+    border-left: 2px solid white;
+    background-color: rgba(0, 0, 0, 0.5);
+  }
+
+  &::-webkit-scrollbar-track {
+    border-left: 2px solid white;
+    background-color: rgba(222, 222, 222, 0.75);
+  }
+
+  overflow-x: hidden;
+}
+
+.side-menu-item {
+  transition: all .2s ease-in-out;
+  cursor: pointer;
+  border-radius: .5rem;
+  padding-left: .5rem;
+  padding-right: .5rem;
+
+  &:hover {
+    background: rgb(var(--kv-color-system), .1);
+    color: rgb(var(--kv-color-system), 1);
+
+  }
+
+  label{
+    width: 100%;
+    cursor: pointer;
+  }
+}
+
+::ng-deep .p-menu{
+  background: rgb(var(--kv-background-card), 1);
+  border: 1px solid rgb(var(--kv-color-system), .1);
+  border-radius: .5rem;
+  
+  & .p-submenu-header{
+    color: rgb(var(--kv-color-system), 1);
+    padding: 0;
+    margin: 0;
+    & label{
+      opacity: .7;
+    }
+  }
+
+  & .p-divider{
+    margin: 0;
+    padding: 0;
+    margin-top: .2rem;
+  }
+}
+
+.appendMenuDiv{
+  position: absolute;
+  top: -2.2rem;
+  left: 1.6rem;
+}
+
+::ng-deep .p-divider{
+  margin: 0;
+  padding: 0;
+  margin-top: .5rem;
+  margin-bottom: .5rem;
+}
+
+::ng-deep .p-overlaypanel-content{
+  padding: 0;
+}
+
+
+
+//=========================================================================================================
+
+// .material-icons {
+//   font-family: "Material Icons";
+//   font-weight: normal;
+//   font-style: normal;
+//   font-size: 1em;
+//   display: inline-block;
+//   width: 1em;
+//   height: 1em;
+//   line-height: 1;
+//   text-transform: none;
+//   letter-spacing: normal;
+//   word-wrap: normal;
+//   white-space: nowrap;
+//   direction: ltr;
+//   -webkit-font-smoothing: antialiased;
+//   text-rendering: optimizeLegibility;
+//   -moz-osx-font-smoothing: grayscale;
+//   font-feature-settings: "liga";
+// }
+
+// ::ng-deep .p-button:focus {
+//   box-shadow: none;
+//   -webkit-box-shadow: none;
+//   -moz-box-shadow: none;
+// }
+
+// ::ng-deep .p-overlaypanel .p-overlaypanel-content {
+//   padding: 0;
+// }
+
+// ::ng-deep.hover-btn-cor-padrao.p-button:enabled:hover {
+//   background: #0c3e66;
+//   border-color: #002542;
+// }
+
+// .p-button.p-button-icon-only.p-button-rounded {
+//   background: #0c3e66;
+//   border-color: #002542;
+// }
+
+// ::ng-deep.remove-focus:focus {
+//   border: none;
+// }
+
+// ::ng-deep.p-sidebar .p-sidebar-content {
+//   padding: 0;
+// }
+
+// ::ng-deep.sidebar-header-sistema.p-sidebar .p-sidebar-header {
+//   padding-top: 0.5rem;
+//   padding-right: 0;
+//   padding-bottom: 0;
+//   padding-left: 0;
+//   display: block;
+// }
+
+// ::ng-deep .p-sidebar .p-sidebar-header {
+//   padding: 0rem !important;
+// }
+
+// ::ng-deep body {
+//   // display: initial;
+//   margin: 0px !important;
+// }
+
+// ::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron {
+//   position: relative;
+//   top: 3px;
+//   color: #0c3e66 !important;
+// }
+
+// * {
+//   margin: 0;
+// }
+
+// p .item-menu {
+//   color: #0c3e66;
+//   font-family: "Inter var", "Roboto", Arial, Helvetica, sans-serif !important;
+// }
+
+// span {
+//   font-size: 0.825rem !important;
+// }
+
+// .breadcrumb-title {
+//   font-size: 1rem !important;
+//   font-family: "Inter var", "Roboto", Arial, Helvetica, sans-serif !important;
+// }
+
+// ::ng-deep .home-style {
+//   background-color: #eaeaea;
+//   overflow: hidden;
+// }
+
+// ::ng-deep .page-style {
+//   overflow: auto !important;
+// }
+
+// ::ng-deep .card-container {
+//   background: rgb(var(--kv-kc-background-system), 1);
+//   backdrop-filter: blur(50px);
+//   border: none;
+//   box-shadow: none;
+//   &::-webkit-scrollbar {
+//     width: 6px;
+
+//     &:hover {
+//       background-color: rgba(222, 222, 222, 0.75);
+//     }
+//   }
+
+//   &::-webkit-scrollbar-thumb {
+//     border-radius: 4px;
+//     background-color: transparent;
+//   }
+
+//   &:hover::-webkit-scrollbar-thumb {
+//     border-left: 2px solid white;
+//     background-color: rgba(0, 0, 0, 0.5);
+//   }
+
+//   &::-webkit-scrollbar-track {
+//     border-left: 2px solid white;
+//     background-color: rgba(222, 222, 222, 0.75);
+//   }
+
+//   overflow-x: hidden;
+// }
+
+// .title-style {
+//   position: relative;
+//   top: 10px;
+//   margin-left: 20px;
+//   font-size: 1.25rem;
+//   color: #002542;
+//   border-bottom: 2px solid green;
+//   font-weight: 600;
+//   display: inline;
+// }
+
+// ::ng-deep p-sidebar .p-sidebar-content {
+//   overflow-y: hidden;
+// }
+
+// ::ng-deep p-dialog .p-dialog-content {
+//   overflow-y: unset;
+// }
+
+// .icon-menu {
+//   font-size: 1.3rem;
+//   color: #002542;
+//   display: flex;
+//   justify-content: center;
+//   align-items: center;
+// }
+
+// ::ng-deep .menu-option {
+//   padding: 0.8rem !important;
+//   display: flex;
+//   align-items: center;
+//   cursor: pointer;
+//   border-radius: 0.5rem;
+//   transition-duration: 150;
+//   transition-property: color, background-color;
+//   padding: 0.5rem;
+
+//   &:hover {
+//     background-color: rgb(41, 185, 45) !important;
+//     color: white;
+//   }
+// }
+
+// ::ng-deep .p-breadcrumb .p-breadcrumb-list .p-menuitem-text {
+//   color: #183462 !important;
+//   opacity: 0.95;
+//   font-weight: 500;
+//   font-size: 0.8rem !important;
+
+//   &:hover {
+//     opacity: 0.7;
+//   }
+// }
+
+// .pl-3 {
+//   padding-left: 0rem !important;
+// }
+
+// ::ng-deep svg.p-icon {
+//   width: 0.7rem;
+//   height: 1rem;
+// }
+
+// .hover-color .text-base {
+//   color: rgb(255, 255, 255) !important;
+//   /* Escolha a cor desejada aqui */
+// }
+
+// .hover-color .icon-hover-color {
+//   color: rgb(255, 255, 255) !important;
+//   /* Escolha a cor desejada aqui */
+// }
+
+// .menu-option:hover .content-option-menu {
+//   color: white !important;
+// }
+
+// ::ng-deep .p-card .p-card-content {
+//   padding: 0rem !important;
+//   height: 100%;
+// }
+
+// ::ng-deep .p-card .p-card-body {
+//   padding: 0rem !important;
+//   height: 100%;
+// }
+
+// ::ng-deep .p-card .p-card-content {
+//   padding: 0rem !important;
+// }
+
+// ::ng-deep .p-sidebar-left {
+//   z-index: 1100 !important;
+// }
+
+// .btn-sistema {
+//   display: flex;
+//   align-items: center;
+//   justify-content: center;
+//   font-size: 20px;
+//   font-weight: 700;
+//   cursor: pointer;
+//   width: 4rem;
+//   height: 4rem;
+//   background-color: #002542;
+//   color: #ffffff;
+//   border-radius: 0.75rem;
+//   padding: 0.5rem;
+//   box-shadow: rgba(0, 0, 0, 0.35) 0px 0px 4px;
+
+//   border-radius: 0.75rem;
+
+//   transition: box-shadow 0.3s ease-in-out;
+
+//   &:hover {
+//     opacity: 0.9;
+//     box-shadow: rgba(0, 0, 0, 0.6) 0px 0px 8px;
+//   }
+// }
+
+// .master-name {
+//   font-family: "Inter var", "Roboto", Arial, Helvetica, sans-serif !important;
+//   font-size: 14px !important;
+//   font-weight: 600;
+//   line-height: 16.41px;
+//   text-align: center;
+//   color: #64748b;
+// }
+
+// .empresa-name {
+//   font-family: "Inter var", "Roboto", Arial, Helvetica, sans-serif !important;
+//   font-size: 14px !important;
+//   font-weight: 300;
+//   line-height: 14.06px;
+//   text-align: center;
+//   color: #1e293b;
+// }
+
+// .top-layout-icons {
+//   color: rgb(0, 37, 66);
+//   font-size: 1.5rem !important;
+//   cursor: pointer;
+//   border-radius: 50%;
+//   transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out,
+//     transform 0.2s ease-in-out;
+// }
+
+// .top-layout-icons:hover {
+//   color: white;
+//   background-color: rgb(0, 37, 66);
+// }
+
+// .overlay-background {
+//   position: fixed;
+//   top: 0;
+//   left: 0;
+//   width: 100vw;
+//   height: 100vh;
+//   background-color: rgba(0, 0, 0, 0.5);
+//   z-index: 999;
+// }

package/src/lib/components/kv-layout/layout/kv-layout.component.spec.ts

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { KvLayoutComponent } from './kv-layout.component';
+
+describe('MenuComponent', () => {
+  let component: KvLayoutComponent;
+  let fixture: ComponentFixture<KvLayoutComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      declarations: [ KvLayoutComponent ]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(KvLayoutComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});