bulma-checkbox
Version:
Custom checkbox controls for Bulma CSS Framework
278 lines (257 loc) • 8.88 kB
HTML
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Bulma Custom Checkbox Controls</title>
<link rel="icon" href="https://static.justboil.me/assets/jblogo-icon-150.png">
<meta name="description" content="Custom checkbox for Bulma CSS Framework">
<meta property="og:url" content="https://justboil.github.io/bulma-checkbox/">
<meta property="og:site_name" content="JustBoil.me / Bulma Checkbox">
<meta property="og:title" content="Bulma Checkbox">
<meta property="og:description" content="Custom checkbox for Bulma CSS Framework">
<meta property="og:image" content="https://justboil.me/images/bulma-checkbox/repository-preview-hi-res.png">
<meta property="og:image:type" content="image/png">
<meta property="og:image:width" content="1920">
<meta property="og:image:height" content="960">
<meta property="twitter:card" content="summary_large_image">
<meta property="twitter:title" content="Bulma Checkbox">
<meta property="twitter:description" content="Custom checkbox for Bulma CSS Framework">
<meta property="twitter:image:src" content="https://justboil.me/images/bulma-checkbox/repository-preview-hi-res.png">
<meta property="twitter:image:width" content="1920">
<meta property="twitter:image:height" content="960">
<link rel="stylesheet" href="css/bulma.min.css">
<link rel="stylesheet" href="css/main.min.css">
<style type="text/css">
h1.title, h3.subtitle {
text-align: center;
}
h1.title {
font-weight: 900;
}
.is-main h1.title {
font-size: 3rem;
}
.is-main h3.subtitle {
font-size: 2rem;
}
footer.footer .logo img {
max-height: 30px;
width: auto;
}
</style>
<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-130795909-1"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-130795909-1');
</script>
</head>
<body>
<nav class="navbar is-light is-spaced" role="navigation" aria-label="main navigation">
<div class="container">
<div class="navbar-brand">
<a class="navbar-item" href="https://justboil.me/bulma-admin-template/">
<img src="https://static.justboil.me/assets/logo-black.png" alt="Vue.js Buefy Bulma Admin Templates">
</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-end">
<div class="navbar-item">
<div class="buttons">
<a href="https://github.com/justboil/bulma-checkbox" class="button is-small">
<span class="icon">
<i class="mdi mdi-github-circle"></i>
</span>
<span>Back to GitHub Repo</span>
</a>
</div>
</div>
</div>
</div>
</div>
</nav>
<section class="hero is-light is-main">
<div class="hero-body">
<div class="container">
<h1 class="title">
<span class="icon">
<i class="mdi mdi-bulma"></i>
</span>
Bulma Custom Checkboxes
</h1>
<h3 class="subtitle">No JS. CSS/SCSS-only package for Bulma</h3>
</div>
</div>
</section>
<section class="hero">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-left">
States
</h1>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="field">
<label class="b-checkbox checkbox">
<input type="checkbox" value="false" checked>
<span class="check"></span>
<span class="control-label">Basic</span>
</label>
</div>
<div class="field">
<label class="b-checkbox checkbox">
<input type="checkbox" value="false" class="is-indeterminate">
<span class="check"></span>
<span class="control-label">Indeterminate</span>
</label>
</div>
<div class="field">
<label disabled="disabled" class="b-checkbox checkbox is-disabled">
<input type="checkbox" disabled="disabled" value="false">
<span class="check"></span>
<span class="control-label">Disabled</span>
</label>
</div>
</div>
</section>
<section class="hero">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-left">
Sizes
</h1>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="field">
<label class="b-checkbox checkbox is-small">
<input type="checkbox" value="false">
<span class="check"></span>
<span class="control-label">Small</span>
</label>
</div>
<div class="field">
<label class="b-checkbox checkbox">
<input type="checkbox" value="false">
<span class="check"></span>
<span class="control-label">Default</span>
</label>
</div>
<div class="field">
<label class="b-checkbox checkbox is-medium">
<input type="checkbox" value="false">
<span class="check"></span>
<span class="control-label">Medium</span>
</label>
</div>
<div class="field">
<label class="b-checkbox checkbox is-large">
<input type="checkbox" value="false">
<span class="check"></span>
<span class="control-label">Large</span>
</label>
</div>
</div>
</section>
<section class="hero">
<div class="hero-body">
<div class="container">
<h1 class="title has-text-left">
Colors
</h1>
</div>
</div>
</section>
<section class="section">
<div class="container">
<div class="field">
<label class="b-checkbox checkbox">
<input type="checkbox" value="false" checked>
<span class="check"></span>
<span class="control-label">Default</span>
</label>
</div>
<div class="field">
<label class="b-checkbox checkbox">
<input type="checkbox" value="false" checked>
<span class="check is-info"></span>
<span class="control-label">Info</span>
</label>
</div>
<div class="field">
<label class="b-checkbox checkbox">
<input type="checkbox" value="false" checked>
<span class="check is-success"></span>
<span class="control-label">Success</span>
</label>
</div>
<div class="field">
<label class="b-checkbox checkbox">
<input type="checkbox" value="false" checked>
<span class="check is-danger"></span>
<span class="control-label">Danger</span>
</label>
</div>
<div class="field">
<label class="b-checkbox checkbox">
<input type="checkbox" value="false" checked>
<span class="check is-warning"></span>
<span class="control-label">Warning</span>
</label>
</div>
</div>
</section>
<footer class="footer">
<div class="container">
<div class="columns">
<div class="column">
<div class="logo">
<a href="https://justboil.me/bulma-admin-template/">
<img src="https://static.justboil.me/assets/logo-black.png" alt="Vue.js Buefy Bulma Admin Templates">
</a>
</div>
</div>
<div class="column is-narrow">
<div class="buttons">
<a href="https://github.com/justboil/bulma-checkbox" class="button is-small">
<span class="icon">
<i class="mdi mdi-github-circle"></i>
</span>
<span>GitHub Repo</span>
</a>
</div>
</div>
</div>
</div>
</footer>
<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', '658339141622648');
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none" src="https://www.facebook.com/tr?id=658339141622648&ev=PageView&noscript=1"/></noscript>
<!-- Icons below are for demo-only. Feel free to use any icon pack. Docs: https://bulma.io/documentation/elements/icon/ -->
<link rel="stylesheet" href="https://cdn.materialdesignicons.com/4.9.95/css/materialdesignicons.min.css">
</body>
</html>