@yesilyazilim/web.spa 1.0.86 → 1.0.88

package/index.css

@@ -3209,6 +3209,8 @@ a, area, button, input, label, select, summary, textarea, [tabindex] {
   --main-backgroundcolor: var(--white);
   --background-hover: color-mix(in srgb, var(--main-color) 10%, transparent);
   --menu-border-color: #e2e6e9;
+  --form-element-background-color: var(--white);
+  --form-element-active-background-color: var(--white);
   --drop-shadow-color: #00000040;
   --drop-shadow: 0px 10px 30px 0px var(--drop-shadow-color);
   --drop-shadow-r: 0px -10px 30px 0px var(--drop-shadow-color);
@@ -4894,6 +4896,7 @@ app-ribbon > app-tab-container > .appTabContainerBody > app-tab > .componentWrap
 }
 
 app-radio-button {
+  background: var(--background-color);
   flex-direction: row;
   width: 100%;
   display: flex;
@@ -4910,6 +4913,10 @@ app-radio-button > button > i {
   font-size: 1.2rem;
 }
 
+app-radio-button > button:hover > i {
+  opacity: .7;
+}
+
 app-radio-button > button[checked] > i {
   color: var(--primary) !important;
 }
@@ -5760,6 +5767,7 @@ app-card .card-content {
 app-check-list {
   border: 1px solid var(--form-element-border-color);
   border-radius: var(--border-radius);
+  background: var(--background-color);
   grid-template-rows: 1fr;
   display: grid;
 }
@@ -5824,63 +5832,193 @@ app-grp-list > .itemContainer > app-groupbox > .groupbox-body > .filtered {
 }
 
 app-groupbox {
-  border: 1px solid var(--border-color);
-  border-radius: var(--border-radius);
-  background: var(--background-color);
-  flex-direction: column;
-  display: flex;
-  position: relative;
+  grid-template-rows: auto 1fr;
+  grid-template-areas: "header"
+                       "body";
+  width: 100%;
+  display: grid;
 }
 
-app-groupbox .groupbox-caption {
-  border-bottom: 1px solid var(--border-color);
-  text-align: center;
-  padding: var(--spacing);
+app-groupbox > .groupbox-header {
   background: var(--primary-gray-ghost);
+  border-top: 1px solid var(--border-color);
+  border-left: 1px solid var(--border-color);
+  border-right: 1px solid var(--border-color);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+  grid-area: header;
+  grid-template-columns: 1fr auto;
+  grid-template-areas: "caption toolbar";
+  display: grid;
+}
+
+app-groupbox > .groupbox-header > .groupbox-caption {
+  text-align: center;
   user-select: none;
+  width: 100%;
+  padding: var(--spacing-half);
+  grid-area: caption;
+  align-self: center;
+  margin: 0;
+}
+
+app-groupbox > .groupbox-header > app-toolbar {
+  grid-area: toolbar;
+  padding: 0;
 }
 
-app-groupbox .groupbox-body {
+app-groupbox > .groupbox-header > app-toolbar > button {
+  border: none !important;
+}
+
+app-groupbox > .groupbox-header > app-toolbar > button:hover {
+  background-color: var(--primary-gray-lighter) !important;
+}
+
+app-groupbox > .groupbox-body {
   padding: var(--spacing);
   gap: var(--spacing);
+  border: 1px solid var(--border-color);
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
   flex-direction: column;
-  flex-grow: 1;
+  grid-area: body;
   display: flex;
-  overflow: hidden;
 }
 
-app-groupbox.flat {
-  border: none;
+app-groupbox.flat > .groupbox-header {
+  background: var(--background-color);
+  border-top: none;
+  border-left: none;
+  border-right: none;
 }
 
-app-groupbox.flat .groupbox-caption {
+app-groupbox.flat > .groupbox-header > .groupbox-caption {
   opacity: .75;
-  border-bottom-color: var(--border-color-light);
   padding: var(--spacing-half);
-  background: var(--background-color);
   font-size: .85rem;
 }
 
+app-groupbox.flat > .groupbox-header > app-toolbar > button:hover {
+  background-color: var(--primary-gray-ghost) !important;
+}
+
+app-groupbox.flat > .groupbox-body {
+  border-color: var(--border-color-light);
+  border-bottom: none;
+  border-left: none;
+  border-right: none;
+}
+
 app-groupbox.frame {
   margin-top: .5rem;
 }
 
-app-groupbox.frame .groupbox-caption {
-  z-index: 1;
+app-groupbox.frame > .groupbox-header {
   background: var(--primary-gray-100);
+  top: calc(-1rem + var(--spacing-half));
+  z-index: 1;
   border-radius: var(--border-radius);
   border: 1px solid var(--border-color);
-  padding: var(--spacing-half) var(--spacing);
-  font-size: 1rem;
+  padding: 0 var(--spacing);
   position: absolute;
-  top: -10px;
   left: 1rem;
 }
 
+app-groupbox.frame > .groupbox-header > .groupbox-caption {
+  font-size: 1rem;
+}
+
+app-groupbox.frame > .groupbox-body {
+  padding-top: calc(1.25rem + var(--spacing));
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+}
+
 .inputContainer > app-groupbox {
   --border-color: var(--form-element-border-color);
 }
 
+app-toolbar {
+  background-color: var(--primary-gray-ghost);
+  padding: var(--spacing-half);
+  display: flex;
+}
+
+app-toolbar > button {
+  background-color: var(--primary-inverse);
+  color: var(--h5-color);
+  border: 1px solid var(--form-element-border-color);
+  width: auto;
+  padding: var(--spacing);
+  border-radius: 0;
+  align-items: center;
+  margin-bottom: 0;
+}
+
+app-toolbar > button > span {
+  display: none;
+}
+
+app-toolbar.horizonal > button {
+  border-left: none;
+  height: 100%;
+}
+
+app-toolbar.horizonal > button:last-child {
+  border-top-right-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+
+app-toolbar.horizonal > button:first-child {
+  border-left: 1px solid var(--form-element-border-color);
+  border-top-left-radius: var(--border-radius);
+  border-bottom-left-radius: var(--border-radius);
+}
+
+app-toolbar.horizonal > button:hover {
+  box-shadow: 0px 2px 4px -1px var(--primary-gray-light);
+}
+
+app-toolbar.vertical {
+  place-self: flex-start;
+  width: auto;
+  height: 100%;
+}
+
+app-toolbar.vertical > button {
+  border-top: none;
+}
+
+app-toolbar.vertical > button:last-child {
+  border-bottom-left-radius: var(--border-radius);
+  border-bottom-right-radius: var(--border-radius);
+}
+
+app-toolbar.vertical > button:first-child {
+  border-top: 1px solid var(--form-element-border-color);
+  border-top-left-radius: var(--border-radius);
+  border-top-right-radius: var(--border-radius);
+}
+
+app-toolbar.vertical > button:hover {
+  box-shadow: 2px 0px 4px -1px var(--primary-gray-light);
+}
+
+app-toolbar.flat {
+  background-color: #0000;
+}
+
+app-toolbar.flat > button {
+  box-shadow: none;
+  background-color: #0000;
+}
+
+app-toolbar.flat > button:hover {
+  background-color: var(--primary-gray-ghost);
+  box-shadow: none;
+}
+
 combo-box {
   border: 1px solid var(--form-element-border-color);
   border-radius: var(--border-radius);
@@ -7293,14 +7431,13 @@ app-form {
 
 app-form .form-groupbox {
   width: 100%;
-  padding-top: calc(var(--spacing-2x));
-  margin-top: var(--spacing-2x);
+  margin-top: var(--spacing);
+  background: var(--primary-gray-100);
   grid-column: 1 / -1;
 }
 
 app-form .form-groupbox > .groupbox-body {
   gap: var(--spacing-2x);
-  padding: var(--spacing);
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
   display: grid;
   position: relative;
@@ -7372,10 +7509,12 @@ app-form app-form-line > .inputContainer {
 }
 
 app-form app-form-line > .inputContainer > input, app-form app-form-line > .inputContainer > select {
+  background-color: var(--background-color);
   margin-bottom: 0;
 }
 
 app-form app-form-line > .inputContainer > textarea {
+  background-color: var(--background-color);
   width: 100%;
   margin-bottom: 0;
 }
@@ -7701,86 +7840,6 @@ app-rad-menu .arc i {
   position: absolute;
 }
 
-app-toolbar {
-  background-color: var(--primary-gray-ghost);
-  padding: var(--spacing-half);
-  display: flex;
-}
-
-app-toolbar > button {
-  background-color: var(--primary-inverse);
-  color: var(--h5-color);
-  border: 1px solid var(--form-element-border-color);
-  width: auto;
-  padding: var(--spacing);
-  border-radius: 0;
-  align-items: center;
-  margin-bottom: 0;
-}
-
-app-toolbar > button > span {
-  display: none;
-}
-
-app-toolbar.horizonal > button {
-  border-left: none;
-  height: 100%;
-}
-
-app-toolbar.horizonal > button:last-child {
-  border-top-right-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
-
-app-toolbar.horizonal > button:first-child {
-  border-left: 1px solid var(--form-element-border-color);
-  border-top-left-radius: var(--border-radius);
-  border-bottom-left-radius: var(--border-radius);
-}
-
-app-toolbar.horizonal > button:hover {
-  box-shadow: 0px 2px 4px -1px var(--primary-gray-light);
-}
-
-app-toolbar.vertical {
-  place-self: flex-start;
-  width: auto;
-  height: 100%;
-}
-
-app-toolbar.vertical > button {
-  border-top: none;
-}
-
-app-toolbar.vertical > button:last-child {
-  border-bottom-left-radius: var(--border-radius);
-  border-bottom-right-radius: var(--border-radius);
-}
-
-app-toolbar.vertical > button:first-child {
-  border-top: 1px solid var(--form-element-border-color);
-  border-top-left-radius: var(--border-radius);
-  border-top-right-radius: var(--border-radius);
-}
-
-app-toolbar.vertical > button:hover {
-  box-shadow: 2px 0px 4px -1px var(--primary-gray-light);
-}
-
-app-toolbar.flat {
-  background-color: #0000;
-}
-
-app-toolbar.flat > button {
-  box-shadow: none;
-  background-color: #0000;
-}
-
-app-toolbar.flat > button:hover {
-  background-color: var(--primary-gray-ghost);
-  box-shadow: none;
-}
-
 app-host {
   width: 100%;
   height: 100%;