@vtmn/css-text-input/dist/index-with-vars-base10.css

Decathlon Design System - Vitamin specific CSS styles for text input component

.vtmn-text-input_label,
.vtmn-text-input,
.vtmn-text-input_helper-text{
  font-family:var(--vtmn-typo_font-family);
}

.vtmn-text-input,
.vtmn-text-input::before,
.vtmn-text-input::after{
  box-sizing:border-box;
}

.vtmn-text-input{
  box-shadow:inset 0 0 0 0.1rem var(--vtmn-semantic-color_border-inactive);
  border:none;
  background-color:var(--vtmn-semantic-color_background-primary);
  border-radius:var(--vtmn-radius_100);
  display:block;
  font-weight:var(--vtmn-typo_font-weight--normal);
  font-size:var(--vtmn-typo_text-2-font-size);
  padding-block:1.2rem;
  -webkit-padding-start:1.2rem;
          padding-inline-start:1.2rem;
  -webkit-padding-end:3.6rem;
          padding-inline-end:3.6rem;
  color:var(--vtmn-semantic-color_content-primary);
  min-block-size:4.8rem;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  transition:var(--vtmn-transition_focus-visible);
}

textarea.vtmn-text-input{
  min-inline-size:4.8rem;
  resize:both;
}

.vtmn-text-input:not(:disabled,
:focus,
textarea):hover{
  box-shadow:inset 0 0 0 1px var(--vtmn-semantic-color_border-inactive), 0 0 0 3px var(--vtmn-semantic-color_hover-primary);
}

.vtmn-text-input:not(:disabled):focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 0.2rem var(--vtmn-semantic-color_border-active);
}

.vtmn-text-input:not(:disabled):focus{
  outline:none;
  box-shadow:inset 0 0 0 0.2rem var(--vtmn-semantic-color_border-active);
}

.vtmn-text-input::-moz-placeholder{
  color:var(--vtmn-semantic-color_content-tertiary);
}

.vtmn-text-input::placeholder{
  color:var(--vtmn-semantic-color_content-tertiary);
}

.vtmn-text-input_label{
  color:var(--vtmn-semantic-color_content-primary);
  font-size:var(--vtmn-typo_text-2-font-size);
  line-height:var(--vtmn-typo_text-2-line-height);
  -webkit-margin-after:0.4rem;
          margin-block-end:0.4rem;
  display:block;
  inline-size:-moz-fit-content;
  inline-size:fit-content;
}

.vtmn-text-input_container{
  position:relative;
  display:inline-block;
}

.vtmn-text-input ~ span[class^='vtmx-'],
.vtmn-text-input ~ svg{
  position:absolute;
  font-size:var(--vtmn-typo_title-4-font-size);
  inset-inline-end:var(--vtmn-spacing_3);
  inset-block-end:var(--vtmn-spacing_3);
  color:var(--vtmn-semantic-color_content-primary);
}

.vtmn-text-input:disabled,
.vtmn-text-input:disabled ~ span[class^='vtmx-'],
.vtmn-text-input:disabled + svg,
.vtmn-text-input:disabled + .vtmn-text-input_helper-text{
  opacity:var(--vtmn-opacity_disabled-state);
  cursor:not-allowed;
}

.vtmn-text-input_helper-text{
  color:var(--vtmn-semantic-color_content-secondary);
  font-size:var(--vtmn-typo_text-3-font-size);
  line-height:var(--vtmn-typo_text-3-line-height);
  -webkit-margin-before:0.4rem;
          margin-block-start:0.4rem;
  inline-size:-moz-fit-content;
  inline-size:fit-content;
}

.vtmn-text-input_helper-text--error{
  color:var(--vtmn-semantic-color_content-primary);
  inline-size:-moz-fit-content;
  inline-size:fit-content;
}

.vtmn-text-input_helper-text--error::before{
  position:relative;
  content:'';
  -webkit-mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.333 8a6.667 6.667 0 1 0 13.333 0A6.667 6.667 0 0 0 1.333 8zm12 0A5.333 5.333 0 1 1 2.667 8a5.333 5.333 0 0 1 10.666 0zm-4.666 2v1.333H7.333V10h1.334zm0-1.333v-4H7.333v4h1.334z'/%3E%3C/svg%3E");
          mask:url("data:image/svg+xml,%3Csvg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill-rule='evenodd' clip-rule='evenodd' d='M1.333 8a6.667 6.667 0 1 0 13.333 0A6.667 6.667 0 0 0 1.333 8zm12 0A5.333 5.333 0 1 1 2.667 8a5.333 5.333 0 0 1 10.666 0zm-4.666 2v1.333H7.333V10h1.334zm0-1.333v-4H7.333v4h1.334z'/%3E%3C/svg%3E");
  -webkit-mask-size:cover;
          mask-size:cover;
  display:inline-block;
  background-color:var(--vtmn-semantic-color_content-negative);
  block-size:1.6rem;
  inline-size:1.6rem;
  -webkit-margin-end:0.5rem;
          margin-inline-end:0.5rem;
  transform:translateY(0.2rem);
}

.vtmn-text-input--valid{
  box-shadow:inset 0 0 0 0.2rem var(--vtmn-semantic-color_border-positive);
}

.vtmn-text-input--valid ~ span[class^='vtmx-'],
.vtmn-text-input--valid ~ svg{
  color:var(--vtmn-semantic-color_content-positive);
  fill:var(--vtmn-semantic-color_content-positive);
}

.vtmn-text-input--error{
  box-shadow:inset 0 0 0 0.2rem var(--vtmn-semantic-color_border-negative);
}

.vtmn-text-input--error ~ span[class^='vtmx-'],
.vtmn-text-input--error ~ svg{
  color:var(--vtmn-semantic-color_content-primary);
  fill:var(--vtmn-semantic-color_content-primary);
}

@media screen and (min-width: 600px) and (max-width: 899px){
}

@media screen and (min-width: 900px) and (max-width: 1199px){
}

@media screen and (min-width: 1200px) and (max-width: 1799px){
}

@media screen and (min-width: 1800px){
}