@gooddata/sdk-ui-kit 11.39.0-alpha.2 → 11.39.0-alpha.4

package/styles/css/main.css

@@ -3319,6 +3319,365 @@
   line-height: 23px;
 }
 
+.gd-ui-kit-section-heading {
+  display: flex;
+  align-items: center;
+  gap: var(--gd-spacing-15px);
+}
+.gd-ui-kit-section-heading__label {
+  font-size: 11px;
+  line-height: 23px;
+  font-weight: 700;
+  text-transform: uppercase;
+  color: var(--gd-palette-complementary-6);
+  flex-shrink: 0;
+}
+.gd-ui-kit-section-heading__rule {
+  flex: 1 1 auto;
+  height: 1px;
+  background-color: var(--gd-palette-complementary-3);
+}
+.gd-ui-kit-section-heading__action {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+}
+
+.gd-ui-kit-dialog-shell {
+  display: flex;
+  flex-direction: column;
+  padding: var(--gd-spacing-20px);
+  background-color: var(--gd-palette-complementary-0);
+  border-radius: var(--gd-modal-borderRadius);
+  box-shadow: 0 2px 8px var(--gd-shadow-color);
+}
+
+.gd-ui-kit-dialog-header {
+  display: flex;
+  align-items: center;
+  gap: var(--gd-spacing-15px);
+  margin-bottom: var(--gd-spacing-20px);
+}
+.gd-ui-kit-dialog-header__leading {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+}
+.gd-ui-kit-dialog-header__title {
+  flex: 1 1 auto;
+  min-width: 0;
+  margin: 0;
+  font-weight: 700;
+  color: var(--gd-palette-complementary-8);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gd-ui-kit-dialog-header__title--size-default {
+  font-size: 18px;
+  line-height: 26px;
+}
+.gd-ui-kit-dialog-header__title--size-large {
+  font-size: 20px;
+  line-height: 26px;
+}
+
+.gd-ui-kit-dialog-footer {
+  display: flex;
+  justify-content: flex-end;
+  gap: var(--gd-spacing-10px);
+}
+.gd-ui-kit-dialog-footer--divider {
+  margin-top: var(--gd-spacing-15px);
+  padding-top: var(--gd-spacing-15px);
+  border-top: 1px solid var(--gd-palette-complementary-3);
+}
+
+.gd-ui-kit-confirm-dialog {
+  display: flex;
+  flex-direction: column;
+}
+.gd-ui-kit-confirm-dialog__body {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--gd-palette-complementary-7);
+  margin-bottom: var(--gd-spacing-20px);
+}
+
+.gd-ui-kit-text-input {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gd-spacing-5px);
+}
+.gd-ui-kit-text-input__label {
+  font-size: 14px;
+  line-height: 21px;
+  color: var(--gd-palette-complementary-7);
+}
+.gd-ui-kit-text-input__field {
+  display: flex;
+  align-items: center;
+  height: 32px;
+  padding: 0 var(--gd-spacing-7px);
+  border: 1px solid var(--gd-palette-complementary-4);
+  border-radius: 3px;
+  background-color: var(--gd-palette-complementary-0);
+  box-shadow: inset 0 1px 2px var(--gd-shadow-color);
+}
+.gd-ui-kit-text-input__field:focus-within {
+  border-color: var(--gd-palette-primary-base);
+}
+.gd-ui-kit-text-input__field--disabled {
+  background-color: var(--gd-palette-complementary-2);
+  cursor: not-allowed;
+}
+.gd-ui-kit-text-input__icon-before {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-right: var(--gd-spacing-5px);
+}
+.gd-ui-kit-text-input__icon-after {
+  display: inline-flex;
+  align-items: center;
+  flex-shrink: 0;
+  margin-left: var(--gd-spacing-5px);
+}
+.gd-ui-kit-text-input__input {
+  flex: 1 1 auto;
+  min-width: 0;
+  height: 100%;
+  padding: 0;
+  border: none;
+  background: transparent;
+  font-family: inherit;
+  font-size: 14px;
+  color: var(--gd-palette-complementary-8);
+  outline: none;
+}
+.gd-ui-kit-text-input__input::placeholder {
+  color: var(--gd-palette-complementary-5);
+}
+.gd-ui-kit-text-input__input:disabled {
+  cursor: not-allowed;
+}
+
+.gd-ui-kit-radio {
+  display: inline-flex;
+  align-items: center;
+  gap: var(--gd-spacing-5px);
+}
+.gd-ui-kit-radio__control {
+  position: relative;
+  display: inline-flex;
+  flex-shrink: 0;
+  width: 14px;
+  height: 14px;
+}
+.gd-ui-kit-radio__input {
+  position: absolute;
+  inset: 0;
+  width: 100%;
+  height: 100%;
+  margin: 0;
+  opacity: 0;
+  cursor: pointer;
+}
+.gd-ui-kit-radio__input:disabled {
+  cursor: not-allowed;
+}
+.gd-ui-kit-radio__circle {
+  width: 14px;
+  height: 14px;
+  border-radius: 50%;
+  border: 1px solid var(--gd-palette-complementary-5);
+  background-color: var(--gd-palette-complementary-0);
+  box-sizing: border-box;
+  pointer-events: none;
+  transition: border-width 60ms ease-out, border-color 60ms ease-out;
+}
+.gd-ui-kit-radio__circle--checked {
+  border-color: var(--gd-palette-primary-base);
+  border-width: 4px;
+}
+.gd-ui-kit-radio__circle--disabled {
+  border-color: var(--gd-palette-complementary-4);
+  background-color: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-radio__input:focus-visible + .gd-ui-kit-radio__circle {
+  box-shadow: 0 0 0 2px var(--gd-palette-primary-focus);
+}
+.gd-ui-kit-radio__label {
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--gd-palette-complementary-8);
+  cursor: pointer;
+}
+
+.gd-ui-kit-radio-row {
+  display: flex;
+  align-items: center;
+  gap: var(--gd-spacing-10px);
+  width: 100%;
+  min-height: 50px;
+  padding: var(--gd-spacing-5px) 0;
+  box-sizing: border-box;
+}
+.gd-ui-kit-radio-row__text {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  line-height: 20px;
+}
+.gd-ui-kit-radio-row__title {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--gd-palette-complementary-8);
+  cursor: pointer;
+}
+.gd-ui-kit-radio-row--disabled .gd-ui-kit-radio-row__title {
+  cursor: not-allowed;
+}
+.gd-ui-kit-radio-row__description {
+  font-size: 14px;
+  color: var(--gd-palette-complementary-6);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gd-ui-kit-radio-row__trailing {
+  flex-shrink: 0;
+  display: inline-flex;
+  align-items: center;
+}
+
+.gd-ui-kit-avatar {
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  flex-shrink: 0;
+  border-radius: 50%;
+  width: var(--gd-avatar-size);
+  height: var(--gd-avatar-size);
+  background-color: var(--gd-avatar-background-color);
+}
+.gd-ui-kit-avatar--background-primary {
+  --gd-avatar-background-color: var(--gd-palette-primary-base);
+}
+.gd-ui-kit-avatar--background-success {
+  --gd-avatar-background-color: var(--gd-palette-success-base);
+}
+.gd-ui-kit-avatar--background-warning {
+  --gd-avatar-background-color: var(--gd-palette-warning-base);
+}
+.gd-ui-kit-avatar--background-error {
+  --gd-avatar-background-color: var(--gd-palette-error-base);
+}
+.gd-ui-kit-avatar--background-complementary-0 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-0);
+}
+.gd-ui-kit-avatar--background-complementary-1 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-1);
+}
+.gd-ui-kit-avatar--background-complementary-2 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-2);
+}
+.gd-ui-kit-avatar--background-complementary-3 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-3);
+}
+.gd-ui-kit-avatar--background-complementary-4 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-4);
+}
+.gd-ui-kit-avatar--background-complementary-5 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-5);
+}
+.gd-ui-kit-avatar--background-complementary-6 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-6);
+}
+.gd-ui-kit-avatar--background-complementary-7 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-7);
+}
+.gd-ui-kit-avatar--background-complementary-8 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-8);
+}
+.gd-ui-kit-avatar--background-complementary-9 {
+  --gd-avatar-background-color: var(--gd-palette-complementary-9);
+}
+
+.gd-ui-kit-grantee-row {
+  display: flex;
+  align-items: center;
+  gap: var(--gd-spacing-10px);
+  width: 100%;
+  min-height: 50px;
+  padding: var(--gd-spacing-5px) 0;
+  box-sizing: border-box;
+}
+.gd-ui-kit-grantee-row__text {
+  flex: 1 1 auto;
+  min-width: 0;
+  display: flex;
+  flex-direction: column;
+  line-height: 20px;
+}
+.gd-ui-kit-grantee-row__name {
+  font-size: 14px;
+  font-weight: 700;
+  color: var(--gd-palette-complementary-8);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+.gd-ui-kit-grantee-row__email {
+  font-size: 14px;
+  color: var(--gd-palette-complementary-6);
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+}
+
+.gd-ui-kit-object-share-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gd-spacing-10px);
+}
+.gd-ui-kit-object-share-dialog__grantees {
+  display: flex;
+  flex-direction: column;
+}
+
+.gd-ui-kit-add-grantee-dialog {
+  display: flex;
+  flex-direction: column;
+  gap: var(--gd-spacing-10px);
+  padding-bottom: var(--gd-spacing-5px);
+}
+.gd-ui-kit-add-grantee-dialog__preview {
+  display: flex;
+  align-items: center;
+  min-height: 50px;
+}
+.gd-ui-kit-add-grantee-dialog__empty-state {
+  flex: 1 1 auto;
+  text-align: center;
+  font-size: 14px;
+  line-height: 20px;
+  color: var(--gd-palette-complementary-6);
+}
+
+.gd-ui-kit-general-access-radio {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
+  box-sizing: border-box;
+}
+
+[class^=gd-ui-kit-],
+[class*=" gd-ui-kit-"] {
+  font-family: var(--gd-font-family);
+}
+
 .sr-only {
   position: absolute;
   width: 1px;
@@ -13511,16 +13870,14 @@ input[type=search]::-webkit-search-cancel-button {
   cursor: pointer;
 }
 .gd-filter-group-item .gd-filter-group-item-chevron {
-  transition: transform 0.8s ease;
   padding-right: 4px;
   color: var(--gd-palette-complementary-6, #94a1ad);
 }
 .gd-filter-group-item:not(.error, .gd-is-disabled):hover, .gd-filter-group-item.gd-is-active {
   background-color: var(--gd-palette-complementary-2, #ebeff4);
 }
-.gd-filter-group-item:not(.error, .gd-is-disabled):hover::before, .gd-filter-group-item.gd-is-active::before {
-  transform: translateX(0) scaleX(1);
-  opacity: 1;
+.gd-filter-group-item.gd-is-active:not(.gd-is-disabled):hover {
+  background-color: var(--gd-palette-primary-dimmed, #e8f7fc);
 }
 .gd-filter-group-item::before {
   content: "";
@@ -13530,23 +13887,14 @@ input[type=search]::-webkit-search-cancel-button {
   width: 4px;
   height: 100%;
   background-color: var(--gd-palette-primary-base, #14b2e2);
-  transform: translateX(-2px) scaleX(0);
   opacity: 0;
-  transition: transform 0.2s ease, opacity 0.2s ease;
-}
-.gd-filter-group-item:not(.error, .gd-is-disabled):hover .gd-filter-group-item-chevron, .gd-filter-group-item.gd-is-active .gd-filter-group-item-chevron {
-  transform: translateX(4px);
 }
-.gd-filter-group-item.gd-is-active:not(.error, .gd-is-disabled):hover {
-  background-color: var(--gd-palette-primary-dimmed, #e8f7fc);
-}
-.gd-filter-group-item.gd-is-active:not(.error, .gd-is-disabled):hover::before {
-  transform: translateX(-2px) scaleX(0);
-  opacity: 0;
+.gd-filter-group-item.gd-is-active::before {
+  opacity: 1;
 }
-.gd-filter-group-item.gd-is-active:not(.error, .gd-is-disabled):hover .gd-filter-group-item-chevron {
-  transform: translateX(0);
-  animation: none;
+.gd-filter-group-item:not(.error, .gd-is-active, .gd-is-disabled):hover::before {
+  background-color: var(--gd-palette-complementary-5-t40, rgba(176, 190, 202, 0.6));
+  opacity: 1;
 }
 .gd-filter-group-item.error:not(.gd-is-active) {
   background-color: var(--gd-palette-error-dimmed, #fcedec);
@@ -13554,6 +13902,10 @@ input[type=search]::-webkit-search-cancel-button {
 .gd-filter-group-item.error:not(.gd-is-active) .gd-filter-group-item-icon {
   color: var(--gd-palette-error-base, #e54d42);
 }
+.gd-filter-group-item.error:not(.gd-is-active):not(.gd-is-disabled):hover::before {
+  background-color: var(--gd-palette-error-base-t85, rgba(229, 77, 66, 0.15));
+  opacity: 1;
+}
 .gd-filter-group-item.error.gd-is-active .gd-filter-group-item-icon {
   color: #94a1ad;
 }