feat: new revision history UI (#861)

app/assets/stylesheets/_sn.scss

@@ -1,8 +1,5 @@
 /* Components and utilities that are good candidates for extraction to StyleKit. */
 
-:root {
-}
-
 .bg-grey-super-light {
   background-color: var(--sn-stylekit-grey-super-light);
 }
@@ -11,6 +8,10 @@
   height: 90vh;
 }
 
+.h-3 {
+  height: 0.75rem;
+}
+
 .h-26 {
   width: 6.5rem;
 }
@@ -260,6 +261,10 @@
   margin-left: 1rem;
 }
 
+.mr-2\.5 {
+  margin-right: 0.625rem;
+}
+
 .mr-3 {
   margin-right: 0.75rem;
 }
@@ -291,10 +296,18 @@
   margin-top: 0;
 }
 
+.mt-2\.5 {
+  margin-top: 0.625rem;
+}
+
 .mb-2 {
   margin-bottom: 0.5rem;
 }
 
+.max-w-40\% {
+  max-width: 40%;
+}
+
 .max-w-1\/2 {
   max-width: 50%;
 }
@@ -326,6 +339,10 @@
   margin-bottom: 2rem;
 }
 
+.w-3 {
+  width: 0.75rem;
+}
+
 .w-26 {
   width: 6.5rem;
 }
@@ -382,6 +399,10 @@
   min-width: 7.5rem;
 }
 
+.min-w-60 {
+  min-width: 15rem;
+}
+
 .min-w-68 {
   min-width: 17rem;
 }
@@ -426,6 +447,14 @@
   border-color: var(--sn-stylekit-neutral-contrast-color);
 }
 
+.sn-component .border-r-1px {
+  border-right-width: 1px;
+}
+
+.sn-component .border-t-1px {
+  border-top-width: 1px;
+}
+
 .border-2 {
   border-width: 0.5rem;
 }
@@ -474,6 +503,10 @@
   padding-top: 1.5rem;
 }
 
+.pb-0 {
+  padding-bottom: 0;
+}
+
 .sn-component .pb-1 {
   padding-bottom: 0.25rem;
 }
@@ -522,6 +555,11 @@
   padding-bottom: 0.125rem;
 }
 
+.sn-component .py-1\.35 {
+  padding-top: 0.3375rem;
+  padding-bottom: 0.3375rem;
+}
+
 .sn-component .py-2\.5 {
   padding-top: 0.625rem;
   padding-bottom: 0.625rem;
@@ -653,6 +691,10 @@
   bottom: -1.25rem;
 }
 
+.z-index-1 {
+  z-index: 1;
+}
+
 .-z-index-1 {
   z-index: -1;
 }
@@ -755,6 +797,10 @@
   color: var(--sn-stylekit-foreground-color) !important;
 }
 
+.sn-component .bg-info-backdrop {
+  background-color: var(--sn-stylekit-info-backdrop-color);
+}
+
 .focus\:bg-info-backdrop:focus {
   background-color: var(--sn-stylekit-info-backdrop-color);
 }
@@ -867,14 +913,31 @@
   pointer-events: none;
 }
 
-.hide-if-last-child:last-child {
+.flex-shrink-0 {
+  flex-shrink: 0;
+}
+
+.last\:hidden:last-child {
   display: none;
 }
 
+.shadow-bottom {
+  box-shadow: currentcolor 0px -1px 0px 0px inset, currentcolor 0px 1px 0px 0px;
+}
+
+.focus\:shadow-inner:focus {
+  box-shadow: var(--sn-stylekit-info-color) 1px 1px 0px 0px inset,
+    var(--sn-stylekit-info-color) -1px -1px 0px 0px inset;
+}
+
 .bg-note-size-warning {
   background-color: rgba(235, 173, 0, 0.08);
 }
 
+.overflow-x-hidden {
+  overflow-x: hidden;
+}
+
 .sn-component .border-y-1px {
   border-top-width: 1px;
   border-bottom-width: 1px;