hrm_ui_lib 2.0.0 → 2.0.2

package/README.md

@@ -1,6 +1,6 @@
 # People Space UI Tools
 
-See [UI library]([https://github.com/hrmuilibrary/hrm_ui_library]) for live demos and comprehensive docs.
+See [UI library]([https://hrmuilibrary.github.io/hrm_ui_library]) for live demos and comprehensive docs.
 
 # Installation and usage
 ```

package/assets/styles/styles.css

@@ -3405,176 +3405,6 @@ body {
   width: var(--ds-button-icon-size-sm);
 }
 
-.card-item {
-  --ds-card-item-bg:var(--ds-color-bg-container-light);
-  --ds-card-item-padding:var(--ds-space-12) var(--ds-space-16);
-  --ds-card-item-border-radius:var(--ds-border-radius-2xl);
-  --ds-card-item-image-width:var(--ds-size-40);
-  --ds-card-item-image-height:var(--ds-size-28);
-  --ds-card-item-image-border-radius:var(--ds-border-radius-xs);
-  --ds-card-item-image-bg-default:var(--ds-color-bg-white);
-  -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;
-  background-color: var(--ds-card-item-bg);
-  border-radius: var(--ds-card-item-border-radius);
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  -webkit-justify-content: space-between;
-  justify-content: space-between;
-  padding: var(--ds-card-item-padding);
-}
-
-.card-item__content {
-  flex: 1;
-}
-
-.card-item__image {
-  background-color: var(--ds-card-item-image-bg-default);
-  border-radius: var(--ds-card-item-image-border-radius);
-  height: var(--ds-card-item-image-height);
-  min-width: var(--ds-card-item-image-size);
-  width: var(--ds-card-item-image-width);
-}
-
-.card-body {
-  --ds-card-body-bg:var(--ds-color-bg-container-light);
-  --ds-card-body-padding:var(--ds-space-32);
-  --ds-card-body-border-radius:var(--ds-border-radius-3xl);
-  --ds-card-body-image-size:200px;
-  background-color: var(--ds-card-body-bg);
-  border-radius: var(--ds-card-body-border-radius);
-  padding: var(--ds-card-body-padding);
-  text-align: center;
-}
-
-.card-body__image {
-  -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;
-  height: var(--ds-card-body-image-size);
-  -webkit-justify-content: center;
-  justify-content: center;
-  margin: auto;
-  width: var(--ds-card-body-image-size);
-}
-
-.card-body__image, .card-select {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-}
-
-.card-select {
-  --ds-card-select-bg-default:var(--ds-color-bg-white);
-  --ds-card-select-bg-hover:var(--ds-color-bg-container-lighter);
-  --ds-card-select-bg-active:var(--ds-color-bg-white);
-  --ds-card-select-bg-selected:var(--ds-color-bg-white);
-  --ds-card-select-border-color-default:var(--ds-color-border-tertiary);
-  --ds-card-select-border-color-hover:var(--ds-color-border-secondary);
-  --ds-card-select-border-color-active:var(--ds-color-border-tertiary);
-  --ds-card-select-border-color-selected:var(--ds-color-border-brand);
-  --ds-card-select-border-color-disabled:var(--ds-color-border-disabled);
-  --ds-card-select-border-radius:var(--ds-border-radius-2xl);
-  --ds-card-select-padding:var(--ds-space-16);
-  --ds-card-select-shadow-focused:var(--ds-shadow-brand-2);
-  --ds-card-select-shadow-selected:var(--ds-shadow-brand-1);
-  --ds-card-select-image-size:var(--ds-size-64);
-  --ds-card-select-icon-size:var(--ds-size-40);
-  --ds-card-select-icon-bg:var(--ds-color-bg-container);
-  --ds-card-select-icon-border-radius:var(--ds-border-radius-xl);
-  background-color: var(--ds-card-select-bg-default);
-  border: 1px solid var(--ds-card-select-border-color-default);
-  border-radius: var(--ds-card-select-border-radius);
-  padding: var(--ds-card-select-padding);
-  width: 100%;
-}
-
-.card-select:not(.card-select.card-select--disabled, .card-select.card-select--selected):hover {
-  background-color: var(--ds-card-select-bg-hover);
-  border-color: var(--ds-card-select-border-color-hover);
-  cursor: pointer;
-}
-
-.card-select:not(.card-select.card-select--disabled, .card-select.card-select--selected):active {
-  background-color: var(--ds-card-select-bg-active);
-  border-color: var(--ds-card-select-border-color-active);
-  box-shadow: var(--ds-card-select-shadow-focused);
-}
-
-.card-select--selected {
-  background-color: var(--ds-card-select-bg-selected);
-  border-color: var(--ds-card-select-border-color-selected);
-  box-shadow: var(--ds-card-select-shadow-selected);
-}
-
-.card-select--disabled {
-  border-color: var(--ds-card-select-border-color-disabled);
-}
-
-.card-select--disabled .card-select__image {
-  opacity: 0.4;
-}
-
-.card-select__image {
-  min-width: var(--ds-card-select-image-size);
-  width: var(--ds-card-select-image-size);
-}
-
-.card-select__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-card-select-icon-bg);
-  border-radius: var(--ds-card-select-icon-border-radius);
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-  height: var(--ds-card-select-icon-size);
-  -webkit-justify-content: center;
-  justify-content: center;
-  min-width: var(--ds-card-select-icon-size);
-  width: var(--ds-card-select-icon-size);
-}
-
-.card-select__content {
-  flex: 1;
-}
-
-.card-select-group {
-  --ds-card-select-group-space:var(--ds-space-16);
-}
-
-.card-select-group__item {
-  margin-bottom: var(--ds-card-select-group-space);
-}
-
-.card-select-group__item:last-child {
-  margin-bottom: 0;
-}
-
 .chips {
   --ds-chips-height-lg:var(--ds-size-32);
   --ds-chips-height-md:var(--ds-size-24);
@@ -5336,139 +5166,27 @@ body {
 }
 
 .image--bg {
-  -webkit-box-pack: center;
-  -moz-box-pack: center;
-  -ms-flex-pack: center;
-  background: var(--grey-30) no-repeat center;
-  background-size: contain;
-  height: 100%;
-  -webkit-justify-content: center;
-  justify-content: center;
-  width: 100%;
-}
-
-.image--bg, .item-select {
   -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: var(--grey-30) no-repeat center;
+  background-size: contain;
   display: -webkit-box;
   display: -moz-box;
   display: -ms-flexbox;
   display: -webkit-flex;
   display: flex;
-}
-
-.item-select {
-  --ds-item-select-bg-default:var(--ds-color-bg-white);
-  --ds-item-select-bg-hover:var(--ds-color-bg-container-lighter);
-  --ds-item-select-bg-active:var(--ds-color-bg-white);
-  --ds-item-select-padding:var(--ds-space-12) var(--ds-space-16);
-  --ds-item-select-border-radius:var(--ds-border-radius-xl);
-  --ds-item-select-border-color:var(--ds-color-border-tertiary);
-  --ds-item-select-border-color-hover:var(--ds-color-border-tertiary);
-  --ds-item-select-border-color-selected:var(--ds-color-border-brand);
-  --ds-item-select-border-color-disabled:var(--ds-color-border-disabled);
-  --ds-item-select-shadow-active:var(--ds-shadow-brand-2);
-  --ds-item-select-image-width:40px;
-  --ds-item-select-image-height:var(--ds-size-28);
-  --ds-item-select-image-border-radius:var(--ds-border-radius-xs);
-  --ds-item-select-image-bg-default:var(--ds-color-bg-white);
-  background-color: var(--ds-item-select-bg-default);
-  border: 1px solid var(--ds-item-select-border-color);
-  border-radius: var(--ds-item-select-border-radius);
-  padding: var(--ds-item-select-padding);
-}
-
-.item-select:not(.item-select.item-select--disabled, .item-select.item-select--selected):hover {
-  background-color: var(--ds-item-select-bg-hover);
-  border-color: var(--ds-item-select-border-color-hover);
-  cursor: pointer;
-}
-
-.item-select:not(.item-select.item-select--disabled, .item-select.item-select--selected):active {
-  background-color: var(--ds-item-select-bg-active);
-  box-shadow: var(--ds-item-select-shadow-active);
-}
-
-.item-select--selected {
-  border-color: var(--ds-item-select-border-color-selected);
-  cursor: default;
-}
-
-.item-select--disabled {
-  border-color: var(--ds-item-select-border-color-disabled);
-  cursor: default;
-}
-
-.item-select--disabled .item-select__left {
-  opacity: 0.4;
-}
-
-.item-select__content {
-  flex: 1;
-}
-
-.item-select__image {
-  background-color: var(--ds-item-select-image-bg-default);
-  border-radius: var(--ds-item-select-image-border-radius);
-  height: var(--ds-item-select-image-height);
-  min-width: var(--ds-item-select-image-size);
-  width: var(--ds-item-select-image-width);
-}
-
-.item-select__radio {
-  pointer-events: none;
-}
-
-.item-select-group {
-  --ds-item-select-group-item-space:var(--ds-space-12);
-}
-
-.item-select-group:not(.item-select-group.item-select-group--horizontal) .item-select {
-  margin-bottom: var(--ds-item-select-group-item-space);
+  height: 100%;
+  -webkit-justify-content: center;
+  justify-content: center;
   width: 100%;
 }
 
-.item-select-group:not(.item-select-group.item-select-group--horizontal) .item-select:last-child {
-  margin-bottom: 0;
-}
-
-.item-select-group--horizontal {
-  display: -webkit-box;
-  display: -moz-box;
-  display: -ms-flexbox;
-  display: -webkit-flex;
-  display: flex;
-}
-
-@media (max-width: 576px) {
-  .item-select-group--horizontal {
-    -webkit-box-direction: normal;
-    -webkit-box-orient: vertical;
-    -moz-box-direction: normal;
-    -moz-box-orient: vertical;
-    -webkit-flex-direction: column;
-    -ms-flex-direction: column;
-    flex-direction: column;
-  }
-  .item-select-group--horizontal .item-select {
-    margin-bottom: var(--ds-item-select-group-item-space);
-  }
-  .item-select-group--horizontal .item-select:last-child {
-    margin-bottom: 0;
-  }
-}
-@media (min-width: 577px) {
-  .item-select-group--horizontal .item-select {
-    flex: 1;
-    margin-right: var(--ds-item-select-group-item-space);
-  }
-  .item-select-group--horizontal .item-select:last-child {
-    margin-right: 0;
-  }
-}
 .input {
   --ds-input-size-lg:var(--ds-size-48);
   --ds-input-size-md:var(--ds-size-40);
@@ -7135,200 +6853,6 @@ body {
     padding: 8px 0;
   }
 }
-.side--navigation {
-  border-right: 1px solid var(--border-ds-color-border-tertiary, #ddd);
-  display: flex;
-  flex-direction: column;
-  justify-content: space-between;
-  max-width: fit-content;
-  min-height: calc(100vh - 32px);
-  position: relative;
-}
-
-.side--navigation.close .side--navigation--block--label {
-  border-top: 1px solid;
-  border-color: var(--ds-color-border-tertiary);
-  width: 70%;
-}
-
-.side--navigation .navigation--wrapper {
-  color: #222;
-  display: block;
-  position: relative;
-  text-decoration: none;
-}
-
-.side--navigation .navigation--wrapper--user {
-  display: flex;
-  justify-content: space-between;
-  padding-right: var(--ds-space-12);
-}
-
-.side--navigation--block--label {
-  padding: var(--ds-space-12);
-}
-
-.side--navigation .collapse {
-  background: var(--background-ds-color-bg-brand, #72bf44);
-  border-radius: 100px;
-  box-shadow: 0 0 0 4px hsla(98, 49%, 82%, 0.8);
-  cursor: pointer;
-  height: 24px;
-  position: absolute;
-  right: -12px;
-  top: 24px;
-  width: 24px;
-}
-
-.navigation--item {
-  align-items: center;
-  border-radius: 4px;
-  color: #222;
-  display: flex;
-  justify-content: space-between;
-  padding: var(--ds-space-12);
-  position: relative;
-  text-decoration: none;
-}
-
-.navigation--item--expandable--icon {
-  transition: 0.3s;
-}
-
-.navigation--item--expandable--icon.open {
-  transform: rotate(180deg);
-}
-
-.navigation--item--wrapper {
-  align-items: center;
-  display: flex;
-}
-
-.navigation--item--block-header {
-  align-items: flex-start;
-  flex-direction: column;
-  padding: 24px 12px;
-}
-
-.navigation--item--block-header .navigation--item--wrapper {
-  align-items: flex-start;
-  flex-direction: column-reverse;
-}
-
-.navigation--item--block-header button {
-  margin-top: 24px;
-}
-
-.navigation--item--main.expandable {
-  cursor: pointer;
-}
-
-.navigation--item--main a {
-  color: #222;
-  text-decoration: none;
-}
-
-.navigation--item--main span {
-  padding-right: var(--ds-space-8);
-}
-
-.navigation--item--main:after {
-  background: var(--icon-ds-color-icon-selected, #72bf44);
-  border-radius: 4px 0 0 4px;
-  content: "";
-  display: none;
-  height: 20px;
-  position: absolute;
-  right: 0;
-  top: 50%;
-  transform: translateY(-50%);
-  width: 4px;
-}
-
-.navigation--item--main.active:after {
-  display: block;
-}
-
-.navigation--item--main.active {
-  background: var(--ds-color-bg-container-light);
-}
-
-.navigation--item--main .navigation-item-label {
-  padding-left: var(--ds-space-8);
-}
-
-.navigation--item--sub .navigation--item--wrapper > * {
-  align-items: center;
-  display: flex;
-}
-
-.navigation--item--sub .navigation--item--as--wrapper.close {
-  display: none;
-}
-
-.navigation--item--sub i {
-  padding-right: var(--space-8);
-}
-
-.navigation--item--sub a {
-  color: #222;
-  text-decoration: none;
-}
-
-.navigation--item--user {
-  align-items: center;
-  padding: var(--ds-space-12);
-}
-
-.navigation--item--user .avatar {
-  margin-right: var(--ds-space-8);
-}
-
-.navigation--item--user:hover .avatar {
-  border: 1px solid #ddd;
-}
-
-.navigation--item--as--wrapper.close > * :nth-child(2), .navigation--item--as--wrapper.close > * :nth-child(3) {
-  display: none;
-}
-
-.navigation--item--as--wrapper > * {
-  align-items: center;
-  display: flex;
-}
-
-.navigation--items--child {
-  height: 0;
-  margin-left: 20px;
-  overflow: hidden;
-  transition: 0.3s;
-}
-
-.navigation--items--child.isOpen {
-  border: 1px solid #ddd;
-  border-radius: 4px;
-  display: none;
-  padding-right: 40px;
-  position: absolute;
-  right: -176px;
-  top: 0;
-}
-
-.navigation--items--child.active {
-  display: block;
-  height: auto;
-  overflow: visible;
-}
-
-.navigation--items--child--title {
-  display: none;
-}
-
-.navigation--items--child--title.active {
-  display: block;
-  padding: var(--space-12);
-}
-
 .side-sheet {
   --ds-side-sheet-width-sm:620px;
   --ds-side-sheet-width-lg:740px;