ayovue/themes/default/button.css

A progressive vue components library designed to simplify and accelerate your web development process.

@import url('../base/button.css');
.a-button {
  border-radius: 0.2em;
  color: white;
  color: var(--a-color, white);
  background: var(--a-background, var(--a-c-theme-700));
  border: 1px solid var(--a-c-theme-600);
  padding: 0 1em;
  transition: all 0.1s ease;
  height: 2.25em;
}
.a-button:hover {
    background: var(--a-c-theme-500);
  }
.a-button:active {
    outline: 0 solid var(--a-c-theme-200);
  }
.a-button:focus {
    outline: 3px solid var(--a-c-theme-200);
  }
.a-button:not(.a-text):not(.a-outlined) {
    background: var(--a-c-theme-600);
    color: var(--a-c-theme-50);
    fill: var(--a-c-theme-50);
  }
.a-button:not(.a-text):not(.a-outlined):hover {
    background: var(--a-c-theme-500);
    border-color: var(--a-c-theme-500);
    color: var(--a-c-theme-50);
  }
.a-button.a-text,
  .a-button.a-outlined {
    background: transparent;
    color: var(--a-c-theme-600);
    fill: var(--a-c-theme-600);
  }
.a-button.a-text:hover,
  .a-button.a-outlined:hover {
    background: var(--a-c-theme-50);
  }
.a-button.a-raised {
    box-shadow: 0 3px 1px -2px var(--a-c-gray-500), 0 2px 2px 0 var(--a-c-gray-400),
      0 1px 5px 0 var(--a-c-gray-300);
  }
.a-button.a-raised.a-text,
  .a-button.a-raised.a-outlined {
    box-shadow: 0 3px 1px -2px var(--a-c-gray-400), 0 2px 2px 0 var(--a-c-gray-300),
      0 1px 5px 0 var(--a-c-gray-200);
  }
.a-button.a-icon {
    fill: var(--a-c-theme-600);
    padding: 1em;
  }
.a-button:disabled {
    cursor: not-allowed;
  }