react-autoql 7.2.2 → 7.2.4-alpha.1

package/dist/autoql.esm.css

@@ -967,28 +967,57 @@ span.react-autoql-icon {
   opacity: 0.2; }
 
 .react-autoql-select {
-  border: 1px solid var(--react-autoql-border-color, rgba(0, 0, 0, 0.1));
-  border-radius: 4px;
-  background: var(--react-autoql-background-color-secondary, white);
-  display: inline-block;
-  font-size: 13px;
-  line-height: 32px;
-  height: 34px;
-  margin: 0 3px;
-  padding: 0 11px;
-  color: var(--react-autoql-accent-color, #26a7df);
-  transition: all 0.2s ease;
+  display: inline-flex;
+  justify-content: space-between;
+  line-height: 36px;
+  height: 38px;
+  transition: color 0.2s ease, border-color 0.2s ease;
+  white-space: nowrap;
+  font-size: inherit;
   cursor: pointer; }
   .react-autoql-select:hover {
-    border-color: var(--react-autoql-accent-color, #26a7df); }
+    color: var(--react-autoql-accent-color, #26a7df); }
+    .react-autoql-select:hover .react-autoql-select-arrow {
+      color: var(--react-autoql-accent-color, #26a7df); }
+  .react-autoql-select:not(.outlined) {
+    font-weight: 600;
+    padding: 0 10px;
+    margin: 0; }
+  .react-autoql-select.outlined {
+    margin: 0 3px;
+    padding: 0px 16px;
+    color: var(--react-autoql-text-color-primary);
+    border: 1px solid var(--react-autoql-border-color);
+    border-radius: 4px;
+    background: var(--react-autoql-background-color-secondary, white); }
+    .react-autoql-select.outlined:hover {
+      color: var(--react-autoql-accent-color);
+      border-color: var(--react-autoql-accent-color); }
+  .react-autoql-select .react-autoql-select-text {
+    display: block;
+    height: 100%; }
+    .react-autoql-select .react-autoql-select-text .react-autoql-select-text-placeholder {
+      color: var(--react-autoql-text-color-placeholder);
+      font-style: italic; }
+  .react-autoql-select .react-autoql-select-arrow {
+    display: flex;
+    align-items: center;
+    padding-left: 8px;
+    font-size: 0.875em;
+    color: var(--react-autoql-text-color-placeholder); }
 
 .react-autoql-select-popup-container {
-  background: var(--react-autoql-background-color-secondary, white);
+  background: var(--react-autoql-background-color-secondary);
   padding: 10px 0;
   max-height: 300px;
   overflow-y: auto; }
+  .react-autoql-select-popup-container .react-autoql-select-option > span {
+    display: flex;
+    flex-direction: row;
+    align-items: center;
+    justify-content: flex-start; }
   .react-autoql-select-popup-container .react-autoql-select-option.active {
-    background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
+    background: var(--react-autoql-hover-color); }
   .react-autoql-select-popup-container .react-autoql-select-popup {
     list-style-type: none;
     width: 100%;
@@ -1002,7 +1031,7 @@ span.react-autoql-icon {
       padding: 0 20px;
       cursor: pointer; }
       .react-autoql-select-popup-container .react-autoql-select-popup li:hover {
-        background: var(--react-autoql-hover-color, rgba(0, 0, 0, 0.04)); }
+        background: var(--react-autoql-hover-color); }
 
 g.legendOrdinal,
 g.legendOrdinal tspan {
@@ -3683,55 +3712,119 @@ g.legendOrdinal .legendTitle tspan {
   outline: none !important; }
   .react-autoql-drawer .react-autoql-notification-list-container {
     height: calc(100% - 60px); }
+  .react-autoql-drawer .data-messenger-header-select {
+    background-color: var(--react-autoql-accent-color) !important;
+    color: var(--react-autoql-text-color-accent) !important;
+    border-color: var(--react-autoql-border-color) !important;
+    border-radius: 2px;
+    border-width: 1px;
+    border-style: solid;
+    font-weight: bold;
+    box-shadow: none;
+    touch-action: manipulation;
+    -webkit-tap-highlight-color: transparent;
+    width: 100%;
+    margin: 0;
+    height: 40px;
+    overflow: hidden;
+    white-space: nowrap;
+    text-overflow: ellipsis;
+    cursor: pointer; }
+    .react-autoql-drawer .data-messenger-header-select .react-autoql-select-arrow {
+      color: var(--react-autoql-text-color-accent); }
+    .react-autoql-drawer .data-messenger-header-select .react-autoql-select-text {
+      flex: 1;
+      display: flex;
+      justify-content: center;
+      align-items: center; }
+      .react-autoql-drawer .data-messenger-header-select .react-autoql-select-text .react-autoql-icon {
+        display: none; }
+    .react-autoql-drawer .data-messenger-header-select .react-autoql-select-text-placeholder {
+      display: flex;
+      align-items: center;
+      justify-content: center;
+      color: var(--react-autoql-text-color-accent);
+      font-size: 20px;
+      position: relative;
+      letter-spacing: 0.05em;
+      font-weight: 600;
+      font-style: normal;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap; }
+      .react-autoql-drawer .data-messenger-header-select .react-autoql-select-text-placeholder .react-autoql-icon {
+        display: none; }
+  .react-autoql-drawer .react-autoql-drawer-content-container {
+    width: 100%;
+    height: 100%;
+    background: var(--react-autoql-background-color-primary);
+    overflow: hidden;
+    border-radius: 4px; }
+  .react-autoql-drawer .chat-header-container {
+    display: flex;
+    justify-content: space-between;
+    width: 100%;
+    height: 60px;
+    background: var(--react-autoql-accent-color);
+    color: var(--react-autoql-text-color-accent);
+    box-shadow: 0 0 12px 1px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
+    flex: 0 0 auto;
+    z-index: 1; }
+  .react-autoql-drawer .react-autoql-header-left-container {
+    display: flex;
+    justify-content: left;
+    width: 100px;
+    margin-left: 10px; }
+  .react-autoql-drawer .react-autoql-header-right-container {
+    display: flex;
+    justify-content: right;
+    width: 100px;
+    margin-right: 10px; }
+  .react-autoql-drawer .react-autoql-header-center-container {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    position: relative;
+    font-weight: 600; }
+
+.data-messenger-header-select-popover {
+  width: 100vw; }
+  .data-messenger-header-select-popover .react-autoql-notifications-button-container {
+    display: flex;
+    margin-right: 10px; }
+  .data-messenger-header-select-popover .react-autoql-select-popup li {
+    display: flex;
+    justify-content: center;
+    height: unset; }
+    .data-messenger-header-select-popover .react-autoql-select-popup li .react-autoql-icon {
+      margin-right: 10px; }
+    .data-messenger-header-select-popover .react-autoql-select-popup li > span > span {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      font-size: 20px;
+      min-height: 60px; }
 
 .react-autoql-drawer.disable-selection {
   -webkit-user-select: none;
      -moz-user-select: none;
           user-select: none; }
 
-.react-autoql-drawer .react-autoql-drawer-content-container {
-  width: 100%;
-  height: 100%;
-  background: var(--react-autoql-background-color-primary);
-  overflow: hidden;
-  border-radius: 4px; }
-
-.react-autoql-drawer .chat-header-container {
-  display: flex;
-  justify-content: space-between;
-  width: 100%;
-  height: 60px;
-  background: var(--react-autoql-accent-color);
-  color: var(--react-autoql-text-color-accent);
-  box-shadow: 0 0 12px 1px var(--react-autoql-box-shadow-color, rgba(0, 0, 0, 0.15));
-  flex: 0 0 auto;
-  z-index: 1; }
-
-.react-autoql-drawer .react-autoql-header-left-container {
-  display: flex;
-  justify-content: left;
-  width: 100px;
-  margin-left: 10px; }
-
-.react-autoql-drawer .react-autoql-header-right-container {
-  display: flex;
-  justify-content: right;
-  width: 100px;
-  margin-right: 10px; }
+@media (max-width: 479px) {
+  .react-autoql-drawer .react-autoql-header-center-container {
+    font-size: 18px;
+    letter-spacing: 0.05em; } }
 
-.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 (min-width: 480px) {
+  .react-autoql-drawer .react-autoql-header-center-container {
+    font-size: 18px;
+    letter-spacing: 0.05em;
+    justify-content: center; } }
 
 .react-autoql-drawer .header-title {
-  animation: fadeIn 0.3s; }
+  width: 100%;
+  animation: fadeIn 0.3s;
+  text-align: center; }
 
 .react-autoql-drawer .react-autoql-drawer-header-btn {
   line-height: 1em;
@@ -3853,15 +3946,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;