npm - @dev-tcloud/tcloud-ui - Versions diffs - 5.0.4 → 5.1.0 - Mend

@dev-tcloud/tcloud-ui 5.0.4 → 5.1.0

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (44) hide show

package/scss/tcloud-revitalizacao/components/_tc-rev-input-control.scss CHANGED Viewed

@@ -1,25 +1,42 @@
-.tc-rev-input-control
-{
-    border: 1px solid var(--c-neutral-400);
-    border-radius: var(--bor-radius-pill);
-    color: var(--c-neutral-900);
-    display: inline-block;
-    font-family: var(--f-family);
-    font-size: var(--f-size-14);
-    line-height: var(--l-height-20);
-    outline: none;
-    height: var(--size-40);
-    transition: 200ms ease;
-    padding: 0 var(--size-16);
+.tc-rev-input-control {
+  border: 1px solid var(--c-neutral-400);
+  border-radius: var(--bor-radius-pill);
+  color: var(--c-neutral-900);
+  display: inline-block;
+  font-family: var(--f-family);
+  font-size: var(--f-size-14);
+  line-height: var(--l-height-20);
+  outline: none;
+  height: var(--size-40);
+  transition: 200ms ease;
+  padding: 0 var(--size-16);
+  max-width: 100%;
+  &--full-width {
+    width: 100%;
+  }
-    &:hover, &:focus
-    {
-        border-color: var(--c-primary-500);
+  &.error {
+    border-color: var(--c-danger-500);
+  }
+  &:hover,
+  &:focus {
+    border-color: var(--c-primary-500);
+  }
+  &:disabled {
+    border-color: var(--c-neutral-400);
+    &:hover,
+    &:focus,
+    &.error {
+      border-color: var(--c-neutral-400);
     }
+  }
 }
-.tc-rev-input-label
-{
+.tc-rev-input-label {
   font-family: var(--f-family);
   font-size: var(--f-size-14);
   font-weight: var(--f-weight-600);
@@ -28,16 +45,38 @@
   margin: 0;
 }
-.tc-rev-search-input-container
-{
+.tc-rev-input-container {
+  &--row {
+    align-items: center;
+    display: flex;
+    gap: var(--size-8);
+    justify-content: flex-start;
+    label {
+      margin: 0;
+    }
+  }
+  &--column {
+    align-items: flex-start;
+    display: flex;
+    flex-direction: column;
+    gap: var(--size-4);
+    label {
+      margin: 0;
+    }
+  }
+}
+.tc-rev-search-input-container {
   position: relative;
   max-height: var(--size-40);
   min-height: var(--size-40);
   height: var(--size-40);
   min-width: 7.5rem;
-  .tc-rev-search-input-control
-  {
+  .tc-rev-search-input-control {
     border: 1px solid var(--c-neutral-400);
     border-radius: var(--bor-radius-pill);
     color: var(--c-neutral-900);
@@ -56,14 +95,13 @@
     width: 100%;
     z-index: 1;
-    &:hover, &:focus
-    {
-        border-color: var(--c-primary-500);
+    &:hover,
+    &:focus {
+      border-color: var(--c-primary-500);
     }
   }
-  .tc-rev-search-input-btn
-  {
+  .tc-rev-search-input-btn {
     cursor: pointer;
     display: block;
     position: absolute;
@@ -72,25 +110,23 @@
     z-index: 2;
     font-size: var(--f-size-16);
     background-color: var(--c-primary-500);
-    border-radius: var(--bor-radius-rounded);
+    border-radius: var(--bor-radius-rounded);
     border: none;
     width: var(--size-32);
     height: var(--size-32);
     color: var(--c-neutral-50);
     font-size: var(--f-size-16);
-  }
+  }
 }
-.tc-rev-input-icon-container
-{
+.tc-rev-input-icon-container {
   position: relative;
   max-height: var(--size-40);
   min-height: var(--size-40);
   height: var(--size-40);
   min-width: 7.5rem;
-  .tc-rev-input-icon-control
-  {
+  .tc-rev-input-icon-control {
     border: 1px solid var(--c-neutral-400);
     border-radius: var(--bor-radius-pill);
     color: var(--c-neutral-900);
@@ -109,14 +145,13 @@
     width: 100%;
     z-index: 1;
-    &:hover, &:focus
-    {
-        border-color: var(--c-primary-500);
+    &:hover,
+    &:focus {
+      border-color: var(--c-primary-500);
     }
   }
-  .tc-rev-input-icon
-  {
+  .tc-rev-input-icon {
     align-content: center;
     display: block;
     position: absolute;
@@ -127,16 +162,16 @@
     width: var(--size-32);
     height: var(--size-32);
     text-align: center;
-  }
+  }
 }
 // RESET RADIO INPUT START
-input[type=radio].tc-rev-input-control {
+input[type='radio'].tc-rev-input-control {
   position: initial;
   margin: initial;
-  &:after, &:before {
+  &:after,
+  &:before {
     content: '';
     position: initial;
     border-radius: initial;
@@ -162,7 +197,7 @@ input[type=radio].tc-rev-input-control {
 }
 // RESET RADIO INPUT END
-input[type="radio"].tc-rev-input-control {
+input[type='radio'].tc-rev-input-control {
   appearance: none;
   -webkit-appearance: none;
   -moz-appearance: none;
@@ -178,11 +213,11 @@ input[type="radio"].tc-rev-input-control {
   position: relative;
   cursor: pointer;
-  &:checked  {
+  &:checked {
     border: 1px solid var(--c-primary-500);
   }
-  &:checked::before  {
+  &:checked::before {
     content: '';
     background-color: var(--c-primary-500);
     border-radius: var(--bor-radius-rounded);
@@ -195,11 +230,12 @@ input[type="radio"].tc-rev-input-control {
   }
 }
-input[type=checkbox].tc-rev-input-checkbox {
+input[type='checkbox'].tc-rev-input-checkbox {
   position: initial;
   margin: initial;
-  &:after, &:before {
+  &:after,
+  &:before {
     content: '';
     position: initial;
     border-radius: initial;
@@ -211,6 +247,7 @@ input[type=checkbox].tc-rev-input-checkbox {
     height: initial;
     width: initial;
     left: initial;
+    top: initial;
     margin: initial;
     border: initial;
   }
@@ -224,13 +261,17 @@ input[type=checkbox].tc-rev-input-checkbox {
     left: initial;
     top: initial;
-    border: initial;
+    border: initial;
     border-width: initial;
     transform: initial;
   }
+  &:checked:after {
+    border-color: initial;
+  }
 }
-input[type=checkbox].tc-rev-input-checkbox {
+input[type='checkbox'].tc-rev-input-checkbox {
   appearance: none;
   -webkit-appearance: none;
   width: 20px;
@@ -245,7 +286,7 @@ input[type=checkbox].tc-rev-input-checkbox {
   display: inline-block;
   vertical-align: middle;
-  &::before {
+  &:before {
     content: '';
     display: block;
     width: 100%;
@@ -259,7 +300,7 @@ input[type=checkbox].tc-rev-input-checkbox {
     z-index: 1;
   }
-  &::after {
+  &:after {
     content: '';
     display: block;
     position: absolute;
@@ -280,13 +321,76 @@ input[type=checkbox].tc-rev-input-checkbox {
     background: var(--c-primary-500);
   }
-  &:checked::before {
+  &:checked:before {
     background: var(--c-primary-500);
   }
-  &:checked::after {
+  &:checked:after {
     background: #fff;
-    mask: url('data:image/svg+xml;utf8,<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5.5L5 9L13 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
-    -webkit-mask: url('data:image/svg+xml;utf8,<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5.5L5 9L13 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>') no-repeat center/contain;
+    mask: url('data:image/svg+xml;utf8,<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5.5L5 9L13 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
+      no-repeat center/contain;
+    -webkit-mask: url('data:image/svg+xml;utf8,<svg width="14" height="10" viewBox="0 0 14 10" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M1 5.5L5 9L13 1" stroke="white" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"/></svg>')
+      no-repeat center/contain;
   }
-}
+}
+// RESET SLIDE TOGGLE START
+input.tc-rev-slide-toggle {
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  background: none;
+  border: none;
+  box-shadow: none;
+  margin: 0;
+  outline: none;
+  padding: 0;
+  &::after {
+    content: initial;
+  }
+  &:checked:before {
+    left: initial;
+    top: 2px;
+    width: 20px;
+    height: 20px;
+    border-radius: var(--bor-radius-rounded);
+    transform: initial;
+    z-index: initial;
+}
+}
+// RESET SLIDE TOGGLE END
+input.tc-rev-slide-toggle {
+  width: 40px;
+  height: 24px;
+  border-radius: var(--bor-radius-pill);
+  background-color: var(--c-neutral-300);
+  cursor: pointer;
+  position: relative;
+  transition: background-color 0.2s ease;
+  display: inline-block;
+}
+input.tc-rev-slide-toggle::before {
+  content: '';
+  position: absolute;
+  top: 50%;
+  left: 2px;
+  transform: translateY(-50%);
+  width: 20px;
+  height: 20px;
+  border-radius: var(--bor-radius-rounded);
+  background-color: var(--c-neutral-50);
+  transition: left 0.2s ease, right 0.2s ease;
+}
+input.tc-rev-slide-toggle:checked {
+  background-color: var(--c-primary-500);
+}
+input.tc-rev-slide-toggle:checked::before {
+  left: auto;
+  right: 2px;
+}

package/scss/tcloud-revitalizacao/components/_tc-rev-tab-item.scss CHANGED Viewed

@@ -1,39 +1,47 @@
-.tc-rev-tab-item
-{
-    background-color: var(--c-neutral-50);
-    border: var(--bor-size-1) solid var(--c-neutral-400);
-    border-radius: var(--bor-radius-8);
-    color: var(--c-neutral-900);
-    cursor: pointer;
-    font-size: var(--f-size-14);
-    height: var(--size-40);
-    line-height: var(--l-height-20);
-    padding: 0 var(--size-16);
-    text-wrap: nowrap;
-    transition: all 200ms ease;
+.tc-rev-tab-item,
+.tc-rev-tab-item:link {
+  align-items: center;
+  background-color: var(--c-neutral-50);
+  border: var(--bor-size-1) solid var(--c-neutral-400);
+  border-radius: var(--bor-radius-8);
+  color: var(--c-neutral-900);
+  cursor: pointer;
+  display: inline-flex;
+  font-family: var(--f-family);
+  font-size: var(--f-size-14);
+  font-weight: 600;
+  gap: var(--size-8);
+  height: var(--size-40);
+  line-height: var(--l-height-20);
+  justify-content: center;
+  padding: 0 var(--size-16);
+  text-wrap: nowrap;
+  transition: all 200ms ease;
-    &:hover, &:focus
-    {
-        background-color: var(--c-neutral-200);
-        border-color: var(--c-neutral-200);
-        color: var(--c-primary-500);
-        font-weight: 600;
-    }
+  &:hover,
+  &:focus {
+    background-color: var(--c-neutral-200);
+    border-color: var(--c-neutral-200);
+    color: var(--c-primary-500);
+    font-weight: 600;
+  }
-    &:active, &.selected, &.active
-    {
-        background-color: var(--c-primary-300);
-        border-color: var(--c-primary-500);
-        color: var(--c-primary-500);
-        font-weight: 700;
-    }
+  &:active,
+  &.selected,
+  &.active {
+    background-color: var(--c-primary-300);
+    border-color: var(--c-primary-500);
+    color: var(--c-primary-500);
+    font-weight: 600;
+  }
-    &:disabled
-    {
-        background-color: var(--c-neutral-50);
-        border-color: var(--c-neutral-50);
-        color: var(--c-neutral-400);
-        cursor: not-allowed;
-        font-weight: var(--f-weight-400);
-    }
-}
+  &:disabled,
+  &.disabled {
+    background-color: var(--c-neutral-50);
+    border-color: var(--c-neutral-50);
+    color: var(--c-neutral-400);
+    cursor: not-allowed;
+    font-weight: var(--f-weight-400);
+    pointer-events: none;
+  }
+}

package/scss/tcloud-revitalizacao/tc-rev-styles.scss CHANGED Viewed

@@ -4,6 +4,7 @@
 @use './tc-rev-shadow';
 @use './tc-rev-sizes';
 @use './tc-rev-typography';
+@use './components/tc-rev-ag-grid-table';
 @use './components/tc-rev-table';
 @use './components/tc-rev-button';
 @use './components/tc-rev-input-control';
@@ -23,4 +24,4 @@
 .power-bi-container .report-container{
   height: 1200px;;
-}
+}