From e066f033c8c5dbfac74780a8b640641e4588f78f Mon Sep 17 00:00:00 2001 From: snipe Date: Mon, 3 Apr 2023 10:54:01 -0700 Subject: [PATCH 01/42] First attempt at moving us away from iCheck Signed-off-by: snipe --- public/css/build/app.css | 99 +++++++++++- public/css/build/overrides.css | 99 +++++++++++- public/css/dist/all.css | 198 +++++++++++++++++++++++- resources/assets/less/overrides.less | 120 +++++++++++++- resources/views/hardware/bulk.blade.php | 54 +++---- 5 files changed, 528 insertions(+), 42 deletions(-) diff --git a/public/css/build/app.css b/public/css/build/app.css index b67a5f6a1c..4998dda6bc 100644 --- a/public/css/build/app.css +++ b/public/css/build/app.css @@ -950,9 +950,6 @@ th.css-accessory > .th-inner::before { .select2-container--default .select2-selection--multiple { border-radius: 0px; } -.bs-checkbox input { - zoom: 1.5; -} @media screen and (max-width: 511px) { .sidebar-menu { margin-top: 160px; @@ -973,4 +970,100 @@ th.css-accessory > .th-inner::before { white-space: nowrap; text-overflow: ellipsis; } +/** form-stuff overrides for checkboxes and stuff **/ +.form-control--disabled { + color: #959495; + pointer-events: none; + cursor: not-allowed; +} +label.form-control { + font-weight: bold; + display: grid; + grid-template-columns: 1.8em auto; + gap: 0.5em; + border: 0px; + padding-left: 0px; +} +/** Checkbox style to replace iCheck **/ +input[type="checkbox"] { + /* Add if not using autoprefixer */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + /* For iOS < 15 to remove gradient background */ + background-color: #fff; + /* Not removed via appearance */ + margin: 0; + font: inherit; + color: #959495; + width: 1.8em; + height: 1.8em; + border: 0.05em solid; + border-radius: 0em; + transform: translateY(-0.075em); + display: grid; + place-content: center; + /*Windows High Contrast Mode*/ +} +input[type="checkbox"]::before { + /** If you want to use the non-checkbox, filled square, use this instead **/ + content: ""; + width: 1em; + height: 1em; + -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + transform: scale(0); + transform-origin: bottom left; + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em #428bca; + /* Windows High Contrast Mode */ + background-color: CanvasText; +} +input[type="checkbox"]:checked::before { + transform: scale(1); +} +input[type=checkbox]:disabled::before, +input[type=radio]:disabled::before { + content: ""; + width: 1em; + height: 1em; + transform: scale(1); + box-shadow: inset 1em 1em #959495; +} +input[type=checkbox]:disabled, +input[type=radio]:disabled { + --form-control-color: #959495; + color: #959495; + cursor: not-allowed; + pointer-events: none; +} +/** Radio style to replace iCheck **/ +input[type="radio"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #fff; + margin: 0; + font: inherit; + color: #959495; + width: 1.8em; + height: 1.8em; + border: 0.05em solid; + border-radius: 50%; + transform: translateY(-0.075em); + display: grid; + place-content: center; +} +input[type="radio"]::before { + content: ""; + width: 1em; + height: 1em; + border-radius: 50%; + transform: scale(0); + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em #428bca; +} +input[type="radio"]:checked::before { + transform: scale(1); +} diff --git a/public/css/build/overrides.css b/public/css/build/overrides.css index 7d0450d520..6a74807f5d 100644 --- a/public/css/build/overrides.css +++ b/public/css/build/overrides.css @@ -583,9 +583,6 @@ th.css-accessory > .th-inner::before { .select2-container--default .select2-selection--multiple { border-radius: 0px; } -.bs-checkbox input { - zoom: 1.5; -} @media screen and (max-width: 511px) { .sidebar-menu { margin-top: 160px; @@ -606,4 +603,100 @@ th.css-accessory > .th-inner::before { white-space: nowrap; text-overflow: ellipsis; } +/** form-stuff overrides for checkboxes and stuff **/ +.form-control--disabled { + color: #959495; + pointer-events: none; + cursor: not-allowed; +} +label.form-control { + font-weight: bold; + display: grid; + grid-template-columns: 1.8em auto; + gap: 0.5em; + border: 0px; + padding-left: 0px; +} +/** Checkbox style to replace iCheck **/ +input[type="checkbox"] { + /* Add if not using autoprefixer */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + /* For iOS < 15 to remove gradient background */ + background-color: #fff; + /* Not removed via appearance */ + margin: 0; + font: inherit; + color: #959495; + width: 1.8em; + height: 1.8em; + border: 0.05em solid; + border-radius: 0em; + transform: translateY(-0.075em); + display: grid; + place-content: center; + /*Windows High Contrast Mode*/ +} +input[type="checkbox"]::before { + /** If you want to use the non-checkbox, filled square, use this instead **/ + content: ""; + width: 1em; + height: 1em; + -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + transform: scale(0); + transform-origin: bottom left; + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em #428bca; + /* Windows High Contrast Mode */ + background-color: CanvasText; +} +input[type="checkbox"]:checked::before { + transform: scale(1); +} +input[type=checkbox]:disabled::before, +input[type=radio]:disabled::before { + content: ""; + width: 1em; + height: 1em; + transform: scale(1); + box-shadow: inset 1em 1em #959495; +} +input[type=checkbox]:disabled, +input[type=radio]:disabled { + --form-control-color: #959495; + color: #959495; + cursor: not-allowed; + pointer-events: none; +} +/** Radio style to replace iCheck **/ +input[type="radio"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #fff; + margin: 0; + font: inherit; + color: #959495; + width: 1.8em; + height: 1.8em; + border: 0.05em solid; + border-radius: 50%; + transform: translateY(-0.075em); + display: grid; + place-content: center; +} +input[type="radio"]::before { + content: ""; + width: 1em; + height: 1em; + border-radius: 50%; + transform: scale(0); + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em #428bca; +} +input[type="radio"]:checked::before { + transform: scale(1); +} diff --git a/public/css/dist/all.css b/public/css/dist/all.css index f1f0b46d30..1f596af4e3 100644 --- a/public/css/dist/all.css +++ b/public/css/dist/all.css @@ -23830,9 +23830,6 @@ th.css-accessory > .th-inner::before { .select2-container--default .select2-selection--multiple { border-radius: 0px; } -.bs-checkbox input { - zoom: 1.5; -} @media screen and (max-width: 511px) { .sidebar-menu { margin-top: 160px; @@ -23853,6 +23850,102 @@ th.css-accessory > .th-inner::before { white-space: nowrap; text-overflow: ellipsis; } +/** form-stuff overrides for checkboxes and stuff **/ +.form-control--disabled { + color: #959495; + pointer-events: none; + cursor: not-allowed; +} +label.form-control { + font-weight: bold; + display: grid; + grid-template-columns: 1.8em auto; + gap: 0.5em; + border: 0px; + padding-left: 0px; +} +/** Checkbox style to replace iCheck **/ +input[type="checkbox"] { + /* Add if not using autoprefixer */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + /* For iOS < 15 to remove gradient background */ + background-color: #fff; + /* Not removed via appearance */ + margin: 0; + font: inherit; + color: #959495; + width: 1.8em; + height: 1.8em; + border: 0.05em solid; + border-radius: 0em; + transform: translateY(-0.075em); + display: grid; + place-content: center; + /*Windows High Contrast Mode*/ +} +input[type="checkbox"]::before { + /** If you want to use the non-checkbox, filled square, use this instead **/ + content: ""; + width: 1em; + height: 1em; + -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + transform: scale(0); + transform-origin: bottom left; + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em #428bca; + /* Windows High Contrast Mode */ + background-color: CanvasText; +} +input[type="checkbox"]:checked::before { + transform: scale(1); +} +input[type=checkbox]:disabled::before, +input[type=radio]:disabled::before { + content: ""; + width: 1em; + height: 1em; + transform: scale(1); + box-shadow: inset 1em 1em #959495; +} +input[type=checkbox]:disabled, +input[type=radio]:disabled { + --form-control-color: #959495; + color: #959495; + cursor: not-allowed; + pointer-events: none; +} +/** Radio style to replace iCheck **/ +input[type="radio"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #fff; + margin: 0; + font: inherit; + color: #959495; + width: 1.8em; + height: 1.8em; + border: 0.05em solid; + border-radius: 50%; + transform: translateY(-0.075em); + display: grid; + place-content: center; +} +input[type="radio"]::before { + content: ""; + width: 1em; + height: 1em; + border-radius: 50%; + transform: scale(0); + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em #428bca; +} +input[type="radio"]:checked::before { + transform: scale(1); +} .select2-container { @@ -24922,9 +25015,6 @@ th.css-accessory > .th-inner::before { .select2-container--default .select2-selection--multiple { border-radius: 0px; } -.bs-checkbox input { - zoom: 1.5; -} @media screen and (max-width: 511px) { .sidebar-menu { margin-top: 160px; @@ -24945,4 +25035,100 @@ th.css-accessory > .th-inner::before { white-space: nowrap; text-overflow: ellipsis; } +/** form-stuff overrides for checkboxes and stuff **/ +.form-control--disabled { + color: #959495; + pointer-events: none; + cursor: not-allowed; +} +label.form-control { + font-weight: bold; + display: grid; + grid-template-columns: 1.8em auto; + gap: 0.5em; + border: 0px; + padding-left: 0px; +} +/** Checkbox style to replace iCheck **/ +input[type="checkbox"] { + /* Add if not using autoprefixer */ + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + /* For iOS < 15 to remove gradient background */ + background-color: #fff; + /* Not removed via appearance */ + margin: 0; + font: inherit; + color: #959495; + width: 1.8em; + height: 1.8em; + border: 0.05em solid; + border-radius: 0em; + transform: translateY(-0.075em); + display: grid; + place-content: center; + /*Windows High Contrast Mode*/ +} +input[type="checkbox"]::before { + /** If you want to use the non-checkbox, filled square, use this instead **/ + content: ""; + width: 1em; + height: 1em; + -webkit-clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + transform: scale(0); + transform-origin: bottom left; + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em #428bca; + /* Windows High Contrast Mode */ + background-color: CanvasText; +} +input[type="checkbox"]:checked::before { + transform: scale(1); +} +input[type=checkbox]:disabled::before, +input[type=radio]:disabled::before { + content: ""; + width: 1em; + height: 1em; + transform: scale(1); + box-shadow: inset 1em 1em #959495; +} +input[type=checkbox]:disabled, +input[type=radio]:disabled { + --form-control-color: #959495; + color: #959495; + cursor: not-allowed; + pointer-events: none; +} +/** Radio style to replace iCheck **/ +input[type="radio"] { + -webkit-appearance: none; + -moz-appearance: none; + appearance: none; + background-color: #fff; + margin: 0; + font: inherit; + color: #959495; + width: 1.8em; + height: 1.8em; + border: 0.05em solid; + border-radius: 50%; + transform: translateY(-0.075em); + display: grid; + place-content: center; +} +input[type="radio"]::before { + content: ""; + width: 1em; + height: 1em; + border-radius: 50%; + transform: scale(0); + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em #428bca; +} +input[type="radio"]:checked::before { + transform: scale(1); +} diff --git a/resources/assets/less/overrides.less b/resources/assets/less/overrides.less index eb90f1b850..516bf4f3c3 100644 --- a/resources/assets/less/overrides.less +++ b/resources/assets/less/overrides.less @@ -666,9 +666,6 @@ th.css-accessory > .th-inner::before border-radius: 0px; } -.bs-checkbox input { - zoom: 1.5; -} @media screen and (max-width: 511px){ .sidebar-menu{ margin-top:160px; @@ -690,4 +687,119 @@ th.css-accessory > .th-inner::before overflow: hidden; white-space: nowrap; text-overflow: ellipsis; -} \ No newline at end of file +} + + +/** form-stuff overrides for checkboxes and stuff **/ + +.form-control--disabled { + color: #959495; + pointer-events:none; + cursor: not-allowed; + +} + +label.form-control { + font-weight: bold; + display: grid; + grid-template-columns: 1.8em auto; + gap: 0.5em; + border: 0px; + padding-left: 0px; +} + +/** Checkbox style to replace iCheck **/ +input[type="checkbox"] { + /* Add if not using autoprefixer */ + -webkit-appearance: none; + appearance: none; + /* For iOS < 15 to remove gradient background */ + background-color: #fff; + /* Not removed via appearance */ + margin: 0; + font: inherit; + color: #959495; + width: 1.8em; + height: 1.8em; + border: 0.05em solid; + border-radius: 0em; + transform: translateY(-0.075em); + display: grid; + place-content: center; + /*Windows High Contrast Mode*/ +} + + +input[type="checkbox"]::before { + +/** If you want to use the non-checkbox, filled square, use this instead **/ +// content: ""; +// width: 1em; +// height: 1em; +// transform: scale(0); +// transition: 120ms transform ease-in-out; +// box-shadow: inset 1em 1em #428bca; + + content: ""; + width: 1em; + height: 1em; + clip-path: polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0%, 43% 62%); + transform: scale(0); + transform-origin: bottom left; + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em #428bca; + /* Windows High Contrast Mode */ + background-color: CanvasText; +} + +input[type="checkbox"]:checked::before { + transform: scale(1); +} + +input[type=checkbox]:disabled::before, input[type=radio]:disabled::before { + content: ""; + width: 1em; + height: 1em; + transform: scale(1); + box-shadow: inset 1em 1em #959495; +} + + +input[type=checkbox]:disabled, input[type=radio]:disabled { + --form-control-color: #959495; + color: #959495; + cursor: not-allowed; + pointer-events:none; +} + + +/** Radio style to replace iCheck **/ + +input[type="radio"] { + appearance: none; + background-color: #fff; + margin: 0; + font: inherit; + color: #959495; + width: 1.8em; + height: 1.8em; + border: 0.05em solid; + border-radius: 50%; + transform: translateY(-0.075em); + display: grid; + place-content: center; +} + +input[type="radio"]::before { + content: ""; + width: 1em; + height: 1em; + border-radius: 50%; + transform: scale(0); + transition: 120ms transform ease-in-out; + box-shadow: inset 1em 1em #428bca; +} + +input[type="radio"]:checked::before { + transform: scale(1); +} diff --git a/resources/views/hardware/bulk.blade.php b/resources/views/hardware/bulk.blade.php index 1cacc4086f..2f9ce043e5 100755 --- a/resources/views/hardware/bulk.blade.php +++ b/resources/views/hardware/bulk.blade.php @@ -31,16 +31,16 @@
-
+
{!! $errors->first('purchase_date', ' :message') !!}
-
-