@descco/ui-core/lib/css/06-components/button.css

Descco UI

/* ==========================================================================
   Variables
   ========================================================================== */
/* Theme
 ========================================================================== */
/* Color
 ========================================================================== */
/* Border Color
 ========================================================================== */
/* Shadow Color
 ========================================================================== */
/* ==========================================================================
   Placeholders
   ========================================================================== */
/* Button
 ========================================================================== */
.button__default___1yLAY, .button__primary___1c847, .button__success___1Kqkc, .button__info___3dNZr, .button__warning___2uiKu, .button__danger___2lI8c, .button__transparent___2HrEX {
  border: 1px solid transparent;
  border-radius: 4px;
  transition: all 0.5s; }
  .button__default___1yLAY:hover, .button__primary___1c847:hover, .button__success___1Kqkc:hover, .button__info___3dNZr:hover, .button__warning___2uiKu:hover, .button__danger___2lI8c:hover, .button__transparent___2HrEX:hover {
    cursor: pointer; }
  .button__active___2n87c.button__default___1yLAY, .button__active___2n87c.button__primary___1c847, .button__active___2n87c.button__success___1Kqkc, .button__active___2n87c.button__info___3dNZr, .button__active___2n87c.button__warning___2uiKu, .button__active___2n87c.button__danger___2lI8c, .button__active___2n87c.button__transparent___2HrEX, .button__default___1yLAY:active, .button__primary___1c847:active, .button__success___1Kqkc:active, .button__info___3dNZr:active, .button__warning___2uiKu:active, .button__danger___2lI8c:active, .button__transparent___2HrEX:active {
    box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125); }
  .button__default___1yLAY:disabled, .button__primary___1c847:disabled, .button__success___1Kqkc:disabled, .button__info___3dNZr:disabled, .button__warning___2uiKu:disabled, .button__danger___2lI8c:disabled, .button__transparent___2HrEX:disabled {
    background: #ccc;
    border-color: #ccc;
    color: #999;
    cursor: not-allowed; }
    .button__default___1yLAY:disabled:hover, .button__primary___1c847:disabled:hover, .button__success___1Kqkc:disabled:hover, .button__info___3dNZr:disabled:hover, .button__warning___2uiKu:disabled:hover, .button__danger___2lI8c:disabled:hover, .button__transparent___2HrEX:disabled:hover, .button__default___1yLAY:disabled:active, .button__primary___1c847:disabled:active, .button__success___1Kqkc:disabled:active, .button__info___3dNZr:disabled:active, .button__warning___2uiKu:disabled:active, .button__danger___2lI8c:disabled:active, .button__transparent___2HrEX:disabled:active, .button__default___1yLAY:disabled.button__active___2n87c, .button__primary___1c847:disabled.button__active___2n87c, .button__success___1Kqkc:disabled.button__active___2n87c, .button__info___3dNZr:disabled.button__active___2n87c, .button__warning___2uiKu:disabled.button__active___2n87c, .button__danger___2lI8c:disabled.button__active___2n87c, .button__transparent___2HrEX:disabled.button__active___2n87c, .button__default___1yLAY:disabled.button__outline___16kvi, .button__primary___1c847:disabled.button__outline___16kvi, .button__success___1Kqkc:disabled.button__outline___16kvi, .button__info___3dNZr:disabled.button__outline___16kvi, .button__warning___2uiKu:disabled.button__outline___16kvi, .button__danger___2lI8c:disabled.button__outline___16kvi, .button__transparent___2HrEX:disabled.button__outline___16kvi {
      background: #ccc;
      border-color: #ccc;
      color: #999; }
    .button__default___1yLAY:disabled:active, .button__primary___1c847:disabled:active, .button__success___1Kqkc:disabled:active, .button__info___3dNZr:disabled:active, .button__warning___2uiKu:disabled:active, .button__danger___2lI8c:disabled:active, .button__transparent___2HrEX:disabled:active {
      box-shadow: none; }

/* Default Color
 ========================================================================== */
.button__default___1yLAY {
  color: #676a6c; }
  .button__default___1yLAY path {
    fill: #676a6c; }

/* Light Color
 ========================================================================== */
.button__primary___1c847, .button__success___1Kqkc, .button__info___3dNZr, .button__warning___2uiKu, .button__danger___2lI8c {
  color: #fff; }
  .button__primary___1c847 path, .button__success___1Kqkc path, .button__info___3dNZr path, .button__warning___2uiKu path, .button__danger___2lI8c path {
    fill: #fff; }

/* ==========================================================================
   Button Component
   ========================================================================== */
/* Default
 ========================================================================== */
.button__default___1yLAY {
  background: #fff;
  border-color: #e7eaec; }
  .button__default___1yLAY.button__outline___16kvi {
    background: none; }
  .button__default___1yLAY:hover {
    background-color: #f7f7f7;
    border-color: #d2d2d2; }

/* Primary
 ========================================================================== */
.button__primary___1c847 {
  background: #1ab394;
  border-color: #1ab394; }
  .button__primary___1c847.button__outline___16kvi {
    background: none;
    color: #1ab394; }
    .button__primary___1c847.button__outline___16kvi path {
      fill: #1ab394; }
  .button__primary___1c847:hover {
    background-color: #18a689;
    border-color: #18a689;
    color: #fff; }
    .button__primary___1c847:hover path {
      fill: #fff; }

/* Success
 ========================================================================== */
.button__success___1Kqkc {
  background: #1c84c6;
  border-color: #1c84c6; }
  .button__success___1Kqkc.button__outline___16kvi {
    background: none;
    color: #1c84c6; }
    .button__success___1Kqkc.button__outline___16kvi path {
      fill: #1c84c6; }
  .button__success___1Kqkc:hover {
    background-color: #1a7bb9;
    border-color: #1a7bb9;
    color: #fff; }
    .button__success___1Kqkc:hover path {
      fill: #fff; }

/* Info
 ========================================================================== */
.button__info___3dNZr {
  background: #23c6c8;
  border-color: #23c6c8; }
  .button__info___3dNZr.button__outline___16kvi {
    background: none;
    color: #23c6c8; }
    .button__info___3dNZr.button__outline___16kvi path {
      fill: #23c6c8; }
  .button__info___3dNZr:hover {
    background-color: #21b9bb;
    border-color: #21b9bb;
    color: #fff; }
    .button__info___3dNZr:hover path {
      fill: #fff; }

/* Warning
 ========================================================================== */
.button__warning___2uiKu {
  background: #f8ac59;
  border-color: #f8ac59; }
  .button__warning___2uiKu.button__outline___16kvi {
    background: none;
    color: #f8ac59; }
    .button__warning___2uiKu.button__outline___16kvi path {
      fill: #f8ac59; }
  .button__warning___2uiKu:hover {
    background-color: #f7a54a;
    border-color: #f7a54a;
    color: #fff; }
    .button__warning___2uiKu:hover path {
      fill: #fff; }

/* Danger
 ========================================================================== */
.button__danger___2lI8c {
  background: #ed5565;
  border-color: #ed5565; }
  .button__danger___2lI8c.button__outline___16kvi {
    background: none;
    color: #ed5565; }
    .button__danger___2lI8c.button__outline___16kvi path {
      fill: #ed5565; }
  .button__danger___2lI8c:hover {
    background-color: #ec4758;
    border-color: #ec4758;
    color: #fff; }
    .button__danger___2lI8c:hover path {
      fill: #fff; }

/* None
 ========================================================================== */
.button__transparent___2HrEX {
  background: none;
  border: none; }
  .button__transparent___2HrEX.button__outline___16kvi {
    background: none; }
  .button__transparent___2HrEX:hover {
    background: none; }

/* Sizes
 ========================================================================== */
.button__mini___3BUwD {
  font-size: 12px;
  line-height: 1.5;
  padding: 1px 5px; }

.button__small___3fLvc {
  font-size: 12px;
  line-height: 1.5;
  padding: 5px 10px; }

.button__medium___eY5Ts {
  font-size: 14px;
  line-height: 1.42857143;
  padding: 6px 12px; }

.button__large___1NEiN {
  font-size: 18px;
  line-height: 1.3333333;
  padding: 10px 16px; }

.button__none___1sxVZ {
  font-size: 18px;
  line-height: 1;
  padding: 0; }

/* Block
 ========================================================================== */
.button__block___3O6SI {
  display: block;
  width: 100%; }

/* Rounded
 ========================================================================== */
.button__rounded___13Je3 {
  border-radius: 50px; }

/* Circle
 ========================================================================== */
.button__circle___2HSqn {
  border-radius: 50%;
  line-height: 0; }
  .button__circle___2HSqn.button__mini___3BUwD {
    min-height: 22px;
    min-width: 22px;
    padding: 0; }
  .button__circle___2HSqn.button__small___3fLvc {
    min-height: 28px;
    min-width: 28px;
    padding: 3px; }
  .button__circle___2HSqn.button__medium___eY5Ts {
    min-height: 34px;
    min-width: 34px;
    padding: 6px; }
  .button__circle___2HSqn.button__large___1NEiN {
    min-height: 42px;
    min-width: 42px;
    padding: 10px; }

/* Loading
 ========================================================================== */
.button__loading___s9g6c {
  font-size: 0; }
  .button__loading___s9g6c:after {
    content: "Carregando......";
    display: inline-block;
    font-size: 14px; }
  .button__loading___s9g6c svg {
    display: none; }