substance/packages/button/_button.css

Substance is a JavaScript library for web-based content editing. It provides building blocks for realizing custom text editors and web-based publishing systems.

/*
  Dark Theme - when used on dark background
  =============================================================
*/

.sc-button.sm-theme-dark {
  position: relative;
  height: 24px;
  min-width: 24px;
  line-height: 24px;
  text-align: center;
  color: #fff;
  font-size: 12px;
  font-weight: 600;
  border-radius: 3px;
  padding-left: 7px;
  padding-right: 7px;
}

.sc-button.sm-theme-dark > .se-dropdown {
  padding-left: 5px;
}

.sc-button.sm-theme-dark[disabled=true] {
  opacity: 0.4;
  cursor: default;
}

.sc-button.sm-theme-dark.sm-active,
.sc-button.sm-theme-dark:focus {
  background: #e4e4e4;
  color: inherit;
}


/*
  Light Theme - when used on white background
  =============================================================
*/

.sc-button.sm-theme-light {
  position: relative;
  height: 24px;
  min-width: 24px;
  line-height: 24px;
  text-align: center;
  font-size: 12px;
  font-weight: 600;
  border-radius: 3px;
  padding-left: 7px;
  padding-right: 7px;
}

.sc-button.sm-theme-light > .se-dropdown {
  padding-left: 5px;
}

.sc-button.sm-theme-light[disabled=true] {
  opacity: 0.4;
  cursor: default;
}

.sc-button.sm-theme-light.sm-active {
  background: #2E2E2E;
  color: white;
}

.sc-button.sm-theme-light:hover:not(.sm-active):not([disabled]),
.sc-button.sm-theme-light:focus {
  background: #e4e4e4;
}