FileMaster

Edit File: button.css

.sc-button{--primary-color:var(--sc-color-primary-text);--primary-background:var(--sc-color-primary-500);-webkit-box-sizing:border-box;box-sizing:border-box;display:-webkit-inline-box;display:-ms-inline-flexbox;display:inline-flex;z-index:10;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch;-webkit-box-pack:center;-ms-flex-pack:center;border-style:solid;border-width:var(--sc-input-border-width);cursor:pointer;font-family:var(--sc-input-font-family);font-weight:var(--sc-font-weight-semibold);justify-content:center;padding:0;text-decoration:none;-webkit-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;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;-webkit-user-select:none;-moz-user-select:none;-ms-user-select:none;user-select:none;vertical-align:middle;white-space:nowrap;width:auto}.sc-button::-moz-focus-inner{border:0}.sc-button:focus{outline:none}.sc-button:focus-visible{-webkit-box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary)}.sc-button.sc-button--disabled{cursor:not-allowed}.sc-button.sc-button--disabled *{pointer-events:none}.sc-button.sc-button--disabled .sc-button__label,.sc-button.sc-button--disabled .sc-button__prefix,.sc-button.sc-button--disabled .sc-button__suffix{opacity:.5}.sc-button ::slotted(.sc--icon){pointer-events:none}.sc-button__prefix,.sc-button__suffix{-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto}.sc-button__label,.sc-button__prefix,.sc-button__suffix{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.sc-button__label ::slotted(sc-icon){vertical-align:-2px}.sc-button:not(.sc-button--text):not(.sc-button--link){-webkit-box-shadow:var(--sc-shadow-small);box-shadow:var(--sc-shadow-small)}.sc-button.sc-button--standard.sc-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))}.sc-button.sc-button--standard.sc-button--default:hover:not(.sc-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)}.sc-button.sc-button--standard.sc-button--default:focus:not(.sc-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));-webkit-box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);color:var(--primary-background)}.sc-button.sc-button--standard.sc-button--default:active:not(.sc-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)}.sc-button.sc-button--standard.sc-button--primary{background-color:var(--primary-background);border-color:var(--primary-background);color:var(--primary-color)}.sc-button.sc-button--standard.sc-button--primary:hover:not(.sc-button--disabled){opacity:.8}.sc-button.sc-button--standard.sc-button--primary:focus:not(.sc-button--disabled){border-color:var(--sc-color-white);-webkit-box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary);color:var(--primary-color);opacity:.8}.sc-button.sc-button--standard.sc-button--primary:active:not(.sc-button--disabled){background-color:var(--primary-background);border-color:var(--sc-color-white);color:var(--primary-color)}.sc-button.sc-button--standard.sc-button--success{background-color:var(--sc-color-success-500);border-color:var(--sc-color-success-500);color:var(--sc-color-success-text)}.sc-button.sc-button--standard.sc-button--success:focus:not(.sc-button--disabled),.sc-button.sc-button--standard.sc-button--success:hover:not(.sc-button--disabled){background-color:var(--sc-color-success-400);border-color:var(--sc-color-success-400);color:var(--sc-color-success-text)}.sc-button.sc-button--standard.sc-button--success:focus:not(.sc-button--disabled){-webkit-box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-success);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-success)}.sc-button.sc-button--standard.sc-button--success:active:not(.sc-button--disabled){background-color:var(--sc-color-success-500);border-color:var(--sc-color-success-500);color:var(--sc-color-success-text)}.sc-button.sc-button--standard.sc-button--info{background-color:var(--sc-color-info-500);border-color:var(--sc-color-info-500);color:var(--sc-color-info-text)}.sc-button.sc-button--standard.sc-button--info:focus:not(.sc-button--disabled),.sc-button.sc-button--standard.sc-button--info:hover:not(.sc-button--disabled){background-color:var(--sc-color-info-400);border-color:var(--sc-color-info-400);color:var(--sc-color-info-text)}.sc-button.sc-button--standard.sc-button--info:focus:not(.sc-button--disabled){-webkit-box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-info);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-info)}.sc-button.sc-button--standard.sc-button--info:active:not(.sc-button--disabled){background-color:var(--sc-color-info-500);border-color:var(--sc-color-info-500);color:var(--sc-color-info-text)}.sc-button.sc-button--standard.sc-button--warning{background-color:var(--sc-color-warning-500);border-color:var(--sc-color-warning-500);color:var(--sc-color-warning-text)}.sc-button.sc-button--standard.sc-button--warning:focus:not(.sc-button--disabled),.sc-button.sc-button--standard.sc-button--warning:hover:not(.sc-button--disabled){background-color:var(--sc-color-warning-400);border-color:var(--sc-color-warning-400);color:var(--sc-color-warning-text)}.sc-button.sc-button--standard.sc-button--warning:focus:not(.sc-button--disabled){-webkit-box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-warning);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-warning)}.sc-button.sc-button--standard.sc-button--warning:active:not(.sc-button--disabled){background-color:var(--sc-color-warning-500);border-color:var(--sc-color-warning-500);color:var(--sc-color-warning-text)}.sc-button.sc-button--standard.sc-button--danger{background-color:var(--sc-color-danger-500);border-color:var(--sc-color-danger-500);color:var(--sc-color-danger-text)}.sc-button.sc-button--standard.sc-button--danger:focus:not(.sc-button--disabled),.sc-button.sc-button--standard.sc-button--danger:hover:not(.sc-button--disabled){background-color:var(--sc-color-danger-400);border-color:var(--sc-color-danger-400);color:var(--sc-color-danger-text)}.sc-button.sc-button--standard.sc-button--danger:focus:not(.sc-button--disabled){-webkit-box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-danger);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-danger)}.sc-button.sc-button--standard.sc-button--danger:active:not(.sc-button--disabled){background-color:var(--sc-color-danger-500);border-color:var(--sc-color-danger-500);color:var(--sc-color-danger-text)}.sc-button--outline{background:none;border:1px solid}.sc-button--outline.sc-button--default{border-color:var(--sc-color-gray-300);color:var(--sc-color-gray-700)}.sc-button--outline.sc-button--default:hover:not(.sc-button--disabled){background-color:var(--primary-background);border-color:var(--primary-background);color:var(--sc-color-white)}.sc-button--outline.sc-button--default:focus:not(.sc-button--disabled){border-color:var(--primary-background);-webkit-box-shadow:0 0 0 var(--sc-focus-ring-width) var(--primary-background)/var(--sc-focus-ring-alpha);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--primary-background)/var(--sc-focus-ring-alpha)}.sc-button--outline.sc-button--default:active:not(.sc-button--disabled){color:var(--sc-color-white);opacity:.8}.sc-button--outline.sc-button--primary{border-color:var(--primary-background);color:var(--primary-background)}.sc-button--outline.sc-button--primary:hover:not(.sc-button--disabled){background-color:var(--primary-background);color:var(--sc-color-white);opacity:.8}.sc-button--outline.sc-button--primary:focus:not(.sc-button--disabled){border-color:var(--primary-background);-webkit-box-shadow:0 0 0 var(--sc-focus-ring-width) var(--primary-background)/var(--sc-focus-ring-alpha);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--primary-background)/var(--sc-focus-ring-alpha)}.sc-button--outline.sc-button--primary:active:not(.sc-button--disabled){background-color:var(--primary-background);border-color:var(--primary-background);color:var(--sc-color-white);opacity:.9}.sc-button--outline.sc-button--success{border-color:var(--sc-color-success-500);color:var(--sc-color-success-500)}.sc-button--outline.sc-button--success:hover:not(.sc-button--disabled){background-color:var(--sc-color-success-500);color:var(--sc-color-white)}.sc-button--outline.sc-button--success:focus:not(.sc-button--disabled){border-color:var(--sc-color-success-500);-webkit-box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-color-success-500)/var(--sc-focus-ring-alpha);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-color-success-500)/var(--sc-focus-ring-alpha)}.sc-button--outline.sc-button--success:active:not(.sc-button--disabled){background-color:var(--sc-color-success-700);border-color:var(--sc-color-success-700);color:var(--sc-color-white)}.sc-button--outline.sc-button--info{border-color:var(--sc-color-gray-500);color:var(--sc-color-gray-500)}.sc-button--outline.sc-button--info:hover:not(.sc-button--disabled){background-color:var(--sc-color-gray-500);color:var(--sc-color-white)}.sc-button--outline.sc-button--info:focus:not(.sc-button--disabled){border-color:var(--sc-color-gray-500);-webkit-box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-color-gray-500)/var(--sc-focus-ring-alpha);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-color-gray-500)/var(--sc-focus-ring-alpha)}.sc-button--outline.sc-button--info:active:not(.sc-button--disabled){background-color:var(--sc-color-gray-700);border-color:var(--sc-color-gray-700);color:var(--sc-color-white)}.sc-button--outline.sc-button--warning{border-color:var(--sc-color-warning-500);color:var(--sc-color-warning-500)}.sc-button--outline.sc-button--warning:hover:not(.sc-button--disabled){background-color:var(--sc-color-warning-500);color:var(--sc-color-white)}.sc-button--outline.sc-button--warning:focus:not(.sc-button--disabled){border-color:var(--sc-color-warning-500);-webkit-box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-color-warning-500)/var(--sc-focus-ring-alpha);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-color-warning-500)/var(--sc-focus-ring-alpha)}.sc-button--outline.sc-button--warning:active:not(.sc-button--disabled){background-color:var(--sc-color-warning-700);border-color:var(--sc-color-warning-700);color:var(--sc-color-white)}.sc-button--outline.sc-button--danger{border-color:var(--sc-color-danger-500);color:var(--sc-color-danger-500)}.sc-button--outline.sc-button--danger:hover:not(.sc-button--disabled){background-color:var(--sc-color-danger-500);color:var(--sc-color-white)}.sc-button--outline.sc-button--danger:focus:not(.sc-button--disabled){border-color:var(--sc-color-danger-500);-webkit-box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-color-danger-500)/var(--sc-focus-ring-alpha);box-shadow:0 0 0 var(--sc-focus-ring-width) var(--sc-color-danger-500)/var(--sc-focus-ring-alpha)}.sc-button--outline.sc-button--danger:active:not(.sc-button--disabled){background-color:var(--sc-color-danger-700);border-color:var(--sc-color-danger-700);color:var(--sc-color-white)}.sc-button--text{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);color:inherit}.sc-button--text:hover:not(.sc-button--disabled){background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);color:var(--sc-color-gray-600)}.sc-button--text:active:not(.sc-button--disabled),.sc-button--text:focus:not(.sc-button--disabled){background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);-webkit-box-shadow:0;box-shadow:0}.sc-button--text.sc-button--caret.sc-button--has-label{padding-right:var(--sc-spacing-xx-small)}.sc-button--text.sc-button--caret.sc-button--has-label .sc-button__label{padding:0 var(--sc-spacing-xx-small)!important}.sc-button--link{background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0);-webkit-box-shadow:none;box-shadow:none;color:var(--sc-button-link-color,var(--primary-background));-webkit-text-decoration:var(--sc-button-link-text-decoration,none);text-decoration:var(--sc-button-link-text-decoration,none);-webkit-transition:opacity var(--sc-input-transition,var(--sc-transition-medium)) ease;transition:opacity var(--sc-input-transition,var(--sc-transition-medium)) ease}.sc-button--link.sc-button--has-label.sc-button--large .sc-button__label,.sc-button--link.sc-button--has-label.sc-button--medium .sc-button__label,.sc-button--link.sc-button--has-label.sc-button--small .sc-button__label{padding:0}.sc-button--link:hover:not(.sc-button--disabled){opacity:.75}.sc-button--link:active:not(.sc-button--disabled),.sc-button--link:focus:not(.sc-button--disabled),.sc-button--link:hover:not(.sc-button--disabled){background-color:rgba(0,0,0,0);border-color:rgba(0,0,0,0)}.sc-button--link.sc-button--has-prefix:not(.sc-button--text).sc-button--large,.sc-button--link.sc-button--has-prefix:not(.sc-button--text).sc-button--medium,.sc-button--link.sc-button--has-prefix:not(.sc-button--text).sc-button--small{padding-left:0}.sc-button--link.sc-button--has-prefix:not(.sc-button--text).sc-button--large .sc-button__label,.sc-button--link.sc-button--has-prefix:not(.sc-button--text).sc-button--medium .sc-button__label,.sc-button--link.sc-button--has-prefix:not(.sc-button--text).sc-button--small .sc-button__label{padding-left:var(--sc-spacing-xx-small)}.sc-button--link.sc-button--has-suffix:not(.sc-button--text).sc-button--large,.sc-button--link.sc-button--has-suffix:not(.sc-button--text).sc-button--medium,.sc-button--link.sc-button--has-suffix:not(.sc-button--text).sc-button--small{padding-right:0}.sc-button--link.sc-button--has-suffix:not(.sc-button--text).sc-button--large .sc-button__label,.sc-button--link.sc-button--has-suffix:not(.sc-button--text).sc-button--medium .sc-button__label,.sc-button--link.sc-button--has-suffix:not(.sc-button--text).sc-button--small .sc-button__label{padding-right:var(--sc-spacing-xx-small)}.sc-button--small{border-radius:var(--button-border-radius,var(--sc-input-border-radius-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)}.sc-button--medium{border-radius:var(--button-border-radius,var(--sc-input-border-radius-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)}.sc-button--large{border-radius:var(--button-border-radius,var(--sc-input-border-radius-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)}.sc-button--full{display:block}.sc-button--pill.sc-button--small{border-radius:var(--sc-input-height-small)}.sc-button--pill.sc-button--medium{border-radius:var(--sc-input-height-medium)}.sc-button--pill.sc-button--large{border-radius:var(--sc-input-height-large)}.sc-button--circle{padding-left:0;padding-right:0}.sc-button--circle.sc-button--small{border-radius:50%;width:var(--sc-input-height-small)}.sc-button--circle.sc-button--medium{border-radius:50%;width:var(--sc-input-height-medium)}.sc-button--circle.sc-button--large{border-radius:50%;width:var(--sc-input-height-large)}.sc-button--caret .sc-button__suffix,.sc-button--circle .sc-button__caret,.sc-button--circle .sc-button__prefix,.sc-button--circle .sc-button__suffix{display:none}.sc-button--caret .sc-button__caret{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-align:center;-ms-flex-align:center;align-items:center}.sc-button--caret .sc-button__caret svg{height:1em;width:1em}.sc-button--busy{cursor:wait;position:relative}.sc-button--busy .sc-button__caret,.sc-button--busy .sc-button__label,.sc-button--busy .sc-button__prefix,.sc-button--busy .sc-button__suffix{visibility:hidden}.sc-button--busy *{pointer-events:none}.sc-button--loading{cursor:wait;position:relative}.sc-button--loading .sc-button__caret,.sc-button--loading .sc-button__label,.sc-button--loading .sc-button__prefix,.sc-button--loading .sc-button__suffix{visibility:hidden}.sc-button ::slotted(sc-badge){pointer-events:none;position:absolute;right:0;top:0;-webkit-transform:translateY(-50%) translateX(50%);-ms-transform:translateY(-50%) translateX(50%);transform:translateY(-50%) translateX(50%)}.sc-button--has-label.sc-button--small .sc-button__label{padding:0 var(--sc-spacing-small)}.sc-button--has-label.sc-button--medium .sc-button__label{padding:0 var(--sc-spacing-medium)}.sc-button--has-label.sc-button--large .sc-button__label{padding:0 var(--sc-spacing-large)}.sc-button--has-prefix:not(.sc-button--text).sc-button--small,.sc-button--has-prefix:not(.sc-button--text).sc-button--small .sc-button__label{padding-left:var(--sc-spacing-x-small)}.sc-button--has-prefix:not(.sc-button--text).sc-button--large,.sc-button--has-prefix:not(.sc-button--text).sc-button--large .sc-button__label,.sc-button--has-prefix:not(.sc-button--text).sc-button--medium,.sc-button--has-prefix:not(.sc-button--text).sc-button--medium .sc-button__label{padding-left:var(--sc-spacing-small)}.sc-button--caret.sc-button--small,.sc-button--caret.sc-button--small .sc-button__label,.sc-button--has-suffix.sc-button--small,.sc-button--has-suffix.sc-button--small .sc-button__label{padding-right:var(--sc-spacing-x-small)}.sc-button--caret.sc-button--large,.sc-button--caret.sc-button--large .sc-button__label,.sc-button--caret.sc-button--medium,.sc-button--caret.sc-button--medium .sc-button__label,.sc-button--has-suffix.sc-button--large,.sc-button--has-suffix.sc-button--large .sc-button__label,.sc-button--has-suffix.sc-button--medium,.sc-button--has-suffix.sc-button--medium .sc-button__label{padding-right:var(--sc-spacing-small)}:host(.sc-button-group__button--first) .sc-button{border-bottom-right-radius:0;border-top-right-radius:0}:host(.sc-button-group__button--inner) .sc-button{border-radius:0}:host(.sc-button-group__button--last) .sc-button{border-bottom-left-radius:0;border-top-left-radius:0}:host(.sc-button-group__button:not(.sc-button-group__button--first)){margin-left:calc(var(--sc-input-border-width)*-1)}:host(.sc-button-group__button:not(.sc-button-group__button--focus,.sc-button-group__button--first,[type=default]):not(:hover,:active,:focus)) .sc-button:after{border-left:1px solid hsla(0,0%,100%,.267);bottom:0;content:"";left:0;mix-blend-mode:lighten;position:absolute;top:0}:host(.sc-button-group__button--hover){z-index:1}:host(.sc-button-group__button--focus){z-index:2}@-webkit-keyframes busy-animation{0%{background-position:200px 0}}@keyframes busy-animation{0%{background-position:200px 0}}.sc-button--is-rtl.sc-button--has-prefix.sc-button--large,.sc-button--is-rtl.sc-button--has-prefix.sc-button--medium,.sc-button--is-rtl.sc-button--has-prefix.sc-button--small{padding-left:0}.sc-button--is-rtl.sc-button--has-prefix.sc-button--large .sc-button__label,.sc-button--is-rtl.sc-button--has-prefix.sc-button--medium .sc-button__label,.sc-button--is-rtl.sc-button--has-prefix.sc-button--small .sc-button__label{padding-left:0;padding-right:var(--sc-spacing-xx-small)}.sc-button--is-rtl.sc-button--has-suffix.sc-button--large,.sc-button--is-rtl.sc-button--has-suffix.sc-button--medium,.sc-button--is-rtl.sc-button--has-suffix.sc-button--small{padding-right:0}.sc-button--is-rtl.sc-button--has-suffix.sc-button--large .sc-button__label,.sc-button--is-rtl.sc-button--has-suffix.sc-button--medium .sc-button__label,.sc-button--is-rtl.sc-button--has-suffix.sc-button--small .sc-button__label{padding-left:var(--sc-spacing-xx-small);padding-right:0}

Back