keevo-components 2.0.190 → 2.0.191

package/src/lib/components/keevo-components-styles.scss

@@ -1,293 +0,0 @@
-// Importar a fonte Inter var primeiro
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100..900&display=swap");
-@import url("https://fonts.googleapis.com/css2?family=Inter:wght@100;200;300;400;500;600;700;800;900&display=swap");
-
-$font-family-keevo: "Inter", "Inter var", sans-serif;
-
-// Importar outras fontes
-@import url("https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@24,400,0,0");
-
-::ng-deep :root {
-  --kv-color-system: 10,58,120;
-  --kv-color-system-cta: 76, 175, 80;
-  --kv-color-text: 0, 0, 0;
-  --kv-color-text-inv: 255, 255, 165;
-  --kv-background-system: 248,250,253;
-  --kv-background-card: 255,255,255;
-
-  --kv-primary-color: 41, 185, 45;
-  --kv-secondary-color: 0, 37, 66;
-  --kv-tertiary-color: 165, 165, 165;
-  --kv-danger-color: 220, 53, 69;
-
-  --kv-success-color: 75, 181, 67;
-  --kv-info-color: 58, 170, 208;
-  --kv-warn-color: 241, 90, 36;
-  --kv-contrast-color: 33, 37, 41;
-}
-
-::ng-deep .padrao {
-  --kv-color-system: 10,58,120;
-  --kv-color-system-cta: 76, 175, 80;
-  --kv-color-text: 0, 0, 0;
-  --kv-background-system: 248,250,253;
-  --kv-background-card: 255,255,255;
-}
-
-::ng-deep .theme-keevocenter {
-  --kv-color-system: 88,25,153;
-  --kv-color-system-cta: 0, 116, 217;
-  --kv-color-text: 0, 0, 0;
-  --kv-color-text-inv: 255, 255, 165;
-  --kv-background-system: 248,250,253;
-  --kv-background-card: 255,255,255;
-}
-
-::ng-deep .theme-holos {
-  --kv-color-system: 241,90,36;
-  --kv-color-system-cta: 224, 168, 35;
-  --kv-color-text: 0, 0, 0;
-  --kv-color-text-inv: 255, 255, 165;
-  --kv-background-system: 240,240,240;
-  --kv-background-card: 2255,255,255;
-}
-
-
-
-.system-color{
-  color: rgb(var(--kv-color-system), 1);
-}
-
-.bg-system-100{
-  background: rgb(var(--kv-color-system), 1);
-}
-.bg-system-75{
-  background: rgb(var(--kv-color-system), .75);
-}
-.bg-system-50{
-  background: rgb(var(--kv-color-system), .5);
-}
-.bg-system-25{
-  background: rgb(var(--kv-color-system), .25);
-}
-
-.material-symbols-outlined {
-  font-family: "Material Symbols Outlined" !important;
-}
-
-// Definir a font-family globalmente
-* {
-  font-family: $font-family-keevo !important;
-}
-
-// Sobrescrever estilos específicos de componentes do PrimeNG
-::ng-deep {
-  // Componentes que possuem texto
-  .p-accordion,
-  .p-accordion-header,
-  .p-accordion-content,
-  .p-badge,
-  .p-overlay-badge,
-  .p-breadcrumb,
-  .p-breadcrumb-item,
-  .p-breadcrumb-link,
-  .p-button,
-  .p-calendar,
-  .p-card,
-  .p-card-title,
-  .p-card-subtitle,
-  .p-card-content,
-  .p-checkbox,
-  .p-chip,
-  .p-confirm-dialog,
-  .p-confirm-dialog-message,
-  .p-contextmenu,
-  .p-contextmenu-item,
-  .p-dataview,
-  .p-dataview-content,
-  .p-dialog,
-  .p-dialog-title,
-  .p-dialog-content,
-  .p-dropdown,
-  .p-dropdown-label,
-  .p-dropdown-item,
-  .p-dynamic-dialog,
-  .p-dynamic-dialog-title,
-  .p-dynamic-dialog-content,
-  .p-editor,
-  .p-fieldset,
-  .p-fieldset-legend,
-  .p-fieldset-content,
-  .p-fileupload,
-  .p-inputmask,
-  .p-inputnumber,
-  .p-inputtextarea,
-  .p-inputtext,
-  .p-menu,
-  .p-menuitem,
-  .p-menuitem-text,
-  .p-message,
-  .p-messages,
-  .p-multiselect,
-  .p-multiselect-label,
-  .p-multiselect-item,
-  .p-panelmenu,
-  .p-panelmenu-header,
-  .p-panelmenu-content,
-  .p-panel,
-  .p-panel-header,
-  .p-panel-content,
-  .p-password,
-  .p-picklist,
-  .p-progressbar,
-  .p-radiobutton,
-  .p-rating,
-  .p-sidebar,
-  .p-splitbutton,
-  .p-steps,
-  .p-step,
-  .p-table,
-  .p-datatable,
-  .p-tabview,
-  .p-tabpanel,
-  .p-tag,
-  .p-toast,
-  .p-toolbar,
-  .p-tooltip,
-  .p-tree,
-  .p-treetable,
-  .p-selectbutton,
-  .p-stepper,
-  .p-inputgroup,
-  .p-inputgroup-addon,
-  .p-text {
-    font-family: $font-family-keevo !important;
-  }
-}
-
-::ng-deep .p-icon, svg{
-  height: .6rem;
-}
-
-:host ::ng-deep .inputs {
-  height: 1.875rem;
-}
-
-:host ::ng-deep .inputs,
-.p-inputtext,
-.p-inputtextarea {
-  font-size: 0.875rem;
-}
-
-::ng-deep .p-dialog .p-dialog-header {
-  color: rgb(var(--kv-color-text)) !important;
-  // background: rgb(var(--kv-background-card)) !important;
-  background: linear-gradient(0deg, rgba(0, 0, 0, 0.02) 0.44%, rgba(0, 0, 0, 0) 49.5%), #ffffff !important; 
-  display: flex !important;
-  flex-wrap: wrap;
-  word-wrap: break-word;
-  border-bottom: 1px solid rgb(var(--kv-color-text), 0.15);
-}
-
-// ::ng-deep .p-dialog .p-dialog-content {
-//   padding-top: 1rem;
-// }
-
-::ng-deep .p-dialog {
-  min-width: 320px;
-}
-
-::ng-deep .p-dialog-content {
-  &::-webkit-scrollbar {
-    width: 8px;
-
-    &: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;
-}
-
-::ng-deep .p-dialog-footer {
-  display: flex;
-  justify-content: flex-end;
-  padding: 10px;
-  gap: 10px;
-}
-
-::ng-deep .p-dialog .p-dialog-header .p-dialog-header-icon {
-  display: none;
-}
-
-::ng-deep .p-tooltip {
-  font-size: 0.825rem !important;
-}
-
-::ng-deep svg.p-icon {
-  width: 0.65rem;
-  height: 0.65rem;
-}
-
-::ng-deep .p-checkbox .p-checkbox-box.p-highlight {
-  border-color: #004172;
-  background: #004172;
-
-  &:hover {
-    background-color: #002542;
-  }
-
-  &:active {
-    background-color: #002542;
-  }
-
-  &:disabled {
-    background-color: #002542;
-    opacity: 0.4;
-    cursor: auto;
-  }
-}
-
-input {
-  height: 1.75rem;
-}
-
-::ng-deep {
-  
-  .p-checkbox .p-checkbox-box {
-    width:  1.125rem;
-    height: 1.125rem;
-    border: 1.5px solid #d1d5db;
-  }
-  
-  p-tablecheckbox p-tableheadercheckbox .p-checkbox {
-    display: flex  !important;
-    align-items: center  !important;
-    justify-content: right;
-  }
-
-  .p-checkbox {
-    display: flex  !important;
-    align-items: center  !important;
-    justify-content: center;
-  }
-
-  .p-checkbox-label {
-    font-size: 0.875rem;
-  }
-}

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

@@ -1,388 +0,0 @@
-@import "../keevo-components-styles.scss";
-
-::ng-deep .kv-button .p-button-loading-icon svg {
-  width: 100%;
-  height: 100%;
-  display: block;
-}
-
-::ng-deep .kv-button .p-button-loading-icon svg g {
-  transform: translate(0, 0);
-}
-
-::ng-deep .kv-button {
-  white-space: nowrap;
-  border: none;
-  padding: 0.4rem;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  justify-content: center;
-  gap: 0.125rem;
-
-  .kv-button-label {
-    font-weight: 500;
-  }
-}
-
-::ng-deep .small {
-  height: 1.625rem;
-  min-width: 1.625rem;
-
-  .kv-button-label {
-    font-size: 0.625rem;
-  }
-
-  .kv-button-icon {
-    font-size: 0.75rem;
-  }
-
-  .p-button-loading-icon {
-    width: 0.55rem;
-    height: 0.55rem;
-  }
-}
-
-::ng-deep .normal {
-  height: 1.875rem;
-  min-width: 1.875rem;
-
-  .kv-button-label {
-    font-size: 0.825rem;
-  }
-
-  .kv-button-icon {
-    font-size: 1rem;
-  }
-
-  .p-button-loading-icon {
-    width: 0.75rem;
-    height: 0.75rem;
-  }
-}
-
-::ng-deep .large {
-  height: 2.125rem;
-  min-width: 2.125rem;
-
-  .kv-button-label {
-    font-size: 1rem;
-  }
-
-  .kv-button-icon {
-    font-size: 1.25rem;
-  }
-
-  .p-button-loading-icon {
-    width: 0.875rem;
-    height: 0.875rem;
-  }
-}
-
-//Primary button
-::ng-deep .primary {
-  background-color: rgb(var(--kv-primary-color));
-  &:hover {
-    background-color: rgba(var(--kv-primary-color), 0.8);
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-primary-color), 0.95);
-  }
-}
-
-.primary.outline {
-  border: solid 0.5px rgb(var(--kv-primary-color));
-  background-color: white;
-  color: rgb(var(--kv-primary-color));
-
-  &:hover {
-    background-color: rgb(var(--kv-primary-color));
-    color: white;
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-primary-color), 0.8);
-  }
-}
-
-.primary.text {
-  opacity: 0.9;
-  background-color: transparent;
-  color: rgb(var(--kv-primary-color));
-
-  &:hover {
-    background-color: rgba(var(--kv-primary-color), 0.1);
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-primary-color), 0.2);
-  }
-}
-
-//Secondary button
-::ng-deep .secondary {
-  background-color: rgb(var(--kv-secondary-color));
-
-  &:hover {
-    background-color: rgba(var(--kv-secondary-color), 0.8);
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-secondary-color), 0.95);
-  }
-}
-
-.secondary.outline {
-  border: solid 0.5px rgb(var(--kv-secondary-color));
-  background-color: white;
-  color: rgb(var(--kv-secondary-color));
-
-  &:hover {
-    background-color: rgb(var(--kv-secondary-color));
-    color: white;
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-secondary-color), 0.8);
-  }
-}
-
-.secondary.text {
-  background-color: transparent;
-  color: rgb(var(--kv-secondary-color));
-
-  &:hover {
-    background-color: rgba(var(--kv-secondary-color), 0.1);
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-secondary-color), 0.2);
-  }
-}
-
-//Tertiary button
-::ng-deep .tertiary {
-  color: #212121;
-  background-color: rgba(var(--kv-tertiary-color), 0.3);
-
-  &:hover {
-    background-color: rgba(var(--kv-tertiary-color), 0.8);
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-tertiary-color), 0.95);
-  }
-}
-
-.tertiary.outline {
-  border: solid 0.5px rgb(var(--kv-tertiary-color));
-  background-color: white;
-  color: rgb(var(--kv-tertiary-color));
-
-  &:hover {
-    background-color: rgb(var(--kv-tertiary-color));
-    color: white;
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-tertiary-color), 0.8);
-  }
-}
-
-.tertiary.text {
-  background-color: transparent;
-  color: rgb(var(--kv-tertiary-color));
-
-  &:hover {
-    background-color: rgba(var(--kv-tertiary-color), 0.1);
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-tertiary-color), 0.2);
-  }
-}
-
-::ng-deep.danger {
-  background-color: rgb(var(--kv-danger-color));
-
-  &:hover {
-    background-color: rgba(var(--kv-danger-color), 0.8);
-  }
-
-  &:active {
-    background-color: rgba(var(--kv-danger-color), 0.95);
-  }
-  
-  &.outline {
-    border: solid 0.5px rgb(var(--kv-danger-color));
-    background-color: white;
-    color: rgb(var(--kv-danger-color));
-
-    &:hover {
-      background-color: rgb(var(--kv-danger-color));
-      color: white;
-    }
-    
-    &:active {
-      background-color: rgba(var(--kv-danger-color), 0.8);
-    }
-  }
-
-  &.text {
-    background-color: transparent;
-    color: rgb(var(--kv-danger-color));
-    
-    &:hover {
-      background-color: rgba(var(--kv-danger-color), 0.1);
-    }
-    
-    &:active {
-      background-color: rgba(var(--kv-danger-color), 0.2);
-    }
-  }
-}
-
-// =======================================================================
-// ==================== NOVO CSS DO BOTÃO ================================
-// ======== AGUARDAR PUBLICAÇÃO DO REINF PARA LIBERAÇÃO ==================
-// =======================================================================
-
-// @import "../keevo-components-styles.scss";
-
-// ::ng-deep .kv-button .p-button-loading-icon svg {
-//   width: 100%;
-//   height: 100%;
-//   display: block;
-// }
-
-// ::ng-deep .kv-button .p-button-loading-icon svg g {
-//   transform: translate(0, 0);
-// }
-
-// ::ng-deep .kv-button {
-//   border: none;
-//   // padding: 0.4rem;
-//   display: flex;
-//   flex-direction: row;
-//   align-items: center;
-//   justify-content: center;
-//   gap: 0.125rem;
-
-//   .kv-button-label {
-//     font-weight: 500;
-//   }
-
-//   :focus {
-//     outline: none;
-//     box-shadow: none;
-//   }
-// }
-
-// ::ng-deep .small {
-//   height: 1.625rem;
-//   min-width: 1.625rem;
-
-//   .kv-button-label {
-//     font-size: 0.625rem;
-//   }
-
-//   .kv-button-icon {
-//     font-size: 0.75rem;
-//   }
-
-//   .p-button-loading-icon {
-//     width: 0.55rem;
-//     height: 0.55rem;
-//   }
-// }
-
-// ::ng-deep .normal {
-//   height: 1.875rem;
-//   min-width: 1.875rem;
-
-//   .kv-button-label {
-//     font-size: 0.825rem;
-//   }
-
-//   .kv-button-icon {
-//     font-size: 1rem;
-//   }
-
-//   .p-button-loading-icon {
-//     width: 0.75rem;
-//     height: 0.75rem;
-//   }
-// }
-
-// ::ng-deep .large {
-//   height: 2.125rem;
-//   min-width: 2.125rem;
-
-//   .kv-button-label {
-//     font-size: 1rem;
-//   }
-
-//   .kv-button-icon {
-//     font-size: 1.25rem;
-//   }
-
-//   .p-button-loading-icon {
-//     width: 0.875rem;
-//     height: 0.875rem;
-//   }
-// }
-
-// //Primary button
-// ::ng-deep .primary {
-//   background-color: rgb(var(--kv-color-system));
-//   &:hover {
-//     background-color: rgba(var(--kv-color-system), 0.8);
-//   }
-
-//   &:active {
-//     background-color: rgba(var(--kv-color-system), 0.95);
-//   }
-// }
-
-// ::ng-deep .secondary {
-//   border: solid 0.5px rgb(var(--kv-color-system));
-//   background-color: white;
-//   color: rgb(var(--kv-color-system));
-
-//   &:hover {
-//     background-color: rgb(var(--kv-color-system),0.1);
-//   }
-
-//   &:active {
-//     background-color: rgba(var(--kv-color-system), 0.8);
-//   }
-// }
-
-// ::ng-deep .tertiary {
-//   opacity: 0.9;
-//   background-color: transparent;
-//   color: rgb(var(--kv-color-system));
-
-//   &:hover {
-//     background-color: rgba(var(--kv-color-system), 0.1);
-//   }
-
-//   &:active {
-//     background-color: rgba(var(--kv-color-system), 0.2);
-//   }
-// }
-
-// ::ng-deep .callToAction {
-//   opacity: 0.9;
-//   background-color: transparent;
-//   color: rgb(var(--kv-color-system));
-
-//   &:hover {
-//     background-color: rgba(var(--kv-color-system), 0.1);
-//   }
-
-//   &:active {
-//     background-color: rgba(var(--kv-color-system), 0.2);
-//   }
-// }