hrm_ui_lib 2.4.4 → 2.4.6

package/assets/styles/styles.css

@@ -3964,6 +3964,10 @@ body {
   position: relative;
 }
 
+.card--noBorder {
+  border: none;
+}
+
 .card--expanded, .card--expanded .card__content--header {
   height: auto;
 }
@@ -4082,9 +4086,11 @@ body {
 }
 
 .card__content--header {
+  align-items: center;
   display: flex;
   flex: auto;
   justify-content: space-between;
+  min-height: 56px;
 }
 
 .card__content--header--expandable {
@@ -4099,6 +4105,134 @@ body {
   background-color: var(--grey-200);
 }
 
+.card--group {
+  border: 1px solid var(--grey-200);
+  border-radius: var(--size-8);
+  display: flex;
+  position: relative;
+}
+
+.card--group--title--alignment__body {
+  border: 1px solid var(--grey-200);
+}
+
+.card--group--title--alignment--left .card--group__content--header {
+  flex-direction: row;
+}
+
+.card--group--title--alignment--left .card--group__content--header .card--group__body {
+  border-top-right-radius: var(--size-8);
+}
+
+.card--group--title--alignment--left .card--group__content--header .card--group__title {
+  border-top-left-radius: var(--size-8);
+  writing-mode: sideways-lr;
+}
+
+.card--group--title--alignment--right .card--group__content--header {
+  flex-direction: row-reverse;
+}
+
+.card--group--title--alignment--right .card--group__content--header .card--group__body {
+  border-top-left-radius: var(--size-8);
+}
+
+.card--group--title--alignment--right .card--group__content--header .card--group__title {
+  border-top-right-radius: var(--size-8);
+  writing-mode: sideways-rl;
+}
+
+.card--group--title--alignment--top .card--group__content--header {
+  flex-direction: column;
+}
+
+.card--group--title--alignment--top .card--group__content--header .card--group__body {
+  border-bottom-left-radius: var(--size-8);
+  border-bottom-right-radius: var(--size-8);
+}
+
+.card--group--title--alignment--top .card--group__content--header .card--group__title {
+  border-top-left-radius: var(--size-8);
+  border-top-right-radius: var(--size-8);
+}
+
+.card--group__content {
+  display: flex;
+  flex-grow: 1;
+  flex: 1;
+  flex-direction: column;
+}
+
+.card--group__content--header {
+  border-bottom: 1px solid var(--grey-200);
+  display: flex;
+  min-height: 56px;
+  position: relative;
+}
+
+.card--group__content--header--component {
+  align-content: center;
+  padding-left: var(--size-8);
+  padding-right: var(--size-8);
+}
+
+.card--group__content--header .card--group__title {
+  font-size: var(--font-size-12);
+  font-weight: var(--font-weight-700);
+  line-height: 16px;
+  text-align: center;
+  text-transform: capitalize;
+}
+
+.card--group__content--header .card--group__title--blue {
+  background-color: var(--blue-100);
+  border: 1px solid var(--blue-100);
+  color: var(--blue-900);
+}
+
+.card--group__content--header .card--group__title--purple {
+  background-color: var(--purple-100);
+  border: 1px solid var(--purple-100);
+  color: var(--purple-900);
+}
+
+.card--group__content--header .card--group__title--yellow {
+  background-color: var(--yellow-100);
+  border: 1px solid var(--yellow-100);
+  color: var(--yellow-900);
+}
+
+.card--group__content--header .card--group__title--pink {
+  background-color: var(--pink-100);
+  border: 1px solid var(--pink-100);
+  color: var(--pink-900);
+}
+
+.card--group__content--header .card--group__title--green {
+  background-color: var(--green-100);
+  border: 1px solid var(--green-100);
+  color: var(--green-900);
+}
+
+.card--group__content--header .card--group__title--grey {
+  background-color: var(--grey-100);
+  border: 1px solid var(--grey-100);
+  color: var(--grey-900);
+}
+
+.card--group__content--body {
+  padding-left: var(--size-8);
+  padding-right: var(--size-8);
+}
+
+.card--group__content--body .card--group__child {
+  border-bottom: 1px solid var(--grey-200);
+}
+
+.card--group__content--body .card--group__child:last-child {
+  border-bottom: none;
+}
+
 .chips {
   --ds-chips-height-lg:var(--ds-size-32);
   --ds-chips-height-md:var(--ds-size-24);