keevo-components 1.8.495 → 1.8.496

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

@@ -1,42 +1,106 @@
-@import "../../keevo-components-styles.scss";
+.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;
 }
 
-.full-container{
-  background: rgb(var(--kv-kc-background-system), 1);
-  width: 100vw;
-  height: 100vh;
-  overflow-x: hidden;
-  overflow-y: hidden;
+::ng-deep .p-breadcrumb ul li.p-breadcrumb-chevron {
+  position: relative;
+  top: 3px;
+  color: #0c3e66 !important;
 }
 
+.page-content {
+  background: linear-gradient(to bottom, #eaeaea 17%, #ffffff 19%);
+}
 
-::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);
+* {
+  margin: 0;
 }
 
-.page-content {
-  background: none;
-  margin-left: .5rem;
-  backdrop-filter: blur(50px);
+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;
 
@@ -63,354 +127,164 @@
   overflow-x: hidden;
 }
 
-.side-menu-item {
-  transition: all .2s ease-in-out;
+.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: .5rem;
-  padding-left: .5rem;
-  padding-right: .5rem;
+  border-radius: 0.5rem;
+  transition-duration: 150;
+  transition-property: color, background-color;
+  padding: 0.5rem;
 
   &:hover {
-    background: rgb(var(--kv-color-system), .1);
-    color: rgb(var(--kv-color-system), 1);
-
+    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;
 
-  label{
-    width: 100%;
-    cursor: pointer;
+  &:hover {
+    opacity: 0.7;
   }
 }
 
-::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;
-    }
-  }
+.pl-3 {
+  padding-left: 0rem !important;
+}
 
-  & .p-divider{
-    margin: 0;
-    padding: 0;
-    margin-top: .2rem;
-  }
+::ng-deep svg.p-icon {
+  width: 0.7rem;
+  height: 1rem;
 }
 
-.appendMenuDiv{
-  position: absolute;
-  top: -2.2rem;
-  left: 1.6rem;
+.hover-color .text-base {
+  color: rgb(255, 255, 255) !important;
+  /* Escolha a cor desejada aqui */
 }
 
-::ng-deep .p-divider{
-  margin: 0;
-  padding: 0;
-  margin-top: .5rem;
-  margin-bottom: .5rem;
+.hover-color .icon-hover-color {
+  color: rgb(255, 255, 255) !important;
+  /* Escolha a cor desejada aqui */
 }
 
-::ng-deep .p-overlaypanel-content{
-  padding: 0;
+.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%;
+}
 
-//=========================================================================================================
-
-// .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;
-// }
+::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;
+}