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

UX: Make button icons use lighter color instead of opacity

This commit is contained in:
Kris 2019-01-31 13:59:49 -05:00
parent 886ba9dff9
commit 94f16ba931
13 changed files with 93 additions and 39 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -78,11 +78,10 @@
<td class="col actions">
{{#unless item.editing}}
{{d-button
class="btn-default"
class="btn-default btn-danger"
action=(action "destroy")
actionParam=item
icon="far-trash-alt"
class="btn-danger"}}
icon="far-trash-alt"}}
{{d-button
class="btn-default"
action=(action "edit")

6
app/assets/javascripts/discourse/controllers/history.js.es6
View File

@ -199,17 +199,17 @@ export default Ember.Controller.extend(ModalFunctionality, {
@computed("displayingInline")
inlineClass(displayingInline) {
return displayingInline ? "btn-primary" : "";
return displayingInline ? "btn-danger" : "btn-flat";
},
@computed("displayingSideBySide")
sideBySideClass(displayingSideBySide) {
return displayingSideBySide ? "btn-primary" : "";
return displayingSideBySide ? "btn-danger" : "btn-flat";
},
@computed("displayingSideBySideMarkdown")
sideBySideMarkdownClass(displayingSideBySideMarkdown) {
return displayingSideBySideMarkdown ? "btn-primary" : "";
return displayingSideBySideMarkdown ? "btn-danger" : "btn-flat";
},
@computed("model.category_id_changes")

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

@ -137,6 +137,10 @@
display: inline-block;
vertical-align: top;
.btn {
line-height: $line-height-medium; // Temporary button-height fix
}
.title {
font-size: $font-up-4;
font-weight: bold;

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

@ -98,7 +98,7 @@
display: flex;
align-items: center;
.d-icon {
color: $primary-high;
color: $primary-medium;
}
.reply-details {
max-width: calc(100% - 175px);

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

@ -100,10 +100,6 @@
width: 2.2857em;
height: 2.2857em;
padding: 0.2143em;
color: dark-light-choose(
scale-color($header_primary, $lightness: 50%),
$header_primary
);
text-decoration: none;
cursor: pointer;
border-top: 1px solid transparent;
@ -117,7 +113,6 @@
}
&:hover,
&:focus {
color: $primary;
background-color: $primary-low;
border-top: 1px solid transparent;
border-left: 1px solid transparent;
@ -131,13 +126,14 @@
.drop-down-mode & {
.active .icon {
position: relative;
color: #7b7b7b;
background-color: $secondary;
cursor: default;
border-top: 1px solid $primary-low;
border-left: 1px solid $primary-low;
border-right: 1px solid $primary-low;
.d-icon {
color: $primary-medium;
}
&:after {
display: block;
position: absolute;
@ -160,6 +156,7 @@
font-size: $font-up-4;
line-height: $line-height-large;
display: inline-block;
color: $header_primary-low-mid;
}
.notifications {
position: relative;

7
app/assets/stylesheets/common/base/menu-panel.scss
View File

@ -153,11 +153,12 @@
margin: 0.5em 0;
}
.fa {
color: dark-light-choose($primary-medium, $secondary-medium);
.d-icon,
&:hover .d-icon {
color: $primary-medium;
}
.icon {
color: dark-light-choose($primary-high, $secondary-low);
color: $primary-high;
}
li {
background-color: $tertiary-low;

3
app/assets/stylesheets/common/base/modal.scss
View File

@ -318,6 +318,9 @@
.d-modal-cancel {
margin-left: 1em;
color: $primary-medium;
&:hover {
color: $danger;
}
}
.delete-user-modal {

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

@ -17,7 +17,9 @@
transition: all 0.25s;
box-sizing: border-box;
min-height: 30px;
.d-icon {
transition: color 0.25s;
}
&:active,
&.btn-active {
text-shadow: none;
@ -49,6 +51,9 @@
color: $primary;
font-weight: normal;
background: $primary-low;
.d-icon {
color: $primary-high;
}
&[href] {
color: $primary;
@ -60,24 +65,29 @@
&.btn-hover {
background: $primary-medium;
color: $secondary;
.d-icon {
color: $secondary-very-high;
}
}
}
&[disabled],
&.disabled {
background: $primary-low;
.d-icon {
color: $primary-medium;
}
&:hover {
color: dark-light-choose($primary-low-mid, $secondary-high);
.d-icon {
color: $primary-low-mid;
}
}
cursor: not-allowed;
}
.d-icon {
opacity: 0.7;
line-height: $line-height-medium; // Match button text line-height
}
&.btn-primary .d-icon {
opacity: 1;
}
}
// Primary button
@ -88,7 +98,9 @@
font-weight: normal;
color: $secondary;
background: $tertiary;
.d-icon {
color: currentColor;
}
&[href] {
color: $secondary;
}
@ -100,6 +112,9 @@
scale-color($tertiary, $lightness: -20%),
scale-color($tertiary, $lightness: 20%)
);
.d-icon {
color: currentColor;
}
}
}
&:active,
@ -112,6 +127,9 @@
&[disabled],
&.disabled {
background: $tertiary;
.d-icon {
color: currentColor;
}
}
}
@ -122,6 +140,9 @@
color: $secondary;
font-weight: normal;
background: $danger;
.d-icon {
color: $danger-low;
}
&[href] {
color: $secondary;
}
@ -133,6 +154,9 @@
scale-color($danger, $lightness: -20%),
scale-color($danger, $lightness: 20%)
);
.d-icon {
color: $danger-low;
}
}
}
&:active,
@ -142,6 +166,9 @@
&[disabled],
&.disabled {
background: $danger;
.d-icon {
color: $danger-low;
}
}
}
@ -214,7 +241,13 @@
border: 0;
outline: 0;
line-height: $line-height-small;
transition: color .25s, background .25s;
.d-icon {
opacity: 0.7;
color: $primary-low-mid;
}
&:hover {
.d-icon {
color: $primary;
}
}
}

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

@ -82,9 +82,11 @@
.btn,
.btn-default {
background-color: transparent;
color: $primary-high;
padding: 4px 8px;
display: inline-block;
.d-icon {
color: $primary-medium;
}
@media all and (max-width: 800px) {
padding: 5px;
}

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

@ -203,9 +203,12 @@ $primary-low: dark-light-diff($primary, $secondary, 90%, -78%);
$primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%);
$primary-medium: dark-light-diff($primary, $secondary, 50%, -35%);
$primary-high: dark-light-diff($primary, $secondary, 30%, -25%);
$primary-very-high: dark-light-diff($primary, $secondary, 15%, -10%);
//header_primary
$header_primary-low: dark-light-diff($header_primary, $secondary, 90%, -78%);
$header_primary-low-mid: dark-light-diff($primary, $secondary, 70%, -45%);
$header_primary-medium: dark-light-diff($header_primary, $secondary, 50%, -35%);
$header_primary-high: dark-light-diff(
$header_primary,
@ -213,11 +216,18 @@ $header_primary-high: dark-light-diff(
30%,
-25%
);
$header_primary-very-high: dark-light-diff(
$header_primary,
$header_background,
15%,
-10%
);
//secondary
$secondary-low: dark-light-diff($secondary, $primary, 70%, -70%);
$secondary-medium: dark-light-diff($secondary, $primary, 50%, -50%);
$secondary-high: dark-light-diff($secondary, $primary, 30%, -35%);
$secondary-very-high: dark-light-diff($secondary, $primary, 7%, -7%);
//tertiary
$tertiary-low: dark-light-diff($tertiary, $secondary, 85%, -65%);

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

@ -55,7 +55,7 @@
}
.d-icon {
opacity: 0.7;
color: $primary-high;
}
.select-kit-header {

9
app/assets/stylesheets/desktop/history.scss
View File

@ -20,15 +20,6 @@
text-align: right;
display: inline-block;
float: right;
.btn {
background-color: inherit;
color: blend-primary-secondary(50%);
}
.btn-primary {
color: $primary;
font-weight: bold;
}
}
#revisions {

22
app/assets/stylesheets/desktop/topic-post.scss
View File

@ -23,7 +23,7 @@
.actions .fade-out {
.discourse-no-touch & {
opacity: 0.7;
transition: opacity 0.7s ease-in-out;
transition: background 0.25s, opacity 0.7s ease-in-out;
}
.discourse-touch & {
opacity: 1;
@ -65,6 +65,9 @@ nav.post-controls {
.d-hover {
background: none;
}
.d-icon {
color: $love;
}
}
&:active {
box-shadow: inset 0 1px 3px rgba(0, 0, 0, 0.4);
@ -146,6 +149,9 @@ nav.post-controls {
margin-right: 0;
color: dark-light-choose($primary-high, $secondary-low);
margin-left: 10px;
.d-icon {
color: dark-light-choose($primary-high, $secondary-low);
}
}
.create .d-icon {
margin-right: 5px;
@ -172,16 +178,23 @@ nav.post-controls {
position: relative;
}
&.delete.d-hover,
&.delete:hover,
&.delete:focus {
background: $danger;
color: $secondary;
.d-icon {
color: $secondary;
}
}
&.like.d-hover,
&.like:focus {
color: $love;
background: $love-low;
.d-icon {
color: $love;
}
}
&.has-like {
&.has-like .d-icon {
color: $love;
}
&.has-like[disabled]:hover {
@ -192,7 +205,7 @@ nav.post-controls {
}
&.bookmark {
padding: 8px 11px;
&.bookmarked {
&.bookmarked .d-icon {
color: $tertiary;
}
}
@ -364,7 +377,8 @@ nav.post-controls {
font-size: $font-up-2;
line-height: $line-height-medium;
}
button .d-icon {
button .d-icon,
button:hover .d-icon {
color: $primary-high;
}
.avatar a {