sass-custom-box - npm Package Compare versions

Comparing version 0.1.0 to 0.1.1

package.json

 {
     "name": "sass-custom-box",
-    "version": "0.1.0",
+    "version": "0.1.1",
     "description": "Sass mixins for styling custom radioboxes and checkboxes",
@@ -5,0 +5,0 @@ "main": "src/_custom-box.scss",

README.md

@@ -61,2 +61,87 @@ # sass-custom-box
 
+### Customization
+
+This library comes with a predefined theme. To customize (parts of) this theme pass a scss map to the `set-custom-box-theme()` mixin as follows:
+
+``` scss
+$my-theme: (
+    container: (
+        background-color: red,
+        border: 1px solid black    
+    )
+);
+
+@include set-custom-box-theme($my-theme);
+```
+
+Below is the scss map which contains the default theme. Each of these items can be customized using the `set-custom-box-theme()` mixin.
+
+``` scss
+// default theme
+
+(
+    container: (
+        _checked: (
+            background-color: #b3e5fc,
+            border: 1px solid #01579b
+        ),
+        _focus: (
+            box-shadow: 0 0 5px #01579b
+        ),
+        background-color: #b3e5fc,
+        border: 1px solid #01579b,
+        border-radius: .2em,
+        height: 1em,
+        margin: 0 .5em 0 0,
+        transition: all .1s ease-in-out,
+        width: 1em
+    ),
+    tick: (
+        background-color: #01579b,
+        transition: all .1s ease-in-out
+    )
+)
+```
+
+#### Customize checkbox styling
+
+In order to change checkbox specific styling pass an scss map with your desired items to the `set-custom-box-checkbox-theme()` mixin. 
+You can override any of the default checkbox items, the default checkbox theme is the default theme as shown above appended with the following scss map:
+
+``` scss
+// default checkbox theme, appended to the default theme
+
+(
+    tick: (
+        border-width: .2em,
+        height: .6em,
+        left: .075em,
+        top: .2em,
+        width: .4em
+    )
+)
+```
+
+#### Customize radiobox styling
+
+In order to change radiospecific styling pass an scss map with your desired items to the `set-custom-box-radiobox-theme()` mixin. 
+You can override any of the default radiobox items, the default radiobox theme is the default theme as shown above appended with the following scss map:
+
+``` scss
+// default radiobox theme, appended to the default theme
+
+(
+    container: (
+        border-radius: 50%,
+    ),
+    tick: (
+        border-radius: 50%,
+        height: .5em,
+        left: .25em,
+        top: .25em,
+        width: .5em
+    )
+)
+```
+
 ## Change log
@@ -63,0 +148,0 @@

No alert changes

Improved metrics

Total package byte prevSize

34791

increased by6.44%

Number of lines in readme file

184

increased by85.86%

No dependency changes