mbk-lab
/
nextcloud
2
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

Merge pull request #3341 from nextcloud/transparent-white-checkbox 

Transparent white checkbox
This commit is contained in:
Jan-Christoph Borchardt 2017-02-14 19:32:39 +01:00 committed by GitHub
parent c5dffc465c 8d5bb0b908
commit 9f74858537
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

12
core/css/inputs.scss
View File

@ -265,16 +265,13 @@ input {
&.radio--white, &.radio--white,
&.checkbox--white { &.checkbox--white {
+ label:before { + label:before {
border-color: #aaa; border-color: #ddd;
} }
&:not(:disabled):not(:checked) + label:hover:before, &:not(:disabled):not(:checked) + label:hover:before,
&:focus + label:before { &:focus + label:before {
border-color: #fff; border-color: #fff;
} }
&:checked + label:before, &:checked + label:before {
&.checkbox:indeterminate + label:before {
/* ^ :indeterminate have a strange behavior on radio,
so we respecified the checkbox class again to be safe */
box-shadow: inset 0px 0px 0px 2px #000; box-shadow: inset 0px 0px 0px 2px #000;
background-color: #eee; background-color: #eee;
border-color: #eee border-color: #eee
@ -290,7 +287,10 @@ input {
} }
} }
&.checkbox--white { &.checkbox--white {
&:checked + label:before { &:checked + label:before,
&:indeterminate + label:before {
background-color: transparent !important; /* Override default checked */
border-color: #fff !important; /* Override default checked */
background-image: url('../img/actions/checkbox-mark-white.svg'); background-image: url('../img/actions/checkbox-mark-white.svg');
} }
&:indeterminate + label:before { &:indeterminate + label:before {

5
core/img/actions/checkbox-mark-white.svg
View File

@ -1 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" height="16" width="16"><path d="M11.924 4.066l-4.932 4.97-2.828-2.83L2.75 7.618l4.242 4.243 6.365-6.365-1.433-1.432z"/></svg> <?xml version="1.0" encoding="UTF-8"?>
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="m0 0v16h16v-16h-16zm11.924 4.0664l1.4336 1.4297-6.3652 6.3652-4.2422-4.2441 1.4141-1.4121 2.8281 2.8301 4.9316-4.9688z" fill="#fff"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 165 B

After

Width:  |  Height:  |  Size: 268 B

5
core/img/actions/checkbox-mixed-white.svg
View File

@ -1 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16"><path d="M4 7v2h8V7H4z"/></svg> <?xml version="1.0" encoding="UTF-8"?>
<svg width="16" height="16" version="1.1" xmlns="http://www.w3.org/2000/svg">
<path d="m0 0v16h16v-16h-16zm4 7h8v2h-8v-2z" fill="#fff"/>
</svg>

Side by Side Swipe Overlay

Before

Width:  |  Height:  |  Size: 94 B

After

Width:  |  Height:  |  Size: 184 B