From 4035cd118e96a305529c4ec6f753a6fb905259ca Mon Sep 17 00:00:00 2001 From: snipe Date: Mon, 3 Apr 2023 14:35:47 -0700 Subject: [PATCH] Handle the column selector in bs table styling Signed-off-by: snipe --- public/css/build/app.css | 14 +++ public/css/build/overrides.css | 14 +++ public/css/dist/all.css | 149 +++++---------------------- public/js/build/app.js | 22 +--- public/js/dist/all.js | 22 +--- public/mix-manifest.json | 12 +-- resources/assets/less/overrides.less | 17 +++ 7 files changed, 80 insertions(+), 170 deletions(-) diff --git a/public/css/build/app.css b/public/css/build/app.css index 4998dda6b..cf687f591 100644 --- a/public/css/build/app.css +++ b/public/css/build/app.css @@ -1066,4 +1066,18 @@ input[type="radio"]::before { input[type="radio"]:checked::before { transform: scale(1); } +/** +* This addresses the column selector in bootstrap-table. Without these two lines, the +* checkbox and the with the label text that BS tables generates will +* end up on two different lines and it looks assy. + */ +.dropdown-item-marker input[type=checkbox] { + font-size: 10px; +} +.bootstrap-table .fixed-table-toolbar li.dropdown-item-marker label { + font-weight: normal; + display: grid; + grid-template-columns: 0.1em auto; + gap: 1.5em; +} diff --git a/public/css/build/overrides.css b/public/css/build/overrides.css index 6a74807f5..ff92bb506 100644 --- a/public/css/build/overrides.css +++ b/public/css/build/overrides.css @@ -699,4 +699,18 @@ input[type="radio"]::before { input[type="radio"]:checked::before { transform: scale(1); } +/** +* This addresses the column selector in bootstrap-table. Without these two lines, the +* checkbox and the with the label text that BS tables generates will +* end up on two different lines and it looks assy. + */ +.dropdown-item-marker input[type=checkbox] { + font-size: 10px; +} +.bootstrap-table .fixed-table-toolbar li.dropdown-item-marker label { + font-weight: normal; + display: grid; + grid-template-columns: 0.1em auto; + gap: 1.5em; +} diff --git a/public/css/dist/all.css b/public/css/dist/all.css index 1f596af4e..122a2d168 100644 --- a/public/css/dist/all.css +++ b/public/css/dist/all.css @@ -21545,127 +21545,6 @@ a.ui-button:active, box-shadow: 0px 0px 5px #666666; } -/* iCheck plugin Minimal skin, blue ------------------------------------ */ -.icheckbox_minimal-blue, -.iradio_minimal-blue { - display: inline-block; - *display: inline; - vertical-align: middle; - margin: 0; - padding: 0; - width: 18px; - height: 18px; - background: url(blue.png) no-repeat; - border: none; - cursor: pointer; -} - -.icheckbox_minimal-blue { - background-position: 0 0; -} - .icheckbox_minimal-blue.hover { - background-position: -20px 0; - } - .icheckbox_minimal-blue.checked { - background-position: -40px 0; - } - .icheckbox_minimal-blue.disabled { - background-position: -60px 0; - cursor: default; - } - .icheckbox_minimal-blue.checked.disabled { - background-position: -80px 0; - } - -.iradio_minimal-blue { - background-position: -100px 0; -} - .iradio_minimal-blue.hover { - background-position: -120px 0; - } - .iradio_minimal-blue.checked { - background-position: -140px 0; - } - .iradio_minimal-blue.disabled { - background-position: -160px 0; - cursor: default; - } - .iradio_minimal-blue.checked.disabled { - background-position: -180px 0; - } - -/* Retina support */ -@media only screen and (-webkit-min-device-pixel-ratio: 1.5), - only screen and (-moz-min-device-pixel-ratio: 1.5), - only screen and (-o-min-device-pixel-ratio: 3/2), - only screen and (min-device-pixel-ratio: 1.5) { - .icheckbox_minimal-blue, - .iradio_minimal-blue { - background-image: url(blue@2x.png); - -webkit-background-size: 200px 20px; - background-size: 200px 20px; - } -} -/* iCheck plugin Minimal skin, black ------------------------------------ */ -.icheckbox_minimal, -.iradio_minimal { - display: inline-block; - *display: inline; - vertical-align: middle; - margin: 0; - padding: 0; - width: 18px; - height: 18px; - background: url(minimal.png) no-repeat; - border: none; - cursor: pointer; -} - -.icheckbox_minimal { - background-position: 0 0; -} - .icheckbox_minimal.hover { - background-position: -20px 0; - } - .icheckbox_minimal.checked { - background-position: -40px 0; - } - .icheckbox_minimal.disabled { - background-position: -60px 0; - cursor: default; - } - .icheckbox_minimal.checked.disabled { - background-position: -80px 0; - } - -.iradio_minimal { - background-position: -100px 0; -} - .iradio_minimal.hover { - background-position: -120px 0; - } - .iradio_minimal.checked { - background-position: -140px 0; - } - .iradio_minimal.disabled { - background-position: -160px 0; - cursor: default; - } - .iradio_minimal.checked.disabled { - background-position: -180px 0; - } - -/* HiDPI support */ -@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) { - .icheckbox_minimal, - .iradio_minimal { - background-image: url(minimal@2x.png); - -webkit-background-size: 200px 20px; - background-size: 200px 20px; - } -} /*! * Datepicker for Bootstrap v1.9.0 (https://github.com/uxsolutions/bootstrap-datepicker) * @@ -23946,6 +23825,20 @@ input[type="radio"]::before { input[type="radio"]:checked::before { transform: scale(1); } +/** +* This addresses the column selector in bootstrap-table. Without these two lines, the +* checkbox and the with the label text that BS tables generates will +* end up on two different lines and it looks assy. + */ +.dropdown-item-marker input[type=checkbox] { + font-size: 10px; +} +.bootstrap-table .fixed-table-toolbar li.dropdown-item-marker label { + font-weight: normal; + display: grid; + grid-template-columns: 0.1em auto; + gap: 1.5em; +} .select2-container { @@ -25131,4 +25024,18 @@ input[type="radio"]::before { input[type="radio"]:checked::before { transform: scale(1); } +/** +* This addresses the column selector in bootstrap-table. Without these two lines, the +* checkbox and the with the label text that BS tables generates will +* end up on two different lines and it looks assy. + */ +.dropdown-item-marker input[type=checkbox] { + font-size: 10px; +} +.bootstrap-table .fixed-table-toolbar li.dropdown-item-marker label { + font-weight: normal; + display: grid; + grid-template-columns: 0.1em auto; + gap: 1.5em; +} diff --git a/public/js/build/app.js b/public/js/build/app.js index 3c65e5fa8..da6738491 100644 --- a/public/js/build/app.js +++ b/public/js/build/app.js @@ -1049,14 +1049,6 @@ $(document).ready(function () { } }); /* - * iCheck checkbox plugin - */ - - $('input[type="checkbox"].minimal, input[type="radio"].minimal').iCheck({ - checkboxClass: 'icheckbox_minimal-blue', - radioClass: 'iradio_minimal-blue' - }); - /* * Select2 */ @@ -1435,22 +1427,10 @@ function htmlEntities(str) { * * How to use: * - * 1. Set the class of your select2 elements to 'livewire-select2' and your icheck elements to 'livewire-icheck' (as appropriate). - * (For iCheck, you may still need to apply the other iCheck classes like 'minimal' or 'iCheck') + * 1. Set the class of your select2 elements to 'livewire-select2'). * 2. Name your element to match a property in your Livewire component * 3. Add an attribute called 'data-livewire-component' that points to $_instance->id (via `{{ }}` if you're in a blade, * or just $_instance->id if not). - * 4. For iCheck, you need to wrap the 'checkbox' element with wire:ignore - perhaps in the