yv01p/Umbraco-CMS
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merge pull request #5389 from umbraco/v8/feature/ui-improve-focus-state-of-umb-form-check

Browse Source 
V8 improved focus state of umb-form-check inputs
This commit is contained in:
Warren Buckley
2019-05-09 10:39:29 +01:00
committed by GitHub
parent 3995c7c521 3a5538730b
commit ac52960938
2 changed files with 16 additions and 11 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/Umbraco.Web.UI.Client/src/controllers/main.controller.js
View File

@@ -25,6 +25,7 @@ function MainController($scope, $location, appState, treeService, notificationsS
function handleFirstTab(evt) {
if (evt.keyCode === 9) {
$scope.tabbingActive = true;
$scope.$digest();
window.removeEventListener('keydown', handleFirstTab);
window.addEventListener('mousedown', disableTabbingActive);
}
@@ -32,6 +33,7 @@ function MainController($scope, $location, appState, treeService, notificationsS
function disableTabbingActive(evt) {
$scope.tabbingActive = false;
$scope.$digest();
window.removeEventListener('mousedown', disableTabbingActive);
window.addEventListener("keydown", handleFirstTab);
}

25
src/Umbraco.Web.UI.Client/src/less/components/umb-form-check.less
View File

@@ -30,23 +30,13 @@
}
&:checked ~ .umb-form-check__state .umb-form-check__check {
border-color: @ui-option-type;
background-color: @ui-option-type;
}
&:checked:hover ~ .umb-form-check__state .umb-form-check__check {
&::before {
background: @ui-option-type-hover;
}
}
&:focus:checked ~ .umb-form-check .umb-form-check__check,
&:focus ~ .umb-form-check__state .umb-form-check__check {
border-color: @inputBorderFocus;
.tabbing-active & {
outline: 2px solid @inputBorderTabFocus;
}
}
&:checked ~ .umb-form-check__state {
.umb-form-check__check {
// This only happens if the state has a radiobutton modifier
@@ -72,6 +62,19 @@
}
}
}
.tabbing-active &.umb-form-check--radiobutton &__input:focus ~ .umb-form-check__state .umb-form-check__check {
//outline: 2px solid @inputBorderTabFocus;
border: 2px solid @inputBorderTabFocus;
margin: -1px;
}
.tabbing-active &.umb-form-check--checkbox &__input:focus ~ .umb-form-check__state .umb-form-check__check {
outline: 2px solid @inputBorderTabFocus;
}
.tabbing-active &.umb-form-check--checkbox &__input:checked:focus ~ .umb-form-check__state .umb-form-check__check {
border-color: white;
}
&__state {
display: flex;