@dev-tcloud/tcloud-ui 4.2.1 → 5.0.0

package/scss/components/custom/ui-datepicker.scss

@@ -1,16 +1,16 @@
-.datepicker-dropdown{
-    z-index: 2040 !important;
-    
-}
-
-.input-options-date{
-    .datepicker-dropdown{
-        left: 30px !important;
-    } 
-}
-
-.icon-short-time{
-    i.fa-caret-down{
-        margin-bottom: 8px;
-    }    
+.datepicker-dropdown{
+    z-index: 2040 !important;
+    
+}
+
+.input-options-date{
+    .datepicker-dropdown{
+        left: 30px !important;
+    } 
+}
+
+.icon-short-time{
+    i.fa-caret-down{
+        margin-bottom: 8px;
+    }    
 }

package/scss/components/custom/validation.scss

@@ -1,8 +1,8 @@
-.ng-invalid.ng-touched{
-    border-color: var(--danger);
-    
-}
-
-.ng-invalid.ng-touched .tc-parent-validation{
-    border-color: var(--danger);
+.ng-invalid.ng-touched{
+    border-color: var(--danger);
+    
+}
+
+.ng-invalid.ng-touched .tc-parent-validation{
+    border-color: var(--danger);
 }

package/scss/components/custom/variables.scss

@@ -1,33 +1,33 @@
-
-:root {
-
-    --black: #000;
-    --white: #fff;
-    --blue: #0897E9;
-    --dark: #363636;
-    --orange: #FEAC0E;
-    // --gray-100: #EEE;
-    --gray-light: #EEE;
-    --blue-500: #0ADBE3;
-    --purple: #6B48FF;
-    --red: red;
-    // =============================================
-    // Colors V1
-    // =============================================
-    --primary: #37B6C4;
-    --primary-700: #136E92;
-    --secondary: #484440;
-    --gray: #707070;
-    --gray-800: #8A817B;
-    --gray-400: #D5CCC3;
-    --gray-200: #F1F1F1;
-    --gray-100: #F8F9FA;
-    --warning: #ED9C2E;
-    --danger:  #D93025;
-    --success :#1E8E3E;
-    --complete :#039BE5;
-
-    --verde: #37B6C4;
-    --cinza: #8A817B;
-    --cinza4: #F1F1F1;
+
+:root {
+
+    --black: #000;
+    --white: #fff;
+    --blue: #0897E9;
+    --dark: #363636;
+    --orange: #FEAC0E;
+    // --gray-100: #EEE;
+    --gray-light: #EEE;
+    --blue-500: #0ADBE3;
+    --purple: #6B48FF;
+    --red: red;
+    // =============================================
+    // Colors V1
+    // =============================================
+    --primary: #37B6C4;
+    --primary-700: #136E92;
+    --secondary: #484440;
+    --gray: #707070;
+    --gray-800: #8A817B;
+    --gray-400: #D5CCC3;
+    --gray-200: #F1F1F1;
+    --gray-100: #F8F9FA;
+    --warning: #ED9C2E;
+    --danger:  #D93025;
+    --success :#1E8E3E;
+    --complete :#039BE5;
+
+    --verde: #37B6C4;
+    --cinza: #8A817B;
+    --cinza4: #F1F1F1;
 }

package/scss/components/styles.scss

@@ -1,9 +1,9 @@
-@import 'custom/variables.scss';
-
-@import 'custom/loading-transitions.scss';
-@import 'custom/table.scss';
-@import 'custom/tooltip.scss';
-@import 'custom/validation.scss';
-@import 'custom/el-copy.scss';
-@import 'custom/ui-datepicker.scss';
-@import 'custom/tab-menu.scss';
+@use 'custom/variables.scss';
+
+@use 'custom/loading-transitions.scss';
+@use 'custom/table.scss';
+@use 'custom/tooltip.scss';
+@use 'custom/validation.scss';
+@use 'custom/el-copy.scss';
+@use 'custom/ui-datepicker.scss';
+@use 'custom/tab-menu.scss';

package/scss/tcloud/custom/alerts.scss

@@ -1,37 +1,38 @@
-/* 
-<div class="tc-alert tc-alert-primary">
-  A simple primary alert—check it out!
-</div>
-
-*/
-
-.tc-alert{
-  padding: 16px;
-  border-radius: 13px;
-  font-size: 14px;
-}
-
-.tc-alert-success{
-  border: 2px solid #4597a4;
-  color: #4597a4;
-  background-color: lighten(#4597a4, 40%);
-}
-
-.tc-alert-danger{
-  border: 2px solid #ee4d4d;
-  color: #ee4d4d;
-  background-color: lighten(#ee4d4d, 33%);
-}
-
-.tc-alert-warning{
-  border: 2px solid #ffa632;
-  color: #c8842a;
-  background-color: lighten(#ffa632, 33%);
-}
-
-.tc-alert-info{
-  border: 2px solid #456da4;
-  color: #456da4;
-  background-color: lighten(#456da4, 40%);
-}
-
+@use "sass:color";
+/* 
+<div class="tc-alert tc-alert-primary">
+  A simple primary alert—check it out!
+</div>
+
+*/
+
+.tc-alert{
+  padding: 16px;
+  border-radius: 13px;
+  font-size: 14px;
+}
+
+.tc-alert-success{
+  border: 2px solid #4597a4;
+  color: #4597a4;
+  background-color: color.adjust(#4597a4, $lightness: 40%);
+}
+
+.tc-alert-danger{
+  border: 2px solid #ee4d4d;
+  color: #ee4d4d;
+  background-color: color.adjust(#ee4d4d, $lightness: 33%);
+}
+
+.tc-alert-warning{
+  border: 2px solid #ffa632;
+  color: #c8842a;
+  background-color: color.adjust(#ffa632, $lightness: 33%);
+}
+
+.tc-alert-info{
+  border: 2px solid #456da4;
+  color: #456da4;
+  background-color: color.adjust(#456da4, $lightness: 40%);
+}
+