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

package/scss/tcloud/custom/buttons.scss

@@ -1,1003 +1,1004 @@
-.tc-btn {
-  font-size: 12px;
-  background: var(--tc-gray-100);
-  color: var(--tc-gray-600);
-  cursor: pointer;
-  border-radius: 30px;
-  /*display: inline-flex;*/
-  align-items: center;
-  transition: all 0.25s;
-  padding: 0 25px;
-  height: 40px;
-  border: 1px solid var(--tc-gray-100);
-  justify-content: center;
-
-p {
-  font-size: 13px;
-  color: var(--tc-gray-600);
-}
-
-i {
-  margin-right: 3px;
-  margin-left: 3px;
-  font-size: 16px;
-}
-
-&:hover {
-  color: var(--tc-primary);
-  background: var(--tc-gray-50);
-  border-color: var(--tc-gray-100);
-}
-
-&:link,
-&:visited,
-&:hover,
-&:active {
-  text-decoration: none;
-}
-
-&.full {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1;
-  width: 100%;
-}
-
-&.tc-btn-full {
-  text-align: center;
-  display: block;
-  width: 100%;
-}
-
-}
-
-.tc-btn-block {
-  display: block;
-  width: 100%;
-  text-align: center;
-  padding: 10px 25px;
-}
-
-.tc-btn-square {
-  border-radius: 9px;
-  padding-left: 15px;
-  padding-right: 15px;
-}
-
-.tc-btn:disabled,
-.tc-btn[disabled]{
-  cursor: no-drop;
-  opacity: 0.6;
-}
-
-.tc-btn-primary {
-  color: var(--white);
-  background: var(--tc-primary);
-  border-color: var(--tc-primary);
-
-  &:hover {
-    color: var(--white);
-    background: var(--tc-complemt-3);
-    border-color: var(--tc-primary);
-  }
-}
-
-.tc-btn-warning {
-  color: var(--white);
-  background: var(--warning);
-  border-color: var(--warning);
-
-  &:hover {
-    color: var(--white);
-    background: var(--warning-lighten);
-    border-color: var(--warning);
-  }
-}
-
-.tc-btn-danger {
-  color: var(--white);
-  background: var(--danger);
-  border-color: var(--danger);
-
-  &:hover {
-    color: var(--white);
-    background: var(--danger-lighten);
-    border-color: var(--danger);
-  }
-}
-
-// BUTTON OUTLINE
-.tc-btn-outline {
-  color: var(--tc-gray-500);
-  background: transparent;
-  border-color: 1px solid var(--tc-gray-400);
-
-  &:hover {
-    color: var(--tc-gray-600);
-    background: transparent;
-    border-color: var(--tc-gray-600);
-  }
-}
-
-.tc-btn-outline-primary {
-  color: var(--tc-primary);
-  background: transparent;
-  border-color: var(--tc-primary);
-
-  &:hover {
-    color: var(--white);
-    background: var(--tc-primary);
-    border-color: var(--tc-primary);
-  }
-}
-
-.tc-btn-outline-warning {
-  color: var(--warning);
-  background: transparent;
-  border-color: var(--warning);
-
-  &:hover {
-    color: var(--white);
-    background: var(--warning);
-    border-color: var(--warning);
-  }
-}
-
-.tc-btn-outline-danger {
-  color: var(--danger);
-  background: transparent;
-  border-color: var(--danger);
-
-  &:hover {
-    color: var(--white);
-    background: var(--danger);
-    border-color: var(--danger);
-  }
-}
-
-
-.tc-btn-link {
-  cursor: pointer;
-  padding: 10px;
-  background: none;
-  color: var(--tc-primary);
-  border: none;
-
-  p {
-    text-align: left;
-    color: var(--tc-primary);
-  }
-
-  &:hover{
-    opacity: 0.8;
-  }
-
-  &:disabled{
-    opacity: 0.6;
-  }
-
-  &.tc-btn-link-primary {
-    background: none;
-    border: none;
-    color: var(--tc-primary);
-  }
-
-  &.tc-btn-link-warning {
-    background: none;
-    border: none;
-    color: var(--warning);
-  }
-
-  &.tc-btn-link-danger {
-    background: none;
-    border: none;
-    color: var(--danger);
-  }
-}
-
-.tc-btn:disabled {
-  opacity: 0.6;
-  cursor: not-allowed;
-}
-
-.tc-btn-block{
-  width: 100% !important;
-  justify-content: center;
-}
-
-// ========================================
-// old Button Standard
-// ========================================
-
-.btn-new {
-  border: none;
-  transition: all 0.25s;
-  background: var(--tc-gray-100);
-  color: var(--tc-gray-500);
-  font-size: 12px;
-  font-weight: normal;
-  border-radius: 30px;
-  padding: 10px 25px!important;
-  cursor: pointer;
-  display: inline-flex;
-  align-items: center;
-}
-
-.btn-new.active,
-.btn-new.opened,
-.btn-new:hover {
-  background: var(--tc-primary);
-  color: var(--white);
-}
-
-.btn-new i {
-margin: 0 10px 0 5px;
-}
-
-.btn-new i:nth-child(2) {
-margin: 0 0 0 10px;
-}
-
-.btn-new-grey {
-border: none;
-transition: all 0.25s;
-background: var(--tc-gray-100) !important;
-color: var(--tc-gray-600) !important;
-font-size: 12px;
-font-weight: normal;
-border-radius: 30px;
-padding: 10px 20px;
-cursor: pointer;
-border: none !important;
-}
-
-.btn-new-grey.active,
-.btn-new-grey.opened,
-.btn-new-grey:hover {
-background: var(--tc-primary)!important;
-color: var(--white) !important;
-}
-
-.btn-new-grey i {
-margin: 0 10px 0 5px;
-}
-
-.btn-new-grey i:nth-child(2) {
-margin: 0 0 0 10px;
-}
-
-.tc-btn-primary,
-.btn-green-validate {
-/*display: inline-flex;*/
-align-items: center;
-background: var(--tc-primary)!important;
-color: var(--white) !important;
-font-size: 12px;
-font-weight: normal;
-border-radius: 30px;
-cursor: pointer;
-border: none!important;
-transition: all 0.25s;
-}
-
-.tc-btn-primary.full {
-width: 100%!important;
-}
-
-.tc-btn-primary.full.txt-center,
-.tc-btn-primary.txt-center {
-justify-content: center;
-}
-
-.btn-green-validate:disabled {
-background: var(--tc-gray-200) !important;
-}
-
-.tc-btn-primary.small {
-padding: 10px 20px;
-}
-
-.tc-btn-primary.active,
-.tc-btn-primary.opened,
-.tc-btn-primary:hover {
-background: var(--tc-complemt-3) !important;
-}
-
-.tc-btn-primary i {
-margin: 0 10px 0 5px;
-}
-
-.tc-btn-primary i:nth-child(2) {
-margin: 0 0 0 10px;
-}
-
-.btn-new-outline {
-background: var(--white) !important;
-color: var(--tc-gray-600);
-font-size: 12px;
-font-weight: normal;
-transition: all 0.25s;
-border: 3px solid var(--tc-gray-100);
-border-radius: 30px;
-padding: 10px 25px;
-cursor: pointer;
-
-.btn-new-outline i {
-margin: 0 10px 0 5px;
-
-&:nth-child(2) {
-  margin: 0 0 0 10px;
-}
-}
-}
-
-.btn-new-outline.active,
-.btn-new-outline.opened,
-.btn-new-outline:hover {
-background: var(--tc-gray-100) !important;
-}
-
-
-
-.btn-new-group {
-display: flex;
-flex: 1;
-margin: 20px 0;
-}
-
-.btn-new-group.align-left {
-justify-content: flex-start;
-}
-
-.btn-new-group.align-right {
-justify-content: flex-end;
-}
-
-.btn-new-group .btn-new {
-margin: 0 20px 0 0;
-}
-
-.btn-new-group .btn-new:last-child {
-margin: 0;
-}
-
-.btn-disabled {
-/*display: inline-flex;*/
-align-items: center;
-background: var(--tc-primary)!important;
-color: var(--white) !important;
-font-size: 12px;
-font-weight: normal;
-border-radius: 30px;
-padding: 10px 20px;
-border: none!important;
-transition: all 0.25s;
-cursor: pointer;
-
-&: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);
-border-radius: 30px;
-padding: 10px 20px;
-cursor: pointer;
-border: none!important;
-transition: all 0.25s;
-}
-
-.btn-new-white:hover {
-color: var(--white);
-background: var(--var(--tc-primary)2);
-}
-
-.btn-new-full {
-flex: 1;
-display: flex;
-justify-content: center;
-align-items: center;
-width: 100%;
-}
-
-
-.btn-group .btn-secondary {
-color: var(--white);
-background-color: var(--tc-primary);
-border-color: var(--tc-primary);
-}
-
-.btn-group .btn-secondary:hover {
-background-color:  var(--tc-primary)2;
-}
-
-
-button:focus {
-outline: 0 !important;
-}
-
-.btn {
-padding: 10px 20px;
-border-radius: 20px;
-font-size: inherit;
-color: var(--tc-gray-500);
-}
-
-.btn:focus {
-box-shadow: none;
-}
-
-.btn-xs {
-font-size: 12px;
-padding: 0.2rem 0.4rem;
-}
-
-.btn-group-sm > .btn,
-.btn-sm {
-font-size: 12px;
-}
-
-.float-e-margins .btn {
-margin-bottom: 5px;
-}
-
-.btn-w-m {
-min-width: 120px;
-}
-
-.btn-primary.btn-outline {
-color: var(--tc-primary);
-}
-
-.btn-success.btn-outline {
-color: var(--tc-complete);
-}
-
-.btn-info.btn-outline {
-color: var(--tc-primary);
-}
-
-.btn-warning.btn-outline {
-color: var(--tc-warning);
-}
-
-.btn-danger.btn-outline {
-color: var(--tc-danger);
-}
-
-.btn-primary.btn-outline:hover,
-.btn-success.btn-outline:hover,
-.btn-info.btn-outline:hover,
-.btn-warning.btn-outline:hover,
-.btn-danger.btn-outline:hover {
-color: var(--white);
-}
-
-.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;
-
-&:hover,
-&:focus,
-&.focus {
-  background-color: var(--tc-primary)2!important;
-  border-color: var(--tc-primary)2!important;
-  color: var(--white) !important;
-}
-
-&.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,
-.show > .btn-primary.dropdown-toggle {
-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 {
--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.btn-icon i {
-margin: 0 10px 0 0;
-}
-
-.btn-success {
-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);
-}
-
-&.disabled,
-&: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 {
-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:not(:disabled):not(.disabled):active,
-.btn-info:not(:disabled):not(.disabled).active,
-.show > .btn-info.dropdown-toggle {
-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;
-}
-}
-
-.open .dropdown-toggle.btn-default,
-.btn-default.active:focus {
-color: inherit;
-border: 1px solid #d2d2d2;
-}
-
-.open .dropdown-toggle.btn-default {
-box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
-}
-
-
-fieldset[disabled] .btn-default,
-fieldset[disabled] .btn-default:hover,
-fieldset[disabled] .btn-default:focus,
-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;
-}
-
-&.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);
-}
-}
-
-.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-danger {
-color: var(--white);
-background-color: #ed5565;
-border-color: #ed5565;
-&:hover,
-&:focus,
-&.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);
-}
-}
-
-.show > .btn-danger.dropdown-toggle {
-color: var(--white);
-background-color: #ec4758;
-border-color: #ec4758;
-
-&: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;
-}
-
-&: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;
-}
-}
-
-.open .dropdown-toggle.btn-link {
-color: var(--tc-primary);
-text-decoration: none;
-background-image: none;
-box-shadow: none;
-}
-
-fieldset[disabled] .btn-link,
-fieldset[disabled] .btn-link:hover,
-fieldset[disabled] .btn-link:focus,
-fieldset[disabled] .btn-link:active,
-fieldset[disabled] .btn-link.active {
-color: #cacaca;
-}
-
-.btn-white {
-color: var(--tc-gray-500);
-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);
-}
-
-&:active,
-&.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;
-}
-}
-
-.open .dropdown-toggle.btn-white {
-color: var(--white);
-border: 1px solid var(--tc-primary);
-background: var(--tc-primary);
-background-image: none;
-}
-
-
-fieldset[disabled] .btn-white,
-fieldset[disabled] .btn-white:hover,
-fieldset[disabled] .btn-white:focus,
-fieldset[disabled] .btn-white:active,
-fieldset[disabled] .btn-white.active {
-color: #cacaca;
-}
-
-.btn-outline {
-color: inherit;
-background-color: transparent;
-transition: all .5s;
-}
-
-.btn-rounded {
-border-radius: 50px;
-}
-
-.btn-large-dim {
-width: 90px;
-height: 90px;
-font-size: 42px;
-}
-
-button.dim {
-display: inline-block;
-text-decoration: none;
-text-transform: uppercase;
-text-align: center;
-padding-top: 6px;
-margin-right: 10px;
-position: relative;
-cursor: pointer;
-border-radius: 5px;
-font-weight: 600;
-margin-bottom: 20px !important;
-
-&:active {
-  top: 3px;
-}
-}
-
-button.btn-primary.dim {
-box-shadow: inset 0 0 0 #16987e, 0 5px 0 0 #16987e, 0 10px 5px #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;
-
-&: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;
-
-&: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;
-
-&: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;
-
-&: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;
-
-&: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;
-}
-
-&:active:before {
-  top: 7px;
-  font-size: 50px;
-}
-}
-
-
-.btn:focus {
-outline: none !important;
-}
-
-.btn-circle {
-width: 30px;
-height: 30px;
-padding: 6px 0;
-border-radius: 10px;
-text-align: center;
-font-size: 12px;
-line-height: 1.42;
-}
-
-.btn-circle.btn-lg {
-width: 50px;
-height: 50px;
-padding: 10px 16px;
-border-radius: 25px;
-font-size: 18px;
-line-height: 1.33;
-}
-
-.btn-circle.btn-xl {
-width: 70px;
-height: 70px;
-padding: 10px 16px;
-border-radius: 35px;
-font-size: 24px;
-line-height: 1.33;
-}
-
-.tc-display-inline-flex{
-  display: inline-flex;
-}
+.tc-btn {
+  font-size: 12px;
+  background: var(--tc-gray-100);
+  color: var(--tc-gray-600);
+  cursor: pointer;
+  border-radius: 30px;
+  /*display: inline-flex;*/
+  align-items: center;
+  transition: all 0.25s;
+  padding: 0 25px;
+  height: 40px;
+  border: 1px solid var(--tc-gray-100);
+  justify-content: center;
+  font-family: var(--f-family);
+
+p {
+  font-size: 13px;
+  color: var(--tc-gray-600);
+}
+
+i {
+  margin-right: 3px;
+  margin-left: 3px;
+  font-size: 16px;
+}
+
+&:hover {
+  color: var(--c-primary-500);
+  background: var(--tc-gray-50);
+  border-color: var(--tc-gray-100);
+}
+
+&:link,
+&:visited,
+&:hover,
+&:active {
+  text-decoration: none;
+}
+
+&.full {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  flex: 1;
+  width: 100%;
+}
+
+&.tc-btn-full {
+  text-align: center;
+  display: block;
+  width: 100%;
+}
+
+}
+
+.tc-btn-block {
+  display: block;
+  width: 100%;
+  text-align: center;
+  padding: 10px 25px;
+}
+
+.tc-btn-square {
+  border-radius: 9px;
+  padding-left: 15px;
+  padding-right: 15px;
+}
+
+.tc-btn:disabled,
+.tc-btn[disabled]{
+  cursor: no-drop;
+  opacity: 0.6;
+}
+
+.tc-btn-primary {
+  color: var(--white);
+  background: var(--c-primary-500);
+  border-color: var(--c-primary-500);
+
+  &:hover {
+    color: var(--white);
+    background: var(--c-primary-700);
+    border-color: var(--c-primary-500);
+  }
+}
+
+.tc-btn-warning {
+  color: var(--white);
+  background: var(--warning);
+  border-color: var(--warning);
+
+  &:hover {
+    color: var(--white);
+    background: var(--warning-lighten);
+    border-color: var(--warning);
+  }
+}
+
+.tc-btn-danger {
+  color: var(--white);
+  background: var(--danger);
+  border-color: var(--danger);
+
+  &:hover {
+    color: var(--white);
+    background: var(--danger-lighten);
+    border-color: var(--danger);
+  }
+}
+
+// BUTTON OUTLINE
+.tc-btn-outline {
+  color: var(--tc-gray-500);
+  background: transparent;
+  border-color: 1px solid var(--tc-gray-400);
+
+  &:hover {
+    color: var(--tc-gray-600);
+    background: transparent;
+    border-color: var(--tc-gray-600);
+  }
+}
+
+.tc-btn-outline-primary {
+  color: var(--c-primary-500);
+  background: transparent;
+  border-color: var(--c-primary-500);
+
+  &:hover {
+    color: var(--white);
+    background: var(--c-primary-500);
+    border-color: var(--c-primary-500);
+  }
+}
+
+.tc-btn-outline-warning {
+  color: var(--warning);
+  background: transparent;
+  border-color: var(--warning);
+
+  &:hover {
+    color: var(--white);
+    background: var(--warning);
+    border-color: var(--warning);
+  }
+}
+
+.tc-btn-outline-danger {
+  color: var(--danger);
+  background: transparent;
+  border-color: var(--danger);
+
+  &:hover {
+    color: var(--white);
+    background: var(--danger);
+    border-color: var(--danger);
+  }
+}
+
+
+.tc-btn-link {
+  cursor: pointer;
+  padding: 10px;
+  background: none;
+  color: var(--c-primary-500);
+  border: none;
+
+  p {
+    text-align: left;
+    color: var(--c-primary-500);
+  }
+
+  &:hover{
+    opacity: 0.8;
+  }
+
+  &:disabled{
+    opacity: 0.6;
+  }
+
+  &.tc-btn-link-primary {
+    background: none;
+    border: none;
+    color: var(--c-primary-500);
+  }
+
+  &.tc-btn-link-warning {
+    background: none;
+    border: none;
+    color: var(--warning);
+  }
+
+  &.tc-btn-link-danger {
+    background: none;
+    border: none;
+    color: var(--danger);
+  }
+}
+
+.tc-btn:disabled {
+  opacity: 0.6;
+  cursor: not-allowed;
+}
+
+.tc-btn-block{
+  width: 100% !important;
+  justify-content: center;
+}
+
+// ========================================
+// old Button Standard
+// ========================================
+
+.btn-new {
+  border: none;
+  transition: all 0.25s;
+  background: var(--tc-gray-100);
+  color: var(--tc-gray-500);
+  font-size: 12px;
+  font-weight: normal;
+  border-radius: 30px;
+  padding: 10px 25px!important;
+  cursor: pointer;
+  display: inline-flex;
+  align-items: center;
+}
+
+.btn-new.active,
+.btn-new.opened,
+.btn-new:hover {
+  background: var(--c-primary-500);
+  color: var(--white);
+}
+
+.btn-new i {
+margin: 0 10px 0 5px;
+}
+
+.btn-new i:nth-child(2) {
+margin: 0 0 0 10px;
+}
+
+.btn-new-grey {
+border: none;
+transition: all 0.25s;
+background: var(--tc-gray-100) !important;
+color: var(--tc-gray-600) !important;
+font-size: 12px;
+font-weight: normal;
+border-radius: 30px;
+padding: 10px 20px;
+cursor: pointer;
+border: none !important;
+}
+
+.btn-new-grey.active,
+.btn-new-grey.opened,
+.btn-new-grey:hover {
+background: var(--c-primary-500)!important;
+color: var(--white) !important;
+}
+
+.btn-new-grey i {
+margin: 0 10px 0 5px;
+}
+
+.btn-new-grey i:nth-child(2) {
+margin: 0 0 0 10px;
+}
+
+.tc-btn-primary,
+.btn-green-validate {
+/*display: inline-flex;*/
+align-items: center;
+background: var(--c-primary-500)!important;
+color: var(--white) !important;
+font-size: 12px;
+font-weight: normal;
+border-radius: 30px;
+cursor: pointer;
+border: none!important;
+transition: all 0.25s;
+}
+
+.tc-btn-primary.full {
+width: 100%!important;
+}
+
+.tc-btn-primary.full.txt-center,
+.tc-btn-primary.txt-center {
+justify-content: center;
+}
+
+.btn-green-validate:disabled {
+background: var(--tc-gray-200) !important;
+}
+
+.tc-btn-primary.small {
+padding: 10px 20px;
+}
+
+.tc-btn-primary.active,
+.tc-btn-primary.opened,
+.tc-btn-primary:hover {
+background: var(--c-primary-700) !important;
+}
+
+.tc-btn-primary i {
+margin: 0 10px 0 5px;
+}
+
+.tc-btn-primary i:nth-child(2) {
+margin: 0 0 0 10px;
+}
+
+.btn-new-outline {
+background: var(--white) !important;
+color: var(--tc-gray-600);
+font-size: 12px;
+font-weight: normal;
+transition: all 0.25s;
+border: 3px solid var(--tc-gray-100);
+border-radius: 30px;
+padding: 10px 25px;
+cursor: pointer;
+
+.btn-new-outline i {
+margin: 0 10px 0 5px;
+
+&:nth-child(2) {
+  margin: 0 0 0 10px;
+}
+}
+}
+
+.btn-new-outline.active,
+.btn-new-outline.opened,
+.btn-new-outline:hover {
+background: var(--tc-gray-100) !important;
+}
+
+
+
+.btn-new-group {
+display: flex;
+flex: 1;
+margin: 20px 0;
+}
+
+.btn-new-group.align-left {
+justify-content: flex-start;
+}
+
+.btn-new-group.align-right {
+justify-content: flex-end;
+}
+
+.btn-new-group .btn-new {
+margin: 0 20px 0 0;
+}
+
+.btn-new-group .btn-new:last-child {
+margin: 0;
+}
+
+.btn-disabled {
+/*display: inline-flex;*/
+align-items: center;
+background: var(--c-primary-500)!important;
+color: var(--white) !important;
+font-size: 12px;
+font-weight: normal;
+border-radius: 30px;
+padding: 10px 20px;
+border: none!important;
+transition: all 0.25s;
+cursor: pointer;
+
+&: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(--c-primary-500);
+background: var(--white);
+border-radius: 30px;
+padding: 10px 20px;
+cursor: pointer;
+border: none!important;
+transition: all 0.25s;
+}
+
+.btn-new-white:hover {
+color: var(--white);
+background: var(--var(--c-primary-500)2);
+}
+
+.btn-new-full {
+flex: 1;
+display: flex;
+justify-content: center;
+align-items: center;
+width: 100%;
+}
+
+
+.btn-group .btn-secondary {
+color: var(--white);
+background-color: var(--c-primary-500);
+border-color: var(--c-primary-500);
+}
+
+.btn-group .btn-secondary:hover {
+background-color:  var(--c-primary-500)2;
+}
+
+
+button:focus {
+outline: 0 !important;
+}
+
+.btn {
+padding: 10px 20px;
+border-radius: 20px;
+font-size: inherit;
+color: var(--tc-gray-500);
+}
+
+.btn:focus {
+box-shadow: none;
+}
+
+.btn-xs {
+font-size: 12px;
+padding: 0.2rem 0.4rem;
+}
+
+.btn-group-sm > .btn,
+.btn-sm {
+font-size: 12px;
+}
+
+.float-e-margins .btn {
+margin-bottom: 5px;
+}
+
+.btn-w-m {
+min-width: 120px;
+}
+
+.btn-primary.btn-outline {
+color: var(--c-primary-500);
+}
+
+.btn-success.btn-outline {
+color: var(--tc-complete);
+}
+
+.btn-info.btn-outline {
+color: var(--c-primary-500);
+}
+
+.btn-warning.btn-outline {
+color: var(--tc-warning);
+}
+
+.btn-danger.btn-outline {
+color: var(--tc-danger);
+}
+
+.btn-primary.btn-outline:hover,
+.btn-success.btn-outline:hover,
+.btn-info.btn-outline:hover,
+.btn-warning.btn-outline:hover,
+.btn-danger.btn-outline:hover {
+color: var(--white);
+}
+
+.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(--c-primary-500)!important;
+border-color: var(--c-primary-500)!important;
+padding: 10px 20px;
+border-radius: 20px;
+
+&:hover,
+&:focus,
+&.focus {
+  background-color: var(--c-primary-500)2!important;
+  border-color: var(--c-primary-500)2!important;
+  color: var(--white) !important;
+}
+
+&.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,
+.show > .btn-primary.dropdown-toggle {
+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 {
+-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.btn-icon i {
+margin: 0 10px 0 0;
+}
+
+.btn-success {
+color: var(--white);
+background-color: var(--c-primary-500);
+border-color: var(--c-primary-500);
+
+&:hover,
+&:focus,
+&.focus {
+  color: var(--white);
+  background-color: var(--c-primary-500);
+  border-color: var(--c-primary-500);
+}
+
+&.disabled,
+&: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 {
+color: var(--white);
+background-color: var(--c-primary-500);
+border-color: var(--c-primary-500);
+}
+
+.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:not(:disabled):not(.disabled):active,
+.btn-info:not(:disabled):not(.disabled).active,
+.show > .btn-info.dropdown-toggle {
+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;
+}
+}
+
+.open .dropdown-toggle.btn-default,
+.btn-default.active:focus {
+color: inherit;
+border: 1px solid #d2d2d2;
+}
+
+.open .dropdown-toggle.btn-default {
+box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15) inset;
+}
+
+
+fieldset[disabled] .btn-default,
+fieldset[disabled] .btn-default:hover,
+fieldset[disabled] .btn-default:focus,
+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;
+}
+
+&.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);
+}
+}
+
+.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-danger {
+color: var(--white);
+background-color: #ed5565;
+border-color: #ed5565;
+&:hover,
+&:focus,
+&.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);
+}
+}
+
+.show > .btn-danger.dropdown-toggle {
+color: var(--white);
+background-color: #ec4758;
+border-color: #ec4758;
+
+&: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(--c-primary-500);
+  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;
+}
+}
+
+.open .dropdown-toggle.btn-link {
+color: var(--c-primary-500);
+text-decoration: none;
+background-image: none;
+box-shadow: none;
+}
+
+fieldset[disabled] .btn-link,
+fieldset[disabled] .btn-link:hover,
+fieldset[disabled] .btn-link:focus,
+fieldset[disabled] .btn-link:active,
+fieldset[disabled] .btn-link.active {
+color: #cacaca;
+}
+
+.btn-white {
+color: var(--tc-gray-500);
+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(--c-primary-500);
+  background: var(--c-primary-500);
+}
+
+&:active,
+&.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;
+}
+}
+
+.open .dropdown-toggle.btn-white {
+color: var(--white);
+border: 1px solid var(--c-primary-500);
+background: var(--c-primary-500);
+background-image: none;
+}
+
+
+fieldset[disabled] .btn-white,
+fieldset[disabled] .btn-white:hover,
+fieldset[disabled] .btn-white:focus,
+fieldset[disabled] .btn-white:active,
+fieldset[disabled] .btn-white.active {
+color: #cacaca;
+}
+
+.btn-outline {
+color: inherit;
+background-color: transparent;
+transition: all .5s;
+}
+
+.btn-rounded {
+border-radius: 50px;
+}
+
+.btn-large-dim {
+width: 90px;
+height: 90px;
+font-size: 42px;
+}
+
+button.dim {
+display: inline-block;
+text-decoration: none;
+text-transform: uppercase;
+text-align: center;
+padding-top: 6px;
+margin-right: 10px;
+position: relative;
+cursor: pointer;
+border-radius: 5px;
+font-weight: 600;
+margin-bottom: 20px !important;
+
+&:active {
+  top: 3px;
+}
+}
+
+button.btn-primary.dim {
+box-shadow: inset 0 0 0 #16987e, 0 5px 0 0 #16987e, 0 10px 5px #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;
+
+&: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;
+
+&: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;
+
+&: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;
+
+&: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;
+
+&: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;
+}
+
+&:active:before {
+  top: 7px;
+  font-size: 50px;
+}
+}
+
+
+.btn:focus {
+outline: none !important;
+}
+
+.btn-circle {
+width: 30px;
+height: 30px;
+padding: 6px 0;
+border-radius: 10px;
+text-align: center;
+font-size: 12px;
+line-height: 1.42;
+}
+
+.btn-circle.btn-lg {
+width: 50px;
+height: 50px;
+padding: 10px 16px;
+border-radius: 25px;
+font-size: 18px;
+line-height: 1.33;
+}
+
+.btn-circle.btn-xl {
+width: 70px;
+height: 70px;
+padding: 10px 16px;
+border-radius: 35px;
+font-size: 24px;
+line-height: 1.33;
+}
+
+.tc-display-inline-flex{
+  display: inline-flex;
+}