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

package/scss/tcloud/custom/card.scss

@@ -1,52 +1,52 @@
-// ---------------------------------
-// tc-card
-// ---------------------------------
-
-.tc-card {
-    font-size: 13px;
-    background: var(--white);
-    color: var(--tc-gray-500);
-    border-radius: 15px;
-    box-shadow: 2px 3px 20px rgb(0 0 0 / 8%);
-    padding: 20px;
-    margin-bottom: 20px;
-}
-  
-.tc-card-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);
-}
-  
-.tc-card-title {
-    color: var(--tc-primary);
-    font-size: 16px;
-    font-weight: normal;
-    text-transform: uppercase;
-    margin: 0;
-}
-  
-.tc-card-description {
-    font-size: 11px;
-    margin: 0;
-}
-  
-.tc-card-footer {
-    display: flex;
-    align-items: center;
-    flex-flow: row;
-    justify-content: flex-end;
-    gap: 20px;
-    margin-top: 15px;
-    padding-top: 15px;
-    border-top: 1px solid var(--tc-gray-200);
-  
-    button,
-    .tc-btn {
-      margin: 0!important;
-    }
+// ---------------------------------
+// tc-card
+// ---------------------------------
+
+.tc-card {
+    font-size: 13px;
+    background: var(--white);
+    color: var(--tc-gray-500);
+    border-radius: 15px;
+    box-shadow: 2px 3px 20px rgb(0 0 0 / 8%);
+    padding: 20px;
+    margin-bottom: 20px;
+}
+  
+.tc-card-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);
+}
+  
+.tc-card-title {
+    color: var(--tc-primary);
+    font-size: 16px;
+    font-weight: normal;
+    text-transform: uppercase;
+    margin: 0;
+}
+  
+.tc-card-description {
+    font-size: 11px;
+    margin: 0;
+}
+  
+.tc-card-footer {
+    display: flex;
+    align-items: center;
+    flex-flow: row;
+    justify-content: flex-end;
+    gap: 20px;
+    margin-top: 15px;
+    padding-top: 15px;
+    border-top: 1px solid var(--tc-gray-200);
+  
+    button,
+    .tc-btn {
+      margin: 0!important;
+    }
 }

package/scss/tcloud/custom/colors.scss

@@ -1,97 +1,97 @@
-:root {
-
-  body.tc-prime{
-    // theme color
-    --tc-primary: #6B48FF;
-    --tc-primary-lighten: #886dfc;
-    
-    --tc-primary2: #4a29dc;
-    --tc-complemt: #7b5ffa;
-    --tc-complemt-2: #5B35FC;
-    --tc-complemt-3: #8970fb;
-    
-    --tc-base-main: #363636;
-    --tc-base-main-lighten: #363431;
-
-    --second:  #FEAC0E;
-    --second2:  #EEEEEE;
-    --white: #fff;
-    --black: #363636;
-    --dark: #2f2f2f;
-    --red: #ff5555;
-    --green: #1E8E3E;
-
-    &.tc-standard-2 {
-      --tc-primary: #0897E9;
-      --tc-primary-lighten: #53A8E2;
-
-      --tc-primary2: #6B48FF;
-      --tc-complemt: #53A8E2;
-      --tc-complemt-2: #008BB2;
-      --tc-complemt-3: #68B9E3;
-    }
-  }
-
-  // theme color
-  --tc-primary: #37b6c4;
-  --tc-primary-lighten: #5ab8c2;
-
-  --tc-primary2: #136e92;
-  --tc-complemt: #0ADBE3;
-  --tc-complemt-2: #136e92;
-  --tc-complemt-3: #136e92;
-
-  --tc-base-main: #484440;
-  --tc-base-main-lighten: #4e4a45;
-
-  --tc-base-secondary: #fafafa;
-  
-
-  // commons
-  --orange: orange;
-  --orange-lighten: #ffaf1a;
-  --red :#dc0217;
-  --azul: #1c84c6;
-  --green: #1E8E3E;
-  --green2: #10ba3c;
-  --green3: #00965A;
-  --dark-green: #037f9c;
-  --black: #000;
-  --white: #fff;
-  --blue: #0897E9;
-  --dark: #363636;
-  --warning: orange;
-  --danger:  #D93025;
-  --success :#1E8E3E;
-  --complete :#039BE5;
-  --running :#2f0cf8;
-
-  --warning-lighten: #f3b137;
-  --danger-lighten: #eb5b50;
-
-  // 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;
-
-  //GoogleMap
-  --google-map-orange: #FF9800;
-  --google-map-blue: #0288D1;
-  --google-map-purple: #7B1FA2;
-  --google-map-green: #558B2F;
-}
+:root {
+
+  body.tc-prime{
+    // theme color
+    --tc-primary: #6B48FF;
+    --tc-primary-lighten: #886dfc;
+    
+    --tc-primary2: #4a29dc;
+    --tc-complemt: #7b5ffa;
+    --tc-complemt-2: #5B35FC;
+    --tc-complemt-3: #8970fb;
+    
+    --tc-base-main: #363636;
+    --tc-base-main-lighten: #363431;
+
+    --second:  #FEAC0E;
+    --second2:  #EEEEEE;
+    --white: #fff;
+    --black: #363636;
+    --dark: #2f2f2f;
+    --red: #ff5555;
+    --green: #1E8E3E;
+
+    &.tc-standard-2 {
+      --tc-primary: #0897E9;
+      --tc-primary-lighten: #53A8E2;
+
+      --tc-primary2: #6B48FF;
+      --tc-complemt: #53A8E2;
+      --tc-complemt-2: #008BB2;
+      --tc-complemt-3: #68B9E3;
+    }
+  }
+
+  // theme color
+  --tc-primary: #37b6c4;
+  --tc-primary-lighten: #5ab8c2;
+
+  --tc-primary2: #136e92;
+  --tc-complemt: #0ADBE3;
+  --tc-complemt-2: #136e92;
+  --tc-complemt-3: #136e92;
+
+  --tc-base-main: #484440;
+  --tc-base-main-lighten: #4e4a45;
+
+  --tc-base-secondary: #fafafa;
+  
+
+  // commons
+  --orange: orange;
+  --orange-lighten: #ffaf1a;
+  --red :#dc0217;
+  --azul: #1c84c6;
+  --green: #1E8E3E;
+  --green2: #10ba3c;
+  --green3: #00965A;
+  --dark-green: #037f9c;
+  --black: #000;
+  --white: #fff;
+  --blue: #0897E9;
+  --dark: #363636;
+  --warning: orange;
+  --danger:  #D93025;
+  --success :#1E8E3E;
+  --complete :#039BE5;
+  --running :#2f0cf8;
+
+  --warning-lighten: #f3b137;
+  --danger-lighten: #eb5b50;
+
+  // 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;
+
+  //GoogleMap
+  --google-map-orange: #FF9800;
+  --google-map-blue: #0288D1;
+  --google-map-purple: #7B1FA2;
+  --google-map-green: #558B2F;
+}

package/scss/tcloud/custom/forms.scss

@@ -1,81 +1,83 @@
-// ---------------------------------
-// Forms
-// ---------------------------------
-// ---------------------------------
-// Forms
-// ---------------------------------
-
-.tc-form-control{
-  display: block;
-  width: 100%;
-  padding: .375rem .75rem;
-  font-size: 12px;
-  font-weight: 400;
-  line-height: 1.5;
-  color: #212529;
-  background-color: #fff;
-  background-clip: padding-box;
-  border: 1px solid var(--tc-gray-300);;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  appearance: none;
-  border-radius: .25rem;
-  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
-  height: 40px;
-  cursor: pointer;
-
-  &:focus {
-    border-color: var(--tc-primary);
-    box-shadow: none;
-  }
-
-  &:focus-visible {
-    outline: 1px solid var(--tc-primary);
-    border-radius: 3px;
-  }
-
-  &:disabled {
-    cursor: not-allowed;
-    opacity: 0.6;
-    background-color: var(--tc-gray-200);
-  }
-}
-
-textarea.tc-form-control{
-  min-height: 80px;
-}
-
-
-select.tc-form-control{
-  background-color: #fff;
-  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
-  background-repeat: no-repeat;
-  background-position: right .75rem center;
-  background-size: 16px 12px;
-
-  border: 1px solid var(--tc-gray-300);
-  border-radius: 3px;
-  color: var(--cinza);
-  font-family: "Open Sans";
-  height: 40px !important;
-  padding: 0 10px;
-
-}
-
-
-.tc-form-group{
-  margin-top: 10px;
-  display: flex;
-
-  input, select, textarea {
-    margin-right: 15px;
-  }
-
-  button{
-    align-self: end;
-  }
-}
-
-.tc-group-input-table td:last-child button {
-  color: var(--cinza);
-}
+// ---------------------------------
+// Forms
+// ---------------------------------
+// ---------------------------------
+// Forms
+// ---------------------------------
+
+.tc-form-control{
+  display: block;
+  width: 100%;
+  padding: .375rem .75rem;
+  font-size: 12px;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid var(--tc-gray-300);;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-radius: .25rem;
+  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+  height: 40px;
+  cursor: pointer;
+  font-family: var(--f-family);
+
+  &:focus {
+    border-color: var(--c-primary-500);
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    outline: 1px solid var(--c-primary-500);
+    border-radius: 3px;
+  }
+
+  &:disabled {
+    cursor: not-allowed;
+    opacity: 0.6;
+    background-color: var(--tc-gray-200);
+  }
+}
+
+textarea.tc-form-control{
+  min-height: 80px;
+  font-family: var(--f-family);
+}
+
+
+select.tc-form-control{
+  background-color: #fff;
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%23343a40' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='M2 5l6 6 6-6'/%3e%3c/svg%3e");
+  background-repeat: no-repeat;
+  background-position: right .75rem center;
+  background-size: 16px 12px;
+
+  border: 1px solid var(--tc-gray-300);
+  border-radius: 3px;
+  color: var(--cinza);
+  font-family: "Open Sans";
+  height: 40px !important;
+  padding: 0 10px;
+  font-family: var(--f-family);
+}
+
+
+.tc-form-group{
+  margin-top: 10px;
+  display: flex;
+
+  input, select, textarea {
+    margin-right: 15px;
+  }
+
+  button{
+    align-self: end;
+  }
+}
+
+.tc-group-input-table td:last-child button {
+  color: var(--cinza);
+}

package/scss/tcloud/custom/layout.scss

@@ -1,5 +1,5 @@
-// ::ng-deep component {}
-
-// =============================================
-// Structure
-// =============================================
+// ::ng-deep component {}
+
+// =============================================
+// Structure
+// =============================================

package/scss/tcloud/custom/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;
+    }
+  }
 }