added support for bootstrap 5

atatanasov · Nov 2, 2022 · f0dfbe5 · f0dfbe5
1 parent 1968d51
commit f0dfbe5
Show file tree

Hide file tree

Showing 102 changed files with 1,843 additions and 162 deletions.
diff --git a/Gruntfile.js b/Gruntfile.js
@@ -398,7 +398,10 @@ var writer = {
                         }
                         break;
                     case 'bootstrap4':
-                        result += '  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">\r\n';
+                            result += '  <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">\r\n';
+                            break;
+                    case 'bootstrap5':
+                        result += '  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" integrity="sha384-Zenh87qX5JnK2Jl0vWa8Ck2rdkQ2Bzep5IDxbcnCeuOxjzrPF/et3URy9Bv1WTRi" crossorigin="anonymous">\r\n';
                         break;
                     case 'fontawesome':
                         result += '  <link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">\r\n';

diff --git a/dist/combined/css/gijgo.css b/dist/combined/css/gijgo.css
@@ -672,6 +672,19 @@ ul.gj-list-md li.disabled>[data-role="wrapper"]>[data-role="display"] {
     line-height: 1.5;
 }
 
+/** Bootstrap 5 **/
+.gj-dialog-bootstrap5 {
+    overflow: hidden;
+    z-index: 1202;
+}
+
+.gj-dialog-bootstrap5 [data-role="title"] {
+    display: inline;
+}
+.gj-dialog-bootstrap5 [data-role="close"] {
+    line-height: 1.5;
+}
+
 /** Material Design **/
 .gj-dialog-md {
     background-color: #FFF;
@@ -1426,6 +1439,19 @@ ul.gj-list li [data-role="expander"] {
     width: 100%;
 }
 
+.gj-tree-bootstrap-5 ul.gj-list-bootstrap li.active {
+    color: #fff;
+    background-color: rgb(13, 110, 253);
+}
+
+.gj-tree-bootstrap-5 ul.gj-list-bootstrap li.disabled {
+    color: #868e96;
+}
+
+.gj-tree-bootstrap-5 ul.gj-list-bootstrap li ul.gj-list-bootstrap {
+    width: 100%;
+}
+
 .gj-tree-bootstrap-border ul.gj-list-bootstrap li {
     border: 1px solid #ddd;
 }
@@ -1608,6 +1634,20 @@ ul.gj-list-md li.disabled > [data-role="wrapper"] > [data-role="expander"] {
     font-size: 16px;
 }
 
+/* Bootstrap 5 */
+.gj-checkbox-bootstrap.gj-checkbox-bootstrap-5 span {
+    line-height: 16px;
+    padding: 0px;
+}
+
+.gj-checkbox-bootstrap-5.gj-checkbox-material-icons input[type="checkbox"]:checked + span:after {
+    font-size: 16px;
+}
+
+.gj-checkbox-bootstrap-5.gj-checkbox-material-icons input[type="checkbox"]:indeterminate + span:after {
+    font-size: 16px;
+}
+
 /* Material Design */
 .gj-checkbox-md {
     min-width: 0;
@@ -2184,6 +2224,14 @@ ul.gj-list-md li.disabled > [data-role="wrapper"] > [data-role="expander"] {
     color: #777;
 }
 
+.gj-picker-bootstrap.datepicker [role="footer"] {
+    padding: 1rem;
+}
+
+.gj-picker-bootstrap.datepicker [role="footer"]> :not(:last-child) {
+    margin-right: .25rem;
+}
+
 /* Bootstrap 3 */
 .gj-datepicker-bootstrap span[role="right-icon"].input-group-addon {
     border-top-left-radius: 0px;
@@ -2243,6 +2291,41 @@ ul.gj-list-md li.disabled > [data-role="wrapper"] > [data-role="expander"] {
     top: 10px;
     left: 10px;
 }
+
+/* Bootstrap 5 */
+.gj-datepicker-bootstrap button[role="right-icon"]  {
+    width: 2.5rem;
+}
+
+.gj-datepicker-bootstrap.input-group-sm button[role="right-icon"] {
+    width: 2rem;
+}
+
+.gj-datepicker-bootstrap.input-group-lg button[role="right-icon"] {
+    width: 3.3rem;
+}
+
+.gj-datepicker-bootstrap button[role="right-icon"] .gj-icon,
+.gj-datepicker-bootstrap button[role="right-icon"] .material-icons {
+    position: absolute;
+    font-size: 21px;
+    top: 0.55rem;
+    left: 0.55rem;
+}
+
+.gj-datepicker-bootstrap.input-group-sm button[role="right-icon"] .gj-icon,
+.gj-datepicker-bootstrap.input-group-sm button[role="right-icon"] .material-icons {
+    font-size: 19px;
+    top: 0.4rem;
+    left: 0.34rem;
+}
+
+.gj-datepicker-bootstrap.input-group-lg button[role="right-icon"] .gj-icon,
+.gj-datepicker-bootstrap.input-group-lg button[role="right-icon"] .material-icons {
+    font-size: 27px;
+    top: 0.72rem;
+    left: 0.7rem;
+}
 .gj-timepicker [role="input"]::-ms-clear {
     display: none;
 }
@@ -2412,6 +2495,15 @@ ul.gj-list-md li.disabled > [data-role="wrapper"] > [data-role="expander"] {
     border: 16px solid #888;
 }
 
+.gj-picker-bootstrap.timepicker [role="footer"] {
+    padding: 1rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.gj-picker-bootstrap.timepicker [role="footer"]> :not(:last-child) {
+    margin-right: .25rem;
+}
+
 /* Bootstrap 3 */
 .gj-timepicker-bootstrap .input-group-addon {
     border-top-left-radius: 0px;
@@ -2489,6 +2581,41 @@ ul.gj-list-md li.disabled > [data-role="wrapper"] > [data-role="expander"] {
     top: 10px;
     left: 10px;
 }
+
+/* Bootstrap 5 */
+.gj-timepicker-bootstrap button[role="right-icon"]  {
+    width: 2.5rem;
+}
+
+.gj-timepicker-bootstrap.input-group-sm button[role="right-icon"] {
+    width: 2rem;
+}
+
+.gj-timepicker-bootstrap.input-group-lg button[role="right-icon"] {
+    width: 3.3rem;
+}
+
+.gj-timepicker-bootstrap button[role="right-icon"] .gj-icon,
+.gj-timepicker-bootstrap button[role="right-icon"] .material-icons {
+    position: absolute;
+    font-size: 21px;
+    top: 0.55rem;
+    left: 0.55rem;
+}
+
+.gj-timepicker-bootstrap.input-group-sm button[role="right-icon"] .gj-icon,
+.gj-timepicker-bootstrap.input-group-sm button[role="right-icon"] .material-icons {
+    font-size: 19px;
+    top: 0.4rem;
+    left: 0.34rem;
+}
+
+.gj-timepicker-bootstrap.input-group-lg button[role="right-icon"] .gj-icon,
+.gj-timepicker-bootstrap.input-group-lg button[role="right-icon"] .material-icons {
+    font-size: 27px;
+    top: 0.72rem;
+    left: 0.7rem;
+}
 .gj-picker.datetimepicker [role="header"] [role="date"] {
     padding-bottom: 5px;
     text-align: center;
@@ -2553,6 +2680,15 @@ ul.gj-list-md li.disabled > [data-role="wrapper"] > [data-role="expander"] {
     font-size: 22px;
 }
 
+.gj-picker-bootstrap.datetimepicker [role="footer"] {
+    padding: 1rem;
+    border-top: 1px solid #e9ecef;
+}
+
+.gj-picker-bootstrap.datetimepicker [role="footer"]> :not(:last-child) {
+    margin-right: .25rem;
+}
+
 .gj-slider {
     position: relative;
     padding: 8px 6px;

diff --git a/dist/combined/css/gijgo.min.css b/dist/combined/css/gijgo.min.css