page: txp5

Core SASS

form: txp5_scss

_forms.scss modified 5 days ago


    
      // forms
button,
[type="submit"] {
  cursor: pointer;
  border: var(--border-width) solid var(--clr-border);
  color: var(--clr-text);
  padding: var(--base-unit--ss);
  // &:hover {
  //   background-color: var(--clr-brand);
  // }
}

[type="submit"] {
  padding-left: var(--base-unit--s);
  padding-right: var(--base-unit--s);
  text-align: left;
  cursor: pointer;
  background-color: var(--clr-brand);
}

label {
  display: inline-block; // allow margins, and for beam or column placement by parent class
}

input,
textarea {
  font-family: var(--font-input);
  padding: var(--base-unit--ss);
  border: var(--border-width) solid var(--clr-border);
  border-radius: 0;
  color: inherit;

  @media (max-width: 960px) {
    padding: calc(var(--base-unit--ss)/2) var(--base-unit--ss);
  }

  &:placeholder {
    font-family: var(--sans);
  }

  &:focus {
    animation: focus .9s ease-out forwards;
    outline: calc(var(--border-width) *2) solid var(--clr-brand);
    //outline: none;
  }
}

// fix inputs with a large size attribute
@media (max-width: 640px) {

  input[size="64"],
  input[size="32"],
  textarea[cols="40"] {
    //width: clamp(18ch, 90vw, 32ch);
    width: 100%;
  }
}

textarea {
  appearance: none;
  width: 100%;
  //height: auto;
  min-height: calc(var(--base-unit)* 5.5);
  // &[rows="16"] {
  //   height: auto; // calc(var(--base-unit)* 5.5);
  // }
  max-height: 75vh;
  padding-top: var(--base-unit--ss);
  padding-bottom: var(--base-unit);
  vertical-align: top;

  //border: var(--border-width) solid currentcolor;
  &:empty {
    min-height: initial;
  }

  &:focus {
    min-height: calc(var(--base-unit)* 12);
  }
}

// auto-growing textarea see https://chriscoyier.net/2023/09/29/css-solves-auto-expanding-textareas-probably-eventually/
.txp-form-field-value:has(textarea) {
  display: grid;
  &:after {
    content: attr(data-replicated-value) " "; // Needed to preventy jumpy behavior
    white-space: pre-wrap;
    visibility: hidden; // Hidden from view, clicks, and screen readers
  }

  & > textarea {
    resize: none; //user resizing breaks auto sizing
    overflow: hidden; // hide Firefox scrollbar on growth
  }

  &>textarea,
  &:after {
    /* Identical styling may be required if modifying core */
    grid-area: 1 / 1 / 2 / 2; // Place on top
  }
}

select {
  width: max-content;
  appearance: none;
  border: var(--border-width) solid var(--clr-border);
  color: var(--clr-text);
  border-radius: 0;
  padding: var(--base-unit--ss);
  padding-right: var(--base-unit);
  background-repeat: no-repeat;
  background-position: calc(100% - var(--base-unit--ss)) center;
  background-size: .75em;
  // background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M4 7l4 4 4-4-1.5-1.5L8 8 5.5 5.5'/%3E%3C/svg%3E");
  background-image: url('data:image/svg+xml;base64,ICA8c3ZnIHZpZXdCb3g9IjAgMCAxMyA3IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPjxnIHN0cm9rZT0ibm9uZSIgc3Ryb2tlLXdpZHRoPSIxIiBmaWxsPSJub25lIiBmaWxsLXJ1bGU9ImV2ZW5vZGQiIHN0cm9rZS1saW5lY2FwPSJyb3VuZCIgc3Ryb2tlLWxpbmVqb2luPSJyb3VuZCI+PHBvbHlsaW5lIHN0cm9rZT0iIzAwMDAwMCIgcG9pbnRzPSIwIDAuNjIyNzQxNjk5IDYuMjgxMjUgNi41IDEyLjU2MjUgMC42MjI3NDE2OTkiPjwvcG9seWxpbmU+PC9nPjwvc3ZnPgo=');

  &:hover {
    border-color: var(--clr-brand);
  }

  // 
  @media (max-width: 960px) {
    padding: calc(var(--base-unit--ss)/2) var(--base-unit--ss);
  }

  @media (prefers-color-scheme: dark) {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M4 7l4 4 4-4-1.5-1.5L8 8 5.5 5.5'/%3E%3C/svg%3E");
  }
}

[type="checkbox"],
[type="radio"] {
  margin: 0;
  accent-color: var(--clr-brand);
}

// *:has(> select) [type="submit"] {
//   text-align: left;
//   cursor: pointer;
// }
// .comThanks,
// .comError {}
@keyframes focus {
  from {
    background-color: var(--clr-brand);
  }

  to {
    background-color: var(--clr-bg);
  }
}
    

  

Source html

        
          <div class="b_typeset">
  <p>
    <label>Label</label>
    <input type="text" placeholder="Abstract" />
  </p>
  <p class="txp-form-field-value">
    <label>Label</label>
    <textarea onInput="this.parentNode.dataset.replicatedValue = this.value" placeholder="Expressionism"></textarea>
  </p>

  <p>
    <label>Label</label>
    <input type="text" value="Gothic" />
  </p>
  <p>
    <label>Label</label>
    <input class="input-year" id="year" name="year" type="text" inputmode="numeric" pattern="[0-9]{4}" size="4" maxlength="4" title="Year" placeholder="yyyy" tabindex="0" value="2024"> <span role="separator">/</span>
    <input class="input-month" id="month" name="month" type="text" inputmode="numeric" pattern="(0[1-9]|1[012])" size="2" maxlength="2" title="Month" placeholder="mm" tabindex="0" value="05"> <span role="separator">/</span>
    <input class="input-day" id="day" name="day" type="text" inputmode="numeric" pattern="(0[1-9]|[12][0-9]|3[01])" size="2" maxlength="2" title="Day" placeholder="dd" tabindex="0" value="31">
  </p>
  <p class="txp-form-field-value">
    <label>Label</label>
    <textarea onInput="this.parentNode.dataset.replicatedValue = this.value">Neo-dada expressionism neo-geo neo-impressionism performance art, international gothic gothic art neo-classicism historicism, stuckism neoism expressionism. Romanticism new media art metaphysical art nonconformism de stijl rococo , maximalism barbizon school ottonian dadaism. Pre-raphaelites postminimalism renaissance action painting expressionism, pointilism tachisme street art deformalism, lowbrow secularism ottonian</textarea>
  </p>
  <p>
    <label>Label</label>
    <input type="checkbox" />
  </p>
  <p>
    <label>Label</label>
    <input type="radio" />
  </p>
  <p>
    <input type="submit" value="Dada" />
    <button>Modernism</button>
  </p>

  <p>
    <select>
      <option value="articles">Monumentalism </option>
      <option value="nodes">Realism</option>
      <option value="txpstyle">Neue Slowenische Kunst</option>
    </select>
  </p>
</div>