@yesilyazilim/web.spa 1.0.50 → 1.0.52

package/index.css

@@ -3333,14 +3333,20 @@ html, body {
 }
 
 ::-webkit-scrollbar-thumb {
-  background-color: var(--form-element-border-color);
-  border-radius: 100px;
-  transition: background-color .5s;
+  background-color: var(--primary-gray-light);
+  background-clip: padding-box;
+  border: 2px solid #0000;
+  border-radius: 10px;
+  transition: border-width .5s;
 }
 
 ::-webkit-scrollbar-thumb:hover {
-  background-color: var(--muted-color);
-  border-radius: 100px;
+  background-color: var(--primary-gray);
+  border-width: 0;
+}
+
+::-webkit-scrollbar-track {
+  background: none;
 }
 
 select, input, option, input[type="radio"], input[type="range"], progress {
@@ -4971,17 +4977,21 @@ app-button-list.toolbar.vertical > button:first-child {
 app-dropdown {
   width: 100%;
   z-index: var(--z-dropdown);
-  border-radius: var(--border-radius);
-  box-shadow: 0px 6px 6px 0px var(--drop-shadow-color);
-  background: var(--background-color);
   position: absolute;
   top: 100%;
 }
 
 app-dropdown > .ddBody {
-  grid-template-rows: 0fr;
-  transition: grid-template-rows .3s;
+  background: var(--background-color);
+  border-radius: var(--border-radius);
+  visibility: hidden;
+  opacity: 0;
+  box-shadow: 0px 10px 30px 0px var(--drop-shadow-color);
+  clip-path: inset(0 -30px -30px);
+  height: 0;
+  transition: all .3s;
   display: grid;
+  top: -10px;
 }
 
 app-dropdown > .ddBody > * {
@@ -4992,8 +5002,23 @@ app-dropdown > .ddBody:has(app-menu.drop) > * {
   overflow: visible;
 }
 
+app-dropdown.rev {
+  bottom: 100%;
+  top: inherit !important;
+}
+
+app-dropdown.rev > .ddBody {
+  clip-path: inset(-30px -30px 0);
+  box-shadow: 0px -10px 30px 0px var(--drop-shadow-color);
+  top: 10px;
+}
+
 app-dropdown.open > .ddBody {
+  visibility: visible;
+  opacity: 1;
   grid-template-rows: 1fr;
+  height: fit-content;
+  top: 0;
 }
 
 app-sub-panel {
@@ -5459,11 +5484,16 @@ app-dropdown-tree .screen {
 app-dropdown-tree .iconButton {
   color: var(--background-color);
   background-color: var(--primary-inverse);
+  padding: var(--spacing);
   border: none;
   border-top-left-radius: 0;
   border-bottom-left-radius: 0;
 }
 
+app-dropdown-tree .iconButton:focus {
+  box-shadow: none;
+}
+
 app-dropdown-tree .iconButton i:before {
   transition: rotate .5s;
 }
@@ -5590,7 +5620,7 @@ app-treeview.desc, app-treeview.desc app-treeview-item > .treeItemContainer {
 }
 
 app-form {
-  gap: var(--spacing);
+  gap: var(--spacing-2x);
   padding: var(--spacing);
   background: var(--background-color);
   grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
@@ -5637,8 +5667,11 @@ app-form app-form-line > .titleContainer > label {
 }
 
 app-form app-form-line > .inputContainer {
+  gap: var(--spacing-half);
   border: none;
+  flex-direction: row;
   width: 100%;
+  display: flex;
 }
 
 app-form app-form-line > .inputContainer > input, app-form app-form-line > .inputContainer > select {
@@ -5649,6 +5682,19 @@ app-form app-form-line > .inputContainer > span {
   padding-left: var(--spacing);
 }
 
+app-form app-form-line > .inputContainer > combo-box {
+  width: 100%;
+}
+
+app-form app-form-line > .inputContainer > .actionContainer {
+  flex-direction: row;
+  display: flex;
+}
+
+app-form app-form-line > .inputContainer > .actionContainer > button {
+  padding: 4px 8px;
+}
+
 app-form app-form-line.val-error {
   --form-element-border-color: var(--danger);
 }
@@ -6069,6 +6115,80 @@ app-toolbar.vertical > button:hover {
   box-shadow: 2px 0px 4px -1px var(--primary-gray-light);
 }
 
+combo-box {
+  border: 1px solid var(--form-element-border-color);
+  border-radius: var(--border-radius);
+  background-color: var(--background-color);
+  grid-template-columns: 1fr auto;
+  display: grid;
+  position: relative;
+  padding: 0 !important;
+}
+
+combo-box > .screen {
+  cursor: pointer;
+  width: 100%;
+  padding: 0 var(--spacing);
+  align-items: center;
+  display: inline-flex;
+}
+
+combo-box > .iconButton {
+  color: var(--background-color);
+  background-color: var(--primary-inverse);
+  border-width: initial;
+  border-style: none;
+  border-color: initial;
+  border-image: initial;
+  padding: var(--spacing);
+  border-top-left-radius: 0;
+  border-bottom-left-radius: 0;
+}
+
+combo-box > .iconButton:focus {
+  box-shadow: none;
+}
+
+combo-box > .iconButton i:before {
+  transition: rotate .5s;
+}
+
+combo-box > .iconButton.up i:before {
+  rotate: 180deg;
+}
+
+combo-box > app-dropdown {
+  margin-top: 1px;
+}
+
+combo-box > app-dropdown.rev {
+  margin-top: 0;
+  margin-bottom: 1px;
+}
+
+combo-box > app-dropdown > .ddBody > app-list {
+  max-height: 200px;
+}
+
+combo-box > app-dropdown > .ddBody > app-list > .itemContainer {
+  gap: 0;
+  padding: 0;
+}
+
+combo-box > app-dropdown > .ddBody > app-list > .itemContainer > span {
+  padding: var(--spacing);
+}
+
+combo-box > app-dropdown > .ddBody > app-list > .itemContainer > span:hover {
+  background-color: var(--primary-hover);
+  color: var(--primary-inverse);
+}
+
+combo-box > app-dropdown > .ddBody > app-list > .app-list-filter-input {
+  margin: var(--spacing);
+  width: calc(100% - var(--spacing) * 2);
+}
+
 app-host {
   width: 100%;
   height: 100%;