Discource-C
/
discourse
mirror of https://github.com/discourse/discourse.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

UX: Normalize sizing for inputs, buttons, dropdowns (#14226) 

See PR for details
This commit is contained in:
Penar Musaraj 2021-09-09 11:01:56 -04:00 committed by GitHub
parent 76f0cf10e6
commit 24e71acf3f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
69 changed files with 490 additions and 690 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/admin/addon/components/screened-ip-address-form.js
View File

@ -17,7 +17,7 @@ import { schedule } from "@ember/runloop";
**/ **/
export default Component.extend({ export default Component.extend({
classNames: ["screened-ip-address-form"], classNames: ["screened-ip-address-form", "inline-form"],
formSubmitted: false, formSubmitted: false,
actionName: "block", actionName: "block",

57
app/assets/javascripts/admin/addon/templates/components/permalink-form.hbs
View File

@ -1,30 +1,35 @@
<b>{{i18n "admin.permalink.form.label"}}</b> <div class="inline-form">
<label>{{i18n "admin.permalink.form.label"}}</label>
{{text-field {{text-field
value=url value=url
disabled=formSubmitted disabled=formSubmitted
class="permalink-url" class="permalink-url"
placeholderKey="admin.permalink.url" placeholderKey="admin.permalink.url"
autocorrect="off" autocorrect="off"
autocapitalize="off"}} autocapitalize="off"
}}
{{combo-box {{combo-box
content=permalinkTypes content=permalinkTypes
value=permalinkType value=permalinkType
onChange=(action (mut permalinkType)) onChange=(action (mut permalinkType))
class="permalink-type" class="permalink-type"
}} }}
{{text-field {{text-field
value=permalink_type_value value=permalink_type_value
disabled=formSubmitted disabled=formSubmitted
class="external-url" class="external-url"
placeholderKey=permalinkTypePlaceholder placeholderKey=permalinkTypePlaceholder
autocorrect="off" autocorrect="off"
autocapitalize="off"}} autocapitalize="off"
}}
{{d-button {{d-button
class="btn-default" class="btn-default"
action=(action "submit") action=(action "submit")
disabled=formSubmitted disabled=formSubmitted
label="admin.permalink.form.add"}} label="admin.permalink.form.add"
}}
</div>

2
app/assets/javascripts/admin/addon/templates/components/screened-ip-address-form.hbs
View File

@ -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"}} {{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 {{combo-box

33
app/assets/javascripts/admin/addon/templates/email-index.hbs
View File

@ -16,21 +16,24 @@
<form> <form>
<div class="admin-controls"> <div class="admin-controls">
{{#if sendingEmail}} <div class="controls">
<div class="controls">{{i18n "admin.email.sending_test"}}</div> <div class="inline-form">
{{else}} {{#if sendingEmail}}
<div class="controls"> {{i18n "admin.email.sending_test"}}
{{text-field value=testEmailAddress placeholderKey="admin.email.test_email_address"}} {{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>
<div class="controls"> </div>
{{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> </form>

83
app/assets/javascripts/admin/addon/templates/email-preview-digest.hbs
View File

@ -2,32 +2,35 @@
<div class="admin-controls email-preview"> <div class="admin-controls email-preview">
<div class="controls"> <div class="controls">
<label for="last-seen">{{i18n "admin.email.last_seen_user"}}</label> <div class="inline-form">
{{date-picker-past value=lastSeen id="last-seen"}} <label for="last-seen">{{i18n "admin.email.last_seen_user"}}</label>
<label>{{i18n "admin.email.user"}}:</label> {{date-picker-past value=lastSeen id="last-seen"}}
{{email-group-user-chooser <label>{{i18n "admin.email.user"}}:</label>
value=username {{email-group-user-chooser
onChange=(action "updateUsername") value=username
options=(hash onChange=(action "updateUsername")
maximum=1 options=(hash
) maximum=1
}} )
{{d-button }}
class="btn-primary digest-refresh-button" {{d-button
action=(action "refresh") class="btn-primary digest-refresh-button"
label="admin.email.refresh"}} action=(action "refresh")
<div class="toggle"> label="admin.email.refresh"
<label>{{i18n "admin.email.format"}}</label> }}
{{#if showHtml}} <div class="toggle">
<span>{{i18n "admin.email.html"}}</span> <label>{{i18n "admin.email.format"}}</label>
| {{#if showHtml}}
<a href {{action "toggleShowHtml"}}> <span>{{i18n "admin.email.html"}}</span>
{{i18n "admin.email.text"}} |
</a> <a href {{action "toggleShowHtml"}}>
{{else}} {{i18n "admin.email.text"}}
<a href {{action "toggleShowHtml"}}>{{i18n "admin.email.html"}}</a> | </a>
<span>{{i18n "admin.email.text"}}</span> {{else}}
{{/if}} <a href {{action "toggleShowHtml"}}>{{i18n "admin.email.html"}}</a> |
<span>{{i18n "admin.email.text"}}</span>
{{/if}}
</div>
</div> </div>
</div> </div>
</div> </div>
@ -37,20 +40,22 @@
<div class="email-preview-digest"> <div class="email-preview-digest">
{{#if showSendEmailForm}} {{#if showSendEmailForm}}
<div class="controls"> <div class="controls">
{{#if sendingEmail}} <div class="inline-form">
{{i18n "admin.email.sending_test"}} {{#if sendingEmail}}
{{else}} {{i18n "admin.email.sending_test"}}
<label>{{i18n "admin.email.send_digest_label"}}</label> {{else}}
{{text-field value=email placeholderKey="admin.email.test_email_address"}} <label>{{i18n "admin.email.send_digest_label"}}</label>
{{d-button {{text-field value=email placeholderKey="admin.email.test_email_address"}}
class="btn-default" {{d-button
action=(action "sendEmail") class="btn-default"
disabled=sendEmailDisabled action=(action "sendEmail")
label="admin.email.send_digest"}} disabled=sendEmailDisabled
{{#if sentEmail}} label="admin.email.send_digest"}}
<span class="result-message">{{i18n "admin.email.sent_test"}}</span> {{#if sentEmail}}
<span class="result-message">{{i18n "admin.email.sent_test"}}</span>
{{/if}}
{{/if}} {{/if}}
{{/if}} </div>
</div> </div>
{{/if}} {{/if}}

13
app/assets/javascripts/admin/addon/templates/emojis.hbs
View File

@ -16,7 +16,7 @@
<tr> <tr>
<th>{{i18n "admin.emoji.image"}}</th> <th>{{i18n "admin.emoji.image"}}</th>
<th>{{i18n "admin.emoji.name"}}</th> <th>{{i18n "admin.emoji.name"}}</th>
<th> <th colspan="2">
{{combo-box {{combo-box
value=filter value=filter
content=sortingGroups content=sortingGroups
@ -25,22 +25,21 @@
onChange=(action "filterGroups") onChange=(action "filterGroups")
}} }}
</th> </th>
<th></th>
</tr> </tr>
</thead> </thead>
<tbody> <tbody>
{{#each sortedEmojis as |e|}} {{#each sortedEmojis as |e|}}
<tr> <tr>
<th><img class="emoji emoji-custom" src={{e.url}} title={{e.name}} alt={{i18n "admin.emoji.alt"}}></th> <td><img class="emoji emoji-custom" src={{e.url}} title={{e.name}} alt={{i18n "admin.emoji.alt"}}></td>
<th>:{{e.name}}:</th> <td>:{{e.name}}:</td>
<th>{{e.group}}</th> <td>{{e.group}}</td>
<th> <td class="action">
{{d-button {{d-button
action=(action "destroyEmoji" e) action=(action "destroyEmoji" e)
class="btn-danger" class="btn-danger"
icon="far-trash-alt" icon="far-trash-alt"
}} }}
</th> </td>
</tr> </tr>
{{/each}} {{/each}}
</tbody> </tbody>

6
app/assets/javascripts/admin/addon/templates/logs/screened-ip-addresses.hbs
View File

@ -1,7 +1,7 @@
<p>{{i18n "admin.logs.screened_ips.description"}}</p> <p>{{i18n "admin.logs.screened_ips.description"}}</p>
<div class="screened-ip-controls"> <div class="screened-ip-controls">
<div class="filter-screened-ip-address"> <div class="filter-screened-ip-address inline-form">
{{text-field {{text-field
value=filter value=filter
class="ip-address-input" class="ip-address-input"
@ -82,7 +82,9 @@
action=(action "save") action=(action "save")
actionParam=item actionParam=item
label="admin.logs.save"}} label="admin.logs.save"}}
<a href {{action "cancel" item}}>{{i18n "cancel"}}</a> <a href {{action "cancel" item}} class="cancel-action">
{{i18n "cancel"}}
</a>
{{else}} {{else}}
{{d-button {{d-button
class="btn-default btn-danger" class="btn-default btn-danger"

10
app/assets/javascripts/admin/addon/templates/logs/staff-action-logs.hbs
View File

@ -1,29 +1,29 @@
<div class="staff-action-logs-controls"> <div class="staff-action-logs-controls">
{{#if filtersExists}} {{#if filtersExists}}
<div class="staff-action-logs-filters"> <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> <span class="label">{{i18n "admin.logs.staff_actions.clear_filters"}}</span>
</a> </a>
{{#if actionFilter}} {{#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}} <span class="label">{{i18n "admin.logs.action"}}</span>: {{actionFilter}}
{{d-icon "times-circle"}} {{d-icon "times-circle"}}
</a> </a>
{{/if}} {{/if}}
{{#if filters.acting_user}} {{#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}} <span class="label">{{i18n "admin.logs.staff_actions.staff_user"}}</span>: {{filters.acting_user}}
{{d-icon "times-circle"}} {{d-icon "times-circle"}}
</a> </a>
{{/if}} {{/if}}
{{#if filters.target_user}} {{#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}} <span class="label">{{i18n "admin.logs.staff_actions.target_user"}}</span>: {{filters.target_user}}
{{d-icon "times-circle"}} {{d-icon "times-circle"}}
</a> </a>
{{/if}} {{/if}}
{{#if filters.subject}} {{#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}} <span class="label">{{i18n "admin.logs.staff_actions.subject"}}</span>: {{filters.subject}}
{{d-icon "times-circle"}} {{d-icon "times-circle"}}
</a> </a>

3
app/assets/javascripts/discourse/app/templates/components/d-button.hbs
View File

@ -12,6 +12,9 @@
{{~#if computedLabel~}} {{~#if computedLabel~}}
<span class="d-button-label">{{html-safe computedLabel}}{{#if ellipsis}}&hellip;{{/if}}</span> <span class="d-button-label">{{html-safe computedLabel}}{{#if ellipsis}}&hellip;{{/if}}</span>
{{~else~}}
&#8203;
{{! Zero-width space character, so icon-only button height = regular button height }}
{{~/if~}} {{~/if~}}
{{yield}} {{yield}}

3
app/assets/javascripts/discourse/app/templates/components/date-picker.hbs
View File

@ -2,4 +2,5 @@
type=inputType type=inputType
class="date-picker" class="date-picker"
placeholder=placeholder placeholder=placeholder
value=value}} value=value
}}

8
app/assets/javascripts/discourse/app/templates/components/edit-category-general.hbs
View File

@ -61,21 +61,21 @@
<div class="category-color-editor"> <div class="category-color-editor">
{{html-safe categoryBadgePreview}} {{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> <span class="color-title">{{i18n "category.background_color"}}:</span>
<div class="colorpicker-wrapper"> <div class="colorpicker-wrapper">
<span class="add-on">#</span>{{text-field value=category.color placeholderKey="category.color_placeholder" maxlength="6"}} <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}} {{color-picker colors=backgroundColors usedColors=usedBackgroundColors value=category.color}}
</div> </div>
</div> </section>
<div class="input-prepend input-append"> <section class="field">
<span class="color-title">{{i18n "category.foreground_color"}}:</span> <span class="color-title">{{i18n "category.foreground_color"}}:</span>
<div class="colorpicker-wrapper edit-text-color"> <div class="colorpicker-wrapper edit-text-color">
<span class="add-on">#</span>{{text-field value=category.text_color placeholderKey="category.color_placeholder" maxlength="6"}} <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"}} {{color-picker colors=foregroundColors value=category.text_color id="edit-text-color"}}
</div> </div>
</div> </section>
</div> </div>
{{/if}} {{/if}}
</section> </section>

8
app/assets/javascripts/discourse/app/templates/components/emoji-uploader.hbs
View File

@ -1,5 +1,5 @@
<div class="emoji-uploader"> <div class="emoji-uploader form-horizontal">
<div class="control"> <div class="control-group">
<span class="label"> <span class="label">
{{i18n "admin.emoji.name"}} {{i18n "admin.emoji.name"}}
</span> </span>
@ -12,7 +12,7 @@
}} }}
</div> </div>
</div> </div>
<div class="control"> <div class="control-group">
<span class="label"> <span class="label">
{{i18n "admin.emoji.group"}} {{i18n "admin.emoji.group"}}
</span> </span>
@ -30,7 +30,7 @@
}} }}
</div> </div>
</div> </div>
<div class="control"> <div class="control-group">
<div class="input"> <div class="input">
<label class="btn btn-default btn-primary {{if addDisabled "disabled"}}"> <label class="btn btn-default btn-primary {{if addDisabled "disabled"}}">
{{#if uploading}} {{#if uploading}}

4
app/assets/javascripts/discourse/app/templates/components/future-date-input.hbs
View File

@ -21,7 +21,7 @@
</div> </div>
{{#if displayDateAndTimePicker}} {{#if displayDateAndTimePicker}}
<div class="control-group"> <div class="control-group future-date-input-date-picker">
{{d-icon "calendar-alt"}} {{d-icon "calendar-alt"}}
{{date-picker-future {{date-picker-future
value=_date value=_date
@ -30,7 +30,7 @@
}} }}
</div> </div>
<div class="control-group"> <div class="control-group future-date-input-time-picker">
{{d-icon "far-clock"}} {{d-icon "far-clock"}}
{{input {{input
placeholder="--:--" placeholder="--:--"

2
app/assets/javascripts/discourse/app/templates/composer.hbs
View File

@ -12,7 +12,7 @@
addLinkLookup=(action "addLinkLookup") addLinkLookup=(action "addLinkLookup")
}} }}
{{#if model.viewOpenOrFullscreen}} {{#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"> <div class="composer-fields">
{{plugin-outlet name="composer-open" args=(hash model=model)}} {{plugin-outlet name="composer-open" args=(hash model=model)}}
<div class="reply-to"> <div class="reply-to">

42
app/assets/javascripts/discourse/app/templates/mobile/users.hbs
View File

@ -11,28 +11,28 @@
{{lastUpdatedAt}} {{lastUpdatedAt}}
</div> </div>
{{/if}} {{/if}}
{{input <div class="inline-form full-width">
value=(readonly nameInput) {{input
input=(action "onUsernameFilterChanged" value="target.value") value=(readonly nameInput)
placeholderKey="directory.filter_name" input=(action "onUsernameFilterChanged" value="target.value")
class="filter-name no-blur" 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"
}} }}
{{/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)}} {{plugin-outlet name="users-directory-controls" connectorTagName="" tagName="" args=(hash model=model)}}
</div> </div>

8
app/assets/javascripts/discourse/app/templates/user/bookmarks.hbs
View File

@ -9,7 +9,7 @@
</div> </div>
</div> </div>
{{else}} {{else}}
<div class="form-horizontal bookmark-search-form"> <div class="inline-form full-width bookmark-search-form">
{{input type="text" {{input type="text"
value=searchTerm value=searchTerm
placeholder=(i18n "bookmarks.search_placeholder") placeholder=(i18n "bookmarks.search_placeholder")
@ -19,7 +19,8 @@
class="btn-primary" class="btn-primary"
action=(action "search") action=(action "search")
type="button" type="button"
icon="search"}} icon="search"
}}
</div> </div>
{{#if nothingFound}} {{#if nothingFound}}
<div class="alert alert-info">{{i18n "user.no_bookmarks_search"}}</div> <div class="alert alert-info">{{i18n "user.no_bookmarks_search"}}</div>
@ -28,7 +29,8 @@
loadMore=(action "loadMore") loadMore=(action "loadMore")
reload=(action "reload") reload=(action "reload")
loadingMore=loadingMore loadingMore=loadingMore
content=content}} content=content
}}
{{/if}} {{/if}}
{{/if}} {{/if}}
{{/conditional-loading-spinner}} {{/conditional-loading-spinner}}

6
app/assets/javascripts/discourse/app/templates/users.hbs
View File

@ -13,12 +13,12 @@
</div> </div>
{{/if}} {{/if}}
</div> </div>
<div> <div class="inline-form">
<span class="total-rows"> <label class="total-rows">
{{#if model.totalRows}} {{#if model.totalRows}}
{{i18n "directory.total_rows" count=model.totalRows}} {{i18n "directory.total_rows" count=model.totalRows}}
{{/if}} {{/if}}
</span> </label>
{{input {{input
value=(readonly nameInput) value=(readonly nameInput)
input=(action "onUsernameFilterChanged" value="target.value") input=(action "onUsernameFilterChanged" value="target.value")

2
app/assets/javascripts/discourse/tests/acceptance/group-test.js
View File

@ -191,7 +191,7 @@ acceptance("Group - Authenticated", function (needs) {
await click(".group-index-request"); await click(".group-index-request");
assert.equal( assert.equal(
queryAll(".modal-header").text().trim(), queryAll(".modal-header .title").text().trim(),
I18n.t("groups.membership_request.title", { group_name: "Macdonald" }) I18n.t("groups.membership_request.title", { group_name: "Macdonald" })
); );

5
app/assets/javascripts/discourse/tests/helpers/select-kit-helper.js
View File

@ -128,7 +128,10 @@ function headerHelper(header) {
return header.attr("data-name"); return header.attr("data-name");
}, },
label() { label() {
return header.text().trim(); return header
.text()
.trim()
.replace(/(^[\s\u200b]*|[\s\u200b]*$)/g, "");
}, },
icon() { icon() {
return header.find(".d-icon"); return header.find(".d-icon");

60
app/assets/javascripts/discourse/tests/integration/components/input-size-test.js Normal file
View File

@ -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"),
});
}
);

2
app/assets/javascripts/select-kit/addon/templates/components/dropdown-select-box/dropdown-select-box-header.hbs
View File

@ -11,4 +11,6 @@
{{#if selectKit.options.showCaret}} {{#if selectKit.options.showCaret}}
{{d-icon caretIcon class="caret-icon"}} {{d-icon caretIcon class="caret-icon"}}
{{/if}} {{/if}}
&#8203;
{{! Zero-width space character, so icon-only button height = regular button height }}
</div> </div>

36
app/assets/stylesheets/common/admin/admin_base.scss
View File

@ -414,14 +414,7 @@ $mobile-breakpoint: 700px;
clear: both; clear: both;
padding: 4px; padding: 4px;
} }
@include breakpoint(tablet) {
.select-kit.period-chooser
.period-chooser-header
h2.selected-name
.top-date-string {
font-size: $font-down-3;
}
}
.controls { .controls {
@include clearfix; @include clearfix;
} }
@ -534,15 +527,18 @@ $mobile-breakpoint: 700px;
padding: 10px; padding: 10px;
display: flex; display: flex;
align-items: center; 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) { @include breakpoint(mobile-extra-large) {
margin: 0 -10px; margin: 0 -10px;
} }
label {
margin-bottom: 0;
}
input { input {
margin-right: 5px;
margin-bottom: 0;
@include breakpoint(tablet) { @include breakpoint(tablet) {
max-width: 150px; max-width: 150px;
} }
@ -889,13 +885,14 @@ table#user-badges {
margin-left: 0; margin-left: 0;
.emoji-details { .emoji-details {
@include form-item-sizing;
display: flex; display: flex;
align-items: center; align-items: center;
min-height: 30px; min-height: 30px;
padding: $input-padding;
line-height: 1;
color: var(--primary); color: var(--primary);
border: 1px solid var(--primary-low); border-color: var(--primary-low);
padding-left: 10px;
padding-right: 10px;
.emoji-name { .emoji-name {
margin-left: 0.5em; 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 { .mobile-view .full-width {
margin: 0; margin: 0;
} }

28
app/assets/stylesheets/common/admin/admin_emojis.scss
View File

@ -1,25 +1,9 @@
.admin-emojis { .admin-contents.admin-emojis {
#custom_emoji { #custom_emoji .select-kit,
.select-kit { .emoji-uploader .select-kit {
width: 220px; max-width: 210px;
}
} }
#custom_emoji td.action {
.emoji-uploader { text-align: right;
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;
}
} }
} }

5
app/assets/stylesheets/common/admin/admin_report.scss
View File

@ -181,11 +181,6 @@
.refresh-report-btn { .refresh-report-btn {
width: 100%; width: 100%;
} }
.d-date-time-input-range {
flex-direction: column;
width: 100%;
}
} }
} }
} }

17
app/assets/stylesheets/common/admin/customize.scss
View File

@ -678,23 +678,8 @@
} }
.permalink-form { .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 { .select-kit {
width: 200px; max-width: 200px;
}
input {
margin: 5px 0;
@include breakpoint(tablet, min-width) {
margin: 0 5px;
}
} }
} }

13
app/assets/stylesheets/common/admin/dashboard.scss
View File

@ -230,17 +230,8 @@
} }
} }
.section { .period-chooser .period-chooser-header {
.period-chooser .period-chooser-header { font-size: var(--font-down-2);
.selected-name,
.d-icon {
font-size: $font-up-1;
}
.d-icon {
margin: 0;
}
}
} }
.dashboard-problems { .dashboard-problems {

12
app/assets/stylesheets/common/admin/emails.scss
View File

@ -76,21 +76,9 @@
padding: 0.25em 0; padding: 0.25em 0;
} }
.email-preview {
.digest-refresh-button {
margin: 0 0.5em;
}
}
.email-preview-digest { .email-preview-digest {
.controls { .controls {
margin: 1em 0.5em; margin: 1em 0.5em;
input[type="text"] {
margin-bottom: 0;
}
label {
display: inline;
}
} }
.preview-output iframe { .preview-output iframe {
width: 100%; width: 100%;

78
app/assets/stylesheets/common/admin/staff_logs.scss
View File

@ -151,37 +151,14 @@
} }
button { button {
margin-left: auto; margin-left: auto;
display: flex;
} }
margin: 0 0 1em 0; margin: 0 0 1em 0;
a.filter { 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 { .label {
font-weight: bold; font-weight: bold;
} }
.d-icon { .d-icon {
margin-left: 6px; margin-left: 0.5em;
}
}
}
.admin-logs-table {
input.ember-text-field {
padding: 1px 4px;
}
.btn {
padding: 2px 8px;
.fa {
margin-right: 2px;
} }
} }
} }
@ -190,43 +167,19 @@
display: block; display: block;
} }
.screened-ip-address-form {
margin-left: 6px;
.combobox {
width: 130px;
}
}
.screened-ip-controls { .screened-ip-controls {
display: flex; display: flex;
flex-wrap: wrap; 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 { .screened-ip-address-form {
margin: 0 -0.25em 1em; .combobox {
display: flex; width: 140px;
flex-wrap: wrap; }
align-items: center; @media screen and (min-width: 900px) {
}
@media screen and (min-width: 800px) {
.screened-ip-address-form {
margin-left: auto; margin-left: auto;
} }
} @media screen and (max-width: 899px) {
button { margin-top: 1em;
display: flex; }
white-space: nowrap;
margin: 0 0.25em 0.25em;
} }
} }
@ -238,17 +191,10 @@ table.screened-ip-addresses {
width: 80%; width: 80%;
} }
} }
td.action { td.actions {
display: flex; text-align: right;
align-items: baseline; .cancel-action {
.d-icon-check { margin-left: 0.5em;
color: var(--success);
}
.d-icon-ban {
color: var(--danger);
}
.d-icon {
margin-right: 0.25em;
} }
} }
} }

6
app/assets/stylesheets/common/admin/suspend.scss
View File

@ -16,12 +16,6 @@
margin-bottom: 0.5em; margin-bottom: 0.5em;
} }
.textarea,
input[type="text"] {
box-sizing: border-box;
height: 2.5em;
}
.inline-spinner { .inline-spinner {
float: right; float: right;
} }

18
app/assets/stylesheets/common/base/_topic-list.scss
View File

@ -5,10 +5,6 @@
&:not(:first-child) { &:not(:first-child) {
margin-left: 0.5em; margin-left: 0.5em;
} }
.d-button-label {
font-size: $font-up-1;
font-weight: normal;
}
} }
.notifications-button { .notifications-button {
@ -61,7 +57,8 @@
#navigation-bar { #navigation-bar {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin: 0 0 var(--nav-space); margin: 0;
margin-bottom: var(--nav-space);
margin-right: auto; margin-right: auto;
} }
@ -72,17 +69,6 @@
> * { > * {
white-space: nowrap; 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) { @include breakpoint(mobile-large) {
.edit-category { .edit-category {
.d-button-label { .d-button-label {

11
app/assets/stylesheets/common/base/colorpicker.scss
View File

@ -13,11 +13,14 @@
.colorpicker-wrapper { .colorpicker-wrapper {
display: flex; display: flex;
align-items: center; align-items: flex-start;
input,
.add-on { .add-on {
align-self: flex-start; @include form-item-sizing;
margin-bottom: 0.125em; background-color: var(--primary-low);
border-color: var(--primary-medium);
border-right-color: transparent;
padding-left: 0.5em;
padding-right: 0.5em;
} }
} }

6
app/assets/stylesheets/common/base/compose.scss
View File

@ -470,12 +470,6 @@ div.ac-wrap {
} }
} }
.future-date-input {
.examples {
color: var(--primary-medium);
}
}
.md-table { .md-table {
overflow-y: auto; overflow-y: auto;
margin: 1em 0; margin: 1em 0;

17
app/assets/stylesheets/common/base/directory.scss
View File

@ -11,20 +11,7 @@
overflow-x: auto; overflow-x: auto;
} }
.open-edit-columns-btn {
vertical-align: top;
padding: 0.45em 0.8em;
}
&.users-directory { &.users-directory {
.period-chooser {
.selected-name {
margin: 0;
}
.period-chooser-header .caret-icon {
margin: 0;
}
}
.directory-group-selector { .directory-group-selector {
vertical-align: top; vertical-align: top;
} }
@ -43,9 +30,7 @@
justify-content: space-between; justify-content: space-between;
.total-rows { .total-rows {
color: var(--primary-medium); color: var(--primary-medium);
} font-weight: normal;
.filter-name {
height: 1em;
} }
} }

82
app/assets/stylesheets/common/base/discourse.scss
View File

@ -213,74 +213,50 @@ input {
&[type="tel"], &[type="tel"],
&[type="color"] { &[type="color"] {
@include appearance-none; @include appearance-none;
@include form-item-sizing;
display: inline-block; display: inline-block;
padding: $input-padding;
margin-bottom: 9px; margin-bottom: 9px;
font-size: $font-0;
line-height: $line-height-small;
color: var(--primary); color: var(--primary);
background-color: var(--secondary); background-color: var(--secondary);
border: 1px solid var(--primary-medium); border: 1px solid var(--primary-medium);
border-radius: 0; border-radius: 0;
box-sizing: border-box;
min-height: 30px;
&:focus { &:focus {
@include default-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 { ::placeholder {
text-overflow: ellipsis; 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 { textarea {
padding: $vpad $hpad;
box-sizing: border-box;
height: auto; height: auto;
background-color: var(--secondary); background-color: var(--secondary);
border: 1px solid var(--primary-medium); border: 1px solid var(--primary-medium);
@ -643,9 +619,7 @@ table {
.form-vertical { .form-vertical {
input, input,
textarea, textarea,
select, select {
.input-prepend,
.input-append {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
flex: 0 0 auto; flex: 0 0 auto;

30
app/assets/stylesheets/common/base/edit-topic-timer-modal.scss
View File

@ -41,29 +41,6 @@
.btn.pull-right { .btn.pull-right {
margin-right: 10px; 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 { .pika-single {
position: absolute !important; /* inline JS styles */ 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;
}
}

12
app/assets/stylesheets/common/base/reviewables.scss
View File

@ -121,18 +121,6 @@
.category-chooser { .category-chooser {
width: 100%; 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);
}
}
} }
} }

40
app/assets/stylesheets/common/base/share_link.scss
View File

@ -129,10 +129,6 @@
.select-kit.multi-select .choices { .select-kit.multi-select .choices {
padding: 0; 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 // topic invite modal
@ -140,11 +136,6 @@
.create-invite-modal { .create-invite-modal {
form { form {
margin: 0; margin: 0;
input[type="text"],
.btn,
.select-kit-header {
height: 2.27rem;
}
} }
input { input {
@ -181,33 +172,6 @@
margin-top: 0.25em; 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 { .input-group.input-email {
display: flex; display: flex;
align-items: baseline; align-items: baseline;
@ -242,7 +206,9 @@
&.invite-to-topic input[type="text"], &.invite-to-topic input[type="text"],
.group-chooser, .group-chooser,
.user-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; margin-left: 1.75em;
width: calc(100% - 1.75em); width: calc(100% - 1.75em);
} }

16
app/assets/stylesheets/common/components/bookmark-list.scss
View File

@ -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 { .bookmark-list-item {
td.post-metadata { td.post-metadata {
text-align: center; text-align: center;

21
app/assets/stylesheets/common/components/buttons.scss
View File

@ -13,16 +13,12 @@
$hover-bg-color: var(--primary-medium), $hover-bg-color: var(--primary-medium),
$hover-icon-color: var(--primary-low) $hover-icon-color: var(--primary-low)
) { ) {
box-sizing: border-box; @include form-item-sizing;
display: inline-flex; display: inline-flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
margin: 0; margin: 0;
padding: 0.53em 0.8em;
border: none;
font-weight: normal; font-weight: normal;
font-size: $font-0;
line-height: normal;
color: $text-color; color: $text-color;
background: $bg-color; background: $bg-color;
cursor: pointer; cursor: pointer;
@ -35,7 +31,6 @@
&.no-text { &.no-text {
.d-icon { .d-icon {
margin-right: 0; margin-right: 0;
min-height: 17px;
} }
} }
@include hover { @include hover {
@ -59,6 +54,7 @@
&:active, &:active,
&.btn-active { &.btn-active {
@include linear-gradient($hover-bg-color 0%, $bg-color 100%); @include linear-gradient($hover-bg-color 0%, $bg-color 100%);
border-bottom-color: $bg-color;
} }
&[disabled], &[disabled],
&.disabled { &.disabled {
@ -253,20 +249,14 @@
// Small // Small
.btn-small { .btn-small {
padding: 6px; font-size: var(--font-down-1);
font-size: $font-down-1;
min-height: 20px; min-height: 20px;
.d-icon {
max-height: 0.87em;
}
} }
// Large // Large
.btn-large { .btn-large {
padding: 9px 18px; font-size: var(--font-up-1);
font-size: $font-up-1;
line-height: $line-height-small;
} }
// Bonus Buttons // Bonus Buttons
@ -287,9 +277,8 @@
} }
&.close { &.close {
padding: 0; padding: 0;
min-height: unset;
background: transparent; background: transparent;
font-size: $font-up-3; font-size: var(--font-up-3);
.d-icon { .d-icon {
color: var(--primary-high); color: var(--primary-high);
} }

2
app/assets/stylesheets/common/components/date-input.scss
View File

@ -3,7 +3,7 @@
cursor: pointer; cursor: pointer;
flex-direction: column; flex-direction: column;
min-width: 140px; min-width: 140px;
flex: 1 0 100%; flex: 1 0 auto;
.date-picker { .date-picker {
cursor: pointer; cursor: pointer;

5
app/assets/stylesheets/common/components/date-picker.scss
View File

@ -12,10 +12,9 @@
display: inline-block; display: inline-block;
} }
.date-picker { input.date-picker {
text-align: center;
width: 8em;
margin: 0; margin: 0;
max-width: 180px;
} }
.pika-single { .pika-single {

6
app/assets/stylesheets/common/components/date-time-input-range.scss
View File

@ -1,5 +1,5 @@
.d-date-time-input-range { .d-date-time-input-range {
border: 1px solid var(--primary-low); .from {
display: inline-flex; margin-bottom: 0.5em;
box-sizing: border-box; }
} }

14
app/assets/stylesheets/common/components/date-time-input.scss
View File

@ -1,11 +1,11 @@
.d-date-time-input { .d-date-time-input {
display: flex; display: flex;
border: 1px solid var(--primary-low); border: 1px solid var(--primary-medium);
box-sizing: border-box; box-sizing: border-box;
position: relative; position: relative;
.date-picker, .date-picker {
.fields { max-width: unset;
border-color: transparent; border-color: transparent;
} }
@ -15,10 +15,10 @@
} }
.d-time-input { .d-time-input {
.combo-box { width: 90px;
.select-kit-header { .select-kit-header {
border-color: transparent; border-color: transparent;
} width: 90px;
} }
} }

13
app/assets/stylesheets/common/components/ignored-user-list.scss
View File

@ -11,25 +11,12 @@
.ignored-user-list-item { .ignored-user-list-item {
border: 1px solid var(--primary-medium); border: 1px solid var(--primary-medium);
border-radius: 5px;
padding: 0; padding: 0;
display: flex; display: flex;
align-items: center; align-items: center;
margin-right: 10px; 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 { .ignored-user-name {
padding-left: 10px; padding-left: 10px;
padding-right: 10px; padding-right: 10px;

5
app/assets/stylesheets/common/components/time-shortcut-picker.scss
View File

@ -18,16 +18,11 @@
.tap-tile-time-input { .tap-tile-time-input {
display: flex; display: flex;
align-items: center; align-items: center;
input {
width: 100%;
min-width: unset;
}
} }
.date-picker, .date-picker,
.time-input { .time-input {
text-align: left; text-align: left;
padding-top: 5px;
} }
.time-input, .time-input,

10
app/assets/stylesheets/common/d-editor.scss
View File

@ -281,16 +281,6 @@
margin: 0; margin: 0;
} }
button {
background: pink;
}
.select-kit {
.select-kit-header {
margin: 0;
}
}
.d-editor-spacer { .d-editor-spacer {
margin: 0 0.25em; margin: 0 0.25em;
} }

28
app/assets/stylesheets/common/foundation/base.scss
View File

@ -154,3 +154,31 @@ input[type="reset"],
input[type="submit"] { input[type="submit"] {
cursor: pointer; 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;
}
}
}

17
app/assets/stylesheets/common/foundation/mixins.scss
View File

@ -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 { @mixin sticky {
position: -webkit-sticky; position: -webkit-sticky;
position: sticky; position: sticky;

3
app/assets/stylesheets/common/foundation/variables.scss
View File

@ -9,7 +9,6 @@ $small-width: 800px !default;
$medium-width: 995px !default; $medium-width: 995px !default;
$large-width: 1110px !default; $large-width: 1110px !default;
$input-padding: 4px 10px;
$topic-body-width: 690px; $topic-body-width: 690px;
$topic-body-width-padding: 11px; $topic-body-width-padding: 11px;
$topic-avatar-width: 45px; $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-5: var(--font-down-5) !default;
$font-down-6: var(--font-down-6) !default; $font-down-6: var(--font-down-6) !default;
$font-size-ios-input: var(--font-size-ios-input) !default;
// Common line-heights // Common line-heights
$line-height-small: var(--line-height-small) !default; $line-height-small: var(--line-height-small) !default;
$line-height-medium: var(--line-height-medium) !default; $line-height-medium: var(--line-height-medium) !default;

5
app/assets/stylesheets/common/select-kit/combo-box.scss
View File

@ -27,10 +27,7 @@
.select-kit-header { .select-kit-header {
background: var(--secondary); background: var(--secondary);
border: 1px solid var(--primary-medium); border-color: var(--primary-medium);
padding: 0 0.25em 0 0.5em;
font-weight: 500;
font-size: $font-0;
&.is-focused { &.is-focused {
@include default-focus; @include default-focus;

8
app/assets/stylesheets/common/select-kit/dropdown-select-box.scss
View File

@ -68,16 +68,10 @@
} }
.select-kit-header { .select-kit-header {
box-sizing: border-box; display: inline-flex;
border: 1px solid transparent;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
flex-direction: row; flex-direction: row;
display: inline-flex;
.select-kit-header-wrapper {
min-height: unset;
}
.d-icon + .d-icon { .d-icon + .d-icon {
margin-left: 0.25em; margin-left: 0.25em;

12
app/assets/stylesheets/common/select-kit/future-date-input-selector.scss
View File

@ -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;
}
}
}

7
app/assets/stylesheets/common/select-kit/multi-select.scss
View File

@ -49,12 +49,7 @@
.multi-select-header { .multi-select-header {
background: var(--secondary); background: var(--secondary);
border: 1px solid var(--primary-medium); border-color: var(--primary-medium);
padding: 0 0.25em 0 0.5em;
font-weight: 500;
font-size: var(--font-0);
box-sizing: border-box;
overflow: hidden;
.formated-selection { .formated-selection {
margin: 0; margin: 0;

18
app/assets/stylesheets/common/select-kit/period-chooser.scss
View File

@ -10,21 +10,13 @@
.period-chooser-header { .period-chooser-header {
display: inline-block; // safari 14 has issues with summary elements and flexbox display: inline-block; // safari 14 has issues with summary elements and flexbox
background: none; background: transparent;
border: none; border-color: transparent;
width: auto;
height: auto;
padding: 0; padding: 0;
h2.selected-name { h2.selected-name {
color: var(--secondary); color: var(--secondary);
display: inline-block; display: inline-block;
box-sizing: border-box;
// for text + caret alignment
line-height: 1;
vertical-align: bottom;
margin-bottom: 10px;
.date-section { .date-section {
color: var(--primary); color: var(--primary);
@ -42,14 +34,14 @@
.d-icon { .d-icon {
color: var(--primary); color: var(--primary);
opacity: 1; opacity: 1;
margin: 5px 0 10px 5px;
font-size: $font-up-3; font-size: $font-up-3;
} }
&.is-focused, &.is-focused,
&:focus,
&:hover { &:hover {
background: none; background: transparent;
border: none; border-color: transparent;
outline: none; outline: none;
} }
} }

10
app/assets/stylesheets/common/select-kit/select-kit.scss
View File

@ -65,12 +65,17 @@
} }
.select-kit-header { .select-kit-header {
box-sizing: border-box; @include form-item-sizing;
font-weight: 500;
overflow: hidden; overflow: hidden;
transition: all 0.25s; transition: all 0.25s;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: stretch; align-items: stretch;
&:not(.btn) {
padding-left: 0.5em;
padding-right: 0.5em;
}
/* hide native indicator */ /* hide native indicator */
&::-webkit-details-marker { &::-webkit-details-marker {
@ -79,12 +84,9 @@
.select-kit-header-wrapper { .select-kit-header-wrapper {
box-sizing: border-box; box-sizing: border-box;
min-height: 28px;
display: flex; display: flex;
flex: 1 0 auto; flex: 1 0 auto;
align-items: center; align-items: center;
height: 100%;
max-width: 100%;
} }
.d-icon-spinner { .d-icon-spinner {

5
app/assets/stylesheets/desktop/discourse.scss
View File

@ -60,7 +60,6 @@ textarea {
select, select,
textarea { textarea {
display: inline-block; display: inline-block;
padding: 4px;
margin-bottom: 9px; margin-bottom: 9px;
font-size: $font-0; font-size: $font-0;
line-height: $line-height-large; line-height: $line-height-large;
@ -129,9 +128,7 @@ input {
input, input,
textarea, textarea,
select, select {
.input-prepend,
.input-append {
display: inline-block; display: inline-block;
margin-bottom: 0; margin-bottom: 0;
} }

1
app/assets/stylesheets/mobile/_index.scss
View File

@ -1,6 +1,5 @@
@import "admin_badges"; @import "admin_badges";
@import "admin_customize"; @import "admin_customize";
@import "admin_emojis";
@import "admin_report_counters"; @import "admin_report_counters";
@import "admin_report_table"; @import "admin_report_table";
@import "admin_report"; @import "admin_report";

35
app/assets/stylesheets/mobile/admin_emojis.scss
View File

@ -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;
}
}
}

10
app/assets/stylesheets/mobile/compose.scss
View File

@ -200,6 +200,16 @@
} }
} }
} }
.formated-selection {
font-size: var(--font-down-1);
}
}
.without-tags {
.category-input {
margin-left: 5px;
}
} }
.user-selector { .user-selector {

21
app/assets/stylesheets/mobile/discourse.scss
View File

@ -12,29 +12,10 @@ body {
.ios-device { .ios-device {
textarea { textarea {
background-color: var(--secondary); background-color: var(--secondary);
font-size: $font-size-ios-input; font-size: var(--font-size-ios-input);
-webkit-tap-highlight-color: transparent; -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 { input#reply-title {
-webkit-tap-highlight-color: transparent; -webkit-tap-highlight-color: transparent;
} }

23
plugins/poll/assets/stylesheets/common/poll-ui-builder.scss
View File

@ -20,16 +20,9 @@
.multi-select, .multi-select,
.select-kit-header, .select-kit-header,
.date-picker-wrapper { .date-picker-wrapper {
height: 34px;
margin: 0;
width: 100%; width: 100%;
} }
button {
height: 34px;
margin-left: 5px;
}
.date-picker-wrapper { .date-picker-wrapper {
margin-right: 5px; 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 { .tip {
display: block; display: block;
font-size: $font-down-1; font-size: $font-down-1;

6
plugins/poll/assets/stylesheets/common/poll.scss
View File

@ -186,9 +186,3 @@ body.crawler {
} }
} }
} }
.poll-ui-builder {
.poll-date input {
height: 30px;
}
}

1
plugins/styleguide/assets/javascripts/discourse/lib/dummy-data.js.es6
View File

@ -208,6 +208,7 @@ export function createData(store) {
buttonSizes: [ buttonSizes: [
{ class: "btn-large", text: "large" }, { class: "btn-large", text: "large" },
{ class: "btn-default", text: "default" }, { class: "btn-default", text: "default" },
{ class: "btn-small", text: "small" },
], ],
buttonStates: [ buttonStates: [

12
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/02-buttons.hbs
View File

@ -1,4 +1,4 @@
{{#styleguide-example title=".btn-icon - sizes"}} {{#styleguide-example title=".btn-icon - sizes (large, default, small)"}}
{{#each dummy.buttonSizes as |bs|}} {{#each dummy.buttonSizes as |bs|}}
{{d-button icon="times" translatedTitle=bs.text class=bs.class disabled=bs.disabled}} {{d-button icon="times" translatedTitle=bs.text class=bs.class disabled=bs.disabled}}
{{/each}} {{/each}}
@ -10,7 +10,7 @@
{{/each}} {{/each}}
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title=".btn-text - sizes"}} {{#styleguide-example title=".btn-text - sizes (large, default, small)"}}
{{#each dummy.buttonSizes as |bs|}} {{#each dummy.buttonSizes as |bs|}}
{{d-button translatedLabel=bs.text class=bs.class disabled=bs.disabled}} {{d-button translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
{{/each}} {{/each}}
@ -22,7 +22,7 @@
{{/each}} {{/each}}
{{/styleguide-example}} {{/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|}} {{#each dummy.buttonSizes as |bs|}}
{{d-button icon="plus" translatedLabel=bs.text class=bs.class disabled=bs.disabled}} {{d-button icon="plus" translatedLabel=bs.text class=bs.class disabled=bs.disabled}}
{{/each}} {{/each}}
@ -34,7 +34,7 @@
{{/each}} {{/each}}
{{/styleguide-example}} {{/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|}} {{#each dummy.buttonSizes as |bs|}}
{{d-button {{d-button
class=(concat "btn-primary " bs.class) class=(concat "btn-primary " bs.class)
@ -56,7 +56,7 @@
{{/each}} {{/each}}
{{/styleguide-example}} {{/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|}} {{#each dummy.buttonSizes as |bs|}}
{{d-button {{d-button
class=(concat "btn-danger " bs.class) class=(concat "btn-danger " bs.class)
@ -78,7 +78,7 @@
{{/each}} {{/each}}
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title=".btn-flat - sizes"}} {{#styleguide-example title=".btn-flat - sizes (large, default, small)"}}
{{#each dummy.buttonSizes as |bs|}} {{#each dummy.buttonSizes as |bs|}}
{{flat-button icon="trash-alt" disabled=bs.disabled translatedTitle=bs.title}} {{flat-button icon="trash-alt" disabled=bs.disabled translatedTitle=bs.title}}
{{/each}} {{/each}}

63
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/05-input-fields.hbs
View File

@ -6,10 +6,65 @@
{{password-field type="password" placeholder="Placeholder"}} {{password-field type="password" placeholder="Placeholder"}}
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title="text-field search"}}
{{text-field type="search" placeholder="Placeholder"}}
{{/styleguide-example}}
{{#styleguide-example title="textarea"}} {{#styleguide-example title="textarea"}}
{{textarea placeholder="Placeholder"}} {{textarea placeholder="Placeholder"}}
{{/styleguide-example}} {{/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}}

20
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/date-time-inputs.hbs
View File

@ -7,9 +7,27 @@
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title="date-time-input"}} {{#styleguide-example title="date-time-input"}}
{{date-time-input}} {{date-time-input clearable=true}}
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title="date-time-input-range"}} {{#styleguide-example title="date-time-input-range"}}
{{date-time-input-range}} {{date-time-input-range}}
{{/styleguide-example}} {{/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}}

4
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/atoms/dropdowns.hbs
View File

@ -47,7 +47,7 @@
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title="dropdown-select-box"}} {{#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}}
{{#styleguide-example title="future-date-input-selector"}} {{#styleguide-example title="future-date-input-selector"}}
@ -61,7 +61,7 @@
{{/styleguide-example}} {{/styleguide-example}}
{{#styleguide-example title="multi-select"}} {{#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}}
{{#styleguide-example title="admin group-chooser"}} {{#styleguide-example title="admin group-chooser"}}

6
plugins/styleguide/assets/javascripts/discourse/templates/styleguide/organisms/navigation.hbs
View File

@ -4,8 +4,10 @@
{{#d-section class="navigation-container"}} {{#d-section class="navigation-container"}}
{{bread-crumbs categories=dummy.categories}} {{bread-crumbs categories=dummy.categories}}
{{navigation-bar navItems=dummy.navItems filterMode="latest"}} {{navigation-bar navItems=dummy.navItems filterMode="latest"}}
{{categories-admin-dropdown}} <div class="navigation-controls">
{{create-topic-button canCreateTopic=true}} {{categories-admin-dropdown}}
{{create-topic-button canCreateTopic=true}}
</div>
{{/d-section}} {{/d-section}}
</div> </div>
</div> </div>

3
plugins/styleguide/assets/stylesheets/styleguide.scss
View File

@ -42,7 +42,6 @@
.styleguide-contents { .styleguide-contents {
flex: 4 0 0; flex: 4 0 0;
font-size: 14px;
} }
.styleguide-section { .styleguide-section {
@ -67,7 +66,7 @@
.styleguide-example { .styleguide-example {
.example-title { .example-title {
color: var(--primary-medium); color: var(--primary-medium);
font-size: var(--font-0); font-size: var(--font-down-1);
border-bottom: 1px solid var(--primary-low); border-bottom: 1px solid var(--primary-low);
margin-bottom: 1em; margin-bottom: 1em;
} }