hrm_ui_lib 2.3.6 → 2.4.0

package/assets/styles/styles.css

@@ -3468,6 +3468,71 @@ body {
   width: var(--ds-button-icon-size-sm);
 }
 
+.button-group-item {
+  align-items: center;
+  display: flex;
+  flex-shrink: 0;
+  gap: var(--ds-size-8);
+  justify-content: center;
+}
+
+.button-group-item__primary {
+  background-color: var(--white);
+  border: 1px solid var(--grey-200);
+}
+
+.button-group-item__primary:hover {
+  background: var(--grey-50);
+  color: var(--grey-600);
+  cursor: pointer;
+}
+
+.button-group-item__primary.active {
+  background: var(--grey-50);
+}
+
+.button-group-item__primary.disabled {
+  background: var(--grey-50);
+  color: var(--grey-300);
+  cursor: not-allowed;
+}
+
+.button-group-item__primary.disabled > * {
+  color: var(--grey-300);
+}
+
+.button-group-item__small {
+  height: var(--ds-size-24);
+  padding: var(--ds-size-6) var(--ds-size-12);
+}
+
+.button-group-item__medium {
+  height: var(--ds-size-32);
+  padding: var(--ds-size-6) 14px;
+}
+
+.button-group-item__large {
+  height: var(--ds-size-40);
+  padding: 0 var(--ds-size-16);
+}
+
+.button-group {
+  align-items: flex-start;
+  border-radius: var(--ds-size-8);
+  display: flex;
+  width: max-content;
+}
+
+.button-group-item:first-child {
+  border-bottom-left-radius: var(--ds-size-8);
+  border-top-left-radius: var(--ds-size-8);
+}
+
+.button-group-item:last-child {
+  border-bottom-right-radius: var(--ds-size-8);
+  border-top-right-radius: var(--ds-size-8);
+}
+
 .card {
   border: 1px solid var(--grey-200);
   border-radius: var(--size-8);
@@ -6059,24 +6124,25 @@ body {
 }
 
 .pagination {
-  --ds-pagination-item-size-lg:var(--ds-size-40);
-  --ds-pagination-item-size-md:var(--ds-size-32);
-  --ds-pagination-item-size-sm:var(--ds-size-24);
-  --ds-pagination-item-space:var(--ds-space-2);
+  --ds-pagination-item-size:var(--ds-size-32);
+  --ds-pagination-item-space:var(--ds-space-4);
   --ds-pagination-item-font-size-lg:var(--ds-size-14);
   --ds-pagination-item-font-size-md:var(--ds-size-14);
   --ds-pagination-item-font-size-sm:var(--ds-size-12);
-  --ds-pagination-item-color:var(--ds-color-text-secondary);
-  --ds-pagination-item-color-selected:var(--ds-color-text-inverse);
+  --ds-pagination-item-color:var(--ds-color-text-tertiary);
+  --ds-pagination-item-color-active:var(--ds-color-text-primary);
   --ds-pagination-item-color-disabled:var(--ds-color-text-disabled);
-  --ds-pagination-item-bg:var(--ds-color-bg-white);
   --ds-pagination-item-bg-hover:var(--ds-color-bg-container-light);
-  --ds-pagination-item-bg-selected:var(--ds-color-bg-brand);
-  --ds-pagination-item-bg-disabled:var(--ds-color-bg-container-lighter);
-  --ds-pagination-item-border:1px solid var(--ds-color-border-tertiary);
-  --ds-pagination-item-border-selected:var(--ds-color-border-brand);
-  --ds-pagination-item-border-disabled:var(--ds-color-bg-disabled);
-  --ds-pagination-item-border-radius:var(--ds-border-radius-xxs);
+  --ds-pagination-item-bg-active:var(--ds-color-bg-container);
+  --ds-pagination-item-border-color:transparent;
+  --ds-pagination-item-border-color-disabeled:var(--ds-color-border-disabled);
+  --ds-pagination-item-border-color-pressed:var(--ds-color-border-tertiary);
+  --ds-pagination-item-border-radius:var(--ds-border-radius-md);
+  gap: var(--ds-pagination-item-space);
+  list-style-type: none;
+}
+
+.pagination, .pagination li a {
   -webkit-box-align: center;
   -moz-box-align: center;
   -ms-flex-align: center;
@@ -6087,53 +6153,21 @@ body {
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
-  list-style-type: none;
-  margin-left: calc(var(--ds-pagination-item-space) * -1);
-  margin-right: calc(var(--ds-pagination-item-space) * -1);
-}
-
-.pagination--large li a {
-  font: var(--ds-font-weight-default) var(--ds-pagination-item-font-size-lg) var(--ds-font-family);
-  height: var(--ds-pagination-item-size-lg);
-  min-width: var(--ds-pagination-item-size-lg);
-}
-
-.pagination--medium li a {
-  font: var(--ds-font-weight-default) var(--ds-pagination-item-font-size-md) var(--ds-font-family);
-  height: var(--ds-pagination-item-size-md);
-  min-width: var(--ds-pagination-item-size-md);
-}
-
-.pagination--small li a {
-  font: var(--ds-font-weight-default) var(--ds-pagination-item-font-size-sm) var(--ds-font-family);
-  height: var(--ds-pagination-item-size-sm);
-  min-width: var(--ds-pagination-item-size-sm);
-}
-
-.pagination li {
-  padding: 0 var(--ds-pagination-item-space);
 }
 
 .pagination li a {
-  -webkit-box-align: center;
-  -moz-box-align: center;
-  -ms-flex-align: center;
   -webkit-box-pack: center;
   -moz-box-pack: center;
   -ms-flex-pack: center;
-  -webkit-align-items: center;
-  align-items: center;
-  border: var(--ds-pagination-item-border);
+  border: 1px solid var(--ds-pagination-item-border-color);
   border-radius: var(--ds-pagination-item-border-radius);
   color: var(--ds-pagination-item-color);
   cursor: pointer;
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
+  font: var(--ds-font-weight-default) var(--ds-pagination-item-font-size-lg) var(--ds-font-family);
+  height: var(--ds-pagination-item-size);
   -webkit-justify-content: center;
   justify-content: center;
+  min-width: var(--ds-pagination-item-size);
 }
 
 .pagination li a:focus {
@@ -6144,36 +6178,43 @@ body {
   fill: var(--ds-pagination-item-color);
 }
 
-.pagination li:not(.pagination li.active) a:hover {
+.pagination li:not(.pagination li.active, .pagination li.disabled) a:hover {
   background-color: var(--ds-pagination-item-bg-hover);
 }
 
+.pagination li:not(.pagination li.active, .pagination li.disabled) a:active {
+  border-color: var(--ds-pagination-item-border-color-pressed);
+}
+
 .pagination li.active a {
-  background-color: var(--ds-pagination-item-bg-selected);
-  border-color: var(--ds-pagination-item-border-selected);
-  color: var(--ds-pagination-item-color-selected);
+  background-color: var(--ds-pagination-item-bg-active);
+  color: var(--ds-pagination-item-color-active);
   cursor: default;
+  font-weight: var(--font-weight-500);
 }
 
 .pagination li.active a svg path {
-  fill: var(--ds-pagination-item-color-selected);
+  fill: var(--ds-pagination-item-color-active);
 }
 
 .pagination li.disabled a {
-  background-color: var(--ds-pagination-item-bg-disabled);
-  border-color: var(--ds-pagination-item-border-disabled);
+  border-color: var(--ds-pagination-item-border-color-disabeled);
   color: var(--ds-pagination-item-color-disabled);
   cursor: default;
 }
 
-.pagination li.disabled a:hover {
-  background-color: var(--ds-pagination-item-bg-disabled) !important;
-}
-
 .pagination li.disabled a svg path {
   fill: var(--ds-pagination-item-color-disabled);
 }
 
+.pagination li.disabled a[rel=next], .pagination li.disabled a[rel=prev] {
+  border-color: var(--ds-pagination-item-border-color);
+}
+
+.pagination__more {
+  font-size: 0;
+}
+
 .popover {
   --ds-popover-bg:var(--ds-color-bg-white);
   --ds-popover-padding:var(--ds-space-12);