hrm_ui_lib 2.2.3 → 2.3.0

package/assets/styles/styles.css

@@ -1904,12 +1904,12 @@ body {
 }
 
 .scrollbar::-webkit-scrollbar-thumb {
-  background-color: var(--grey-50);
+  background-color: var(--grey-200);
   border-radius: var(--border-radius-100);
 }
 
 .scrollbar::-webkit-scrollbar-thumb:hover {
-  background-color: var(--grey-100);
+  background-color: var(--grey-300);
 }
 
 .scrollbar--vertical {
@@ -1933,7 +1933,7 @@ body {
 }
 
 .scrollbar--horizontal::-webkit-scrollbar {
-  height: var(--ds-size-4);
+  height: var(--ds-size-10);
 }
 
 .flexbox {
@@ -3462,6 +3462,145 @@ body {
   width: var(--ds-button-icon-size-sm);
 }
 
+.card {
+  border: 1px solid var(--grey-200);
+  border-radius: var(--size-8);
+  display: flex;
+  height: 56px;
+  position: relative;
+}
+
+.card--expanded, .card--expanded .card__content--header {
+  height: auto;
+}
+
+.card--title--alignment__body {
+  border: 1px solid var(--grey-200);
+}
+
+.card--title--alignment--left {
+  flex-direction: row;
+}
+
+.card--title--alignment--left .card__body {
+  border-bottom-right-radius: var(--size-8);
+  border-top-right-radius: var(--size-8);
+}
+
+.card--title--alignment--left .card__title {
+  border-bottom-left-radius: var(--size-8);
+  border-top-left-radius: var(--size-8);
+  writing-mode: sideways-lr;
+}
+
+.card--title--alignment--right {
+  flex-direction: row-reverse;
+}
+
+.card--title--alignment--right .card__body {
+  border-bottom-left-radius: var(--size-8);
+  border-top-left-radius: var(--size-8);
+}
+
+.card--title--alignment--right .card__title {
+  border-bottom-right-radius: var(--size-8);
+  border-top-right-radius: var(--size-8);
+  writing-mode: sideways-rl;
+}
+
+.card--title--alignment--top {
+  flex-direction: column;
+}
+
+.card--title--alignment--top .card__body {
+  border-bottom-left-radius: var(--size-8);
+  border-bottom-right-radius: var(--size-8);
+}
+
+.card--title--alignment--top .card__title {
+  border-top-left-radius: var(--size-8);
+  border-top-right-radius: var(--size-8);
+}
+
+.card--title--alignment--bottom {
+  flex-direction: column-reverse;
+}
+
+.card--title--alignment--bottom .card__body {
+  border-top-left-radius: var(--size-8);
+  border-top-right-radius: var(--size-8);
+}
+
+.card--title--alignment--bottom .card__title {
+  border-bottom-left-radius: var(--size-8);
+  border-bottom-right-radius: var(--size-8);
+}
+
+.card__title {
+  font-size: var(--font-size-12);
+  font-weight: var(--font-weight-700);
+  line-height: 16px;
+  text-align: center;
+  text-transform: capitalize;
+}
+
+.card__title--blue {
+  background-color: var(--blue-100);
+  border: 1px solid var(--blue-100);
+  color: var(--blue-900);
+}
+
+.card__title--purple {
+  background-color: var(--purple-100);
+  border: 1px solid var(--purple-100);
+  color: var(--purple-900);
+}
+
+.card__title--yellow {
+  background-color: var(--yellow-100);
+  border: 1px solid var(--yellow-100);
+  color: var(--yellow-900);
+}
+
+.card__title--pink {
+  background-color: var(--pink-100);
+  border: 1px solid var(--pink-100);
+  color: var(--pink-900);
+}
+
+.card__title--green {
+  background-color: var(--green-100);
+  border: 1px solid var(--green-100);
+  color: var(--green-900);
+}
+
+.card__title--grey {
+  background-color: var(--grey-100);
+  border: 1px solid var(--grey-100);
+  color: var(--grey-900);
+}
+
+.card__content {
+  display: flex;
+  flex-grow: 1;
+  flex: 1;
+  flex-direction: column;
+}
+
+.card__content--header {
+  display: flex;
+  flex: auto;
+  justify-content: space-between;
+}
+
+.card__content--header--expand {
+  align-content: center;
+}
+
+.card__content .card__divider {
+  background-color: var(--grey-200);
+}
+
 .chips {
   --ds-chips-height-lg:var(--ds-size-32);
   --ds-chips-height-md:var(--ds-size-24);
@@ -3785,6 +3924,29 @@ body {
   margin: var(--ds-collapse-divider-space);
 }
 
+.collapse-icon {
+  align-items: center;
+  border: 1px solid transparent;
+  border-radius: 8px;
+  justify-content: center;
+  padding: 6px;
+  position: relative;
+  top: -7px;
+}
+
+.collapse-icon > svg {
+  font-size: var(--size-24);
+}
+
+.collapse-icon.icon-border {
+  border-color: var(--grey-300);
+}
+
+.collapse-icon.icon-open {
+  background-color: var(--grey-200);
+  border-color: var(--grey-200);
+}
+
 .collapse-group {
   --ds-collapse-group-item-space:var(--ds-space-8);
 }