react-cqtoolbox/lib/button/theme.css

[![Travis][build-badge]][build] [![npm package][npm-badge]][npm] [![Coveralls][coveralls-badge]][coveralls]

.buttonGroup {
}
.buttonGroup .squared {
  border-radius: 0
}
.buttonGroup .squared:first-child {
  border-top-left-radius: 4px;
  border-bottom-left-radius: 4px
}
.buttonGroup .squared:last-child {
  border-top-right-radius: 4px;
  border-bottom-right-radius: 4px
}
.buttonGroup .neutral:not([disabled]).flat,
  .buttonGroup .primary:not([disabled]).flat,
  .buttonGroup .accent:not([disabled]).flat {
  border-width: 1px 0 1px 1px;
  border-style: solid
}
.buttonGroup .neutral:not([disabled]).flat:last-child, .buttonGroup .primary:not([disabled]).flat:last-child, .buttonGroup .accent:not([disabled]).flat:last-child {
  border-right-width: 1px
}
.button {
  font-size: 14px;
  font-weight: normal;

  position: relative;

  display: inline-block;

  padding: 0;

  cursor: pointer;
  -webkit-transition: box-shadow .2s cubic-bezier(0.4, 0, 1, 1),
  background-color .2s cubic-bezier(0.4, 0, 0.2, 1),
  color .2s cubic-bezier(0.4, 0, 0.2, 1);
  transition: box-shadow .2s cubic-bezier(0.4, 0, 1, 1),
  background-color .2s cubic-bezier(0.4, 0, 0.2, 1),
  color .2s cubic-bezier(0.4, 0, 0.2, 1);
  text-align: center;
  white-space: nowrap;
  text-decoration: none;
  letter-spacing: 0;
  text-transform: uppercase;

  border: 0;
  outline: none;

  box-sizing: border-box;

  font-family: Microsoft Yahei,Helvetica Neue,\\5B8B\4F53,Helvetica,Arial,sans-serif;

  -webkit-font-smoothing: antialiased;

  font-smoothing: antialiased;

  -webkit-text-size-adjust: 100%;

      -ms-text-size-adjust: 100%;

          text-size-adjust: 100%
}
.button *,
    .button *::after,
    .button *::before {
  box-sizing: border-box;
  -webkit-font-smoothing: antialiased;
  font-smoothing: antialiased;
  -webkit-text-size-adjust: 100%;
      -ms-text-size-adjust: 100%;
          text-size-adjust: 100%;
  -webkit-touch-callout: none
}
.button::-moz-focus-inner {
  border: 0
}
.button > * {
  pointer-events: none
}
.button > .rippleWrapper {
  overflow: hidden
}
.button[disabled] {
  cursor: auto;
  pointer-events: none;
  color: rgba(0, 0, 0, 0.26)
}
.normal {
  line-height: 28px;
}
.small {
  line-height: 22px;
}
.large {
  line-height: 32px;
}
.fullWidth {
  width: 100%;
}
.squared {
  min-width: 20px;
  padding: 0 12px;

  border-radius: 2px
}
.squared .icon {
  margin-right: 0.5em;
  vertical-align: baseline
}
.raised {
  composes: button;
  composes: squared
}
.raised[disabled] {
  border: 1px solid rgba(0, 0, 0, 0.12);
  background-color: rgba(0, 0, 0, 0.12)
}
.flat {
  background: transparent;

  composes: button;
  composes: squared
}
.flat[disabled] {
  border: 1px solid transparent
}
.floating {
  font-size: 24px;

  width: 56px;
  height: 56px;

  border-radius: 50%;
  box-shadow: 0 1px 1.5px 0 rgba(0, 0, 0, .12),
  0 1px 1px 0 rgba(0, 0, 0, .24);

  composes: button
}
.floating .icon:not([data-react-toolbox="tooltip"]) {
  line-height: 56px
}
.floating > .rippleWrapper {
  border-radius: 50%
}
.floating.mini {
  font-size: 17.77778px;
  width: 40px;
  height: 40px
}
.floating.mini .icon {
  line-height: 40px
}
.toggle {
  width: 27;

  vertical-align: middle;

  border-radius: 50%;
  background: transparent;

  composes: button
}
.toggle > .icon,
  .toggle > .rippleWrapper {
  border-radius: 50%
}
.primary:not([disabled]) {
}
.primary:not([disabled]).raised,
  .primary:not([disabled]).floating {
  color: rgb(255, 255, 255);
  border: 1px solid rgb(0, 188, 212);
  background: rgb(0, 188, 212)
}
.primary:not([disabled]).flat,
  .primary:not([disabled]).toggle {
  color: rgb(0, 188, 212);
  border: 1px solid rgb(0, 188, 212)
}
.primary:not([disabled]).flat:focus:not(:active), .primary:not([disabled]).toggle:focus:not(:active) {
  background: rgba(0, 188, 212, 0.2)
}
.primary:not([disabled]).flat:hover {
  background: rgba(0, 188, 212, 0.2)
}
.accent:not([disabled]) {
}
.accent:not([disabled]).raised,
  .accent:not([disabled]).floating {
  color: rgb(255, 255, 255);
  border: 1px solid rgb(255, 64, 129);
  background: rgb(255, 64, 129)
}
.accent:not([disabled]).flat,
  .accent:not([disabled]).toggle {
  color: rgb(255, 64, 129);
  border: 1px solid rgb(255, 64, 129)
}
.accent:not([disabled]).flat:focus:not(:active), .accent:not([disabled]).toggle:focus:not(:active) {
  background: rgba(255, 64, 129, 0.2)
}
.accent:not([disabled]).flat:hover {
  background: rgba(255, 64, 129, 0.2)
}
.neutral:not([disabled]) {
}
.neutral:not([disabled]).raised,
  .neutral:not([disabled]).floating {
  color: rgb(33, 33, 33);
  border: 1px solid rgb(255, 255, 255);
  background-color: rgb(255, 255, 255)
}
.neutral:not([disabled]).flat,
  .neutral:not([disabled]).toggle {
  color: rgb(33, 33, 33);
  border: 1px solid rgb(224, 224, 224)
}
.neutral:not([disabled]).flat:focus:not(:active), .neutral:not([disabled]).toggle:focus:not(:active) {
  background: rgba(158, 158, 158, 0.2)
}
.neutral:not([disabled]).flat:hover {
  background: rgba(158, 158, 158, 0.2)
}