nickrigby / silc-offcanvas Goto Github PK
View Code? Open in Web Editor NEWLightweight offcanvas/modal component for silc framework
Home Page: https://silc.io
License: MIT License
Lightweight offcanvas/modal component for silc framework
Home Page: https://silc.io
License: MIT License
Looks like this is set up for "off canvas items" to become visible at a certain breakpoint. But what if it should "always be off canvas"?
I see this in css:
@if strip-unit($silc-offcanvas--options--becomes-visible) > 0 {
Does that mean that we would need to set $silc-offcanvas--options--becomes-visible to 0, and it would "always be offcanvas"?
Demo from silc.io not working. https://cdn.rawgit.com/nickrigby/silc-offcanvas/b5341a90e5e89fbcc6c78c5a2f72f01b6d578231/index.html#silc-offcanvas-0c
In your HTML demo:
<h2>Offcanvas</h2> <a class="silc-offcanvas__trigger" href="#silc-offcanvas-1">Trigger Offcanvas</a> <div class="silc-offcanvas" id="silc-offcanvas-1"> <a class="silc-offcanvas__trigger silc-offcanvas__trigger--close" href="#silc-offcanvas-1">Close</a> <p>This is off canvas</p> </div>
`<h2>Offcanvas modal</h2>
<a class="silc-offcanvas__trigger silc-offcanvas__trigger--modal" href="#silc-offcanvas-2">Trigger Offcanvas modal</a>
<div class="silc-offcanvas silc-offcanvas--modal" id="silc-offcanvas-2">
<div class="silc-offcanvas__inner">
<a class="silc-offcanvas__trigger silc-offcanvas__trigger--modal" href="#silc-offcanvas-2">Close</a>
<p>This is modal content</p>
</div>
</div>`
If one offcanvas is open, the other will not fire. Granted this may be a small use case, but is confusing when looking at the demo. Should clicking any .silc-offcanvas__trigger close any open off canvases, then fire perhaps? Or can we simply add a dflt background color to offcanvas to make it clearer that things are "not clickable"?
Often this is used with icons/etc that then throw WAVE errors. There may already be global class for SR only text in silc core, but could we at least document/add that to the examples? I have had to manually add those in at least 3 recent projects.
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.