page: txp5

Core SASS

form: txp5_scss

_form-field.scss ➔ modified 31 days ago

GitHub: _form-field.scss

    
      @use "../2-atoms/beam";
.txp-form-field {
 //width: max-content;
 // max-width:var(--type-measure);
  button {
   // background-color: var(--clr-brand);
  }
}
// body:not(#page-article) .txp-form-field {
//   @extend %beam;
// }

.txp-form-field-label {
  @extend %beam !optional;
  justify-content: space-between;
  margin-bottom: var(--base-unit--s);
}

.txp-form-field-value {
  //display: contents;
  // border: 1px solid red;
  // width: 100%;
}

.txp-textarea-options {

}

.textfilter-help {
  margin-inline-end: var(--base-unit);
}

Source html

 
        
          <div class="txp-form-field txp-form-field-textarea body">
  <div class="txp-form-field-label">
    <label for="body">Body&nbsp;<a rel="help" title="Help" role="button" class="pophelp" href="?event=help&amp;step=pophelp&amp;item=body"><span class="ui-icon ui-icon-help">Help</span></a></label>
    <div class="txp-textarea-options txp-textfilter-options no-ui-button">
      Format:
      <select class="jquery-ui-selectmenu ui-menu ui-widget ui-widget-content" id="ui-id-3" role="menu" tabindex="0" style="/* display: none; */"> 
        <option data-id="0" class="ui-menu-item">Leave text untouched</option>
        <option data-id="2" class="ui-menu-item">Convert line breaks</option>
        <option data-id="1" class="ui-menu-item" selected  >Textile</option>
      </select>


      <!-- jqui
      <label for="ui-id-3-button">Format:
        <select class="jquery-ui-selectmenu ui-menu ui-widget ui-widget-content" id="ui-id-3" role="menu" tabindex="0" style="/* display: none; */"> 
          <option data-id="0" class="ui-menu-item">Leave text untouched</option>
          <option data-id="2" class="ui-menu-item">Convert line breaks</option>
          <option data-id="1" data-help="&amp;#160;<a rel=&quot;help&quot; title=&quot;Help&quot; role=&quot;button&quot; target=&quot;_blank&quot; href=&quot;https://textpattern.com/textile-sandbox&quot;><span class=&quot;ui-icon ui-icon-extlink&quot;>Help</span></a>" selectedz="selected" class="ui-menu-item">Textile</option>
        </select>
        <span tabindex="0" id="ui-id-3-button" role="combobox" aria-expanded="false" aria-autocomplete="list" aria-owns="ui-id-3-menu" aria-haspopup="true" class="ui-selectmenu-button ui-selectmenu-button-closed ui-corner-all ui-button ui-widget">
          <span class="ui-selectmenu-icon ui-icon ui-icon-triangle-1-s"></span>
          <span class="ui-selectmenu-text">Textile</span>
        </span>
        <input class="textfilter-value" name="textile_body" type="hidden" value="1">
      </label> -->

      <span class="textfilter-help">&nbsp;<a rel="help" title="Help" role="button" target="_blank" href="https://textpattern.com/textile-sandbox"><span class="ui-icon ui-icon-extlink">Help</span></a></span>
      <button class="txp-textarea-preview txp-reduced-ui-button" data-preview-link="body">Preview</button>
    </div>
  </div>
  <div class="txp-form-field-value">
    <textarea id="body" onInput="this.parentNode.dataset.replicatedValue = this.value" name="Body" cols="64" rows="16" class="ui-sortable" spellcheck="true" style="/* overflow: hidden; overflow-wrap: break-word; resize: none; text-align: start; height: 396px; */"></textarea>
  </div>
</div>