@yesilyazilim/web.spa 1.0.56 → 1.0.58

package/index.css

@@ -4149,6 +4149,7 @@ app-spinner .spinner {
   pointer-events: all;
   box-shadow: 3px 6px 12px 3px var(--drop-shadow-color);
   border-radius: var(--spacing-2x);
+  backdrop-filter: blur(10px);
   align-self: flex-end;
   animation-name: toasting;
   animation-duration: .3s;
@@ -4216,7 +4217,7 @@ app-spinner .spinner {
 }
 
 #notify-container app-notify > div.success {
-  background-color: var(--success);
+  background-color: color-mix(in srgb, var(--success) 70%, transparent);
 }
 
 #notify-container app-notify > div.success .title, #notify-container app-notify > div.success .message {
@@ -4224,7 +4225,7 @@ app-spinner .spinner {
 }
 
 #notify-container app-notify > div.warning {
-  background-color: var(--warning);
+  background-color: color-mix(in srgb, var(--warning) 70%, transparent);
 }
 
 #notify-container app-notify > div.warning .title, #notify-container app-notify > div.warning .message {
@@ -4232,7 +4233,7 @@ app-spinner .spinner {
 }
 
 #notify-container app-notify > div.error {
-  background-color: var(--danger);
+  background-color: color-mix(in srgb, var(--danger) 70%, transparent);
 }
 
 #notify-container app-notify > div.error .title, #notify-container app-notify > div.error .message {
@@ -4240,7 +4241,7 @@ app-spinner .spinner {
 }
 
 #notify-container app-notify > div.info {
-  background-color: var(--info);
+  background-color: color-mix(in srgb, var(--info) 70%, transparent);
 }
 
 #notify-container app-notify > div.info .title, #notify-container app-notify > div.info .message {
@@ -5684,8 +5685,8 @@ app-form {
 }
 
 app-form app-form-line {
-  gap: var(--spacing-half);
   flex-direction: column;
+  gap: 1px;
   width: 100%;
   display: flex;
 }
@@ -5705,6 +5706,12 @@ app-form app-form-line > .titleContainer {
   display: flex;
 }
 
+app-form app-form-line > .titleContainer > .required {
+  color: var(--danger);
+  margin: 0;
+  padding: 0;
+}
+
 app-form app-form-line > .titleContainer > i {
   visibility: hidden;
   height: 100%;
@@ -5722,6 +5729,7 @@ app-form app-form-line > .titleContainer > label {
   margin: 0;
   padding: 0;
   font-size: 11px;
+  line-height: 13px;
   overflow: hidden;
 }
 
@@ -5791,7 +5799,7 @@ app-form app-form-line.val-success > .inputContainer:after {
 app-taginput {
   margin-bottom: var(--spacing);
   appearance: none;
-  padding: var(--form-element-spacing-vertical) var(--form-element-spacing-horizontal);
+  padding: var(--spacing-half) var(--spacing-half);
   width: 100%;
   min-height: calc(1rem * var(--line-height)  + var(--form-element-spacing-vertical) * 2 + var(--border-width) * 2);
   --background-color: var(--form-element-background-color);
@@ -5805,10 +5813,10 @@ app-taginput {
   color: var(--color);
   font-weight: var(--font-weight);
   transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
+  align-items: center;
+  gap: var(--spacing-half);
   outline: 0;
   flex-wrap: wrap;
-  align-items: center;
-  gap: 3px;
   display: inline-flex;
   position: relative;
 }