@dev-tcloud/tcloud-ui 0.0.26 → 0.0.27

package/README.md

@@ -49,13 +49,14 @@ import { TCloudUiModule } from '@dev-tcloud/tcloud-ui';
 })
 ```    
 
-## Add TCloud-ui style
+## Add TCloud-ui components style and tcloud style 
 
 angular.json
 
 ```javascript
   "styles": [
-    "node_modules/@dev-tcloud/tcloud-ui/assets/scss/styles.scss"
+    "node_modules/@dev-tcloud/tcloud-ui/scss/components/styles.scss",
+    "node_modules/@dev-tcloud/tcloud-ui/scss/tcloud/styles.scss"
   ],
 ``` 
 

package/package.json

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

package/scss/tcloud/custom/buttons.scss

@@ -0,0 +1,88 @@
+// ---------------------------------
+// Buttons
+// ---------------------------------
+
+.tc-btn {
+    font-size: 12px;  
+    background: $gray-200;
+    color: $dark;
+    cursor: pointer;
+    border-radius: 30px;
+    display: inline-flex;
+    align-items: center;
+    transition: all 0.25s;
+    padding: 0 25px;
+    height: 40px;
+    border: 1px solid $gray-200;
+
+    p {
+      font-size: 13px;
+      color: $dark;
+    }
+  
+    i {
+      margin-right: 10px;
+      font-size: 20px;
+    }
+  
+    &:hover {
+      color: $dark;
+      background: $gray-100;
+      border-color: $gray-200;
+    }
+    &:link { text-decoration: none; }
+    &:visited { text-decoration: none; }
+    &:hover { text-decoration: none; }
+    &:active { text-decoration: none; }
+}
+  
+.tc-btn:disabled,
+.tc-btn[disabled]{
+    cursor: no-drop;
+    opacity: 0.6;
+}
+  
+  
+.tc-btn-primary{
+    color: $white;
+    background: $primary;
+    border-color: $primary;
+
+    &:hover {
+        color: $white;
+        background: $primary-700;
+        border-color: $primary;
+    }
+}
+  
+.tc-btn-text {
+    cursor: pointer;
+    padding: 10px;
+    background: none;
+    color: $black;
+    border: none;
+  
+    p {
+      text-align: left;
+      color: $black;
+    }
+}
+
+.tc-btn-link {
+    cursor: pointer;
+    padding: 10px;
+    background: none;
+    color: $primary;
+    border: none;
+    font-size: 15px;
+
+    p {
+      text-align: left;
+      color: $primary;
+    }
+
+    &:hover{
+        color: $primary-700;
+    }
+}
+  

package/scss/tcloud/custom/card.scss

@@ -0,0 +1,50 @@
+// ---------------------------------
+// tc-card
+// ---------------------------------
+
+.tc-card {
+    font-size: 13px;
+    background: #fff;
+    border-radius: 20px;
+    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 $gray-200;
+}
+  
+.tc-card-title {
+    color: $primary;
+    font-size: 16px;
+    font-weight: normal;
+    text-transform: uppercase;
+    margin: 0;
+}
+  
+.tc-card-description {
+    font-size: 11px;
+}
+  
+.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 $gray-200;
+  
+    button,
+    .tc-btn {
+      margin: 0!important;
+    }
+}

package/scss/tcloud/custom/colors.scss

@@ -0,0 +1,44 @@
+// =============================================
+// Colors V2
+// =============================================
+
+$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;
+
+:root {
+  --verde: #37b6c4;
+  --cinza: #8a817b;
+  --cinza4: #f1f1f1;
+}

package/scss/tcloud/custom/forms.scss

@@ -0,0 +1,65 @@
+// ---------------------------------
+// Forms
+// ---------------------------------
+
+.tc-form-control{
+  display: block;
+  width: 100%;
+  padding: .375rem .75rem;
+  font-size: 1rem;
+  font-weight: 400;
+  line-height: 1.5;
+  color: #212529;
+  background-color: #fff;
+  background-clip: padding-box;
+  border: 1px solid #ced4da;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  appearance: none;
+  border-radius: .25rem;
+  transition: border-color .15s ease-in-out,box-shadow .15s ease-in-out;
+  
+
+  &:focus {
+    border-color: $primary;
+    box-shadow: none;
+  }
+
+  &:focus-visible {
+    outline: 1px solid $primary;
+    border-radius: 3px;
+  }
+}
+
+input.tc-form-control, 
+select.tc-form-control{
+  height: 40px;
+}
+
+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; 
+}
+
+
+.tc-form-group{
+  margin-top: 10px;
+  display: flex;
+
+  input, select, textarea {
+    margin-right: 15px;
+  }
+
+  button{
+    align-self: end;
+  }
+
+} 

package/scss/tcloud/custom/layout.scss

@@ -0,0 +1,81 @@
+// ::ng-deep component {}
+
+// =============================================
+// Structure
+// =============================================
+
+main {
+    position: relative;
+    display: grid;
+    gap: 20px;
+    grid-template-columns: 170px auto;
+    grid-template-areas:
+    "nav nav"
+    "section section";
+}
+
+header {
+    background: $white;
+    position: fixed;
+    margin-bottom: 20px;
+    width: 100%;
+    @include bd-bottom;
+    z-index: 2;
+}
+
+section {
+  flex: 1;
+}
+
+nav {
+    background-color: $gray-light;
+    padding: 0 15px;
+}
+
+.content {
+    margin-bottom: 20px;
+}
+
+.content-wrap {
+    margin-bottom: 20px;
+    background: #cccccc24;
+    padding: 10px;
+    border-radius: 5px;
+
+    button, .btn {
+        margin-bottom: 20px;
+    }
+
+    .wrap {
+        margin-bottom: 20px;
+    }
+}
+
+.sidemenu {
+  display: grid;
+  grid-template-columns: 100px auto;
+  gap: 20px;
+  position: relative;
+}
+
+.sidemenu-nav {
+  position: relative;
+  border-right: 1px solid $gray-200;
+}
+
+.sidemenu-nav-items {
+  position: fixed;
+}
+
+.sidemenu-nav-item {
+    display: block;
+    text-decoration: none;
+    color: $blue;
+    margin-bottom: 10px;
+}
+
+// Responsive Styles
+@media screen and (max-width: 767px) {
+
+}
+// Default Styles

package/scss/tcloud/custom/mixins.scss

@@ -0,0 +1,68 @@
+
+// ===============================================
+// Font and text
+// ===============================================
+
+@mixin bold {
+    font-weight: bold;
+}
+
+
+@mixin uppercase {
+    text-transform:  uppercase;
+}
+
+
+
+// ===============================================
+// Helpers
+// ===============================================
+
+@mixin test($args...){
+    border:1px solid $args
+}
+
+
+
+// ===============================================
+// Misc
+// ===============================================
+
+@mixin brdr($color: $gray-200) {
+    border: 1px solid $color;
+}
+
+@mixin bd-bottom($color: $gray-200) {
+    border-bottom: 1px solid $color;
+}
+
+@mixin bd-top($color: $gray-200) {
+    border-top: 1px solid $color;
+}
+
+@mixin bd-rgt($color: $gray-200) {
+    border-right: 1px solid $color;
+}
+
+@mixin bd-lft($color: $gray-200) {
+    border-left: 1px solid $color;
+}
+
+
+@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;
+}

package/scss/tcloud/custom/text.scss

@@ -0,0 +1,50 @@
+
+h1, h2, h3, h4, h5, h6, p {
+    margin: 0;
+}
+  
+h2, h3, h4, h5, h6 {
+    margin-bottom: 20px;
+}
+  
+p,
+label,
+ul,
+dl {
+font-size: 13px;
+}
+  
+p,
+ul,
+dl,
+code {
+    line-height: 20px;
+}
+  
+.text {
+    margin-bottom: 20px;
+}
+
+.tc-uppercase{
+    text-transform: uppercase;
+}
+
+.tc-lowercase{
+    text-transform: lowercase;
+}
+
+.tc-text-left{
+    text-align: left;
+}
+
+.tc-text-center{
+    text-align: center;
+}
+
+.tc-text-right{
+    text-align: right;
+}
+
+.tc-text-primary {
+    color: #37b6c4;
+}

package/scss/tcloud/styles.scss

@@ -0,0 +1,8 @@
+@import 'custom/colors.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';