discourse/discourse
1
0
Fork 0
mirror of https://github.com/discourse/discourse.git synced 2025-03-09 14:34:35 +00:00
Code Issues Packages Projects Releases Wiki Activity

UX: Uniformize styles for focus states (#11933)

Browse Source
This commit is contained in:
Penar Musaraj 2021-02-03 11:45:54 -05:00 committed by GitHub
parent 04dd4a75af
commit 2dc48fd6c1
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
15 changed files with 72 additions and 59 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
app/assets/javascripts/select-kit/addon/components/select-kit.js
View File

@ -789,7 +789,7 @@ export default Component.extend(
placementStrategy = inModal ? "fixed" : "absolute"; placementStrategy = inModal ? "fixed" : "absolute";
} }
const verticalOffset = this.multiSelect ? 0 : 3; const verticalOffset = 3;
this.popper = createPopper(anchor, popper, { this.popper = createPopper(anchor, popper, {
eventsEnabled: false, eventsEnabled: false,

4
app/assets/javascripts/select-kit/addon/components/select-kit/select-kit-body.js
View File

@ -7,9 +7,13 @@ export default Component.extend({
layout, layout,
classNames: ["select-kit-body"], classNames: ["select-kit-body"],
attributeBindings: ["role", "selectKitId:data-select-kit-id"], attributeBindings: ["role", "selectKitId:data-select-kit-id"],
classNameBindings: ["emptyBody:empty-body"],
selectKitId: computed("selectKit.uniqueID", function () { selectKitId: computed("selectKit.uniqueID", function () {
return `${this.selectKit.uniqueID}-body`; return `${this.selectKit.uniqueID}-body`;
}), }),
emptyBody: computed("selectKit.{filter,hasNoContent}", function () {
return !this.selectKit.filter && this.selectKit.hasNoContent;
}),
rootEventType: "click", rootEventType: "click",
role: "listbox", role: "listbox",

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

@ -28,6 +28,9 @@
border: 1px solid var(--primary-medium); border: 1px solid var(--primary-medium);
font-size: $font-0; font-size: $font-0;
transition: none; transition: none;
&:focus {
border-color: var(--tertiary);
}
} }
.select-kit { .select-kit {
.select-kit-collection { .select-kit-collection {

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

@ -186,6 +186,10 @@ textarea {
border-color: var(--primary-low); border-color: var(--primary-low);
} }
&:focus {
@include default-focus;
}
&:focus:required:invalid { &:focus:required:invalid {
color: var(--danger); color: var(--danger);
border-color: var(--danger); border-color: var(--danger);
@ -225,9 +229,7 @@ input {
box-sizing: border-box; box-sizing: border-box;
min-height: 30px; min-height: 30px;
&:focus { &:focus {
border-color: var(--tertiary); @include default-focus;
box-shadow: shadow("focus");
outline: 0;
} }
} }
} }
@ -287,9 +289,7 @@ textarea {
background-color: var(--secondary); background-color: var(--secondary);
border: 1px solid var(--primary-medium); border: 1px solid var(--primary-medium);
&:focus { &:focus {
border-color: var(--tertiary); @include default-focus;
box-shadow: shadow("focus");
outline: 0;
} }
} }

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

@ -128,8 +128,8 @@
width: 2.1333em; width: 2.1333em;
height: 2.1333em; height: 2.1333em;
} }
&:hover, .discourse-no-touch &:hover,
&:focus { .discourse-no-touch &:focus {
background-color: var(--primary-low); background-color: var(--primary-low);
border-top: 1px solid transparent; border-top: 1px solid transparent;
border-left: 1px solid transparent; border-left: 1px solid transparent;

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

@ -207,6 +207,9 @@
border-top: 1px solid var(--primary-low); border-top: 1px solid var(--primary-low);
padding-top: 0.75em; padding-top: 0.75em;
margin-top: -1px; margin-top: -1px;
&:focus {
outline: none;
}
h3 { h3 {
padding: 0 0.4em; padding: 0 0.4em;
font-weight: bold; font-weight: bold;

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

@ -44,6 +44,14 @@
color: $hover-icon-color; color: $hover-icon-color;
} }
} }
&:focus {
outline: none;
background: $hover-bg-color;
color: $hover-text-color;
.d-icon {
color: $hover-icon-color;
}
}
&[href] { &[href] {
color: $text-color; color: $text-color;
} }
@ -177,14 +185,16 @@
.d-icon { .d-icon {
opacity: 0.9; opacity: 0.9;
} }
&:hover { &:hover,
&:focus {
color: currentColor; color: currentColor;
background: var(--google-hover); background: var(--google-hover);
} }
} }
&.facebook { &.facebook {
background: $facebook; background: $facebook;
&:hover { &:hover,
&:focus {
background: var(--facebook-hover); background: var(--facebook-hover);
} }
} }
@ -193,19 +203,22 @@
} }
&.twitter { &.twitter {
background: var(--twitter); background: var(--twitter);
&:hover { &:hover,
&:focus {
background: var(--twitter-hover); background: var(--twitter-hover);
} }
} }
&.github { &.github {
background: var(--github); background: var(--github);
&:hover { &:hover,
&:focus {
background: var(--github-hover); background: var(--github-hover);
} }
} }
&.discord { &.discord {
background: var(--discord); background: var(--discord);
&:hover { &:hover,
&:focus {
background: var(--discord-hover); background: var(--discord-hover);
} }
} }
@ -236,7 +249,6 @@
.btn-flat { .btn-flat {
background: transparent; background: transparent;
border: 0; border: 0;
outline: 0;
line-height: $line-height-small; line-height: $line-height-small;
transition: color 0.25s, background 0.25s; transition: color 0.25s, background 0.25s;
.d-icon { .d-icon {
@ -267,10 +279,6 @@
.btn-link { .btn-link {
background: transparent; background: transparent;
border: 0; border: 0;
outline: 0;
padding: 0; padding: 0;
color: var(--tertiary); color: var(--tertiary);
&:focus {
outline: 1px currentColor dotted;
}
} }

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

@ -27,8 +27,7 @@
} }
&:focus { &:focus {
outline: 1px solid var(--tertiary); @include default-focus;
outline-offset: 0;
} }
} }

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

@ -6,7 +6,7 @@
.date-picker, .date-picker,
.fields { .fields {
border: 0; border-color: transparent;
} }
.d-date-time-input { .d-date-time-input {
@ -15,9 +15,9 @@
} }
.d-time-input { .d-time-input {
.select-kit.combo-box { .combo-box {
.select-kit-header { .select-kit-header {
border: none; border-color: transparent;
} }
} }
} }

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

@ -27,7 +27,11 @@
} }
&.in-focus { &.in-focus {
border-color: $tertiary; @include default-focus;
textarea {
outline: 0;
}
} }
&.disabled { &.disabled {
@ -110,11 +114,6 @@
word-wrap: break-word; word-wrap: break-word;
-webkit-appearance: none; -webkit-appearance: none;
border-radius: 0; border-radius: 0;
&:focus {
box-shadow: none;
border: 0;
outline: 0;
}
} }
.d-editor-input { .d-editor-input {

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

@ -112,6 +112,12 @@ $breakpoints: (
appearance: none; appearance: none;
} }
@mixin default-focus() {
border-color: var(--tertiary);
outline: 1px solid var(--tertiary);
outline-offset: 0;
}
@mixin fa-rotate($degrees, $rotation) { @mixin fa-rotate($degrees, $rotation) {
-ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})"; -ms-filter: "progid:DXImageTransform.Microsoft.BasicImage(rotation=#{$rotation})";
-webkit-transform: rotate($degrees); -webkit-transform: rotate($degrees);

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

@ -150,7 +150,7 @@ $box-shadow: (
0 2px 0 rgba(0, 0, 0, 0.2), 0 2px 0 rgba(0, 0, 0, 0.2),
0 0 0 1px dark-light-choose(#fff, #000) inset, 0 0 0 1px dark-light-choose(#fff, #000) inset,
), ),
"focus": 0 0 6px 0 $tertiary, "focus": 0 0 3px 0 $tertiary,
"focus-danger": 0 0 6px 0 $danger, "focus-danger": 0 0 6px 0 $danger,
); );

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

@ -34,8 +34,7 @@
font-size: $font-0; font-size: $font-0;
&.is-focused { &.is-focused {
border: 1px solid var(--tertiary); @include default-focus;
box-shadow: shadow("focus");
} }
} }
@ -75,26 +74,14 @@
&.is-highlighted { &.is-highlighted {
.select-kit-header { .select-kit-header {
border: 1px solid var(--tertiary); @include default-focus;
box-shadow: shadow("focus");
} }
} }
&.is-expanded { &.is-expanded {
.select-kit-wrapper { .select-kit-wrapper {
display: block; display: block;
border: 1px solid var(--tertiary); @include default-focus;
box-shadow: shadow("focus");
}
}
&.is-expanded.is-above {
.select-kit-header {
border-radius: 0 0 3px 3px;
}
.select-kit-body {
border-radius: 3px 3px 0 0;
} }
} }

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

@ -21,9 +21,9 @@
background: var(--secondary); background: var(--secondary);
border: 1px solid var(--primary-medium); border: 1px solid var(--primary-medium);
&.is-focused { &.is-focused,
box-shadow: shadow("focus"); &:focus {
border-radius: 0; @include default-focus;
} }
} }
@ -41,19 +41,19 @@
&.is-expanded { &.is-expanded {
.select-kit-wrapper { .select-kit-wrapper {
display: block; display: block;
border: 1px solid var(--tertiary);
box-shadow: shadow("focus");
border-radius: 0;
} }
.multi-select-header { .multi-select-header {
border-radius: 0; border-radius: 0;
box-shadow: none; @include default-focus;
outline: none;
} }
.select-kit-body { .select-kit-body {
border-radius: 0; border-radius: 0;
box-shadow: shadow("dropdown");
&.empty-body {
visibility: hidden;
}
} }
} }

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

@ -9,12 +9,16 @@
} }
} }
&.is-expanded { &.is-expanded .select-kit-header:not(.btn),
.select-kit-header { .select-kit-header:not(.btn):focus,
border-color: var(--tertiary); .select-kit-header:not(.btn):active {
} @include default-focus;
} }
.select-kit-header.btn:focus,
.select-kit-header.btn:active {
outline: none;
}
&.is-disabled { &.is-disabled {
.select-kit-header { .select-kit-header {
opacity: 0.5; opacity: 0.5;