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

UX: Uniformize styles for focus states (#11933)

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";
}
const verticalOffset = this.multiSelect ? 0 : 3;
const verticalOffset = 3;
this.popper = createPopper(anchor, popper, {
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,
classNames: ["select-kit-body"],
attributeBindings: ["role", "selectKitId:data-select-kit-id"],
classNameBindings: ["emptyBody:empty-body"],
selectKitId: computed("selectKit.uniqueID", function () {
return `${this.selectKit.uniqueID}-body`;
}),
emptyBody: computed("selectKit.{filter,hasNoContent}", function () {
return !this.selectKit.filter && this.selectKit.hasNoContent;
}),
rootEventType: "click",
role: "listbox",

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

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

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

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

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

@ -128,8 +128,8 @@
width: 2.1333em;
height: 2.1333em;
}
&:hover,
&:focus {
.discourse-no-touch &:hover,
.discourse-no-touch &:focus {
background-color: var(--primary-low);
border-top: 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);
padding-top: 0.75em;
margin-top: -1px;
&:focus {
outline: none;
}
h3 {
padding: 0 0.4em;
font-weight: bold;

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

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

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

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

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

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

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

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

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

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

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

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

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

@ -21,9 +21,9 @@
background: var(--secondary);
border: 1px solid var(--primary-medium);
&.is-focused {
box-shadow: shadow("focus");
border-radius: 0;
&.is-focused,
&:focus {
@include default-focus;
}
}
@ -41,19 +41,19 @@
&.is-expanded {
.select-kit-wrapper {
display: block;
border: 1px solid var(--tertiary);
box-shadow: shadow("focus");
border-radius: 0;
}
.multi-select-header {
border-radius: 0;
box-shadow: none;
outline: none;
@include default-focus;
}
.select-kit-body {
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 {
.select-kit-header {
border-color: var(--tertiary);
}
&.is-expanded .select-kit-header:not(.btn),
.select-kit-header:not(.btn):focus,
.select-kit-header:not(.btn):active {
@include default-focus;
}
.select-kit-header.btn:focus,
.select-kit-header.btn:active {
outline: none;
}
&.is-disabled {
.select-kit-header {
opacity: 0.5;