@quandis/qbo4.ui 4.0.1-CI-20241113-192850 → 4.0.1-CI-20241113-205011

package/wwwroot/css/qboui.css

@@ -21041,14 +21041,15 @@ qbo-icon.carousel-item-start[selected] {
   --qbo-border-color: #999;
   --qbo-border-radius: 4px;
   --qbo-background-color: #ffffff;
-  --qbo-padding-horizontal: 0rem;
-  --qbo-padding-vertical: 0rem;
+  --qbo-padding-horizontal: 0.75rem;
+  --qbo-padding-vertical: 0.375rem;
   --qbo-padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
   --qbo-margin: 0.5rem;
   --qbo-margin-horizontal: 0.5rem;
   --qbo-margin-vertical: 0.5rem;
   --qbo-focus-border-color: #80bdff;
   --qbo-focus-box-shadow: rgba(0, 123, 255, 0.25);
+  --qbo-line-height: var(--qbo-line-height);
   --qbo-button-bg: #007bff;
   --qbo-button-border: #007bff;
   --qbo-button-bg-hover: #0056b3;
@@ -21127,42 +21128,6 @@ qbo-icon.carousel-item-start[selected] {
   gap: var(--qbo-margin);
 }
 
-/* Default column styling */
-.qbo-card {
-  border: 1px solid var(--qbo-border-color);
-  border-radius: var(--qbo-border-radius);
-  box-shadow: 2px 2px 3px var(--qbo-border-color);
-  padding: 0.5em;
-  overflow: auto;
-}
-
-.qbo-card-bottom {
-  margin-bottom: 0.5em;
-}
-
-.qbo-card-left {
-  margin-left: 0.5em;
-}
-
-.qbo-card-right {
-  margin-right: 0.5em;
-}
-
-.qbo-card-top {
-  margin-top: 0.5em;
-}
-
-svg {
-  height: 1rem;
-  width: 1rem;
-}
-
-.qbo-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--qbo-margin);
-}
-
 /* Default column styling */
 .qbo-col, .qbo-card {
   flex: 1 0 0;
@@ -21170,12 +21135,6 @@ svg {
   box-sizing: border-box;
 }
 
-.qbo-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--qbo-margin); /* Use --qbo-margin as the gap */
-}
-
 .qbo-col-1 {
   flex: 0 0 calc(8.33% - var(--qbo-margin) / 2);
   max-width: calc(8.33% - var(--qbo-margin) / 2);
@@ -21236,10 +21195,32 @@ svg {
   max-width: calc(100% - var(--qbo-margin) / 2);
 }
 
+/* Default column styling */
+.qbo-card {
+  border: 1px solid var(--qbo-border-color);
+  border-radius: var(--qbo-border-radius);
+  box-shadow: 2px 2px 3px var(--qbo-border-color);
+  padding: 0.5em;
+  overflow: auto;
+}
+
+.qbo-card-left {
+  margin-left: 0.5em;
+}
+
+.qbo-card-right {
+  margin-right: 0.5em;
+}
+
+svg {
+  height: 1rem;
+  width: 1rem;
+}
+
 /* Form */
 .qbo-form {
   margin: 0 auto;
-  padding: var(--qbo-padding);
+  padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
 }
 
 .qbo-form label {
@@ -21264,7 +21245,7 @@ svg {
 .qbo-form textarea {
   width: 100%;
   box-sizing: border-box;
-  padding: var(--qbo-padding);
+  padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
   font-size: 1rem;
   line-height: 1;
   color: var(--qbo-color);
@@ -21360,9 +21341,9 @@ button,
   background-color: var(--qbo-background-color);
   border: 1px solid var(--qbo-border-color);
   border-radius: var(--qbo-border-radius);
-  padding: var(--qbo-padding);
+  padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
   font-size: 1rem;
-  line-height: 1.5;
+  line-height: var(--qbo-line-height);
   text-align: center;
   vertical-align: middle;
   cursor: pointer;
@@ -21378,7 +21359,7 @@ button:focus,
 .qbo-button:focus {
   background-color: var(--qbo-border-color);
   text-decoration: none;
-  line-height: 1.5;
+  line-height: var(--qbo-line-height);
   border-radius: var(--qbo-border-radius);
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
@@ -21434,87 +21415,6 @@ button:disabled,
   background-position: left center;
 }
 
-/* Grid */
-.qbo-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--qbo-margin);
-}
-
-/* Default column styling */
-.qbo-col, .qbo-card {
-  flex: 1 0 0;
-  min-width: calc(8.33% - var(--qbo-margin) / 2);
-  max-width: 100%;
-  box-sizing: border-box;
-}
-
-.qbo-row {
-  display: flex;
-  flex-wrap: wrap;
-  gap: var(--qbo-margin); /* Use --qbo-margin as the gap */
-}
-
-.qbo-col-1 {
-  flex: 0 0 calc(8.33% - var(--qbo-margin) / 2);
-  max-width: calc(8.33% - var(--qbo-margin) / 2);
-}
-
-.qbo-col-2 {
-  flex: 0 0 calc(16.66% - var(--qbo-margin) / 2);
-  max-width: calc(16.66% - var(--qbo-margin) / 2);
-}
-
-.qbo-col-3 {
-  flex: 0 0 calc(25% - var(--qbo-margin) / 2);
-  max-width: calc(25% - var(--qbo-margin) / 2);
-}
-
-.qbo-col-4 {
-  flex: 0 0 calc(33.33% - var(--qbo-margin) / 2);
-  max-width: calc(33.33% - var(--qbo-margin) / 2);
-}
-
-.qbo-col-5 {
-  flex: 0 0 calc(41.66% - var(--qbo-margin) / 2);
-  max-width: calc(41.66% - var(--qbo-margin) / 2);
-}
-
-.qbo-col-6 {
-  flex: 0 0 calc(50% - var(--qbo-margin) / 2);
-  max-width: calc(50% - var(--qbo-margin) / 2);
-}
-
-.qbo-col-7 {
-  flex: 0 0 calc(58.33% - var(--qbo-margin) / 2);
-  max-width: calc(58.33% - var(--qbo-margin) / 2);
-}
-
-.qbo-col-8 {
-  flex: 0 0 calc(66.66% - var(--qbo-margin) / 2);
-  max-width: calc(66.66% - var(--qbo-margin) / 2);
-}
-
-.qbo-col-9 {
-  flex: 0 0 calc(75% - var(--qbo-margin) / 2);
-  max-width: calc(75% - var(--qbo-margin) / 2);
-}
-
-.qbo-col-10 {
-  flex: 0 0 calc(83.33% - var(--qbo-margin) / 2);
-  max-width: calc(83.33% - var(--qbo-margin) / 2);
-}
-
-.qbo-col-11 {
-  flex: 0 0 calc(91.66% - var(--qbo-margin) / 2);
-  max-width: calc(91.66% - var(--qbo-margin) / 2);
-}
-
-.qbo-col-12 {
-  flex: 0 0 calc(100% - var(--qbo-margin) / 2);
-  max-width: calc(100% - var(--qbo-margin) / 2);
-}
-
 /* Menu */
 nav {
   --qbo-background-color: var(--qbo-nav-background-color, black);
@@ -21535,7 +21435,7 @@ nav menu li {
   border: 1px solid var(--qbo-nav-background-color, black);
   cursor: pointer;
   display: inline-block;
-  line-height: 1.5;
+  line-height: var(--qbo-line-height);
   padding: 5px;
 }
 nav menu li svg {
@@ -21578,32 +21478,32 @@ menu.qbo-toolbar {
   flex-direction: row;
   margin-right: var(--qbo-margin);
 }
-menu.qbo-toolbar li {
+menu.qbo-toolbar > li {
   display: inline-block;
   margin-right: 0;
   color: var(--qbo-color);
   background-color: var(--qbo-background-color);
   border: 1px solid var(--qbo-border-color);
-  padding: var(--qbo-padding);
-  line-height: 1.5;
+  padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
+  line-height: var(--qbo-line-height);
   cursor: pointer;
   border-radius: 0;
   transition: color 0.15s ease-in-out, background-color 0.15s ease-in-out, border-color 0.15s ease-in-out, box-shadow 0.15s ease-in-out;
   text-decoration: none;
 }
-menu.qbo-toolbar li:first-child {
+menu.qbo-toolbar > li:first-child {
   border-top-left-radius: var(--qbo-border-radius);
   border-bottom-left-radius: var(--qbo-border-radius);
 }
-menu.qbo-toolbar li:last-child {
+menu.qbo-toolbar > li:last-child {
   border-top-right-radius: var(--qbo-border-radius);
   border-bottom-right-radius: var(--qbo-border-radius);
 }
-menu.qbo-toolbar li:hover,
-menu.qbo-toolbar li:focus {
+menu.qbo-toolbar > li:hover,
+menu.qbo-toolbar > li:focus {
   background-color: var(--qbo-border-color);
   text-decoration: none;
-  line-height: 1.5;
+  line-height: var(--qbo-line-height);
   transition: background-color 0.15s ease-in-out, border-color 0.15s ease-in-out;
 }
 
@@ -21638,7 +21538,7 @@ qbo-menu menu {
   border: 1px solid var(--qbo-border-color);
   border-radius: var(--qbo-border-radius);
   box-sizing: border-box;
-  height: 0;
+  height: auto;
   list-style-type: none;
   margin: 0;
   padding-left: 0;
@@ -21648,6 +21548,17 @@ qbo-menu menu {
 
 qbo-menu aside.open,
 qbo-menu menu.open {
+  visibility: visible;
+}
+
+qbo-menu aside {
+  width: 0;
+  margin: var(--qbo-margin);
+  padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
+  padding-bottom: 0.6em;
+  overflow-y: scroll;
+  top: 53px !important;
+  width: 100%;
   background-color: #f0f0f0;
   border: 0;
   border-radius: 0;
@@ -21658,38 +21569,24 @@ qbo-menu menu.open {
   left: 0px;
   margin: 0;
   overflow-y: auto;
-  top: 53px !important;
-  visibility: visible;
-  width: 100%;
 }
 
-qbo-menu aside.open > h1,
-qbo-menu aside.open > .h1,
-qbo-menu menu.open > h1,
-qbo-menu menu.open > .h1 {
+qbo-menu aside > h1,
+qbo-menu aside > .h1 {
   color: var(--qbo-color);
   margin-block-end: 0;
   margin-left: 1em;
 }
 
-qbo-menu aside.open > p,
-qbo-menu menu.open > p {
+qbo-menu aside > p {
   color: var(--qbo-color);
   margin-block-start: 0;
   margin-left: 1.2em;
 }
-
-qbo-menu aside {
-  width: 0;
-  margin: var(--qbo-margin);
-  padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
-  padding-bottom: 0.6em;
-  overflow-y: scroll;
-}
 qbo-menu li {
   display: list-item !important;
-  padding: var(--qbo-padding, 0.5rem 1rem);
-  line-height: 1.5;
+  padding: var(--qbo-padding-vertical) var(--qbo-padding-horizontal);
+  line-height: var(--qbo-line-height);
   text-align: left;
   white-space: nowrap;
   cursor: pointer;