hrm_ui_lib 1.2.0 → 1.2.2

package/assets/styles/styles.css

@@ -5722,26 +5722,19 @@ body {
   }
 }
 .modal {
-  --ds-modal-size-xl:720px;
-  --ds-modal-size-lg:600px;
-  --ds-modal-size-md:500px;
+  --ds-modal-size-lg:720px;
+  --ds-modal-size-md:600px;
   --ds-modal-size-sm:400px;
-  --ds-modal-overlay-bg:var(--overlay-10);
-  --ds-modal-overlay-padding:var(--ds-space-20);
+  --ds-modal-overlay-bg:var(--ds-overlay-9);
+  --ds-modal-overlay-padding:var(--ds-space-16);
   --ds-modal-bg:var(--ds-color-bg-white);
-  --ds-modal-border-radius:var(--ds-border-radius-2xl);
+  --ds-modal-border-radius:var(--ds-border-radius-xs);
   --ds-modal-shadow:var(--shadow-7);
-  --ds-modal-header-padding-lg:var(--ds-space-32) var(--ds-space-32) 0;
-  --ds-modal-header-padding-sm:var(--ds-space-24) var(--ds-space-24) 0;
-  --ds-modal-content-padding-lg:var(--ds-space-32) var(--ds-space-32);
-  --ds-modal-content-padding-sm:var(--ds-space-24);
-  --ds-modal-footer-padding-lg:var(--ds-space-20) var(--ds-space-32);
-  --ds-modal-footer-padding-sm:var(--ds-space-20) var(--ds-space-24);
-  --ds-modal-footer-border-width:var(--ds-border-thin);
-  --ds-modal-footer-border-color:var(--ds-color-divider);
-  --ds-modal-icon-size:var(--ds-size-48);
-  --ds-modal-icon-border-radius:var(--ds-border-radius-sm);
-  --ds-modal-icon-bg:var(--ds-color-bg-container);
+  --ds-modal-header-padding:var(--ds-space-16) var(--ds-space-24);
+  --ds-modal-content-border-width:var(--ds-border-thin);
+  --ds-modal-content-border-color:var(--ds-color-divider);
+  --ds-modal-content-padding:var(--ds-space-24);
+  --ds-modal-footer-padding:var(--ds-space-16) var(--ds-space-24);
   -webkit-box-pack: center;
   -moz-box-pack: center;
   -ms-flex-pack: center;
@@ -5787,9 +5780,15 @@ body {
 }
 
 .modal__header {
+  -webkit-box-align: center;
+  -moz-box-align: center;
+  -ms-flex-align: center;
   -webkit-box-pack: justify;
   -moz-box-pack: justify;
   -ms-flex-pack: justify;
+  -webkit-align-items: center;
+  align-items: center;
+  border-bottom: var(--ds-modal-content-border-width) solid var(--ds-modal-content-border-color);
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -5797,14 +5796,9 @@ body {
   display: flex;
   -webkit-justify-content: space-between;
   justify-content: space-between;
-  padding: var(--ds-modal-header-padding-lg);
+  padding: var(--ds-modal-header-padding);
 }
 
-@media only screen and (max-width: 575px) {
-  .modal__header {
-    padding: var(--ds-modal-header-padding-sm);
-  }
-}
 .modal__title {
   flex: 1;
   max-width: 100%;
@@ -5814,14 +5808,9 @@ body {
 }
 
 .modal__content {
-  padding: var(--ds-modal-content-padding-lg);
+  padding: var(--ds-modal-content-padding);
 }
 
-@media only screen and (max-width: 575px) {
-  .modal__content {
-    padding: var(--ds-modal-content-padding-sm);
-  }
-}
 .modal__footer {
   -webkit-box-align: center;
   -moz-box-align: center;
@@ -5831,7 +5820,7 @@ body {
   -ms-flex-pack: end;
   -webkit-align-items: center;
   align-items: center;
-  border-top: var(--ds-modal-footer-border-width) solid var(--ds-modal-footer-border-color);
+  border-top: var(--ds-modal-content-border-width) solid var(--ds-modal-content-border-color);
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
@@ -5839,24 +5828,7 @@ body {
   display: flex;
   -webkit-justify-content: flex-end;
   justify-content: flex-end;
-  padding: var(--ds-modal-footer-padding-lg);
-}
-
-@media only screen and (max-width: 575px) {
-  .modal__footer {
-    -webkit-box-pack: justify;
-    -moz-box-pack: justify;
-    -ms-flex-pack: justify;
-    -webkit-justify-content: space-between;
-    justify-content: space-between;
-    padding: var(--ds-modal-footer-padding-sm);
-  }
-  .modal__footer__btn {
-    width: 100%;
-  }
-}
-.modal--xlarge .modal__container {
-  max-width: var(--ds-modal-size-xl);
+  padding: var(--ds-modal-footer-padding);
 }
 
 .modal--large .modal__container {
@@ -5871,117 +5843,10 @@ body {
   max-width: var(--ds-modal-size-sm);
 }
 
-@media only screen and (max-width: 575px) {
-  .modal:not(.modal.modal--confirmation) {
-    -webkit-box-align: end;
-    -moz-box-align: end;
-    -ms-flex-align: end;
-    -webkit-align-items: flex-end;
-    align-items: flex-end;
-    padding: 0;
-  }
-  .modal:not(.modal.modal--confirmation) .modal__container {
-    animation: show 0.4s ease-in;
-    border-bottom-left-radius: 0;
-    border-bottom-right-radius: 0;
-    max-width: unset !important;
-    position: absolute;
-  }
-}
-.modal:not(.modal.modal--confirmation).modal--small .modal__header {
-  padding: var(--ds-modal-header-padding-sm);
-}
-
-.modal:not(.modal.modal--confirmation).modal--small .modal__content {
-  padding: var(--ds-modal-content-padding-sm);
-}
-
-.modal:not(.modal.modal--confirmation).modal--small .modal__footer {
-  padding: var(--ds-modal-footer-padding-sm);
-}
-
 .modal__close {
   cursor: pointer;
 }
 
-.modal__icon {
-  -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;
-  background-color: var(--ds-modal-icon-bg);
-  border-radius: var(--ds-modal-icon-border-radius);
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  height: var(--ds-modal-icon-size);
-  -webkit-justify-content: center;
-  justify-content: center;
-  margin-left: auto;
-  margin-right: auto;
-  width: var(--ds-modal-icon-size);
-}
-
-.modal--confirmation .modal__footer {
-  -webkit-box-pack: justify;
-  -moz-box-pack: justify;
-  -ms-flex-pack: justify;
-  border-top: 0;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: 0;
-}
-
-.modal--confirmation .modal__footer__btn {
-  width: 100%;
-}
-
-@-webkit-keyframes show {
-  0% {
-    bottom: -100%;
-  }
-  to {
-    bottom: 0;
-  }
-}
-@-moz-keyframes show {
-  0% {
-    bottom: -100%;
-  }
-  to {
-    bottom: 0;
-  }
-}
-@-ms-keyframes show {
-  0% {
-    bottom: -100%;
-  }
-  to {
-    bottom: 0;
-  }
-}
-@-o-keyframes show {
-  0% {
-    bottom: -100%;
-  }
-  to {
-    bottom: 0;
-  }
-}
-@keyframes show {
-  0% {
-    bottom: -100%;
-  }
-  to {
-    bottom: 0;
-  }
-}
 .expand_button {
   color: #72bf44;
   cursor: pointer;
@@ -7500,9 +7365,6 @@ body {
   -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-color: var(--ds-tab-border-default);
@@ -7515,17 +7377,10 @@ body {
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-  flex: 1;
-  -webkit-justify-content: center;
-  justify-content: center;
   margin: var(--ds-tab-margin);
   position: relative;
 }
 
-.tab:last-child {
-  margin: 0;
-}
-
 .tab:after {
   background-color: var(--ds-tab-border-selected);
   bottom: -1px;
@@ -7536,6 +7391,10 @@ body {
   width: 0;
 }
 
+.tab:last-child {
+  margin: 0;
+}
+
 .tab__icon {
   color: var(--ds-tab-icon-color-default);
 }
@@ -7544,22 +7403,30 @@ body {
   font: var(--ds-tab-font);
 }
 
-.tab:not(.tab--selected, .tab--disabled):hover {
+.tab:hover {
   cursor: pointer;
 }
 
-.tab:not(.tab--selected, .tab--disabled):hover .tab__icon {
+.tab:hover .tab__icon {
   color: var(--ds-tab-icon-color-hover);
 }
 
-.tab:not(.tab--selected, .tab--disabled):hover .tab__label {
+.tab:hover .tab__label {
   color: var(--ds-tab-color-hover);
 }
 
-.tab--disabled {
+.tab--disabled:hover {
   cursor: default;
 }
 
+.tab--disabled:hover .tab__icon {
+  color: var(--ds-tab-icon-color-disabled);
+}
+
+.tab--disabled:hover .tab__label {
+  color: var(--ds-tab-color-disabled);
+}
+
 .tab--disabled .tab__icon {
   color: var(--ds-tab-icon-color-disabled);
 }
@@ -7568,10 +7435,18 @@ body {
   color: var(--ds-tab-color-disabled);
 }
 
-.tab--selected {
+.tab--selected:hover {
   cursor: default;
 }
 
+.tab--selected:hover .tab__icon {
+  color: var(--ds-tab-icon-color-selected);
+}
+
+.tab--selected:hover .tab__label {
+  color: var(--ds-tab-color-selected);
+}
+
 .tab--selected:after {
   width: 100%;
 }
@@ -7609,89 +7484,22 @@ body {
 }
 
 .tabs-container {
-  --ds-tabs-primary-border-size:0 0 1px 0;
-  --ds-tabs-primary-border-default:var(--ds-color-divider);
-  --ds-tabs-secondary-bg:var(--ds-color-bg-container-light);
-  --ds-tabs-secondary-padding:var(--ds-space-8);
-  --ds-tabs-secondary-border-radius:var(--border-radius-12);
-  --ds-tabs-secondary-tab-heightt:var(--ds-size-40);
-  --ds-tabs-secondary-tab-padding:var(--ds-space-10) var(--ds-space-12);
-  --ds-tabs-secondary-tab-margin:0 var(--ds-space-8) 0 0;
-  --ds-tabs-secondary-tab-bg-default:transparent;
-  --ds-tabs-secondary-tab-bg-hover:var(--ds-color-bg-container-dark);
-  --ds-tabs-secondary-tab-bg-selected:var(--ds-color-bg-white);
-  --ds-tabs-secondary-tab-color-default:var(--ds-color-text-primary);
-  --ds-tabs-secondary-tab-color-hover:var(--ds-color-text-primary);
-  --ds-tabs-secondary-tab-color-selected:var(--ds-color-text-primary);
-  --ds-tabs-secondary-tab-border-size:1px;
-  --ds-tabs-secondary-tab-border-default:transparent;
-  --ds-tabs-secondary-tab-border-hover:transparent;
-  --ds-tabs-secondary-tab-border-selected:var(--ds-color-border-tertiary);
-  --ds-tabs-secondary-tab-border-radius:var(--ds-border-radius-lg);
+  --ds-tabs-border-size:0 0 1px 0;
+  --ds-tabs-border-default:var(--ds-color-divider);
   -webkit-box-align: end;
   -moz-box-align: end;
   -ms-flex-align: end;
   -webkit-align-items: flex-end;
   align-items: flex-end;
+  border-color: var(--ds-tabs-border-default);
+  border-style: solid;
+  border-width: var(--ds-tabs-border-size);
   display: -webkit-inline-box;
   display: -moz-inline-box;
   display: -webkit-inline-flex;
   display: -ms-inline-flexbox;
   display: inline-flex;
-}
-
-.tabs-container--primary {
-  border-color: var(--ds-tabs-primary-border-default);
-  border-style: solid;
-  border-width: var(--ds-tabs-primary-border-size);
-}
-
-.tabs-container--secondary {
-  background-color: var(--ds-tabs-secondary-bg);
-  border-radius: var(--ds-tabs-secondary-border-radius);
-  padding: var(--ds-tabs-secondary-padding);
-}
-
-.tabs-container--secondary .tab {
-  background-color: var(--ds-tabs-secondary-tab-bg-default);
-  border-color: var(--ds-tabs-secondary-tab-border-default);
-  border-radius: var(--ds-tabs-secondary-tab-border-radius);
-  border-style: solid;
-  border-width: var(--ds-tabs-secondary-tab-border-size);
-  height: var(--ds-tabs-secondary-tab-heightt);
-  margin: var(--ds-tabs-secondary-tab-margin);
-  padding: var(--ds-tabs-secondary-tab-padding);
-  transition: background-color 0.3s linear, border-color 0.3s linear;
-}
-
-.tabs-container--secondary .tab:last-child {
-  margin: 0;
-}
-
-.tabs-container--secondary .tab:after {
-  content: none;
-}
-
-.tabs-container--secondary .tab__icon, .tabs-container--secondary .tab__label {
-  color: var(--ds-tabs-secondary-tab-color-default);
-}
-
-.tabs-container--secondary .tab:not(.tabs-container--secondary .tab--selected):hover {
-  background-color: var(--ds-tabs-secondary-tab-bg-hover);
-  border-color: var(--ds-tabs-secondary-tab-border-hover);
-}
-
-.tabs-container--secondary .tab:not(.tabs-container--secondary .tab--selected):hover .tab__icon, .tabs-container--secondary .tab:not(.tabs-container--secondary .tab--selected):hover .tab__label {
-  color: var(--ds-tabs-secondary-tab-color-hover);
-}
-
-.tabs-container--secondary .tab--selected {
-  background-color: var(--ds-tabs-secondary-tab-bg-selected);
-  border-color: var(--ds-tabs-secondary-tab-border-selected);
-}
-
-.tabs-container--secondary .tab--selected .tab__icon, .tabs-container--secondary .tab--selected .tab__label {
-  color: var(--ds-tabs-secondary-tab-color-selected);
+  width: 100%;
 }
 
 .table-wrapper {