From ca0d33635b7f807a85f6decea12f428115d5d792 Mon Sep 17 00:00:00 2001 From: Thomas Wilkerling Date: Fri, 23 Apr 2021 14:09:59 +0200 Subject: [PATCH] improve centered icons in minimized state --- README.md | 28 ++++++++++++++-------------- demo/style.css | 1 - dist/css/winbox.min.css | 2 +- dist/js/winbox.min.js | 2 +- dist/winbox.bundle.js | 4 ++-- package.json | 2 +- src/css/winbox.css | 4 ++-- src/css/winbox.less | 4 ++-- 8 files changed, 23 insertions(+), 24 deletions(-) diff --git a/README.md b/README.md index e956cbf..9a363fe 100644 --- a/README.md +++ b/README.md @@ -24,8 +24,8 @@ __Get Latest Build (Stable):__ winbox.bundle.js - Download - https://rawcdn.githack.com/nextapps-de/winbox/0.1.4/dist/winbox.bundle.js + Download + https://rawcdn.githack.com/nextapps-de/winbox/0.1.5/dist/winbox.bundle.js @@ -34,14 +34,14 @@ __Get Latest Build (Stable):__ winbox.min.js - Download - https://rawcdn.githack.com/nextapps-de/winbox/0.1.4/dist/js/winbox.min.js + Download + https://rawcdn.githack.com/nextapps-de/winbox/0.1.5/dist/js/winbox.min.js winbox.min.css - Download - https://rawcdn.githack.com/nextapps-de/winbox/0.1.4/dist/css/winbox.min.css + Download + https://rawcdn.githack.com/nextapps-de/winbox/0.1.5/dist/css/winbox.min.css @@ -50,32 +50,32 @@ __Get Latest Build (Stable):__ ES6 Modules - Download + Download The /src/js folder of this Github repository winbox.less (source) - Download - https://rawcdn.githack.com/nextapps-de/winbox/0.1.4/src/css/winbox.less + Download + https://rawcdn.githack.com/nextapps-de/winbox/0.1.5/src/css/winbox.less winbox.css (compiled) - Download - https://rawcdn.githack.com/nextapps-de/winbox/0.1.4/src/css/winbox.css + Download + https://rawcdn.githack.com/nextapps-de/winbox/0.1.5/src/css/winbox.css src.zip - Download + Download Download all source files including image original resources. __Get Latest Build (Nightly):__ -Just exchange the version number from the URLs above with "master", e.g.: "/winbox/__0.1.4__/dist/" into "/winbox/__master__/dist". +Just exchange the version number from the URLs above with "master", e.g.: "/winbox/__0.1.5__/dist/" into "/winbox/__master__/dist". __Get Latest (NPM):__ @@ -162,7 +162,7 @@ You can also load modules via CDN, e.g.: ```html ``` diff --git a/demo/style.css b/demo/style.css index eeac794..2af30a5 100644 --- a/demo/style.css +++ b/demo/style.css @@ -3,7 +3,6 @@ touch-action: manipulation; } html, body{ - position: relative; margin: 0; padding: 0; border: 0; diff --git a/dist/css/winbox.min.css b/dist/css/winbox.min.css index 8e9bbc9..3804820 100644 --- a/dist/css/winbox.min.css +++ b/dist/css/winbox.min.css @@ -1 +1 @@ -@keyframes fade-in{0%{opacity:0}to{opacity:.85}}.wb-body,.wb-n{right:0;left:0}.winbox.modal:after,.winbox.modal:before{content:''}.no-move:not(.min) .wb-title,.winbox.max .wb-body~div,.winbox.max .wb-title,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title{pointer-events:none}.winbox{position:fixed;left:0;top:0;background:#0050ff;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);transition:width .3s,height .3s,transform .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);will-change:transform,width,height;contain:layout size;text-align:left;touch-action:none}.max,.no-shadow{box-shadow:none}.wb-header{position:absolute;left:0;top:0;width:100%;height:35px;color:#fff;overflow:hidden}.wb-e,.wb-nw,.wb-w{width:10px}.wb-n,.wb-nw,.wb-s,.winbox iframe{position:absolute;height:10px}.wb-body{position:absolute;top:35px;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:scroll-position;background:#fff;margin-top:0!important}.wb-title{font-family:Arial,sans-serif;font-size:14px;padding-left:10px;cursor:move;line-height:35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-n{top:-5px;cursor:n-resize}.wb-e{position:absolute;top:0;right:-5px;bottom:0;cursor:w-resize}.wb-s,.wb-se,.wb-sw{bottom:-5px}.wb-s{left:0;right:0;cursor:n-resize}.wb-w,.winbox.modal:before{position:absolute;top:0;bottom:0}.wb-nw,.wb-w{left:-5px;cursor:w-resize}.wb-nw{top:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize;width:10px;height:10px;position:absolute}.wb-ne{top:-5px;right:-5px}.wb-sw{left:-5px}.wb-se{position:absolute;right:-5px;width:10px;height:10px;cursor:nw-resize}.wb-icon{float:right;height:35px;max-width:110%;padding:0 1px;text-align:center}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer}.no-close .wb-close,.no-full .wb-full,.no-header .wb-header,.no-max .wb-max,.no-min .wb-min,.no-resize .wb-body~div,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center bottom 11px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.min .wb-title{cursor:default}.max .wb-body{margin:0!important}.winbox iframe{width:100%;height:100%;border:0}.winbox.modal:before{left:0;right:0;background:inherit;border-radius:inherit}.winbox.modal:after{position:absolute;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:#0d1117;animation:fade-in .2s ease-out forwards;z-index:-1}.no-animation{transition:none}.no-header .wb-body{top:0} \ No newline at end of file +@keyframes fade-in{0%{opacity:0}to{opacity:.85}}.wb-body,.wb-n{right:0;left:0}.winbox.modal:after,.winbox.modal:before{content:''}.no-move:not(.min) .wb-title,.winbox.max .wb-body~div,.winbox.max .wb-title,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title{pointer-events:none}.winbox{position:fixed;left:0;top:0;background:#0050ff;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);transition:width .3s,height .3s,transform .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);will-change:transform,width,height;contain:layout size;text-align:left;touch-action:none}.max,.no-shadow{box-shadow:none}.wb-header{position:absolute;left:0;top:0;width:100%;height:35px;color:#fff;overflow:hidden}.wb-e,.wb-nw,.wb-w{width:10px}.wb-n,.wb-nw,.wb-s,.winbox iframe{position:absolute;height:10px}.wb-body{position:absolute;top:35px;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:scroll-position;background:#fff;margin-top:0!important}.wb-title{font-family:Arial,sans-serif;font-size:14px;padding-left:10px;cursor:move;line-height:35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-n{top:-5px;cursor:n-resize}.wb-e{position:absolute;top:0;right:-5px;bottom:0;cursor:w-resize}.wb-s,.wb-se,.wb-sw{bottom:-5px}.wb-s{left:0;right:0;cursor:n-resize}.wb-w,.winbox.modal:before{position:absolute;top:0;bottom:0}.wb-nw,.wb-w{left:-5px;cursor:w-resize}.wb-nw{top:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize;width:10px;height:10px;position:absolute}.wb-ne{top:-5px;right:-5px}.wb-sw{left:-5px}.wb-se{position:absolute;right:-5px;width:10px;height:10px;cursor:nw-resize}.wb-icon{float:right;height:35px;max-width:100%;text-align:center}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer;max-width:100%}.no-close .wb-close,.no-full .wb-full,.no-header .wb-header,.no-max .wb-max,.no-min .wb-min,.no-resize .wb-body~div,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center bottom 11px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.min .wb-title{cursor:default}.max .wb-body{margin:0!important}.winbox iframe{width:100%;height:100%;border:0}.winbox.modal:before{left:0;right:0;background:inherit;border-radius:inherit}.winbox.modal:after{position:absolute;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:#0d1117;animation:fade-in .2s ease-out forwards;z-index:-1}.no-animation{transition:none}.no-header .wb-body{top:0} \ No newline at end of file diff --git a/dist/js/winbox.min.js b/dist/js/winbox.min.js index 8e01c06..61fb884 100644 --- a/dist/js/winbox.min.js +++ b/dist/js/winbox.min.js @@ -1,5 +1,5 @@ /** - * WinBox.js v0.1.4 + * WinBox.js v0.1.5 * Copyright 2021 Nextapps GmbH * Author: Thomas Wilkerling * Licence: Apache-2.0 diff --git a/dist/winbox.bundle.js b/dist/winbox.bundle.js index 588e830..b2759ac 100644 --- a/dist/winbox.bundle.js +++ b/dist/winbox.bundle.js @@ -1,11 +1,11 @@ /** - * WinBox.js v0.1.4 (Bundle) + * WinBox.js v0.1.5 (Bundle) * Copyright 2021 Nextapps GmbH * Author: Thomas Wilkerling * Licence: Apache-2.0 * https://github.com/nextapps-de/winbox */ -(function(){'use strict';var e,g=document.createElement("style");g.innerHTML="@keyframes fade-in{0%{opacity:0}to{opacity:.85}}.wb-body,.wb-n{right:0;left:0}.winbox.modal:after,.winbox.modal:before{content:''}.no-move:not(.min) .wb-title,.winbox.max .wb-body~div,.winbox.max .wb-title,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title{pointer-events:none}.winbox{position:fixed;left:0;top:0;background:#0050ff;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);transition:width .3s,height .3s,transform .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);will-change:transform,width,height;contain:layout size;text-align:left;touch-action:none}.max,.no-shadow{box-shadow:none}.wb-header{position:absolute;left:0;top:0;width:100%;height:35px;color:#fff;overflow:hidden}.wb-e,.wb-nw,.wb-w{width:10px}.wb-n,.wb-nw,.wb-s,.winbox iframe{position:absolute;height:10px}.wb-body{position:absolute;top:35px;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:scroll-position;background:#fff;margin-top:0!important}.wb-title{font-family:Arial,sans-serif;font-size:14px;padding-left:10px;cursor:move;line-height:35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-n{top:-5px;cursor:n-resize}.wb-e{position:absolute;top:0;right:-5px;bottom:0;cursor:w-resize}.wb-s,.wb-se,.wb-sw{bottom:-5px}.wb-s{left:0;right:0;cursor:n-resize}.wb-w,.winbox.modal:before{position:absolute;top:0;bottom:0}.wb-nw,.wb-w{left:-5px;cursor:w-resize}.wb-nw{top:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize;width:10px;height:10px;position:absolute}.wb-ne{top:-5px;right:-5px}.wb-sw{left:-5px}.wb-se{position:absolute;right:-5px;width:10px;height:10px;cursor:nw-resize}.wb-icon{float:right;height:35px;max-width:110%;padding:0 1px;text-align:center}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer}.no-close .wb-close,.no-full .wb-full,.no-header .wb-header,.no-max .wb-max,.no-min .wb-min,.no-resize .wb-body~div,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center bottom 11px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.min .wb-title{cursor:default}.max .wb-body{margin:0!important}.winbox iframe{width:100%;height:100%;border:0}.winbox.modal:before{left:0;right:0;background:inherit;border-radius:inherit}.winbox.modal:after{position:absolute;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:#0d1117;animation:fade-in .2s ease-out forwards;z-index:-1}.no-animation{transition:none}.no-header .wb-body{top:0}"; +(function(){'use strict';var e,g=document.createElement("style");g.innerHTML="@keyframes fade-in{0%{opacity:0}to{opacity:.85}}.wb-body,.wb-n{right:0;left:0}.winbox.modal:after,.winbox.modal:before{content:''}.no-move:not(.min) .wb-title,.winbox.max .wb-body~div,.winbox.max .wb-title,.winbox.min .wb-body~div,.winbox.modal .wb-body~div,.winbox.modal .wb-title{pointer-events:none}.winbox{position:fixed;left:0;top:0;background:#0050ff;box-shadow:0 14px 28px rgba(0,0,0,.25),0 10px 10px rgba(0,0,0,.22);transition:width .3s,height .3s,transform .3s;transition-timing-function:cubic-bezier(.3,1,.3,1);will-change:transform,width,height;contain:layout size;text-align:left;touch-action:none}.max,.no-shadow{box-shadow:none}.wb-header{position:absolute;left:0;top:0;width:100%;height:35px;color:#fff;overflow:hidden}.wb-e,.wb-nw,.wb-w{width:10px}.wb-n,.wb-nw,.wb-s,.winbox iframe{position:absolute;height:10px}.wb-body{position:absolute;top:35px;bottom:0;overflow:auto;-webkit-overflow-scrolling:touch;overflow-scrolling:touch;will-change:scroll-position;background:#fff;margin-top:0!important}.wb-title{font-family:Arial,sans-serif;font-size:14px;padding-left:10px;cursor:move;line-height:35px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.wb-n{top:-5px;cursor:n-resize}.wb-e{position:absolute;top:0;right:-5px;bottom:0;cursor:w-resize}.wb-s,.wb-se,.wb-sw{bottom:-5px}.wb-s{left:0;right:0;cursor:n-resize}.wb-w,.winbox.modal:before{position:absolute;top:0;bottom:0}.wb-nw,.wb-w{left:-5px;cursor:w-resize}.wb-nw{top:-5px;cursor:nw-resize}.wb-ne,.wb-sw{cursor:ne-resize;width:10px;height:10px;position:absolute}.wb-ne{top:-5px;right:-5px}.wb-sw{left:-5px}.wb-se{position:absolute;right:-5px;width:10px;height:10px;cursor:nw-resize}.wb-icon{float:right;height:35px;max-width:100%;text-align:center}.wb-icon *{display:inline-block;width:30px;height:100%;background-position:center;background-repeat:no-repeat;cursor:pointer;max-width:100%}.no-close .wb-close,.no-full .wb-full,.no-header .wb-header,.no-max .wb-max,.no-min .wb-min,.no-resize .wb-body~div,.winbox.min .wb-full,.winbox.min .wb-min,.winbox.modal .wb-full,.winbox.modal .wb-max,.winbox.modal .wb-min{display:none}.wb-min{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9IjAgMCAxNiAyIj48cGF0aCBmaWxsPSIjZmZmIiBkPSJNOCAwaDdhMSAxIDAgMCAxIDAgMkgxYTEgMSAwIDAgMSAwLTJoN3oiLz48L3N2Zz4=);background-size:14px auto;background-position:center bottom 11px}.wb-max{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9IiNmZmYiIHZpZXdCb3g9IjAgMCA5NiA5NiI+PHBhdGggZD0iTTIwIDcxLjMxMUMxNS4zNCA2OS42NyAxMiA2NS4yMyAxMiA2MFYyMGMwLTYuNjMgNS4zNy0xMiAxMi0xMmg0MGM1LjIzIDAgOS42NyAzLjM0IDExLjMxMSA4SDI0Yy0yLjIxIDAtNCAxLjc5LTQgNHY1MS4zMTF6Ii8+PHBhdGggZD0iTTkyIDc2VjM2YzAtNi42My01LjM3LTEyLTEyLTEySDQwYy02LjYzIDAtMTIgNS4zNy0xMiAxMnY0MGMwIDYuNjMgNS4zNyAxMiAxMiAxMmg0MGM2LjYzIDAgMTItNS4zNyAxMi0xMnptLTUyIDRjLTIuMjEgMC00LTEuNzktNC00VjM2YzAtMi4yMSAxLjc5LTQgNC00aDQwYzIuMjEgMCA0IDEuNzkgNCA0djQwYzAgMi4yMS0xLjc5IDQtNCA0SDQweiIvPjwvc3ZnPg==);background-size:17px auto}.wb-close{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHZpZXdCb3g9Ii0xIC0xIDE4IDE4Ij48cGF0aCBmaWxsPSIjZmZmIiBkPSJtMS42MTMuMjEuMDk0LjA4M0w4IDYuNTg1IDE0LjI5My4yOTNsLjA5NC0uMDgzYTEgMSAwIDAgMSAxLjQwMyAxLjQwM2wtLjA4My4wOTRMOS40MTUgOGw2LjI5MiA2LjI5M2ExIDEgMCAwIDEtMS4zMiAxLjQ5N2wtLjA5NC0uMDgzTDggOS40MTVsLTYuMjkzIDYuMjkyLS4wOTQuMDgzQTEgMSAwIDAgMSAuMjEgMTQuMzg3bC4wODMtLjA5NEw2LjU4NSA4IC4yOTMgMS43MDdBMSAxIDAgMCAxIDEuNjEzLjIxeiIvPjwvc3ZnPg==);background-size:15px auto}.wb-full{background-image:url(data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIGZpbGw9Im5vbmUiIHN0cm9rZT0iI2ZmZiIgc3Ryb2tlLWxpbmVjYXA9InJvdW5kIiBzdHJva2Utd2lkdGg9IjIuNSIgdmlld0JveD0iMCAwIDI0IDI0Ij48cGF0aCBkPSJNOCAzSDVhMiAyIDAgMCAwLTIgMnYzbTE4IDBWNWEyIDIgMCAwIDAtMi0yaC0zbTAgMThoM2EyIDIgMCAwIDAgMi0ydi0zTTMgMTZ2M2EyIDIgMCAwIDAgMiAyaDMiLz48L3N2Zz4=);background-size:16px auto}.winbox.min .wb-title{cursor:default}.max .wb-body{margin:0!important}.winbox iframe{width:100%;height:100%;border:0}.winbox.modal:before{left:0;right:0;background:inherit;border-radius:inherit}.winbox.modal:after{position:absolute;top:-100vh;left:-100vw;right:-100vw;bottom:-100vh;background:#0d1117;animation:fade-in .2s ease-out forwards;z-index:-1}.no-animation{transition:none}.no-header .wb-body{top:0}"; var p=document.getElementsByTagName("head")[0];p.firstChild?p.insertBefore(g,p.firstChild):p.appendChild(g);var r=document.createElement("div");r.innerHTML="
";function t(a,b,c){a.addEventListener(b,c,void 0)}function u(a,b){window.removeEventListener(a,b,void 0)}function v(a,b,c){a["_s_"+b]!==c&&(a.style.setProperty(b,c),a["_s_"+b]=c)}function w(a,b){a.stopPropagation();b&&a.preventDefault()};var x=document.documentElement,z=[],A=0,B,C,D,K,L,M,N; function P(a,b){if(!(this instanceof P))return new P(a);B||R();this.g=r.cloneNode(!0);this.body=this.g.getElementsByClassName("wb-body")[0];var c,h;if(a){if(b){var f=a;a=b}if("string"===typeof a)f=a;else{if(h=a.modal)var q=c="center";var E=a.id;var F=a.root;f=f||a.title;var d=a.mount;var G=a.html;var y=a.url;var k=a.width;var l=a.height;q=a.x||q;c=a.y||c;var H=a.max;var m=a.top;var n=a.left;var I=a.bottom;var J=a.right;B=a.index||B;var Y=a.onclose;var Z=a.onfocus;var aa=a.onblur;var ba=a.onmove;var ca= a.onresize;b=a.background;var Q=a.border;var O=a["class"];b&&this.setBackground(b);Q&&v(this.body,"margin",Q+(isNaN(Q)?"":"px"))}}this.setTitle(f||"");a=M;f=N;m=m?S(m,f):0;I=I?S(I,f):0;n=n?S(n,a):0;J=J?S(J,a):0;a-=n+J;f-=m+I;k=k?S(k,a):a/2|0;l=l?S(l,f):f/2|0;q=q?S(q,a,k):n;c=c?S(c,f,l):m;B=B||10;this.g.id=this.id=E||"winbox-"+ ++A;this.g.className="winbox"+(O?" "+("string"===typeof O?O:O.join(" ")):"")+(h?" modal":"");this.x=q;this.y=c;this.width=k;this.height=l;this.top=m;this.right=J;this.bottom= diff --git a/package.json b/package.json index f5606c3..1b0981f 100644 --- a/package.json +++ b/package.json @@ -1,6 +1,6 @@ { "name": "winbox", - "version": "0.1.4", + "version": "0.1.5", "description": "Modern HTML5 window manager for the web.", "homepage": "https://nextapps-de.github.io/winbox/", "author": "Thomas Wilkerling", diff --git a/src/css/winbox.css b/src/css/winbox.css index 4bfadfe..499a1ce 100644 --- a/src/css/winbox.css +++ b/src/css/winbox.css @@ -115,8 +115,7 @@ .wb-icon { float: right; height: 35px; - max-width: 110%; - padding: 0 1px; + max-width: 100%; text-align: center; } .wb-icon * { @@ -126,6 +125,7 @@ background-position: center; background-repeat: no-repeat; cursor: pointer; + max-width: 100%; } .wb-min { background-image: url("../img/min.svg"); diff --git a/src/css/winbox.less b/src/css/winbox.less index fcf325e..42bfc64 100644 --- a/src/css/winbox.less +++ b/src/css/winbox.less @@ -130,8 +130,7 @@ .wb-icon{ float: right; height: 35px; - max-width: 110%; - padding: 0 1px; + max-width: 100%; text-align: center; } @@ -142,6 +141,7 @@ background-position: center; background-repeat: no-repeat; cursor: pointer; + max-width: 100%; } .wb-min {