@dev-tcloud/tcloud-ui 0.0.84 → 0.0.86

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

@@ -0,0 +1,39 @@
+// =============================================
+// 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

@@ -0,0 +1,33 @@
+// =============================================
+// 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;

package/scss/tcloud/custom/colors.scss

@@ -1,5 +1,5 @@
 // =============================================
-// Colors V2
+// Common Colors
 // =============================================
 
 $black: #000;
@@ -8,20 +8,28 @@ $white: #fff;
 $blue: #0897E9;
 $dark: #363636;
 
-$orange: #FEAC0E;
-// $gray-100: #EEE;
-$gray-light: #EEE;
+$orange: orange;
+
+$warning: orange;
+$danger:  #D93025;
+$success :#1E8E3E;
+$complete :#039BE5;
+
 
+$gray-light: #EEE;
 $blue-500: #0ADBE3;
 $purple: #6B48FF;
 
 $red: red;
 
+$error:#ff5f5f;
+
 // =============================================
 // Colors V1
 // =============================================
 
-$primary: #37b6c4;
+
+
 $primary-700: #136e92;
 
 $secondary: #484440;
@@ -32,13 +40,49 @@ $gray-400: #D5CCC3;
 $gray-200: #F1F1F1;
 $gray-100: #F8F9FA;
 
-$warning: #ED9C2E;
-$danger:  #D93025;
-$success :#1E8E3E;
-$complete :#039BE5;
+
+
+
 
 :root {
-  --verde: #37b6c4;
+
+  // theme color
+
+  --tc-primary: #37b6c4;
+  // var(--tc-primary);
+
+  --tc-primary2: #136e92;
+
+  // commons
+
+  --orange: orange;
+  --red :#dc0217;
+  --azul: #1c84c6;
+  --green2: #10ba3c;
+  --green3: #00965A;
+  --dark-green: #037f9c;
+
+
+  // grays
+  --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;
+
+
+  // OLD Theme
+  --gray: #4e4944;
   --cinza: #8a817b;
+  --cinza1: #cabfb5;
+  --cinza2: #d5ccc3;
+  --cinza3: #e5e3e1;
   --cinza4: #f1f1f1;
+  --cinza5: #f8f9fa;
+
+  --verde: #37b6c4;
 }
+
+

package/scss/tcloud/custom/forms.scss

@@ -1,12 +1,15 @@
 // ---------------------------------
 // Forms
 // ---------------------------------
+// ---------------------------------
+// Forms
+// ---------------------------------
 
 .tc-form-control{
   display: block;
   width: 100%;
   padding: .375rem .75rem;
-  font-size: 1rem;
+  font-size: 12px;
   font-weight: 400;
   line-height: 1.5;
   color: #212529;
@@ -62,5 +65,8 @@ select.tc-form-control{
   button{
     align-self: end;
   }
+} 
 
-} 
+.tc-group-input-table td:last-child button {
+  color: var(--cinza);
+}

package/scss/tcloud/custom/mixins.scss

@@ -66,3 +66,250 @@
     border-color: $color transparent transparent transparent;
     border-width: $size $size 0 $size;
 }
+
+
+
+
+// ===============================================
+// Font and text
+// ===============================================
+
+@mixin bold {
+    font-weight: bold;
+}
+
+
+@mixin uppercase {
+    text-transform:  uppercase;
+}
+
+// ===============================================
+// Helpers
+// ===============================================
+
+@mixin test($args...) {
+  border: 1px solid $args;
+}
+
+@mixin flex-center {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+// ===============================================
+// Font and text
+// ===============================================
+
+@mixin bold {
+  font-weight: bold;
+}
+
+@mixin ellipsis {
+  text-overflow: ellipsis; /* enables ellipsis */
+  white-space: nowrap; /* keeps the text in a single line */
+  overflow: hidden; /* keeps the element from overflowing its parent */
+}
+
+// ===============================================
+// Misc
+// ===============================================
+
+@mixin arrow-top($size, $color) {
+  content: '';
+  height: 0;
+  width: 0;
+  border-style: solid;
+  border-color: transparent transparent $color transparent;
+  border-width: 0 $size $size $size;
+}
+
+@mixin arrow-bottom($size, $color) {
+  content: '';
+  height: 0;
+  width: 0;
+  border-style: solid;
+  border-color: $color transparent transparent transparent;
+  border-width: $size $size 0 $size;
+}
+
+@mixin thin-scroll-bar() {
+  &::-webkit-scrollbar {
+    width: 10px;
+  }
+  /* Track */
+  &::-webkit-scrollbar-track {
+    background: var(--tc-gray-200);
+    border-radius: 10px;
+  }
+  /* Handle */
+  &::-webkit-scrollbar-thumb {
+    background: var(--tc-gray-300);
+    border-radius: 10px;
+  }
+  /* Handle on hover */
+  &::-webkit-scrollbar-thumb:hover {
+    background: var(--tc-gray-400);
+  }
+}
+
+@mixin bdr-bottom( $sz, $clr) {
+  border-bottom: 1px solid $clr;
+  margin-bottom: $sz;
+  padding-bottom: $sz;
+}
+
+@mixin flex-center {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+// ===============================================
+// T-Cloud Prime
+// ===============================================
+
+@mixin prime-color {
+  // @include prime-color;
+  color: $prime-primary!important;
+}
+
+@mixin prime-gray-100 {
+  // @include prime-gray-100;
+  color: $prime-gray-100!important;
+}
+
+@mixin prime-gray-50 {
+  // @include prime-gray-50;
+  color: $prime-gray-50!important;
+}
+
+
+
+
+@mixin prime-bg {
+  // @include prime-bg;
+  background: $prime-primary!important;
+}
+
+@mixin prime-bgc {
+  // @include prime-bgc;
+  background-color: $prime-primary!important;
+}
+
+@mixin prime-bg-100 {
+  // @include prime-bg-100;
+  background: $prime-gray-100!important;
+}
+
+@mixin prime-bg-50 {
+  // @include prime-bg-50;
+  background: $prime-gray-50!important;
+}
+
+@mixin prime-bg-10 {
+  // @include prime-bg-10;
+  background: $prime-gray-10!important;
+}
+
+
+
+
+@mixin prime-bdr {
+  // @include prime-color;
+  border-color: $prime-primary!important;
+}
+
+@mixin prime-bdr-100 {
+  // @include prime-bdr-100;
+  border-color: $prime-gray-100!important;
+}
+
+@mixin prime-bdr-50 {
+  // @include prime-bdr-50;
+  border-color: $prime-gray-50!important;
+}
+
+
+
+
+@mixin prime-black {
+  // @include prime-black;
+  color: $prime-black!important;
+}
+
+@mixin prime-white {
+  // @include prime-white;
+  color: $prime-white!important;
+}
+
+@mixin prime-mkt-gradient {
+  // @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 */
+}
+
+@mixin prime-bg-gradient {
+  // @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 */
+}
+
+
+@mixin prime-title {
+  // @include prime-title;
+  font-size: 20px;
+  font-weight: bold;
+  text-transform: uppercase;
+  padding-bottom: 10px;
+  border-bottom: 1px solid $prime-gray-50;
+  margin-bottom: 20px;
+}
+
+
+@mixin prime-subtitle {
+  // @include prime-subtitle;
+  font-size: 16px !important;
+  text-transform: uppercase !important;
+  border-bottom: 1px solid $prime-gray-50 !important;
+  padding-bottom: 10px !important;
+  margin-bottom: 20px !important;
+}
+
+@mixin ico-menu($img, $hgt, $wdt) {
+  background: url(/assets/img/menu/#{$img}.svg);
+  height: $hgt;
+  width: $wdt;
+  background-repeat: no-repeat;
+  background-position: center;
+  
+  &::before {
+    display: none;
+  }
+  
+}
+
+@mixin ico-topmenu($img, $hgt, $wdt) {
+  background: url(/assets/img/topmenu/#{$img}.svg);
+  height: $hgt;
+  width: $wdt;
+  background-repeat: no-repeat;
+  background-position: center;
+  
+  &::before {
+    display: none !important;
+  }
+  
+}
+
+@mixin svg-prime {
+  filter: invert(37%) sepia(99%) saturate(5131%) hue-rotate(243deg) brightness(100%) contrast(103%);
+}

package/scss/tcloud/custom/variables.scss

@@ -0,0 +1,77 @@
+@import './colors-standard.scss';
+@import './colors-prime.scss';
+@import './colors.scss';
+
+
+
+
+// ==================================================
+// Old Colors
+// ==================================================
+
+
+// Basic Colors
+$navy: #1ab394;       // Primary color
+$dark-gray: #c2c2c2;  // Default color
+$blue: #1c84c6;       // Success color
+$lazur: #23c6c8;      // Info color
+$yellow: #f8ac59;     // Warning color
+$red: #ED5565;        // Danger color
+
+// Various colors
+$text-color: #676a6c;   // Body text
+$gray: #f3f3f4;         // Background wrapper color
+$light-gray: #D1DADE;   // Default label, badge
+$label-badge-color: #5E5E5E;
+$light-blue:#f3f6fb;
+
+// Spinner color and margin
+$spin-color: $navy;
+$spin-margin: 0 auto;
+
+//Basics
+$basic-link-color: #337ab7;
+
+// IBOX colors ( default panel colors)
+$border-color: #e7eaec;     // IBox border
+$ibox-title-bg:#ffffff;     // IBox Background header
+$ibox-content-bg:#ffffff;   // IBox Background content
+
+//Sidebar width
+$sidebar-width: 220px;
+
+// Boxed layout width
+$boxed-width: 1200px;
+$boxed-background: url('patterns/shattered.png');
+
+//Border radius for buttons
+$btn-border-radius: 3px;
+
+//Navigation
+$nav-bg: #0a85a4;
+$nav-profile-pattern: url("patterns/header-profile.png");
+$nav-text-color: #fafafa;
+
+
+
+@function getColorWithOpacity($color, $opacity) {
+  @return rgba($color, $opacity);
+}
+
+
+
+//Cores baseadas no UI-Kit do Adobe XD
+$primary: #37B6C4;
+$primary-hover: #037F9C;
+$tc-white-1: #FFF;
+$tc-white-2: #F1F1F1;
+$grey-1: #D5CCC3;
+$grey-2: #B9B9B9;
+$grey-3: #8A817B;
+$grey-4: #707070;
+$grey-5: #484440;
+
+$success: #1E8E3E;
+$warning: #ED9C2E;
+$danger: #D93025;
+$complimentary: #039BE5;

package/scss/tcloud/styles.scss

@@ -1,8 +1,8 @@
-@import 'custom/colors.scss';
+@import 'custom/variables.scss';
 @import 'custom/mixins.scss';
 
-@import 'custom/layout.scss';
 @import 'custom/buttons.scss';
-@import 'custom/forms.scss';
-@import 'custom/text.scss';
 @import 'custom/card.scss';
+@import 'custom/forms.scss';
+@import 'custom/layout.scss';
+@import 'custom/text.scss';