Comments (9)
from skin.
Galaxy S7, Android v6, Firefox
from skin.
Seems to work well. Will schedule this into v3.1.0 release. The only slightly funky thing is that I have to use the :not([hidden])
selector in order to use the same .checkbox__icon
name. To avoid this, we could use a different name, but can discuss more at PR time.
Huge shoutout to Pranav Jha (@pranavjha) as the inspiration behind this improvement!!
.checkbox__icon:not([hidden]) {
background: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20%20fill%3D%22%23cccccc%22%20d%3D%22M25.107%2032.030h-18.214c-3.456%200-6.268-2.81-6.268-6.264v-19.529c0-3.456%202.812-6.268%206.268-6.268h18.214c3.456%200%206.268%202.812%206.268%206.268v19.529c0%203.452-2.812%206.264-6.268%206.264zM6.893%201.85c-2.419%200-4.386%201.967-4.386%204.386v19.529c0%202.417%201.967%204.382%204.386%204.382h18.214c2.419%200%204.386-1.965%204.386-4.382v-19.529c0-2.419-1.967-4.386-4.386-4.386h-18.214z%22%3E%3C/path%3E%3C/svg%3E');
background-size: contain;
width: 1em;
height: 1em;
}
.checkbox__control[type="checkbox"] {
&:checked + .checkbox__icon:not([hidden]) {
.mixin-bounce-animation;
background-image: url('data:image/svg+xml,%3Csvg%20xmlns%3D%27http%3A//www.w3.org/2000/svg%27%20width%3D%2732%27%20height%3D%2732%27%3E%3Cpath%20fill%3D%22%230654ba%22%20d%3D%22M0.543%205.647c0-3.119%202.531-5.647%205.65-5.647h19.309c3.12%200%205.65%202.511%205.65%205.647v20.705c0%203.119-2.531%205.647-5.65%205.647h-19.309c-3.12%200-5.65-2.511-5.65-5.647v-20.705zM5.313%2017.587l7.039%206.839%2013.831-13.439-2.636-2.561-10.929%2010.62-4.442-4.317-2.862%202.858z%22%3E%3C/path%3E%3C/svg%3E');
}
}
from skin.
@ianmcburnie thanks for considering this change. This will reduce a lot of DOM for us.
Was wondering if we need the empty <span class="checkbox__icon"></span>
?
The below structures might work too:
<span class="checkbox">
<input class="checkbox__control" type="checkbox" />
</span>
and
<span class="checkbox checkbox--custom">
<input class="checkbox__control" type="checkbox" />
<svg aria-hidden="true" focusable="false">
<use xlink:href="#svg-icon-checkbox"></use>
</svg>
</span>
from skin.
I think both of those would be breaking changes, which I'd rather not do if we can avoid it. Also, for that 2nd structure, we need hidden on a wrapper of the SVG to avoid showing the SVG and the browser's default checkbox in a non-CSS state (hidden attribute doesn't work on an SVG tag for some reason).
Also, while we could feasibly generate a pseudo element on the input element to host the background image, that approach has led to positioning problems in the past (although we no longer have block level or inline level label to worry about affecting layout). A separation of concerns, while adding an extra element to the DOM, gives a little more layout flexibility and allows us to add attributes (e.g. ARIA) should we ever need.
Having said all that, I'm not going to completely rule it out, and will do some more investigation!
from skin.
@pranavjha Thinking about it more, we can't have the background image on the input element, because the input element has an opacity of zero. We can't have the background image on the root element either, because we can't toggle the background image of the root based on the checked
state of the input.
from skin.
I have applied the same background-image technique to the public facing eBay MIND patterns site so that we can test support on mobile devices (anyone?):
http://ianmcburnie.github.io/mindpatterns/input/checkbox/
http://ianmcburnie.github.io/mindpatterns/input/radio/
from skin.
@ianmcburnie Please see below for the different screen shots of Chrome and Safari on my iPhone 6.
Chrome checkbox
Chrome radio
Safari checkbox
Safari radio
Sorry about how big these are. I did try to scale them down.
from skin.
Great! Thanks for this @seangates !
from skin.
Related Issues (20)
- new: chat message input field
- new: inline prompt
- new: education card
- new: collection card
- ebay-section-title: add "footer" element
- new: agent color tokens HOT 5
- new: inline agent
- new: agent disclaimer tag
- new: shopping dots
- Feature intro sheet
- 230907 - Icon Updates HOT 4
- new: agent feedback
- 230810 - Item tile framework and components
- tokens: add spacing tokens
- Section Notice: CTA broken in RTL
- Website: layout/icon in site navigation broken on small screens
- Section-Notice: issues with CTA only variant HOT 1
- Floating Label Textarea: Label overlap with outline HOT 1
- Ebay-icon-button: add priority levels
- icons: add support for gradient icons and add the first batch HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from skin.