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

focus outline + hover states for umb-checkbox and umb-radio

Browse Source
This commit is contained in:
Niels Lyngsø
2019-04-24 15:50:57 +02:00
parent 5f5b21b43e
commit f7dce756a7
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 {