keevo-components 2.0.106 → 2.0.107

package/src/lib/components/kv-table-expandable/kv-table-expandable.component.scss

@@ -0,0 +1,387 @@
+// // ::ng-deep .p-datatable>.p-datatable-wrapper::-webkit-scrollbar {
+// //   height: 8px;
+// //   width: 8px;
+// //   background-color: rgba(222, 222, 222, 0.75);
+// // }
+
+// // ::ng-deep .p-datatable>.p-datatable-wrapper::-webkit-scrollbar-thumb {
+// //   border-radius: 6px;
+// //   background-color: rgba(0, 0, 0, 0.5);
+// // }
+
+// .error-show {
+//   background-color: red;
+//   width: 5px;
+//   height: 10px
+// }
+
+// .btns-options {
+//   position: relative;
+//   left: 20px;
+// }
+
+// .chip-style {
+//   border: solid 1px;
+// }
+
+// :host::ng-deep .p-card .p-card-content {
+//   padding: 0;
+// }
+
+// .material-symbols-outlined.md-19 {
+//   font-size: 19px;
+// }
+
+// .material-symbols-outlined.md-22 {
+//   font-size: 22px;
+// }
+
+// .checkbox-container {
+//   display: flex;
+//   align-items: center;
+
+//   gap: 2px;
+//   margin-top: 5px;
+// }
+
+// #botaoFiltro:hover {
+//   color: darkgray;
+// }
+
+// .actionLoteBtns {
+//   align-items: center;
+//   background-color: transparent;
+//   color: darkgray;
+//   display: flex;
+//   font-size: 16px;
+//   width: 2rem;
+//   height: 2rem;
+//   top: 2px;
+//   margin-left: 0.5rem;
+//   justify-content: center;
+//   text-decoration: none;
+//   text-align: justify;
+//   padding: 12px 12px;
+// }
+
+// #actionLoteBtns:hover {
+//   background-color: #29B92D !important;
+// }
+
+// .actionLoteBtns:hover {
+//   background-color: #29B92D !important;
+
+// }
+
+// .actionBtns {
+//   align-items: center;
+//   background-color: transparent;
+//   color: darkgray;
+//   display: flex;
+//   width: .8rem;
+//   height: .8rem;
+//   margin-left: 0.22rem;
+//   justify-content: center;
+//   text-decoration: none;
+//   text-align: justify;
+//   padding: 11px 11px;
+// }
+
+// :host::ng-deep .material-symbols-outlined {
+//   font-family: 'Material Symbols Outlined';
+//   font-weight: normal;
+//   font-style: normal;
+//   // font-size: 17px;
+//   line-height: 1;
+//   letter-spacing: normal;
+//   text-transform: none;
+//   display: inline-block;
+//   white-space: nowrap;
+//   word-wrap: normal;
+//   direction: ltr;
+//   // -webkit-font-feature-settings: 'liga';
+//   -webkit-font-smoothing: antialiased;
+// }
+
+// #actionBtns:hover {
+//   color: darkgray;
+// }
+
+// .image {
+//   border-style: solid;
+//   border-width: 3.5px;
+//   border-color: rgb(82, 137, 180);
+//   border-radius: 100%;
+//   height: 55px;
+//   width: 55px;
+//   padding: 0;
+//   margin: 0;
+//   vertical-align: middle;
+// }
+
+// /* Início: Estilização padrão da tabela */
+// :host ::ng-deep .p-datatable-table {
+//   border-spacing: 0px 2px;
+// }
+
+// :host ::ng-deep .p-datatable-header {
+//   // background-color: #f2f2f2;
+//   background-color: #eaeaea !important;
+//   padding: 2px 13px 0 13px !important;
+//   border-radius: 5px !important;
+// }
+
+// :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th {
+//   // background-color: #f2f2f2;
+//   background-color: #eaeaea !important;
+// }
+
+// :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th:first-of-type {
+//   border-radius: 5px 0 0px 5px;
+// }
+
+// :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead>tr>th:last-child {
+//   border-radius: 0 5px 5px 0;
+// }
+
+// :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td {
+//   border-bottom: 1px solid #ddd !important;
+//   border-top: 1px solid #ddd !important;
+// }
+
+// .groupheader {
+//   // background-color: rgb(230, 255, 255);
+// }
+
+// :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td:last-child {
+//   border-radius: 0 10px 10px 0 !important;
+//   border-right: 1px solid #ddd !important;
+// }
+
+// :host ::ng-deep .actionBtns,
+// :host ::ng-deep .actionLoteBtns {
+//   border-radius: 20%;
+//   width: 1.625rem !important;
+//   height: 1.625rem !important;
+//   box-shadow: rgba(0, 0, 0, 0.24) 0 3px 8px;
+// }
+
+// .icon-more-horiz:hover,
+// .icon-more-horiz:focus {
+//   color: #5e5e5e;
+//   transform: scale(1.1);
+//   transition: color 0.3s, transform 0.3s;
+// }
+
+// /* Final: Estilização padrão da tabela */
+
+// @media only screen and (min-width: 768px) {
+//   .actionLoteBtns {
+//       top: -1px;
+//   }
+// }
+
+// @media only screen and (max-width: 960px) {
+//   .rowTable {
+//       text-align: right !important;
+//   }
+
+//   // :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td {
+
+//   //     border-right: 1px solid #ddd !important;
+//   //     border-bottom: 1px solid hsl(0, 0%, 91%) !important;
+//   //     border-top: 0px solid !important;
+//   //     line-height: 30px !important;
+//   //     gap: 5px;
+//   // }
+
+//   :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td:has(p-tablecheckbox) {
+//       border-bottom: 0px !important;
+//   }
+
+//   :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td:has(img) {
+//       justify-content: center !important;
+//       align-items: center !important;
+//   }
+
+//   :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td:has(img) .p-column-title {
+//       display: none !important;
+//   }
+
+//   :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td:first-of-type {
+//       border-left: solid 4px #5289B4 !important;
+//       // border-radius: 10px 10px 0 0px !important;
+//       border-top: 1px solid #ddd !important;
+//   }
+
+//   :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td:last-child {
+//       // border-radius: 0 0px 10px 10px !important;
+//       border-bottom: 1px solid #ddd !important;
+//   }
+
+//   :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td:last-child div {
+//       justify-content: center !important;
+//       align-items: center !important;
+//   }
+
+//   // :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td {
+//   //     border-left: solid 4px #5289B4 !important;
+//   // }
+
+//   :host ::ng-deep .p-datatable.p-datatable-sm .p-datatable-tbody>tr>td .p-column-title {
+//       font-weight: 600;
+//   }
+// }
+
+// ::ng-deep .p-panel.p-panel-toggleable .p-panel-header {
+//   background-color: #EAEAEA !important;
+// }
+
+// ::ng-deep .field.grid,
+// .formgrid.grid {
+//   padding: 0rem !important;
+// }
+
+// @media screen and (min-width: 961px) {
+//   .moreVertBtn {
+//       position: relative;
+//       right: 3px;
+//   }
+
+// }
+
+// ::ng-deep  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th:last-of-type {
+//   border-radius: 0px 0px 5px 0px !important;
+// }
+
+// ::ng-deep  .p-datatable.p-datatable-sm .p-datatable-thead > tr > th:first-of-type {
+//   border-radius: 0px 0px 0px 5px !important;
+// }
+
+tr {
+  word-break: break-all;
+}
+
+.tag {
+  width: 5px;
+  height: 20px;
+  border-radius: 0.25rem;
+}
+
+/* Remove a aparência padrão do checkbox */
+input[type="checkbox"] {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  width: 20px;
+  height: 20px;
+  border: 2px solid #ccc;
+  border-radius: 4px;
+  position: relative;
+  cursor: pointer;
+  outline: none;
+  background-color: white;
+}
+
+/* Estilo para a marca de verificação */
+input[type="checkbox"]::after {
+  content: "";
+  position: absolute;
+  left: 5px;
+  top: 2px;
+  width: 5px;
+  height: 10px;
+  border: solid #fff;
+  border-width: 0 2px 2px 0;
+  transform: rotate(45deg);
+  opacity: 0;
+  transition: opacity 0.2s;
+}
+
+/* Estilo para o checkbox quando está marcado */
+input[type="checkbox"]:checked {
+  border-color: #004172;
+  background: #004172;
+
+  &:hover {
+    background-color: #002542;
+  }
+
+  &:active {
+    background-color: #002542;
+  }
+
+  &:disabled {
+    background-color: #002542;
+    opacity: 0.4;
+    cursor: auto;
+  }
+}
+
+/* Exibe a marca de verificação quando o checkbox está marcado */
+input[type="checkbox"]:checked::after {
+  opacity: 1;
+}
+
+::ng-deep .p-datatable.p-datatable-sm .p-datatable-header {
+  padding: 0rem;
+}
+
+::ng-deep .p-datatable.p-datatable-sm .p-datatable-thead > tr > th {
+  background-color: #eaeaea;
+}
+
+::ng-deep .p-panel.p-panel-toggleable .p-panel-header {
+  background-color: #eaeaea;
+}
+
+.tr-td {
+  &:hover {
+    // box-shadow: rgba(99, 99, 99, 0.2) 0px 2px 8px 0px;
+    box-shadow: rgba(60, 64, 67, 0.3) 0px 1px 2px 0px,
+      rgba(60, 64, 67, 0.15) 0px 2px 6px 2px;
+    background-color: white;
+    transition: color 0.3s, transform 0.3s;
+    transform: scale(1);
+  }
+}
+
+.checkbox-container {
+  // minimo de largura para o container
+  width: 25px !important;
+}
+
+.icon-more-horiz:hover,
+.icon-more-horiz:focus {
+  color: #5e5e5e;
+  transform: scale(1.2);
+  transition: color 0.3s, transform 0.3s;
+  background-color: #eaeaea;
+  border-radius: 50%;
+}
+
+.btn-table {
+  background-color: #29b92d;
+  padding: 12px 12px;
+
+  &:hover {
+    background-color: #249a29;
+  }
+
+  &:active {
+    background-color: #1c801f;
+  }
+
+  &:disabled {
+    background-color: #29b92d;
+  }
+}
+
+.icone {
+  width: 12px;
+  height: 2px;
+}
+
+:host ::ng-deep .icone .pi {
+  font-size: 0.7rem; 
+}