@dev-tcloud/tcloud-ui 4.0.0 → 4.1.0

package/scss/tcloud/custom/mixins.scss

@@ -4,12 +4,12 @@
 // ===============================================
 
 @mixin bold {
-  font-weight: bold;
+    font-weight: bold;
 }
 
 
 @mixin uppercase {
-  text-transform:  uppercase;
+    text-transform:  uppercase;
 }
 
 
@@ -19,7 +19,7 @@
 // ===============================================
 
 @mixin test($args...){
-  border:1px solid $args
+    border:1px solid $args
 }
 
 
@@ -29,42 +29,42 @@
 // ===============================================
 
 @mixin brdr($color: var(--tc-gray-200)) {
-  border: 1px solid $color;
+    border: 1px solid $color;
 }
 
 @mixin bd-bottom($color: var(--tc-gray-200)) {
-  border-bottom: 1px solid $color;
+    border-bottom: 1px solid $color;
 }
 
 @mixin bd-top($color: var(--tc-gray-200)) {
-  border-top: 1px solid $color;
+    border-top: 1px solid $color;
 }
 
 @mixin bd-rgt($color: var(--tc-gray-200)) {
-  border-right: 1px solid $color;
+    border-right: 1px solid $color;
 }
 
 @mixin bd-lft($color: var(--tc-gray-200)) {
-  border-left: 1px solid $color;
+    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;
+    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;
+    content: '';
+    height: 0;
+    width: 0;
+    border-style: solid;
+    border-color: $color transparent transparent transparent;
+    border-width: $size $size 0 $size;
 }
 
 
@@ -75,12 +75,12 @@
 // ===============================================
 
 @mixin bold {
-  font-weight: bold;
+    font-weight: bold;
 }
 
 
 @mixin uppercase {
-  text-transform:  uppercase;
+    text-transform:  uppercase;
 }
 
 // ===============================================
@@ -88,13 +88,13 @@
 // ===============================================
 
 @mixin test($args...) {
-border: 1px solid $args;
+  border: 1px solid $args;
 }
 
 @mixin flex-center {
-display: flex;
-align-items: center;
-justify-content: center;
+  display: flex;
+  align-items: center;
+  justify-content: center;
 }
 
 // ===============================================
@@ -102,13 +102,13 @@ justify-content: center;
 // ===============================================
 
 @mixin bold {
-font-weight: 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 */
+  text-overflow: ellipsis; /* enables ellipsis */
+  white-space: nowrap; /* keeps the text in a single line */
+  overflow: hidden; /* keeps the element from overflowing its parent */
 }
 
 // ===============================================
@@ -116,53 +116,53 @@ overflow: hidden; /* keeps the element from overflowing its parent */
 // ===============================================
 
 @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;
+  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;
+  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);
-}
+  &::-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;
+  border-bottom: 1px solid $clr;
+  margin-bottom: $sz;
+  padding-bottom: $sz;
 }
 
 @mixin flex-center {
-display: flex;
-justify-content: center;
-align-items: center;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 }
 
 // ===============================================
@@ -170,150 +170,150 @@ align-items: center;
 // ===============================================
 
 @mixin prime-color {
-// @include prime-color;
-color: var(--tc-primary) !important;
+  // @include prime-color;
+  color: var(--tc-primary) !important;
 }
 
 @mixin prime-gray-100 {
-// @include prime-gray-100;
-color: var(--tc-gray-100) !important;
+  // @include prime-gray-100;
+  color: var(--tc-gray-100) !important;
 }
 
 @mixin prime-gray-50 {
-// @include prime-gray-50;
-color: var(--tc-gray-50) !important;
+  // @include prime-gray-50;
+  color: var(--tc-gray-50) !important;
 }
 
 
 
 
 @mixin prime-bg {
-// @include prime-bg;
-background: var(--tc-primary) !important;
+  // @include prime-bg;
+  background: var(--tc-primary) !important;
 }
 
 @mixin prime-bgc {
-// @include prime-bgc;
-background-color: var(--tc-primary) !important;
+  // @include prime-bgc;
+  background-color: var(--tc-primary) !important;
 }
 
 @mixin prime-bg-100 {
-// @include prime-bg-100;
-background: var(--tc-gray-100) !important;
+  // @include prime-bg-100;
+  background: var(--tc-gray-100) !important;
 }
 
 @mixin prime-bg-50 {
-// @include prime-bg-50;
-background: var(--tc-gray-50) !important;
+  // @include prime-bg-50;
+  background: var(--tc-gray-50) !important;
 }
 
 @mixin prime-bg-10 {
-// @include prime-bg-10;
-background: var(--tc-gray-100) !important;
+  // @include prime-bg-10;
+  background: var(--tc-gray-100) !important;
 }
 
 
 
 
 @mixin prime-bdr {
-// @include prime-color;
-border-color: var(--tc-primary) !important;
+  // @include prime-color;
+  border-color: var(--tc-primary) !important;
 }
 
 @mixin prime-bdr-100 {
-// @include prime-bdr-100;
-border-color: var(--tc-gray-100) !important;
+  // @include prime-bdr-100;
+  border-color: var(--tc-gray-100) !important;
 }
 
 @mixin prime-bdr-50 {
-// @include prime-bdr-50;
-border-color: var(--tc-gray-50) !important;
+  // @include prime-bdr-50;
+  border-color: var(--tc-gray-50) !important;
 }
 
 
 
 
 @mixin prime-black {
-// @include prime-black;
-color: var(--black) !important;
+  // @include prime-black;
+  color: var(--black) !important;
 }
 
 @mixin prime-white {
-// @include prime-white;
-color: var(--white) !important;
+  // @include prime-white;
+  color: var(--white) !important;
 }
 
 @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: $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 */
+  $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: $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: $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 */
+  $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: $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 */
 }
 
 
 @mixin prime-title {
-// @include prime-title;
-font-size: 20px;
-font-weight: bold;
-text-transform: uppercase;
-padding-bottom: 10px;
-border-bottom: 1px solid var(--tc-gray-50);
-margin-bottom: 20px;
+  // @include prime-title;
+  font-size: 20px;
+  font-weight: bold;
+  text-transform: uppercase;
+  padding-bottom: 10px;
+  border-bottom: 1px solid var(--tc-gray-50);
+  margin-bottom: 20px;
 }
 
 
 @mixin prime-subtitle {
-// @include prime-subtitle;
-font-size: 16px !important;
-text-transform: uppercase !important;
-border-bottom: 1px solid var(--tc-gray-50) !important;
-padding-bottom: 10px !important;
-margin-bottom: 20px !important;
+  // @include prime-subtitle;
+  font-size: 16px !important;
+  text-transform: uppercase !important;
+  border-bottom: 1px solid var(--tc-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;
-}
-
+  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;
-}
-
+  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%);
+  filter: invert(37%) sepia(99%) saturate(5131%) hue-rotate(243deg) brightness(100%) contrast(103%);
 }

package/scss/tcloud/custom/variables.scss

@@ -1,7 +1,10 @@
 @import './colors.scss';
 
 
-
+:root {
+  //--font-awesome: 'Font Awesome 5 free';
+  --font-awesome: 'Font Awesome 6 Pro';
+}
 
 // ==================================================
 // Old Colors

package/scss/tcloud/disaster-recovery/colors.scss

@@ -0,0 +1,15 @@
+:root {
+
+  body.tc-disaster-recovery{
+    // theme color
+    /*
+    --tc-primary: var(--orange);
+    --tc-primary-lighten: #ffba3a;
+    
+    --tc-primary2: #d89c2c;
+    --tc-complemt: #ecb54e;
+    --tc-complemt-2: #b57a0e;
+    --tc-complemt-3: #c39643;
+    */
+  }
+}

package/scss/tcloud/disaster-recovery/layout.scss

@@ -0,0 +1,14 @@
+body.tc-disaster-recovery {
+
+  .gray-bg, .bg-muted {
+    background-color: #ffeed9;
+  }
+
+  nav.navbar{
+    .tcloud-name{
+      color: #fff;
+    }
+    background-color: var(--orange) !important;
+  }
+ 
+}

package/scss/tcloud/disaster-recovery/styles.scss

@@ -0,0 +1,2 @@
+@import 'colors.scss';
+@import 'layout.scss';