From 12b179751d3b240ae22c77bdf6d2cfe78d728c28 Mon Sep 17 00:00:00 2001 From: Nobuyuki Yoshimura Date: Sun, 15 Mar 2020 17:57:56 +0900 Subject: [PATCH] refactoring css and html --- dist/css/bulma-radio-checkbox.css | 193 +++++++++-------- dist/css/bulma-radio-checkbox.min.css | 8 +- index.html | 289 ++++++++++++++++++-------- 3 files changed, 315 insertions(+), 175 deletions(-) diff --git a/dist/css/bulma-radio-checkbox.css b/dist/css/bulma-radio-checkbox.css index da9b8ca..1294d5c 100644 --- a/dist/css/bulma-radio-checkbox.css +++ b/dist/css/bulma-radio-checkbox.css @@ -1,164 +1,179 @@ /*! - cool-checkboxes-for-bulma.io v1.1.0: Cool Checkboxes for Bulma.io - (c) 2017 + cool-checkboxes-for-bulma.io v1.2.0: Cool Checkboxes for Bulma.io + (c) 2020 MIT License */ @charset "UTF-8"; .b-checkbox { position: relative; + display: block; + min-height: 1.5rem; + padding-left: 1.5rem; } -.b-checkbox label { - padding-left: 5px; +.b-checkbox-input { + position: absolute; + left: 0; + z-index: -1; + width: 1rem; + height: 1.25rem; + opacity: 0; +} + +.b-checkbox-label { + position: relative; + margin-bottom: 0; + vertical-align: top; cursor: pointer; - font-size: 1rem; - line-height: 1; } -.b-checkbox label::before { - content: ""; +.b-checkbox-label::before { position: absolute; - width: 17px; - height: 17px; - left: 0; - top: 1px; - border: 1px solid #dbdbdb; - border-radius: 3px; + top: 0.25rem; + left: -1.5rem; + display: block; + width: 1rem; + height: 1rem; + pointer-events: none; + content: ""; background-color: #fff; - transition: background .1s ease-in-out; + border: #adb5bd solid 1px; + border-radius: 0.25rem; + transition: background 0.1s ease-in-out; } -.b-checkbox label::after { +.b-checkbox-label::after { position: absolute; - width: 16px; - height: 16px; - left: 3px; - top: 3px; - font-size: 12px; + display: flex; + top: 0.25rem; + left: -1.5rem; + width: 1rem; + height: 1rem; + content: ""; color: #363636; } -.b-checkbox input[type="checkbox"], -.b-checkbox input[type="radio"] { - opacity: 0; - z-index: 1; - cursor: pointer; -} - -.b-checkbox input[type="checkbox"]:focus + label::before, -.b-checkbox input[type="radio"]:focus + label::before { +.b-checkbox-input:focus~.b-checkbox-label::before { outline: thin dotted; outline: 5px auto -webkit-focus-ring-color; outline-offset: -2px; } -.b-checkbox input[type="checkbox"]:checked + label::after, -.b-checkbox input[type="radio"]:checked + label::after { - content: "✔"; +.is-primary .b-checkbox-input:checked~.b-checkbox-label::before { + background-color: hsl(171, 100%, 41%); + border-color: hsl(171, 100%, 41%); } -.b-checkbox input[type="checkbox"]:disabled, -.b-checkbox input[type="radio"]:disabled { - cursor: not-allowed; -} - -.b-checkbox input[type="checkbox"]:disabled + label, -.b-checkbox input[type="radio"]:disabled + label { - opacity: 0.65; +.is-primary .b-checkbox-input:checked~.b-checkbox-label::after { + color: #fff; } -.b-checkbox input[type="checkbox"]:disabled + label::before, -.b-checkbox input[type="radio"]:disabled + label::before { - background-color: whitesmoke; - cursor: not-allowed; +.is-danger .b-checkbox-input:checked~.b-checkbox-label::before { + background-color: hsl(348, 100%, 61%); + border-color: hsl(348, 100%, 61%); } -.b-checkbox.is-circular label::before { - border-radius: 50%; +.is-danger .b-checkbox-input:checked~.b-checkbox-label::after { + color: #fff; } -.b-checkbox.is-inline { - display: inline-block; - font-weight: normal; +.is-info .b-checkbox-input:checked~.b-checkbox-label::before { + background-color: hsl(204, 86%, 53%); + border-color: hsl(204, 86%, 53%); } -.b-checkbox.is-inline + .is-inline { - margin-left: 10px; +.is-info .b-checkbox-input:checked~.b-checkbox-label::after { + color: #fff; } -.is-primary input[type="checkbox"]:checked + label::before { - background-color: #00d1b2; - border-color: #00d1b2; +.is-link .b-checkbox-input:checked~.b-checkbox-label::before { + background-color: hsl(217, 71%, 53%); + border-color: hsl(217, 71%, 53%); } -.is-primary input[type="checkbox"]:checked + label::after { +.is-link .b-checkbox-input:checked~.b-checkbox-label::after { color: #fff; } -.is-danger input[type="checkbox"]:checked + label::before { - background-color: #ff3860; - border-color: #ff3860; +.is-warning .b-checkbox-input:checked~.b-checkbox-label::before { + background-color: hsl(48, 100%, 67%); + border-color: hsl(48, 100%, 67%); } -.is-danger input[type="checkbox"]:checked + label::after { +.is-warning .b-checkbox-input:checked~.b-checkbox-label::after { color: #fff; } -.is-info input[type="checkbox"]:checked + label::before { - background-color: #3273dc; - border-color: #3273dc; +.is-success .b-checkbox-input:checked~.b-checkbox-label::before { + background-color: hsl(141, 71%, 48%); + border-color: hsl(141, 71%, 48%); } -.is-info input[type="checkbox"]:checked + label::after { +.is-success .b-checkbox-input:checked~.b-checkbox-label::after { color: #fff; } -.is-warning input[type="checkbox"]:checked + label::before { - background-color: #ffdd57; - border-color: #ffdd57; +.is-dark .b-checkbox-input:checked~.b-checkbox-label::before { + background-color: hsl(0, 0%, 21%); + border-color: hsl(0, 0%, 21%); } -.is-warning input[type="checkbox"]:checked + label::after { +.is-dark .b-checkbox-input:checked~.b-checkbox-label::after { color: #fff; } -.is-success input[type="checkbox"]:checked + label::before { - background-color: #23d160; - border-color: #23d160; +.is-black .b-checkbox-input:checked~.b-checkbox-label::before { + background-color: hsl(0, 0%, 4%); + border-color: hsl(0, 0%, 4%); } -.is-success input[type="checkbox"]:checked + label::after { +.is-black .b-checkbox-input:checked~.b-checkbox-label::after { color: #fff; } -.is-dark input[type="checkbox"]:checked + label::before { - background-color: #363636; - border-color: #363636; +.b-checkbox-input:checked~.b-checkbox-label::after { + content: "\002714"; + font-size: 1rem; + /* font-weight: 900; */ + /* color: #fff; */ + text-align: center; + -webkit-align-items: center; + align-items: center; + -webkit-justify-content: center; + justify-content: center; } -.is-dark input[type="checkbox"]:checked + label::after { - color: #fff; +.b-checkbox-input:disabled { + cursor: not-allowed; } -.is-black input[type="checkbox"]:checked + label::before { - background-color: #0a0a0a; - border-color: #0a0a0a; +.b-checkbox-label[disabled] { + opacity: 0.65; + cursor: not-allowed; } -.is-black input[type="checkbox"]:checked + label::after { - color: #fff; +.b-checkbox-right { + padding-right: 24px; + padding-left: 0 !important; + margin-right: 0; } -input[type="checkbox"].styled:checked + label:after { - font-family: "FontAwesome"; - content: ""; +.b-checkbox-right .b-checkbox-label::before, +.b-checkbox-right .b-checkbox-label::after { + right: -1.5rem; + left: initial; } -input[type="checkbox"] .styled:checked + label::before { - color: #fff; +.is-circular .b-checkbox-label::before { + border-radius: 50%; } -input[type="checkbox"] .styled:checked + label::after { - color: #fff; +.b-checkbox.is-inline { + display: inline-block !important; + font-weight: normal; } + +.b-checkbox.is-inline+.is-inline { + margin-left: 10px; +} \ No newline at end of file diff --git a/dist/css/bulma-radio-checkbox.min.css b/dist/css/bulma-radio-checkbox.min.css index c71e76d..8bf8523 100644 --- a/dist/css/bulma-radio-checkbox.min.css +++ b/dist/css/bulma-radio-checkbox.min.css @@ -1,2 +1,6 @@ -/*! cool-checkboxes-for-bulma.io v1.1.0 | (c) 2017 | MIT License | */ -@charset "UTF-8";.b-checkbox{position:relative}.b-checkbox label{padding-left:5px;cursor:pointer;font-size:1rem;line-height:1}.b-checkbox label:before{content:"";position:absolute;width:17px;height:17px;left:0;top:1px;border:1px solid #dbdbdb;border-radius:3px;background-color:#fff;transition:background .1s ease-in-out}.b-checkbox label:after{position:absolute;width:16px;height:16px;left:3px;top:3px;font-size:12px;color:#363636}.b-checkbox input[type=checkbox],.b-checkbox input[type=radio]{opacity:0;z-index:1;cursor:pointer}.b-checkbox input[type=checkbox]:focus+label:before,.b-checkbox input[type=radio]:focus+label:before{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.b-checkbox input[type=checkbox]:checked+label:after,.b-checkbox input[type=radio]:checked+label:after{font-family:FontAwesome;content:""}.b-checkbox input[type=checkbox]:disabled,.b-checkbox input[type=radio]:disabled{cursor:not-allowed}.b-checkbox input[type=checkbox]:disabled+label,.b-checkbox input[type=radio]:disabled+label{opacity:.65}.b-checkbox input[type=checkbox]:disabled+label:before,.b-checkbox input[type=radio]:disabled+label:before{background-color:#f5f5f5;cursor:not-allowed}.b-checkbox.is-circular label:before{border-radius:50%}.b-checkbox.is-inline{display:inline-block;font-weight:400}.b-checkbox.is-inline+.is-inline{margin-left:10px}.is-primary input[type=checkbox]:checked+label:before{background-color:#00d1b2;border-color:#00d1b2}.is-primary input[type=checkbox]:checked+label:after{color:#fff}.is-danger input[type=checkbox]:checked+label:before{background-color:#ff3860;border-color:#ff3860}.is-danger input[type=checkbox]:checked+label:after{color:#fff}.is-info input[type=checkbox]:checked+label:before{background-color:#3273dc;border-color:#3273dc}.is-info input[type=checkbox]:checked+label:after{color:#fff}.is-warning input[type=checkbox]:checked+label:before{background-color:#ffdd57;border-color:#ffdd57}.is-warning input[type=checkbox]:checked+label:after{color:#fff}.is-success input[type=checkbox]:checked+label:before{background-color:#23d160;border-color:#23d160}.is-success input[type=checkbox]:checked+label:after{color:#fff}.is-dark input[type=checkbox]:checked+label:before{background-color:#363636;border-color:#363636}.is-dark input[type=checkbox]:checked+label:after{color:#fff}.is-black input[type=checkbox]:checked+label:before{background-color:#0a0a0a;border-color:#0a0a0a}.is-black input[type=checkbox]:checked+label:after{color:#fff}input[type=checkbox].styled:checked+label:after{font-family:FontAwesome;content:""}input[type=checkbox] .styled:checked+label:after,input[type=checkbox] .styled:checked+label:before{color:#fff} \ No newline at end of file +@charset "UTF-8";/*! + cool-checkboxes-for-bulma.io v1.2.0: Cool Checkboxes for Bulma.io + (c) 2020 + MIT License + +*/.b-checkbox{position:relative;display:block;min-height:1.5rem;padding-left:1.5rem}.b-checkbox-input{position:absolute;left:0;z-index:-1;width:1rem;height:1.25rem;opacity:0}.b-checkbox-label{position:relative;margin-bottom:0;vertical-align:top;cursor:pointer}.b-checkbox-label::before{position:absolute;top:.25rem;left:-1.5rem;display:block;width:1rem;height:1rem;pointer-events:none;content:"";background-color:#fff;border:#adb5bd solid 1px;border-radius:.25rem;transition:background .1s ease-in-out}.b-checkbox-label::after{position:absolute;display:flex;top:.25rem;left:-1.5rem;width:1rem;height:1rem;content:"";color:#363636}.b-checkbox-input:focus~.b-checkbox-label::before{outline:thin dotted;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px}.is-primary .b-checkbox-input:checked~.b-checkbox-label::before{background-color:#00d1b1;border-color:#00d1b1}.is-primary .b-checkbox-input:checked~.b-checkbox-label::after{color:#fff}.is-danger .b-checkbox-input:checked~.b-checkbox-label::before{background-color:#fe385f;border-color:#fe385f}.is-danger .b-checkbox-input:checked~.b-checkbox-label::after{color:#fff}.is-info .b-checkbox-input:checked~.b-checkbox-label::before{background-color:#209bee;border-color:#209bee}.is-info .b-checkbox-input:checked~.b-checkbox-label::after{color:#fff}.is-link .b-checkbox-input:checked~.b-checkbox-label::before{background-color:#3273dc;border-color:#3273dc}.is-link .b-checkbox-input:checked~.b-checkbox-label::after{color:#fff}.is-warning .b-checkbox-input:checked~.b-checkbox-label::before{background-color:#fedd56;border-color:#fedd56}.is-warning .b-checkbox-input:checked~.b-checkbox-label::after{color:#fff}.is-success .b-checkbox-input:checked~.b-checkbox-label::before{background-color:#23d160;border-color:#23d160}.is-success .b-checkbox-input:checked~.b-checkbox-label::after{color:#fff}.is-dark .b-checkbox-input:checked~.b-checkbox-label::before{background-color:#353535;border-color:#353535}.is-dark .b-checkbox-input:checked~.b-checkbox-label::after{color:#fff}.is-black .b-checkbox-input:checked~.b-checkbox-label::before{background-color:#0a0a0a;border-color:#0a0a0a}.is-black .b-checkbox-input:checked~.b-checkbox-label::after{color:#fff}.b-checkbox-input:checked~.b-checkbox-label::after{content:"\002714";font-size:1rem;text-align:center;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center}.b-checkbox-input:disabled{cursor:not-allowed}.b-checkbox-label[disabled]{opacity:.65;cursor:not-allowed}.b-checkbox-right{padding-right:24px;padding-left:0!important;margin-right:0}.b-checkbox-right .b-checkbox-label::after,.b-checkbox-right .b-checkbox-label::before{right:-1.5rem;left:initial}.is-circular .b-checkbox-label::before{border-radius:50%}.b-checkbox.is-inline{display:inline-block!important;font-weight:400}.b-checkbox.is-inline+.is-inline{margin-left:10px} \ No newline at end of file diff --git a/index.html b/index.html index 2a573aa..a40a3b1 100644 --- a/index.html +++ b/index.html @@ -5,9 +5,10 @@ Cool Bulma Checkboxes - - - + + + @@ -18,19 +19,21 @@

Cool Checboxes for Bulma.io

Change the uncool checkboxes into something cooler.

- - - - - View on Github - + + + + + View on Github +
- +
@@ -40,8 +43,11 @@

Change the uncool checkboxes into something cooler.

npm install cool-checkboxes-for-bulma.io

-

Supports bulma modifier classes. e.g is-primary, is-success, is-warning, is-info, is-danger, is-dark, is-black

-

Also supports is-circular to make the checkboxes round and is-inline to inline checkboxes.

+

Supports bulma modifier classes. e.g is-primary, + is-success, is-warning, is-info, is-danger, + is-dark, is-black

+

Also supports is-circular to make the checkboxes round and + is-inline to inline checkboxes.

@@ -51,8 +57,8 @@

Also supports is-circular to make the checkb

Cool Checkboxes

- -
@@ -60,8 +66,8 @@

Also supports is-circular to make the checkb

- -
@@ -70,8 +76,8 @@

Also supports is-circular to make the checkb

- -
@@ -80,8 +86,8 @@

Also supports is-circular to make the checkb

- -
@@ -90,18 +96,28 @@

Also supports is-circular to make the checkb

- -

+
+

+

+ + +
+

+

- -
@@ -110,8 +126,8 @@

Also supports is-circular to make the checkb

- -
@@ -120,20 +136,114 @@

Also supports is-circular to make the checkb

- -

+ +
+

Cool Checkboxes
(label position right)

+
+
+ + +
+
+
+

+

+ + +
+

+
+
+

+

+ + +
+

+
+
+

+

+ + +
+

+
+
+

+

+ + +
+

+
+
+

+

+ + +
+

+
+
+

+

+ + +
+

+
+
+

+

+ + +
+

+
+
+

+

+ + +
+

+
+
+ +

Cool Circular Checkboxes

- -
@@ -141,8 +251,8 @@

Also supports is-circular to make the checkb

- -
@@ -151,8 +261,8 @@

Also supports is-circular to make the checkb

- -
@@ -161,8 +271,8 @@

Also supports is-circular to make the checkb

- -
@@ -171,18 +281,28 @@

Also supports is-circular to make the checkb

- -

+
+

+

+ + +
+

+

- -
@@ -191,8 +311,8 @@

Also supports is-circular to make the checkb

- -
@@ -201,8 +321,8 @@

Also supports is-circular to make the checkb

- -
@@ -215,14 +335,14 @@

Also supports is-circular to make the checkb

Inline Cool Checkboxes

- -
- -
@@ -239,8 +359,8 @@

Markup

- -
@@ -249,8 +369,8 @@

Markup

<div class="field">
     <p class="control">
         <div class="b-checkbox is-warning">
-            <input id="checkbox" class="styled" checked type="checkbox">
-            <label for="checkbox">
+            <input id="checkbox" class="b-checkbox-input" checked type="checkbox">
+            <label for="checkbox" class="b-checkbox-label">
                 Is Warning
             </label>
         </div>
@@ -261,8 +381,8 @@ 
Markup

                     

                         

                             

-                                
-                                

@@ -271,8 +391,8 @@ 
Markup

                     
<div class="field">
     <p class="control">
         <div class="b-checkbox is-warning is-circular">
-            <input id="checkbox" class="styled" checked type="checkbox">
-            <label for="checkbox">
+            <input id="checkbox" class="b-checkbox-input" checked type="checkbox">
+            <label for="checkbox" class="b-checkbox-label">
                 Is Warning
             </label>
         </div>
@@ -285,14 +405,14 @@ 
Markup

                     

                         

                             

-                                
-                                

                             

-                                
-                                

@@ -301,14 +421,14 @@ 
Markup

                     
<div class="field">
     <p class="control">
         <div class="b-checkbox is-warning is-inline">
-            <input id="checkbox" class="styled" checked type="checkbox">
-            <label for="checkbox">
+            <input id="checkbox" class="b-checkbox-input" checked type="checkbox">
+            <label for="checkbox" class="b-checkbox-label">
                 Is Warning
             </label>
         </div>
         <div class="b-checkbox is-danger is-inline">
-            <input id="checkbox" class="styled" checked type="checkbox">
-            <label for="checkbox">
+            <input id="checkbox" class="b-checkbox-input" checked type="checkbox">
+            <label for="checkbox" class="b-checkbox-label">
                 Is Warning
             </label>
         </div>
@@ -318,30 +438,31 @@ 
Markup

-
-
-
-
- - - - + + + -
+ +
+
- -
+ - - + + gtag('config', 'UA-105402107-3'); +