page: txp5

Core SASS

form: txp5_scss

_txp-details.scss ➔ modified 31 days ago

GitHub: _txp-details.scss

    
      //_m_txp-details.scss
@use "../2-atoms/beam";

.txp-details {
  .hidden {
    display: none;
  }

  &:has(.expanded) {
    margin-bottom: var(--base-unit--b);
  }

  .toggle {
    @extend %beam !optional;
    gap: var(--base-unit) var(--base-unit--s);

    >div {
      position: relative;
      //width: max-content;
    }
  }

  [type="checkbox"] {
    margin-inline-end: var(--base-unit--ss);
  }

  .date {
    margin-bottom: var(--base-unit);
  }

  .time,
  .comment-annotate {
    margin-bottom: var(--base-unit--s);
  }

  .reset-time {
    display: flex;
    text-wrap: balance;
  }
}

.txp-summary {

  //margin-bottom: var(--base-unit--s);
  a {
    text-decoration: none;

    &:before {
      font-family: 'core-line';
      content: '\e900';
      font-size: initial;
      margin-inline-end: var(--base-unit--ss);
      border-radius: 50%;
    }
  }

  &.expanded {
    margin-bottom: var(--base-unit--ss);

    a:before {
      content: '\e90b';
    }
  }
.txp-option-link {
  position: absolute;
  top: 0;
  right: 0;
}}

Source html

 
        
          <section class="txp-details" id="txp-image-group" aria-labelledby="txp-image-group-label">
  <h3 class="txp-summary" id="txp-image-group-label"><a role="button" data-txp-token="9b9776b627861c9b761a4e81a037f261" data-txp-pane="article_image" href="#txp-image-group-content" aria-controls="txp-image-group-content" aria-pressed="false">Article image</a></h3>
  <div class="toggle hidden ui-sortable" id="txp-image-group-content" role="group" aria-expanded="false">
    <div class="txp-container">
      <div class="txp-form-field article-image">
        <div class="txp-form-field-label"><label for="article-image">Article image&nbsp;<a rel="help" title="Help" role="button" class="pophelp" href="?event=help&amp;step=pophelp&amp;item=article_image"><span class="ui-icon ui-icon-help">Help</span></a></label></div>
        <div class="txp-form-field-value"><input name="Image" type="text" id="article-image" size="32" maxlength="255" value="1,2,3,4,5"></div>
      </div>
      <div id="article-file-container" class="com-image-container">
        <p class="sortable" data-id="1" title="landscape.svg|1"><a href="index.php?event=image&amp;step=image_edit&amp;id=1" title="landscape.svg (1)" target="com_article_image"><img src="https://dev.all-sorts.biz/images/1t.svg" width="180" height="120" data-id="1" data-ext=".svg" data-width="961" data-height="641" alt="landscape" loading="lazy"></a><button class="destroy" title="Delete"><span class="ui-icon ui-icon-close">Delete</span></button></p>
        <p class="sortable" data-id="2" title="portrait.svg|2"><a href="index.php?event=image&amp;step=image_edit&amp;id=2" title="portrait.svg (2)" target="com_article_image"><img src="https://dev.all-sorts.biz/images/2t.svg" width="180" height="270" data-id="2" data-ext=".svg" data-width="641" data-height="961" alt="portrait.svg" loading="lazy"></a><button class="destroy" title="Delete"><span class="ui-icon ui-icon-close">Delete</span></button></p>
        <p class="sortable" data-id="3" title="square-ish-landscape.svg|3"><a href="index.php?event=image&amp;step=image_edit&amp;id=3" title="square-ish-landscape.svg (3)" target="com_article_image"><img src="https://dev.all-sorts.biz/images/3t.svg" width="180" height="174" data-id="3" data-ext=".svg" data-width="641" data-height="621" alt="square-ish-landscape.svg" loading="lazy"></a><button class="destroy" title="Delete"><span class="ui-icon ui-icon-close">Delete</span></button></p>
        <p class="sortable" data-id="4" title="square-ish-portrait.svg|4"><a href="index.php?event=image&amp;step=image_edit&amp;id=4" title="square-ish-portrait.svg (4)" target="com_article_image"><img src="https://dev.all-sorts.biz/images/4t.svg" width="180" height="186" data-id="4" data-ext=".svg" data-width="621" data-height="641" alt="square-ish-portrait.svg" loading="lazy"></a><button class="destroy" title="Delete"><span class="ui-icon ui-icon-close">Delete</span></button></p>
        <p class="sortable" data-id="5" title="square.svg|5"><a href="index.php?event=image&amp;step=image_edit&amp;id=5" title="square.svg (5)" target="com_article_image"><img src="https://dev.all-sorts.biz/images/5t.svg" width="180" height="180" data-id="5" data-ext=".svg" data-width="641" data-height="641" alt="square.svg" loading="lazy"></a><button class="destroy" title="Delete"><span class="ui-icon ui-icon-close">Delete</span></button></p>
      </div>
  
  
      <div id="article-file-drop" class="txp-form-field article-image">
        <div class="txp-form-field-label"><label for="article-file-input">Upload</label></div>
        <div class="txp-form-field-value"><input id="article-file-input" type="file" name="article_file[]" multiple="multiple" accept="image/*"><input type="hidden" name="com_image_import" id="article-file-import" value="[]">
          <input type="hidden" name="com_image_tags" id="article-file-tags" value="">
          <label id="article-file-input-label" for="article-file-input" class="secondary-text">Click or drop files on this zone</label>
        </div>
      </div>
  
      <div class="txp-form-field article-image">
        <div class="txp-form-field-label"><label for="article-file-name">Search</label><span id="article-file-action" class="invisible"><button id="article-file-add" class="destroy"><span class="ui-icon ui-icon-plus">Add</span></button>Add<button id="article-file-empty" class="destroy"><span class="ui-icon ui-icon-close">Delete</span></button>Delete</span></div>
        <div class="txp-form-field-instructions">Shift+Enter: invert search mode</div>
        <div class="txp-form-field-value"><input id="article-file-name" placeholder="name, id" form="" type="text" size="32">
        </div>
      </div>
      <div id="article-file-select" class="com-image-container"></div>
    </div>
  </div>
</section>
<section class="txp-details" id="txp-custom-field-group" aria-labelledby="txp-custom-field-group-label">
  <h3 class="txp-summary " id="txp-custom-field-group-label"><a role="button" data-txp-token="4fda2f3ab2112610f2b470ddc661a95f" data-txp-pane="article_custom_field" href="#txp-custom-field-group-content" aria-controls="txp-custom-field-group-content" aria-pressed="false">Custom fields</a></h3>
  <div class="toggle hidden" id="txp-custom-field-group-content" role="group">
    <div class="txp-container">
      <div class="txp-form-field custom-field custom-1">
        <div class="txp-form-field-label"><label for="custom-1">custom1</label></div>
        <div class="txp-form-field-value"><input name="custom_1" type="text" id="custom-1" size="32" value=""></div>
      </div>
      <div class="txp-form-field custom-field custom-2">
        <div class="txp-form-field-label"><label for="custom-2">custom2</label></div>
        <div class="txp-form-field-value"><input name="custom_2" type="text" id="custom-2" size="32" value=""></div>
      </div>
    </div>
  </div>
</section>
<section class="txp-details" id="txp-recent-group" aria-labelledby="txp-recent-group-label">
  <h3 class="txp-summary " id="txp-recent-group-label"><a role="button" data-txp-token="4fda2f3ab2112610f2b470ddc661a95f" data-txp-pane="txp-recent_field" href="#txp-recent-field-group-content" aria-controls="txp-recent-field-group-content" aria-pressed="false">Recent articles</a></h3>
  <div class="toggle hidden" id="txp-recent-group-content" role="group">
  </div>
</section>