@dev-tcloud/tcloud-ui 0.1.1 → 0.1.3

package/package.json

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

package/scss/tcloud/custom/buttons.scss

@@ -4,8 +4,8 @@
 
 .tc-btn {
   font-size: 12px;
-  background: $tc-gray-100;
-  color: $tc-gray-700;
+  background: var(--tc-gray-100);
+  color: var(--tc-gray-700);
   cursor: pointer;
   border-radius: 30px;
   display: inline-flex;
@@ -13,12 +13,12 @@
   transition: all 0.25s;
   padding: 0 25px;
   height: 40px;
-  border: 1px solid $tc-gray-100;
+  border: 1px solid var(--tc-gray-100);
 
 
   p {
     font-size: 13px;
-    color: $tc-gray-700;
+    color: var(--tc-gray-700);
   }
 
   i {
@@ -27,9 +27,9 @@
   }
 
   &:hover {
-    color: $tc-primary;
-    background: $tc-gray-50;
-    border-color: $tc-gray-100;
+    color: var(--tc-primary);
+    background: var(--tc-gray-50);
+    border-color: var(--tc-gray-100);
   }
   &:link { text-decoration: none; }
   &:visited { text-decoration: none; }
@@ -44,14 +44,14 @@ opacity: 0.6;
 }
 
 .tc-btn-primary{
-  color: $white;
-  background: $tc-primary;
-  border-color: $tc-primary;
+  color: var(--white);
+  background: var(--tc-primary);
+  border-color: var(--tc-primary);
 
   &:hover {
-      color: $white;
-      background: $tc-complemt-3;
-      border-color: $tc-primary;
+      color: var(--white);
+      background: var(--tc-complemt-2);
+      border-color: var(--tc-complemt-2);
   }
 }
 
@@ -59,12 +59,12 @@ opacity: 0.6;
   cursor: pointer;
   padding: 10px;
   background: none;
-  color: $black;
+  color: var(--black);
   border: none;
 
   p {
     text-align: left;
-    color: $black;
+    color: var(--black);
   }
 }
 
@@ -72,20 +72,20 @@ opacity: 0.6;
   cursor: pointer;
   padding: 10px;
   background: none;
-  color: $tc-primary;
+  color: var(--tc-primary);
   border: none;
 
   p {
     text-align: left;
-    color: $tc-primary;
+    color: var(--tc-primary);
   }
 
   &:hover{
-      color: $tc-complemt-3;
+      color: var(--tc-complemt-3);
   }
 
   &:disabled{
-    color: $tc-gray-700;
+    color: var(--tc-gray-700);
   }
 }
 
@@ -101,8 +101,8 @@ cursor: not-allowed;
 .btn-new {
 border: none;
 transition: all 0.25s;
-background: $tc-gray-100;
-color: $tc-gray-500;
+background: var(--tc-gray-100);
+color: var(--tc-gray-500);
 font-size: 12px;
 font-weight: normal;
 border-radius: 30px;
@@ -115,8 +115,8 @@ align-items: center;
 .btn-new.active,
 .btn-new.opened,
 .btn-new:hover {
-background: $tc-primary;
-color: $tc-white;
+background: var(--tc-primary);
+color: var(--white);
 }
 
 .btn-new i {
@@ -130,8 +130,8 @@ margin: 0 0 0 10px;
 .btn-new-grey {
 border: none;
 transition: all 0.25s;
-background: $tc-gray-100!important;
-color: $tc-gray-600!important;
+background: var(--tc-gray-100)!important;
+color: var(--tc-gray-600) !important;
 font-size: 12px;
 font-weight: normal;
 border-radius: 30px;
@@ -143,8 +143,8 @@ border: none!important;
 .btn-new-grey.active,
 .btn-new-grey.opened,
 .btn-new-grey:hover {
-background: $tc-primary!important;
-color: $tc-white!important;
+background: var(--tc-primary)!important;
+color: var(--white)!important;
 }
 
 .btn-new-grey i {
@@ -159,8 +159,8 @@ margin: 0 0 0 10px;
 .btn-green-validate {
 display: inline-flex;
 align-items: center;
-background: $tc-primary!important;
-color: $tc-white!important;
+background: var(--tc-primary)!important;
+color: var(--white)!important;
 font-size: 12px;
 font-weight: normal;
 border-radius: 30px;
@@ -184,7 +184,7 @@ justify-content: center;
 }
 
 .btn-green-validate:disabled {
-background: $tc-gray-200!important;
+background: var(--tc-gray-200) !important;
 }
 
 .btn-new-green.small {
@@ -194,7 +194,7 @@ padding: 10px 20px;
 .btn-new-green.active,
 .btn-new-green.opened,
 .btn-new-green:hover {
-background: $tc-primary2!important;
+background: var(--tc-primary2) !important;
 }
 
 .btn-new-green i {
@@ -206,12 +206,12 @@ margin: 0 0 0 10px;
 }
 
 .btn-new-outline {
-background: $tc-white!important;
-color: $tc-gray-600;
+background: var(--white)!important;
+color: var(--tc-gray-600);
 font-size: 12px;
 font-weight: normal;
 transition: all 0.25s;
-border: 3px solid $tc-gray-100;
+border: 3px solid var(--tc-gray-100);
 border-radius: 30px;
 padding: 10px 25px;
 cursor: pointer;
@@ -228,7 +228,7 @@ cursor: pointer;
 .btn-new-outline.active,
 .btn-new-outline.opened,
 .btn-new-outline:hover {
-background: $tc-gray-100!important;
+background: var(--tc-gray-100)!important;
 }
 
 
@@ -258,8 +258,8 @@ margin: 0;
 .btn-disabled {
 display: inline-flex;
 align-items: center;
-background: $tc-primary!important;
-color: $tc-white!important;
+background: var(--tc-primary)!important;
+color: var(--white)!important;
 font-size: 12px;
 font-weight: normal;
 border-radius: 30px;
@@ -270,8 +270,8 @@ cursor: pointer;
 }
 
 .btn-disabled:disabled {
-background: $tc-gray-100!important;
-color: $tc-gray-600!important;
+background: var(--tc-gray-100)!important;
+color: var(--tc-gray-600)!important;
 cursor: default;
 }
 
@@ -279,8 +279,8 @@ cursor: default;
 
 display: inline-flex;
 align-items: center;
-color: $tc-primary;
-background: $tc-white;
+color: var(--tc-primary);
+background: var(--white);
 
 font-size: 12px;
 font-weight: normal;
@@ -292,8 +292,8 @@ transition: all 0.25s;
 }
 
 .btn-new-white:hover {
-color: $tc-white;
-background: var(--$tc-primary2);
+color: var(--white);
+background: var(--var(--tc-primary2) );
 }
 
 .btn-new-full {
@@ -306,13 +306,13 @@ width: 100%;
 
 
 .btn-group .btn-secondary {
-color: $tc-white;
-background-color: $tc-primary;
-border-color: $tc-primary;
+color: var(--white);
+background-color: var(--tc-primary);
+border-color: var(--tc-primary);
 }
 
 .btn-group .btn-secondary:hover {
-background-color:  $tc-primary2;
+background-color:  var(--tc-primary2) ;
 }
 
 
@@ -324,7 +324,7 @@ outline: 0 !important;
 padding: 10px 20px;
 border-radius: 20px;
 font-size: inherit;
-color: $tc-gray-500;
+color: var(--tc-gray-500);
 }
 
 .btn:focus {
@@ -350,23 +350,23 @@ min-width: 120px;
 }
 
 .btn-primary.btn-outline {
-color: $tc-primary;
+color: var(--tc-primary);
 }
 
 .btn-success.btn-outline {
-color: $tc-complete;
+color: var(--tc-complete);
 }
 
 .btn-info.btn-outline {
-color: $tc-primary;
+color: var(--tc-primary);
 }
 
 .btn-warning.btn-outline {
-color: $tc-warning;
+color: var(--tc-warning);
 }
 
 .btn-danger.btn-outline {
-color: $tc-danger;
+color: var(--tc-danger);
 }
 
 .btn-primary.btn-outline:hover,
@@ -374,7 +374,7 @@ color: $tc-danger;
 .btn-info.btn-outline:hover,
 .btn-warning.btn-outline:hover,
 .btn-danger.btn-outline:hover {
-color: $tc-white;
+color: var(--white);
 }
 
 .btn.active,
@@ -386,9 +386,9 @@ box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 
 .btn-primary {
-color: $tc-white;
-background-color: $tc-primary!important;
-border-color: $tc-primary!important;
+color: var(--white);
+background-color: var(--tc-primary)!important;
+border-color: var(--tc-primary)!important;
 padding: 10px 20px;
 border-radius: 20px;
 }
@@ -396,22 +396,22 @@ border-radius: 20px;
 .btn-primary:hover,
 .btn-primary:focus,
 .btn-primary.focus {
-background-color: $tc-primary2!important;
-border-color: $tc-primary2!important;
-color: $tc-white!important;
+background-color: var(--tc-primary2) !important;
+border-color: var(--tc-primary2) !important;
+color: var(--white)!important;
 }
 
 .btn-primary.disabled,
 .btn-primary:disabled {
-color: $tc-gray-400;
-background-color: $tc-gray-500;
-border-color: $tc-gray-500;
+color: var(--tc-gray-400);
+background-color: var(--tc-gray-500);
+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: $tc-white;
+color: var(--white);
 background-color: #18a689;
 border-color: #18a689;
 }
@@ -427,29 +427,29 @@ margin: 0 10px 0 0;
 }
 
 .btn-success {
-color: $tc-white;
-background-color: $tc-primary;
-border-color: $tc-primary;
+color: var(--white);
+background-color: var(--tc-primary);
+border-color: var(--tc-primary);
 }
 .btn-success:hover,
 .btn-success:focus,
 .btn-success.focus {
-color: $tc-white;
-background-color: $tc-primary;
-border-color: $tc-primary;
+color: var(--white);
+background-color: var(--tc-primary);
+border-color: var(--tc-primary);
 }
 .btn-success.disabled,
 .btn-success:disabled {
-color: $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: $tc-white;
-background-color: $tc-primary;
-border-color: $tc-primary;
+color: var(--white);
+background-color: var(--tc-primary);
+border-color: var(--tc-primary);
 }
 .btn-success:not(:disabled):not(.disabled):active:focus,
 .btn-success:not(:disabled):not(.disabled).active:focus,
@@ -458,27 +458,27 @@ border-color: $tc-primary;
 box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 .btn-info {
-color: $tc-white;
+color: var(--white);
 background-color: #23c6c8;
 border-color: #23c6c8;
 }
 .btn-info:hover,
 .btn-info:focus,
 .btn-info.focus {
-color: $tc-white;
+color: var(--white);
 background-color: #21b9bb;
 border-color: #21b9bb;
 }
 .btn-info.disabled,
 .btn-info:disabled {
-color: $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: $tc-white;
+color: var(--white);
 background-color: #21b9bb;
 border-color: #21b9bb;
 }
@@ -528,27 +528,27 @@ fieldset[disabled] .btn-default.active {
 color: #cacaca;
 }
 .btn-warning {
-color: $tc-white;
+color: var(--white);
 background-color: #f8ac59;
 border-color: #f8ac59;
 }
 .btn-warning:hover,
 .btn-warning:focus,
 .btn-warning.focus {
-color: $tc-white;
+color: var(--white);
 background-color: #f7a54a;
 border-color: #f7a54a;
 }
 .btn-warning.disabled,
 .btn-warning:disabled {
-color: $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: $tc-white;
+color: var(--white);
 background-color: #f7a54a;
 border-color: #f7a54a;
 }
@@ -559,20 +559,20 @@ border-color: #f7a54a;
 box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
 .btn-danger {
-color: $tc-white;
+color: var(--white);
 background-color: #ed5565;
 border-color: #ed5565;
 }
 .btn-danger:hover,
 .btn-danger:focus,
 .btn-danger.focus {
-color: $tc-white;
+color: var(--white);
 background-color: #ec4758;
 border-color: #ec4758;
 }
 .btn-danger.disabled,
 .btn-danger:disabled {
-color: $tc-white;
+color: var(--white);
 background-color: #ec4758;
 border-color: #ec4758;
 }
@@ -580,7 +580,7 @@ border-color: #ec4758;
 .btn-danger:not(:disabled):not(.disabled):active,
 .btn-danger:not(:disabled):not(.disabled).active,
 .show > .btn-danger.dropdown-toggle {
-color: $tc-white;
+color: var(--white);
 background-color: #ec4758;
 border-color: #ec4758;
 }
@@ -601,7 +601,7 @@ color: inherit;
 .btn-link:active,
 .btn-link.active,
 .open .dropdown-toggle.btn-link {
-color: $tc-primary;
+color: var(--tc-primary);
 text-decoration: none;
 }
 
@@ -647,9 +647,9 @@ border-radius: 30px;
 .btn-white:active:hover,
 .btn-white.active:hover,
 .btn-white.active:focus {
-color: $tc-white;
-border: 1px solid $tc-primary;
-background: $tc-primary;
+color: var(--white);
+border: 1px solid var(--tc-primary);
+background: var(--tc-primary);
 }
 
 .btn-white:active,
@@ -767,7 +767,7 @@ button.dim:before {
 font-size: 50px;
 line-height: 1em;
 font-weight: normal;
-color: $tc-white;
+color: var(--white);
 display: block;
 padding-top: 10px;
 }
@@ -807,4 +807,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 $gray-200;
+    border-bottom: 1px solid var(--gray-200);
 }
   
 .tc-card-title {
-    color: $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 $gray-200;
+    border-top: 1px solid var(--gray-200);
   
     button,
     .tc-btn {

package/scss/tcloud/custom/colors-prime.scss

@@ -1,39 +1,15 @@
-// =============================================
-// T-CLoud Prime
-// =============================================
-
-
+/*
 $prime-primary: #6B48FF;
-// color: $prime-primary;
-
 $prime-primary2:  #0897E9;
-
 $prime-complemt: #0ADBE3;
 $prime-complemt-2: #5B35FC;
-
 $prime-second:  #FEAC0E;
 $prime-second2:  #EEEEEE;
-
 $prime-white: #fff;
-// color: $prime-white;
-
 $prime-black: #363636;
-// color: $prime-black;
-
 $prime-gray-10: #f9f9f9;
 $prime-gray-50: #EEEEEE;
 $prime-gray-100: #C7C7C7;
-
 $prime-red: #cb0000;
 $prime-green: #1E8E3E;
-
-  // $i;
-
-  // font-size: 16px $i;
-  // text-transform: uppercase $i;
-
-  // TCLAUDI2
-  // ABCDE  .env-card {
-  
-    
-    // .label-success, .badge-success
+*/

package/scss/tcloud/custom/colors-standard.scss

@@ -1,33 +1,22 @@
-// =============================================
-// T-CLoud Standard
-// =============================================
-
+/*
 $tc-primary: #37b6c4;
 $tc-primary2: #136e92;
 $tc-complemt-3: #136e92;
-
 $tc-gray-700: #363636;
 $tc-gray-600: #4e4944;
 $tc-gray-500: #8a817b;
-
 $tc-gray-400: #cabfb5;
 $tc-gray-300: #d5ccc3;
-
 $tc-gray-200: #e5e3e1;
-
 $tc-gray-100: #f1f1f1;
 $tc-gray-50: #f8f9fa;
-
-
 $tc-black: #000;
 $tc-white: #fff;
-
 $tc-blue: #0897E9;
 $tc-dark: #363636;
-
 $tc-orange: orange;
-
 $tc-warning: orange;
 $tc-danger:  #D93025;
 $tc-success :#1E8E3E;
-$tc-complete :#039BE5;
+$tc-complete :#039BE5;
+*/