@useblu/ocean-core 1.119.0 → 1.124.0

package/ocean.css

@@ -3024,14 +3024,34 @@
 .ods-list .ods-card-list-item:not(:last-of-type) {
   border-bottom: 1px solid #e0e2ee;
 }
-.ods-list .ods-list-action__container .ods-list-action {
+.ods-list .ods-list-action__container .ods-list-action,
+.ods-list .ods-list-action__container .ods-list-settings,
+.ods-list .ods-list-action__container .ods-list-readonly,
+.ods-list .ods-list-settings__container .ods-list-action,
+.ods-list .ods-list-settings__container .ods-list-settings,
+.ods-list .ods-list-settings__container .ods-list-readonly,
+.ods-list .ods-list-readonly__container .ods-list-action,
+.ods-list .ods-list-readonly__container .ods-list-settings,
+.ods-list .ods-list-readonly__container .ods-list-readonly {
   border: 0;
   border-radius: 0;
 }
-.ods-list .ods-list-action__container:last-of-type > .ods-list-action__divider {
+.ods-list .ods-list-action__container:last-of-type > .ods-list-action__divider, .ods-list .ods-list-action__container:last-of-type > .ods-list-readonly__divider, .ods-list .ods-list-action__container:last-of-type > .ods-list-settings__divider,
+.ods-list .ods-list-settings__container:last-of-type > .ods-list-action__divider,
+.ods-list .ods-list-settings__container:last-of-type > .ods-list-readonly__divider,
+.ods-list .ods-list-settings__container:last-of-type > .ods-list-settings__divider,
+.ods-list .ods-list-readonly__container:last-of-type > .ods-list-action__divider,
+.ods-list .ods-list-readonly__container:last-of-type > .ods-list-readonly__divider,
+.ods-list .ods-list-readonly__container:last-of-type > .ods-list-settings__divider {
   border: 0;
 }
-.ods-list .ods-list-action__container:not(:last-of-type) > .ods-list-action--card {
+.ods-list .ods-list-action__container:not(:last-of-type) > .ods-list-action--card, .ods-list .ods-list-action__container:not(:last-of-type) > .ods-list-readonly--card, .ods-list .ods-list-action__container:not(:last-of-type) > .ods-list-settings--card,
+.ods-list .ods-list-settings__container:not(:last-of-type) > .ods-list-action--card,
+.ods-list .ods-list-settings__container:not(:last-of-type) > .ods-list-readonly--card,
+.ods-list .ods-list-settings__container:not(:last-of-type) > .ods-list-settings--card,
+.ods-list .ods-list-readonly__container:not(:last-of-type) > .ods-list-action--card,
+.ods-list .ods-list-readonly__container:not(:last-of-type) > .ods-list-readonly--card,
+.ods-list .ods-list-readonly__container:not(:last-of-type) > .ods-list-settings--card {
   border-bottom: 1px solid #e0e2ee;
 }
 .ods-list .ods-list-expandable--card {
@@ -5175,7 +5195,7 @@
   display: flex;
   flex-direction: row;
   gap: 12px;
-  padding: 16px 12px 16px 16px;
+  padding: 16px 8px 16px 16px;
   transition: 200ms;
   width: 320px;
 }
@@ -5196,7 +5216,7 @@
   width: 100%;
 }
 .ods-card-list-item__content__title {
-  color: #0c0d14;
+  color: #393b47;
   font-family: "Nunito Sans";
   font-size: 16px;
   font-weight: 400;
@@ -5340,24 +5360,19 @@
   position: relative;
 }
 .ods-chips__button {
+  align-items: center;
   background: #f3f5fe;
   border: 0;
   border-radius: 24px;
   color: #0025e0;
   display: flex;
-  font-size: 14px;
-  font-weight: 700;
   gap: 4px;
   height: 32px;
-  padding: 8px 16px;
+  padding: 4px 8px 4px 12px;
 }
-.ods-chips__button:hover, .ods-chips__button:focus {
+.ods-chips__button:hover, .ods-chips__button:focus, .ods-chips__button:active {
   background: #e0e2ee;
 }
-.ods-chips__button:active {
-  background: #0025e0;
-  color: white;
-}
 .ods-chips__button:active .ods-chips__badge > .ods-badge__content {
   background: white;
   color: #0025e0;
@@ -5366,6 +5381,9 @@
   height: 16px;
   width: 16px;
 }
+.ods-chips__button--no-options {
+  padding: 4px 12px;
+}
 .ods-chips__button--disabled {
   background: #f3f5fe;
   pointer-events: none;
@@ -5391,6 +5409,9 @@
   color: #0025e0;
 }
 .ods-chips__label {
+  font-size: 14px;
+  font-weight: 700;
+  line-height: 1.5;
   margin: 0;
 }
 .ods-chips__options {
@@ -5400,10 +5421,30 @@
   box-shadow: 0 8px 16px rgba(12, 13, 20, 0.08);
   display: flex;
   flex-direction: column;
-  padding: 4px 0;
   position: absolute;
   top: 38px;
-  width: auto;
+  width: -webkit-max-content;
+  width: -moz-max-content;
+  width: max-content;
+  z-index: 2;
+}
+@media (max-width: 767.98px) {
+  .ods-chips__options {
+    border-radius: 16px 16px 0 0;
+    bottom: 0;
+    left: 0;
+    max-height: 73.5%;
+    overflow: hidden;
+    padding: 0;
+    position: fixed;
+    right: 0;
+    top: initial;
+    width: 100%;
+    z-index: 1000;
+  }
+}
+.ods-chips__options__select-all {
+  border-bottom: 1px solid #e0e2ee;
 }
 .ods-chips__options--content {
   align-items: flex-start;
@@ -5415,20 +5456,6 @@
   scrollbar-width: none;
   width: 220px;
 }
-.ods-chips__options--content--columns-2 {
-  display: grid;
-  grid-column-gap: 20px;
-  grid-template-columns: repeat(2, 1fr);
-  min-width: 296px;
-  width: auto;
-}
-.ods-chips__options--content--columns-3 {
-  display: grid;
-  grid-column-gap: 20px;
-  grid-template-columns: repeat(3, 1fr);
-  min-width: 436px;
-  width: auto;
-}
 .ods-chips__options::-webkit-scrollbar {
   display: none;
 }
@@ -5441,7 +5468,6 @@
   font-size: 14px;
   font-weight: 400;
   gap: 8px;
-  min-height: 40px;
   padding: 8px 12px;
   text-wrap: nowrap;
   width: 100%;
@@ -5460,22 +5486,45 @@
 .ods-chips__options--footer {
   border-top: 1px solid #e0e2ee;
   display: flex;
-  flex-direction: row;
+  gap: 8px;
   justify-content: space-between;
   padding: 16px 16px 16px 8px;
 }
+.ods-chips__options__header {
+  padding: 16px 16px 8px;
+}
+@media (max-width: 767.98px) {
+  .ods-chips__options__header {
+    padding: 0 16px 8px;
+  }
+}
 
-.ods-chips__options--option-container {
-  min-height: 0;
-  padding: 0;
-  width: 100%;
+.ods-chips__options__responsive-header {
+  display: none;
 }
-.ods-chips__options--option-container .ods-checkbox__root-container {
-  width: 100%;
+@media (max-width: 767.98px) {
+  .ods-chips__options__responsive-header {
+    display: flex;
+    justify-content: flex-end;
+    padding: 8px 8px 4px;
+  }
+  .ods-chips__options__responsive-header button {
+    color: #aaadc0;
+    height: 32px;
+    max-height: 32px;
+    max-width: 32px;
+    width: 32px;
+  }
+  .ods-chips__options__responsive-header:hover button {
+    background: transparent;
+    color: #aaadc0;
+  }
 }
-.ods-chips__options--option-container .ods-checkbox__root {
-  padding: 16px;
-  width: 100%;
+
+@media (max-width: 767.98px) {
+  .ods-chips__options--footer button {
+    width: 100%;
+  }
 }
 
 .ods-unordered-list-item {
@@ -5849,6 +5898,9 @@
   height: -moz-fit-content;
   height: fit-content;
 }
+.ods-card-group__header--without-subtitle {
+  padding-bottom: 0;
+}
 .ods-card-group__action {
   align-items: center;
   background-color: white;
@@ -6075,6 +6127,131 @@
   margin-right: 24px;
 }
 
+.ods-list-readonly {
+  align-items: center;
+  background-color: white;
+  border: 1px solid #ced1e1;
+  border-radius: 8px;
+  box-sizing: border-box;
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  position: relative;
+  text-align: left;
+  width: 100%;
+}
+.ods-list-readonly__container {
+  width: 100%;
+}
+.ods-list-readonly--card {
+  border-color: #ced1e1;
+}
+.ods-list-readonly--text {
+  border: 0;
+  border-radius: 0;
+}
+.ods-list-readonly__divider {
+  border-bottom: 1px solid #e0e2ee;
+  margin: 0 16px;
+}
+.ods-list-readonly__icon {
+  align-items: center;
+  color: #5872f5;
+  display: flex;
+  flex-shrink: 0;
+}
+.ods-list-readonly__icon--inactive {
+  color: #ced1e1;
+}
+.ods-list-readonly__trailing {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: 8px;
+  margin-left: auto;
+}
+.ods-list-readonly__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+.ods-list-readonly__skeleton .ods-skeleton-bar {
+  max-width: 100%;
+}
+.ods-list-readonly--loading {
+  cursor: default;
+  pointer-events: none;
+}
+.ods-list-readonly--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
+.ods-list-settings {
+  align-items: center;
+  background-color: white;
+  border: 1px solid #e0e2ee;
+  border-radius: 8px;
+  box-sizing: border-box;
+  display: flex;
+  gap: 12px;
+  padding: 16px;
+  position: relative;
+  width: 100%;
+}
+.ods-list-settings__container {
+  width: 100%;
+}
+.ods-list-settings--card {
+  border-color: #ced1e1;
+}
+.ods-list-settings--text {
+  border: 0;
+  border-radius: 0;
+}
+.ods-list-settings__divider {
+  border-bottom: 1px solid #e0e2ee;
+  margin: 0 16px;
+}
+.ods-list-settings__icon {
+  align-items: center;
+  color: #5872f5;
+  display: flex;
+  flex-shrink: 0;
+}
+.ods-list-settings__icon--inactive svg {
+  color: #ced1e1;
+}
+.ods-list-settings__action {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  margin-left: auto;
+}
+.ods-list-settings__action > .ods-btn {
+  min-width: -webkit-min-content;
+  min-width: -moz-min-content;
+  min-width: min-content;
+}
+.ods-list-settings__skeleton {
+  display: flex;
+  flex-direction: column;
+  gap: 8px;
+  width: 100%;
+}
+.ods-list-settings__skeleton .ods-skeleton-bar {
+  max-width: 100%;
+}
+.ods-list-settings--loading {
+  cursor: default;
+  pointer-events: none;
+}
+.ods-list-settings--disabled {
+  cursor: not-allowed;
+  opacity: 0.6;
+}
+
 .ods-list-expandable {
   background-color: white;
   display: flex;
@@ -6203,6 +6380,12 @@
   padding-left: 16px;
   width: 100%;
 }
+@media (max-width: 767.98px) {
+  .ods-list-selectable .ods-checkbox__label,
+.ods-list-selectable .ods-radio__label {
+    padding-left: 0;
+  }
+}
 .ods-list-selectable--loading {
   cursor: default;
   display: flex;
@@ -6242,4 +6425,315 @@
   height: 1px;
   margin: 0 16px;
 }
+
+.ods-internal-contextual-hero {
+  background-color: #f3f5fe;
+  border-radius: 8px;
+  display: grid;
+  grid-template-columns: 1fr auto;
+  grid-template-rows: auto auto;
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .ods-internal-contextual-hero {
+    display: flex;
+  }
+}
+.ods-internal-contextual-hero__body {
+  display: contents;
+}
+@media (min-width: 768px) {
+  .ods-internal-contextual-hero__body {
+    display: flex;
+    flex: 1;
+    flex-direction: column;
+  }
+}
+.ods-internal-contextual-hero__content {
+  display: flex;
+  flex: 1;
+  flex-direction: column;
+  gap: 12px;
+  grid-column: 1;
+  grid-row: 1;
+  padding: 16px;
+}
+@media (min-width: 768px) {
+  .ods-internal-contextual-hero__content {
+    padding: 24px 24px 12px 24px;
+  }
+}
+.ods-internal-contextual-hero__header {
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+}
+.ods-internal-contextual-hero__actions {
+  display: flex;
+  gap: 16px;
+}
+.ods-internal-contextual-hero__actions > button {
+  min-width: auto;
+}
+.ods-internal-contextual-hero__image {
+  border-radius: 0 8px 0 0;
+  display: flex;
+  grid-column: 2;
+  grid-row: 1;
+  justify-content: flex-end;
+  width: 82px;
+}
+@media (min-width: 768px) {
+  .ods-internal-contextual-hero__image {
+    width: 220px;
+  }
+}
+.ods-internal-contextual-hero__image > img {
+  aspect-ratio: 1/1;
+  border-radius: 0 8px 0 0;
+  height: 100%;
+  -o-object-fit: cover;
+     object-fit: cover;
+  width: 100%;
+}
+.ods-internal-contextual-hero__image > *:not(img) {
+  border-radius: 0 8px 0 0;
+  box-sizing: border-box;
+  height: 100%;
+  width: 100%;
+}
+@media (min-width: 768px) {
+  .ods-internal-contextual-hero__image > img, .ods-internal-contextual-hero__image > *:not(img) {
+    border-bottom-right-radius: 8px;
+    border-top-right-radius: 8px;
+  }
+}
+@media (min-width: 768px) {
+  .ods-internal-contextual-hero__image > img {
+    width: auto;
+  }
+}
+.ods-internal-contextual-hero__list {
+  display: flex;
+  flex-direction: column;
+  grid-column: 1/-1;
+  grid-row: 2;
+}
+@media (min-width: 768px) {
+  .ods-internal-contextual-hero__list {
+    padding: 8px;
+  }
+}
+.ods-internal-contextual-hero__list > div > button,
+.ods-internal-contextual-hero__list > div > div {
+  background-color: transparent;
+}
+.ods-internal-contextual-hero__list-item {
+  display: flex;
+  gap: 8px;
+  padding: 4px 16px;
+}
+
+.ods-contextual-menu {
+  align-items: flex-start;
+  background-color: white;
+  border: 1px solid #e0e2ee;
+  border-radius: 8px;
+  box-shadow: 0 4px 8px rgba(12, 13, 20, 0.08);
+  display: flex;
+  flex-direction: column;
+  gap: 4px;
+  left: 0;
+  list-style: none;
+  margin: 0;
+  min-width: 264px;
+  padding: 4px;
+  position: absolute;
+  scrollbar-width: none;
+  top: auto;
+  z-index: 1000;
+}
+@media (max-width: 767.98px) {
+  .ods-contextual-menu {
+    border-radius: 0;
+    border-top-left-radius: 16px;
+    border-top-right-radius: 16px;
+    bottom: 0;
+    left: 0;
+    max-height: 0;
+    overflow: hidden;
+    padding: 0 4px 4px 4px;
+    position: fixed;
+    right: 0;
+    transform: none;
+    transition: max-height 150ms linear;
+    z-index: 1000;
+  }
+}
+.ods-contextual-menu--after-open {
+  max-height: 300px;
+  overflow: auto;
+  scrollbar-width: none;
+}
+@media (max-width: 767.98px) {
+  .ods-contextual-menu--after-open {
+    max-height: 73.5%;
+    transition: max-height 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+@media (min-width: 992px) {
+  .ods-contextual-menu--before-close {
+    display: none;
+  }
+}
+@media (max-width: 767.98px) {
+  .ods-contextual-menu--before-close {
+    max-height: 0;
+    transition: max-height 250ms cubic-bezier(0.4, 0, 0.2, 1);
+  }
+}
+.ods-contextual-menu__item {
+  width: 100%;
+}
+
+.ods-contextual-menu__header {
+  background-color: white;
+  display: none;
+  justify-content: flex-end;
+  list-style: none;
+  padding: 8px 4px 0 0;
+  position: -webkit-sticky;
+  position: sticky;
+  top: 0;
+  width: 100%;
+  z-index: 1000;
+}
+@media (max-width: 767.98px) {
+  .ods-contextual-menu__header {
+    display: flex;
+  }
+}
+@media (max-width: 767.98px) {
+  .ods-contextual-menu__header .ods-icon-btn--sm {
+    color: #aaadc0;
+    height: 32px;
+    min-width: 32px;
+    width: 32px;
+  }
+}
+.ods-contextual-menu__header .ods-icon-btn--sm:hover {
+  background: transparent;
+}
+
+.ods-contextual-menu__overlay {
+  display: none;
+}
+@media (max-width: 767.98px) {
+  .ods-contextual-menu__overlay {
+    background: rgba(57, 59, 71, 0.4);
+    bottom: 0;
+    display: block;
+    left: 0;
+    opacity: 0;
+    position: fixed;
+    right: 0;
+    top: 0;
+    transition: opacity 150ms linear;
+    z-index: 999;
+  }
+  .ods-contextual-menu__overlay--after-open {
+    opacity: 1;
+  }
+  .ods-contextual-menu__overlay--before-close {
+    display: none;
+    opacity: 0;
+    pointer-events: none;
+  }
+}
+
+.ods-contextual-menu__item__button {
+  align-items: center;
+  background: white;
+  border: hidden;
+  border-radius: 4px;
+  display: flex;
+  justify-content: space-between;
+  padding: 8px 12px;
+  width: 100%;
+}
+.ods-contextual-menu__item__button__content {
+  align-items: center;
+  display: flex;
+  gap: 8px;
+  justify-content: space-between;
+  width: 100%;
+}
+.ods-contextual-menu__item__button__content > svg {
+  color: #aaadc0;
+}
+.ods-contextual-menu__item__button:hover {
+  background: #f3f5fe;
+  cursor: pointer;
+}
+.ods-contextual-menu__item__button:active {
+  background: #f3f5fe;
+}
+.ods-contextual-menu__item__button:focus {
+  background: #f3f5fe;
+}
+.ods-contextual-menu__item__button--primary .ods-typography__description {
+  color: #0025e0;
+}
+.ods-contextual-menu__item__button--neutral .ods-typography__description {
+  color: #67697a;
+}
+.ods-contextual-menu__item__button--critical .ods-typography__description {
+  color: #f5456e;
+}
+.ods-contextual-menu__item__button--primary-selected, .ods-contextual-menu__item__button--neutral-selected {
+  background-color: #f3f5fe;
+}
+.ods-contextual-menu__item__button--primary-selected .ods-typography__description, .ods-contextual-menu__item__button--neutral-selected .ods-typography__description {
+  color: #0025e0;
+  font-weight: 600;
+}
+.ods-contextual-menu__item__button--critical-selected {
+  background-color: #f3f5fe;
+}
+.ods-contextual-menu__item__button--critical-selected .ods-typography__description {
+  font-weight: 600;
+}
+.ods-contextual-menu__item__button:disabled .ods-typography__description, .ods-contextual-menu__item__button--blocked .ods-typography__description {
+  color: #aaadc0;
+}
+.ods-contextual-menu__item__button:disabled:hover, .ods-contextual-menu__item__button:disabled:active, .ods-contextual-menu__item__button:disabled:focus, .ods-contextual-menu__item__button--blocked:hover, .ods-contextual-menu__item__button--blocked:active, .ods-contextual-menu__item__button--blocked:focus {
+  background: white;
+  cursor: not-allowed;
+}
+.ods-contextual-menu__item__button--with-icon {
+  gap: 8px;
+  justify-content: flex-start;
+}
+
+.ods-contextual-menu__item__button__icon {
+  align-items: center;
+  display: flex;
+  justify-content: center;
+}
+.ods-contextual-menu__item__button__icon--primary svg {
+  fill: #0025e0;
+}
+.ods-contextual-menu__item__button__icon--neutral svg {
+  fill: #67697a;
+}
+.ods-contextual-menu__item__button__icon--critical svg {
+  fill: #f5456e;
+}
+.ods-contextual-menu__item__button__icon--blocked svg, .ods-contextual-menu__item__button__icon--disabled svg {
+  fill: #aaadc0;
+}
+.ods-contextual-menu__item__button__icon svg {
+  height: 16px;
+  width: 16px;
+}
 /*# sourceMappingURL=ocean.css.map */