smart-webcomponents-angular/source/styles/default/smart.button.css

[](https://jqwidgets.com/license/)

/* smart-button, smart-repeat-button, smart-toggle-button */
smart-button,
smart-toggle-button,
smart-repeat-button,
.smart-button-element {
  --smart-button-flat-color: var(--smart-background-color);
  text-align: center;
  display: inline-flex;
  vertical-align: middle;
  cursor: pointer;
  text-transform: var(--smart-button-text-transform);
  letter-spacing: 0.08929em;
  overflow: hidden;
  border-color: var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  border-width: var(--smart-border-width);
  border-style: solid;
  visibility: hidden;
  font-weight: 500;
}
smart-button.smart-element,
smart-toggle-button.smart-element,
smart-repeat-button.smart-element,
.smart-button-element.smart-element {
  display: inline-flex;
  visibility: inherit;
}
smart-button button::-moz-focus-inner,
smart-toggle-button button::-moz-focus-inner,
smart-repeat-button button::-moz-focus-inner,
.smart-button-element button::-moz-focus-inner {
  border: 0;
}
smart-button.primary,
smart-toggle-button.primary,
smart-repeat-button.primary,
.smart-button-element.primary {
  --smart-button-opacity-hover: 0.75;
  --smart-button-opacity-focus: 0.7;
  --smart-button-opacity-active: 0.65;
  --smart-background: var(--smart-primary);
  --smart-border: var(--smart-primary);
  --smart-border-rgb: var(--smart-primary-rgb);
  --smart-background-color: var(--smart-primary-color);
  --smart-ui-state-hover: var(--smart-primary);
  --smart-ui-state-border-hover: var(--smart-primary);
  --smart-ui-state-color-hover: var(--smart-primary-color);
  --smart-ui-state-active: var(--smart-primary);
  --smart-ui-state-border-active: var(--smart-primary);
  --smart-ui-state-color-active: var(--smart-primary-color);
  --smart-ui-state-focus: var(--smart-primary);
  --smart-ui-state-border-focus: var(--smart-primary);
  --smart-ui-state-color-focus: var(--smart-primary-color);
  --smart-button-flat-color: var(--smart-primary);
  --smart-button-outlined-color: var(--smart-primary);
  --smart-button-outlined-border: var(--smart-primary);
}
smart-button.secondary,
smart-toggle-button.secondary,
smart-repeat-button.secondary,
.smart-button-element.secondary {
  --smart-button-opacity-hover: 0.75;
  --smart-button-opacity-focus: 0.7;
  --smart-button-opacity-active: 0.65;
  --smart-background: var(--smart-secondary);
  --smart-border: var(--smart-secondary);
  --smart-border-rgb: var(--smart-secondary-rgb);
  --smart-background-color: var(--smart-secondary-color);
  --smart-ui-state-hover: var(--smart-secondary);
  --smart-ui-state-border-hover: var(--smart-secondary);
  --smart-ui-state-color-hover: var(--smart-secondary-color);
  --smart-ui-state-active: var(--smart-secondary);
  --smart-ui-state-border-active: var(--smart-secondary);
  --smart-ui-state-color-active: var(--smart-secondary-color);
  --smart-ui-state-focus: var(--smart-secondary);
  --smart-ui-state-border-focus: var(--smart-secondary);
  --smart-ui-state-color-focus: var(--smart-secondary-color);
  --smart-button-flat-color: var(--smart-secondary);
  --smart-button-outlined-color: var(--smart-secondary);
  --smart-button-outlined-border: var(--smart-secondary);
}
smart-button.success,
smart-toggle-button.success,
smart-repeat-button.success,
.smart-button-element.success {
  --smart-button-opacity-hover: 0.75;
  --smart-button-opacity-focus: 0.7;
  --smart-button-opacity-active: 0.65;
  --smart-background: var(--smart-success);
  --smart-border: var(--smart-success);
  --smart-border-rgb: var(--smart-success-rgb);
  --smart-background-color: var(--smart-success-color);
  --smart-ui-state-hover: var(--smart-success);
  --smart-ui-state-border-hover: var(--smart-success);
  --smart-ui-state-color-hover: var(--smart-success-color);
  --smart-ui-state-active: var(--smart-success);
  --smart-ui-state-border-active: var(--smart-success);
  --smart-ui-state-color-active: var(--smart-success-color);
  --smart-ui-state-focus: var(--smart-success);
  --smart-ui-state-border-focus: var(--smart-success);
  --smart-ui-state-color-focus: var(--smart-success-color);
  --smart-button-flat-color: var(--smart-success);
  --smart-button-outlined-color: var(--smart-success);
  --smart-button-outlined-border: var(--smart-success);
}
smart-button.error,
smart-toggle-button.error,
smart-repeat-button.error,
.smart-button-element.error {
  --smart-button-opacity-hover: 0.75;
  --smart-button-opacity-focus: 0.7;
  --smart-button-opacity-active: 0.65;
  --smart-background: var(--smart-error);
  --smart-border: var(--smart-error);
  --smart-border-rgb: var(--smart-error-rgb);
  --smart-background-color: var(--smart-error-color);
  --smart-ui-state-hover: var(--smart-error);
  --smart-ui-state-border-hover: var(--smart-error);
  --smart-ui-state-color-hover: var(--smart-error-color);
  --smart-ui-state-active: var(--smart-error);
  --smart-ui-state-border-active: var(--smart-error);
  --smart-ui-state-color-active: var(--smart-error-color);
  --smart-ui-state-focus: var(--smart-error);
  --smart-ui-state-border-focus: var(--smart-error);
  --smart-ui-state-color-focus: var(--smart-error-color);
  --smart-button-flat-color: var(--smart-error);
  --smart-button-outlined-color: var(--smart-error);
  --smart-button-outlined-border: var(--smart-error);
}
smart-button.info,
smart-toggle-button.info,
smart-repeat-button.info,
.smart-button-element.info {
  --smart-button-opacity-hover: 0.75;
  --smart-button-opacity-focus: 0.7;
  --smart-button-opacity-active: 0.65;
  --smart-background: var(--smart-info);
  --smart-border: var(--smart-info);
  --smart-border-rgb: var(--smart-info-rgb);
  --smart-background-color: var(--smart-info-color);
  --smart-ui-state-hover: var(--smart-info);
  --smart-ui-state-border-hover: var(--smart-info);
  --smart-ui-state-color-hover: var(--smart-info-color);
  --smart-ui-state-active: var(--smart-info);
  --smart-ui-state-border-active: var(--smart-info);
  --smart-ui-state-color-active: var(--smart-info-color);
  --smart-ui-state-focus: var(--smart-info);
  --smart-ui-state-border-focus: var(--smart-info);
  --smart-ui-state-color-focus: var(--smart-info-color);
  --smart-button-flat-color: var(--smart-info);
  --smart-button-outlined-color: var(--smart-info);
  --smart-button-outlined-border: var(--smart-info);
}
smart-button.warning,
smart-toggle-button.warning,
smart-repeat-button.warning,
.smart-button-element.warning {
  --smart-button-opacity-hover: 0.75;
  --smart-button-opacity-focus: 0.7;
  --smart-button-opacity-active: 0.65;
  --smart-background: var(--smart-warning);
  --smart-border: var(--smart-warning);
  --smart-border-rgb: var(--smart-warning-rgb);
  --smart-background-color: var(--smart-warning-color);
  --smart-ui-state-hover: var(--smart-warning);
  --smart-ui-state-border-hover: var(--smart-warning);
  --smart-ui-state-color-hover: var(--smart-warning-color);
  --smart-ui-state-active: var(--smart-warning);
  --smart-ui-state-border-active: var(--smart-warning);
  --smart-ui-state-color-active: var(--smart-warning-color);
  --smart-ui-state-focus: var(--smart-warning);
  --smart-ui-state-border-focus: var(--smart-warning);
  --smart-ui-state-color-focus: var(--smart-warning-color);
  --smart-button-flat-color: var(--smart-warning);
  --smart-button-outlined-color: var(--smart-warning);
  --smart-button-outlined-border: var(--smart-warning);
}
smart-button.light,
smart-toggle-button.light,
smart-repeat-button.light,
.smart-button-element.light {
  --smart-button-opacity-hover: 0.75;
  --smart-button-opacity-focus: 0.7;
  --smart-button-opacity-active: 0.65;
  --smart-background: var(--smart-light);
  --smart-border: var(--smart-light);
  --smart-border-rgb: var(--smart-light-rgb);
  --smart-background-color: var(--smart-light-color);
  --smart-ui-state-hover: var(--smart-light);
  --smart-ui-state-border-hover: var(--smart-light);
  --smart-ui-state-color-hover: var(--smart-light-color);
  --smart-ui-state-active: var(--smart-light);
  --smart-ui-state-border-active: var(--smart-light);
  --smart-ui-state-color-active: var(--smart-light-color);
  --smart-ui-state-focus: var(--smart-light);
  --smart-ui-state-border-focus: var(--smart-light);
  --smart-ui-state-color-focus: var(--smart-light-color);
  --smart-button-flat-color: var(--smart-light);
  --smart-button-outlined-color: var(--smart-light);
  --smart-button-outlined-border: var(--smart-light);
}
smart-button.dark,
smart-toggle-button.dark,
smart-repeat-button.dark,
.smart-button-element.dark {
  --smart-button-opacity-hover: 0.75;
  --smart-button-opacity-focus: 0.7;
  --smart-button-opacity-active: 0.65;
  --smart-background: var(--smart-dark);
  --smart-border: var(--smart-dark);
  --smart-border-rgb: var(--smart-dark-rgb);
  --smart-background-color: var(--smart-dark-color);
  --smart-ui-state-hover: var(--smart-dark);
  --smart-ui-state-border-hover: var(--smart-dark);
  --smart-ui-state-color-hover: var(--smart-dark-color);
  --smart-ui-state-active: var(--smart-dark);
  --smart-ui-state-border-active: var(--smart-dark);
  --smart-ui-state-color-active: var(--smart-dark-color);
  --smart-ui-state-focus: var(--smart-dark);
  --smart-ui-state-border-focus: var(--smart-dark);
  --smart-ui-state-color-focus: var(--smart-dark-color);
  --smart-button-flat-color: var(--smart-dark);
  --smart-button-outlined-color: var(--smart-dark);
  --smart-button-outlined-border: var(--smart-dark);
}
smart-button[hover],
smart-toggle-button[hover],
smart-repeat-button[hover],
.smart-button-element[hover] {
  color: var(--smart-ui-state-color-hover);
  border-color: var(--smart-ui-state-border-hover);
  background-color: var(--smart-ui-state-hover);
  transition: background-color 100ms linear, box-shadow 280ms ease-in-out;
  opacity: var(--smart-button-opacity-hover);
}
smart-button[focus],
smart-toggle-button[focus],
smart-repeat-button[focus],
.smart-button-element[focus] {
  color: var(--smart-ui-state-color-focus);
  border-color: var(--smart-ui-state-border-focus);
  background-color: var(--smart-ui-state-focus);
  opacity: var(--smart-button-opacity-focus);
}
smart-button[active],
smart-toggle-button[active],
smart-repeat-button[active],
.smart-button-element[active] {
  color: var(--smart-ui-state-color-active);
  border-color: var(--smart-ui-state-border-active);
  background-color: var(--smart-ui-state-active);
  transition: background-color 100ms linear, box-shadow 280ms ease-in-out;
  opacity: var(--smart-button-opacity-active);
}
smart-button[disabled],
smart-toggle-button[disabled],
smart-repeat-button[disabled],
.smart-button-element[disabled] {
  color: var(--smart-disabled-color);
  border-color: var(--smart-disabled);
  background-color: var(--smart-disabled);
  cursor: default;
  --smart-background: var(--smart-disabled);
  --smart-border: var(--smart-disabled);
  --smart-background-color: var(--smart-disabled-color);
}
smart-button.large button,
smart-toggle-button.large button,
smart-repeat-button.large button,
.smart-button-element.large button {
  padding: var(--smart-button-large-padding);
  font-size: var(--smart-button-large-font-size);
}
smart-button.small button,
smart-toggle-button.small button,
smart-repeat-button.small button,
.smart-button-element.small button {
  padding: var(--smart-button-small-padding);
  font-size: var(--smart-button-small-font-size);
}
smart-button.very-small button,
smart-toggle-button.very-small button,
smart-repeat-button.very-small button,
.smart-button-element.very-small button {
  padding: var(--smart-button-very-small-padding);
  font-size: var(--smart-button-very-small-font-size);
}
smart-button.rounded,
smart-toggle-button.rounded,
smart-repeat-button.rounded,
.smart-button-element.rounded {
  --smart-border-top-left-radius: 50px;
  --smart-border-top-right-radius: 50px;
  --smart-border-bottom-left-radius: 50px;
  --smart-border-bottom-right-radius: 50px;
  border-radius: var(--smart-border-bottom-left-radius) !important;
}
smart-button.squared,
smart-toggle-button.squared,
smart-repeat-button.squared,
.smart-button-element.squared {
  --smart-border-top-left-radius: 0;
  --smart-border-top-right-radius: 0;
  --smart-border-bottom-left-radius: 0;
  --smart-border-bottom-right-radius: 0;
}
smart-button.flat,
smart-toggle-button.flat,
smart-repeat-button.flat,
.smart-button-element.flat {
  color: var(--smart-button-flat-color);
  background: transparent;
  border-color: transparent;
}
smart-button.flat[hover],
smart-toggle-button.flat[hover],
smart-repeat-button.flat[hover],
.smart-button-element.flat[hover] {
  color: var(--smart-button-flat-color);
  background: transparent;
  border-color: transparent;
}
smart-button.flat[active],
smart-toggle-button.flat[active],
smart-repeat-button.flat[active],
.smart-button-element.flat[active] {
  color: var(--smart-button-flat-color);
  background: transparent;
  border-color: transparent;
}
smart-button.flat[focus],
smart-toggle-button.flat[focus],
smart-repeat-button.flat[focus],
.smart-button-element.flat[focus] {
  border-color: var(--smart-ui-state-focus);
}
smart-button.flat[checked],
smart-toggle-button.flat[checked],
smart-repeat-button.flat[checked],
.smart-button-element.flat[checked] {
  text-decoration: underline;
  background: var(--smart-ui-state-active);
}
smart-button.flat .smart-ripple,
smart-toggle-button.flat .smart-ripple,
smart-repeat-button.flat .smart-ripple,
.smart-button-element.flat .smart-ripple {
  background-color: var(--smart-button-flat-color);
}
smart-button.outlined,
smart-toggle-button.outlined,
smart-repeat-button.outlined,
.smart-button-element.outlined {
  color: var(--smart-button-outlined-color);
  border-color: var(--smart-button-outlined-border);
  background: transparent;
  border-width: calc(2 * var(--smart-border-width));
}
smart-button.outlined[hover],
smart-toggle-button.outlined[hover],
smart-repeat-button.outlined[hover],
.smart-button-element.outlined[hover] {
  color: var(--smart-button-outlined-color);
  border-color: var(--smart-button-outlined-border);
  background: transparent;
}
smart-button.outlined[active],
smart-toggle-button.outlined[active],
smart-repeat-button.outlined[active],
.smart-button-element.outlined[active] {
  color: var(--smart-button-outlined-color);
  border-color: var(--smart-button-outlined-border);
  background: transparent;
}
smart-button.outlined[focus],
smart-toggle-button.outlined[focus],
smart-repeat-button.outlined[focus],
.smart-button-element.outlined[focus] {
  color: var(--smart-button-outlined-color);
  border-color: var(--smart-ui-state-focus);
  background: transparent;
}
smart-button.outlined[checked],
smart-toggle-button.outlined[checked],
smart-repeat-button.outlined[checked],
.smart-button-element.outlined[checked] {
  color: var(--smart-ui-state-color-active);
  border-color: var(--smart-ui-state-active);
  background: var(--smart-ui-state-active);
}
smart-button.outlined .smart-ripple,
smart-toggle-button.outlined .smart-ripple,
smart-repeat-button.outlined .smart-ripple,
.smart-button-element.outlined .smart-ripple {
  background-color: var(--smart-button-outlined-color);
}
smart-button.outlined button.smart-button,
smart-toggle-button.outlined button.smart-button,
smart-repeat-button.outlined button.smart-button,
.smart-button-element.outlined button.smart-button {
  border-radius: initial;
}
smart-button.raised,
smart-toggle-button.raised,
smart-repeat-button.raised,
.smart-button-element.raised {
  box-shadow: var(--smart-elevation-2);
  transition: background-color 100ms linear, box-shadow 280ms ease-in-out;
}
smart-button.raised[hover],
smart-toggle-button.raised[hover],
smart-repeat-button.raised[hover],
.smart-button-element.raised[hover] {
  box-shadow: var(--smart-elevation-4);
}
smart-button.raised[active], smart-button.raised[checked], smart-button.raised[active],
smart-button.raised button[active],
smart-toggle-button.raised[active],
smart-toggle-button.raised[checked],
smart-toggle-button.raised[active],
smart-toggle-button.raised button[active],
smart-repeat-button.raised[active],
smart-repeat-button.raised[checked],
smart-repeat-button.raised[active],
smart-repeat-button.raised button[active],
.smart-button-element.raised[active],
.smart-button-element.raised[checked],
.smart-button-element.raised[active],
.smart-button-element.raised button[active] {
  box-shadow: var(--smart-elevation-8);
}
smart-button.raised[focus], smart-button.raised[focus]:not([checked]),
smart-toggle-button.raised[focus],
smart-toggle-button.raised[focus]:not([checked]),
smart-repeat-button.raised[focus],
smart-repeat-button.raised[focus]:not([checked]),
.smart-button-element.raised[focus],
.smart-button-element.raised[focus]:not([checked]) {
  box-shadow: var(--smart-elevation-6);
}
smart-button.floating,
smart-toggle-button.floating,
smart-repeat-button.floating,
.smart-button-element.floating {
  border-radius: 50%;
  width: 48px;
  height: 48px;
  box-shadow: var(--smart-elevation-4);
  transition: background-color 100ms linear, box-shadow 280ms ease-in-out;
}
smart-button.floating[hover],
smart-toggle-button.floating[hover],
smart-repeat-button.floating[hover],
.smart-button-element.floating[hover] {
  box-shadow: var(--smart-elevation-6);
}
smart-button.floating[active], smart-button.floating[checked],
smart-toggle-button.floating[active],
smart-toggle-button.floating[checked],
smart-repeat-button.floating[active],
smart-repeat-button.floating[checked],
.smart-button-element.floating[active],
.smart-button-element.floating[checked] {
  box-shadow: var(--smart-elevation-12);
}
smart-button.floating[focus], smart-button.floating[focus]:not([checked]),
smart-toggle-button.floating[focus],
smart-toggle-button.floating[focus]:not([checked]),
smart-repeat-button.floating[focus],
smart-repeat-button.floating[focus]:not([checked]),
.smart-button-element.floating[focus],
.smart-button-element.floating[focus]:not([checked]) {
  box-shadow: var(--smart-elevation-6);
}

button.smart-button {
  position: relative;
  padding: var(--smart-button-padding);
  text-align: inherit;
  vertical-align: inherit;
  cursor: inherit;
  text-transform: inherit;
  font-weight: inherit;
  letter-spacing: inherit;
  background: inherit;
  color: inherit;
  border: none;
  -webkit-font-smoothing: antialiased;
  opacity: var(--smart-button-opacity);
  white-space: nowrap;
  border-radius: inherit;
}

.smart-button .smart-ripple {
  background: var(--smart-background-color);
}

smart-toggle-button .smart-container,
[smart-toggle-button] .smart-container {
  font-weight: inherit;
  font-style: inherit;
}
smart-toggle-button[checked],
[smart-toggle-button][checked] {
  color: var(--smart-ui-state-color-selected);
  border-color: var(--smart-ui-state-border-selected);
  background-color: var(--smart-ui-state-selected);
}

.smart-scroll-button .smart-button {
  padding: 0px;
}

:host(.smart-button.flat) .smart-ripple {
  background-color: var(--smart-button-flat-color);
}

:host(.smart-button.outlined) .smart-ripple {
  background-color: var(--smart-button-outlined-color);
}

button.smart-button[type]:not(.smart-container) {
  border-color: var(--smart-border);
  border-top-left-radius: var(--smart-border-top-left-radius);
  border-top-right-radius: var(--smart-border-top-right-radius);
  border-bottom-left-radius: var(--smart-border-bottom-left-radius);
  border-bottom-right-radius: var(--smart-border-bottom-right-radius);
  border-width: var(--smart-border-width);
  border-style: solid;
  text-align: center;
  vertical-align: middle;
  cursor: pointer;
  text-transform: var(--smart-button-text-transform);
  font-weight: 500;
  letter-spacing: 0.08929em;
  overflow: hidden;
  font-style: var(--smart-font-style);
  font-size: var(--smart-font-size);
  background: var(--smart-background);
  outline: none;
}

button.smart-button[type]:hover {
  color: var(--smart-ui-state-color-hover);
  border-color: var(--smart-ui-state-border-hover);
  background-color: var(--smart-ui-state-hover);
}

button.smart-button[type]:not([disabled]):active {
  color: var(--smart-ui-state-color-active);
  border-color: var(--smart-ui-state-border-active);
  background-color: var(--smart-ui-state-active);
}

/* smart-button, smart-repeat-button, smart-toggle-button */
smart-button[right-to-left],
smart-toggle-button[right-to-left],
smart-repeat-button[right-to-left] {
  direction: rtl;
}