@dev-tcloud/tcloud-ui 0.1.2 → 0.1.4

package/lib/_modules/tcloud-ui-welcome/tcloud-ui-welcome.component.d.ts

@@ -1,13 +1,17 @@
 import { OnInit } from '@angular/core';
 import * as i0 from "@angular/core";
 export declare class TCloudUiWelcomeComponent implements OnInit {
+    col4: string;
+    col8: string;
+    col12: string;
     imgSrc: string;
     title: string;
     description: string;
     size: 'small' | 'normal' | 'big';
     font: 'small' | 'normal' | 'big';
+    mirrored: boolean;
     constructor();
     ngOnInit(): void;
     static ɵfac: i0.ɵɵFactoryDeclaration<TCloudUiWelcomeComponent, never>;
-    static ɵcmp: i0.ɵɵComponentDeclaration<TCloudUiWelcomeComponent, "tcloud-ui-welcome", never, { "imgSrc": "imgSrc"; "title": "title"; "description": "description"; "size": "size"; "font": "font"; }, {}, never, ["*"], false>;
+    static ɵcmp: i0.ɵɵComponentDeclaration<TCloudUiWelcomeComponent, "tcloud-ui-welcome", never, { "imgSrc": "imgSrc"; "title": "title"; "description": "description"; "size": "size"; "font": "font"; "mirrored": "mirrored"; }, {}, never, ["*", "*"], false>;
 }

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "@dev-tcloud/tcloud-ui",
-  "version": "0.1.2",
+  "version": "0.1.4",
   "peerDependencies": {
     "@angular/common": "^14.1.0",
     "@angular/core": "^14.1.0"

package/scss/components/custom/table.scss

@@ -19,7 +19,7 @@
     border: 1px solid #FFF;
     border-left: none;
     padding: 9px 5px;
-    background-color: var(--cinza);
+    background-color: var(--tc-gray-500);
     color: #FFF;
   }
 

package/scss/tcloud/custom/buttons.scss

@@ -37,10 +37,17 @@
   &:active { text-decoration: none; }
 }
 
+.tc-btn-block{
+  display: block;
+  width: 100%;
+  text-align: center;
+  padding: 10px 25px;
+}
+
 .tc-btn:disabled,
 .tc-btn[disabled]{
-cursor: no-drop;
-opacity: 0.6;
+  cursor: no-drop;
+  opacity: 0.6;
 }
 
 .tc-btn-primary{
@@ -50,21 +57,8 @@ opacity: 0.6;
 
   &:hover {
       color: var(--white);
-      background: var(--tc-complemt-2);
-      border-color: var(--tc-complemt-2);
-  }
-}
-
-.tc-btn-text {
-  cursor: pointer;
-  padding: 10px;
-  background: none;
-  color: var(--black);
-  border: none;
-
-  p {
-    text-align: left;
-    color: var(--black);
+      background: var(--tc-complemt-3);
+      border-color: var(--tc-primary);
   }
 }
 
@@ -116,7 +110,7 @@ align-items: center;
 .btn-new.opened,
 .btn-new:hover {
 background: var(--tc-primary);
-color: var(--tc-white);
+color: var(--white);
 }
 
 .btn-new i {
@@ -130,21 +124,21 @@ margin: 0 0 0 10px;
 .btn-new-grey {
 border: none;
 transition: all 0.25s;
-background: var(--tc-gray-100)!important;
+background: var(--tc-gray-100) !important;
 color: var(--tc-gray-600) !important;
 font-size: 12px;
 font-weight: normal;
 border-radius: 30px;
 padding: 10px 20px;
 cursor: pointer;
-border: none!important;
+border: none !important;
 }
 
 .btn-new-grey.active,
 .btn-new-grey.opened,
 .btn-new-grey:hover {
 background: var(--tc-primary)!important;
-color: var(--tc-white)!important;
+color: var(--white) !important;
 }
 
 .btn-new-grey i {
@@ -155,12 +149,12 @@ margin: 0 10px 0 5px;
 margin: 0 0 0 10px;
 }
 
-.btn-new-green,
+.tc-btn-primary,
 .btn-green-validate {
 display: inline-flex;
 align-items: center;
 background: var(--tc-primary)!important;
-color: var(--tc-white)!important;
+color: var(--white) !important;
 font-size: 12px;
 font-weight: normal;
 border-radius: 30px;
@@ -171,15 +165,15 @@ transition: all 0.25s;
 
 }
 
-.btn-new-green.full {
+.tc-btn-primary.full {
 width: 100%!important;
 }
 
-.btn-new-green.full.txt-center {
+.tc-btn-primary.full.txt-center {
 justify-content: center;
 }
 
-.btn-new-green.txt-center {
+.tc-btn-primary.txt-center {
 justify-content: center;
 }
 
@@ -187,26 +181,26 @@ justify-content: center;
 background: var(--tc-gray-200) !important;
 }
 
-.btn-new-green.small {
+.tc-btn-primary.small {
 padding: 10px 20px;
 }
 
-.btn-new-green.active,
-.btn-new-green.opened,
-.btn-new-green:hover {
-background: var(--tc-primary2) !important;
+.tc-btn-primary.active,
+.tc-btn-primary.opened,
+.tc-btn-primary:hover {
+background: var(--tc-complemt-3) !important;
 }
 
-.btn-new-green i {
+.tc-btn-primary i {
 margin: 0 10px 0 5px;
 }
 
-.btn-new-green i:nth-child(2) {
+.tc-btn-primary i:nth-child(2) {
 margin: 0 0 0 10px;
 }
 
 .btn-new-outline {
-background: var(--tc-white)!important;
+background: var(--white) !important;
 color: var(--tc-gray-600);
 font-size: 12px;
 font-weight: normal;
@@ -228,7 +222,7 @@ cursor: pointer;
 .btn-new-outline.active,
 .btn-new-outline.opened,
 .btn-new-outline:hover {
-background: var(--tc-gray-100)!important;
+background: var(--tc-gray-100) !important;
 }
 
 
@@ -259,7 +253,7 @@ margin: 0;
 display: inline-flex;
 align-items: center;
 background: var(--tc-primary)!important;
-color: var(--tc-white)!important;
+color: var(--white) !important;
 font-size: 12px;
 font-weight: normal;
 border-radius: 30px;
@@ -270,8 +264,8 @@ cursor: pointer;
 }
 
 .btn-disabled:disabled {
-background: var(--tc-gray-100)!important;
-color: var(--tc-gray-600)!important;
+background: var(--tc-gray-100) !important;
+color: var(--tc-gray-600) !important;
 cursor: default;
 }
 
@@ -280,7 +274,7 @@ cursor: default;
 display: inline-flex;
 align-items: center;
 color: var(--tc-primary);
-background: var(--tc-white);
+background: var(--white);
 
 font-size: 12px;
 font-weight: normal;
@@ -292,8 +286,8 @@ transition: all 0.25s;
 }
 
 .btn-new-white:hover {
-color: var(--tc-white);
-background: var(--var(--tc-primary2) );
+color: var(--white);
+background: var(--var(--tc-primary)2);
 }
 
 .btn-new-full {
@@ -306,13 +300,13 @@ width: 100%;
 
 
 .btn-group .btn-secondary {
-color: var(--tc-white);
+color: var(--white);
 background-color: var(--tc-primary);
 border-color: var(--tc-primary);
 }
 
 .btn-group .btn-secondary:hover {
-background-color:  var(--tc-primary2) ;
+background-color:  var(--tc-primary)2;
 }
 
 
@@ -374,7 +368,7 @@ color: var(--tc-danger);
 .btn-info.btn-outline:hover,
 .btn-warning.btn-outline:hover,
 .btn-danger.btn-outline:hover {
-color: var(--tc-white);
+color: var(--white);
 }
 
 .btn.active,
@@ -386,7 +380,7 @@ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 
 .btn-primary {
-color: var(--tc-white);
+color: var(--white);
 background-color: var(--tc-primary)!important;
 border-color: var(--tc-primary)!important;
 padding: 10px 20px;
@@ -396,9 +390,9 @@ border-radius: 20px;
 .btn-primary:hover,
 .btn-primary:focus,
 .btn-primary.focus {
-background-color: var(--tc-primary2) !important;
-border-color: var(--tc-primary2) !important;
-color: var(--tc-white)!important;
+background-color: var(--tc-primary)2!important;
+border-color: var(--tc-primary)2!important;
+color: var(--white) !important;
 }
 
 .btn-primary.disabled,
@@ -411,7 +405,7 @@ border-color: var(--tc-gray-500);
 .btn-primary:not(:disabled):not(.disabled):active,
 .btn-primary:not(:disabled):not(.disabled).active,
 .show > .btn-primary.dropdown-toggle {
-color: var(--tc-white);
+color: var(--white);
 background-color: #18a689;
 border-color: #18a689;
 }
@@ -427,27 +421,27 @@ margin: 0 10px 0 0;
 }
 
 .btn-success {
-color: var(--tc-white);
+color: var(--white);
 background-color: var(--tc-primary);
 border-color: var(--tc-primary);
 }
 .btn-success:hover,
 .btn-success:focus,
 .btn-success.focus {
-color: var(--tc-white);
+color: var(--white);
 background-color: var(--tc-primary);
 border-color: var(--tc-primary);
 }
 .btn-success.disabled,
 .btn-success:disabled {
-color: var(--tc-white);
+color: var(--white);
 background-color: #1a7bb9;
 border-color: #1a7bb9;
 }
 .btn-success:not(:disabled):not(.disabled):active,
 .btn-success:not(:disabled):not(.disabled).active,
 .show > .btn-success.dropdown-toggle {
-color: var(--tc-white);
+color: var(--white);
 background-color: var(--tc-primary);
 border-color: var(--tc-primary);
 }
@@ -458,27 +452,27 @@ border-color: var(--tc-primary);
 box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 .btn-info {
-color: var(--tc-white);
+color: var(--white);
 background-color: #23c6c8;
 border-color: #23c6c8;
 }
 .btn-info:hover,
 .btn-info:focus,
 .btn-info.focus {
-color: var(--tc-white);
+color: var(--white);
 background-color: #21b9bb;
 border-color: #21b9bb;
 }
 .btn-info.disabled,
 .btn-info:disabled {
-color: var(--tc-white);
+color: var(--white);
 background-color: #21b9bb;
 border-color: #21b9bb;
 }
 .btn-info:not(:disabled):not(.disabled):active,
 .btn-info:not(:disabled):not(.disabled).active,
 .show > .btn-info.dropdown-toggle {
-color: var(--tc-white);
+color: var(--white);
 background-color: #21b9bb;
 border-color: #21b9bb;
 }
@@ -528,27 +522,27 @@ fieldset[disabled] .btn-default.active {
 color: #cacaca;
 }
 .btn-warning {
-color: var(--tc-white);
+color: var(--white);
 background-color: #f8ac59;
 border-color: #f8ac59;
 }
 .btn-warning:hover,
 .btn-warning:focus,
 .btn-warning.focus {
-color: var(--tc-white);
+color: var(--white);
 background-color: #f7a54a;
 border-color: #f7a54a;
 }
 .btn-warning.disabled,
 .btn-warning:disabled {
-color: var(--tc-white);
+color: var(--white);
 background-color: #f7a54a;
 border-color: #f7a54a;
 }
 .btn-warning:not(:disabled):not(.disabled):active,
 .btn-warning:not(:disabled):not(.disabled).active,
 .show > .btn-warning.dropdown-toggle {
-color: var(--tc-white);
+color: var(--white);
 background-color: #f7a54a;
 border-color: #f7a54a;
 }
@@ -559,20 +553,20 @@ border-color: #f7a54a;
 box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 .btn-danger {
-color: var(--tc-white);
+color: var(--white);
 background-color: #ed5565;
 border-color: #ed5565;
 }
 .btn-danger:hover,
 .btn-danger:focus,
 .btn-danger.focus {
-color: var(--tc-white);
+color: var(--white);
 background-color: #ec4758;
 border-color: #ec4758;
 }
 .btn-danger.disabled,
 .btn-danger:disabled {
-color: var(--tc-white);
+color: var(--white);
 background-color: #ec4758;
 border-color: #ec4758;
 }
@@ -580,7 +574,7 @@ border-color: #ec4758;
 .btn-danger:not(:disabled):not(.disabled):active,
 .btn-danger:not(:disabled):not(.disabled).active,
 .show > .btn-danger.dropdown-toggle {
-color: var(--tc-white);
+color: var(--white);
 background-color: #ec4758;
 border-color: #ec4758;
 }
@@ -647,7 +641,7 @@ border-radius: 30px;
 .btn-white:active:hover,
 .btn-white.active:hover,
 .btn-white.active:focus {
-color: var(--tc-white);
+color: var(--white);
 border: 1px solid var(--tc-primary);
 background: var(--tc-primary);
 }
@@ -767,7 +761,7 @@ button.dim:before {
 font-size: 50px;
 line-height: 1em;
 font-weight: normal;
-color: var(--tc-white);
+color: var(--white);
 display: block;
 padding-top: 10px;
 }
@@ -807,4 +801,4 @@ padding: 10px 16px;
 border-radius: 35px;
 font-size: 24px;
 line-height: 1.33;
-}
+}

package/scss/tcloud/custom/card.scss

@@ -18,11 +18,11 @@
     gap: 10px;
     margin-bottom: 15px;
     padding-bottom: 15px;
-    border-bottom: 1px solid var(--gray-200);
+    border-bottom: 1px solid var(--tc-gray-200);
 }
   
 .tc-card-title {
-    color: var(--tc-primary);
+    color: var(tc-primary);
     font-size: 16px;
     font-weight: normal;
     text-transform: uppercase;
@@ -41,7 +41,7 @@
     gap: 20px;
     margin-top: 15px;
     padding-top: 15px;
-    border-top: 1px solid var(--gray-200);
+    border-top: 1px solid var(--tc-gray-200);
   
     button,
     .tc-btn {

package/scss/tcloud/custom/colors.scss

@@ -5,10 +5,10 @@
     --tc-primary: #6B48FF;
     --tc-primary-lighten: #886dfc;
     
-    --tc-primary2: #0897E9;
-    // --tc-complemt: #0ADBE3;
+    --tc-primary2: #4a29dc;
+    --tc-complemt: #7b5ffa;
     --tc-complemt-2: #5B35FC;
-
+    --tc-complemt-3: #8970fb;
     /*
     --primary: #6B48FF;
     --primary2:  #0897E9;
@@ -20,9 +20,6 @@
     --second2:  #EEEEEE;
     --white: #fff;
     --black: #363636;
-    --tc-gray-10: #f9f9f9;
-    --tc-gray-50: #EEEEEE;
-    --tc-gray-100: #C7C7C7;
     --red: #cb0000;
     --green: #1E8E3E;
   }
@@ -73,6 +70,4 @@
   --cinza5: #f8f9fa;
 
   --verde: #37b6c4;
-}
-
-
+}

package/scss/tcloud/custom/forms.scss

@@ -15,7 +15,7 @@
   color: #212529;
   background-color: #fff;
   background-clip: padding-box;
-  border: 1px solid #ced4da;
+  border: 1px solid var(--tc-gray-300);;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -24,12 +24,12 @@
   
 
   &:focus {
-    border-color: var(--tc-primary);
+    border-color: var(tc-primary);
     box-shadow: none;
   }
 
   &:focus-visible {
-    outline: 1px solid var(--tc-primary);
+    outline: 1px solid var(tc-primary);
     border-radius: 3px;
   }
 }

package/scss/tcloud/custom/mixins.scss

@@ -209,7 +209,7 @@
 
 @mixin prime-bg-10 {
   // @include prime-bg-10;
-  background: var(--tc-gray-10) !important;
+  background: var(--tc-gray-100) !important;
 }
 
 
@@ -244,23 +244,27 @@
 }
 
 @mixin prime-mkt-gradient {
+  $tcprimary: var(--tc-primary);
+  $tcprimary2: var(--tc-primary2);
+  
   // @include prime-mkt-gradient;
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6b48ff+0,362480+100 */
-  background: #6b48ff!important; /* Old browsers */
-  background: -moz-linear-gradient(left, #6b48ff 0%, #362480 100%)!important; /* FF3.6-15 */
-  background: -webkit-linear-gradient(left, #6b48ff 0%,#362480 100%)!important; /* Chrome10-25,Safari5.1-6 */
-  background: linear-gradient(to right, #6b48ff 0%,#362480 100%)!important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b48ff', endColorstr='#362480',GradientType=1 )!important; /* IE6-9 */
+  background: $tcprimary!important; /* Old browsers */
+  background: -moz-linear-gradient(left, $tcprimary 0%, $tcprimary2 100%)!important; /* FF3.6-15 */
+  background: -webkit-linear-gradient(left, $tcprimary 0%,$tcprimary2 100%)!important; /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to right, $tcprimary 0%,$tcprimary2 100%)!important; /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$tcprimary, endColorstr=$tcprimary2,GradientType=1 )!important; /* IE6-9 */
 }
 
 @mixin prime-bg-gradient {
+  $tcprimary: var(--tc-primary);
   // @include prime-bg-gradient;
   /* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#6b48ff+0,7151ff+100 */
-  background: #6b48ff; /* Old browsers */
-  background: -moz-linear-gradient(left, #6b48ff 0%, #6B48FF 100%); /* FF3.6-15 */
-  background: -webkit-linear-gradient(left, #6b48ff 0%,#6B48FF 100%); /* Chrome10-25,Safari5.1-6 */
-  background: linear-gradient(to right, #6b48ff 0%,#6B48FF 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
-  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#6b48ff', endColorstr='#6B48FF',GradientType=1 ); /* IE6-9 */
+  background: $tcprimary; /* Old browsers */
+  background: -moz-linear-gradient(left, $tcprimary 0%, $tcprimary 100%); /* FF3.6-15 */
+  background: -webkit-linear-gradient(left, $tcprimary 0%,$tcprimary 100%); /* Chrome10-25,Safari5.1-6 */
+  background: linear-gradient(to right, $tcprimary 0%,$tcprimary 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
+  filter: progid:DXImageTransform.Microsoft.gradient( startColorstr=$tcprimary, endColorstr=$tcprimary,GradientType=1 ); /* IE6-9 */
 }