@univerjs/ui 1.0.0-alpha.6 → 1.0.0-alpha.8

package/lib/index.css

@@ -33,6 +33,10 @@
   right: 0;
 }
 
+.\!univer-top-auto {
+  top: auto !important;
+}
+
 .-univer-left-\[99999\] {
   left: -99999px;
 }
@@ -45,6 +49,10 @@
   bottom: 0;
 }
 
+.univer-bottom-1\.5 {
+  bottom: .375rem;
+}
+
 .univer-left-0 {
   left: 0;
 }
@@ -73,6 +81,10 @@
   top: 50%;
 }
 
+.univer-top-3\.5 {
+  top: .875rem;
+}
+
 .univer-top-\[-9999px\] {
   top: -9999px;
 }
@@ -85,6 +97,10 @@
   z-index: 20;
 }
 
+.univer-z-50 {
+  z-index: 50;
+}
+
 .univer-z-\[100\] {
   z-index: 100;
 }
@@ -119,6 +135,10 @@
   margin-bottom: 0;
 }
 
+.univer-ml-2 {
+  margin-left: .5rem;
+}
+
 .univer-ml-auto {
   margin-left: auto;
 }
@@ -127,6 +147,10 @@
   margin-right: .5rem;
 }
 
+.univer-mr-auto {
+  margin-right: auto;
+}
+
 .univer-mt-2 {
   margin-top: .5rem;
 }
@@ -256,6 +280,22 @@
   height: 2.5rem;
 }
 
+.univer-h-11 {
+  height: 2.75rem;
+}
+
+.univer-h-2 {
+  height: .5rem;
+}
+
+.univer-h-4 {
+  height: 1rem;
+}
+
+.univer-h-5 {
+  height: 1.25rem;
+}
+
 .univer-h-6 {
   height: 1.5rem;
 }
@@ -280,6 +320,10 @@
   height: 340px;
 }
 
+.univer-h-\[88px\] {
+  height: 88px;
+}
+
 .univer-h-full {
   height: 100%;
 }
@@ -320,6 +364,10 @@
   min-height: 100%;
 }
 
+.\!univer-w-full {
+  width: 100% !important;
+}
+
 .univer-w-0 {
   width: 0;
 }
@@ -328,10 +376,18 @@
   width: .25rem;
 }
 
+.univer-w-1\/3 {
+  width: 33.3333%;
+}
+
 .univer-w-10 {
   width: 2.5rem;
 }
 
+.univer-w-14 {
+  width: 3.5rem;
+}
+
 .univer-w-24 {
   width: 6rem;
 }
@@ -368,10 +424,6 @@
   width: 420px;
 }
 
-.univer-w-\[52px\] {
-  width: 52px;
-}
-
 .univer-w-\[68px\] {
   width: 68px;
 }
@@ -392,6 +444,14 @@
   min-width: 0;
 }
 
+.univer-min-w-14 {
+  min-width: 3.5rem;
+}
+
+.univer-min-w-16 {
+  min-width: 4rem;
+}
+
 .univer-min-w-44 {
   min-width: 11rem;
 }
@@ -408,6 +468,10 @@
   min-width: 16rem;
 }
 
+.univer-min-w-8 {
+  min-width: 2rem;
+}
+
 .univer-min-w-min {
   min-width: min-content;
 }
@@ -493,6 +557,16 @@
   transform: translate(var(--univer-tw-translate-x), var(--univer-tw-translate-y)) rotate(var(--univer-tw-rotate)) skewX(var(--univer-tw-skew-x)) skewY(var(--univer-tw-skew-y)) scaleX(var(--univer-tw-scale-x)) scaleY(var(--univer-tw-scale-y));
 }
 
+@keyframes univer-pulse {
+  50% {
+    opacity: .5;
+  }
+}
+
+.univer-animate-pulse {
+  animation: 2s cubic-bezier(.4, 0, .6, 1) infinite univer-pulse;
+}
+
 .univer-cursor-col-resize {
   cursor: col-resize;
 }
@@ -562,6 +636,10 @@
   grid-template-columns: auto 1fr auto;
 }
 
+.univer-grid-rows-2 {
+  grid-template-rows: repeat(2, minmax(0, 1fr));
+}
+
 .univer-grid-rows-\[100\%\] {
   grid-template-rows: 100%;
 }
@@ -586,6 +664,10 @@
   flex-wrap: wrap;
 }
 
+.univer-content-center {
+  align-content: center;
+}
+
 .univer-items-end {
   align-items: flex-end;
 }
@@ -594,6 +676,14 @@
   align-items: center;
 }
 
+.univer-items-stretch {
+  align-items: stretch;
+}
+
+.univer-justify-start {
+  justify-content: flex-start;
+}
+
 .univer-justify-end {
   justify-content: flex-end;
 }
@@ -646,10 +736,23 @@
   gap: 1rem;
 }
 
+.univer-gap-5 {
+  gap: 1.25rem;
+}
+
 .univer-gap-6 {
   gap: 1.5rem;
 }
 
+.univer-gap-x-1 {
+  -moz-column-gap: .25rem;
+  column-gap: .25rem;
+}
+
+.univer-gap-y-2 {
+  row-gap: .5rem;
+}
+
 .univer-overflow-hidden {
   overflow: hidden;
 }
@@ -662,6 +765,10 @@
   overflow-y: auto;
 }
 
+.univer-overflow-y-hidden {
+  overflow-y: hidden;
+}
+
 .univer-overscroll-contain {
   overscroll-behavior: contain;
 }
@@ -732,6 +839,11 @@
   border-radius: .75rem;
 }
 
+.univer-rounded-b {
+  border-bottom-right-radius: .25rem;
+  border-bottom-left-radius: .25rem;
+}
+
 .univer-rounded-l {
   border-top-left-radius: .25rem;
   border-bottom-left-radius: .25rem;
@@ -752,6 +864,11 @@
   border-top-right-radius: 28px;
 }
 
+.univer-rounded-t-none {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
 .univer-border {
   border-width: 1px;
 }
@@ -764,6 +881,14 @@
   border-bottom-width: 1px;
 }
 
+.univer-border-b-\[3px\] {
+  border-bottom-width: 3px;
+}
+
+.univer-border-t {
+  border-top-width: 1px;
+}
+
 .univer-border-solid {
   border-style: solid;
 }
@@ -772,6 +897,10 @@
   border-style: none;
 }
 
+.\!univer-border-gray-300 {
+  border-color: var(--univer-gray-300) !important;
+}
+
 .univer-border-gray-200 {
   border-color: var(--univer-gray-200);
 }
@@ -784,6 +913,10 @@
   border-color: var(--univer-primary-600);
 }
 
+.univer-border-transparent {
+  border-color: #0000;
+}
+
 .univer-border-white {
   border-color: var(--univer-white);
 }
@@ -792,6 +925,10 @@
   background-color: var(--univer-gray-200) !important;
 }
 
+.\!univer-bg-gray-800 {
+  background-color: var(--univer-gray-800) !important;
+}
+
 .univer-bg-\[rgba\(15\,23\,42\,0\.32\)\] {
   background-color: #0f172a52;
 }
@@ -855,6 +992,10 @@
   --univer-tw-gradient-to: #164e63 var(--univer-tw-gradient-to-position);
 }
 
+.\!univer-p-0 {
+  padding: 0 !important;
+}
+
 .univer-p-0 {
   padding: 0;
 }
@@ -883,6 +1024,11 @@
   padding: 2rem;
 }
 
+.\!univer-px-0 {
+  padding-left: 0 !important;
+  padding-right: 0 !important;
+}
+
 .univer-px-0 {
   padding-left: 0;
   padding-right: 0;
@@ -953,6 +1099,10 @@
   padding-bottom: 1.75rem;
 }
 
+.\!univer-pr-0 {
+  padding-right: 0 !important;
+}
+
 .univer-pb-1 {
   padding-bottom: .25rem;
 }
@@ -965,6 +1115,10 @@
   padding-bottom: .75rem;
 }
 
+.univer-pb-4 {
+  padding-bottom: 1rem;
+}
+
 .univer-pl-2 {
   padding-left: .5rem;
 }
@@ -1151,6 +1305,10 @@
   opacity: .4;
 }
 
+.univer-opacity-50 {
+  opacity: .5;
+}
+
 .univer-opacity-60 {
   opacity: .6;
 }
@@ -1310,6 +1468,10 @@
   color: var(--univer-gray-700);
 }
 
+.hover\:univer-text-gray-900:hover {
+  color: var(--univer-gray-900);
+}
+
 .hover\:univer-opacity-50:hover {
   opacity: .5;
 }
@@ -1353,10 +1515,18 @@
   box-shadow: var(--univer-tw-ring-offset-shadow), var(--univer-tw-ring-shadow), var(--univer-tw-shadow, 0 0 #0000);
 }
 
+.focus-visible\:univer-ring-inset:focus-visible {
+  --univer-tw-ring-inset: inset;
+}
+
 .focus-visible\:univer-ring-primary-100:focus-visible {
   --univer-tw-ring-color: var(--univer-primary-100);
 }
 
+.focus-visible\:univer-ring-primary-500:focus-visible {
+  --univer-tw-ring-color: var(--univer-primary-500);
+}
+
 .focus-visible\:univer-ring-primary-600:focus-visible {
   --univer-tw-ring-color: var(--univer-primary-600);
 }
@@ -1393,6 +1563,12 @@
   background-color: #0000;
 }
 
+@media (prefers-reduced-motion: reduce) {
+  .motion-reduce\:univer-animate-none {
+    animation: none;
+  }
+}
+
 @media (min-width: 640px) {
   .sm\:\!univer-flex {
     display: flex !important;
@@ -1411,6 +1587,14 @@
   right: auto;
 }
 
+.rtl\:univer-ml-0:where([dir="rtl"], [dir="rtl"] *) {
+  margin-left: 0;
+}
+
+.rtl\:univer-mr-auto:where([dir="rtl"], [dir="rtl"] *) {
+  margin-right: auto;
+}
+
 .rtl\:univer-rounded-l:where([dir="rtl"], [dir="rtl"] *) {
   border-top-left-radius: .25rem;
   border-bottom-left-radius: .25rem;
@@ -1566,6 +1750,10 @@
   color: var(--univer-gray-300) !important;
 }
 
+.dark\:hover\:\!univer-text-white:hover:where(.univer-dark, .univer-dark *) {
+  color: var(--univer-white) !important;
+}
+
 .dark\:focus\:\!univer-bg-gray-600:focus:where(.univer-dark, .univer-dark *) {
   background-color: var(--univer-gray-600) !important;
 }
@@ -1660,6 +1848,22 @@
   background-color: var(--univer-gray-100);
 }
 
+.\[\&\>div\>span\>span\]\:univer-h-full > div > span > span, .\[\&\>span\>button\]\:univer-h-full > span > button {
+  height: 100%;
+}
+
+.\[\&\>span\>span\]\:univer-w-full > span > span {
+  width: 100%;
+}
+
+.\[\&\>span\]\:univer-h-full > span {
+  height: 100%;
+}
+
+.\[\&\>span\]\:univer-w-full > span {
+  width: 100%;
+}
+
 .\[\&\>span\]\:univer-truncate > span {
   text-overflow: ellipsis;
   white-space: nowrap;
@@ -1675,6 +1879,16 @@
   font-weight: 500;
 }
 
+.\[\&\>svg\]\:univer-size-4 > svg {
+  width: 1rem;
+  height: 1rem;
+}
+
+.\[\&\>svg\]\:univer-size-8 > svg {
+  width: 2rem;
+  height: 2rem;
+}
+
 .\[\&\>svg\]\:univer-shrink-0 > svg {
   flex-shrink: 0;
 }
@@ -1797,6 +2011,10 @@
   min-height: 2rem !important;
 }
 
+.\[\&_\[data-u-command\]\]\:univer-w-full [data-u-command] {
+  width: 100%;
+}
+
 .\[\&_\[data-u-command\]\]\:\!univer-rounded-md [data-u-command] {
   border-radius: .375rem !important;
 }
@@ -1872,8 +2090,8 @@
   width: 1.75rem;
 }
 
-.\[\&_input\]\:univer-w-\[52px\] input {
-  width: 52px;
+.\[\&_input\]\:univer-w-full input {
+  width: 100%;
 }
 
 .\[\&_input\]\:\!univer-appearance-none input {