@dev-tcloud/tcloud-ui 5.0.2 → 5.0.3-beta.1

package/scss/tcloud/standard/left-navigation.scss

@@ -1,48 +1,48 @@
-
-.menu-area-floating{
-  -webkit-box-shadow: 8px 0px 18px -9px rgba(0,0,0,0.75);
-  -moz-box-shadow: 8px 0px 18px -9px rgba(0,0,0,0.75);
-  box-shadow: 8px 0px 18px -9px rgba(0,0,0,0.75);
-}
-
-.tc-prime.mini-navbar{  
-  .footer{
-    display: none;
-  }  
-}
-
-.mini-navbar{
-  #side-menu{
-    li{
-      padding-left: 8px;
-    }
-  }
-}
-
-.fixed-sidebar-below{
-  margin-left: 62px !important;
-
-  .navbar-fixed-top{
-    z-index: 0;
-  }
-
-  .wrap-main{
-    .background-page-global-internal{
-      margin-top: 8px !important;
-    }
-  }
-  
-}
-
-.mini-navbar{
-  #page-wrapper{
-    .wrap-main{
-      .background-page-global-internal{
-        margin-top: 70px;
-      }
-    }
-    nav.navbar{
-      padding: 0 70px 0 0 !important;
-    }
-  }
+
+.menu-area-floating{
+  -webkit-box-shadow: 8px 0px 18px -9px rgba(0,0,0,0.75);
+  -moz-box-shadow: 8px 0px 18px -9px rgba(0,0,0,0.75);
+  box-shadow: 8px 0px 18px -9px rgba(0,0,0,0.75);
+}
+
+.tc-prime.mini-navbar{  
+  .footer{
+    display: none;
+  }  
+}
+
+.mini-navbar{
+  #side-menu{
+    li{
+      padding-left: 8px;
+    }
+  }
+}
+
+.fixed-sidebar-below{
+  margin-left: 62px !important;
+
+  .navbar-fixed-top{
+    z-index: 0;
+  }
+
+  .wrap-main{
+    .background-page-global-internal{
+      margin-top: 8px !important;
+    }
+  }
+  
+}
+
+.mini-navbar{
+  #page-wrapper{
+    .wrap-main{
+      .background-page-global-internal{
+        margin-top: 70px;
+      }
+    }
+    nav.navbar{
+      padding: 0 70px 0 0 !important;
+    }
+  }
 }

package/scss/tcloud/standard/styles.scss

@@ -1,3 +1,3 @@
-@use 'top-navigation.scss';
-@use 'left-navigation.scss';
+@use 'top-navigation.scss';
+@use 'left-navigation.scss';
 @use 'tcloud-standard.scss';

package/scss/tcloud/standard/tcloud-standard.scss

@@ -1,126 +1,126 @@
-@use '../tcloud-ui.scss';
-
-// ===============================
-// T-Cloud Styles
-// ===============================
-
-body {
-  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
-  background: var(--tc-base-main);
-  font-size: 13px;
-  color: #676a6c;
-  overflow-x: hidden;
-
-  #wrapper{
-    background: #fff;
-  }
-}
-
-html,
-body {
-  height: 100%;
-}
-
-a:hover {
-  text-decoration: none!important;
-}
-
-// ---------------------------------------------
-// Card
-// ---------------------------------------------
-
-.card {
-  background: #fff;
-  color: var(--tc-gray-500);
-  border-radius: 10px;
-  padding: 20px;
-  border: none;
-}
-
-.card-container {
-  background: var(--white);
-  border-radius: 20px;
-  padding: 20px;
-}
-
-.card-title {
-  color: var(--tc-primary);
-  text-transform: uppercase;
-  font-size: 16px;
-  margin-top: 0;
-  font-weight: normal;
-}
-
-.card.shadow {
-  box-shadow: 2px 3px 20px rgba(var(--black), .1)!important;
-}
-
-.card.card-shadow {
-  box-shadow: 2px 3px 20px rgba(var(--black), .1);
-}
-
-.card.margin-top {
-  margin-top: 20px;
-}
-
-.card-shadow {
-  background: var(--white);
-  border-radius: 10px;
-  box-shadow: 2px 3px 20px rgba(var(--black), .1);
-  padding: 20px;
-  margin-bottom: 20px;
-}
-
-.card-shadow-header {
-  display: flex;
-  justify-content: space-between;
-  flex-flow: column;
-  gap: 10px;
-  margin-bottom: 15px;
-  padding-bottom: 15px;
-  border-bottom: 1px solid var(--tc-gray-200);
-}
-
-.card-shadow-tit {
-  font-size: 16px;
-  color:var(--tc-primary);
-  text-transform: uppercase;
-  margin: 0;
-}
-
-.card-shadow-subtit {
-  font-size: 12px;
-}
-
-.card-shadow-content-tit {
-  color: var(--tc-primary);
-  margin-bottom: 20px;
-}
-
-.quick-filter-wrap {
-  margin-bottom: 15px;
-  
-  input {
-    margin-left: 5px;
-  }
-}
-
-.tc-pipeline-report-all {
-
-  .wrapper-content {
-    padding: 10px 0;
-  }
-
-  .form-group {
-    margin: 0 !important;
-    padding: 0 0 10px !important;
-    border-bottom: none!important;
-  }
-}
-
-.trustcenter-container {
-
-  .trust-center-prime {
-    display: none;
-  }
+@use '../tcloud-ui.scss';
+
+// ===============================
+// T-Cloud Styles
+// ===============================
+
+body {
+  font-family: "open sans", "Helvetica Neue", Helvetica, Arial, sans-serif;
+  background: var(--tc-base-main);
+  font-size: 13px;
+  color: #676a6c;
+  overflow-x: hidden;
+
+  #wrapper{
+    background: #fff;
+  }
+}
+
+html,
+body {
+  height: 100%;
+}
+
+a:hover {
+  text-decoration: none!important;
+}
+
+// ---------------------------------------------
+// Card
+// ---------------------------------------------
+
+.card {
+  background: #fff;
+  color: var(--tc-gray-500);
+  border-radius: 10px;
+  padding: 20px;
+  border: none;
+}
+
+.card-container {
+  background: var(--white);
+  border-radius: 20px;
+  padding: 20px;
+}
+
+.card-title {
+  color: var(--tc-primary);
+  text-transform: uppercase;
+  font-size: 16px;
+  margin-top: 0;
+  font-weight: normal;
+}
+
+.card.shadow {
+  box-shadow: 2px 3px 20px rgba(var(--black), .1)!important;
+}
+
+.card.card-shadow {
+  box-shadow: 2px 3px 20px rgba(var(--black), .1);
+}
+
+.card.margin-top {
+  margin-top: 20px;
+}
+
+.card-shadow {
+  background: var(--white);
+  border-radius: 10px;
+  box-shadow: 2px 3px 20px rgba(var(--black), .1);
+  padding: 20px;
+  margin-bottom: 20px;
+}
+
+.card-shadow-header {
+  display: flex;
+  justify-content: space-between;
+  flex-flow: column;
+  gap: 10px;
+  margin-bottom: 15px;
+  padding-bottom: 15px;
+  border-bottom: 1px solid var(--tc-gray-200);
+}
+
+.card-shadow-tit {
+  font-size: 16px;
+  color:var(--tc-primary);
+  text-transform: uppercase;
+  margin: 0;
+}
+
+.card-shadow-subtit {
+  font-size: 12px;
+}
+
+.card-shadow-content-tit {
+  color: var(--tc-primary);
+  margin-bottom: 20px;
+}
+
+.quick-filter-wrap {
+  margin-bottom: 15px;
+  
+  input {
+    margin-left: 5px;
+  }
+}
+
+.tc-pipeline-report-all {
+
+  .wrapper-content {
+    padding: 10px 0;
+  }
+
+  .form-group {
+    margin: 0 !important;
+    padding: 0 0 10px !important;
+    border-bottom: none!important;
+  }
+}
+
+.trustcenter-container {
+
+  .trust-center-prime {
+    display: none;
+  }
 }

package/scss/tcloud/standard/top-navigation.scss

@@ -1,61 +1,61 @@
-.tc-top-navigation{
-
-  .tc-navbar-nav{
-    margin-right: 5px !important;
-    li{
-      .tc-btn{
-        margin: 5px !important;
-      }
-
-      .label-warning{
-        margin-left: 3px;
-      }
-    }
-  }
-
-  .dropdown-toggle::after{
-    display: none !important;
-  }
-
-  .navbar-collapse{
-    &.collapse{
-      &.show{
-        ul{
-          li{
-            .tc-btn:first-child{
-              width: 100% !important;
-              display: flex !important;
-              margin: 5px;
-              justify-content: left;
-              padding-left: 24px;
-            }
-          }
-        }
-        
-        
-      }
-    }
-  }
-}
-
-.tc-prime{
-  .tc-top-navigation{
-    ul{
-      li > .tc-btn{          
-        border: none !important;
-        &:not(.tc-btn-primary) {
-          background: transparent !important;
-        }
-      }
-    }
-  }
-}
-
-.tc-top-navigation{
-  .dropdown{
-    .dropdown-menu{
-      z-index: 2001 !important;
-    }
-  }
-}
-
+.tc-top-navigation{
+
+  .tc-navbar-nav{
+    margin-right: 5px !important;
+    li{
+      .tc-btn{
+        margin: 5px !important;
+      }
+
+      .label-warning{
+        margin-left: 3px;
+      }
+    }
+  }
+
+  .dropdown-toggle::after{
+    display: none !important;
+  }
+
+  .navbar-collapse{
+    &.collapse{
+      &.show{
+        ul{
+          li{
+            .tc-btn:first-child{
+              width: 100% !important;
+              display: flex !important;
+              margin: 5px;
+              justify-content: left;
+              padding-left: 24px;
+            }
+          }
+        }
+        
+        
+      }
+    }
+  }
+}
+
+.tc-prime{
+  .tc-top-navigation{
+    ul{
+      li > .tc-btn{          
+        border: none !important;
+        &:not(.tc-btn-primary) {
+          background: transparent !important;
+        }
+      }
+    }
+  }
+}
+
+.tc-top-navigation{
+  .dropdown{
+    .dropdown-menu{
+      z-index: 2001 !important;
+    }
+  }
+}
+

package/scss/tcloud/styles.scss

@@ -1,19 +1,19 @@
-@use 'custom/variables.scss';
-@use 'custom/mixins.scss';
-
-@use 'custom/buttons.scss';
-
-@use 'custom/card.scss';
-@use 'custom/forms.scss';
-@use 'custom/layout.scss';
-@use 'custom/text.scss';
-@use 'custom/alerts.scss';
-
-/* STANDARD STYLES */
-@use 'standard/styles.scss';
-
-/* PRIME STYLES */
-@use 'prime/styles.scss' as styles2;
-
-/* DISASTER-RECOVERY */
-@use 'disaster-recovery/styles.scss' as styles3;
+@use 'custom/variables.scss';
+@use 'custom/mixins.scss';
+
+@use 'custom/buttons.scss';
+
+@use 'custom/card.scss';
+@use 'custom/forms.scss';
+@use 'custom/layout.scss';
+@use 'custom/text.scss';
+@use 'custom/alerts.scss';
+
+/* STANDARD STYLES */
+@use 'standard/styles.scss';
+
+/* PRIME STYLES */
+@use 'prime/styles.scss' as styles2;
+
+/* DISASTER-RECOVERY */
+@use 'disaster-recovery/styles.scss' as styles3;

package/scss/tcloud/tcloud-ui.scss

@@ -1,8 +1,8 @@
-@use 'custom/variables.scss';
-@use 'custom/mixins.scss';
-@use 'custom/colors.scss';
-
-/*
-@import 'node_modules/@dev-tcloud/tcloud-ui/scss/tcloud/custom/variables.scss';
-@import 'node_modules/@dev-tcloud/tcloud-ui/scss/tcloud/custom/mixins.scss';
+@use 'custom/variables.scss';
+@use 'custom/mixins.scss';
+@use 'custom/colors.scss';
+
+/*
+@import 'node_modules/@dev-tcloud/tcloud-ui/scss/tcloud/custom/variables.scss';
+@import 'node_modules/@dev-tcloud/tcloud-ui/scss/tcloud/custom/mixins.scss';
 */

package/scss/tcloud-revitalizacao/_tc-rev-border.scss

@@ -0,0 +1,93 @@
+@use 'sass:map';
+
+:root
+{
+    --bor-radius-0: 0px;
+    --bor-radius-4: 4px;
+    --bor-radius-8: 8px;
+    --bor-radius-16: 16px;
+    --bor-radius-24: 24px;
+    --bor-radius-32: 32px;
+    --bor-radius-rounded: 50%;
+    --bor-radius-pill: 2000px;
+    --bor-size-none: 0;
+    --bor-size-xs: 1px;
+    --bor-size-sm: 1.5px;
+    --bor-size-md: 2px;
+    --bor-size-lg: 2.5px;
+    --bor-size-xl: 3px;
+    --bor-size-1: 1px;
+    --bor-size-2: 2px;
+    --bor-size-3: 3px;
+    --bor-style-solid: solid;
+    --bor-style-dashed: dashed;
+}
+
+$borders-config: (
+  "rad": (
+    "4": var(--bor-radius-4),
+    "8": var(--bor-radius-8),
+    "16": var(--bor-radius-16),
+    "24": var(--bor-radius-24),
+    "32": var(--bor-radius-32),
+    "none": var(--bor-radius-0),
+    "xs": var(--bor-radius-4),
+    "sm": var(--bor-radius-8),
+    "md": var(--bor-radius-16),
+    "lg": var(--bor-radius-24),
+    "xl": var(--bor-radius-32),
+    "pill": var(--bor-radius-pill),
+    "rounded": (var(--bor-radius-rounded))
+  ),
+  "width": (
+    "none": var(--bor-size-none),
+    "xs": var(--bor-size-xs),
+    "sm": var(--bor-size-sm),
+    "md": var(--bor-size-md),
+    "lg": var(--bor-size-lg),
+    "xl": var(--bor-size-xl),
+    "1": var(--bor-size-1),
+    "2": var(--bor-size-2),
+    "3": var(--bor-size-3)
+  )
+);
+
+@each $type, $values in $borders-config {
+  @each $name, $value in $values {
+    @if $type == "rad" {
+      .bor-#{$type}-#{$name} {
+        border-radius: $value;
+      }
+    } @else if $type == "width" {
+      .bor-#{$name} {
+        border-width: $value;
+        border-style: var(--bor-style-solid);
+      }
+
+      .bor-l-#{$name} {
+        border-left-width: $value;
+        border-style: var(--bor-style-solid);
+      }
+
+      .bor-t-#{$name} {
+        border-top-width: $value;
+        border-style: var(--bor-style-solid);
+      }
+
+      .bor-r-#{$name} {
+        border-right-width: $value;
+        border-style: var(--bor-style-solid);
+      }
+
+      .bor-b-#{$name} {
+        border-bottom-width: $value;
+        border-style: var(--bor-style-solid);
+      }
+    }
+  }
+}
+
+.bor-dashed
+{
+    border-style: dashed;
+}

package/scss/tcloud-revitalizacao/_tc-rev-colors.scss

@@ -0,0 +1,74 @@
+@use 'sass:map';
+
+.bg-c-transparent
+{
+    background-color: transparent;
+}
+
+$colors: (
+  "neutral": (
+    "50": var(--c-neutral-50),
+    "100": var(--c-neutral-100),
+    "200": var(--c-neutral-200),
+    "300": var(--c-neutral-300),
+    "400": var(--c-neutral-400),
+    "500": var(--c-neutral-500),
+    "600": var(--c-neutral-600),
+    "700": var(--c-neutral-700),
+    "800": var(--c-neutral-800),
+    "900": var(--c-neutral-900)
+  ),
+  "primary": (
+    "300": var(--c-primary-300),
+    "400": var(--c-primary-400),
+    "500": var(--c-primary-500),
+    "600": var(--c-primary-600),
+    "700": var(--c-primary-700)
+  ),
+  "danger": (
+    "300": var(--c-danger-300),
+    "400": var(--c-danger-400),
+    "500": var(--c-danger-500)
+  ),
+  "alert": (
+    "300": var(--c-alert-300),
+    "400": var(--c-alert-400),
+    "500": var(--c-alert-500)
+  ),
+  "info": (
+    "300": var(--c-info-300),
+    "400": var(--c-info-400),
+    "500": var(--c-info-500)
+  ),
+  "success": (
+    "300": var(--c-success-300),
+    "400": var(--c-success-400),
+    "500": var(--c-success-500)
+  )
+);
+
+
+@each $color, $saturations in $colors {
+  @each $saturation, $value in $saturations {
+    .text-#{$color}-#{$saturation} {
+      color: $value;
+    }
+
+    .c-#{$color}-#{$saturation} {
+      color: $value;
+    }
+
+    .bg-#{$color}-#{$saturation} {
+      background-color: $value;
+    }
+
+    .bg-c-#{$color}-#{$saturation} {
+      background-color: $value;
+    }
+
+    .bor-c-#{$color}-#{$saturation} {
+      border-color: $value;
+    }
+  }
+}
+