@vtmn/css-text-input/dist/index.css

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

.vtmn-text-input_label{
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  color:hsl(200, 100%, 4.7%);
  font-size:1rem;
  line-height:1.5;
  -webkit-margin-after:0.25rem;
          margin-block-end:0.25rem;
  display:block;
  inline-size:-moz-fit-content;
  inline-size:fit-content;
}

.vtmn-text-input{
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  box-shadow:inset 0 0 0 0.0625rem hsl(213, 10.6%, 59.2%);
  border:none;
  background-color:hsl(0, 0%, 100%);
  border-radius:4px;
  display:block;
  font-weight:400;
  font-size:1rem;
  padding-block:0.75rem;
  -webkit-padding-start:0.75rem;
          padding-inline-start:0.75rem;
  -webkit-padding-end:2.25rem;
          padding-inline-end:2.25rem;
  color:hsl(200, 100%, 4.7%);
  min-block-size:3rem;
  -webkit-appearance:none;
     -moz-appearance:none;
          appearance:none;
  transition:box-shadow 200ms ease-out;
}

.vtmn-text-input_helper-text{
  font-family:'Roboto', 'system-ui', '-apple-system', sans-serif;
  color:hsl(209, 15.7%, 36.3%);
  font-size:0.875rem;
  line-height:1.42;
  -webkit-margin-before:0.25rem;
          margin-block-start:0.25rem;
  inline-size:-moz-fit-content;
  inline-size:fit-content;
}

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

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

.vtmn-text-input:not(:disabled,
:focus,
textarea):hover{
  box-shadow:inset 0 0 0 1px hsl(213, 10.6%, 59.2%), 0 0 0 3px hsl(200, 60%, 94.1%);
}

.vtmn-text-input:not(:disabled):focus-visible{
  outline:none;
  box-shadow:inset 0 0 0 0.125rem hsl(200, 100%, 36.9%);
}

.vtmn-text-input:not(:disabled):focus{
  outline:none;
  box-shadow:inset 0 0 0 0.125rem hsl(200, 100%, 36.9%);
}

.vtmn-text-input::-moz-placeholder{
  color:hsl(211, 13%, 46.9%);
}

.vtmn-text-input::placeholder{
  color:hsl(211, 13%, 46.9%);
}

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

.vtmn-text-input ~ span[class^='vtmx-']{
  position:absolute;
  font-size:1.5rem;
  inset-inline-end:0.75rem;
  inset-block-end:0.75rem;
  color:hsl(200, 100%, 4.7%);
}

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

  .vtmn-text-input ~ span[class^='vtmx-']{
  font-size:1.625rem;
  }
}

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

  .vtmn-text-input ~ span[class^='vtmx-']{
  font-size:1.625rem;
  }
}

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

  .vtmn-text-input ~ span[class^='vtmx-']{
  font-size:1.5rem;
  }
}

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

  .vtmn-text-input ~ span[class^='vtmx-']{
  font-size:1.5rem;
  }
}

.vtmn-text-input ~ svg{
  position:absolute;
  font-size:1.5rem;
  inset-inline-end:0.75rem;
  inset-block-end:0.75rem;
  color:hsl(200, 100%, 4.7%);
}

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

  .vtmn-text-input ~ svg{
  font-size:1.625rem;
  }
}

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

  .vtmn-text-input ~ svg{
  font-size:1.625rem;
  }
}

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

  .vtmn-text-input ~ svg{
  font-size:1.5rem;
  }
}

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

  .vtmn-text-input ~ svg{
  font-size:1.5rem;
  }
}

.vtmn-text-input:disabled{
  opacity:0.38;
  cursor:not-allowed;
}

.vtmn-text-input:disabled ~ span[class^='vtmx-']{
  opacity:0.38;
  cursor:not-allowed;
}

.vtmn-text-input:disabled + svg{
  opacity:0.38;
  cursor:not-allowed;
}

.vtmn-text-input:disabled + .vtmn-text-input_helper-text{
  opacity:0.38;
  cursor:not-allowed;
}

.vtmn-text-input_helper-text--error{
  color:hsl(200, 100%, 4.7%);
  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:hsl(357, 77.1%, 52%);
  block-size:1rem;
  inline-size:1rem;
  -webkit-margin-end:0.3125rem;
          margin-inline-end:0.3125rem;
  transform:translateY(0.125rem);
}

.vtmn-text-input--valid{
  box-shadow:inset 0 0 0 0.125rem hsl(134, 65.7%, 40%);
}

.vtmn-text-input--valid ~ span[class^='vtmx-']{
  color:hsl(134, 65.7%, 40%);
  fill:hsl(134, 65.7%, 40%);
}

.vtmn-text-input--valid ~ svg{
  color:hsl(134, 65.7%, 40%);
  fill:hsl(134, 65.7%, 40%);
}

.vtmn-text-input--error{
  box-shadow:inset 0 0 0 0.125rem hsl(357, 77.1%, 52%);
}

.vtmn-text-input--error ~ span[class^='vtmx-']{
  color:hsl(200, 100%, 4.7%);
  fill:hsl(200, 100%, 4.7%);
}

.vtmn-text-input--error ~ svg{
  color:hsl(200, 100%, 4.7%);
  fill:hsl(200, 100%, 4.7%);
}