@dev-tcloud/tcloud-ui 0.1.15 → 0.1.17

package/scss/tcloud/custom/buttons.scss

@@ -15,72 +15,92 @@
   height: 40px;
   border: 1px solid var(--tc-gray-100);
 
+p {
+  font-size: 13px;
+  color: var(--tc-gray-700);
+}
 
-  p {
-    font-size: 13px;
-    color: var(--tc-gray-700);
-  }
+i {
+  margin-right: 6px;
+  margin-left: 6px;
+  font-size: 16px;
+}
 
-  i {
-    margin-right: 10px;
-    font-size: 16px;
-  }
+&:hover {
+  color: var(--tc-primary);
+  background: var(--tc-gray-50);
+  border-color: var(--tc-gray-100);
+}
 
-  &:hover {
-    color: var(--tc-primary);
-    background: var(--tc-gray-50);
-    border-color: var(--tc-gray-100);
-  }
-  &:link { text-decoration: none; }
-  &:visited { text-decoration: none; }
-  &:hover { text-decoration: none; }
-  &:active { text-decoration: none; }
+&:link,
+&:visited,
+&:hover,
+&:active {
+  text-decoration: none;
 }
 
-.tc-btn-block{
-  display: block;
+&.full {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
   width: 100%;
-  text-align: center;
-  padding: 10px 25px;
+}
+}
+
+.tc-btn-block {
+display: block;
+width: 100%;
+text-align: center;
+padding: 10px 25px;
 }
 
 .tc-btn:disabled,
 .tc-btn[disabled]{
-  cursor: no-drop;
-  opacity: 0.6;
+cursor: no-drop;
+opacity: 0.6;
 }
 
-.tc-btn-primary{
+.tc-btn-primary {
+color: var(--white);
+background: var(--tc-primary);
+border-color: var(--tc-primary);
+
+&:hover {
   color: var(--white);
-  background: var(--tc-primary);
+  background: var(--tc-complemt-3);
   border-color: var(--tc-primary);
+}
 
-  &:hover {
-      color: var(--white);
-      background: var(--tc-complemt-3);
-      border-color: var(--tc-primary);
-  }
+
+&.full {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  width: 100%;
+}
 }
 
 .tc-btn-link {
-  cursor: pointer;
-  padding: 10px;
-  background: none;
-  color: var(--tc-primary);
-  border: none;
+cursor: pointer;
+padding: 10px;
+background: none;
+color: var(--tc-primary);
+border: none;
 
-  p {
-    text-align: left;
-    color: var(--tc-primary);
-  }
+p {
+  text-align: left;
+  color: var(--tc-primary);
+}
 
-  &:hover{
-      color: var(--tc-complemt-3);
-  }
+&:hover{
+    color: var(--tc-complemt-3);
+}
 
-  &:disabled{
-    color: var(--tc-gray-700);
-  }
+&:disabled{
+  color: var(--tc-gray-700);
+}
 }
 
 .tc-btn:disabled {
@@ -162,17 +182,13 @@ padding: 10px 20px;
 cursor: pointer;
 border: none!important;
 transition: all 0.25s;
-
 }
 
 .tc-btn-primary.full {
 width: 100%!important;
 }
 
-.tc-btn-primary.full.txt-center {
-justify-content: center;
-}
-
+.tc-btn-primary.full.txt-center,
 .tc-btn-primary.txt-center {
 justify-content: center;
 }
@@ -211,11 +227,11 @@ padding: 10px 25px;
 cursor: pointer;
 
 .btn-new-outline i {
-  margin: 0 10px 0 5px;
-  
-  &:nth-child(2) {
-    margin: 0 0 0 10px;
-  }
+margin: 0 10px 0 5px;
+
+&:nth-child(2) {
+  margin: 0 0 0 10px;
+}
 }
 }
 
@@ -261,23 +277,23 @@ padding: 10px 20px;
 border: none!important;
 transition: all 0.25s;
 cursor: pointer;
-}
 
-.btn-disabled:disabled {
-background: var(--tc-gray-100) !important;
-color: var(--tc-gray-600) !important;
-cursor: default;
+&:disabled {
+  background: var(--tc-gray-100) !important;
+  color: var(--tc-gray-600) !important;
+  cursor: default;
 }
+}
+
 
 .btn-new-white {
+font-size: 12px;
+font-weight: normal;
 
 display: inline-flex;
 align-items: center;
 color: var(--tc-primary);
 background: var(--white);
-
-font-size: 12px;
-font-weight: normal;
 border-radius: 30px;
 padding: 10px 20px;
 cursor: pointer;
@@ -326,13 +342,13 @@ box-shadow: none;
 }
 
 .btn-xs {
-font-size: 0.7rem;
+font-size: 12px;
 padding: 0.2rem 0.4rem;
 }
 
 .btn-group-sm > .btn,
 .btn-sm {
-font-size: .8rem;
+font-size: 12px;
 }
 
 .float-e-margins .btn {
@@ -371,36 +387,42 @@ color: var(--tc-danger);
 color: var(--white);
 }
 
-.btn.active,
-.btn:active {
-background-image: none;
-outline: 0;
--webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+.btn {
+
+&.active,
+&:active {
+  background-image: none;
+  outline: 0;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+}
 }
 
 .btn-primary {
+font-size: 12px;
 color: var(--white);
 background-color: var(--tc-primary)!important;
 border-color: var(--tc-primary)!important;
 padding: 10px 20px;
 border-radius: 20px;
-}
 
-.btn-primary:hover,
-.btn-primary:focus,
-.btn-primary.focus {
-background-color: var(--tc-primary)2!important;
-border-color: var(--tc-primary)2!important;
-color: var(--white) !important;
+&:hover,
+&:focus,
+&.focus {
+  background-color: var(--tc-primary)2!important;
+  border-color: var(--tc-primary)2!important;
+  color: var(--white) !important;
 }
 
-.btn-primary.disabled,
-.btn-primary:disabled {
-color: var(--tc-gray-400);
-background-color: var(--tc-gray-500);
-border-color: var(--tc-gray-500);
+&.disabled,
+&:disabled {
+  color: var(--tc-gray-400);
+  background-color: var(--tc-gray-500);
+  border-color: var(--tc-gray-500);
 }
+}
+
+
 
 .btn-primary:not(:disabled):not(.disabled):active,
 .btn-primary:not(:disabled):not(.disabled).active,
@@ -409,6 +431,7 @@ color: var(--white);
 background-color: #18a689;
 border-color: #18a689;
 }
+
 .btn-primary:not(:disabled):not(.disabled):active:focus,
 .btn-primary:not(:disabled):not(.disabled).active:focus,
 .show > .btn-primary.dropdown-toggle:focus {
@@ -424,20 +447,23 @@ margin: 0 10px 0 0;
 color: var(--white);
 background-color: var(--tc-primary);
 border-color: var(--tc-primary);
+
+&:hover,
+&:focus,
+&.focus {
+  color: var(--white);
+  background-color: var(--tc-primary);
+  border-color: var(--tc-primary);
 }
-.btn-success:hover,
-.btn-success:focus,
-.btn-success.focus {
-color: var(--white);
-background-color: var(--tc-primary);
-border-color: var(--tc-primary);
+
+&.disabled,
+&:disabled {
+  color: var(--white);
+  background-color: #1a7bb9;
+  border-color: #1a7bb9;
 }
-.btn-success.disabled,
-.btn-success:disabled {
-color: var(--white);
-background-color: #1a7bb9;
-border-color: #1a7bb9;
 }
+
 .btn-success:not(:disabled):not(.disabled):active,
 .btn-success:not(:disabled):not(.disabled).active,
 .show > .btn-success.dropdown-toggle {
@@ -445,30 +471,35 @@ color: var(--white);
 background-color: var(--tc-primary);
 border-color: var(--tc-primary);
 }
+
 .btn-success:not(:disabled):not(.disabled):active:focus,
 .btn-success:not(:disabled):not(.disabled).active:focus,
 .show > .btn-success.dropdown-toggle:focus {
 -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
+
 .btn-info {
 color: var(--white);
 background-color: #23c6c8;
 border-color: #23c6c8;
 }
+
 .btn-info:hover,
 .btn-info:focus,
 .btn-info.focus {
 color: var(--white);
 background-color: #21b9bb;
 border-color: #21b9bb;
+
+&.disabled,
+&:disabled {
+  color: var(--white);
+  background-color: #21b9bb;
+  border-color: #21b9bb;
 }
-.btn-info.disabled,
-.btn-info:disabled {
-color: var(--white);
-background-color: #21b9bb;
-border-color: #21b9bb;
 }
+
 .btn-info:not(:disabled):not(.disabled):active,
 .btn-info:not(:disabled):not(.disabled).active,
 .show > .btn-info.dropdown-toggle {
@@ -476,44 +507,61 @@ color: var(--white);
 background-color: #21b9bb;
 border-color: #21b9bb;
 }
+
 .btn-info:not(:disabled):not(.disabled):active:focus,
 .btn-info:not(:disabled):not(.disabled).active:focus,
 .show > .btn-info.dropdown-toggle:focus {
 -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
+
 .btn-default {
 color: inherit;
 background: white;
 border: 1px solid var(--tc-gray-300);
+font-size: 12px;
+
+&:hover,
+&:focus,
+&:active,
+&.active,
+&:active:focus,
+&:active:hover,
+&.active:hover {
+  color: inherit;
+  border: 1px solid #d2d2d2;
+}
+
+&:active,
+&.active {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
+}
+
+&.disabled,
+&.disabled:hover,
+&.disabled:focus,
+&.disabled:active,
+&.disabled.active,
+&[disabled],
+&[disabled]:hover,
+&[disabled]:focus,
+&[disabled]:active,
+&.active[disabled] {
+  color: #cacaca;
+}
 }
-.btn-default:hover,
-.btn-default:focus,
-.btn-default:active,
-.btn-default.active,
+
 .open .dropdown-toggle.btn-default,
-.btn-default:active:focus,
-.btn-default:active:hover,
-.btn-default.active:hover,
 .btn-default.active:focus {
 color: inherit;
 border: 1px solid #d2d2d2;
 }
-.btn-default:active,
-.btn-default.active,
+
 .open .dropdown-toggle.btn-default {
 box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
 }
-.btn-default.disabled,
-.btn-default.disabled:hover,
-.btn-default.disabled:focus,
-.btn-default.disabled:active,
-.btn-default.disabled.active,
-.btn-default[disabled],
-.btn-default[disabled]:hover,
-.btn-default[disabled]:focus,
-.btn-default[disabled]:active,
-.btn-default.active[disabled],
+
+
 fieldset[disabled] .btn-default,
 fieldset[disabled] .btn-default:hover,
 fieldset[disabled] .btn-default:focus,
@@ -521,101 +569,135 @@ fieldset[disabled] .btn-default:active,
 fieldset[disabled] .btn-default.active {
 color: #cacaca;
 }
+
 .btn-warning {
 color: var(--white);
 background-color: #f8ac59;
 border-color: #f8ac59;
+
+&:hover,
+&:focus,
+&.focus {
+  color: var(--white);
+  background-color: #f7a54a;
+  border-color: #f7a54a;
 }
-.btn-warning:hover,
-.btn-warning:focus,
-.btn-warning.focus {
-color: var(--white);
-background-color: #f7a54a;
-border-color: #f7a54a;
+
+&.disabled,
+&:disabled {
+  color: var(--white);
+  background-color: #f7a54a;
+  border-color: #f7a54a;
+}
+
+&:not(:disabled):not(.disabled):active,
+&:not(:disabled):not(.disabled).active {
+  color: var(--white);
+  background-color: #f7a54a;
+  border-color: #f7a54a;
+}
+
+&:not(:disabled):not(.disabled):active:focus,
+&:not(:disabled):not(.disabled).active:focus {
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
-.btn-warning.disabled,
-.btn-warning:disabled {
-color: var(--white);
-background-color: #f7a54a;
-border-color: #f7a54a;
 }
-.btn-warning:not(:disabled):not(.disabled):active,
-.btn-warning:not(:disabled):not(.disabled).active,
+
 .show > .btn-warning.dropdown-toggle {
 color: var(--white);
 background-color: #f7a54a;
 border-color: #f7a54a;
+
+&:focus {
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
-.btn-warning:not(:disabled):not(.disabled):active:focus,
-.btn-warning:not(:disabled):not(.disabled).active:focus,
-.show > .btn-warning.dropdown-toggle:focus {
--webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
+
 .btn-danger {
 color: var(--white);
 background-color: #ed5565;
 border-color: #ed5565;
+&:hover,
+&:focus,
+&.focus {
+  color: var(--white);
+  background-color: #ec4758;
+  border-color: #ec4758;
 }
-.btn-danger:hover,
-.btn-danger:focus,
-.btn-danger.focus {
-color: var(--white);
-background-color: #ec4758;
-border-color: #ec4758;
+
+&.disabled,
+&:disabled {
+  color: var(--white);
+  background-color: #ec4758;
+  border-color: #ec4758;
+}
+
+&:not(:disabled):not(.disabled):active,
+&:not(:disabled):not(.disabled).active {
+  color: var(--white);
+  background-color: #ec4758;
+  border-color: #ec4758;
+}
+
+&:not(:disabled):not(.disabled):active:focus,
+&:not(:disabled):not(.disabled).active:focus {
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
-.btn-danger.disabled,
-.btn-danger:disabled {
-color: var(--white);
-background-color: #ec4758;
-border-color: #ec4758;
 }
 
-.btn-danger:not(:disabled):not(.disabled):active,
-.btn-danger:not(:disabled):not(.disabled).active,
 .show > .btn-danger.dropdown-toggle {
 color: var(--white);
 background-color: #ec4758;
 border-color: #ec4758;
-}
 
-.btn-danger:not(:disabled):not(.disabled):active:focus,
-.btn-danger:not(:disabled):not(.disabled).active:focus,
-.show > .btn-danger.dropdown-toggle:focus {
--webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+&:focus {
+  -webkit-box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
+  box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);
 }
+}
+
 
 .btn-link {
 color: inherit;
+
+&:hover,
+&:focus,
+&:active,
+&.active {
+  color: var(--tc-primary);
+  text-decoration: none;
 }
 
-.btn-link:hover,
-.btn-link:focus,
-.btn-link:active,
-.btn-link.active,
-.open .dropdown-toggle.btn-link {
-color: var(--tc-primary);
-text-decoration: none;
+&:active,
+&.active {
+  background-image: none;
+  box-shadow: none;
+}
+
+&.disabled,
+&.disabled:hover,
+&.disabled:focus,
+&.disabled:active,
+&.disabled.active,
+&[disabled],
+&[disabled]:hover,
+&[disabled]:focus,
+&[disabled]:active,
+&.active[disabled] {
+  color: #cacaca;
+}
 }
 
-.btn-link:active,
-.btn-link.active,
 .open .dropdown-toggle.btn-link {
+color: var(--tc-primary);
+text-decoration: none;
 background-image: none;
 box-shadow: none;
 }
 
-.btn-link.disabled,
-.btn-link.disabled:hover,
-.btn-link.disabled:focus,
-.btn-link.disabled:active,
-.btn-link.disabled.active,
-.btn-link[disabled],
-.btn-link[disabled]:hover,
-.btn-link[disabled]:focus,
-.btn-link[disabled]:active,
-.btn-link.active[disabled],
 fieldset[disabled] .btn-link,
 fieldset[disabled] .btn-link:hover,
 fieldset[disabled] .btn-link:focus,
@@ -630,43 +712,52 @@ background: white;
 border: 1px solid #e7eaec;
 padding: 10px 20px;
 border-radius: 30px;
+
+&:hover,
+&:focus,
+&:active,
+&.active,
+&:active:focus,
+&:active:hover,
+&.active:hover,
+&.active:focus {
+  color: var(--white);
+  border: 1px solid var(--tc-primary);
+  background: var(--tc-primary);
 }
 
-.btn-white:hover,
-.btn-white:focus,
-.btn-white:active,
-.btn-white.active,
-.open .dropdown-toggle.btn-white,
-.btn-white:active:focus,
-.btn-white:active:hover,
-.btn-white.active:hover,
-.btn-white.active:focus {
-color: var(--white);
-border: 1px solid var(--tc-primary);
-background: var(--tc-primary);
+&:active,
+&.active {
+  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
 }
 
-.btn-white:active,
-.btn-white.active {
-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
+&:active,
+&.active{
+  background-image: none;
+}
+
+&.disabled,
+&.disabled:hover,
+&.disabled:focus,
+&.disabled:active,
+&.disabled.active,
+&[disabled],
+&[disabled]:hover,
+&[disabled]:focus,
+&[disabled]:active,
+&.active[disabled]{
+  color: #cacaca;
+}
 }
 
-.btn-white:active,
-.btn-white.active,
 .open .dropdown-toggle.btn-white {
+color: var(--white);
+border: 1px solid var(--tc-primary);
+background: var(--tc-primary);
 background-image: none;
 }
 
-.btn-white.disabled,
-.btn-white.disabled:hover,
-.btn-white.disabled:focus,
-.btn-white.disabled:active,
-.btn-white.disabled.active,
-.btn-white[disabled],
-.btn-white[disabled]:hover,
-.btn-white[disabled]:focus,
-.btn-white[disabled]:active,
-.btn-white.active[disabled],
+
 fieldset[disabled] .btn-white,
 fieldset[disabled] .btn-white:hover,
 fieldset[disabled] .btn-white:focus,
@@ -703,73 +794,80 @@ cursor: pointer;
 border-radius: 5px;
 font-weight: 600;
 margin-bottom: 20px !important;
-}
 
-button.dim:active {
-top: 3px;
+&:active {
+  top: 3px;
+}
 }
 
 button.btn-primary.dim {
 box-shadow: inset 0 0 0 #16987e, 0 5px 0 0 #16987e, 0 10px 5px #999999 !important;
-}
 
-button.btn-primary.dim:active {
-box-shadow: inset 0 0 0 #16987e, 0 2px 0 0 #16987e, 0 5px 3px #999999 !important;
+&:active {
+  box-shadow: inset 0 0 0 #16987e, 0 2px 0 0 #16987e, 0 5px 3px #999999 !important;
+}
 }
 
 button.btn-default.dim {
 box-shadow: inset 0 0 0 #b3b3b3, 0 5px 0 0 #b3b3b3, 0 10px 5px #999999 !important;
-}
 
-button.btn-default.dim:active {
-box-shadow: inset 0 0 0 #b3b3b3, 0 2px 0 0 #b3b3b3, 0 5px 3px #999999 !important;
+&:active {
+  box-shadow: inset 0 0 0 #b3b3b3, 0 2px 0 0 #b3b3b3, 0 5px 3px #999999 !important;
+}
 }
 
+
 button.btn-warning.dim {
 box-shadow: inset 0 0 0 #f79d3c, 0 5px 0 0 #f79d3c, 0 10px 5px #999999 !important;
-}
 
-button.btn-warning.dim:active {
-box-shadow: inset 0 0 0 #f79d3c, 0 2px 0 0 #f79d3c, 0 5px 3px #999999 !important;
+&:active {
+  box-shadow: inset 0 0 0 #f79d3c, 0 2px 0 0 #f79d3c, 0 5px 3px #999999 !important;
+}
 }
 
 button.btn-info.dim {
 box-shadow: inset 0 0 0 #1eacae, 0 5px 0 0 #1eacae, 0 10px 5px #999999 !important;
-}
 
-button.btn-info.dim:active {
-box-shadow: inset 0 0 0 #1eacae, 0 2px 0 0 #1eacae, 0 5px 3px #999999 !important;
+&:active {
+  box-shadow: inset 0 0 0 #1eacae, 0 2px 0 0 #1eacae, 0 5px 3px #999999 !important;
+}
 }
 
 button.btn-success.dim {
 box-shadow: inset 0 0 0 #1872ab, 0 5px 0 0 #1872ab, 0 10px 5px #999999 !important;
-}
 
-button.btn-success.dim:active {
-box-shadow: inset 0 0 0 #1872ab, 0 2px 0 0 #1872ab, 0 5px 3px #999999 !important;
+&:active {
+  box-shadow: inset 0 0 0 #1872ab, 0 2px 0 0 #1872ab, 0 5px 3px #999999 !important;
 }
+}
+
 
 button.btn-danger.dim {
 box-shadow: inset 0 0 0 #ea394c, 0 5px 0 0 #ea394c, 0 10px 5px #999999 !important;
-}
 
-button.btn-danger.dim:active {
-box-shadow: inset 0 0 0 #ea394c, 0 2px 0 0 #ea394c, 0 5px 3px #999999 !important;
+&:active {
+  box-shadow: inset 0 0 0 #ea394c, 0 2px 0 0 #ea394c, 0 5px 3px #999999 !important;
+}
 }
 
-button.dim:before {
-font-size: 50px;
-line-height: 1em;
-font-weight: normal;
-color: var(--white);
-display: block;
-padding-top: 10px;
+
+button.dim {
+
+&:before {
+  font-size: 50px;
+  line-height: 1em;
+  font-weight: normal;
+  color: var(--white);
+  display: block;
+  padding-top: 10px;
 }
 
-button.dim:active:before {
-top: 7px;
-font-size: 50px;
+&:active:before {
+  top: 7px;
+  font-size: 50px;
 }
+}
+
 
 .btn:focus {
 outline: none !important;
@@ -782,7 +880,7 @@ padding: 6px 0;
 border-radius: 10px;
 text-align: center;
 font-size: 12px;
-line-height: 1.428571429;
+line-height: 1.42;
 }
 
 .btn-circle.btn-lg {