_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-write-sort-group" aria-labelledby="txp-write-sort-group-label">
<h3 class="txp-summary" id="txp-write-sort-group-label"><a role="button" data-txp-token="a1ae70b7de4431300b6b11e20d3c73c5" data-txp-pane="article_sort" href="#txp-sort-group-content" aria-controls="txp-sort-group-content" aria-pressed="true">Sort and display</a></h3>
<div class="toggle hidden" id="txp-sort-group-content" role="group">
<div id="txp-container-status">
<div class="txp-form-field status">
<div class="txp-form-field-label"><label for="status">Status <a rel="help" title="Help" role="button" class="pophelp" href="#"><span class="ui-icon ui-icon-help">Help</span></a></label></div>
<div class="txp-form-field-value">
<select name="Status" id="status">
<option value="1" dir="auto">Draft</option>
<option value="2" dir="auto">Hidden</option>
<option value="3" dir="auto">Pending</option>
<option value="4" dir="auto" selected="selected">Live</option>
<option value="5" dir="auto">Sticky</option>
</select>
</div>
</div>
</div>
<div class="txp-form-field section">
<div class="txp-form-field-label"><label for="section">Section</label></div>
<div class="txp-form-field-value">
<select name="Section" id="section">
<option data-skin="all-grid" value="articles" dir="auto">Neo-impressionism</option>
<option data-skin="all-grid" value="nodes" dir="auto">Existentialism</option>
<option data-skin="all-grid" value="txpstyle" dir="auto" selected="selected">Immagine</option>
</select>
<a class="txp-option-link" href="#">Edit</a>
</div>
</div>
<div class="txp-form-field override-form">
<div class="txp-form-field-label"><label for="override-form">Override form <a rel="help" title="Help" role="button" class="pophelp" href="#"><span class="ui-icon ui-icon-help">Help</span></a></label></div>
<div class="txp-form-field-value">
<select name="override_form" id="override-form">
<option value="" selected="selected"> </option>
<option value="feature" dir="auto">idealism</option>
<option value="shifty" dir="auto">intervention</option>
<option value="super" dir="auto">situationist</option>
<option value="super_pan" dir="auto">fluxus</option>
<option value="txp5_scss" dir="auto">structuralism</option>
</select>
</div>
</div>
</div>
</section>
<section class="txp-details" id="txp-dates-group" aria-labelledby="txp-dates-group-label">
<h3 class="txp-summary" id="txp-dates-group-label"><a role="button" data-txp-token="4ba8e8e6bac148dd2d21035fbbb9425a" data-txp-pane="article_dates" href="#txp-dates-group-content" aria-controls="txp-dates-group-content" aria-pressed="false">Date and time</a></h3>
<div class="toggle hidden" id="txp-dates-group-content" role="group">
<div id="publish-datetime-group">
<div class="txp-form-field date posted">
<div class="txp-form-field-label"><label for="year">Publish date <a rel="help" title="Help" role="button" class="pophelp" href="#"><span class="ui-icon ui-icon-help">Help</span></a></label></div>
<div class="txp-form-field-value">
<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="11"> <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="29">
</div>
</div>
<div class="txp-form-field time posted">
<div class="txp-form-field-label"><label for="hour">Publish time</label></div>
<div class="txp-form-field-value">
<input class="input-hour" id="hour" name="hour" type="text" inputmode="numeric" pattern="([0-1][0-9]|2[0-3])" size="2" maxlength="2" title="Hour" placeholder="hh" tabindex="0" value="14"> <span role="separator">:</span>
<input class="input-minute" id="minute" name="minute" type="text" inputmode="numeric" pattern="([0-5][0-9])" size="2" maxlength="2" title="Minute" placeholder="mn" tabindex="0" value="03"> <span role="separator">:</span>
<input class="input-second" id="second" name="second" type="text" inputmode="numeric" pattern="([0-5][0-9])" size="2" maxlength="2" title="Second" placeholder="ss" tabindex="0" value="02">
</div>
</div>
<div class="txp-form-field reset-time">
<input class="checkbox" id="reset_time" name="reset_time" type="checkbox" value="1">
<label for="reset_time">Reset timestamp to now</label>
</div>
</div>
<div id="expires-datetime-group">
<div class="txp-form-field date expires">
<div class="txp-form-field-label"><label for="exp_year">Expire date <a rel="help" title="Help" role="button" class="pophelp" href="#"><span class="ui-icon ui-icon-help">Help</span></a></label></div>
<div class="txp-form-field-value">
<input class="input-year" id="exp_year" name="exp_year" type="text" inputmode="numeric" pattern="[0-9]{4}" size="4" maxlength="4" title="Year" placeholder="yyyy" tabindex="0"> <span role="separator">/</span>
<input class="input-month" id="exp_month" name="exp_month" type="text" inputmode="numeric" pattern="(0[1-9]|1[012])" size="2" maxlength="2" title="Month" placeholder="mm" tabindex="0"> <span role="separator">/</span>
<input class="input-day" id="exp_day" name="exp_day" type="text" inputmode="numeric" pattern="(0[1-9]|[12][0-9]|3[01])" size="2" maxlength="2" title="Day" placeholder="dd" tabindex="0">
</div>
</div>
<div class="txp-form-field time expires">
<div class="txp-form-field-label"><label for="exp_hour">Expire time</label></div>
<div class="txp-form-field-value">
<input class="input-hour" id="exp_hour" name="exp_hour" type="text" inputmode="numeric" pattern="([0-1][0-9]|2[0-3])" size="2" maxlength="2" title="Hour" placeholder="hh" tabindex="0"> <span role="separator">:</span>
<input class="input-minute" id="exp_minute" name="exp_minute" type="text" inputmode="numeric" pattern="([0-5][0-9])" size="2" maxlength="2" title="Minute" placeholder="mn" tabindex="0"> <span role="separator">:</span>
<input class="input-second" id="exp_second" name="exp_second" type="text" inputmode="numeric" pattern="([0-5][0-9])" size="2" maxlength="2" title="Second" placeholder="ss" tabindex="0">
</div>
</div>
<div class="txp-form-field expire-now">
<input class="checkbox" id="expire_now" name="expire_now" type="checkbox" value="1">
<label for="expire_now">Set expiry to now</label>
</div>
<input name="sExpires" type="hidden" value="">
</div>
</div>
</section>
<section class="txp-details" id="txp-categories-group" aria-labelledby="txp-categories-group-label">
<h3 class="txp-summary " id="txp-categories-group-label"><a role="button" data-txp-token="ace063cf5afff0757cf4be66b3ed9a70" data-txp-pane="categories" href="#txp-categories-group-content" aria-controls="txp-categories-group-content" aria-pressed="false">Categories</a></h3>
<div class="toggle hidden" id="txp-categories-group-content" role="group">
<div class="txp-form-field category category-1">
<div class="txp-form-field-label"><label for="category-1">Category 1</label></div>
<div class="txp-form-field-value">
<select id="category-1" name="Category1">
<option value=""> </option>
<option value="international" data-level="0" dir="auto">international</option>
<option value="remodernism" data-level="1" dir="auto"> remodernism</option>
<option value="symbolism" data-level="1" dir="auto"> symbolism</option>
</select>
<a class="txp-option-link" href="#">Edit</a>
</div>
</div>
<div class="txp-form-field category category-2">
<div class="txp-form-field-label"><label for="category-2">Category 2</label></div>
<div class="txp-form-field-value">
<select id="category-2" name="Category2">
<option value="" selected="selected"> </option>
<option value="international" data-level="0" dir="auto">international</option>
<option value="remodernism" data-level="1" dir="auto"> remodernism</option>
<option value="symbolism" data-level="1" dir="auto"> symbolism</option>
</select>
</div>
</div>
</div>
</section>
<section class="txp-details" id="txp-meta-group" aria-labelledby="txp-meta-group-label">
<h3 class="txp-summary " id="txp-meta-group-label"><a role="button" data-txp-token="d3dbfa670b1956571a599ae2c67e0f1f" data-txp-pane="article_meta" href="#txp-meta-group-content" aria-controls="txp-meta-group-content" aria-pressed="false">Meta</a></h3>
<div class="toggle hidden" id="txp-meta-group-content" role="group">
<div class="txp-form-field url-title">
<div class="txp-form-field-label"><label for="url-title">URL-only title <a rel="help" title="Help" role="button" class="pophelp" href="#"><span class="ui-icon ui-icon-help">Help</span></a></label></div>
<div class="txp-form-field-value"><input name="url_title" type="text" id="url-title" size="32" maxlength="255" value="superflat"></div>
</div>
<div class="txp-form-field txp-form-field-textarea description">
<div class="txp-form-field-label"><label for="description">Description <a rel="help" title="Help" role="button" class="pophelp" href="#"><span class="ui-icon ui-icon-help">Help</span></a></label></div>
<div class="txp-form-field-value"><textarea name="description" id="description" rows="4" cols="16" maxlength="255" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 108px;"></textarea></div>
</div>
<div class="txp-form-field txp-form-field-textarea keywords">
<div class="txp-form-field-label"><label for="keywords">Keywords <a rel="help" title="Help" role="button" class="pophelp" href="#"><span class="ui-icon ui-icon-help">Help</span></a></label></div>
<div class="txp-form-field-value"><textarea name="Keywords" id="keywords" rows="4" cols="16" maxlength="255" style="overflow: hidden; overflow-wrap: break-word; resize: none; height: 108px;"></textarea></div>
</div>
</div>
</section>
<section class="txp-details" id="txp-comments-group" aria-labelledby="txp-comments-group-label">
<h3 class="txp-summary" id="txp-comments-group-label"><a role="button" data-txp-token="195a6438925c4da6f7688b3948f53b31" data-txp-pane="article_comments" href="#txp-comments-group-content" aria-controls="txp-comments-group-content" aria-pressed="false">Comment options</a></h3>
<div class="toggle hidden" id="txp-comments-group-content" role="group" aria-expanded="false">
<div id="write-comments">
<div class="txp-form-field comment-annotate">
<input class="radio active" id="Annotate-0" name="Annotate" type="radio" checked="checked" value="0">
<label for="Annotate-0">Off</label>
<input class="radio" id="Annotate-1" name="Annotate" type="radio" value="1">
<label for="Annotate-1">On</label>
</div>
<div class="txp-form-field comment-invite">
<div class="txp-form-field-label"><label for="comment-invite">Invitation</label></div>
<div class="txp-form-field-value"><input name="AnnotateInvite" type="text" id="comment-invite" size="32" maxlength="255" value="Comment"></div>
</div>
</div>
</div>
</section>