diff --git a/demo.css b/demo.css index 3894dbc..029775f 100644 --- a/demo.css +++ b/demo.css @@ -1,40 +1,47 @@ -.wrapper{ - max-width: 678px; - margin:auto; +.wrapper { + max-width: 678px; + margin: auto; } pre { border-left: 0.3rem solid #4039ff; } -body{ - background:#f2f2f2; + +body { + background: #f2f2f2; } -.push_left{ - margin-left: 6px; +.push_left { + margin-left: 6px; } -.push_right{ - margin-right: 6px; + +.push_right { + margin-right: 6px; } -code,xmp{ - white-space: normal !important; + +code, +xmp { + white-space: normal !important; } -textarea{ + +textarea { margin-bottom: 0px; min-height: 200px; line-height: 1; } -.close{ +.close { width: 20px; height: 21px; position: relative; display: inline-block; vertical-align: text-bottom; text-align: center; - cursor:pointer; + cursor: pointer; } -.close:before, .close:after { + +.close:before, +.close:after { position: absolute; left: 10px; content: ' '; @@ -42,51 +49,56 @@ textarea{ width: 3px; background-color: #fff; } + .close:before { - transform: rotate(45deg); + transform: rotate(45deg); } + .close:after { - transform: rotate(-45deg); + transform: rotate(-45deg); } - -.card{ - margin:20px; +.card { + margin: 20px; border-radius: 5px; - background:#fff; - box-shadow:0px 0px 20px rgba(0, 0, 0, 0.1) + background: #fff; + box-shadow: 0px 0px 20px rgba(0, 0, 0, 0.1) } -.card_title,.title,.pushbar{ + +.card_title, +.title, +.pushbar { background: #4039ff; color: #fff; } -.card_title,.title{ - padding: 15px 20px; +.card_title, +.title { + padding: 15px 20px; font-weight: bold; } -.card_title{ -border-radius: 4px 4px 0px 0px; -} -.card_content{ - padding: 15px; -} -a.button.getBtn{ -margin-top: 16px;background-color:#fff;color:#4039ff;border-color: #fff; -} - - +.card_title { + border-radius: 4px 4px 0px 0px; +} -.pushbar{ +.card_content { + padding: 15px; +} +a.button.getBtn { + margin-top: 16px; + background-color: #fff; + color: #4039ff; + border-color: #fff; } -.small{ -font-size: 14px; -font-weight: 400; +.small { + font-size: 14px; + font-weight: 400; } -.menu li{ + +.menu li { list-style: none; padding: 15px 20px; border-top: 1px solid rgba(255, 255, 255, 0.2); @@ -95,7 +107,11 @@ font-weight: 400; color: rgba(255, 255, 255, 0.65); } -.button, button, input[type='button'], input[type='reset'], input[type='submit'] { +.button, +button, +input[type='button'], +input[type='reset'], +input[type='submit'] { background-color: #4039ff; border: 0.1rem solid #4039ff; -} \ No newline at end of file +} diff --git a/index.html b/index.html index 7422d0c..6d5f5d1 100644 --- a/index.html +++ b/index.html @@ -1,18 +1,16 @@ + Pushbar.js demo - - - - - - - + + + + @@ -21,79 +19,86 @@ + - -
-
-
-
- Pushbar.js - -
Pushbar.js is a tiny javascript plugin for creating sliding drawers in web apps
-
It is fully customizable and dependency free.You can use it as sidebar menus or option drawers.
-
Get it
-
-
-
-
-
-
- - - - - +
+
+
+
+ Pushbar.js + +
Pushbar.js is a tiny javascript plugin for creating sliding drawers in web apps
+
It is fully customizable and dependency free.You can use it as sidebar menus or option drawers.
+
+ Get it +
+
+
+
+ +
+
+ +
+
+ +
+
+ + 

 						Installation
 						

 						

-						
 						
    
 							
  1. Add the pushbar.css file to the head of your html.
    2. 
 							
  2. Add the pushbar.js file to the head of your html or right before the closing body tag.
    3. 
 							
  3. Add this code after the pushbar.js script tag to initialize the plugin.
    
-									
+
 							
 
-
 							
    4. 
 						

-					
+
 					

@@ -127,7 +132,7 @@
- @@ -147,13 +152,13 @@ Options

- +
  1. blur : set it to true for blur effect on the main content (Default:false)
  2. overlay : set it to true for dark overlay effect on the main content (Default:true)
- + 

@@ -164,18 +169,18 @@
 							Open and close pushbar with api
 							
-						
+
@@ -186,38 +191,41 @@

'pushbar_opening': when a pushbar is opening, that pushbar element will emit this event.

'pushbar_closing': when a pushbar is closing, that pushbar element will emit this event.

- + - -
+
+
+
-
oncebot.com
-
-
- - - + + + + - \ No newline at end of file + + diff --git a/pushbar/pushbar.css b/pushbar/pushbar.css index d0654a2..03d5f14 100644 --- a/pushbar/pushbar.css +++ b/pushbar/pushbar.css @@ -1,27 +1,28 @@ -.pushbar.opened{ -display: block; +.pushbar.opened { + display: block; } -html.pushbar_locked{ - overflow: hidden; - -ms-touch-action: none; - touch-action: none; +html.pushbar_locked { + overflow: hidden; + -ms-touch-action: none; + touch-action: none; } - -.pushbar_locked .pushbar_main_content.pushbar_blur{ - filter:blur(15px); +.pushbar_locked .pushbar_main_content.pushbar_blur { + filter: blur(15px); } -.pushbar{ + +.pushbar { z-index: 1000; position: fixed; will-change: transform; overflow-y: auto; - transition:transform 0.5s ease; + transition: transform 0.5s ease; will-change: transform; - background:#fff; + background: #fff; } -.pushbar_overlay{ + +.pushbar_overlay { z-index: -999; position: fixed; width: 100%; @@ -30,20 +31,20 @@ html.pushbar_locked{ min-height: 100vh; top: 0; left: 0; - will-change: opacity; - transition:opacity 0.5s ease; - opacity:0; - will-change: opacity; + will-change: opacity; + transition: opacity 0.5s ease; + opacity: 0; + will-change: opacity; background: #3c3442; } -html.pushbar_locked .pushbar_overlay{ - opacity:0.8; + +html.pushbar_locked .pushbar_overlay { + opacity: 0.8; z-index: 999; - transition:opacity 0.5s ease; + transition: opacity 0.5s ease; } - -.pushbar.from_left{ +.pushbar.from_left { top: 0; left: 0; width: 256px; @@ -53,7 +54,7 @@ html.pushbar_locked .pushbar_overlay{ transform: translateZ(0) translateX(-100%); } -.pushbar.from_right{ +.pushbar.from_right { top: 0; right: 0; width: 256px; @@ -63,7 +64,7 @@ html.pushbar_locked .pushbar_overlay{ transform: translateZ(0) translateX(100%); } -.pushbar.from_top{ +.pushbar.from_top { top: 0; left: 0; width: 100%; @@ -71,7 +72,8 @@ html.pushbar_locked .pushbar_overlay{ min-height: 150px; transform: translateZ(0) translateY(-100%); } -.pushbar.from_bottom{ + +.pushbar.from_bottom { bottom: 0; left: 0; width: 100%; @@ -80,6 +82,6 @@ html.pushbar_locked .pushbar_overlay{ transform: translateZ(0) translateY(100%); } -.pushbar.opened{ - transform: translateX(0px) translateY(0px); +.pushbar.opened { + transform: translateX(0px) translateY(0px); } diff --git a/pushbar/pushbar.js b/pushbar/pushbar.js index 72f2170..a524c0a 100644 --- a/pushbar/pushbar.js +++ b/pushbar/pushbar.js @@ -23,7 +23,7 @@ class Pushbar { const { activeBar } = this; return Boolean(activeBar instanceof HTMLElement && activeBar.classList.contains('opened')); } - + get activeBarId() { const { activeBar } = this; return activeBar instanceof HTMLElement && activeBar.getAttribute('data-pushbar-id'); @@ -80,17 +80,17 @@ class Pushbar { if (String(pushbarId) === this.activeBarId && this.opened) { return; } - + // Get new pushbar target const pushbar = Pushbar.findElementById(pushbarId); if (!pushbar) return; - + // Close active bar (if exists) if (this.opened) { this.close(); } - + Pushbar.dispatchOpen(pushbar); pushbar.classList.add('opened'); @@ -103,14 +103,14 @@ class Pushbar { close() { const { activeBar } = this; if (!activeBar) return; - + Pushbar.dispatchClose(activeBar); activeBar.classList.remove('opened'); const Root = document.querySelector('html'); Root.classList.remove('pushbar_locked'); Root.removeAttribute('pushbar'); - + this.activeBar = null; } }