From 152b19dac1499a8940ee1673cb81b33b033d0020 Mon Sep 17 00:00:00 2001 From: Keiwen Date: Tue, 21 Nov 2017 16:52:33 +0100 Subject: [PATCH] fix issue with bootstrap style --- README.md | 4 +++- dist/vue-enhanced-check.js | 4 ++-- docs/dist/build.js | 4 ++-- package-lock.json | 7 +------ package.json | 3 +-- src/components/EnhancedToggle.vue | 18 ++++++++++++++++-- 6 files changed, 25 insertions(+), 15 deletions(-) diff --git a/README.md b/README.md index 83c182f..abf4ce7 100644 --- a/README.md +++ b/README.md @@ -10,6 +10,8 @@ Enhanced checkboxes /radio input, component for vue 2+. > Issue with ES2015 -> switch away in version 1.4 +> Issue with bootstrap 3.3 on toggle component -> style fix in version 1.5 + ## Global use - npm install ``` @@ -129,7 +131,7 @@ As classic radio buttons, model bound to value from checked input ### Toggle button Checkbox is replaced by 2 switching labels, for on and off states ``` - + ``` ``` tag\n\n// lo /* 22 */ /***/ (function(module, exports, __webpack_require__) { -eval("exports = module.exports = __webpack_require__(0)();\nexports.push([module.i, \"\\n@charset \\\"UTF-8\\\";\\n.enhancedCheck-inline[data-v-56a2ed7a] {\\n display: inline;\\n}\\n.enhancedCheck-inline div[data-v-56a2ed7a] {\\n display: inline;\\n}\\n.enhancedCheck div[data-v-56a2ed7a] {\\n margin-top: 5px;\\n margin-bottom: 5px;\\n}\\n.enhancedCheck label[data-v-56a2ed7a] {\\n border-radius: 3px 0 0 3px;\\n}\\n.enhancedCheck label[data-v-56a2ed7a]:before {\\n border-radius: 3px 0 0 3px;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"][data-v-56a2ed7a], .enhancedCheck input[type=\\\"checkbox\\\"][data-v-56a2ed7a] {\\n display: none;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"] + label[data-v-56a2ed7a], .enhancedCheck input[type=\\\"checkbox\\\"] + label[data-v-56a2ed7a] {\\n border: 1px solid #aaaaaa;\\n color: inherit;\\n position: relative;\\n padding: 5px 5px 5px 35px;\\n cursor: pointer;\\n display: inline-block;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"] + label:checked + label[data-v-56a2ed7a]:before, .enhancedCheck input[type=\\\"checkbox\\\"] + label:checked + label[data-v-56a2ed7a]:before {\\n background: #aaaaaa;\\n color: white;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"] + label:not(:checked) + label[data-v-56a2ed7a]:hover, .enhancedCheck input[type=\\\"checkbox\\\"] + label:not(:checked) + label[data-v-56a2ed7a]:hover {\\n border: 1px solid #aaaaaa;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"] + label:checked:disabled + label[data-v-56a2ed7a]:before, .enhancedCheck input[type=\\\"checkbox\\\"] + label:checked:disabled + label[data-v-56a2ed7a]:before {\\n background: #dddddd;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"] + label:not(:checked):disabled + label[data-v-56a2ed7a]:hover, .enhancedCheck input[type=\\\"checkbox\\\"] + label:not(:checked):disabled + label[data-v-56a2ed7a]:hover {\\n border: 1px solid #dddddd;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"] + label[data-v-56a2ed7a]:before, .enhancedCheck input[type=\\\"checkbox\\\"] + label[data-v-56a2ed7a]:before {\\n position: absolute;\\n display: block;\\n top: 0;\\n bottom: 0;\\n left: 0;\\n content: '';\\n width: 30px;\\n background: #dddddd;\\n text-align: center;\\n line-height: 200%;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"]:disabled + label[data-v-56a2ed7a], .enhancedCheck input[type=\\\"checkbox\\\"]:disabled + label[data-v-56a2ed7a] {\\n cursor: not-allowed;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover, .enhancedCheck input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover {\\n color: #777777;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover:before, .enhancedCheck input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover:before {\\n color: #aaaaaa;\\n}\\n.enhancedCheck input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover:before {\\n content: \\\"✔\\\";\\n}\\n.enhancedCheck input[type=\\\"checkbox\\\"]:checked + label[data-v-56a2ed7a]:before {\\n content: \\\"✔\\\";\\n}\\n.enhancedCheck input[type=\\\"radio\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover:before {\\n content: \\\"⚫\\\";\\n}\\n.enhancedCheck input[type=\\\"radio\\\"]:checked + label[data-v-56a2ed7a]:before {\\n content: \\\"⚫\\\";\\n}\\n.enhancedCheck.enhancedCheck-combine input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover:before {\\n content: \\\"➕\\\";\\n}\\n.enhancedCheck.enhancedCheck-combine input[type=\\\"checkbox\\\"]:checked + label[data-v-56a2ed7a]:before {\\n content: \\\"➕\\\";\\n}\\n.enhancedCheck.enhancedCheck-primary input[type=\\\"radio\\\"]:checked + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-primary input[type=\\\"checkbox\\\"]:checked + label[data-v-56a2ed7a]:before {\\n background: #337ab7;\\n color: white;\\n}\\n.enhancedCheck.enhancedCheck-primary input[type=\\\"radio\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-primary input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover {\\n border: 1px solid #337ab7;\\n}\\n.enhancedCheck.enhancedCheck-primary input[type=\\\"radio\\\"]:checked:disabled + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-primary input[type=\\\"checkbox\\\"]:checked:disabled + label[data-v-56a2ed7a]:before {\\n background: rgba(51, 122, 183, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-primary input[type=\\\"radio\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-primary input[type=\\\"checkbox\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover {\\n border: 1px solid rgba(51, 122, 183, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-success input[type=\\\"radio\\\"]:checked + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-success input[type=\\\"checkbox\\\"]:checked + label[data-v-56a2ed7a]:before {\\n background: #5cb85c;\\n color: white;\\n}\\n.enhancedCheck.enhancedCheck-success input[type=\\\"radio\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-success input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover {\\n border: 1px solid #5cb85c;\\n}\\n.enhancedCheck.enhancedCheck-success input[type=\\\"radio\\\"]:checked:disabled + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-success input[type=\\\"checkbox\\\"]:checked:disabled + label[data-v-56a2ed7a]:before {\\n background: rgba(92, 184, 92, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-success input[type=\\\"radio\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-success input[type=\\\"checkbox\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover {\\n border: 1px solid rgba(92, 184, 92, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-warning input[type=\\\"radio\\\"]:checked + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-warning input[type=\\\"checkbox\\\"]:checked + label[data-v-56a2ed7a]:before {\\n background: #f0ad4e;\\n color: white;\\n}\\n.enhancedCheck.enhancedCheck-warning input[type=\\\"radio\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-warning input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover {\\n border: 1px solid #f0ad4e;\\n}\\n.enhancedCheck.enhancedCheck-warning input[type=\\\"radio\\\"]:checked:disabled + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-warning input[type=\\\"checkbox\\\"]:checked:disabled + label[data-v-56a2ed7a]:before {\\n background: rgba(240, 173, 78, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-warning input[type=\\\"radio\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-warning input[type=\\\"checkbox\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover {\\n border: 1px solid rgba(240, 173, 78, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-danger input[type=\\\"radio\\\"]:checked + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-danger input[type=\\\"checkbox\\\"]:checked + label[data-v-56a2ed7a]:before {\\n background: #d9534f;\\n color: white;\\n}\\n.enhancedCheck.enhancedCheck-danger input[type=\\\"radio\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-danger input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover {\\n border: 1px solid #d9534f;\\n}\\n.enhancedCheck.enhancedCheck-danger input[type=\\\"radio\\\"]:checked:disabled + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-danger input[type=\\\"checkbox\\\"]:checked:disabled + label[data-v-56a2ed7a]:before {\\n background: rgba(217, 83, 79, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-danger input[type=\\\"radio\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-danger input[type=\\\"checkbox\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover {\\n border: 1px solid rgba(217, 83, 79, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-animate label[data-v-56a2ed7a] {\\n transition: color 1s ease;\\n -webkit-transition: color 1s ease;\\n}\\n.enhancedCheck.enhancedCheck-animate label[data-v-56a2ed7a]:before {\\n transition: background-color 1s ease;\\n -webkit-transition: background-color 1s ease;\\n}\\n.enhancedCheck.enhancedCheck-rounded label[data-v-56a2ed7a] {\\n border-radius: 25px;\\n}\\n.enhancedCheck.enhancedCheck-rounded label[data-v-56a2ed7a]:before {\\n border-radius: 25px;\\n}\\n.enhancedToggle[data-v-56a2ed7a] {\\n position: relative;\\n overflow: hidden;\\n vertical-align: middle;\\n user-select: none;\\n cursor: pointer;\\n height: 2em;\\n border: 1px solid #51626f;\\n border-radius: 3px;\\n margin-top: 5px;\\n margin-bottom: 5px;\\n}\\n.enhancedToggle .enhancedToggle-label[data-v-56a2ed7a] {\\n background: #aaaaaa;\\n color: white;\\n}\\n.enhancedToggle.enhancedCheck-disabled .enhancedToggle-label[data-v-56a2ed7a] {\\n background: #dddddd;\\n}\\n.enhancedToggle.enhancedCheck-rounded[data-v-56a2ed7a] {\\n border-radius: 25px;\\n}\\n.enhancedToggle label[data-v-56a2ed7a] {\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n left: -100%;\\n width: 200%;\\n transition: left 0.5s;\\n -webkit-transition: left 0.5s;\\n}\\n.enhancedToggle.enhancedCheck-checked label[data-v-56a2ed7a] {\\n left: 0;\\n}\\n.enhancedToggle.enhancedCheck-disabled label[data-v-56a2ed7a] {\\n cursor: not-allowed;\\n}\\n.enhancedToggle.enhancedCheck-primary .enhancedToggle-label[data-v-56a2ed7a] {\\n background: #337ab7;\\n color: white;\\n}\\n.enhancedToggle.enhancedCheck-primary.enhancedCheck-disabled .enhancedToggle-label[data-v-56a2ed7a] {\\n background: rgba(51, 122, 183, 0.5);\\n}\\n.enhancedToggle.enhancedCheck-success .enhancedToggle-label[data-v-56a2ed7a] {\\n background: #5cb85c;\\n color: white;\\n}\\n.enhancedToggle.enhancedCheck-success.enhancedCheck-disabled .enhancedToggle-label[data-v-56a2ed7a] {\\n background: rgba(92, 184, 92, 0.5);\\n}\\n.enhancedToggle.enhancedCheck-warning .enhancedToggle-label[data-v-56a2ed7a] {\\n background: #f0ad4e;\\n color: white;\\n}\\n.enhancedToggle.enhancedCheck-warning.enhancedCheck-disabled .enhancedToggle-label[data-v-56a2ed7a] {\\n background: rgba(240, 173, 78, 0.5);\\n}\\n.enhancedToggle.enhancedCheck-danger .enhancedToggle-label[data-v-56a2ed7a] {\\n background: #d9534f;\\n color: white;\\n}\\n.enhancedToggle.enhancedCheck-danger.enhancedCheck-disabled .enhancedToggle-label[data-v-56a2ed7a] {\\n background: rgba(217, 83, 79, 0.5);\\n}\\n.enhancedToggle .enhancedToggle-label[data-v-56a2ed7a] {\\n padding: 5px 5px;\\n transition: background 0.5s;\\n -webkit-transition: background 0.5s;\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n border-radius: 3px;\\n color: inherit;\\n box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\\n text-align: center;\\n}\\n.enhancedToggle .enhancedToggle-label.labelOn[data-v-56a2ed7a] {\\n left: 0;\\n padding-right: 35px;\\n}\\n.enhancedToggle .enhancedToggle-label.labelOff[data-v-56a2ed7a] {\\n right: 0;\\n padding-left: 35px;\\n}\\n.enhancedToggle .enhancedToggle-switch[data-v-56a2ed7a] {\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n left: 50px;\\n border: 1px solid #51626f;\\n border-radius: 3px;\\n width: 20px;\\n z-index: 20;\\n background: white;\\n}\\n.enhancedToggle.enhancedCheck-rounded .enhancedToggle-label[data-v-56a2ed7a], .enhancedToggle.enhancedCheck-rounded .enhancedToggle-switch[data-v-56a2ed7a] {\\n border-radius: 25px;\\n}\\n.enhancedToggle[data-v-56a2ed7a] {\\n width: var(--toggleWidth);\\n}\\n.enhancedToggle .labelOn[data-v-56a2ed7a] {\\n width: var(--labelWidth);\\n}\\n.enhancedToggle .labelOff[data-v-56a2ed7a] {\\n width: var(--labelWidth);\\n}\\n.enhancedToggle .enhancedToggle-switch[data-v-56a2ed7a] {\\n width: var(--switchWidth);\\n left: var(--switchPos);\\n}\\n\", \"\"]);\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-56a2ed7a\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/components/EnhancedToggle.vue\n// module id = 22\n// module chunks = 0\n\n//# sourceURL=webpack:///./src/components/EnhancedToggle.vue?./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?%7B%22vue%22:true,%22id%22:%22data-v-56a2ed7a%22,%22scoped%22:true,%22hasInlineConfig%22:false%7D!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache"); +eval("exports = module.exports = __webpack_require__(0)();\nexports.push([module.i, \"\\n@charset \\\"UTF-8\\\";\\n.enhancedCheck-inline[data-v-56a2ed7a] {\\n display: inline;\\n}\\n.enhancedCheck-inline div[data-v-56a2ed7a] {\\n display: inline;\\n}\\n.enhancedCheck div[data-v-56a2ed7a] {\\n margin-top: 5px;\\n margin-bottom: 5px;\\n}\\n.enhancedCheck label[data-v-56a2ed7a] {\\n border-radius: 3px 0 0 3px;\\n}\\n.enhancedCheck label[data-v-56a2ed7a]:before {\\n border-radius: 3px 0 0 3px;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"][data-v-56a2ed7a], .enhancedCheck input[type=\\\"checkbox\\\"][data-v-56a2ed7a] {\\n display: none;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"] + label[data-v-56a2ed7a], .enhancedCheck input[type=\\\"checkbox\\\"] + label[data-v-56a2ed7a] {\\n border: 1px solid #aaaaaa;\\n color: inherit;\\n position: relative;\\n padding: 5px 5px 5px 35px;\\n cursor: pointer;\\n display: inline-block;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"] + label:checked + label[data-v-56a2ed7a]:before, .enhancedCheck input[type=\\\"checkbox\\\"] + label:checked + label[data-v-56a2ed7a]:before {\\n background: #aaaaaa;\\n color: white;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"] + label:not(:checked) + label[data-v-56a2ed7a]:hover, .enhancedCheck input[type=\\\"checkbox\\\"] + label:not(:checked) + label[data-v-56a2ed7a]:hover {\\n border: 1px solid #aaaaaa;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"] + label:checked:disabled + label[data-v-56a2ed7a]:before, .enhancedCheck input[type=\\\"checkbox\\\"] + label:checked:disabled + label[data-v-56a2ed7a]:before {\\n background: #dddddd;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"] + label:not(:checked):disabled + label[data-v-56a2ed7a]:hover, .enhancedCheck input[type=\\\"checkbox\\\"] + label:not(:checked):disabled + label[data-v-56a2ed7a]:hover {\\n border: 1px solid #dddddd;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"] + label[data-v-56a2ed7a]:before, .enhancedCheck input[type=\\\"checkbox\\\"] + label[data-v-56a2ed7a]:before {\\n position: absolute;\\n display: block;\\n top: 0;\\n bottom: 0;\\n left: 0;\\n content: '';\\n width: 30px;\\n background: #dddddd;\\n text-align: center;\\n line-height: 200%;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"]:disabled + label[data-v-56a2ed7a], .enhancedCheck input[type=\\\"checkbox\\\"]:disabled + label[data-v-56a2ed7a] {\\n cursor: not-allowed;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover, .enhancedCheck input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover {\\n color: #777777;\\n}\\n.enhancedCheck input[type=\\\"radio\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover:before, .enhancedCheck input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover:before {\\n color: #aaaaaa;\\n}\\n.enhancedCheck input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover:before {\\n content: \\\"✔\\\";\\n}\\n.enhancedCheck input[type=\\\"checkbox\\\"]:checked + label[data-v-56a2ed7a]:before {\\n content: \\\"✔\\\";\\n}\\n.enhancedCheck input[type=\\\"radio\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover:before {\\n content: \\\"⚫\\\";\\n}\\n.enhancedCheck input[type=\\\"radio\\\"]:checked + label[data-v-56a2ed7a]:before {\\n content: \\\"⚫\\\";\\n}\\n.enhancedCheck.enhancedCheck-combine input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover:before {\\n content: \\\"➕\\\";\\n}\\n.enhancedCheck.enhancedCheck-combine input[type=\\\"checkbox\\\"]:checked + label[data-v-56a2ed7a]:before {\\n content: \\\"➕\\\";\\n}\\n.enhancedCheck.enhancedCheck-primary input[type=\\\"radio\\\"]:checked + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-primary input[type=\\\"checkbox\\\"]:checked + label[data-v-56a2ed7a]:before {\\n background: #337ab7;\\n color: white;\\n}\\n.enhancedCheck.enhancedCheck-primary input[type=\\\"radio\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-primary input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover {\\n border: 1px solid #337ab7;\\n}\\n.enhancedCheck.enhancedCheck-primary input[type=\\\"radio\\\"]:checked:disabled + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-primary input[type=\\\"checkbox\\\"]:checked:disabled + label[data-v-56a2ed7a]:before {\\n background: rgba(51, 122, 183, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-primary input[type=\\\"radio\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-primary input[type=\\\"checkbox\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover {\\n border: 1px solid rgba(51, 122, 183, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-success input[type=\\\"radio\\\"]:checked + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-success input[type=\\\"checkbox\\\"]:checked + label[data-v-56a2ed7a]:before {\\n background: #5cb85c;\\n color: white;\\n}\\n.enhancedCheck.enhancedCheck-success input[type=\\\"radio\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-success input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover {\\n border: 1px solid #5cb85c;\\n}\\n.enhancedCheck.enhancedCheck-success input[type=\\\"radio\\\"]:checked:disabled + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-success input[type=\\\"checkbox\\\"]:checked:disabled + label[data-v-56a2ed7a]:before {\\n background: rgba(92, 184, 92, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-success input[type=\\\"radio\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-success input[type=\\\"checkbox\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover {\\n border: 1px solid rgba(92, 184, 92, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-warning input[type=\\\"radio\\\"]:checked + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-warning input[type=\\\"checkbox\\\"]:checked + label[data-v-56a2ed7a]:before {\\n background: #f0ad4e;\\n color: white;\\n}\\n.enhancedCheck.enhancedCheck-warning input[type=\\\"radio\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-warning input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover {\\n border: 1px solid #f0ad4e;\\n}\\n.enhancedCheck.enhancedCheck-warning input[type=\\\"radio\\\"]:checked:disabled + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-warning input[type=\\\"checkbox\\\"]:checked:disabled + label[data-v-56a2ed7a]:before {\\n background: rgba(240, 173, 78, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-warning input[type=\\\"radio\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-warning input[type=\\\"checkbox\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover {\\n border: 1px solid rgba(240, 173, 78, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-danger input[type=\\\"radio\\\"]:checked + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-danger input[type=\\\"checkbox\\\"]:checked + label[data-v-56a2ed7a]:before {\\n background: #d9534f;\\n color: white;\\n}\\n.enhancedCheck.enhancedCheck-danger input[type=\\\"radio\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-danger input[type=\\\"checkbox\\\"]:not(:checked) + label[data-v-56a2ed7a]:hover {\\n border: 1px solid #d9534f;\\n}\\n.enhancedCheck.enhancedCheck-danger input[type=\\\"radio\\\"]:checked:disabled + label[data-v-56a2ed7a]:before, .enhancedCheck.enhancedCheck-danger input[type=\\\"checkbox\\\"]:checked:disabled + label[data-v-56a2ed7a]:before {\\n background: rgba(217, 83, 79, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-danger input[type=\\\"radio\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover, .enhancedCheck.enhancedCheck-danger input[type=\\\"checkbox\\\"]:not(:checked):disabled + label[data-v-56a2ed7a]:hover {\\n border: 1px solid rgba(217, 83, 79, 0.5);\\n}\\n.enhancedCheck.enhancedCheck-animate label[data-v-56a2ed7a] {\\n transition: color 1s ease;\\n -webkit-transition: color 1s ease;\\n}\\n.enhancedCheck.enhancedCheck-animate label[data-v-56a2ed7a]:before {\\n transition: background-color 1s ease;\\n -webkit-transition: background-color 1s ease;\\n}\\n.enhancedCheck.enhancedCheck-rounded label[data-v-56a2ed7a] {\\n border-radius: 25px;\\n}\\n.enhancedCheck.enhancedCheck-rounded label[data-v-56a2ed7a]:before {\\n border-radius: 25px;\\n}\\n.enhancedToggle[data-v-56a2ed7a] {\\n position: relative;\\n overflow: hidden;\\n vertical-align: middle;\\n user-select: none;\\n cursor: pointer;\\n height: 2em;\\n border: 1px solid #51626f;\\n border-radius: 3px;\\n margin-top: 5px;\\n margin-bottom: 5px;\\n}\\n.enhancedToggle .enhancedToggle-label[data-v-56a2ed7a] {\\n background: #aaaaaa;\\n color: white;\\n}\\n.enhancedToggle.enhancedCheck-disabled .enhancedToggle-label[data-v-56a2ed7a] {\\n background: #dddddd;\\n}\\n.enhancedToggle.enhancedCheck-rounded[data-v-56a2ed7a] {\\n border-radius: 25px;\\n}\\n.enhancedToggle label[data-v-56a2ed7a] {\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n left: -100%;\\n width: 200%;\\n transition: left 0.5s;\\n -webkit-transition: left 0.5s;\\n}\\n.enhancedToggle.enhancedCheck-checked label[data-v-56a2ed7a] {\\n left: 0;\\n}\\n.enhancedToggle.enhancedCheck-disabled label[data-v-56a2ed7a] {\\n cursor: not-allowed;\\n}\\n.enhancedToggle.enhancedCheck-primary .enhancedToggle-label[data-v-56a2ed7a] {\\n background: #337ab7;\\n color: white;\\n}\\n.enhancedToggle.enhancedCheck-primary.enhancedCheck-disabled .enhancedToggle-label[data-v-56a2ed7a] {\\n background: rgba(51, 122, 183, 0.5);\\n}\\n.enhancedToggle.enhancedCheck-success .enhancedToggle-label[data-v-56a2ed7a] {\\n background: #5cb85c;\\n color: white;\\n}\\n.enhancedToggle.enhancedCheck-success.enhancedCheck-disabled .enhancedToggle-label[data-v-56a2ed7a] {\\n background: rgba(92, 184, 92, 0.5);\\n}\\n.enhancedToggle.enhancedCheck-warning .enhancedToggle-label[data-v-56a2ed7a] {\\n background: #f0ad4e;\\n color: white;\\n}\\n.enhancedToggle.enhancedCheck-warning.enhancedCheck-disabled .enhancedToggle-label[data-v-56a2ed7a] {\\n background: rgba(240, 173, 78, 0.5);\\n}\\n.enhancedToggle.enhancedCheck-danger .enhancedToggle-label[data-v-56a2ed7a] {\\n background: #d9534f;\\n color: white;\\n}\\n.enhancedToggle.enhancedCheck-danger.enhancedCheck-disabled .enhancedToggle-label[data-v-56a2ed7a] {\\n background: rgba(217, 83, 79, 0.5);\\n}\\n.enhancedToggle .enhancedToggle-label[data-v-56a2ed7a] {\\n padding: 5px 5px;\\n transition: background 0.5s;\\n -webkit-transition: background 0.5s;\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n border-radius: 3px;\\n color: inherit;\\n box-shadow: inset 0 3px 5px rgba(0, 0, 0, 0.125);\\n text-align: center;\\n}\\n.enhancedToggle .enhancedToggle-label.labelOn[data-v-56a2ed7a] {\\n left: 0;\\n padding-right: 35px;\\n}\\n.enhancedToggle .enhancedToggle-label.labelOff[data-v-56a2ed7a] {\\n right: 0;\\n padding-left: 35px;\\n}\\n.enhancedToggle .enhancedToggle-switch[data-v-56a2ed7a] {\\n position: absolute;\\n top: 0;\\n bottom: 0;\\n left: 50px;\\n border: 1px solid #51626f;\\n border-radius: 3px;\\n width: 20px;\\n z-index: 20;\\n background: white;\\n}\\n.enhancedToggle.enhancedCheck-rounded .enhancedToggle-label[data-v-56a2ed7a], .enhancedToggle.enhancedCheck-rounded .enhancedToggle-switch[data-v-56a2ed7a] {\\n border-radius: 25px;\\n}\\n.enhancedToggle[data-v-56a2ed7a] {\\n width: var(--toggleWidth);\\n}\\n.enhancedToggle .labelOn[data-v-56a2ed7a] {\\n width: var(--labelWidth);\\n}\\n.enhancedToggle .labelOff[data-v-56a2ed7a] {\\n width: var(--labelWidth);\\n}\\n.enhancedToggle .enhancedToggle-switch[data-v-56a2ed7a] {\\n width: var(--switchWidth);\\n left: var(--switchPos);\\n}\\n*[data-v-56a2ed7a] {\\n -webkit-box-sizing: content-box;\\n -moz-box-sizing: content-box;\\n box-sizing: content-box;\\n}\\nlabel[data-v-56a2ed7a] {\\n max-width: none;\\n margin-bottom: 0;\\n}\\n\", \"\"]);\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?{\"vue\":true,\"id\":\"data-v-56a2ed7a\",\"scoped\":true,\"hasInlineConfig\":false}!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache!./src/components/EnhancedToggle.vue\n// module id = 22\n// module chunks = 0\n\n//# sourceURL=webpack:///./src/components/EnhancedToggle.vue?./node_modules/css-loader!./node_modules/vue-loader/lib/style-compiler?%7B%22vue%22:true,%22id%22:%22data-v-56a2ed7a%22,%22scoped%22:true,%22hasInlineConfig%22:false%7D!./node_modules/sass-loader/lib/loader.js!./node_modules/vue-loader/lib/selector.js?type=styles&index=0&bustCache"); /***/ }), /* 23 */ /***/ (function(module, __webpack_exports__, __webpack_require__) { "use strict"; -eval("//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\nconst DEFAULT_WIDTH = 50;\nconst SWITCH_WIDTH = 30;\nconst MIN_WIDTH = 50;\nconst HORIZONTAL_PADDING = 10;\n\n/* harmony default export */ __webpack_exports__[\"a\"] = ({\n model: {\n prop: 'checked'\n },\n props: {\n id: {\n type: String,\n default: ''\n },\n checked: {\n default: false\n },\n labelOn: {\n type: String,\n default: 'On'\n },\n labelOff: {\n type: String,\n default: 'Off'\n },\n name: {\n default: ''\n },\n value: {\n default: ''\n },\n styleOn: {\n type: String,\n default: 'primary'\n },\n styleOff: {\n type: String,\n default: 'default'\n },\n disabled: {\n type: Boolean,\n default: false\n },\n rounded: {\n type: Boolean,\n default: false\n }\n },\n data() {\n return {\n style: {},\n initLabelMaxWidth: 0,\n initLabelMaxChar: 0,\n labelMaxWidth: 0,\n labelMaxChar: 0,\n inputModel: this.checked,\n generatedId: ''\n };\n },\n watch: {\n checked: function (newValue) {\n this.inputModel = newValue;\n },\n labelOn: function (newValue) {\n this.updateLabels();\n },\n labelOff: function (newValue) {\n this.updateLabels();\n }\n },\n mounted() {\n if (this.id === '') {\n this.generatedId = 'enhancedToggle_' + Math.random().toString(36).substr(2, 9);\n } else {\n this.generatedId = this.id;\n }\n this.initLabelMaxWidth = this.getLabelMaxWidth();\n this.initLabelMaxChar = this.getLabelMaxChar();\n this.labelMaxWidth = this.initLabelMaxWidth;\n this.labelMaxChar = this.initLabelMaxChar;\n this.computeStyle();\n },\n computed: {\n computedClass() {\n let computedClass = 'enhancedCheck-' + this.styleOff;\n if (this.inputModel) {\n computedClass = 'enhancedCheck-' + this.styleOn;\n computedClass += ' enhancedCheck-checked';\n }\n if (this.disabled) computedClass += ' enhancedCheck-disabled';\n if (this.rounded) computedClass += ' enhancedCheck-rounded';\n return computedClass;\n }\n },\n methods: {\n inputChange() {\n this.$emit('input', this.inputModel);\n },\n getLabelMaxWidth() {\n if (typeof this.$refs.toggleLabelOn === 'undefined') return DEFAULT_WIDTH;\n return Math.max(this.$refs.toggleLabelOn.getBoundingClientRect().width, this.$refs.toggleLabelOff.getBoundingClientRect().width) - HORIZONTAL_PADDING;\n },\n getLabelMaxChar() {\n return Math.max(this.labelOn.length, this.labelOff.length);\n },\n updateLabels() {\n const newMaxChar = this.getLabelMaxChar();\n if (newMaxChar !== this.labelMaxChar) {\n this.labelMaxWidth = this.initLabelMaxWidth / this.initLabelMaxChar * newMaxChar;\n if (this.labelMaxWidth < MIN_WIDTH) this.labelMaxWidth = MIN_WIDTH;\n this.computeStyle();\n }\n },\n computeStyle() {\n this.style = {\n '--labelWidth': this.labelMaxWidth + 'px',\n '--switchWidth': SWITCH_WIDTH + 'px',\n '--switchPos': this.labelMaxWidth + HORIZONTAL_PADDING + 'px',\n '--toggleWidth': this.labelMaxWidth + SWITCH_WIDTH / 2 + HORIZONTAL_PADDING + 'px'\n };\n }\n }\n});\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/EnhancedToggle.vue\n// module id = 23\n// module chunks = 0\n\n//# sourceURL=webpack:///./src/components/EnhancedToggle.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache"); +eval("//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n//\n\n\nconst DEFAULT_WIDTH = 50;\nconst SWITCH_WIDTH = 30;\nconst MIN_WIDTH = 50;\nconst HORIZONTAL_PADDING = 10;\n\n/* harmony default export */ __webpack_exports__[\"a\"] = ({\n model: {\n prop: 'checked'\n },\n props: {\n id: {\n type: String,\n default: ''\n },\n checked: {\n default: false\n },\n labelOn: {\n type: String,\n default: 'On'\n },\n labelOff: {\n type: String,\n default: 'Off'\n },\n name: {\n default: ''\n },\n value: {\n default: ''\n },\n styleOn: {\n type: String,\n default: 'primary'\n },\n styleOff: {\n type: String,\n default: 'default'\n },\n disabled: {\n type: Boolean,\n default: false\n },\n rounded: {\n type: Boolean,\n default: false\n }\n },\n data() {\n return {\n style: {},\n initLabelMaxWidth: 0,\n initLabelMaxChar: 0,\n labelMaxWidth: 0,\n labelMaxChar: 0,\n inputModel: this.checked,\n generatedId: ''\n };\n },\n watch: {\n checked: function (newValue) {\n this.inputModel = newValue;\n },\n labelOn: function (newValue) {\n this.updateLabels();\n },\n labelOff: function (newValue) {\n this.updateLabels();\n }\n },\n mounted() {\n if (this.id === '') {\n this.generatedId = 'enhancedToggle_' + Math.random().toString(36).substr(2, 9);\n } else {\n this.generatedId = this.id;\n }\n this.initLabelMaxWidth = this.getLabelMaxWidth();\n this.initLabelMaxChar = this.getLabelMaxChar();\n this.labelMaxWidth = this.initLabelMaxWidth;\n this.labelMaxChar = this.initLabelMaxChar;this.computeStyle();\n },\n computed: {\n computedClass() {\n let computedClass = 'enhancedCheck-' + this.styleOff;\n if (this.inputModel) {\n computedClass = 'enhancedCheck-' + this.styleOn;\n computedClass += ' enhancedCheck-checked';\n }\n if (this.disabled) computedClass += ' enhancedCheck-disabled';\n if (this.rounded) computedClass += ' enhancedCheck-rounded';\n return computedClass;\n }\n },\n methods: {\n inputChange() {\n this.$emit('input', this.inputModel);\n },\n getLabelMaxWidth() {\n if (typeof this.$refs.toggleLabelOn === 'undefined') return DEFAULT_WIDTH;\n return Math.max(this.$refs.toggleLabelOn.getBoundingClientRect().width, this.$refs.toggleLabelOff.getBoundingClientRect().width) - HORIZONTAL_PADDING;\n },\n getLabelMaxChar() {\n return Math.max(this.labelOn.length, this.labelOff.length);\n },\n updateLabels() {\n const newMaxChar = this.getLabelMaxChar();\n if (newMaxChar !== this.labelMaxChar) {\n this.labelMaxWidth = this.initLabelMaxWidth / this.initLabelMaxChar * newMaxChar;\n if (this.labelMaxWidth < MIN_WIDTH) this.labelMaxWidth = MIN_WIDTH;\n this.computeStyle();\n }\n },\n computeStyle() {\n this.style = {\n '--labelWidth': this.labelMaxWidth + 'px',\n '--switchWidth': SWITCH_WIDTH + 'px',\n '--switchPos': this.labelMaxWidth + HORIZONTAL_PADDING + 'px',\n '--toggleWidth': this.labelMaxWidth + SWITCH_WIDTH / 2 + HORIZONTAL_PADDING + 'px'\n };\n\n console.log('pouet', this.style);\n }\n }\n});\n\n//////////////////\n// WEBPACK FOOTER\n// ./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache!./src/components/EnhancedToggle.vue\n// module id = 23\n// module chunks = 0\n\n//# sourceURL=webpack:///./src/components/EnhancedToggle.vue?./node_modules/babel-loader/lib!./node_modules/vue-loader/lib/selector.js?type=script&index=0&bustCache"); /***/ }), /* 24 */ diff --git a/docs/dist/build.js b/docs/dist/build.js index 0e59df9..7edddb7 100644 --- a/docs/dist/build.js +++ b/docs/dist/build.js @@ -273,14 +273,14 @@ eval("// style-loader: Adds some css to the DOM by adding a