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

Merge pull request #5339 from umbraco/v8/feature/ui-hover-and-focus-outline-on-umb-checkbox-and-umb-radio

Browse Source 
focus outline + hover states for umb-checkbox and umb-radio
This commit is contained in:
Warren Buckley
2019-04-26 10:18:33 +01:00
committed by GitHub
parent 2470a2737f f7dce756a7
commit 6dc343f9d8
1 changed files with 14 additions and 1 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -16,6 +16,7 @@
margin: 0 0 0 26px;
position: relative;
top: 0;
user-select: none;
}
&__input {
@@ -23,14 +24,26 @@
top: 0;
left: 0;
opacity: 0;
&:hover ~ .umb-form-check__state .umb-form-check__check {
border-color: @inputBorderFocus;
}
&:checked ~ .umb-form-check__state .umb-form-check__check {
border-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 {