UX: Normalize sizing for inputs, buttons, dropdowns (#14226)
See PR for details
This commit is contained in:
Penar Musaraj
GitHub
parent
76f0cf10e6
commit
24e71acf3f
|
|
@ -17,7 +17,7 @@ import { schedule } from "@ember/runloop";
|
|||
**/
|
||||
|
||||
export default Component.extend({
|
||||
classNames: ["screened-ip-address-form"],
|
||||
classNames: ["screened-ip-address-form", "inline-form"],
|
||||
formSubmitted: false,
|
||||
actionName: "block",
|
||||
|
||||
|
|
|
|||
|
|
@ -1,30 +1,35 @@
|
|||
<b>{{i18n "admin.permalink.form.label"}}</b>
|
||||
<div class="inline-form">
|
||||
<label>{{i18n "admin.permalink.form.label"}}</label>
|
||||
|
||||
{{text-field
|
||||
value=url
|
||||
disabled=formSubmitted
|
||||
class="permalink-url"
|
||||
placeholderKey="admin.permalink.url"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"}}
|
||||
{{text-field
|
||||
value=url
|
||||
disabled=formSubmitted
|
||||
class="permalink-url"
|
||||
placeholderKey="admin.permalink.url"
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
}}
|
||||
|
||||
{{combo-box
|
||||
content=permalinkTypes
|
||||
value=permalinkType
|
||||
onChange=(action (mut permalinkType))
|
||||
class="permalink-type"
|
||||
}}
|
||||
{{combo-box
|
||||
content=permalinkTypes
|
||||
value=permalinkType
|
||||
onChange=(action (mut permalinkType))
|
||||
class="permalink-type"
|
||||
}}
|
||||
|
||||
{{text-field
|
||||
value=permalink_type_value
|
||||
disabled=formSubmitted
|
||||
class="external-url"
|
||||
placeholderKey=permalinkTypePlaceholder
|
||||
autocorrect="off"
|
||||
autocapitalize="off"}}
|
||||
{{text-field
|
||||
value=permalink_type_value
|
||||
disabled=formSubmitted
|
||||
class="external-url"
|
||||
placeholderKey=permalinkTypePlaceholder
|
||||
autocorrect="off"
|
||||
autocapitalize="off"
|
||||
}}
|
||||
|
||||
{{d-button
|
||||
class="btn-default"
|
||||
action=(action "submit")
|
||||
disabled=formSubmitted
|
||||
label="admin.permalink.form.add"}}
|
||||
{{d-button
|
||||
class="btn-default"
|
||||
action=(action "submit")
|
||||
disabled=formSubmitted
|
||||
label="admin.permalink.form.add"
|
||||
}}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
<b>{{i18n "admin.logs.screened_ips.form.label"}}</b>
|
||||
<label>{{i18n "admin.logs.screened_ips.form.label"}}</label>
|
||||
{{text-field value=ip_address disabled=formSubmitted class="ip-address-input" placeholderKey="admin.logs.screened_ips.form.ip_address" autocorrect="off" autocapitalize="off"}}
|
||||
|
||||
{{combo-box
|
||||
|
|
|
|||
|
|
@ -16,21 +16,24 @@
|
|||
|
||||
<form>
|
||||
<div class="admin-controls">
|
||||
{{#if sendingEmail}}
|
||||
<div class="controls">{{i18n "admin.email.sending_test"}}</div>
|
||||
{{else}}
|
||||
<div class="controls">
|
||||
{{text-field value=testEmailAddress placeholderKey="admin.email.test_email_address"}}
|
||||
<div class="controls">
|
||||
<div class="inline-form">
|
||||
{{#if sendingEmail}}
|
||||
{{i18n "admin.email.sending_test"}}
|
||||
{{else}}
|
||||
{{text-field value=testEmailAddress placeholderKey="admin.email.test_email_address"}}
|
||||
{{d-button
|
||||
class="btn-primary"
|
||||
action=(action "sendTestEmail")
|
||||
disabled=sendTestEmailDisabled
|
||||
label="admin.email.send_test"
|
||||
type="submit"
|
||||
}}
|
||||
{{#if sentTestEmailMessage}}
|
||||
<span class="result-message">{{sentTestEmailMessage}}</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
<div class="controls">
|
||||
{{d-button
|
||||
class="btn-primary"
|
||||
action=(action "sendTestEmail")
|
||||
disabled=sendTestEmailDisabled
|
||||
label="admin.email.send_test"
|
||||
type="submit"}}
|
||||
{{#if sentTestEmailMessage}}<span class="result-message">{{sentTestEmailMessage}}</span>{{/if}}
|
||||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
|
|
|
|||
|
|
@ -2,32 +2,35 @@
|
|||
|
||||
<div class="admin-controls email-preview">
|
||||
<div class="controls">
|
||||
<label for="last-seen">{{i18n "admin.email.last_seen_user"}}</label>
|
||||
{{date-picker-past value=lastSeen id="last-seen"}}
|
||||
<label>{{i18n "admin.email.user"}}:</label>
|
||||
{{email-group-user-chooser
|
||||
value=username
|
||||
onChange=(action "updateUsername")
|
||||
options=(hash
|
||||
maximum=1
|
||||
)
|
||||
}}
|
||||
{{d-button
|
||||
class="btn-primary digest-refresh-button"
|
||||
action=(action "refresh")
|
||||
label="admin.email.refresh"}}
|
||||
<div class="toggle">
|
||||
<label>{{i18n "admin.email.format"}}</label>
|
||||
{{#if showHtml}}
|
||||
<span>{{i18n "admin.email.html"}}</span>
|
||||
|
|
||||
<a href {{action "toggleShowHtml"}}>
|
||||
{{i18n "admin.email.text"}}
|
||||
</a>
|
||||
{{else}}
|
||||
<a href {{action "toggleShowHtml"}}>{{i18n "admin.email.html"}}</a> |
|
||||
<span>{{i18n "admin.email.text"}}</span>
|
||||
{{/if}}
|
||||
<div class="inline-form">
|
||||
<label for="last-seen">{{i18n "admin.email.last_seen_user"}}</label>
|
||||
{{date-picker-past value=lastSeen id="last-seen"}}
|
||||
<label>{{i18n "admin.email.user"}}:</label>
|
||||
{{email-group-user-chooser
|
||||
value=username
|
||||
onChange=(action "updateUsername")
|
||||
options=(hash
|
||||
maximum=1
|
||||
)
|
||||
}}
|
||||
{{d-button
|
||||
class="btn-primary digest-refresh-button"
|
||||
action=(action "refresh")
|
||||
label="admin.email.refresh"
|
||||
}}
|
||||
<div class="toggle">
|
||||
<label>{{i18n "admin.email.format"}}</label>
|
||||
{{#if showHtml}}
|
||||
<span>{{i18n "admin.email.html"}}</span>
|
||||
|
|
||||
<a href {{action "toggleShowHtml"}}>
|
||||
{{i18n "admin.email.text"}}
|
||||
</a>
|
||||
{{else}}
|
||||
<a href {{action "toggleShowHtml"}}>{{i18n "admin.email.html"}}</a> |
|
||||
<span>{{i18n "admin.email.text"}}</span>
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -37,20 +40,22 @@
|
|||
<div class="email-preview-digest">
|
||||
{{#if showSendEmailForm}}
|
||||
<div class="controls">
|
||||
{{#if sendingEmail}}
|
||||
{{i18n "admin.email.sending_test"}}
|
||||
{{else}}
|
||||
<label>{{i18n "admin.email.send_digest_label"}}</label>
|
||||
{{text-field value=email placeholderKey="admin.email.test_email_address"}}
|
||||
{{d-button
|
||||
class="btn-default"
|
||||
action=(action "sendEmail")
|
||||
disabled=sendEmailDisabled
|
||||
label="admin.email.send_digest"}}
|
||||
{{#if sentEmail}}
|
||||
<span class="result-message">{{i18n "admin.email.sent_test"}}</span>
|
||||
<div class="inline-form">
|
||||
{{#if sendingEmail}}
|
||||
{{i18n "admin.email.sending_test"}}
|
||||
{{else}}
|
||||
<label>{{i18n "admin.email.send_digest_label"}}</label>
|
||||
{{text-field value=email placeholderKey="admin.email.test_email_address"}}
|
||||
{{d-button
|
||||
class="btn-default"
|
||||
action=(action "sendEmail")
|
||||
disabled=sendEmailDisabled
|
||||
label="admin.email.send_digest"}}
|
||||
{{#if sentEmail}}
|
||||
<span class="result-message">{{i18n "admin.email.sent_test"}}</span>
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
</div>
|
||||
</div>
|
||||
{{/if}}
|
||||
|
||||
|
|
|
|||
|
|
@ -16,7 +16,7 @@
|
|||
<tr>
|
||||
<th>{{i18n "admin.emoji.image"}}</th>
|
||||
<th>{{i18n "admin.emoji.name"}}</th>
|
||||
<th>
|
||||
<th colspan="2">
|
||||
{{combo-box
|
||||
value=filter
|
||||
content=sortingGroups
|
||||
|
|
@ -25,22 +25,21 @@
|
|||
onChange=(action "filterGroups")
|
||||
}}
|
||||
</th>
|
||||
<th></th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{{#each sortedEmojis as |e|}}
|
||||
<tr>
|
||||
<th><img class="emoji emoji-custom" src={{e.url}} title={{e.name}} alt={{i18n "admin.emoji.alt"}}></th>
|
||||
<th>:{{e.name}}:</th>
|
||||
<th>{{e.group}}</th>
|
||||
<th>
|
||||
<td><img class="emoji emoji-custom" src={{e.url}} title={{e.name}} alt={{i18n "admin.emoji.alt"}}></td>
|
||||
<td>:{{e.name}}:</td>
|
||||
<td>{{e.group}}</td>
|
||||
<td class="action">
|
||||
{{d-button
|
||||
action=(action "destroyEmoji" e)
|
||||
class="btn-danger"
|
||||
icon="far-trash-alt"
|
||||
}}
|
||||
</th>
|
||||
</td>
|
||||
</tr>
|
||||
{{/each}}
|
||||
</tbody>
|
||||
|
|
|
|||
|
|
@ -1,7 +1,7 @@
|
|||
<p>{{i18n "admin.logs.screened_ips.description"}}</p>
|
||||
|
||||
<div class="screened-ip-controls">
|
||||
<div class="filter-screened-ip-address">
|
||||
<div class="filter-screened-ip-address inline-form">
|
||||
{{text-field
|
||||
value=filter
|
||||
class="ip-address-input"
|
||||
|
|
@ -82,7 +82,9 @@
|
|||
action=(action "save")
|
||||
actionParam=item
|
||||
label="admin.logs.save"}}
|
||||
<a href {{action "cancel" item}}>{{i18n "cancel"}}</a>
|
||||
<a href {{action "cancel" item}} class="cancel-action">
|
||||
{{i18n "cancel"}}
|
||||
</a>
|
||||
{{else}}
|
||||
{{d-button
|
||||
class="btn-default btn-danger"
|
||||
|
|
|
|||
|
|
@ -1,29 +1,29 @@
|
|||
<div class="staff-action-logs-controls">
|
||||
{{#if filtersExists}}
|
||||
<div class="staff-action-logs-filters">
|
||||
<a href {{action "clearAllFilters"}} class="clear-filters filter">
|
||||
<a href {{action "clearAllFilters"}} class="clear-filters filter btn">
|
||||
<span class="label">{{i18n "admin.logs.staff_actions.clear_filters"}}</span>
|
||||
</a>
|
||||
{{#if actionFilter}}
|
||||
<a href {{action "clearFilter" "actionFilter"}} class="filter">
|
||||
<a href {{action "clearFilter" "actionFilter"}} class="filter btn">
|
||||
<span class="label">{{i18n "admin.logs.action"}}</span>: {{actionFilter}}
|
||||
{{d-icon "times-circle"}}
|
||||
</a>
|
||||
{{/if}}
|
||||
{{#if filters.acting_user}}
|
||||
<a href {{action "clearFilter" "acting_user"}} class="filter">
|
||||
<a href {{action "clearFilter" "acting_user"}} class="filter btn">
|
||||
<span class="label">{{i18n "admin.logs.staff_actions.staff_user"}}</span>: {{filters.acting_user}}
|
||||
{{d-icon "times-circle"}}
|
||||
</a>
|
||||
{{/if}}
|
||||
{{#if filters.target_user}}
|
||||
<a href {{action "clearFilter" "target_user"}} class="filter">
|
||||
<a href {{action "clearFilter" "target_user"}} class="filter btn">
|
||||
<span class="label">{{i18n "admin.logs.staff_actions.target_user"}}</span>: {{filters.target_user}}
|
||||
{{d-icon "times-circle"}}
|
||||
</a>
|
||||
{{/if}}
|
||||
{{#if filters.subject}}
|
||||
<a href {{action "clearFilter" "subject"}} class="filter">
|
||||
<a href {{action "clearFilter" "subject"}} class="filter btn">
|
||||
<span class="label">{{i18n "admin.logs.staff_actions.subject"}}</span>: {{filters.subject}}
|
||||
{{d-icon "times-circle"}}
|
||||
</a>
|
||||
|
|
|
|||
|
|
@ -12,6 +12,9 @@
|
|||
|
||||
{{~#if computedLabel~}}
|
||||
<span class="d-button-label">{{html-safe computedLabel}}{{#if ellipsis}}…{{/if}}</span>
|
||||
{{~else~}}
|
||||
​
|
||||
{{! Zero-width space character, so icon-only button height = regular button height }}
|
||||
{{~/if~}}
|
||||
|
||||
{{yield}}
|
||||
|
|
|
|||
|
|
@ -2,4 +2,5 @@
|
|||
type=inputType
|
||||
class="date-picker"
|
||||
placeholder=placeholder
|
||||
value=value}}
|
||||
value=value
|
||||
}}
|
||||
|
|
|
|||
|
|
@ -61,21 +61,21 @@
|
|||
<div class="category-color-editor">
|
||||
{{html-safe categoryBadgePreview}}
|
||||
|
||||
<div style="margin-top: 10px;" class="input-prepend input-append">
|
||||
<section class="field">
|
||||
<span class="color-title">{{i18n "category.background_color"}}:</span>
|
||||
<div class="colorpicker-wrapper">
|
||||
<span class="add-on">#</span>{{text-field value=category.color placeholderKey="category.color_placeholder" maxlength="6"}}
|
||||
{{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
|
||||
<div class="input-prepend input-append">
|
||||
<section class="field">
|
||||
<span class="color-title">{{i18n "category.foreground_color"}}:</span>
|
||||
<div class="colorpicker-wrapper edit-text-color">
|
||||
<span class="add-on">#</span>{{text-field value=category.text_color placeholderKey="category.color_placeholder" maxlength="6"}}
|
||||
{{color-picker colors=foregroundColors value=category.text_color id="edit-text-color"}}
|
||||
</div>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
{{/if}}
|
||||
</section>
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
<div class="emoji-uploader">
|
||||
<div class="control">
|
||||
<div class="emoji-uploader form-horizontal">
|
||||
<div class="control-group">
|
||||
<span class="label">
|
||||
{{i18n "admin.emoji.name"}}
|
||||
</span>
|
||||
|
|
@ -12,7 +12,7 @@
|
|||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="control-group">
|
||||
<span class="label">
|
||||
{{i18n "admin.emoji.group"}}
|
||||
</span>
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
}}
|
||||
</div>
|
||||
</div>
|
||||
<div class="control">
|
||||
<div class="control-group">
|
||||
<div class="input">
|
||||
<label class="btn btn-default btn-primary {{if addDisabled "disabled"}}">
|
||||
{{#if uploading}}
|
||||
|
|
|
|||
|
|
@ -21,7 +21,7 @@
|
|||
</div>
|
||||
|
||||
{{#if displayDateAndTimePicker}}
|
||||
<div class="control-group">
|
||||
<div class="control-group future-date-input-date-picker">
|
||||
{{d-icon "calendar-alt"}}
|
||||
{{date-picker-future
|
||||
value=_date
|
||||
|
|
@ -30,7 +30,7 @@
|
|||
}}
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<div class="control-group future-date-input-time-picker">
|
||||
{{d-icon "far-clock"}}
|
||||
{{input
|
||||
placeholder="--:--"
|
||||
|
|
|
|||
|
|
@ -12,7 +12,7 @@
|
|||
addLinkLookup=(action "addLinkLookup")
|
||||
}}
|
||||
{{#if model.viewOpenOrFullscreen}}
|
||||
<div role="form" aria-label={{I18n saveLabel}} class="reply-area {{if canEditTags "with-tags"}}">
|
||||
<div role="form" aria-label={{I18n saveLabel}} class="reply-area {{if canEditTags "with-tags" "without-tags"}}">
|
||||
<div class="composer-fields">
|
||||
{{plugin-outlet name="composer-open" args=(hash model=model)}}
|
||||
<div class="reply-to">
|
||||
|
|
|
|||
|
|
@ -11,28 +11,28 @@
|
|||
{{lastUpdatedAt}}
|
||||
</div>
|
||||
{{/if}}
|
||||
{{input
|
||||
value=(readonly nameInput)
|
||||
input=(action "onUsernameFilterChanged" value="target.value")
|
||||
placeholderKey="directory.filter_name"
|
||||
class="filter-name no-blur"
|
||||
}}
|
||||
{{combo-box
|
||||
class="directory-group-selector"
|
||||
value=group
|
||||
content=groupOptions
|
||||
onChange=(action groupChanged)
|
||||
options=(hash
|
||||
none="directory.group.all"
|
||||
)
|
||||
}}
|
||||
{{#if currentUser.staff}}
|
||||
{{d-button
|
||||
icon="wrench"
|
||||
action=(action "showEditColumnsModal")
|
||||
class="btn-default open-edit-columns-btn"
|
||||
<div class="inline-form full-width">
|
||||
{{input
|
||||
value=(readonly nameInput)
|
||||
input=(action "onUsernameFilterChanged" value="target.value")
|
||||
placeholderKey="directory.filter_name"
|
||||
class="filter-name no-blur"
|
||||
}}
|
||||
{{/if}}
|
||||
{{combo-box
|
||||
class="directory-group-selector"
|
||||
value=group
|
||||
content=groupOptions
|
||||
onChange=(action groupChanged)
|
||||
options=(hash none="directory.group.all")
|
||||
}}
|
||||
{{#if currentUser.staff}}
|
||||
{{d-button
|
||||
icon="wrench"
|
||||
action=(action "showEditColumnsModal")
|
||||
class="btn-default open-edit-columns-btn"
|
||||
}}
|
||||
{{/if}}
|
||||
</div>
|
||||
{{plugin-outlet name="users-directory-controls" connectorTagName="" tagName="" args=(hash model=model)}}
|
||||
</div>
|
||||
|
||||
|
|
|
|||
|
|
@ -9,7 +9,7 @@
|
|||
</div>
|
||||
</div>
|
||||
{{else}}
|
||||
<div class="form-horizontal bookmark-search-form">
|
||||
<div class="inline-form full-width bookmark-search-form">
|
||||
{{input type="text"
|
||||
value=searchTerm
|
||||
placeholder=(i18n "bookmarks.search_placeholder")
|
||||
|
|
@ -19,7 +19,8 @@
|
|||
class="btn-primary"
|
||||
action=(action "search")
|
||||
type="button"
|
||||
icon="search"}}
|
||||
icon="search"
|
||||
}}
|
||||
</div>
|
||||
{{#if nothingFound}}
|
||||
<div class="alert alert-info">{{i18n "user.no_bookmarks_search"}}</div>
|
||||
|
|
@ -28,7 +29,8 @@
|
|||
loadMore=(action "loadMore")
|
||||
reload=(action "reload")
|
||||
loadingMore=loadingMore
|
||||
content=content}}
|
||||
content=content
|
||||
}}
|
||||
{{/if}}
|
||||
{{/if}}
|
||||
{{/conditional-loading-spinner}}
|
||||
|
|
|
|||
|
|
@ -13,12 +13,12 @@
|
|||
</div>
|
||||
{{/if}}
|
||||
</div>
|
||||
<div>
|
||||
<span class="total-rows">
|
||||
<div class="inline-form">
|
||||
<label class="total-rows">
|
||||
{{#if model.totalRows}}
|
||||
{{i18n "directory.total_rows" count=model.totalRows}}
|
||||
{{/if}}
|
||||
</span>
|
||||
</label>
|
||||
{{input
|
||||
value=(readonly nameInput)
|
||||
input=(action "onUsernameFilterChanged" value="target.value")
|
||||
|
|
|
|||
|
|
@ -191,7 +191,7 @@ acceptance("Group - Authenticated", function (needs) {
|
|||
await click(".group-index-request");
|
||||
|
||||
assert.equal(
|
||||
queryAll(".modal-header").text().trim(),
|
||||
queryAll(".modal-header .title").text().trim(),
|
||||
I18n.t("groups.membership_request.title", { group_name: "Macdonald" })
|
||||
);
|
||||
|
||||
|
|
|
|||
|
|
@ -128,7 +128,10 @@ function headerHelper(header) {
|
|||
return header.attr("data-name");
|
||||
},
|
||||
label() {
|
||||
return header.text().trim();
|
||||
return header
|
||||
.text()
|
||||
.trim()
|
||||
.replace(/(^[\s\u200b]*|[\s\u200b]*$)/g, "");
|
||||
},
|
||||
icon() {
|
||||
return header.find(".d-icon");
|
||||
|
|
|
|||
|
|
@ -0,0 +1,60 @@
|
|||
import componentTest, {
|
||||
setupRenderingTest,
|
||||
} from "discourse/tests/helpers/component-test";
|
||||
|
||||
import { discourseModule, query } from "discourse/tests/helpers/qunit-helpers";
|
||||
import hbs from "htmlbars-inline-precompile";
|
||||
|
||||
discourseModule(
|
||||
"Integration | Component | consistent input/dropdown/button sizes",
|
||||
function (hooks) {
|
||||
setupRenderingTest(hooks);
|
||||
|
||||
componentTest("icon only button, icon and text button, text only button", {
|
||||
template: hbs`{{d-button icon="plus"}} {{d-button icon="plus" label="topic.create"}} {{d-button label="topic.create"}}`,
|
||||
|
||||
test(assert) {
|
||||
assert.equal(
|
||||
query(".btn:nth-child(1)").offsetHeight,
|
||||
query(".btn:nth-child(2)").offsetHeight,
|
||||
"have equal height"
|
||||
);
|
||||
assert.equal(
|
||||
query(".btn:nth-child(1)").offsetHeight,
|
||||
query(".btn:nth-child(3)").offsetHeight,
|
||||
"have equal height"
|
||||
);
|
||||
},
|
||||
// these tests fail on Firefox 78 in CI, skipping for now
|
||||
skip: !navigator.userAgent.includes("Chrome"),
|
||||
});
|
||||
|
||||
componentTest("button + text input", {
|
||||
template: hbs`{{text-field}} {{d-button icon="plus" label="topic.create"}}`,
|
||||
|
||||
test(assert) {
|
||||
assert.equal(
|
||||
query("input").offsetHeight,
|
||||
query(".btn").offsetHeight,
|
||||
"have equal height"
|
||||
);
|
||||
},
|
||||
|
||||
skip: !navigator.userAgent.includes("Chrome"),
|
||||
});
|
||||
|
||||
componentTest("combo box + input", {
|
||||
template: hbs`{{combo-box options=(hash none="category.none")}} {{text-field}}`,
|
||||
|
||||
test(assert) {
|
||||
assert.equal(
|
||||
query("input").offsetHeight,
|
||||
query(".combo-box").offsetHeight,
|
||||
"have equal height"
|
||||
);
|
||||
},
|
||||
|
||||
skip: !navigator.userAgent.includes("Chrome"),
|
||||
});
|
||||
}
|
||||
);
|
||||
|
|
@ -11,4 +11,6 @@
|
|||
{{#if selectKit.options.showCaret}}
|
||||
{{d-icon caretIcon class="caret-icon"}}
|
||||
{{/if}}
|
||||
​
|
||||
{{! Zero-width space character, so icon-only button height = regular button height }}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -414,14 +414,7 @@ $mobile-breakpoint: 700px;
|
|||
clear: both;
|
||||
padding: 4px;
|
||||
}
|
||||
@include breakpoint(tablet) {
|
||||
.select-kit.period-chooser
|
||||
.period-chooser-header
|
||||
h2.selected-name
|
||||
.top-date-string {
|
||||
font-size: $font-down-3;
|
||||
}
|
||||
}
|
||||
|
||||
.controls {
|
||||
@include clearfix;
|
||||
}
|
||||
|
|
@ -534,15 +527,18 @@ $mobile-breakpoint: 700px;
|
|||
padding: 10px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.inline-form {
|
||||
// Hacky, but fixes email preview summary
|
||||
margin-bottom: -0.5em;
|
||||
> div {
|
||||
margin-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(mobile-extra-large) {
|
||||
margin: 0 -10px;
|
||||
}
|
||||
label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
input {
|
||||
margin-right: 5px;
|
||||
margin-bottom: 0;
|
||||
@include breakpoint(tablet) {
|
||||
max-width: 150px;
|
||||
}
|
||||
|
|
@ -889,13 +885,14 @@ table#user-badges {
|
|||
margin-left: 0;
|
||||
|
||||
.emoji-details {
|
||||
@include form-item-sizing;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
min-height: 30px;
|
||||
padding: $input-padding;
|
||||
line-height: 1;
|
||||
color: var(--primary);
|
||||
border: 1px solid var(--primary-low);
|
||||
border-color: var(--primary-low);
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
||||
.emoji-name {
|
||||
margin-left: 0.5em;
|
||||
|
|
@ -985,13 +982,6 @@ table#user-badges {
|
|||
}
|
||||
}
|
||||
|
||||
// Mobile view text-inputs need some padding
|
||||
.mobile-view .admin-contents {
|
||||
input[type="text"] {
|
||||
padding: 4px;
|
||||
}
|
||||
}
|
||||
|
||||
.mobile-view .full-width {
|
||||
margin: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,25 +1,9 @@
|
|||
.admin-emojis {
|
||||
#custom_emoji {
|
||||
.select-kit {
|
||||
width: 220px;
|
||||
}
|
||||
.admin-contents.admin-emojis {
|
||||
#custom_emoji .select-kit,
|
||||
.emoji-uploader .select-kit {
|
||||
max-width: 210px;
|
||||
}
|
||||
|
||||
.emoji-uploader {
|
||||
display: flex;
|
||||
align-items: flex-end;
|
||||
|
||||
input,
|
||||
.select-kit {
|
||||
width: 220px;
|
||||
margin: 0 1em 0 0;
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
flex-direction: column;
|
||||
}
|
||||
#custom_emoji td.action {
|
||||
text-align: right;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -181,11 +181,6 @@
|
|||
.refresh-report-btn {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.d-date-time-input-range {
|
||||
flex-direction: column;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -678,23 +678,8 @@
|
|||
}
|
||||
|
||||
.permalink-form {
|
||||
align-items: flex-start;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
flex-wrap: wrap;
|
||||
@include breakpoint(tablet, min-width) {
|
||||
align-items: center;
|
||||
flex-direction: row;
|
||||
}
|
||||
|
||||
.select-kit {
|
||||
width: 200px;
|
||||
}
|
||||
input {
|
||||
margin: 5px 0;
|
||||
@include breakpoint(tablet, min-width) {
|
||||
margin: 0 5px;
|
||||
}
|
||||
max-width: 200px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -230,17 +230,8 @@
|
|||
}
|
||||
}
|
||||
|
||||
.section {
|
||||
.period-chooser .period-chooser-header {
|
||||
.selected-name,
|
||||
.d-icon {
|
||||
font-size: $font-up-1;
|
||||
}
|
||||
|
||||
.d-icon {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.period-chooser .period-chooser-header {
|
||||
font-size: var(--font-down-2);
|
||||
}
|
||||
|
||||
.dashboard-problems {
|
||||
|
|
|
|||
|
|
@ -76,21 +76,9 @@
|
|||
padding: 0.25em 0;
|
||||
}
|
||||
|
||||
.email-preview {
|
||||
.digest-refresh-button {
|
||||
margin: 0 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
.email-preview-digest {
|
||||
.controls {
|
||||
margin: 1em 0.5em;
|
||||
input[type="text"] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
label {
|
||||
display: inline;
|
||||
}
|
||||
}
|
||||
.preview-output iframe {
|
||||
width: 100%;
|
||||
|
|
|
|||
|
|
@ -151,37 +151,14 @@
|
|||
}
|
||||
button {
|
||||
margin-left: auto;
|
||||
display: flex;
|
||||
}
|
||||
margin: 0 0 1em 0;
|
||||
a.filter {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0.25em;
|
||||
background-color: var(--primary-low);
|
||||
padding: 3px 10px;
|
||||
color: var(--primary);
|
||||
&:hover {
|
||||
color: var(--primary);
|
||||
background-color: var(--primary-low);
|
||||
}
|
||||
.label {
|
||||
font-weight: bold;
|
||||
}
|
||||
.d-icon {
|
||||
margin-left: 6px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.admin-logs-table {
|
||||
input.ember-text-field {
|
||||
padding: 1px 4px;
|
||||
}
|
||||
.btn {
|
||||
padding: 2px 8px;
|
||||
.fa {
|
||||
margin-right: 2px;
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -190,43 +167,19 @@
|
|||
display: block;
|
||||
}
|
||||
|
||||
.screened-ip-address-form {
|
||||
margin-left: 6px;
|
||||
.combobox {
|
||||
width: 130px;
|
||||
}
|
||||
}
|
||||
|
||||
.screened-ip-controls {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
input {
|
||||
flex: 1 1 auto;
|
||||
margin: 0 0.25em 0.25em;
|
||||
}
|
||||
b {
|
||||
margin: 0 0.25em;
|
||||
}
|
||||
.select-kit {
|
||||
margin: 0 0.25em 0.25em 0.25em;
|
||||
flex: 1 1 auto;
|
||||
}
|
||||
.filter-screened-ip-address,
|
||||
.screened-ip-address-form {
|
||||
margin: 0 -0.25em 1em;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
}
|
||||
@media screen and (min-width: 800px) {
|
||||
.screened-ip-address-form {
|
||||
.combobox {
|
||||
width: 140px;
|
||||
}
|
||||
@media screen and (min-width: 900px) {
|
||||
margin-left: auto;
|
||||
}
|
||||
}
|
||||
button {
|
||||
display: flex;
|
||||
white-space: nowrap;
|
||||
margin: 0 0.25em 0.25em;
|
||||
@media screen and (max-width: 899px) {
|
||||
margin-top: 1em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -238,17 +191,10 @@ table.screened-ip-addresses {
|
|||
width: 80%;
|
||||
}
|
||||
}
|
||||
td.action {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
.d-icon-check {
|
||||
color: var(--success);
|
||||
}
|
||||
.d-icon-ban {
|
||||
color: var(--danger);
|
||||
}
|
||||
.d-icon {
|
||||
margin-right: 0.25em;
|
||||
td.actions {
|
||||
text-align: right;
|
||||
.cancel-action {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -16,12 +16,6 @@
|
|||
margin-bottom: 0.5em;
|
||||
}
|
||||
|
||||
.textarea,
|
||||
input[type="text"] {
|
||||
box-sizing: border-box;
|
||||
height: 2.5em;
|
||||
}
|
||||
|
||||
.inline-spinner {
|
||||
float: right;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -5,10 +5,6 @@
|
|||
&:not(:first-child) {
|
||||
margin-left: 0.5em;
|
||||
}
|
||||
.d-button-label {
|
||||
font-size: $font-up-1;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
.notifications-button {
|
||||
|
|
@ -61,7 +57,8 @@
|
|||
#navigation-bar {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
margin: 0 0 var(--nav-space);
|
||||
margin: 0;
|
||||
margin-bottom: var(--nav-space);
|
||||
margin-right: auto;
|
||||
}
|
||||
|
||||
|
|
@ -72,17 +69,6 @@
|
|||
> * {
|
||||
white-space: nowrap;
|
||||
}
|
||||
.select-kit button {
|
||||
height: 100%; // ensures nested select-kit button matches height of button siblings
|
||||
}
|
||||
.btn {
|
||||
// need to reduce vertical padding for consistent height
|
||||
padding-top: 0.3em;
|
||||
padding-bottom: 0.3em;
|
||||
@include breakpoint(mobile-medium) {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
@include breakpoint(mobile-large) {
|
||||
.edit-category {
|
||||
.d-button-label {
|
||||
|
|
|
|||
|
|
@ -13,11 +13,14 @@
|
|||
|
||||
.colorpicker-wrapper {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input,
|
||||
align-items: flex-start;
|
||||
.add-on {
|
||||
align-self: flex-start;
|
||||
margin-bottom: 0.125em;
|
||||
@include form-item-sizing;
|
||||
background-color: var(--primary-low);
|
||||
border-color: var(--primary-medium);
|
||||
border-right-color: transparent;
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -470,12 +470,6 @@ div.ac-wrap {
|
|||
}
|
||||
}
|
||||
|
||||
.future-date-input {
|
||||
.examples {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
}
|
||||
|
||||
.md-table {
|
||||
overflow-y: auto;
|
||||
margin: 1em 0;
|
||||
|
|
|
|||
|
|
@ -11,20 +11,7 @@
|
|||
overflow-x: auto;
|
||||
}
|
||||
|
||||
.open-edit-columns-btn {
|
||||
vertical-align: top;
|
||||
padding: 0.45em 0.8em;
|
||||
}
|
||||
|
||||
&.users-directory {
|
||||
.period-chooser {
|
||||
.selected-name {
|
||||
margin: 0;
|
||||
}
|
||||
.period-chooser-header .caret-icon {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
.directory-group-selector {
|
||||
vertical-align: top;
|
||||
}
|
||||
|
|
@ -43,9 +30,7 @@
|
|||
justify-content: space-between;
|
||||
.total-rows {
|
||||
color: var(--primary-medium);
|
||||
}
|
||||
.filter-name {
|
||||
height: 1em;
|
||||
font-weight: normal;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -213,74 +213,50 @@ input {
|
|||
&[type="tel"],
|
||||
&[type="color"] {
|
||||
@include appearance-none;
|
||||
@include form-item-sizing;
|
||||
display: inline-block;
|
||||
padding: $input-padding;
|
||||
margin-bottom: 9px;
|
||||
font-size: $font-0;
|
||||
line-height: $line-height-small;
|
||||
color: var(--primary);
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
border-radius: 0;
|
||||
box-sizing: border-box;
|
||||
min-height: 30px;
|
||||
&:focus {
|
||||
@include default-focus;
|
||||
}
|
||||
}
|
||||
|
||||
&[type="time"] {
|
||||
max-width: 140px;
|
||||
}
|
||||
}
|
||||
|
||||
// Fixes Safari height inconsistency
|
||||
::-webkit-datetime-edit {
|
||||
display: inline;
|
||||
}
|
||||
|
||||
// Fixes Webkit inconsistencies (Safari/Chrome)
|
||||
::-webkit-datetime-edit-fields-wrapper,
|
||||
::-webkit-datetime-edit-text,
|
||||
::-webkit-datetime-edit-month-field,
|
||||
::-webkit-datetime-edit-day-field,
|
||||
::-webkit-datetime-edit-year-field {
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
}
|
||||
|
||||
// Fixes Chrome height inconsistency
|
||||
::-webkit-calendar-picker-indicator {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
::placeholder {
|
||||
text-overflow: ellipsis;
|
||||
}
|
||||
|
||||
.input {
|
||||
&-prepend,
|
||||
&-append {
|
||||
margin-bottom: 5px;
|
||||
input[class*="span"] {
|
||||
display: inline-block;
|
||||
}
|
||||
input,
|
||||
select {
|
||||
position: relative;
|
||||
margin-bottom: 0;
|
||||
vertical-align: middle;
|
||||
border-radius: 0;
|
||||
&:focus {
|
||||
z-index: z("base") + 1;
|
||||
}
|
||||
}
|
||||
.add-on {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
width: auto;
|
||||
padding: 0 0.5em;
|
||||
height: 28px;
|
||||
background-color: var(--primary-low);
|
||||
border: 1px solid var(--primary-medium);
|
||||
}
|
||||
.add-on,
|
||||
.btn {
|
||||
&:first-child {
|
||||
margin-right: -1px;
|
||||
}
|
||||
&:last-child {
|
||||
margin-left: -1px;
|
||||
border-radius: 0 3px 3px 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
&-prepend {
|
||||
.add-on,
|
||||
.btn {
|
||||
margin-right: -1px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
textarea {
|
||||
padding: $vpad $hpad;
|
||||
box-sizing: border-box;
|
||||
height: auto;
|
||||
background-color: var(--secondary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
|
|
@ -643,9 +619,7 @@ table {
|
|||
.form-vertical {
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
select {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
flex: 0 0 auto;
|
||||
|
|
|
|||
|
|
@ -41,29 +41,6 @@
|
|||
.btn.pull-right {
|
||||
margin-right: 10px;
|
||||
}
|
||||
.future-date-input {
|
||||
input {
|
||||
margin: 0;
|
||||
}
|
||||
.alert-info {
|
||||
margin: 0 -15px -15px -15px;
|
||||
}
|
||||
.btn-clear {
|
||||
display: none;
|
||||
}
|
||||
.topic-timer-info {
|
||||
border: none;
|
||||
padding: 0;
|
||||
h3 {
|
||||
font-weight: normal;
|
||||
font-size: $font-up-1;
|
||||
}
|
||||
}
|
||||
|
||||
input[disabled] {
|
||||
background: var(--primary-low);
|
||||
}
|
||||
}
|
||||
.pika-single {
|
||||
position: absolute !important; /* inline JS styles */
|
||||
}
|
||||
|
|
@ -74,10 +51,3 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
// mobile styles
|
||||
.mobile-view .edit-topic-timer-modal {
|
||||
.select-kit.combo-box {
|
||||
flex: 1 0 0px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -121,18 +121,6 @@
|
|||
.category-chooser {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.d-date-time-input-range {
|
||||
width: inherit;
|
||||
border: none;
|
||||
padding: 0;
|
||||
flex-direction: column;
|
||||
|
||||
.d-date-input {
|
||||
flex: 1 1 auto;
|
||||
border: 1px solid var(--primary-medium);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -129,10 +129,6 @@
|
|||
.select-kit.multi-select .choices {
|
||||
padding: 0;
|
||||
}
|
||||
|
||||
.select-kit.multi-select.is-expanded + button {
|
||||
outline: 1px solid var(--tertiary); // outline the button when the input is outlined, to match height
|
||||
}
|
||||
}
|
||||
|
||||
// topic invite modal
|
||||
|
|
@ -140,11 +136,6 @@
|
|||
.create-invite-modal {
|
||||
form {
|
||||
margin: 0;
|
||||
input[type="text"],
|
||||
.btn,
|
||||
.select-kit-header {
|
||||
height: 2.27rem;
|
||||
}
|
||||
}
|
||||
|
||||
input {
|
||||
|
|
@ -181,33 +172,6 @@
|
|||
margin-top: 0.25em;
|
||||
}
|
||||
|
||||
.future-date-input {
|
||||
display: grid;
|
||||
grid-template-columns: auto 1fr;
|
||||
|
||||
.control-group:nth-child(1) {
|
||||
grid-column-start: 1;
|
||||
grid-column-end: 3;
|
||||
}
|
||||
.control-group:nth-child(2) {
|
||||
margin-left: 1.75em;
|
||||
margin-right: 1.5em;
|
||||
}
|
||||
.control-group:nth-child(2),
|
||||
.control-group:nth-child(3) {
|
||||
grid-row-start: 2;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
margin-bottom: 0;
|
||||
input {
|
||||
height: 100%;
|
||||
margin-bottom: 0;
|
||||
margin-left: 0.5em;
|
||||
width: 150px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.input-group.input-email {
|
||||
display: flex;
|
||||
align-items: baseline;
|
||||
|
|
@ -242,7 +206,9 @@
|
|||
&.invite-to-topic input[type="text"],
|
||||
.group-chooser,
|
||||
.user-chooser,
|
||||
.future-date-input-selector {
|
||||
.future-date-input-selector,
|
||||
.future-date-input-date-picker,
|
||||
.future-date-input-time-picker {
|
||||
margin-left: 1.75em;
|
||||
width: calc(100% - 1.75em);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -6,22 +6,6 @@ $mobile-breakpoint: 700px;
|
|||
}
|
||||
}
|
||||
|
||||
.bookmark-search-form {
|
||||
margin-bottom: 1em;
|
||||
display: flex;
|
||||
|
||||
input[type="text"] {
|
||||
flex: 1;
|
||||
margin-right: 1em;
|
||||
}
|
||||
|
||||
@media (max-width: $mobile-breakpoint) {
|
||||
input[type="text"] {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.bookmark-list-item {
|
||||
td.post-metadata {
|
||||
text-align: center;
|
||||
|
|
|
|||
|
|
@ -13,16 +13,12 @@
|
|||
$hover-bg-color: var(--primary-medium),
|
||||
$hover-icon-color: var(--primary-low)
|
||||
) {
|
||||
box-sizing: border-box;
|
||||
@include form-item-sizing;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0;
|
||||
padding: 0.53em 0.8em;
|
||||
border: none;
|
||||
font-weight: normal;
|
||||
font-size: $font-0;
|
||||
line-height: normal;
|
||||
color: $text-color;
|
||||
background: $bg-color;
|
||||
cursor: pointer;
|
||||
|
|
@ -35,7 +31,6 @@
|
|||
&.no-text {
|
||||
.d-icon {
|
||||
margin-right: 0;
|
||||
min-height: 17px;
|
||||
}
|
||||
}
|
||||
@include hover {
|
||||
|
|
@ -59,6 +54,7 @@
|
|||
&:active,
|
||||
&.btn-active {
|
||||
@include linear-gradient($hover-bg-color 0%, $bg-color 100%);
|
||||
border-bottom-color: $bg-color;
|
||||
}
|
||||
&[disabled],
|
||||
&.disabled {
|
||||
|
|
@ -253,20 +249,14 @@
|
|||
// Small
|
||||
|
||||
.btn-small {
|
||||
padding: 6px;
|
||||
font-size: $font-down-1;
|
||||
font-size: var(--font-down-1);
|
||||
min-height: 20px;
|
||||
.d-icon {
|
||||
max-height: 0.87em;
|
||||
}
|
||||
}
|
||||
|
||||
// Large
|
||||
|
||||
.btn-large {
|
||||
padding: 9px 18px;
|
||||
font-size: $font-up-1;
|
||||
line-height: $line-height-small;
|
||||
font-size: var(--font-up-1);
|
||||
}
|
||||
|
||||
// Bonus Buttons
|
||||
|
|
@ -287,9 +277,8 @@
|
|||
}
|
||||
&.close {
|
||||
padding: 0;
|
||||
min-height: unset;
|
||||
background: transparent;
|
||||
font-size: $font-up-3;
|
||||
font-size: var(--font-up-3);
|
||||
.d-icon {
|
||||
color: var(--primary-high);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -3,7 +3,7 @@
|
|||
cursor: pointer;
|
||||
flex-direction: column;
|
||||
min-width: 140px;
|
||||
flex: 1 0 100%;
|
||||
flex: 1 0 auto;
|
||||
|
||||
.date-picker {
|
||||
cursor: pointer;
|
||||
|
|
|
|||
|
|
@ -12,10 +12,9 @@
|
|||
display: inline-block;
|
||||
}
|
||||
|
||||
.date-picker {
|
||||
text-align: center;
|
||||
width: 8em;
|
||||
input.date-picker {
|
||||
margin: 0;
|
||||
max-width: 180px;
|
||||
}
|
||||
|
||||
.pika-single {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
.d-date-time-input-range {
|
||||
border: 1px solid var(--primary-low);
|
||||
display: inline-flex;
|
||||
box-sizing: border-box;
|
||||
.from {
|
||||
margin-bottom: 0.5em;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,11 +1,11 @@
|
|||
.d-date-time-input {
|
||||
display: flex;
|
||||
border: 1px solid var(--primary-low);
|
||||
border: 1px solid var(--primary-medium);
|
||||
box-sizing: border-box;
|
||||
position: relative;
|
||||
|
||||
.date-picker,
|
||||
.fields {
|
||||
.date-picker {
|
||||
max-width: unset;
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
|
|
@ -15,10 +15,10 @@
|
|||
}
|
||||
|
||||
.d-time-input {
|
||||
.combo-box {
|
||||
.select-kit-header {
|
||||
border-color: transparent;
|
||||
}
|
||||
width: 90px;
|
||||
.select-kit-header {
|
||||
border-color: transparent;
|
||||
width: 90px;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -11,25 +11,12 @@
|
|||
|
||||
.ignored-user-list-item {
|
||||
border: 1px solid var(--primary-medium);
|
||||
border-radius: 5px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
.remove-ignored-user {
|
||||
display: flex;
|
||||
flex: 1 0 0px;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
box-sizing: border-box;
|
||||
border-radius: 0 0.25em 0.25em 0;
|
||||
padding-top: 0;
|
||||
padding-bottom: 0;
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.ignored-user-name {
|
||||
padding-left: 10px;
|
||||
padding-right: 10px;
|
||||
|
|
|
|||
|
|
@ -18,16 +18,11 @@
|
|||
.tap-tile-time-input {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
input {
|
||||
width: 100%;
|
||||
min-width: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.date-picker,
|
||||
.time-input {
|
||||
text-align: left;
|
||||
padding-top: 5px;
|
||||
}
|
||||
|
||||
.time-input,
|
||||
|
|
|
|||
|
|
@ -281,16 +281,6 @@
|
|||
margin: 0;
|
||||
}
|
||||
|
||||
button {
|
||||
background: pink;
|
||||
}
|
||||
|
||||
.select-kit {
|
||||
.select-kit-header {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
|
||||
.d-editor-spacer {
|
||||
margin: 0 0.25em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -154,3 +154,31 @@ input[type="reset"],
|
|||
input[type="submit"] {
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
// Inline form
|
||||
// --------------------------------------------------
|
||||
|
||||
.inline-form {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
flex-wrap: wrap;
|
||||
&.full-width {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
> input[type="text"] {
|
||||
display: inline-flex;
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
> .select-kit,
|
||||
> input[type="text"],
|
||||
> label,
|
||||
> .btn {
|
||||
margin-bottom: 0.5em; // for when items wrap (mobile, narrow windows)
|
||||
margin-right: 0.5em;
|
||||
&:last-child {
|
||||
margin-right: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -75,6 +75,23 @@ $breakpoints: (
|
|||
//
|
||||
// --------------------------------------------------
|
||||
|
||||
$vpad: 0.5em;
|
||||
$hpad: 0.65em;
|
||||
|
||||
// for consistent sizing across inputs, buttons and dropdowns
|
||||
@mixin form-item-sizing {
|
||||
border: 1px solid transparent;
|
||||
font-size: var(--font-0);
|
||||
line-height: normal;
|
||||
box-sizing: border-box;
|
||||
padding: $vpad $hpad;
|
||||
.ios-device & {
|
||||
font-size: var(--font-size-ios-input);
|
||||
padding-top: $vpad * 0.8;
|
||||
padding-bottom: $vpad * 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
@mixin sticky {
|
||||
position: -webkit-sticky;
|
||||
position: sticky;
|
||||
|
|
|
|||
|
|
@ -9,7 +9,6 @@ $small-width: 800px !default;
|
|||
$medium-width: 995px !default;
|
||||
$large-width: 1110px !default;
|
||||
|
||||
$input-padding: 4px 10px;
|
||||
$topic-body-width: 690px;
|
||||
$topic-body-width-padding: 11px;
|
||||
$topic-avatar-width: 45px;
|
||||
|
|
@ -65,8 +64,6 @@ $font-down-4: var(--font-down-4) !default;
|
|||
$font-down-5: var(--font-down-5) !default;
|
||||
$font-down-6: var(--font-down-6) !default;
|
||||
|
||||
$font-size-ios-input: var(--font-size-ios-input) !default;
|
||||
|
||||
// Common line-heights
|
||||
$line-height-small: var(--line-height-small) !default;
|
||||
$line-height-medium: var(--line-height-medium) !default;
|
||||
|
|
|
|||
|
|
@ -27,10 +27,7 @@
|
|||
|
||||
.select-kit-header {
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
padding: 0 0.25em 0 0.5em;
|
||||
font-weight: 500;
|
||||
font-size: $font-0;
|
||||
border-color: var(--primary-medium);
|
||||
|
||||
&.is-focused {
|
||||
@include default-focus;
|
||||
|
|
|
|||
|
|
@ -68,16 +68,10 @@
|
|||
}
|
||||
|
||||
.select-kit-header {
|
||||
box-sizing: border-box;
|
||||
border: 1px solid transparent;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
flex-direction: row;
|
||||
display: inline-flex;
|
||||
|
||||
.select-kit-header-wrapper {
|
||||
min-height: unset;
|
||||
}
|
||||
|
||||
.d-icon + .d-icon {
|
||||
margin-left: 0.25em;
|
||||
|
|
|
|||
|
|
@ -36,3 +36,15 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.future-date-input {
|
||||
.future-date-input-date-picker,
|
||||
.future-date-input-time-picker {
|
||||
margin-top: 0.5em;
|
||||
margin-bottom: 0;
|
||||
input {
|
||||
margin-bottom: 0;
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -49,12 +49,7 @@
|
|||
|
||||
.multi-select-header {
|
||||
background: var(--secondary);
|
||||
border: 1px solid var(--primary-medium);
|
||||
padding: 0 0.25em 0 0.5em;
|
||||
font-weight: 500;
|
||||
font-size: var(--font-0);
|
||||
box-sizing: border-box;
|
||||
overflow: hidden;
|
||||
border-color: var(--primary-medium);
|
||||
|
||||
.formated-selection {
|
||||
margin: 0;
|
||||
|
|
|
|||
|
|
@ -10,21 +10,13 @@
|
|||
|
||||
.period-chooser-header {
|
||||
display: inline-block; // safari 14 has issues with summary elements and flexbox
|
||||
background: none;
|
||||
border: none;
|
||||
width: auto;
|
||||
height: auto;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
padding: 0;
|
||||
|
||||
h2.selected-name {
|
||||
color: var(--secondary);
|
||||
display: inline-block;
|
||||
box-sizing: border-box;
|
||||
|
||||
// for text + caret alignment
|
||||
line-height: 1;
|
||||
vertical-align: bottom;
|
||||
margin-bottom: 10px;
|
||||
|
||||
.date-section {
|
||||
color: var(--primary);
|
||||
|
|
@ -42,14 +34,14 @@
|
|||
.d-icon {
|
||||
color: var(--primary);
|
||||
opacity: 1;
|
||||
margin: 5px 0 10px 5px;
|
||||
font-size: $font-up-3;
|
||||
}
|
||||
|
||||
&.is-focused,
|
||||
&:focus,
|
||||
&:hover {
|
||||
background: none;
|
||||
border: none;
|
||||
background: transparent;
|
||||
border-color: transparent;
|
||||
outline: none;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -65,12 +65,17 @@
|
|||
}
|
||||
|
||||
.select-kit-header {
|
||||
box-sizing: border-box;
|
||||
@include form-item-sizing;
|
||||
font-weight: 500;
|
||||
overflow: hidden;
|
||||
transition: all 0.25s;
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
&:not(.btn) {
|
||||
padding-left: 0.5em;
|
||||
padding-right: 0.5em;
|
||||
}
|
||||
|
||||
/* hide native indicator */
|
||||
&::-webkit-details-marker {
|
||||
|
|
@ -79,12 +84,9 @@
|
|||
|
||||
.select-kit-header-wrapper {
|
||||
box-sizing: border-box;
|
||||
min-height: 28px;
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
align-items: center;
|
||||
height: 100%;
|
||||
max-width: 100%;
|
||||
}
|
||||
|
||||
.d-icon-spinner {
|
||||
|
|
|
|||
|
|
@ -60,7 +60,6 @@ textarea {
|
|||
select,
|
||||
textarea {
|
||||
display: inline-block;
|
||||
padding: 4px;
|
||||
margin-bottom: 9px;
|
||||
font-size: $font-0;
|
||||
line-height: $line-height-large;
|
||||
|
|
@ -129,9 +128,7 @@ input {
|
|||
|
||||
input,
|
||||
textarea,
|
||||
select,
|
||||
.input-prepend,
|
||||
.input-append {
|
||||
select {
|
||||
display: inline-block;
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,6 +1,5 @@
|
|||
@import "admin_badges";
|
||||
@import "admin_customize";
|
||||
@import "admin_emojis";
|
||||
@import "admin_report_counters";
|
||||
@import "admin_report_table";
|
||||
@import "admin_report";
|
||||
|
|
|
|||
|
|
@ -1,35 +0,0 @@
|
|||
.admin-emojis {
|
||||
#custom_emoji {
|
||||
.select-kit {
|
||||
display: none;
|
||||
}
|
||||
|
||||
tbody tr th {
|
||||
@include ellipsis;
|
||||
|
||||
&:nth-child(2) {
|
||||
max-width: 80px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.emoji-uploader {
|
||||
flex-direction: column;
|
||||
align-items: flex-start;
|
||||
justify-content: center;
|
||||
|
||||
.control {
|
||||
margin-bottom: 1em;
|
||||
width: 100%;
|
||||
|
||||
input,
|
||||
.select-kit {
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
|
||||
.upload-container {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -200,6 +200,16 @@
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.formated-selection {
|
||||
font-size: var(--font-down-1);
|
||||
}
|
||||
}
|
||||
|
||||
.without-tags {
|
||||
.category-input {
|
||||
margin-left: 5px;
|
||||
}
|
||||
}
|
||||
|
||||
.user-selector {
|
||||
|
|
|
|||
|
|
@ -12,29 +12,10 @@ body {
|
|||
.ios-device {
|
||||
textarea {
|
||||
background-color: var(--secondary);
|
||||
font-size: $font-size-ios-input;
|
||||
font-size: var(--font-size-ios-input);
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
||||
input {
|
||||
&[type="text"],
|
||||
&[type="password"],
|
||||
&[type="datetime"],
|
||||
&[type="datetime-local"],
|
||||
&[type="date"],
|
||||
&[type="month"],
|
||||
&[type="time"],
|
||||
&[type="week"],
|
||||
&[type="number"],
|
||||
&[type="email"],
|
||||
&[type="url"],
|
||||
&[type="search"],
|
||||
&[type="tel"],
|
||||
&[type="color"] {
|
||||
font-size: $font-size-ios-input;
|
||||
}
|
||||
}
|
||||
|
||||
input#reply-title {
|
||||
-webkit-tap-highlight-color: transparent;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -20,16 +20,9 @@
|
|||
.multi-select,
|
||||
.select-kit-header,
|
||||
.date-picker-wrapper {
|
||||
height: 34px;
|
||||
margin: 0;
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
button {
|
||||
height: 34px;
|
||||
margin-left: 5px;
|
||||
}
|
||||
|
||||
.date-picker-wrapper {
|
||||
margin-right: 5px;
|
||||
}
|
||||
|
|
@ -94,22 +87,6 @@
|
|||
}
|
||||
}
|
||||
|
||||
.d-date-time-input {
|
||||
border: 1px solid var(--primary-medium);
|
||||
justify-content: space-between;
|
||||
width: 100%;
|
||||
|
||||
.d-date-input {
|
||||
flex: auto;
|
||||
}
|
||||
|
||||
.d-time-input {
|
||||
.select-kit-header {
|
||||
min-width: 120px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.tip {
|
||||
display: block;
|
||||
font-size: $font-down-1;
|
||||
|
|
|
|||
|
|
@ -186,9 +186,3 @@ body.crawler {
|
|||
}
|
||||
}
|
||||
}
|
||||
|
||||
.poll-ui-builder {
|
||||
.poll-date input {
|
||||
height: 30px;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -208,6 +208,7 @@ export function createData(store) {
|
|||
buttonSizes: [
|
||||
{ class: "btn-large", text: "large" },
|
||||
{ class: "btn-default", text: "default" },
|
||||
{ class: "btn-small", text: "small" },
|
||||
],
|
||||
|
||||
buttonStates: [
|
||||
|
|
|
|||
|
|
@ -1,4 +1,4 @@
|
|||
{{#styleguide-example title=".btn-icon - sizes"}}
|
||||
{{#styleguide-example title=".btn-icon - sizes (large, default, small)"}}
|
||||
{{#each dummy.buttonSizes as |bs|}}
|
||||
{{d-button icon="times" translatedTitle=bs.text class=bs.class disabled=bs.disabled}}
|
||||
{{/each}}
|
||||
|
|
@ -10,7 +10,7 @@
|
|||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title=".btn-text - sizes"}}
|
||||
{{#styleguide-example title=".btn-text - sizes (large, default, small)"}}
|
||||
{{#each dummy.buttonSizes as |bs|}}
|
||||
{{d-button translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
|
||||
{{/each}}
|
||||
|
|
@ -22,7 +22,7 @@
|
|||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title=".btn-default .btn-icon-text - sizes"}}
|
||||
{{#styleguide-example title=".btn-default .btn-icon-text - sizes (large, default, small)"}}
|
||||
{{#each dummy.buttonSizes as |bs|}}
|
||||
{{d-button icon="plus" translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
|
||||
{{/each}}
|
||||
|
|
@ -34,7 +34,7 @@
|
|||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title=".btn-primary .btn-icon-text"}}
|
||||
{{#styleguide-example title=".btn-primary .btn-icon-text - sizes (large, default, small)"}}
|
||||
{{#each dummy.buttonSizes as |bs|}}
|
||||
{{d-button
|
||||
class=(concat "btn-primary " bs.class)
|
||||
|
|
@ -56,7 +56,7 @@
|
|||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title=".btn-danger .btn-icon-text - sizes"}}
|
||||
{{#styleguide-example title=".btn-danger .btn-icon-text - sizes (large, default, small)"}}
|
||||
{{#each dummy.buttonSizes as |bs|}}
|
||||
{{d-button
|
||||
class=(concat "btn-danger " bs.class)
|
||||
|
|
@ -78,7 +78,7 @@
|
|||
{{/each}}
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title=".btn-flat - sizes"}}
|
||||
{{#styleguide-example title=".btn-flat - sizes (large, default, small)"}}
|
||||
{{#each dummy.buttonSizes as |bs|}}
|
||||
{{flat-button icon="trash-alt" disabled=bs.disabled translatedTitle=bs.title}}
|
||||
{{/each}}
|
||||
|
|
|
|||
|
|
@ -6,10 +6,65 @@
|
|||
{{password-field type="password" placeholder="Placeholder"}}
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="text-field search"}}
|
||||
{{text-field type="search" placeholder="Placeholder"}}
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="textarea"}}
|
||||
{{textarea placeholder="Placeholder"}}
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="inline-form"}}
|
||||
<div class="inline-form">
|
||||
{{text-field placeholder="Placeholder"}}
|
||||
{{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="inline-form with icon button"}}
|
||||
<div class="inline-form">
|
||||
{{text-field placeholder="Placeholder"}}
|
||||
{{d-button class="btn-primary" icon="search" type="submit"}}
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="full-width inline-form with single input"}}
|
||||
<div class="inline-form full-width">
|
||||
{{text-field placeholder="Placeholder"}}
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="full-width inline-form with input and icon button"}}
|
||||
<div class="inline-form full-width">
|
||||
{{text-field placeholder="Placeholder"}}
|
||||
{{d-button class="btn-primary" icon="search" type="submit"}}
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="inline-form with combo-box" initialValue=dummy.options.[0].name as |value|}}
|
||||
<div class="inline-form">
|
||||
{{text-field placeholder="Placeholder"}}
|
||||
{{combo-box content=dummy.options value=value onChange=(fn (mut value))}}
|
||||
{{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="inline-form with multi-select"}}
|
||||
<div class="inline-form">
|
||||
{{text-field}}
|
||||
{{multi-select content=dummy.options onChange=(action "dummy")}}
|
||||
{{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="inline-form with multi-select and label"}}
|
||||
<div class="inline-form">
|
||||
<label>Text:</label>
|
||||
{{text-field}}
|
||||
{{multi-select content=dummy.options onChange=(action "dummy")}}
|
||||
{{d-button class="btn-primary" icon="search" type="submit" translatedLabel="Submit"}}
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="category-notifications-button and regular button"}}
|
||||
<div class="inline-form">
|
||||
{{category-notifications-button category=dummy.categories.[0] value=1 onChange=(action "dummy")}}
|
||||
{{d-button icon="reply" type="submit" translatedLabel="Button"}}
|
||||
</div>
|
||||
{{/styleguide-example}}
|
||||
|
|
|
|||
|
|
@ -7,9 +7,27 @@
|
|||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="date-time-input"}}
|
||||
{{date-time-input}}
|
||||
{{date-time-input clearable=true}}
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="date-time-input-range"}}
|
||||
{{date-time-input-range}}
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="date-time-input-range"}}
|
||||
{{date-time-input-range showFromTime=false showToTime=false}}
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="future-date-input"}}
|
||||
{{future-date-input
|
||||
displayLabelIcon="far-clock"
|
||||
includeDateTime=true
|
||||
includeMidFuture=true
|
||||
clearable=true
|
||||
}}
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="date-picker"}}
|
||||
{{date-picker defaultDate="YYYY-MM-DD"}}
|
||||
{{/styleguide-example}}
|
||||
|
||||
|
|
|
|||
|
|
@ -47,7 +47,7 @@
|
|||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="dropdown-select-box"}}
|
||||
{{dropdown-select-box content=dummy.options onChange=(action "dummy")}}
|
||||
{{dropdown-select-box content=dummy.options title="Something" onChange=(action "dummy")}}
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="future-date-input-selector"}}
|
||||
|
|
@ -61,7 +61,7 @@
|
|||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="multi-select"}}
|
||||
{{multi-select content=dummy.options options=(hash none="test.none") onChange=(action "dummy")}}
|
||||
{{multi-select content=dummy.options onChange=(action "dummy")}}
|
||||
{{/styleguide-example}}
|
||||
|
||||
{{#styleguide-example title="admin group-chooser"}}
|
||||
|
|
|
|||
|
|
@ -4,8 +4,10 @@
|
|||
{{#d-section class="navigation-container"}}
|
||||
{{bread-crumbs categories=dummy.categories}}
|
||||
{{navigation-bar navItems=dummy.navItems filterMode="latest"}}
|
||||
{{categories-admin-dropdown}}
|
||||
{{create-topic-button canCreateTopic=true}}
|
||||
<div class="navigation-controls">
|
||||
{{categories-admin-dropdown}}
|
||||
{{create-topic-button canCreateTopic=true}}
|
||||
</div>
|
||||
{{/d-section}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -42,7 +42,6 @@
|
|||
|
||||
.styleguide-contents {
|
||||
flex: 4 0 0;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.styleguide-section {
|
||||
|
|
@ -67,7 +66,7 @@
|
|||
.styleguide-example {
|
||||
.example-title {
|
||||
color: var(--primary-medium);
|
||||
font-size: var(--font-0);
|
||||
font-size: var(--font-down-1);
|
||||
border-bottom: 1px solid var(--primary-low);
|
||||
margin-bottom: 1em;
|
||||
}
|
||||
|
|
|
|||
Loading…
Reference in New Issue