@gooddata/sdk-ui-dashboard 11.2.0-alpha.3 → 11.2.0-alpha.5

package/styles/css/kdaDialog.css

@@ -0,0 +1,466 @@
+.gd-kda-dialog {
+  width: 948px;
+  height: 704px;
+  max-width: none !important;
+}
+.gd-kda-dialog .gd-kda-dialog-sections {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.gd-kda-dialog .gd-kda-dialog-sections-header {
+  flex: 0 0 auto;
+}
+.gd-kda-dialog .gd-kda-dialog-sections-content {
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+.gd-kda-dialog .gd-kda-dialog-sections-footer {
+  flex: 0 0 auto;
+}
+.gd-kda-dialog .gd-kda-dialog-sections-divider {
+  height: 0;
+  border-bottom: 1px solid var(--gd-palette-complementary-2);
+  margin: 20px -20px;
+}
+.gd-kda-dialog .gd-kda-dialog-header {
+  display: flex;
+  flex-direction: column;
+  gap: 10px;
+}
+.gd-kda-dialog .gd-kda-dialog-header-title {
+  display: flex;
+  padding: 3px 0;
+  justify-content: flex-start;
+  align-items: center;
+  gap: 10px;
+}
+.gd-kda-dialog .gd-kda-dialog-header-title-text {
+  color: var(--gd-palette-complementary-8);
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 26px;
+  white-space: nowrap;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  margin-right: 30px;
+}
+.gd-kda-dialog .gd-kda-dialog-header-bars {
+  display: flex;
+  align-items: flex-start;
+  gap: 10px;
+  align-self: stretch;
+}
+.gd-kda-dialog .gd-kda-dialog-bar {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  gap: 2px;
+}
+.gd-kda-dialog .gd-kda-dialog-bar-title {
+  color: var(--gd-palette-complementary-6);
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 21px;
+  text-transform: uppercase;
+}
+.gd-kda-dialog .gd-kda-dialog-bar-content {
+  display: flex;
+  gap: 5px;
+}
+.gd-kda-dialog .gd-kda-dialog-bar__metric {
+  max-width: 300px;
+}
+.gd-kda-dialog .gd-kda-dialog-bar__date {
+  max-width: 300px;
+}
+.gd-kda-dialog .gd-kda-dialog-bar__attribute {
+  max-width: 300px;
+}
+.gd-kda-dialog .gd-kda-dialog-footer {
+  display: flex;
+  flex-direction: row;
+}
+.gd-kda-dialog .gd-kda-dialog-footer-content {
+  flex: 1 1 auto;
+  display: flex;
+}
+.gd-kda-dialog .gd-kda-dialog-footer-buttons {
+  flex: 0 0 auto;
+  display: flex;
+}
+.gd-kda-dialog .gd-kda-dialog-content {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: row;
+  gap: 20px;
+}
+.gd-kda-dialog .gd-kda-dialog-content-left-panel {
+  flex: 0 0 250px;
+  max-width: 250px;
+}
+.gd-kda-dialog .gd-kda-dialog-content-divider {
+  width: 0;
+  border-right: 1px solid var(--gd-palette-complementary-2);
+}
+.gd-kda-dialog .gd-kda-dialog-content-right-panel {
+  flex: 1 1 auto;
+  overflow: hidden;
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel {
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel-summary {
+  flex: 0 0 auto;
+  width: 100%;
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel-summary .gd-kda-item-summary.gd-kda-item-summary-focused:focus-visible {
+  outline-offset: -2px;
+  outline: 2px solid -webkit-focus-ring-color;
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel-title {
+  flex: 0 0 auto;
+  margin-top: 20px;
+  display: flex;
+  align-items: center;
+  gap: 5px;
+  color: var(--gd-palette-complementary-7);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 21px;
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel-trend {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  margin-top: 5px;
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel-trend button {
+  width: 50%;
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel-list {
+  flex: 1 1 auto;
+  margin-top: 10px;
+  overflow: hidden;
+  margin-right: -20px;
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel-list .gd-ui-kit-listbox {
+  margin: 0;
+  padding: 0;
+  max-height: 100%;
+  height: 100%;
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel-list .gd-ui-kit-listbox::-webkit-scrollbar {
+  -webkit-appearance: none;
+  appearance: none;
+  width: 10px;
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel-list .gd-ui-kit-listbox::-webkit-scrollbar-thumb {
+  background-color: var(--gd-palette-complementary-7);
+  border: 2px solid transparent;
+  border-radius: 5px;
+  background-clip: padding-box;
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel-list .gd-ui-kit-listbox:hover::-webkit-scrollbar-thumb:hover {
+  border: 0;
+  background-color: var(--gd-palette-complementary-5);
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel-list .gd-ui-kit-listbox li {
+  margin-top: 10px;
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel-list .gd-ui-kit-listbox li:first-child {
+  margin-top: 0;
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel-list .gd-ui-kit-listbox ul:focus-visible .gd-kda-item.gd-kda-item-focused {
+  background-color: var(--gd-palette-complementary-2);
+  outline-offset: -2px;
+  outline: 2px solid -webkit-focus-ring-color;
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel-list-loading {
+  display: flex;
+  gap: 10px;
+  flex-direction: column;
+  margin-right: 20px;
+}
+.gd-kda-dialog .gd-kda-key-drivers-panel-list-empty {
+  display: flex;
+  padding: 40px 10px;
+  gap: 10px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  align-self: stretch;
+  color: var(--gd-palette-complementary-6);
+}
+.gd-kda-dialog .gd-kda-item-summary {
+  display: flex;
+  width: 250px;
+  height: 40px;
+  padding: 10px;
+  align-items: center;
+  justify-content: space-between;
+  gap: 10px;
+  border-radius: 3px;
+  border: 1px solid var(--gd-palette-complementary-3);
+  background: var(--gd-palette-complementary-0);
+  cursor: pointer;
+}
+.gd-kda-dialog .gd-kda-item-summary-title {
+  color: var(--gd-palette-complementary-8);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+}
+.gd-kda-dialog .gd-kda-item-summary:hover {
+  border: 1px solid var(--gd-palette-complementary-3);
+  background: var(--gd-palette-complementary-2);
+}
+.gd-kda-dialog .gd-kda-item-summary.gd-kda-item-summary-selected {
+  border: 1px solid color-mix(in sRGB, var(--gd-palette-primary-base) 30%, transparent);
+  background: color-mix(in sRGB, var(--gd-palette-primary-base) 10%, transparent);
+}
+.gd-kda-dialog .gd-kda-item-summary.gd-kda-item-summary-selected .gd-kda-item-summary-title {
+  color: var(--gd-palette-complementary-8);
+}
+.gd-kda-dialog .gd-kda-item-summary.gd-kda-item-summary-selected:hover {
+  border: 1px solid color-mix(in sRGB, var(--gd-palette-primary-base) 30%, transparent);
+  background: color-mix(in sRGB, var(--gd-palette-primary-base) 10%, transparent);
+}
+.gd-kda-dialog .gd-kda-item-summary.gd-kda-item-summary-selected:hover .gd-kda-item-summary-title {
+  color: var(--gd-palette-primary-base);
+}
+.gd-kda-dialog .gd-kda-item {
+  position: relative;
+  display: flex;
+  width: 250px;
+  padding: 10px;
+  align-items: center;
+  gap: 5px;
+  border-radius: 3px;
+  border: 1px solid var(--gd-palette-complementary-3);
+  background: var(--gd-palette-complementary-0);
+  cursor: pointer;
+}
+.gd-kda-dialog .gd-kda-item-text {
+  flex: 1 1 auto;
+  color: var(--gd-palette-complementary-8);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+}
+.gd-kda-dialog .gd-kda-item-value {
+  flex: 0 0 auto;
+  color: var(--gd-palette-complementary-8);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 20px;
+  text-align: right;
+}
+.gd-kda-dialog .gd-kda-item-progress {
+  position: absolute;
+  left: 0;
+  right: 0;
+  bottom: 0;
+  height: 3px;
+}
+.gd-kda-dialog .gd-kda-item-progress::after {
+  content: "";
+  position: absolute;
+  left: 0;
+  top: 0;
+  bottom: 0;
+  width: var(--kda-item-width);
+  background: var(--gd-palette-primary-base);
+}
+.gd-kda-dialog .gd-kda-item.gd-kda-item-selected {
+  background: color-mix(in sRGB, var(--gd-palette-primary-base) 10%, transparent);
+  border: 1px solid color-mix(in sRGB, var(--gd-palette-primary-base) 30%, transparent);
+}
+.gd-kda-dialog .gd-kda-item.gd-kda-item-selected .gd-kda-item-text {
+  color: var(--gd-palette-complementary-8);
+}
+.gd-kda-dialog .gd-kda-item.gd-kda-item-selected .gd-kda-item-value {
+  color: var(--gd-palette-complementary-8);
+}
+.gd-kda-dialog .gd-kda-item:hover {
+  background-color: var(--gd-palette-complementary-2);
+}
+.gd-kda-dialog .gd-kda-item:hover .gd-kda-item-text {
+  color: var(--gd-palette-complementary-8);
+}
+.gd-kda-dialog .gd-kda-item:hover .gd-kda-item-value {
+  color: var(--gd-palette-complementary-8);
+}
+.gd-kda-dialog .gd-kda-item.gd-kda-item-selected:hover .gd-kda-item-text {
+  color: var(--gd-palette-primary-base);
+}
+.gd-kda-dialog .gd-kda-item.gd-kda-item-selected:hover .gd-kda-item-value {
+  color: var(--gd-palette-primary-base);
+}
+.gd-kda-dialog .gd-kda-key-drivers-overview {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 20px;
+  flex: 1 0 0;
+  align-self: stretch;
+  height: 100%;
+}
+.gd-kda-dialog .gd-kda-key-drivers-overview-title {
+  color: var(--gd-palette-complementary-8);
+  text-align: left;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 26px;
+}
+.gd-kda-dialog .gd-kda-key-drivers-overview-headline {
+  display: flex;
+}
+.gd-kda-dialog .gd-kda-key-drivers-overview-drivers {
+  display: flex;
+  width: 100%;
+  height: 100%;
+  overflow: hidden;
+}
+.gd-kda-dialog .gd-kda-key-drivers-detail {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: 20px;
+  flex: 1 0 0;
+  align-self: stretch;
+  height: 100%;
+}
+.gd-kda-dialog .gd-kda-key-drivers-detail-title {
+  color: var(--gd-palette-complementary-8);
+  text-align: left;
+  font-size: 20px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 26px;
+}
+.gd-kda-dialog .gd-kda-key-drivers-detail-description {
+  color: var(--gd-palette-complementary-7);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 23px;
+}
+.gd-kda-dialog .gd-kda-key-drivers-detail-visualisation {
+  width: 100%;
+  display: flex;
+  flex: 1 1 auto;
+}
+.gd-kda-dialog .gd-kda-key-drivers-detail-info {
+  color: var(--gd-palette-complementary-7);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 17px;
+}
+.gd-kda-dialog .gd-kda-key-driver-headline {
+  gap: 20px;
+  display: flex;
+  align-items: flex-start;
+  align-self: stretch;
+}
+.gd-kda-dialog .gd-kda-headline-date, .gd-kda-dialog .gd-kda-headline-diff {
+  color: var(--gd-palette-complementary-8);
+  font-size: 12px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 20px;
+  display: flex;
+  align-items: center;
+  flex-direction: row;
+  gap: 5px;
+}
+.gd-kda-dialog .gd-kda-key-drivers-summary {
+  gap: 10px;
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  height: 100%;
+  width: 100%;
+  flex: 1 1 auto;
+}
+.gd-kda-dialog .gd-kda-key-drivers-summary-title {
+  flex: 0 0 auto;
+  color: var(--gd-palette-complementary-8);
+  font-size: 17px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: 23px;
+}
+.gd-kda-dialog .gd-kda-key-drivers-summary-info {
+  flex: 0 0 auto;
+  display: flex;
+  padding: 10px;
+  align-items: center;
+  gap: 20px;
+  align-self: stretch;
+  justify-content: space-between;
+  border-radius: 3px;
+  background: color-mix(in sRGB, var(--gd-palette-complementary-5) 10%, transparent);
+}
+.gd-kda-dialog .gd-kda-key-drivers-summary-info-text {
+  color: var(--gd-palette-complementary-7);
+  font-size: 14px;
+  font-style: normal;
+  font-weight: 400;
+  line-height: 23px;
+}
+.gd-kda-dialog .gd-kda-key-drivers-summary-list {
+  flex: 1 1 auto;
+  width: 100%;
+  overflow: hidden;
+}
+.gd-kda-dialog .gd-kda-key-drivers-summary-list .gd-ui-kit-async-table__header:focus-visible {
+  outline-offset: -2px;
+  outline: 2px solid -webkit-focus-ring-color;
+}
+.gd-kda-dialog .gd-kda-attributes-dropdown {
+  display: inline-flex;
+}
+
+.gd-kda-dialog-bar__date-select {
+  margin-top: -10px;
+  margin-bottom: -10px;
+  margin-left: -10px;
+  width: calc(100% + 20px);
+}
+
+.gd-kda-attributes-dropdown__header {
+  color: var(--gd-palette-complementary-6);
+  background: var(--gd-palette-complementary-2);
+  display: flex;
+  padding: 10px;
+  align-items: flex-start;
+  align-self: stretch;
+  font-size: 11px;
+  font-style: normal;
+  font-weight: 700;
+  line-height: normal;
+  text-transform: uppercase;
+}
+
+.gd-kda-attributes-dropdown__no-search {
+  display: flex;
+  margin-top: 6px;
+}
+
+/*# sourceMappingURL=kdaDialog.css.map */

package/styles/css/kdaDialog.css.map

@@ -0,0 +1 @@
+{"version":3,"sourceRoot":"","sources":["../scss/kdaDialog.scss"],"names":[],"mappings":"AAGA;EACI;EACA;EAEA;;AAGA;EACI;EACA;EACA;EACA;;AAEA;EACI;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAKR;EACI;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;;AAKR;EACI;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;AAKR;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;EACA;;AAKR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;;AAEA;EACI;EACA;;AAIR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;;AAIR;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;;AAGJ;EACI;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;;AAIR;EACI;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAMZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAIA;EACI;EACA;EACA;EACA;EACA;;AAIJ;EACI;EACA;;AAGJ;EACI;EACA;;AAEA;EACI;;AAIR;EACI;EACA;;AAEA;EACI;;AAMZ;EACI;EACA;EACA;EACA;EACA;EACA;EAEA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;;AAEA;EACI;;AAGJ;EACI;;AAIR;EACI;;AAEA;EACI;;AAGJ;EACI;;AAKJ;EACI;;AAGJ;EACI;;AAMZ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;;AAGJ;EACI;EACA;EACA;EACA;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;;AAKR;EACI;EACA;EACA;EACA;;AAMA;EAEI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAKR;EACI;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;EACA;;AAGJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACI;EACA;EACA;EACA;EACA;;AAIR;EACI;EACA;EACA;;AAEA;EACI;EACA;;AAMZ;EACI;;;AAKR;EACI;EACA;EACA;EACA;;;AAIJ;EACI;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;;AAIJ;EACI;EACA","file":"kdaDialog.css"}