jenkins-bot has submitted this change and it was merged. Change subject: MediaWiki theme: Improve focus states of primary buttons & ToggleSwitchWidget ......................................................................
MediaWiki theme: Improve focus states of primary buttons & ToggleSwitchWidget Improving focus states of primary buttons to be more harmonious with normal buttons. Also moving `oo-ui-toggleSwitchWidget-grip` styles to Apex only as they are not used in MediaWiki theme. Also aligning Less mixins to CSS Coding guidelines. Bug: T137658 Change-Id: I5a083f1682cd10d833e1483c3de15e023ac39ffd --- M src/styles/widgets/ToggleSwitchWidget.less M src/themes/apex/widgets.less M src/themes/mediawiki/common.less M src/themes/mediawiki/elements.less M src/themes/mediawiki/widgets.less 5 files changed, 45 insertions(+), 55 deletions(-) Approvals: Prtksxna: Looks good to me, approved Bartosz Dziewoński: Looks good to me, but someone else must approve jenkins-bot: Verified diff --git a/src/styles/widgets/ToggleSwitchWidget.less b/src/styles/widgets/ToggleSwitchWidget.less index 54cb57b..78c9937 100644 --- a/src/styles/widgets/ToggleSwitchWidget.less +++ b/src/styles/widgets/ToggleSwitchWidget.less @@ -18,21 +18,5 @@ .oo-ui-box-sizing( border-box ); } - .oo-ui-toggleSwitchWidget-glow { - position: absolute; - top: 0; - bottom: 0; - right: 0; - left: 0; - - .oo-ui-unselectable(); - } - - .oo-ui-toggleWidget-off & { - &-glow { - display: none; - } - } - .theme-oo-ui-toggleSwitchWidget(); } diff --git a/src/themes/apex/widgets.less b/src/themes/apex/widgets.less index b429eb7..c9d647d 100644 --- a/src/themes/apex/widgets.less +++ b/src/themes/apex/widgets.less @@ -970,13 +970,18 @@ border-radius: 1em; box-shadow: 0 0 0 #fff, inset 0 0.1em 0.2em #ddd; border: 1px solid #ccc; - .oo-ui-inline-spacing(0.5em); - .oo-ui-vertical-gradient(#ddd, #fff); &.oo-ui-widget-disabled { opacity: 0.5; + } + + &.oo-ui-widget-enabled { + &:hover, + &:hover .oo-ui-toggleSwitchWidget-grip { + border-color: #aaa; + } } &-grip { @@ -989,23 +994,31 @@ box-shadow: 0 0.1em 0.25em rgba( 0, 0, 0, 0.1 ); border: 1px #c9c9c9 solid; - .oo-ui-transition(left @medium-ease, margin-left @medium-ease); - .oo-ui-vertical-gradient(#fff, #ddd); + .oo-ui-transition( left @medium-ease, margin-left @medium-ease ); + .oo-ui-vertical-gradient( #fff, #ddd ); } - &.oo-ui-widget-enabled { - &:hover, - &:hover .oo-ui-toggleSwitchWidget-grip { - border-color: #aaa; - } - } - - .oo-ui-toggleSwitchWidget-glow { + &-glow { + position: absolute; + top: 0; + bottom: 0; + right: 0; + left: 0; border-radius: 1em; box-shadow: inset 0 1px 4px 0 rgba( 0, 0, 0, 0.07 ); + .oo-ui-transition( opacity @medium-ease ); + .oo-ui-vertical-gradient( #b0d9ee, #eaf4fa ); + .oo-ui-unselectable(); + } - .oo-ui-transition(opacity @medium-ease); - .oo-ui-vertical-gradient(#b0d9ee, #eaf4fa); + .oo-ui-toggleWidget-off & { + &-glow { + opacity: 0; + } + &-grip { + left: 0.25em; + margin-left: 0; + } } .oo-ui-toggleWidget-on & { @@ -1015,17 +1028,6 @@ &-grip { left: @travelDistance + 0.25em; margin-left: -2px; - } - } - - .oo-ui-toggleWidget-off & { - &-glow { - display: block; - opacity: 0; - } - &-grip { - left: 0.25em; - margin-left: 0; } } } diff --git a/src/themes/mediawiki/common.less b/src/themes/mediawiki/common.less index bc421c5..3bd5c2f 100644 --- a/src/themes/mediawiki/common.less +++ b/src/themes/mediawiki/common.less @@ -50,12 +50,13 @@ @border-color-progressive-active: #859dcc; // equivalents `fade( @color-progressive-active, 50% )` @border-color-destructive-active: #b77c79; // equivalents `fade( @color-destructive-active, 50% )` +@border-color-focus-inset: @color-default-light; @box-shadow-dialog: 0 0.15em 0 0 rgba( 0, 0, 0, 0.15 ); @box-shadow-menu: @box-shadow-dialog; @box-shadow-popup: @box-shadow-dialog; @box-shadow-focus-default: inset 0 0 0 1px @color-progressive; -@box-shadow-light-inset: inset 0 0 0 1px @color-default-light; +@box-shadow-focus-inset: inset 0 0 0 1px @color-progressive, inset 0 0 0 2px @color-default-light; @text-shadow-default: 0 1px 1px #fff; // 'coined' effect @text-shadow-disabled: @text-shadow-default; diff --git a/src/themes/mediawiki/elements.less b/src/themes/mediawiki/elements.less index b704e02..d7adba3 100644 --- a/src/themes/mediawiki/elements.less +++ b/src/themes/mediawiki/elements.less @@ -298,7 +298,7 @@ > .oo-ui-buttonElement-button:focus { border-color: @focus; - box-shadow: @box-shadow-light-inset; + box-shadow: inset 0 0 0 1px @focus, inset 0 0 0 2px @color-default-light; } } } diff --git a/src/themes/mediawiki/widgets.less b/src/themes/mediawiki/widgets.less index f1134d4..97bd95a 100644 --- a/src/themes/mediawiki/widgets.less +++ b/src/themes/mediawiki/widgets.less @@ -1242,13 +1242,16 @@ content: ""; display: block; position: absolute; - top: 0; - left: 0; - bottom: 0; - right: 0; + top: 1px; + left: 1px; + bottom: 1px; + right: 1px; border: 1px solid transparent; border-radius: 1em; z-index: 1; + .oo-ui-transition( + border-color @transition-ease-quick + ); } &-grip { @@ -1270,17 +1273,17 @@ display: none; } - &.oo-ui-toggleWidget-on { - .oo-ui-toggleSwitchWidget-grip { - left: @travelDistance + 0.4em; - margin-left: -2px; - } - } - &.oo-ui-toggleWidget-off { .oo-ui-toggleSwitchWidget-grip { left: 0.4em; margin-left: 0; + } + } + + &.oo-ui-toggleWidget-on { + .oo-ui-toggleSwitchWidget-grip { + left: @travelDistance + 0.4em; + margin-left: -2px; } } @@ -1311,7 +1314,7 @@ border-color: @color-progressive; &:before { - border-color: #fff; + border-color: @border-color-focus-inset; } } } -- To view, visit https://gerrit.wikimedia.org/r/294014 To unsubscribe, visit https://gerrit.wikimedia.org/r/settings Gerrit-MessageType: merged Gerrit-Change-Id: I5a083f1682cd10d833e1483c3de15e023ac39ffd Gerrit-PatchSet: 1 Gerrit-Project: oojs/ui Gerrit-Branch: master Gerrit-Owner: VolkerE <volke...@wikimedia.org> Gerrit-Reviewer: Bartosz Dziewoński <matma....@gmail.com> Gerrit-Reviewer: Pginer <pgi...@wikimedia.org> Gerrit-Reviewer: Prtksxna <psax...@wikimedia.org> Gerrit-Reviewer: jenkins-bot <> _______________________________________________ MediaWiki-commits mailing list MediaWiki-commits@lists.wikimedia.org https://lists.wikimedia.org/mailman/listinfo/mediawiki-commits