@stackoverflow/stacks 2.7.4 → 2.8.0

package/dist/css/stacks.css

@@ -2256,17 +2256,8 @@ body.theme-highcontrast .s-textarea {
 fieldset[disabled] .s-input,
 fieldset[disabled] .s-textarea,
 .s-input[disabled],
-.s-textarea[disabled],
-.s-input[readonly],
-.s-textarea[readonly],
-.is-readonly .s-input,
-.is-readonly .s-textarea {
-  --_in-c: not-allowed;
-}
-fieldset[disabled] .s-input,
-fieldset[disabled] .s-textarea,
-.s-input[disabled],
 .s-textarea[disabled] {
+  --_in-c: not-allowed;
   --_in-o: var(--_o-disabled-static);
 }
 .s-input[readonly],
@@ -2275,6 +2266,7 @@ fieldset[disabled] .s-textarea,
 .is-readonly .s-textarea {
   --_in-bg: var(--black-150);
   --_in-bc: var(--bc-light);
+  --_in-c: default;
   --_in-fc: var(--black-400);
 }
 body.theme-highcontrast .s-input[readonly],
@@ -2548,7 +2540,9 @@ fieldset[disabled] .s-input-message {
   color: var(--_im-a-fc-hover) !important;
 }
 .s-label {
+  --_la-c: unset;
   --_la-fs: var(--fs-body2);
+  cursor: var(--_la-c);
   font-size: var(--_la-fs);
   color: var(--fc-medium);
   font-family: inherit;
@@ -2556,21 +2550,28 @@ fieldset[disabled] .s-input-message {
   padding: 0 var(--su2);
 }
 .s-label[for] {
-  cursor: pointer;
+  --_la-c: pointer;
 }
 fieldset[disabled] .s-label,
 .is-disabled .s-label,
 .s-check-control .s-checkbox[disabled] + .s-label,
 .s-check-control .s-radio[disabled] + .s-label {
-  cursor: not-allowed;
   opacity: var(--_o-disabled-static);
 }
 fieldset[disabled] .s-label .s-description,
 .is-disabled .s-label .s-description {
   opacity: unset;
 }
+fieldset[disabled] .s-label,
+.is-disabled .s-label,
+fieldset[disabled] .s-label[for],
+.is-disabled .s-label[for],
+.s-check-control .s-checkbox[disabled] + .s-label,
+.s-check-control .s-radio[disabled] + .s-label {
+  --_la-c: not-allowed;
+}
 .is-readonly .s-label {
-  cursor: not-allowed;
+  --_la-c: default;
 }
 .s-label.s-label__sm {
   --_la-fs: var(--fs-caption);
@@ -5184,6 +5185,61 @@ body.theme-highcontrast .s-sidebarwidget.s-sidebarwidget__green {
 .s-sidebarwidget table.s-sidebarwidget--content.s-sidebarwidget__items tr.s-sidebarwidget--item td {
   padding: 0;
 }
+.s-skeleton {
+  --_sk-bg-1: var(--black-400);
+  --_sk-bg-2: var(--black-350);
+  --_sk-bg-3: var(--black-300);
+  --_sk-o: 0.25;
+  margin-bottom: var(--su48);
+  opacity: var(--_sk-o);
+  width: 100%;
+}
+body.theme-highcontrast .s-skeleton {
+  --_sk-o: 0.4;
+}
+@keyframes flow {
+  0% {
+    background-position: 400% 50%;
+  }
+  100% {
+    background-position: 0% 50%;
+  }
+}
+.s-skeleton.s-skeleton__ai {
+  --_sk-bg-1: #ac76f0;
+  --_sk-bg-2: #297fff;
+  --_sk-bg-3: #6abcf8;
+}
+.s-skeleton,
+.s-skeleton:after,
+.s-skeleton:before {
+  background-image: linear-gradient(to right, var(--_sk-bg-1) 8%, var(--_sk-bg-2) 16%, var(--_sk-bg-3) 25%, var(--_sk-bg-1) 42%, var(--_sk-bg-2) 58%, var(--_sk-bg-3) 75%, var(--_sk-bg-1) 83%);
+  background-size: 400% 100%;
+  border-radius: var(--br-lg);
+  display: block;
+  height: var(--su16);
+  position: relative;
+}
+@media (prefers-reduced-motion: no-preference) {
+  .s-skeleton,
+  .s-skeleton:after,
+  .s-skeleton:before {
+    animation: flow 8s linear infinite;
+  }
+}
+.s-skeleton:after,
+.s-skeleton:before {
+  content: '';
+  position: relative;
+}
+.s-skeleton:after {
+  top: calc(var(--su4));
+  width: calc(2/3 * 100%);
+}
+.s-skeleton:before {
+  top: calc(var(--su32) + var(--su8));
+  width: calc(1/3 * 100%);
+}
 .s-spinner {
   --_sp-baw: calc(var(--su-static1) * 3);
   --_sp-size: var(--su-static24);