FileMaster

Edit File: sc-button.css

:host {
  display: inline-block;
  width: auto;
  cursor: pointer;
  --primary-color: var(--sc-color-primary-text);
  --primary-background: var(--sc-color-primary-500);
}

:host([full]) {
  display: block;
}

::slotted(*) {
  pointer-events: none;
}

.button {
  box-sizing: border-box;
  z-index: 10;
  display: inline-flex;
  align-items: stretch;
  justify-content: center;
  width: 100%;
  border-style: solid;
  border-width: var(--sc-input-border-width);
  font-family: var(--sc-input-font-family);
  font-weight: var(--sc-font-weight-semibold);
  text-decoration: none;
  user-select: none;
  white-space: nowrap;
  vertical-align: middle;
  padding: 0;
  transition: var(--sc-input-transition, var(--sc-transition-medium)) background-color, var(--sc-input-transition, var(--sc-transition-medium)) color, var(--sc-input-transition, var(--sc-transition-medium)) border, var(--sc-input-transition, var(--sc-transition-medium)) box-shadow, var(--sc-input-transition, var(--sc-transition-medium)) opacity;
  cursor: inherit;
}
.button::-moz-focus-inner {
  border: 0;
}
.button:focus {
  outline: none;
}
.button:focus-visible {
  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);
}
.button.button--disabled {
  cursor: not-allowed;
}
.button.button--disabled * {
  pointer-events: none;
}
.button.button--disabled .button__label,
.button.button--disabled .button__suffix,
.button.button--disabled .button__prefix {
  opacity: 0.5;
}
.button ::slotted(.sc--icon) {
  pointer-events: none;
}

.button__prefix,
.button__suffix {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
}

.button__label {
  display: flex;
  align-items: center;
}
.button__label ::slotted(sc-icon) {
  vertical-align: -2px;
}

.button:not(.button--text):not(.button--link) {
  box-shadow: var(--sc-shadow-small);
}

.button.button--standard.button--default {
  background-color: var(--sc-button-default-background-color, var(--sc-color-white));
  border-color: var(--sc-button-default-border-color, var(--sc-color-gray-300));
  color: var(--sc-button-default-color, var(--sc-color-gray-600));
}
.button.button--standard.button--default:hover:not(.button--disabled) {
  background-color: var(--sc-button-default-hover-background-color, var(--sc-color-white));
  border-color: var(--sc-button-default-focus-border-color, var(--primary-background));
  color: var(--primary-background);
}
.button.button--standard.button--default:focus:not(.button--disabled) {
  background-color: var(--sc-button-default-focus-background-color, var(--sc-color-white));
  border-color: var(--sc-button-default-focus-border-color, var(--sc-color-white));
  color: var(--primary-background);
  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);
}
.button.button--standard.button--default:active:not(.button--disabled) {
  background-color: var(--sc-button-default-active-background-color, var(--sc-color-white));
  border-color: var(--sc-button-default-active-border-color, var(--sc-color-white));
  color: var(--primary-background);
}
.button.button--standard.button--primary {
  background-color: var(--primary-background);
  border-color: var(--primary-background);
  color: var(--primary-color);
}
.button.button--standard.button--primary:hover:not(.button--disabled) {
  opacity: 0.8;
}
.button.button--standard.button--primary:focus:not(.button--disabled) {
  opacity: 0.8;
  color: var(--primary-color);
  border-color: var(--sc-color-white);
  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);
}
.button.button--standard.button--primary:active:not(.button--disabled) {
  background-color: var(--primary-background);
  border-color: var(--sc-color-white);
  color: var(--primary-color);
}
.button.button--standard.button--success {
  background-color: var(--sc-color-success-500);
  border-color: var(--sc-color-success-500);
  color: var(--sc-color-success-text);
}
.button.button--standard.button--success:hover:not(.button--disabled) {
  background-color: var(--sc-color-success-400);
  border-color: var(--sc-color-success-400);
  color: var(--sc-color-success-text);
}
.button.button--standard.button--success:focus:not(.button--disabled) {
  background-color: var(--sc-color-success-400);
  border-color: var(--sc-color-success-400);
  color: var(--sc-color-success-text);
  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-success);
}
.button.button--standard.button--success:active:not(.button--disabled) {
  background-color: var(--sc-color-success-500);
  border-color: var(--sc-color-success-500);
  color: var(--sc-color-success-text);
}
.button.button--standard.button--info {
  background-color: var(--sc-color-info-500);
  border-color: var(--sc-color-info-500);
  color: var(--sc-color-info-text);
}
.button.button--standard.button--info:hover:not(.button--disabled) {
  background-color: var(--sc-color-info-400);
  border-color: var(--sc-color-info-400);
  color: var(--sc-color-info-text);
}
.button.button--standard.button--info:focus:not(.button--disabled) {
  background-color: var(--sc-color-info-400);
  border-color: var(--sc-color-info-400);
  color: var(--sc-color-info-text);
  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-info);
}
.button.button--standard.button--info:active:not(.button--disabled) {
  background-color: var(--sc-color-info-500);
  border-color: var(--sc-color-info-500);
  color: var(--sc-color-info-text);
}
.button.button--standard.button--warning {
  background-color: var(--sc-color-warning-500);
  border-color: var(--sc-color-warning-500);
  color: var(--sc-color-warning-text);
}
.button.button--standard.button--warning:hover:not(.button--disabled) {
  background-color: var(--sc-color-warning-400);
  border-color: var(--sc-color-warning-400);
  color: var(--sc-color-warning-text);
}
.button.button--standard.button--warning:focus:not(.button--disabled) {
  background-color: var(--sc-color-warning-400);
  border-color: var(--sc-color-warning-400);
  color: var(--sc-color-warning-text);
  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-warning);
}
.button.button--standard.button--warning:active:not(.button--disabled) {
  background-color: var(--sc-color-warning-500);
  border-color: var(--sc-color-warning-500);
  color: var(--sc-color-warning-text);
}
.button.button--standard.button--danger {
  background-color: var(--sc-color-danger-500);
  border-color: var(--sc-color-danger-500);
  color: var(--sc-color-danger-text);
}
.button.button--standard.button--danger:hover:not(.button--disabled) {
  background-color: var(--sc-color-danger-400);
  border-color: var(--sc-color-danger-400);
  color: var(--sc-color-danger-text);
}
.button.button--standard.button--danger:focus:not(.button--disabled) {
  background-color: var(--sc-color-danger-400);
  border-color: var(--sc-color-danger-400);
  color: var(--sc-color-danger-text);
  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-danger);
}
.button.button--standard.button--danger:active:not(.button--disabled) {
  background-color: var(--sc-color-danger-500);
  border-color: var(--sc-color-danger-500);
  color: var(--sc-color-danger-text);
}

/*
* Outline buttons
*/
.button--outline {
  background: none;
  border: solid 1px;
}

/* Default */
.button--outline.button--default {
  border-color: var(--sc-color-gray-300);
  color: var(--sc-color-gray-700);
}

.button--outline.button--default:hover:not(.button--disabled) {
  border-color: var(--primary-background);
  background-color: var(--primary-background);
  color: var(--sc-color-white);
}

.button--outline.button--default:focus:not(.button--disabled) {
  border-color: var(--primary-background);
  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--primary-background)/var(--sc-focus-ring-alpha);
}

.button--outline.button--default:active:not(.button--disabled) {
  opacity: 0.8;
  color: var(--sc-color-white);
}

/* Primary */
.button--outline.button--primary {
  border-color: var(--primary-background);
  color: var(--primary-background);
}

.button--outline.button--primary:hover:not(.button--disabled) {
  background-color: var(--primary-background);
  opacity: 0.8;
  color: var(--sc-color-white);
}

.button--outline.button--primary:focus:not(.button--disabled) {
  border-color: var(--primary-background);
  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--primary-background)/var(--sc-focus-ring-alpha);
}

.button--outline.button--primary:active:not(.button--disabled) {
  border-color: var(--primary-background);
  background-color: var(--primary-background);
  opacity: 0.9;
  color: var(--sc-color-white);
}

/* Success */
.button--outline.button--success {
  border-color: var(--sc-color-success-500);
  color: var(--sc-color-success-500);
}

.button--outline.button--success:hover:not(.button--disabled) {
  background-color: var(--sc-color-success-500);
  color: var(--sc-color-white);
}

.button--outline.button--success:focus:not(.button--disabled) {
  border-color: var(--sc-color-success-500);
  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-color-success-500)/var(--sc-focus-ring-alpha);
}

.button--outline.button--success:active:not(.button--disabled) {
  border-color: var(--sc-color-success-700);
  background-color: var(--sc-color-success-700);
  color: var(--sc-color-white);
}

/* Info */
.button--outline.button--info {
  border-color: var(--sc-color-gray-500);
  color: var(--sc-color-gray-500);
}

.button--outline.button--info:hover:not(.button--disabled) {
  background-color: var(--sc-color-gray-500);
  color: var(--sc-color-white);
}

.button--outline.button--info:focus:not(.button--disabled) {
  border-color: var(--sc-color-gray-500);
  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-color-gray-500)/var(--sc-focus-ring-alpha);
}

.button--outline.button--info:active:not(.button--disabled) {
  border-color: var(--sc-color-gray-700);
  background-color: var(--sc-color-gray-700);
  color: var(--sc-color-white);
}

/* Warning */
.button--outline.button--warning {
  border-color: var(--sc-color-warning-500);
  color: var(--sc-color-warning-500);
}

.button--outline.button--warning:hover:not(.button--disabled) {
  background-color: var(--sc-color-warning-500);
  color: var(--sc-color-white);
}

.button--outline.button--warning:focus:not(.button--disabled) {
  border-color: var(--sc-color-warning-500);
  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-color-warning-500)/var(--sc-focus-ring-alpha);
}

.button--outline.button--warning:active:not(.button--disabled) {
  border-color: var(--sc-color-warning-700);
  background-color: var(--sc-color-warning-700);
  color: var(--sc-color-white);
}

/* Danger */
.button--outline.button--danger {
  border-color: var(--sc-color-danger-500);
  color: var(--sc-color-danger-500);
}

.button--outline.button--danger:hover:not(.button--disabled) {
  background-color: var(--sc-color-danger-500);
  color: var(--sc-color-white);
}

.button--outline.button--danger:focus:not(.button--disabled) {
  border-color: var(--sc-color-danger-500);
  box-shadow: 0 0 0 var(--sc-focus-ring-width) var(--sc-color-danger-500)/var(--sc-focus-ring-alpha);
}

.button--outline.button--danger:active:not(.button--disabled) {
  border-color: var(--sc-color-danger-700);
  background-color: var(--sc-color-danger-700);
  color: var(--sc-color-white);
}

.button--text {
  background-color: transparent;
  border-color: transparent;
  color: inherit;
}
.button--text:hover:not(.button--disabled) {
  background-color: transparent;
  border-color: transparent;
  color: var(--sc-color-gray-600);
}
.button--text:focus:not(.button--disabled) {
  background-color: transparent;
  border-color: transparent;
  box-shadow: 0;
}
.button--text:active:not(.button--disabled) {
  background-color: transparent;
  border-color: transparent;
  box-shadow: 0;
}
.button--text.button--caret.button--has-label {
  padding-right: var(--sc-spacing-xx-small);
}
.button--text.button--caret.button--has-label .button__label {
  padding: 0 var(--sc-spacing-xx-small) !important;
}

.button--link {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
  color: var(--sc-button-link-color, var(--primary-background));
  transition: opacity var(--sc-input-transition, var(--sc-transition-medium)) ease;
  text-decoration: var(--sc-button-link-text-decoration, none);
}
.button--link.button--has-label.button--small .button__label, .button--link.button--has-label.button--medium .button__label, .button--link.button--has-label.button--large .button__label {
  padding: 0;
}
.button--link:hover:not(.button--disabled) {
  background-color: transparent;
  border-color: transparent;
  opacity: 0.75;
}
.button--link:focus:not(.button--disabled) {
  background-color: transparent;
  border-color: transparent;
}
.button--link:active:not(.button--disabled) {
  background-color: transparent;
  border-color: transparent;
}
.button--link.button--has-prefix:not(.button--text).button--small, .button--link.button--has-prefix:not(.button--text).button--medium, .button--link.button--has-prefix:not(.button--text).button--large {
  padding-left: 0;
}
.button--link.button--has-prefix:not(.button--text).button--small .button__label, .button--link.button--has-prefix:not(.button--text).button--medium .button__label, .button--link.button--has-prefix:not(.button--text).button--large .button__label {
  padding-left: var(--sc-spacing-xx-small);
}
.button--link.button--has-suffix:not(.button--text).button--small, .button--link.button--has-suffix:not(.button--text).button--medium, .button--link.button--has-suffix:not(.button--text).button--large {
  padding-right: 0;
}
.button--link.button--has-suffix:not(.button--text).button--small .button__label, .button--link.button--has-suffix:not(.button--text).button--medium .button__label, .button--link.button--has-suffix:not(.button--text).button--large .button__label {
  padding-right: var(--sc-spacing-xx-small);
}

.button--small {
  font-size: var(--sc-button-font-size-small);
  height: var(--sc-input-height-small);
  line-height: calc(var(--sc-input-height-small) - var(--sc-input-border-width) * 2);
  border-radius: var(--button-border-radius, var(--sc-input-border-radius-small));
}

.button--medium {
  font-size: var(--sc-button-font-size-medium);
  height: var(--sc-input-height-medium);
  line-height: calc(var(--sc-input-height-medium) - var(--sc-input-border-width) * 2);
  border-radius: var(--button-border-radius, var(--sc-input-border-radius-medium));
}

.button--large {
  font-size: var(--sc-button-font-size-large);
  height: var(--sc-input-height-large);
  line-height: calc(var(--sc-input-height-large) - var(--sc-input-border-width) * 2);
  border-radius: var(--button-border-radius, var(--sc-input-border-radius-large));
}

.button--full {
  display: block;
}

.button--pill.button--small {
  border-radius: var(--sc-input-height-small);
}
.button--pill.button--medium {
  border-radius: var(--sc-input-height-medium);
}
.button--pill.button--large {
  border-radius: var(--sc-input-height-large);
}

.button--circle {
  padding-left: 0;
  padding-right: 0;
}
.button--circle.button--small {
  width: var(--sc-input-height-small);
  border-radius: 50%;
}
.button--circle.button--medium {
  width: var(--sc-input-height-medium);
  border-radius: 50%;
}
.button--circle.button--large {
  width: var(--sc-input-height-large);
  border-radius: 50%;
}
.button--circle .button__prefix,
.button--circle .button__suffix,
.button--circle .button__caret {
  display: none;
}

.button--caret .button__suffix {
  display: none;
}
.button--caret .button__caret {
  display: flex;
  align-items: center;
}
.button--caret .button__caret svg {
  width: 1em;
  height: 1em;
}

.button--busy {
  position: relative;
  cursor: wait;
}
.button--busy .button__prefix,
.button--busy .button__label,
.button--busy .button__suffix,
.button--busy .button__caret {
  visibility: hidden;
}
.button--busy * {
  pointer-events: none;
}

.button--loading {
  position: relative;
  cursor: wait;
}
.button--loading .button__prefix,
.button--loading .button__label,
.button--loading .button__suffix,
.button--loading .button__caret {
  visibility: hidden;
}

sc-spinner::part(base) {
  --indicator-color: currentColor;
  --spinner-size: 12px;
  position: absolute;
  top: calc(50% - var(--spinner-size) + var(--spinner-size) / 4);
  left: calc(50% - var(--spinner-size) + var(--spinner-size) / 4);
}

.button ::slotted(sc-badge) {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-50%) translateX(50%);
  pointer-events: none;
}

.button--has-label.button--small .button__label {
  padding: 0 var(--sc-spacing-small);
}
.button--has-label.button--medium .button__label {
  padding: 0 var(--sc-spacing-medium);
}
.button--has-label.button--large .button__label {
  padding: 0 var(--sc-spacing-large);
}

.button--has-prefix:not(.button--text).button--small {
  padding-left: var(--sc-spacing-x-small);
}
.button--has-prefix:not(.button--text).button--small .button__label {
  padding-left: var(--sc-spacing-x-small);
}
.button--has-prefix:not(.button--text).button--medium {
  padding-left: var(--sc-spacing-small);
}
.button--has-prefix:not(.button--text).button--medium .button__label {
  padding-left: var(--sc-spacing-small);
}
.button--has-prefix:not(.button--text).button--large {
  padding-left: var(--sc-spacing-small);
}
.button--has-prefix:not(.button--text).button--large .button__label {
  padding-left: var(--sc-spacing-small);
}

.button--has-suffix.button--small,
.button--caret.button--small {
  padding-right: var(--sc-spacing-x-small);
}
.button--has-suffix.button--small .button__label,
.button--caret.button--small .button__label {
  padding-right: var(--sc-spacing-x-small);
}
.button--has-suffix.button--medium,
.button--caret.button--medium {
  padding-right: var(--sc-spacing-small);
}
.button--has-suffix.button--medium .button__label,
.button--caret.button--medium .button__label {
  padding-right: var(--sc-spacing-small);
}
.button--has-suffix.button--large,
.button--caret.button--large {
  padding-right: var(--sc-spacing-small);
}
.button--has-suffix.button--large .button__label,
.button--caret.button--large .button__label {
  padding-right: var(--sc-spacing-small);
}

:host(.sc-button-group__button--first) .button {
  border-top-right-radius: 0;
  border-bottom-right-radius: 0;
}

:host(.sc-button-group__button--inner) .button {
  border-radius: 0;
}

:host(.sc-button-group__button--last) .button {
  border-top-left-radius: 0;
  border-bottom-left-radius: 0;
}

:host(.sc-button-group__button:not(.sc-button-group__button--first)) {
  margin-left: calc(-1 * var(--sc-input-border-width));
}

:host(.sc-button-group__button:not(.sc-button-group__button--focus, .sc-button-group__button--first, [type=default]):not(:hover, :active, :focus)) .button:after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  bottom: 0;
  border-left: solid 1px rgba(255, 255, 255, 0.2666666667);
  mix-blend-mode: lighten;
}

:host(.sc-button-group__button--hover) {
  z-index: 1;
}

:host(.sc-button-group__button--focus) {
  z-index: 2;
}

@keyframes busy-animation {
  0% {
    background-position: 200px 0;
  }
}
.button--is-rtl.button--has-prefix.button--small, .button--is-rtl.button--has-prefix.button--medium, .button--is-rtl.button--has-prefix.button--large {
  padding-left: 0;
}
.button--is-rtl.button--has-prefix.button--small .button__label, .button--is-rtl.button--has-prefix.button--medium .button__label, .button--is-rtl.button--has-prefix.button--large .button__label {
  padding-left: 0;
  padding-right: var(--sc-spacing-xx-small);
}
.button--is-rtl.button--has-suffix.button--small, .button--is-rtl.button--has-suffix.button--medium, .button--is-rtl.button--has-suffix.button--large {
  padding-right: 0;
}
.button--is-rtl.button--has-suffix.button--small .button__label, .button--is-rtl.button--has-suffix.button--medium .button__label, .button--is-rtl.button--has-suffix.button--large .button__label {
  padding-right: 0;
  padding-left: var(--sc-spacing-xx-small);
}

Back