@nitro-ui/component-button/dist/css/button.css

Button component for Nitro UI.

@keyframes rotate {
  0% {
    transform: rotate(0); }
  100% {
    transform: rotate(360deg); } }

@keyframes shake-horizontal {
  0% {
    transform: translate(-16px, 0); }
  25% {
    transform: translate(16px, 0); }
  50% {
    transform: translate(-16px, 0); }
  75% {
    transform: translate(16px, 0); }
  100% {
    transform: translate(0, 0); } }

@keyframes shake-horizontal-small {
  0% {
    transform: translate(0, 0); }
  20% {
    transform: translate(-4px, 0); }
  40% {
    transform: translate(4px, 0); }
  60% {
    transform: translate(-4px, 0); }
  80% {
    transform: translate(4px, 0); }
  100% {
    transform: translate(0, 0); } }

@keyframes slide-down {
  0% {
    opacity: 0;
    transform: translateY(-40px); }
  100% {
    opacity: 1;
    transform: translateY(0); } }

.c-btn {
  background-color: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: #344251;
  cursor: pointer;
  display: inline-flex;
  font-family: "Roboto", Arial, sans-serif;
  font-size: 14px;
  font-weight: 500;
  align-items: center;
  justify-content: center;
  line-height: 24px;
  padding: 7px 16px;
  outline: none !important;
  position: relative;
  text-align: center !important;
  text-decoration: none !important;
  transition: all ease 0.4s;
  vertical-align: top;
  white-space: nowrap; }

.c-btn:active,
.c-btn:focus {
  outline: none; }

.c-btn:disabled,
.c-btn.is--disabled {
  cursor: default;
  pointer-events: none; }

.c-btn.is--loading {
  color: transparent !important; }

.c-btn--lg {
  border-radius: 8px;
  font-size: 16px;
  line-height: 24px;
  padding: 11px 32px; }
  .c-btn--lg > .icon {
    font-size: 20px; }

.c-btn--sm {
  font-size: 14px;
  line-height: 24px;
  padding: 3px 12px; }

.c-btn--xs {
  font-size: 12px;
  line-height: 22px;
  padding: 0 8px; }

.c-btn--full {
  width: 100%; }

.c-btn--pill {
  border-radius: 1000px; }

.c-btn--action {
  background-color: #FFDA00;
  color: #344251; }
  .c-btn--action:hover, .c-btn--action:active, .c-btn--action.is--active {
    background-color: #FFC500; }
  .c-btn--action.is--loading:before {
    animation: rotate 1.2s infinite linear;
    border-color: #F5A500;
    border-left-color: #ED9402;
    border-radius: 100%;
    border-style: dotted;
    border-width: 2px;
    display: inline-block;
    content: '';
    height: 16px;
    width: 16px;
    vertical-align: top;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -8px; }
  .c-btn--action:disabled, .c-btn--action.is--disabled {
    opacity: 0.3; }

.c-btn--primary {
  background-color: #0162DD;
  border-color: #0162DD;
  color: #FFFFFF; }
  .c-btn--primary:hover {
    background-color: #0774FE;
    border-color: #0774FE;
    color: #FFFFFF; }
  .c-btn--primary:focus, .c-btn--primary:active, .c-btn--primary.is--active {
    background-color: #0148A2;
    border-color: #0148A2;
    color: #FFFFFF; }
  .c-btn--primary.is--loading:before {
    animation: rotate 1.2s infinite linear;
    border-color: #55A0FE;
    border-left-color: #E2F0FF;
    border-radius: 100%;
    border-style: dotted;
    border-width: 2px;
    display: inline-block;
    content: '';
    height: 16px;
    width: 16px;
    vertical-align: top;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -8px; }
  .c-btn--primary:disabled, .c-btn--primary.is--disabled {
    opacity: 0.3; }

.c-btn--primary-outline {
  background-color: transparent;
  border-color: #0162DD;
  color: #0162DD; }
  .c-btn--primary-outline:hover {
    background-color: #0162DD;
    border-color: #0162DD;
    color: #FFFFFF; }
  .c-btn--primary-outline:active, .c-btn--primary-outline:focus, .c-btn--primary-outline.is--active,
  .is--active > .c-btn--primary-outline {
    background-color: #0148A2;
    border-color: #0148A2;
    color: #FFFFFF; }
  .c-btn--primary-outline.is--loading:before {
    animation: rotate 1.2s infinite linear;
    border-color: #A4CCFF;
    border-left-color: #0774FE;
    border-radius: 100%;
    border-style: dotted;
    border-width: 2px;
    display: inline-block;
    content: '';
    height: 16px;
    width: 16px;
    vertical-align: top;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -8px; }
  .c-btn--primary-outline:disabled, .c-btn--primary-outline.is--disabled {
    opacity: 0.3; }

.c-btn--secondary {
  background-color: #ECEEF3;
  border-color: #CFD6DF;
  color: #344251; }
  .c-btn--secondary:hover {
    background-color: #F7F8FA;
    border-color: #B8C2CE;
    color: #344251; }
  .c-btn--secondary:focus, .c-btn--secondary:active, .c-btn--secondary.is--active {
    background-color: #CFD6DF;
    border-color: #B8C2CE;
    color: #344251; }
  .c-btn--secondary.is--loading:before {
    animation: rotate 1.2s infinite linear;
    border-color: #73879B;
    border-left-color: #ECEEF3;
    border-radius: 100%;
    border-style: dotted;
    border-width: 2px;
    display: inline-block;
    content: '';
    height: 16px;
    width: 16px;
    vertical-align: top;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -8px; }
  .c-btn--secondary:disabled, .c-btn--secondary.is--disabled {
    opacity: 0.4; }

.c-btn--secondary-outline {
  background-color: transparent;
  border-color: #CFD6DF;
  color: #344251; }
  .c-btn--secondary-outline:hover {
    background-color: #ECEEF3;
    border-color: #CFD6DF;
    color: #344251; }
  .c-btn--secondary-outline:active, .c-btn--secondary-outline:focus, .c-btn--secondary-outline.is--active,
  .is--active > .c-btn--secondary-outline {
    background-color: #CFD6DF;
    border-color: #B8C2CE;
    color: #344251; }
  .c-btn--secondary-outline.is--loading:before {
    animation: rotate 1.2s infinite linear;
    border-color: #A4CCFF;
    border-left-color: #0774FE;
    border-radius: 100%;
    border-style: dotted;
    border-width: 2px;
    display: inline-block;
    content: '';
    height: 16px;
    width: 16px;
    vertical-align: top;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -8px; }
  .c-btn--secondary-outline:disabled, .c-btn--secondary-outline.is--disabled {
    opacity: 0.3; }

.c-btn--positive {
  background-color: #26C53A;
  border-color: #26C53A;
  color: #FFFFFF; }
  .c-btn--positive:hover {
    background-color: #3AD94E;
    border-color: #3AD94E;
    color: #FFFFFF; }
  .c-btn--positive:focus, .c-btn--positive:active, .c-btn--positive.is--active {
    background-color: #1D942B;
    border-color: #1D942B;
    color: #FFFFFF; }
  .c-btn--positive.is--loading:before {
    animation: rotate 1.2s infinite linear;
    border-color: #6BE27A;
    border-left-color: #FFFFFF;
    border-radius: 100%;
    border-style: dotted;
    border-width: 2px;
    display: inline-block;
    content: '';
    height: 16px;
    width: 16px;
    vertical-align: top;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -8px; }
  .c-btn--positive:disabled, .c-btn--positive.is--disabled {
    opacity: 0.3; }

.c-btn--negative {
  background-color: #DA0000;
  border-color: #DA0000;
  color: #FFFFFF; }
  .c-btn--negative:hover {
    background-color: #FA0204;
    border-color: #FA0204;
    color: #FFFFFF; }
  .c-btn--negative:focus, .c-btn--negative:active, .c-btn--negative.is--active {
    background-color: #B30000;
    border-color: #B30000;
    color: #FFFFFF; }
  .c-btn--negative.is--loading:before {
    animation: rotate 1.2s infinite linear;
    border-color: #FF5151;
    border-left-color: #FFFFFF;
    border-radius: 100%;
    border-style: dotted;
    border-width: 2px;
    display: inline-block;
    content: '';
    height: 16px;
    width: 16px;
    vertical-align: top;
    position: absolute;
    left: 50%;
    top: 50%;
    margin: -8px; }
  .c-btn--negative:disabled, .c-btn--negative.is--disabled {
    opacity: 0.3; }

.c-btn > .icon {
  font-size: 16px;
  margin-right: 12px;
  margin-left: -4px; }
  .c-btn > .icon, .c-btn > .icon::before {
    height: auto;
    line-height: inherit; }
  .c-btn > .icon:last-child {
    margin-right: -4px;
    margin-left: 12px; }

.c-btn--icon > .icon {
  margin: 0 -4px !important; }

.c-btn-group {
  display: inline-flex;
  vertical-align: middle; }
  .c-btn-group > .c-btn,
  .c-btn-group > .c-dropdown > .c-btn {
    border-radius: 0;
    flex: 1; }
    .c-btn-group > .c-btn:hover, .c-btn-group > .c-btn.is--active,
    .c-btn-group > .c-dropdown > .c-btn:hover,
    .c-btn-group > .c-dropdown > .c-btn.is--active {
      z-index: 1; }
    .c-btn-group > .c-btn.is--disabled, .c-btn-group > .c-btn:disabled,
    .c-btn-group > .c-dropdown > .c-btn.is--disabled,
    .c-btn-group > .c-dropdown > .c-btn:disabled {
      z-index: 0; }
  .c-btn-group .c-btn:not(:first-child),
  .c-btn-group .c-dropdown:not(:first-child) {
    margin-left: -1px; }
  .c-btn-group > .c-btn:first-child,
  .c-btn-group > .c-dropdown:first-child > .c-btn {
    border-top-left-radius: 4px;
    border-bottom-left-radius: 4px; }
  .c-btn-group > .c-btn:last-child,
  .c-btn-group > .c-dropdown:last-child > .c-btn {
    border-top-right-radius: 4px;
    border-bottom-right-radius: 4px; }

.c-btn-group--full {
  display: flex; }

/*# sourceMappingURL=button.css.map */