@yesilyazilim/web.spa 1.0.69 → 1.0.71

package/index.css

@@ -1101,7 +1101,7 @@ input:not([type="submit"], [type="button"], [type="reset"])[disabled], select[di
 }
 
 [dir="rtl"] :where(input, select, textarea):not([type="checkbox"], [type="radio"]):is([aria-invalid], [aria-invalid="true"], [aria-invalid="false"]) {
-  background-position: .75rem;
+  background-position: .75rem 50%;
 }
 
 input::placeholder, textarea::placeholder, select:invalid {
@@ -1140,7 +1140,7 @@ select:not([multiple], [size]) {
 }
 
 [dir="rtl"] select:not([multiple], [size]) {
-  background-position: .75rem;
+  background-position: .75rem 50%;
 }
 
 :where(input, select, textarea, .grid) + small {
@@ -1157,15 +1157,15 @@ label > :where(input, select, textarea) {
 
 [type="checkbox"], [type="radio"] {
   appearance: none;
+  margin-top: -.125em;
+  margin-left: 0;
+  margin-right: .375em;
   border-width: var(--border-width);
   width: 1.25em;
   height: 1.25em;
   font-size: inherit;
   vertical-align: middle;
   cursor: pointer;
-  margin-top: -.125em;
-  margin-left: 0;
-  margin-right: .375em;
   margin-inline: 0 .375em;
 }
 
@@ -1352,6 +1352,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   margin-right: calc(var(--spacing) / 2);
+  margin-left: 0;
   padding: calc(var(--form-element-spacing-vertical) * .5) calc(var(--form-element-spacing-horizontal) * .5);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
@@ -1364,7 +1365,6 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
   text-align: center;
   cursor: pointer;
   transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
-  margin-left: 0;
   outline: none;
   margin-inline-start: 0;
   margin-inline-end: calc(var(--spacing) / 2);
@@ -1380,6 +1380,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   margin-right: calc(var(--spacing) / 2);
+  margin-left: 0;
   padding: calc(var(--form-element-spacing-vertical) * .5) calc(var(--form-element-spacing-horizontal) * .5);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
@@ -1393,7 +1394,6 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
   cursor: pointer;
   -webkit-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
   transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
-  margin-left: 0;
   outline: none;
   margin-inline-start: 0;
   margin-inline-end: calc(var(--spacing) / 2);
@@ -1409,6 +1409,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
   --border-color: var(--secondary);
   --color: var(--secondary-inverse);
   margin-right: calc(var(--spacing) / 2);
+  margin-left: 0;
   padding: calc(var(--form-element-spacing-vertical) * .5) calc(var(--form-element-spacing-horizontal) * .5);
   border: var(--border-width) solid var(--border-color);
   border-radius: var(--border-radius);
@@ -1422,7 +1423,6 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
   cursor: pointer;
   -ms-transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
   transition: background-color var(--transition), border-color var(--transition), color var(--transition), box-shadow var(--transition);
-  margin-left: 0;
   outline: none;
   margin-inline-start: 0;
   margin-inline-end: calc(var(--spacing) / 2);
@@ -1529,7 +1529,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
 
 input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"] {
   background-image: var(--icon-search);
-  background-position: 1.125rem;
+  background-position: 1.125rem 50%;
   background-repeat: no-repeat;
   background-size: 1rem;
   border-radius: 5rem;
@@ -1537,7 +1537,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
 }
 
 input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
-  background-position: 1.125rem, right .75rem center;
+  background-position: 1.125rem 50%, right .75rem center;
   padding-inline-start: calc(var(--form-element-spacing-horizontal)  + 1.75rem) !important;
 }
 
@@ -1559,7 +1559,7 @@ input:not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type
 }
 
 [dir="rtl"] :where(input):not([type="checkbox"], [type="radio"], [type="range"], [type="file"])[type="search"][aria-invalid] {
-  background-position: right 1.125rem center, .75rem;
+  background-position: right 1.125rem center, .75rem 50%;
 }
 
 :where(table) {
@@ -1697,11 +1697,11 @@ details summary::-moz-list-bullet {
 }
 
 details summary:after {
+  width: 1rem;
+  height: 1rem;
   float: right;
   background-image: var(--icon-chevron);
   content: "";
-  width: 1rem;
-  height: 1rem;
   transition: transform var(--transition);
   background-position: 100%;
   background-repeat: no-repeat;
@@ -6727,6 +6727,194 @@ app-rad-menu .arc i {
   position: absolute;
 }
 
+.skeleton-container {
+  display: block;
+}
+
+.skeleton-container .skeleton-item {
+  background: #f2f2f2;
+  border-radius: 4px;
+  width: 100%;
+  height: 1em;
+  margin-bottom: .5em;
+  display: block;
+}
+
+.skeleton-container .skeleton-item:last-child {
+  margin-bottom: 0;
+}
+
+.skeleton-container .skeleton-item.skeleton-animated {
+  background: linear-gradient(90deg, #f2f2f2 25%, #fff 50%, #f2f2f2 75%) 0 0 / 200% 100%;
+  animation: 1.5s ease-in-out infinite skeleton-loading;
+}
+
+@keyframes skeleton-loading {
+  0% {
+    background-position: 200% 0;
+  }
+
+  100% {
+    background-position: -200% 0;
+  }
+}
+
+.skeleton-paragraph .skeleton-spacer {
+  height: .5em;
+}
+
+.skeleton-card {
+  background: #fff;
+  border: 1px solid #e2e8f0;
+  border-radius: 8px;
+  padding: 16px;
+}
+
+.skeleton-card .skeleton-card-header {
+  align-items: center;
+  gap: 12px;
+  margin-bottom: 16px;
+  display: flex;
+}
+
+.skeleton-card .skeleton-card-header .skeleton-card-header-content {
+  flex: 1;
+}
+
+.skeleton-card .skeleton-card-header .skeleton-card-header-content app-skeleton {
+  margin-bottom: 4px;
+}
+
+.skeleton-card .skeleton-card-header .skeleton-card-header-content app-skeleton:last-child {
+  margin-bottom: 0;
+}
+
+.skeleton-card .skeleton-card-content {
+  margin-bottom: 16px;
+}
+
+.skeleton-card .skeleton-card-actions {
+  justify-content: flex-end;
+  gap: 8px;
+  display: flex;
+}
+
+.skeleton-table {
+  border-spacing: 0;
+  width: 100%;
+}
+
+.skeleton-table .skeleton-table-header {
+  border-bottom: 2px solid #e2e8f0;
+  margin-bottom: 8px;
+  padding: 12px 0;
+  display: flex;
+}
+
+.skeleton-table .skeleton-table-header .skeleton-table-header-cell {
+  flex: 1;
+  margin-bottom: 0;
+  margin-right: 16px;
+}
+
+.skeleton-table .skeleton-table-header .skeleton-table-header-cell:last-child {
+  margin-right: 0;
+}
+
+.skeleton-table .skeleton-table-row {
+  border-bottom: 1px solid #f7fafc;
+  padding: 8px 0;
+  display: flex;
+}
+
+.skeleton-table .skeleton-table-row:last-child {
+  border-bottom: none;
+}
+
+.skeleton-table .skeleton-table-row .skeleton-table-cell {
+  flex: 1;
+  margin-bottom: 0;
+  margin-right: 16px;
+}
+
+.skeleton-table .skeleton-table-row .skeleton-table-cell:last-child {
+  margin-right: 0;
+}
+
+.skeleton-form {
+  max-width: 400px;
+}
+
+.skeleton-form .skeleton-spacer {
+  height: 16px;
+}
+
+.skeleton-form .skeleton-form-field {
+  margin-bottom: 16px;
+}
+
+.skeleton-form .skeleton-form-field .skeleton-form-label {
+  height: .875em;
+  margin-bottom: 4px;
+}
+
+.skeleton-form .skeleton-form-actions {
+  justify-content: flex-end;
+  gap: 12px;
+  margin-top: 24px;
+  display: flex;
+}
+
+app-skeleton {
+  display: block;
+}
+
+@media (prefers-color-scheme: dark) {
+  .skeleton-container .skeleton-item {
+    background: #2d3748;
+  }
+
+  .skeleton-container .skeleton-item.skeleton-animated {
+    background: linear-gradient(90deg, #2d3748 25%, #4a5568 50%, #2d3748 75%) 0 0 / 200% 100%;
+  }
+
+  .skeleton-card {
+    background: #1a202c;
+    border-color: #4a5568;
+  }
+
+  .skeleton-table .skeleton-table-header {
+    border-bottom-color: #4a5568;
+  }
+
+  .skeleton-table .skeleton-table-row {
+    border-bottom-color: #2d3748;
+  }
+}
+
+@media (width <= 768px) {
+  .skeleton-card {
+    padding: 12px;
+  }
+
+  .skeleton-card .skeleton-card-header {
+    gap: 8px;
+    margin-bottom: 12px;
+  }
+
+  .skeleton-card .skeleton-card-content {
+    margin-bottom: 12px;
+  }
+
+  .skeleton-form {
+    max-width: 100%;
+  }
+
+  .skeleton-table .skeleton-table-header .skeleton-table-header-cell, .skeleton-table .skeleton-table-row .skeleton-table-header-cell, .skeleton-table .skeleton-table-header .skeleton-table-cell, .skeleton-table .skeleton-table-row .skeleton-table-cell {
+    margin-right: 8px;
+  }
+}
+
 app-toolbar {
   background-color: var(--primary-gray-ghost);
   padding: var(--spacing-half);
@@ -6908,4 +7096,7 @@ nav-header > .header-right app-menu .menu-item {
 nav-header > .header-right app-menu .menu-item:hover {
   background: var(--primary-gray);
 }
+
+
+
 /*# sourceMappingURL=index.css.map */