mozilla / lightbeam-we

Web Extension version of the Firefox Lightbeam add-on
https://addons.mozilla.org/en-GB/firefox/addon/lightbeam/
Mozilla Public License 2.0
179 stars 61 forks source link

#66 Changes proposed for getting the toggle button up #170

Closed laxmy closed 7 years ago

laxmy commented 7 years ago

Here are the changes I did to get the toggle button up. I have done it using css :before and :after to 'toggle' like @jonathanKingston proposed to get the button and the 'on'-'off' label. I have also made changes to the button dimensions to make it look more like the original lightbeam switch. Hope I used the right color. Let me know if this works.

66 Fix toggle button to work with CSS

laxmy commented 7 years ago

@jonathanKingston : I made the indenting changes, active state , cursor and accessibility fix you recommended. But I needed the extra label and span elements to contain the switch. The label is what holds the checked state of checkbox . Styling checkbox itself like a switch did not work. Also, as checkbox with opacity 0 makes it child elements also transparent including :before and :after I had to add the extra span element to hold the :before and :after elements. Hope this works!

jonathanKingston commented 7 years ago

Thanks a lot @laxmy ! I merged this and will hook up the code to make it work. Thanks!

laxmy commented 7 years ago

@jonathanKingston: Thanks for merging my changes and the guidance!