maille/components/button/style.css

Component library for MithrilJS

/* Colors
 * See: https://flatuicolors.com/palette/defo
 *
 * Primary (Peter River) => #3498db
 * Success (Emerald) => #2ecc71
 * Warning (Carrot) => #e67e22
 * Error (Alizarin) => #e74c3c
 * Info (Asbestos) => #7f8c8d
 *
 * <button>.disabled colors were obtained by lightening by 25%
 */

.maille.maille-button {
  box-sizing: border-box;
  background-color: black;
  color: white;
  border: 2px solid black;
  cursor: pointer;
  margin: var(--maille-button-margin, 0);
}

.maille.maille-button.no-margin {
  margin: 0;
}

.maille.maille-button.disabled {
  cursor: not-allowed;
}

.maille.maille-button.outlined {
  background: rgba(0,0,0,0);
  color: black;
  border: 2px solid black;
}

.maille.maille-button.rounded {
  border-radius: .25em;
}

.maille.maille-button.rounded.no-rounded-top {
  border-top-left-radius: 0;
  border-top-right-radius: 0;
}

.maille.maille-button.rounded.no-rounded-bottom {
  border-bottom-left-radius: 0;
  border-bottom-left-radius: 0;
}

.maille.maille-button.rounded.no-rounded-top-left { border-top-left-radius: 0; }
.maille.maille-button.rounded.no-rounded-top-right { border-top-right-radius: 0; }
.maille.maille-button.rounded.no-rounded-bottom-right { border-bottom-right-radius: 0; }
.maille.maille-button.rounded.no-rounded-bottom-left { border-bottom-left-radius: 0; }

.maille.maille-button.size-md { padding: .5em; }
.maille.maille-button.size-sm { padding: .25em; }
.maille.maille-button.size-lg { padding: .75em; }

.maille.maille-button.primary {
  background-color: var(--maille-button-primary-color-bg, #3498db);
  border-color: var(--maille-button-primary-color-bg, #3498db);
  color: var(--maille-button-primary-color-fg, white);
}

.maille.maille-button.primary.outlined {
  background: rgba(0,0,0,0);
  border-color: var(--maille-button-primary-color-bg, #3498db);
  color: var(--maille-button-primary-color-bg, #3498db);
}

.maille.maille-button.primary.disabled {
  background-color: var(--maille-button-primary-disabled-color--bg, #66b1e4);
  border-color: var(--maille-button-primary-disabled-color-bg, #66b1e4);
  color: var(--maille-button-primary-disabled-color-fg, #EEEEEE);
}

.maille.maille-button.success {
  background-color: var(--maille-button-success-color-bg, #2ecc71);
  border-color: var(--maille-button-success-color-bg, #2ecc71);
  color: var(--maille-button-success-color-fg, white);
}

.maille.maille-button.success.outlined {
  background: rgba(0,0,0,0);
  border-color: var(--maille-button-success-color-bg, #2ecc71);
  color: var(--maille-button-success-color-bg, #2ecc71);
}

.maille.maille-button.success.disabled {
  background-color: var(--maille-button-success-disabled-color-bg, #5fdb94);
  border-color: var(--maille-button-success-disabled-color-bg, #5fdb94);
  color: var(--maille-button-success-disabled-color-fg, #EEE);
}

.maille.maille-button.error {
  background-color: var(--maille-button-error-color-bg, #e74c3c);
  border-color: var(--maille-button-error-color-bg, #e74c3c);
  color: var(--maille-button-error-color-fg, white);
}

.maille.maille-button.error.outlined {
  background: rgba(0,0,0,0);
  border-color: var(--maille-button-error-color-bg, #e74c3c);
  color: var(--maille-button-error-color-bg, #e74c3c);
}

.maille.maille-button.error.disabled {
  background-color: var(--maille-button-error-disabled-color-bg, #ed786c);
  border-color: var(--maille-button-error-disabled-color-bg, #ed786c);
  color: var(--maille-button-error-disabled-color-fg, #EEE);
}

.maille.maille-button.warning {
  background-color: var(--maille-button-warning-color-bg, #e67e22);
  border-color: var(--maille-button-warning-color-bg, #e67e22);
  color: var(--maille-button-warning-color-fg, white);
}

.maille.maille-button.warning.outlined {
  background: rgba(0,0,0,0);
  border-color: var(--maille-button-warning-color-bg, #e67e22);
  color: var(--maille-button-warning-color-bg, #e67e22);
}

.maille.maille-button.warning.disabled {
  background-color: var(--maille-button-warning-color-bg, #ec9e59);
  border-color: var(--maille-button-warning-color-bg, #ec9e59);
  color: var(--maille-button-warning-color-fg, #EEE);
}

.maille.maille-button.info {
  background-color: var(--maille-button-info-color-bg, #7f8c8d);
  border-color: var(--maille-button-info-color-bg, #7f8c8d);
  color: var(--maille-button-info-color-fg, white);
}

.maille.maille-button.info.outlined {
  background: rgba(0,0,0,0);
  border-color: var(--maille-button-info-color-bg, #7f8c8d);
  color: var(--maille-button-info-color-bg, #7f8c8d);
}

.maille.maille-button.info.disabled {
  background-color: var(--maille-button-info-color-bg, #9fa8a9);
  border-color: var(--maille-button-info-color-bg, #9fa8a9);
  color: var(--maille-button-info-color-fg, #EEE);
}