soft-components/dist/collection/components/sc-input/sc-input.css

Simple soft flexible set of web components

sc-input {
  /**
    @prop --sc-input-border-radius:
      Border radius for input box
      - default: var(--sc-border-radius, 1em)
  */
  --sc-input-border-radius: var(--sc-border-radius, 1em);
  --sc-input-padding-y: 1em;
  --sc-input-padding-x: 1em;
  --sc-input-bg-color: var(--sc-bg-color, #f6f6f8);
  --sc-input-text-color: var(--sc-text-color, #333333);
  --sc-input-font-size: 1em;
  --sc-input-error-text-color: var(--sc-error-color, #f70d1a);
  --sc-input-radio-size: 32px;
  --sc-input-radio-size: 2rem;
  --sc-input-active-color: var(--sc-highlight-color, #c586c0);
  /* input */
  display: inline-block;
  vertical-align: middle;
}
sc-input input {
  transition: all var(--sc-animation-duration, 0.3s) var(--sc-animation-timing-function, ease);
  outline: none;
  border: none;
  border-radius: var(--sc-input-border-radius);
  padding: var(--sc-input-padding-y) var(--sc-input-padding-x);
  background-color: var(--sc-input-bg-color);
  color: var(--sc-input-text-color);
  font-size: var(--sc-input-font-size);
  width: 100%;
  box-sizing: border-box;
}
sc-input input ::-moz-placeholder {
  color: currentColor;
}
sc-input input :-ms-input-placeholder {
  color: currentColor;
}
sc-input input ::placeholder {
  color: currentColor;
}
sc-input input:invalid {
  color: var(--sc-input-error-text-color);
}
sc-input.has-error input {
  border: 1px solid var(--sc-input-error-text-color);
  border: 0.0625rem solid var(--sc-input-error-text-color);
}
sc-input.has-error .error-message {
  padding: 4px var(--sc-input-padding-x);
  padding: 0.25rem var(--sc-input-padding-x);
  color: var(--sc-input-error-text-color);
}
sc-input.block {
  display: block;
  width: 100%;
}
sc-input[type=radio] {
  border-radius: 50%;
  position: relative;
}
sc-input[type=radio] input,
sc-input[type=radio] label {
  cursor: pointer;
}
sc-input[type=radio][disabled] input,
sc-input[type=radio][disabled] label {
  cursor: not-allowed;
}
sc-input[type=radio] .after {
  --sc-input-radio-active-dot-gap: calc(var(--sc-input-radio-size) * 0.25);
  --sc-input-radio-active-dot-size: calc(
    var(--sc-input-radio-size) - (var(--sc-input-radio-active-dot-gap) * 2)
  );
  position: absolute;
  opacity: 0;
  top: var(--sc-input-radio-active-dot-gap);
  right: var(--sc-input-radio-active-dot-gap);
  width: var(--sc-input-radio-active-dot-size);
  height: var(--sc-input-radio-active-dot-size);
  background: var(--sc-input-active-color);
  border-radius: 50%;
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 0.1) calc(var(--sc-highlight-dist-y) * 0.1) calc(30px * 0.1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.1) calc(var(--sc-shadow-dist-y) * 0.1) calc(30px * 0.1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: inset calc(var(--sc-highlight-dist-x) * 0.1) calc(var(--sc-highlight-dist-y) * 0.1) calc(1.875rem * 0.1) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), inset calc(var(--sc-shadow-dist-x) * 0.1) calc(var(--sc-shadow-dist-y) * 0.1) calc(1.875rem * 0.1) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  transition: opacity var(--sc-animation-duration, 0.3s) var(--sc-animation-timing-function, ease);
  pointer-events: none;
}
sc-input[type=radio] input {
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  box-shadow: calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(30px * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  box-shadow: calc(var(--sc-highlight-dist-x) * 0.2) calc(var(--sc-highlight-dist-y) * 0.2) calc(1.875rem * 0.2) 0 var(--sc-highlight-color, rgba(255, 255, 255, 0.2)), calc(var(--sc-shadow-dist-x) * 0.2) calc(var(--sc-shadow-dist-y) * 0.2) calc(1.875rem * 0.2) 0 var(--sc-shadow-color, rgba(0, 0, 0, 0.2));
  margin: 0;
  padding: 0;
  width: var(--sc-input-radio-size, 1em);
  height: var(--sc-input-radio-size, 1em);
  vertical-align: middle;
}
sc-input[type=radio] input:checked ~ .after {
  opacity: 1;
}
sc-input[type=range] {
  -webkit-appearance: none;
  /* Hides the slider so that custom slider can be made */
  width: 100%;
  /* Specific width is required for Firefox. */
  background: transparent;
  /* Otherwise white in Chrome */
}