REFACTOR: Convert buttons to flexbox (#11785)
This commit is contained in:
Kris
GitHub
parent
809274fe0d
commit
f1d5d2b134
|
|
@ -6,4 +6,4 @@
|
|||
{{/each}}
|
||||
</div>
|
||||
<div class="instructions">{{i18n "user.ignored_users_instructions"}}</div>
|
||||
<div>{{#d-button action=(action "newIgnoredUser") class="btn-default" icon="plus"}}{{i18n "user.user_notifications.add_ignored_user"}}{{/d-button}}</div>
|
||||
<div>{{d-button action=(action "newIgnoredUser") class="btn-default" icon="plus" label="user.user_notifications.add_ignored_user"}}</div>
|
||||
|
|
|
|||
|
|
@ -89,16 +89,18 @@
|
|||
</div>
|
||||
</section>
|
||||
|
||||
{{d-button
|
||||
class="btn-default"
|
||||
action=(action "save")
|
||||
disabled=savingDisabled
|
||||
label="tagging.groups.save"}}
|
||||
<div class="tag-group-controls">
|
||||
{{d-button
|
||||
class="btn-default"
|
||||
action=(action "save")
|
||||
disabled=savingDisabled
|
||||
label="tagging.groups.save"}}
|
||||
|
||||
{{d-button
|
||||
class="btn-danger"
|
||||
action=(action "destroy")
|
||||
disabled=buffered.isNew
|
||||
icon="far-trash-alt"
|
||||
label="tagging.groups.delete"}}
|
||||
{{d-button
|
||||
class="btn-danger"
|
||||
action=(action "destroy")
|
||||
disabled=buffered.isNew
|
||||
icon="far-trash-alt"
|
||||
label="tagging.groups.delete"}}
|
||||
</div>
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -67,7 +67,7 @@
|
|||
</li>
|
||||
{{/if}}
|
||||
{{#if currentUser.staff}}
|
||||
<li><a href={{model.adminPath}} class="btn btn-default">{{d-icon "wrench"}}{{i18n "admin.user.show_admin_profile"}}</a></li>
|
||||
<li><a href={{model.adminPath}} class="btn btn-default">{{d-icon "wrench"}}<span class="d-button-label">{{i18n "admin.user.show_admin_profile"}}</span></a></li>
|
||||
{{/if}}
|
||||
{{plugin-outlet name="user-profile-controls"
|
||||
tagName=""
|
||||
|
|
|
|||
|
|
@ -34,18 +34,6 @@
|
|||
max-height: 40vh;
|
||||
}
|
||||
}
|
||||
|
||||
@include breakpoint(medium) {
|
||||
// hide button labels to save space
|
||||
.btn {
|
||||
.d-button-label {
|
||||
display: none;
|
||||
}
|
||||
.d-icon {
|
||||
margin: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navigation-container {
|
||||
|
|
@ -81,6 +69,14 @@
|
|||
> * {
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
.show-more {
|
||||
|
|
|
|||
|
|
@ -122,6 +122,7 @@
|
|||
}
|
||||
|
||||
.action-title {
|
||||
line-height: normal;
|
||||
@include ellipsis;
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -162,14 +162,22 @@
|
|||
}
|
||||
|
||||
.modal-footer {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
align-items: center;
|
||||
padding: 14px 15px 10px;
|
||||
border-top: 1px solid var(--primary-low);
|
||||
.btn {
|
||||
margin: 0 5px 5px 0;
|
||||
margin: 0 0.3em 0 0;
|
||||
&[href] {
|
||||
min-height: unset;
|
||||
}
|
||||
}
|
||||
|
||||
.btn,
|
||||
a {
|
||||
margin-bottom: 0.3em;
|
||||
}
|
||||
}
|
||||
|
||||
.modal {
|
||||
|
|
|
|||
|
|
@ -19,12 +19,12 @@
|
|||
}
|
||||
|
||||
.btn {
|
||||
display: flex;
|
||||
text-align: left;
|
||||
justify-content: left;
|
||||
background: none;
|
||||
width: 100%;
|
||||
padding: 0.75em;
|
||||
border-radius: 0;
|
||||
margin: 0;
|
||||
|
||||
.d-icon {
|
||||
color: var(--primary-medium);
|
||||
|
|
|
|||
|
|
@ -188,11 +188,6 @@
|
|||
width: auto;
|
||||
}
|
||||
|
||||
.refresh {
|
||||
height: 1em;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.score-filter {
|
||||
width: 5em;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -11,7 +11,7 @@
|
|||
.search-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
align-items: stretch;
|
||||
margin-bottom: 1em;
|
||||
|
||||
.search-query {
|
||||
|
|
|
|||
|
|
@ -258,6 +258,9 @@ header .discourse-tag {
|
|||
margin-bottom: 10px;
|
||||
}
|
||||
}
|
||||
.tag-group-controls {
|
||||
display: flex;
|
||||
}
|
||||
.group-tags-list .tag-chooser {
|
||||
width: 100%;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1077,32 +1077,20 @@ a.mention-group {
|
|||
}
|
||||
|
||||
#topic-footer-buttons {
|
||||
padding: 0.5em 0;
|
||||
padding: 0.75em 0;
|
||||
|
||||
.topic-footer-main-buttons {
|
||||
margin: 0 0 -0.5em 0;
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
|
||||
> .btn {
|
||||
margin: 0 0.5em 0.5em 0;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
|
||||
.d-button-label {
|
||||
display: flex;
|
||||
flex: 1 0 auto;
|
||||
align-items: center;
|
||||
}
|
||||
button {
|
||||
margin-right: 0.54em;
|
||||
height: 100%; // helps select-kit buttons match height
|
||||
}
|
||||
|
||||
.topic-admin-menu-button-container {
|
||||
display: inline-flex;
|
||||
}
|
||||
|
||||
.topic-admin-menu-button-container > span:not(:empty) {
|
||||
margin: 0 0.5em 0.5em 0;
|
||||
}
|
||||
}
|
||||
|
||||
.pinned-button:not(.is-hidden) + .topic-notifications-button {
|
||||
|
|
|
|||
|
|
@ -217,7 +217,6 @@
|
|||
|
||||
.btn {
|
||||
margin-bottom: 10px;
|
||||
line-height: $line-height-medium;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -13,25 +13,24 @@
|
|||
$hover-bg-color: var(--primary-medium),
|
||||
$hover-icon-color: var(--primary-low)
|
||||
) {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
padding: 6px 12px;
|
||||
min-height: 30px;
|
||||
border: none;
|
||||
box-sizing: border-box;
|
||||
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;
|
||||
font-size: $font-0;
|
||||
line-height: $line-height-small;
|
||||
text-align: center;
|
||||
cursor: pointer;
|
||||
transition: all 0.25s;
|
||||
.d-icon {
|
||||
color: $icon-color;
|
||||
margin-right: 0.45em;
|
||||
transition: color 0.25s;
|
||||
line-height: $line-height-medium; // Match button text line-height
|
||||
}
|
||||
&.no-text {
|
||||
.d-icon {
|
||||
|
|
|
|||
|
|
@ -22,6 +22,7 @@
|
|||
@extend .clearfix;
|
||||
|
||||
> li {
|
||||
display: flex;
|
||||
float: left;
|
||||
margin-right: 0.5em;
|
||||
|
||||
|
|
|
|||
|
|
@ -263,7 +263,7 @@
|
|||
// shared styles for all font sizes
|
||||
.btn,
|
||||
.btn-default {
|
||||
padding: 0 0.5em;
|
||||
padding: 0.5em;
|
||||
}
|
||||
.d-editor-spacer {
|
||||
margin: 0 0.25em;
|
||||
|
|
|
|||
|
|
@ -186,15 +186,11 @@
|
|||
> ul {
|
||||
display: inline-flex;
|
||||
> li {
|
||||
display: inline;
|
||||
margin-left: 12px;
|
||||
.d-button-label {
|
||||
line-height: 1;
|
||||
}
|
||||
display: inline-flex;
|
||||
margin-left: 0.75em;
|
||||
}
|
||||
|
||||
a {
|
||||
margin-bottom: 10px;
|
||||
width: auto;
|
||||
}
|
||||
}
|
||||
|
|
|
|||
|
|
@ -237,9 +237,19 @@ a.reply-to-tab {
|
|||
color: var(--tertiary);
|
||||
}
|
||||
|
||||
.topic-footer-main-buttons {
|
||||
display: flex;
|
||||
align-items: stretch;
|
||||
}
|
||||
|
||||
.topic-footer-mobile-dropdown {
|
||||
margin: 0 0.5em 0.5em 0;
|
||||
margin: 0 0.75em 0 0;
|
||||
width: 160px;
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.select-kit-header {
|
||||
height: 100%;
|
||||
}
|
||||
|
||||
.topic-notifications-button,
|
||||
|
|
|
|||
|
|
@ -201,7 +201,7 @@
|
|||
flex: 1;
|
||||
@include ellipsis;
|
||||
width: 100%;
|
||||
text-align: left;
|
||||
justify-content: flex-start;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
|
|||
Loading…
Reference in New Issue