@dev-tcloud/tcloud-ui 4.2.1 → 5.0.0

package/scss/tcloud/custom/mixins.scss

@@ -1,319 +1,319 @@
-
-// ===============================================
-// 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: var(--tc-gray-200)) {
-    border: 1px solid $color;
-}
-
-@mixin bd-bottom($color: var(--tc-gray-200)) {
-    border-bottom: 1px solid $color;
-}
-
-@mixin bd-top($color: var(--tc-gray-200)) {
-    border-top: 1px solid $color;
-}
-
-@mixin bd-rgt($color: var(--tc-gray-200)) {
-    border-right: 1px solid $color;
-}
-
-@mixin bd-lft($color: var(--tc-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;
-}
-
-
-
-
-// ===============================================
-// 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: var(--tc-primary) !important;
-}
-
-@mixin prime-gray-100 {
-  // @include prime-gray-100;
-  color: var(--tc-gray-100) !important;
-}
-
-@mixin prime-gray-50 {
-  // @include prime-gray-50;
-  color: var(--tc-gray-50) !important;
-}
-
-
-
-
-@mixin prime-bg {
-  // @include prime-bg;
-  background: var(--tc-primary) !important;
-}
-
-@mixin prime-bgc {
-  // @include prime-bgc;
-  background-color: var(--tc-primary) !important;
-}
-
-@mixin prime-bg-100 {
-  // @include prime-bg-100;
-  background: var(--tc-gray-100) !important;
-}
-
-@mixin prime-bg-50 {
-  // @include prime-bg-50;
-  background: var(--tc-gray-50) !important;
-}
-
-@mixin prime-bg-10 {
-  // @include prime-bg-10;
-  background: var(--tc-gray-100) !important;
-}
-
-
-
-
-@mixin prime-bdr {
-  // @include prime-color;
-  border-color: var(--tc-primary) !important;
-}
-
-@mixin prime-bdr-100 {
-  // @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;
-}
-
-
-
-
-@mixin prime-black {
-  // @include prime-black;
-  color: var(--black) !important;
-}
-
-@mixin prime-white {
-  // @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 */
-}
-
-@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 */
-}
-
-
-@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;
-}
-
-
-@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;
-}
-
-@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%);
+
+// ===============================================
+// 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: var(--tc-gray-200)) {
+    border: 1px solid $color;
+}
+
+@mixin bd-bottom($color: var(--tc-gray-200)) {
+    border-bottom: 1px solid $color;
+}
+
+@mixin bd-top($color: var(--tc-gray-200)) {
+    border-top: 1px solid $color;
+}
+
+@mixin bd-rgt($color: var(--tc-gray-200)) {
+    border-right: 1px solid $color;
+}
+
+@mixin bd-lft($color: var(--tc-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;
+}
+
+
+
+
+// ===============================================
+// 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: var(--tc-primary) !important;
+}
+
+@mixin prime-gray-100 {
+  // @include prime-gray-100;
+  color: var(--tc-gray-100) !important;
+}
+
+@mixin prime-gray-50 {
+  // @include prime-gray-50;
+  color: var(--tc-gray-50) !important;
+}
+
+
+
+
+@mixin prime-bg {
+  // @include prime-bg;
+  background: var(--tc-primary) !important;
+}
+
+@mixin prime-bgc {
+  // @include prime-bgc;
+  background-color: var(--tc-primary) !important;
+}
+
+@mixin prime-bg-100 {
+  // @include prime-bg-100;
+  background: var(--tc-gray-100) !important;
+}
+
+@mixin prime-bg-50 {
+  // @include prime-bg-50;
+  background: var(--tc-gray-50) !important;
+}
+
+@mixin prime-bg-10 {
+  // @include prime-bg-10;
+  background: var(--tc-gray-100) !important;
+}
+
+
+
+
+@mixin prime-bdr {
+  // @include prime-color;
+  border-color: var(--tc-primary) !important;
+}
+
+@mixin prime-bdr-100 {
+  // @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;
+}
+
+
+
+
+@mixin prime-black {
+  // @include prime-black;
+  color: var(--black) !important;
+}
+
+@mixin prime-white {
+  // @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 */
+}
+
+@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 */
+}
+
+
+@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;
+}
+
+
+@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;
+}
+
+@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%);
 }