@solidxai/core-ui 0.1.9-beta.7 → 0.1.9

package/dist/resources/globals.css

@@ -196,21 +196,86 @@ a {
   color: white;
 }
 
-.react-datepicker {
+.solid-react-datepicker-calendar {
   width: auto;
   min-width: 240px;
+  border: 1px solid color-mix(in srgb, var(--border) 92%, transparent);
+  border-radius: 12px;
+  background: var(--card);
+  color: var(--foreground);
+  box-shadow: 0 18px 48px rgba(15, 23, 42, 0.16);
+  overflow: hidden;
 }
 
-.react-datepicker__month-container {
+.solid-react-datepicker-calendar .react-datepicker__month-container {
   float: left;
   width: auto;
 }
 
-.react-datepicker__time-container {
-  min-width: 160px;
-  border-left: 1px solid rgba(15, 23, 42, 0.1);
+.solid-react-datepicker-calendar .react-datepicker__header {
+  background: color-mix(in srgb, var(--card) 92%, white 8%);
+  border-bottom: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+}
+
+.solid-react-datepicker-calendar .react-datepicker__current-month,
+.solid-react-datepicker-calendar .react-datepicker-time__header,
+.solid-react-datepicker-calendar .react-datepicker-year-header {
+  color: var(--foreground);
+}
+
+.solid-react-datepicker-calendar .react-datepicker__time-container {
+  min-width: 112px;
+  width: 112px;
+  border-left: 1px solid color-mix(in srgb, var(--border) 88%, transparent);
+}
+
+.solid-react-datepicker-calendar .react-datepicker__time-container .react-datepicker__time,
+.solid-react-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box,
+.solid-react-datepicker-calendar .react-datepicker__header--time {
+  width: 100%;
+}
+
+.solid-react-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box ul.react-datepicker__time-list {
+  scrollbar-width: thin;
+  scrollbar-color: color-mix(in srgb, var(--border) 80%, transparent) transparent;
+}
+
+.solid-react-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item {
+  min-height: 34px;
+  height: auto;
+  padding: 7px 10px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--foreground);
+}
+
+.solid-react-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item:hover {
+  background: var(--accent);
+}
+
+.solid-react-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected,
+.solid-react-datepicker-calendar .react-datepicker__time-container .react-datepicker__time-box ul.react-datepicker__time-list li.react-datepicker__time-list-item--selected:hover {
+  background: color-mix(in srgb, var(--primary) 16%, var(--card));
+  color: var(--foreground);
+  font-weight: 600;
 }
 
+.solid-react-datepicker-calendar.react-datepicker--time-only {
+  min-width: 0;
+}
+
+.solid-react-datepicker-calendar.react-datepicker--time-only .react-datepicker__time-container {
+  width: 100%;
+  min-width: 0;
+  border-left: 0;
+}
+
+.solid-react-datepicker-calendar.react-datepicker--time-only .react-datepicker__header--time {
+  padding-inline: 12px;
+}
+
+.solid-react-datepicker-popper.react-datepicker-popper,
 .react-datepicker-popper {
   z-index: 10000 !important;
 }
@@ -220,6 +285,11 @@ a {
   z-index: 10000;
 }
 
+#solid-datepicker-portal,
+#solid-datepicker-portal * {
+  pointer-events: auto;
+}
+
 /* Avatar */
 .avatar {
   display: inline-block;
@@ -1812,7 +1882,7 @@ li.header-li-px {
 }
 
 .solid-form-wrapper .solid-form-content {
-  height: calc(100vh - 170px);
+  /* height: calc(100vh - 170px); */
   /* calc(100dvh - 128px) */
   /* height: calc(100vh - 145px); */
   /* height: calc(100vh - 111px); */
@@ -1824,8 +1894,23 @@ li.header-li-px {
   scrollbar-gutter: stable;
 }
 
-.solid-create-mode-form-content {
-  height: calc(100vh - 162px) !important;
+
+.solid-form-wrapper .solid-form-content.solid-form-view,
+  .solid-form-content.solid-edit-mode-form-content{
+  height: calc(100vh - 168px) !important;
+}
+
+.solid-form-wrapper .solid-form-content.solid-form-edit,
+.solid-form-content.solid-create-mode-form-content{
+  height: calc(100vh - 140px) !important;
+}
+
+.solid-inline-relation-dialog .solid-form-content,
+.solid-inline-relation-dialog .solid-create-mode-form-content {
+  height: auto !important;
+  min-height: 0;
+  max-height: none !important;
+  overflow: visible !important;
 }
 
 .chatter-collapse-btn {
@@ -2012,7 +2097,7 @@ li.header-li-px {
   border-radius: 8px;
   border: 1px solid var(--solid-file-wrapper);
   padding: 10px;
-  margin-top: 10px;
+  margin: 10px;
 }
 
 .solid-file-vieww-wrapper {
@@ -2078,7 +2163,7 @@ li.header-li-px {
   pointer-events: none;
 }
 
-.arrow-stepper-container > * {
+.arrow-stepper-container>* {
   pointer-events: auto;
 }
 
@@ -2754,7 +2839,7 @@ li.header-li-px {
 }
 
 .solid-custom-filter-wrapper {
-  z-index: 85;
+  z-index: 58;
 }
 
 .custom-filter-button {
@@ -2829,6 +2914,37 @@ li.header-li-px {
   color: inherit;
 }
 
+.solid-chip-open-button {
+  border: 0;
+  background: transparent;
+  padding: 0;
+  font: inherit;
+  color: inherit;
+  display: inline-flex;
+  align-items: center;
+  cursor: pointer;
+}
+
+.solid-chip-open-icon {
+  width: 18px;
+  height: 18px;
+  border-radius: 5px;
+  border: 1px solid color-mix(in srgb, currentColor 26%, transparent);
+  background: color-mix(in srgb, currentColor 10%, transparent);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex: 0 0 auto;
+}
+
+.solid-chip-open-label {
+  min-width: 0;
+  flex: 1 1 auto;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}
+
 .solid-chip-tone-saved {
   background: color-mix(in srgb, hsl(262 83% 58%) 12%, transparent);
   border-color: color-mix(in srgb, hsl(262 83% 58%) 26%, transparent);
@@ -2993,7 +3109,7 @@ li.header-li-px {
 .solid-global-search-element li {}
 
 .solid-global-search-input-item {
-  flex: 1 1 140px;
+  /* flex: 1 1 140px; */
   min-width: 140px;
 }
 
@@ -3312,6 +3428,62 @@ li.header-li-px {
   color: color-mix(in srgb, var(--foreground) 72%, transparent);
 }
 
+.solid-generate-code-popup__command-grid {
+  display: flex;
+  flex-direction: column;
+  gap: 12px;
+}
+
+.solid-generate-code-popup__command-item {
+  display: flex;
+  align-items: flex-start;
+  justify-content: space-between;
+  gap: 14px;
+  padding: 14px;
+  border: 1px solid color-mix(in srgb, var(--border) 86%, transparent);
+  border-radius: 14px;
+  background: color-mix(in srgb, var(--card) 98%, var(--background) 2%);
+}
+
+.solid-generate-code-popup__command-meta {
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+}
+
+.solid-generate-code-popup__command-label {
+  font-size: 11px;
+  font-weight: 700;
+  letter-spacing: 0.08em;
+  text-transform: uppercase;
+  color: color-mix(in srgb, var(--foreground) 72%, transparent);
+}
+
+.solid-generate-code-popup__command-code {
+  margin: 0;
+  padding: 12px 14px;
+  border-radius: 12px;
+  background: #101828;
+  color: #f8fafc;
+  font-size: 13px;
+  line-height: 1.6;
+  font-family: "SFMono-Regular", SFMono-Regular, Consolas, "Liberation Mono", Menlo, monospace;
+  overflow-x: auto;
+  white-space: pre-wrap;
+  word-break: break-word;
+}
+
+.solid-generate-code-popup__command-help {
+  font-size: 13px;
+  line-height: 1.6;
+  color: color-mix(in srgb, var(--foreground) 70%, transparent);
+}
+
+.solid-generate-code-popup__command-copy {
+  flex-shrink: 0;
+}
+
 .solid-filter-dialog-shell-grouping .solid-filter-dialog-body {
   padding: 10px 12px 12px;
 }
@@ -3940,7 +4112,7 @@ li.header-li-px {
   color: color-mix(in srgb, var(--foreground) 92%, transparent);
 }
 
-.solid-search-overlay-option.p-button {
+.solid-search-overlay-option {
   justify-content: flex-start;
   text-align: left;
   border-radius: 6px;
@@ -3954,26 +4126,28 @@ li.header-li-px {
   box-shadow: none !important;
 }
 
-.solid-search-overlay-option.p-button:hover {
+.solid-search-overlay-option:hover {
   background: color-mix(in srgb, var(--accent) 60%, transparent);
 }
 
-.solid-search-overlay-option.p-button:focus {
+.solid-search-overlay-option:focus {
   box-shadow: none;
 }
 
-.solid-search-overlay-option-active.p-button {
+.solid-search-overlay-option-active {
   background: color-mix(in srgb, var(--accent) 85%, transparent) !important;
   border: 1px solid var(--primary-color) !important;
   box-shadow: 0 0 0 1px var(--primary-color) !important;
 }
 
-.solid-search-overlay-option-active.p-button .p-button-label {
-  color: #fff !important;
+.solid-search-overlay-option-active .solid-btn-label,
+.solid-search-overlay-option-active .p-button-label,
+.solid-search-overlay-option-active {
+  color: var(--accent-foreground, var(--foreground)) !important;
   font-weight: 600 !important;
 }
 
-.solid-search-overlay-option-stacked.p-button {
+.solid-search-overlay-option-stacked {
   align-items: flex-start;
 }
 
@@ -4308,7 +4482,7 @@ li.header-li-px {
   max-width: min(320px, calc(100vw - 40px));
 }
 
-.solid-form-stepper-overlay > div {
+.solid-form-stepper-overlay>div {
   min-width: inherit;
 }
 
@@ -5997,6 +6171,7 @@ html.dark .solid-empty-listview-secondary-action.solid-btn,
   0% {
     transform: translateX(-110%);
   }
+
   100% {
     transform: translateX(290%);
   }