react-autoql 7.2.1-alpha.9 → 7.2.2-alpha.4

package/dist/autoql.esm.css

@@ -708,7 +708,8 @@ span.react-autoql-icon {
     .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col {
       text-align: center !important;
       border-color: transparent;
-      background-color: var(--react-autoql-background-color-secondary); }
+      background-color: var(--react-autoql-background-color-secondary);
+      min-height: 35px; }
       .react-autoql-table-container .react-autoql-table.tabulator .tabulator-header .tabulator-col .tabulator-col-title {
         padding-left: 12px !important;
         padding-right: 15px !important; }
@@ -1769,7 +1770,7 @@ g.legendOrdinal .legendTitle tspan {
 .react-autoql-modal-body {
   display: flex;
   flex-direction: column;
-  padding: 20px 10px;
+  padding: 10px 20px;
   flex: 1; }
   .react-autoql-modal-body h3 {
     color: var(--react-autoql-text-color-primary); }
@@ -2425,6 +2426,8 @@ g.legendOrdinal .legendTitle tspan {
 
 .react-autoql-notification-message-input {
   width: 100%; }
+  .react-autoql-notification-message-input textarea {
+    width: 100% !important; }
 
 .react-autoql-notification-list-item:nth-of-type(1) {
   animation-delay: 0s; }
@@ -2460,6 +2463,7 @@ g.legendOrdinal .legendTitle tspan {
   background-color: var(--react-autoql-background-color-primary);
   color: var(--react-autoql-text-color-primary);
   padding-top: 20px;
+  padding-bottom: 100px;
   height: 100%; }
   .react-autoql-notification-settings .empty-list-message {
     color: var(--react-autoql-text-color-primary);
@@ -3715,16 +3719,43 @@ g.legendOrdinal .legendTitle tspan {
   width: 100px;
   margin-right: 10px; }
 
-.react-autoql-drawer .react-autoql-header-center-container {
-  position: relative;
-  color: var(--react-autoql-text-color-accent);
-  line-height: 60px;
-  font-size: 18px;
-  letter-spacing: 0.05em;
-  font-weight: 600;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap; }
+@media (max-width: 479px) {
+  .react-autoql-drawer .react-autoql-header-center-container {
+    width: 100vw;
+    position: relative;
+    color: var(--react-autoql-text-color-accent);
+    line-height: 55px;
+    font-size: 18px;
+    letter-spacing: 0.05em;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    display: flex;
+    align-items: center; }
+  .react-autoql-select-popup-container .react-autoql-select-popup li {
+    display: flex;
+    font-size: 20px;
+    justify-content: center;
+    min-height: 60px;
+    align-items: center; } }
+
+.react-autoql-select-popup-container .react-autoql-select-popup li {
+  display: flex;
+  justify-content: center;
+  align-items: center; }
+
+@media (min-width: 480px) {
+  .react-autoql-drawer .react-autoql-header-center-container {
+    position: relative;
+    color: var(--react-autoql-text-color-accent);
+    line-height: 60px;
+    font-size: 18px;
+    letter-spacing: 0.05em;
+    font-weight: 600;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap; } }
 
 .react-autoql-drawer .header-title {
   animation: fadeIn 0.3s; }
@@ -3849,15 +3880,15 @@ g.legendOrdinal .legendTitle tspan {
 .react-autoql-drawer .drawer-content-wrapper {
   background: transparent; }
 
-.react-autoql-drawer.drawer-right .drawer-content-wrapper,
-.react-autoql-drawer.drawer-left .drawer-content-wrapper {
-  max-width: calc(100vw - 45px) !important;
-  min-width: 400px !important; }
-
-.react-autoql-drawer.drawer-top .drawer-content-wrapper,
-.react-autoql-drawer.drawer-bottom .drawer-content-wrapper {
-  max-height: calc(100vh - 45px) !important;
-  min-height: 400px !important; }
+@media (min-width: 1281px) {
+  .react-autoql-drawer.drawer-right .drawer-content-wrapper,
+  .react-autoql-drawer.drawer-left .drawer-content-wrapper {
+    max-width: calc(100vw - 45px) !important;
+    min-width: 400px !important; }
+  .react-autoql-drawer.drawer-top .drawer-content-wrapper,
+  .react-autoql-drawer.drawer-bottom .drawer-content-wrapper {
+    max-height: calc(100vh - 45px) !important;
+    min-height: 400px !important; } }
 
 .react-autoql-drawer-resize-handle {
   position: absolute;
@@ -4074,6 +4105,9 @@ g.legendOrdinal .legendTitle tspan {
       box-shadow: inset 0px -17px 8px -10px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15)); }
 
 /* Individual Tabs */
+.react-autoql-notifications.tab.active .react-autoql-notifications-badge-dot {
+  border: 1px solid var(--react-autoql-background-color-primary); }
+
 .page-switcher-container .tab {
   display: flex;
   justify-content: center;