hrm_ui_lib 2.3.7 → 2.4.1

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);
@@ -3976,11 +4041,11 @@ body {
   --ds-controller-size:var(--ds-size-16);
   --ds-controller-font:var(--ds-font-weight-default) var(--ds-paragraph-std)/var(--ds-line-height-caption) var(--ds-font-family);
   --ds-controller-bg-default-light:var(--ds-color-bg-white);
-  --ds-controller-bg-default-dark:var(--ds-color-bg-grey-dark);
+  --ds-controller-bg-default-dark:var(--grey-200);
   --ds-controller-bg-hover-light:var(--ds-color-bg-container-lighter);
-  --ds-controller-bg-hover-dark:var(--ds-color-bg-grey);
+  --ds-controller-bg-hover-dark:var(--grey-300);
   --ds-controller-bg-pressed-light:var(--ds-color-bg-container-light);
-  --ds-controller-bg-pressed-dark:var(--ds-color-bg-grey-darker);
+  --ds-controller-bg-pressed-dark:var(--grey-400);
   --ds-controller-bg-focused:var(--ds-color-bg-container);
   --ds-controller-bg-disabled:var(--ds-color-bg-disabled);
   --ds-controller-selected-bg-default:var(--ds-color-bg-brand);
@@ -3990,12 +4055,11 @@ body {
   --ds-controller-selected-bg-disabled:var(--ds-color-bg-disabled);
   --ds-controller-mark-light:var(--ds-color-icon-inverse);
   --ds-controller-mark-dark:var(--ds-color-icon-disabled);
-  --ds-controller-border-color-default:var(--ds-color-border-primary);
   --ds-controller-border-color-focused:var(--grey-500);
   --ds-controller-border-color-disabled:var(--ds-color-border-disabled);
-  --ds-controller-border:var(--ds-border-thin) solid;
+  --ds-controller-border:var(--border-size-1) solid;
   --ds-controller-border-radius-sm:var(--ds-border-radius-xxs);
-  --ds-controller-border-radius-lg:var(--ds-border-radius-5xl);
+  --ds-controller-border-radius-lg:var(--border-radius-100);
   --ds-controller-label-padding:0 0 0 var(--ds-space-8);
   --ds-controller-icon-disabled:var(--ds-color-text-disabled);
   --ds-controller-helper-padding:var(--ds-space-2) 0 0 var(--ds-space-24);
@@ -4040,7 +4104,7 @@ body {
   -webkit-align-items: center;
   align-items: center;
   background-color: var(--ds-controller-bg-default-light);
-  border: var(--ds-controller-border) var(--ds-controller-border-color-default);
+  border: var(--border-size-1) solid var(--grey-200);
   border-radius: var(--ds-controller-border-radius-sm);
   display: -webkit-box;
   display: -moz-box;
@@ -4071,7 +4135,6 @@ body {
 }
 
 .controller input[type=checkbox] + .controller__icon .controller__mark, .controller input[type=radio] + .controller__icon .controller__mark {
-  opacity: 0;
   position: absolute;
   transition: opacity 0.3s linear;
 }
@@ -4108,8 +4171,8 @@ body {
 }
 
 .controller input[type=checkbox]:disabled + .controller__icon, .controller input[type=radio]:disabled + .controller__icon {
-  background-color: var(--ds-controller-bg-disabled);
-  border-color: var(--ds-controller-border-color-disabled);
+  background-color: var(--grey-0);
+  border-color: var(--ds-controller-bg-default-dark);
 }
 
 .controller--disabled {
@@ -4175,16 +4238,20 @@ body {
 
 .controller--switch input[type=checkbox] + .controller__icon {
   background-color: var(--ds-controller-bg-default-dark);
-  border: 0;
   border-radius: var(--ds-controller-border-radius-lg);
   position: relative;
 }
 
 .controller--switch input[type=checkbox] + .controller__icon:hover {
   background-color: var(--ds-controller-bg-hover-dark);
+  border-color: var(--ds-controller-bg-hover-dark);
 }
 
-.controller--switch input[type=checkbox] + .controller__icon:active, .controller--switch input[type=checkbox] + .controller__icon:visited {
+.controller--switch input[type=checkbox] + .controller__icon:hover .controller__mark {
+  background-color: var(--ds-controller-bg-hover-dark);
+}
+
+.controller--switch input[type=checkbox] + .controller__icon:active, .controller--switch input[type=checkbox] + .controller__icon:active .controller__mark, .controller--switch input[type=checkbox] + .controller__icon:visited, .controller--switch input[type=checkbox] + .controller__icon:visited .controller__mark {
   background-color: var(--ds-controller-bg-pressed-dark);
 }
 
@@ -4211,15 +4278,23 @@ body {
   transition: transform 0.3s linear;
 }
 
+.controller--switch input[type=checkbox] + .controller__icon .controller__mark {
+  background-color: var(--ds-controller-bg-default-dark);
+  border-radius: var(--ds-controller-border-radius-lg);
+  height: var(--ds-size-8);
+  width: var(--ds-size-8);
+}
+
 .controller--switch input[type=checkbox]:checked + .controller__icon {
   background-color: var(--ds-controller-selected-bg-default);
+  border-color: var(--ds-controller-selected-bg-default);
 }
 
 .controller--switch input[type=checkbox]:checked + .controller__icon .controller__icon__inner {
   color: var(--ds-controller-selected-bg-default);
 }
 
-.controller--switch input[type=checkbox]:checked + .controller__icon:hover {
+.controller--switch input[type=checkbox]:checked + .controller__icon .controller__mark, .controller--switch input[type=checkbox]:checked + .controller__icon:hover {
   background-color: var(--ds-controller-selected-bg-hover);
 }
 
@@ -4227,6 +4302,10 @@ body {
   color: var(--ds-controller-selected-bg-hover);
 }
 
+.controller--switch input[type=checkbox]:checked + .controller__icon:hover .controller__mark {
+  background-color: var(--ds-controller-selected-bg-hover);
+}
+
 .controller--switch input[type=checkbox]:checked + .controller__icon:active, .controller--switch input[type=checkbox]:checked + .controller__icon:visited {
   background-color: var(--ds-controller-selected-bg-pressed);
 }
@@ -4235,17 +4314,30 @@ body {
   color: var(--ds-controller-selected-bg-pressed);
 }
 
+.controller--switch input[type=checkbox]:checked + .controller__icon:active .controller__mark, .controller--switch input[type=checkbox]:checked + .controller__icon:visited .controller__mark {
+  background-color: var(--ds-controller-selected-bg-pressed);
+}
+
 .controller--switch input[type=checkbox]:checked:disabled + .controller__icon {
-  background-color: var(--ds-controller-selected-bg-disabled);
+  background-color: var(--grey-0);
+  border-color: var(--ds-controller-bg-default-dark);
 }
 
 .controller--switch input[type=checkbox]:checked:disabled + .controller__icon .controller__icon__inner {
   color: var(--ds-controller-mark-dark);
 }
 
-.controller--switch input[type=checkbox]:disabled .controller__icon {
-  background-color: var(--ds-controller-bg-disabled);
-  color: var(--ds-controller-icon-disabled);
+.controller--switch input[type=checkbox]:checked:disabled + .controller__icon .controller__mark {
+  background-color: var(--ds-controller-bg-default-dark);
+}
+
+.controller--switch input[type=checkbox]:disabled + .controller__icon {
+  background-color: var(--grey-0);
+  border-color: var(--ds-controller-bg-default-dark);
+}
+
+.controller--switch input[type=checkbox]:disabled + .controller__icon .controller__icon__inner, .controller--switch input[type=checkbox]:disabled + .controller__icon .controller__mark {
+  background-color: var(--ds-controller-bg-default-dark);
 }
 
 .controller--switch-large input[type=checkbox] + .controller__icon {