FileMaster
Search
Toggle Dark Mode
Home
/
.
/
wp-content
/
plugins
/
surecart
/
dist
/
components
/
collection
/
components
/
ui
/
input
Edit File: sc-input.css
/** * @prop --focus-ring: The focus ring style to use when the control receives focus, a `box-shadow` property. */ :host { --focus-ring: 0 0 0 var(--sc-focus-ring-width) var(--sc-focus-ring-color-primary); display: block; position: relative; } .input__control[type=number] { -moz-appearance: textfield; } .input__control::-webkit-outer-spin-button, .input__control::-webkit-inner-spin-button { -webkit-appearance: none; } .input { flex: 1 1 auto; display: inline-flex; align-items: center; justify-content: start; position: relative; width: 100%; box-sizing: border-box; font-family: var(--sc-input-font-family); font-weight: var(--sc-input-font-weight); letter-spacing: var(--sc-input-letter-spacing); background-color: var(--sc-input-background-color); border: solid 1px var(--sc-input-border-color, var(--sc-input-border)); vertical-align: middle; box-shadow: var(--sc-input-box-shadow); transition: 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; cursor: var(--sc-input-cursor, text); } .input:hover:not(.input--disabled) { background-color: var(--sc-input-background-color-hover); border-color: var(--sc-input-border-color-hover); z-index: 7; } .input:hover:not(.input--disabled) .input__control { color: var(--sc-input-color-hover); } .input.input--focused:not(.input--disabled) { background-color: var(--sc-input-background-color-focus); border-color: var(--sc-input-border-color-focus); box-shadow: var(--focus-ring); z-index: 8; } .input.input--focused:not(.input--disabled) .input__control { color: var(--sc-input-color-focus); } .input.input--disabled { background-color: var(--sc-input-background-color-disabled); border-color: var(--sc-input-border-color-disabled); opacity: 0.5; cursor: not-allowed; } .input.input--disabled .input__control { color: var(--sc-input-color-disabled); } .input.input--disabled .input__control::placeholder { color: var(--sc-input-placeholder-color-disabled); } .input__control { flex: 1 1 auto; font-family: inherit; font-size: inherit; font-weight: inherit; min-width: 0; height: 100%; color: var(--sc-input-color); border: none; background: none; box-shadow: none; padding: 0; margin: 0; cursor: inherit; -webkit-appearance: none; box-sizing: border-box; width: 100%; } .input__control::-webkit-search-decoration, .input__control::-webkit-search-cancel-button, .input__control::-webkit-search-results-button, .input__control::-webkit-search-results-decoration { -webkit-appearance: none; } .input__control:-webkit-autofill, .input__control:-webkit-autofill:hover, .input__control:-webkit-autofill:focus, .input__control:-webkit-autofill:active { box-shadow: 0 0 0 var(--sc-input-height-large) var(--sc-input-background-color-hover) inset !important; -webkit-text-fill-color: var(--sc-input-color); } .input__control::placeholder { color: var(--sc-input-placeholder-color); user-select: none; } .input__control:focus { outline: none; } .input__prefix, .input__suffix { display: inline-flex; flex: 0 0 auto; align-items: center; color: var(--sc-input-color); cursor: default; } .input__prefix ::slotted(sc-icon), .input__suffix ::slotted(sc-icon) { color: var(--sc-input-icon-color); } .input--small { border-radius: var(--sc-input-border-radius-small); font-size: var(--sc-input-font-size-small); height: var(--sc-input-height-small); } .input--small .input__control { height: calc(var(--sc-input-height-small) - var(--sc-input-border-width) * 2); padding: 0 var(--sc-input-spacing-small); } .input--small .input__clear, .input--small .input__password-toggle { margin-right: var(--sc-input-spacing-small); } .input--small .input__prefix ::slotted(*) { margin-left: var(--sc-input-spacing-small); } .input--small .input__suffix ::slotted(*) { margin-right: var(--sc-input-spacing-small); } .input--small .input__suffix ::slotted(sc-dropdown) { margin: 0; } .input--medium { border-radius: var(--sc-input-border-radius-medium); font-size: var(--sc-input-font-size-medium); height: var(--sc-input-height-medium); } .input--medium .input__control { height: calc(var(--sc-input-height-medium) - var(--sc-input-border-width) * 2); padding: 0 var(--sc-input-spacing-medium); } .input--medium .input__clear, .input--medium .input__password-toggle { margin-right: var(--sc-input-spacing-medium); } .input--medium .input__prefix ::slotted(*) { margin-left: var(--sc-input-spacing-medium) !important; } .input--medium .input__suffix ::slotted(:not(sc-button[size=medium]):not(sc-button[size=small])) { margin-right: var(--sc-input-spacing-medium) !important; } .input--medium .input__suffix ::slotted(sc-tag), .input--medium .input__suffix ::slotted(sc-button[size=small]) { line-height: 1; margin-right: var(--sc-input-spacing-small) !important; } .input--medium .input__suffix ::slotted(sc-dropdown) { margin: 3px; } .input--large { border-radius: var(--sc-input-border-radius-large); font-size: var(--sc-input-font-size-large); height: var(--sc-input-height-large); } .input--large .input__control { height: calc(var(--sc-input-height-large) - var(--sc-input-border-width) * 2); padding: 0 var(--sc-input-spacing-large); } .input--large .input__clear, .input--large .input__password-toggle { margin-right: var(--sc-input-spacing-large); } .input--large .input__prefix ::slotted(*) { margin-left: var(--sc-input-spacing-large); } .input--large .input__suffix ::slotted(*) { margin-right: var(--sc-input-spacing-large); } .input--large .input__suffix ::slotted(sc-dropdown) { margin: 3px; } .input--pill.input--small { border-radius: var(--sc-input-height-small); } .input--pill.input--medium { border-radius: var(--sc-input-height-medium); } .input--pill.input--large { border-radius: var(--sc-input-height-large); } .input__clear, .input__password-toggle { display: inline-flex; align-items: center; font-size: inherit; color: var(--sc-input-icon-color); border: none; background: none; padding: 0; transition: var(--sc-input-transition, var(--sc-transition-medium)) color; cursor: pointer; } .input__clear:hover, .input__password-toggle:hover { color: var(--sc-input-icon-color-hover); } .input__clear:focus, .input__password-toggle:focus { outline: none; } .input--empty .input__clear { visibility: hidden; } .input--squared { border-radius: 0; } .input--squared-top { border-top-left-radius: 0; border-top-right-radius: 0; } .input--squared-bottom { border-bottom-left-radius: 0; border-bottom-right-radius: 0; } .input--squared-left { border-top-left-radius: 0; border-bottom-left-radius: 0; } .input--squared-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
Save
Back