}</style><link href="main.css" rel="stylesheet"></head><body><nav class="navbar" role="navigation" aria-label="main navigation"><div class="navbar-brand"><a class="navbar-item" href="https://npmjs.com/package/bulma-css-vars"><img src="https://bulma.io/images/bulma-logo.png" width="112" height="28"/> <strong>CSS Vars</strong> </a><a role="button" class="navbar-burger burger" aria-label="menu" aria-expanded="false" data-target="navbarBasicExample"><span aria-hidden="true"></span> <span aria-hidden="true"></span> <span aria-hidden="true"></span></a></div><div id="navbarBasicExample" class="navbar-menu"><div class="navbar-start"><a class="navbar-item">Home </a><a class="navbar-item">Documentation</a><div class="navbar-item has-dropdown is-hoverable"><a class="navbar-link">More</a><div class="navbar-dropdown"><a class="navbar-item">About </a><a class="navbar-item">Jobs </a><a class="navbar-item">Contact</a><hr class="navbar-divider"/><a class="navbar-item">Report an issue</a></div></div></div><div class="navbar-end"><div class="navbar-item"><div class="buttons"><a class="button is-primary"><strong>Sign up</strong> </a><a class="button is-light">Log in</a></div></div></div></div></nav><section class="section"><div class="container"><h1 class="title">Section</h1><h2 class="subtitle">A simple container to divide your page into <strong>sections</strong>, like the one you're currently reading</h2><div class="field"><label class="label">Name</label><div class="control"><input class="input" placeholder="Text input"/></div></div><div class="field"><label class="label">Username</label><div class="control has-icons-left has-icons-right"><input class="input is-success" placeholder="Text input" value="bulma"/> <span class="icon is-small is-left"><i class="fa fa-user"></i> </span><span class="icon is-small is-right"><i class="fa fa-check"></i></span></div><p class="help is-success">This username is available</p></div><div class="field"><label class="label">Email</label><div class="control has-icons-left has-icons-right"><input class="input is-danger" type="email" placeholder="Email input" value="hello@"/> <span class="icon is-small is-left"><i class="fa fa-envelope"></i> </span><span class="icon is-small is-right"><i class="fa fa-exclamation-triangle"></i></span></div><p class="help is-danger">This email is invalid</p></div><div class="field"><label class="label">Subject</label><div class="control"><div class="select"><select><option>Select dropdown</option><option>With options</option></select></div></div></div><div class="field"><label class="label">Message</label><div class="control"><textarea class="textarea" placeholder="Textarea"></textarea></div></div><div class="field"><div class="control"><label class="checkbox"><input type="checkbox"/> I agree to the <a href="#">terms and conditions</a></label></div></div><div class="field"><div class="control"><label class="radio"><input type="radio" name="question"/> Yes</label> <label class="radio"><input type="radio" name="question"/> No</label></div></div><div class="field is-grouped"><div class="control"><button class="button is-link">Submit</button></div><div class="control"><button class="button is-link is-light">Cancel</button></div></div><div class="field is-horizontal"><div class="field-label is-normal"><label class="label">From</label></div><div class="field-body"><div class="field"><p class="control is-expanded has-icons-left"><input class="input" placeholder="Name"/> <span class="icon is-small is-left"><i class="fa fa-user"></i></span></p></div><div class="field"><p class="control is-expanded has-icons-left has-icons-right"><input class="input is-success" type="email" placeholder="Email" value="alex@smith.com"/> <span class="icon is-small is-left"><i class="fa fa-envelope"></i> </span><span class="icon is-small is-right"><i class="fa fa-check"></i></span></p></div></div></div><div class="field is-horizontal"><div class="field-label"></div><div class="field-body"><div class="field is-expanded"><div class="field has-addons"><p class="control"><a class="button is-static">+44</a></p><p class="control is-expanded"><input class="input" type="tel" placeholder="Your phone number"/></p></div><p class="help">Do not enter the first zero</p></div></div></div><div class="field is-horizontal"><div class="field-label is-normal"><label class="label">Department</label></div><div class="field-body"><div class="field is-narrow"><div class="control"><div class="select is-fullwidth"><select><option>Business development</option><option>Marketing</option><option>Sales</option></select></div></div></div></div></div><div class="field is-horizontal"><div class="field-label"><label class="label">Already a member?</label></div><div class="field-body"><div class="field is-narrow"><div class="control"><label class="radio"><input type="radio" name="member"/> Yes</label> <label class="radio"><input type="radio" name="member"/> No</label></div></div></div></div><div class="field is-horizontal"><div class="field-label is-normal"><label class="label">Subject</label></div><div class="field-body"><div class="field"><div class="control"><input class="input is-danger" placeholder="e.g. Partnership opportunity"/></div><p class="help is-danger">This field is required</p></div></div></div><div class="field is-horizontal"><div class="field-label is-normal"><label class="label">Question</label></div><div class="field-body"><div class="field"><div class="control"><textarea class="textarea" placeholder="Explain how we can help you"></textarea></div></div></div></div><div class="field is-horizontal"><div class="field-label"></div><div class="field-body"><div class="field"><div class="control"><button class="button is-primary">Send message</button></div></div></div></div><div class="field"><p class="control has-icons-left has-icons-right"><input class="input" type="email" placeholder="Email"/> <span class="icon is-small is-left"><i class="fa fa-envelope"></i> </span><span class="icon is-small is-right"><i class="fa fa-check"></i></span></p></div><div class="field"><p class="control has-icons-left"><input class="input" type="password" placeholder="Password"/> <span class="icon is-small is-left"><i class="fa fa-lock"></i></span></p></div><div class="field"><p class="control"><button class="button is-success">Login</button></p></div><div class="tile is-ancestor"><div class="tile is-vertical is-8"><div class="tile"><div class="tile is-parent is-vertical"><article class="tile is-child notification is-primary"><p class="title">Vertical...</p><p class="subtitle">Top tile</p></article><article class="tile is-child notification is-warning"><p class="title">...tiles</p><p class="subtitle">Bottom tile</p></article></div><div class="tile is-parent"><article class="tile is-child notification is-info"><p class="title">Middle tile</p><p class="subtitle">With an image</p><figure class="image is-4by3"><img src="https://bulma.io/images/placeholders/640x480.png"></figure></article></div></div><div class="tile is-parent"><article class="tile is-child notification is-danger"><p class="title">Wide tile</p><p class="subtitle">Aligned with the right tile</p><div class="content"></div></article></div></div><div class="tile is-parent"><article class="tile is-child notification is-success"><div class="content"><p class="title">Tall tile</p><p class="subtitle">With even more content</p><div class="content"></div></div></article></div></div><div class="sticky-color-picker-container"><h1 class="title">Color Picker</h1><div id="color-picker" class="field is-grouped"><div class="control"><button class="button is-primary" data-color="turquoise">Primary</button></div><div class="control"><button class="button is-success" data-color="green">Success</button></div><div class="control"><button class="button is-info" data-color="cyan">Info</button></div><div class="control"><button class="button is-warning" data-color="yellow">Warning</button></div><div class="control"><button class="button is-danger" data-color="red">Danger</button></div><div class="control"><button class="button is-link" data-color="blue">Link</button></div><div class="control"><button class="button" data-color="scheme-main">Background</button></div><div class="control"><button class="button" data-color="text">Text</button></div><div class="control"><button class="button" data-color="text-strong">Labels</button></div></div></div></div></section><footer class="footer"><div class="content has-text-centered"><p><strong>Bulma CSS Vars Demo</strong> by <a href="https://github.com/wtho">Thomas Wirth</a>. The source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>.</p><p>Based on <strong>Bulma</strong> by <a href="https://jgthms.com">Jeremy Thomas</a>. The Bulma source code is licensed <a href="http://opensource.org/licenses/mit-license.php">MIT</a>. The website content is licensed <a href="http://creativecommons.org/licenses/by-nc-sa/4.0/">CC BY NC SA 4.0</a>.</p></div></footer><script src="bundle.js"></script></body></html>
0 commit comments