@inera/ids-design 5.1.2 → 5.2.0

package/components/form/select-multiple/select-multiple.css

@@ -1,55 +1,16 @@
-/* 1177 Typography - no margins */
 /*******
-* FORM
+* BUTTONS
 ********/
-.ids-select {
-  font-family: var(--font-family_1) !important;
-  padding: 0.75rem 1.25rem;
-  background-color: var(--IDS-INPUT_BACKGROUND);
-  border: var(--IDS-INPUT_BORDER);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
-  border-radius: var(--IDS-INPUT_BORDER-RADIUS);
-  font-size: 16px;
-  color: var(--IDS-INPUT_COLOR);
-  display: block;
-}
-.ids-select:disabled {
-  background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
-  border: none;
-  background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
-}
-
-.ids-label-wrapper {
-  display: inline-flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.ids-select-wrapper::after, .ids-select ::after {
-  content: "";
-  width: 12px;
-  height: 100%;
-  display: block;
-  position: absolute;
-  transform: rotate(90deg);
-  right: 25px;
-  top: 0px;
-  bottom: 0px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON);
-  pointer-events: none;
-}
-
 /*******
-* Accessibility
+* SCROLLBAR
 ********/
-/* headings */
-/* 1177 Typography - no margins */
 /*******
 * FORM
 ********/
-.ids-select {
+/*******
+* A11Y
+********/
+.ids-select-multiple__select {
   font-family: var(--font-family_1) !important;
   padding: 0.75rem 1.25rem;
   background-color: var(--IDS-INPUT_BACKGROUND);
@@ -59,99 +20,76 @@
   font-size: 16px;
   color: var(--IDS-INPUT_COLOR);
   display: block;
+  cursor: pointer;
+  appearance: none !important;
+  -webkit-appearance: none !important;
+  -moz-appearance: none !important;
+  display: inline-block !important;
+  padding-right: 50px !important;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: var(--select_border);
+  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
+  width: 100% !important;
 }
-.ids-select:disabled {
+.ids-select-multiple__select:disabled {
   background: var(--IDS-INPUT--DISABLED_BACKGROUND-COLOR);
   border: none;
   background-image: var(--IDS-INPUT--DISABLED_BACKGROUND-IMAGE);
 }
-
-.ids-label-wrapper {
-  display: inline-flex;
-  gap: 10px;
-  align-items: center;
-}
-
-.ids-select-wrapper::after, .ids-select ::after {
-  content: "";
-  width: 12px;
-  height: 100%;
-  display: block;
-  position: absolute;
-  transform: rotate(90deg);
-  right: 25px;
-  top: 0px;
-  bottom: 0px;
-  background-position: center;
-  background-repeat: no-repeat;
-  background-image: var(--IDS-SELECT__CHEVRON-ICON);
-  pointer-events: none;
-}
-
-/*******
-* Accessibility
-********/
-/* headings */
-.ids-select.ids-input--invalid {
+.ids-select-multiple__select.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
   background-image: var(--IDS-FORM--INVALID__BACKGROUND-IMAGE);
   border: 1px solid transparent;
 }
-
-.ids-select:disabled {
+.ids-select-multiple__select:disabled {
   color: var(--IDS-FORM--DISABLED__COLOR);
   background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM-DISABLED_BORDER);
   font-style: italic !important;
   background-image: var(--IDS-FORM--DISABLED__BACKGROUND-IMAGE);
 }
-
-.ids-select {
-  cursor: pointer;
-  appearance: none !important;
-  -webkit-appearance: none !important;
-  -moz-appearance: none !important;
-  display: inline-block !important;
-  padding-right: 50px !important;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: var(--select_border);
-  border-bottom: var(--IDS-INPUT_BORDER-BOTTOM);
-  width: 100% !important;
-}
-.ids-select.ids-input--light {
+.ids-select-multiple__select.ids-input--light {
   background-color: white;
 }
-.ids-select:focus {
+.ids-select-multiple__select:focus {
   outline: var(--IDS-FOCUS_OUTLINE);
   outline-offset: var(--IDS-FOCUS_OUTLINE-OFFSET) !important;
 }
 
-.ids-select-wrapper {
+.ids-select-multiple-wrapper {
   position: relative;
   display: flex;
 }
-.ids-select-wrapper:has(.ids-input--invalid)::after {
+.ids-select-multiple-wrapper::after {
+  content: "";
+  width: 12px;
+  height: 100%;
+  display: block;
+  position: absolute;
+  transform: rotate(90deg);
+  right: 25px;
+  top: 0px;
+  bottom: 0px;
+  background-position: center;
+  background-repeat: no-repeat;
+  background-image: var(--IDS-SELECT__CHEVRON-ICON);
+  pointer-events: none;
+}
+.ids-select-multiple-wrapper:has(.ids-input--invalid)::after {
   background-image: var(--IDS-SELECT--INVALID__CHEVRON-ICON);
 }
-.ids-select-wrapper:has(.ids-select:disabled)::after {
+.ids-select-multiple-wrapper:has(.ids-select:disabled)::after {
   background-image: var(--IDS-SELECT--DISABLED__CHEVRON-ICON);
 }
 
-.ids-select:disabled {
-  cursor: default;
-}
-
-.ids-select {
-  text-align: left;
-}
-
 .ids-select-multiple__dropdown__wrapper {
   position: relative;
 }
 .ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown {
   background: #ffffff;
-  box-shadow: 0px 0px 6px rgba(0, 0, 0, 0.3);
+  box-shadow: 0 0 6px rgba(0, 0, 0, 0.3);
   border-radius: var(--select-multiple-dropdown_border-radius);
   position: absolute;
   z-index: 10;
@@ -165,27 +103,64 @@
   padding: 10px;
   overflow-y: auto;
 }
-
-#ids-label-wrapper {
-  display: inline-flex;
-  gap: 10px;
-  align-items: center;
-  margin-bottom: 5px;
+.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar {
+  width: 14px;
+  position: absolute;
+  margin-left: -20px;
+  margin-top: 0;
+}
+.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-track {
+  background: var(--IDS-SCROLL_TRACK-COLOR);
+  border-radius: 10px;
+  margin-top: 0;
+  margin-bottom: 0;
+}
+.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-resizer {
+  appearance: none;
+  background-image: var(--IDS-TEXTAREA-RESIZER-IMAGE);
+  background-repeat: no-repeat;
+  background-position: center center;
+  background-size: cover;
+}
+.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-corner {
+  background-color: transparent;
+}
+.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-thumb {
+  cursor: auto;
+  background: var(--IDS-SCROLL_COLOR);
+  border-radius: 10px;
+  box-sizing: border-box;
+  border: 3px solid var(--IDS-SCROLL_TRACK-COLOR);
+}
+.ids-select-multiple__dropdown__wrapper .ids-select-multiple__dropdown .ids-select-multiple__dropdown__inner::-webkit-scrollbar-thumb:hover {
+  background: var(--IDS-SCROLL_HOVER-COLOR);
 }
 
 .placeholder {
   color: var(--IDS-FORM__PLACEHOLDER__COLOR);
 }
 
-label {
-  font-family: var(--font-family_1);
-  color: var(--IDS-FORM__LABEL__COLOR);
-}
-
 :host([disabled]) input {
   color: var(--IDS-FORM--DISABLED__COLOR);
   background-color: var(--IDS-FORM--DISABLED__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM-DISABLED_BORDER);
   font-style: italic !important;
   background-image: var(--IDS-FORM--DISABLED__BACKGROUND-IMAGE);
+}
+
+.ids-select-multiple-label-wrapper {
+  display: inline-flex;
+  align-items: flex-start;
+  gap: 8px;
+  margin-bottom: 5px;
+  margin-right: 8px;
+}
+.ids-select-multiple-label-wrapper .ids-label-tooltip-wrapper label {
+  display: inline;
+  top: -3px;
+  position: relative;
+  margin-right: 8px;
+}
+.ids-select-multiple-label-wrapper .ids-label-tooltip-wrapper label {
+  margin-right: 4px;
 }

package/components/grid/column/column.css

@@ -6,6 +6,7 @@
   max-width: 100%;
 }
 
+/* Cols */
 :host([cols=auto]),
 .ids-col-auto {
   flex: 0 0 auto;
@@ -84,7 +85,6 @@
   max-width: 100%;
 }
 
-/* Cols */
 /* offset */
 :host([offset=none]),
 .ids-col-offset-none {

package/components/header-1177/composite-header-1177.css

@@ -1,11 +1,15 @@
-/* 1177 Typography - no margins */
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
 /*******
 * FORM
 ********/
 /*******
-* Accessibility
+* A11Y
 ********/
-/* headings */
 @media (max-width: 1023px) {
   .ids-desktop {
     display: none !important;
@@ -633,26 +637,6 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   max-width: 100% !important;
 }
 
-@media (max-width: 1023px) {
-  .ids-desktop {
-    display: none !important;
-  }
-}
-
-@media (min-width: 1024px) {
-  .ids-mobile {
-    display: none !important;
-  }
-}
-
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-/*******
-* Accessibility
-********/
-/* headings */
 .ids-header-1177--unresponsive .ids-header-1177__items__item {
   display: flex;
   flex-direction: column;
@@ -788,26 +772,6 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   font-size: 1.125rem;
 }
 
-@media (max-width: 1023px) {
-  .ids-desktop {
-    display: none !important;
-  }
-}
-
-@media (min-width: 1024px) {
-  .ids-mobile {
-    display: none !important;
-  }
-}
-
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-/*******
-* Accessibility
-********/
-/* headings */
 .ids-header-1177--unresponsive .ids-header-1177__avatar {
   grid-column: 3;
   justify-self: end;
@@ -1075,18 +1039,6 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   margin-right: 0.5rem;
 }
 
-@media (max-width: 1023px) {
-  .ids-desktop {
-    display: none !important;
-  }
-}
-
-@media (min-width: 1024px) {
-  .ids-mobile {
-    display: none !important;
-  }
-}
-
 .ids-header-1177--unresponsive nav.ids-header-1177__nav {
   position: relative;
   background-color: white;
@@ -1171,31 +1123,11 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   max-width: 100%;
 }
 
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-/*******
-* Accessibility
-********/
-/* headings */
-@media (max-width: 1023px) {
-  .ids-desktop {
-    display: none !important;
-  }
-}
-
-@media (min-width: 1024px) {
-  .ids-mobile {
-    display: none !important;
-  }
-}
-
 .ids-header-1177--unresponsive .ids-header-1177__nav-item > a, .ids-header-1177--unresponsive .ids-header-1177__nav-item > button,
 .ids-header-1177--unresponsive .ids-header-1177__nav-item ::slotted(a) {
   display: flex;
   align-items: center;
-  padding: 14px 16px;
+  padding: 14px 10px;
   position: relative;
   text-decoration: none;
   cursor: pointer;
@@ -1210,11 +1142,15 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   border-radius: 0px;
   border: none;
 }
-.ids-header-1177--unresponsive .ids-header-1177__nav-item > a:focus, .ids-header-1177--unresponsive .ids-header-1177__nav-item > a:hover, .ids-header-1177--unresponsive .ids-header-1177__nav-item > button:focus, .ids-header-1177--unresponsive .ids-header-1177__nav-item > button:hover {
+.ids-header-1177--unresponsive .ids-header-1177__nav-item > a:focus, .ids-header-1177--unresponsive .ids-header-1177__nav-item > button:focus {
   outline: var(--IDS-FOCUS_OUTLINE);
   outline-offset: -2px !important;
 }
-.ids-header-1177--unresponsive .ids-header-1177__nav-item > a:focus:after, .ids-header-1177--unresponsive .ids-header-1177__nav-item > a:hover:after, .ids-header-1177--unresponsive .ids-header-1177__nav-item > button:focus:after, .ids-header-1177--unresponsive .ids-header-1177__nav-item > button:hover:after {
+.ids-header-1177--unresponsive .ids-header-1177__nav-item > a:focus:after, .ids-header-1177--unresponsive .ids-header-1177__nav-item > button:focus:after {
+  width: auto;
+  right: 0px;
+}
+.ids-header-1177--unresponsive .ids-header-1177__nav-item > a:hover:after, .ids-header-1177--unresponsive .ids-header-1177__nav-item > button:hover:after {
   width: auto;
   right: 0px;
 }
@@ -1294,7 +1230,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
 .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item ::slotted(a) {
   display: flex;
   align-items: center;
-  padding: 14px 16px;
+  padding: 14px 10px;
   position: relative;
   text-decoration: none;
   cursor: pointer;
@@ -1309,11 +1245,15 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   border-radius: 0px;
   border: none;
 }
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > a:focus, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > a:hover, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > button:focus, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > button:hover {
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > a:focus, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > button:focus {
   outline: var(--IDS-FOCUS_OUTLINE);
   outline-offset: -2px !important;
 }
-.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > a:focus:after, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > a:hover:after, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > button:focus:after, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > button:hover:after {
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > a:focus:after, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > button:focus:after {
+  width: auto;
+  right: 0px;
+}
+.ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > a:hover:after, .ids-header-1177:not(.ids-header-1177--unresponsive) .ids-header-1177__nav-item > button:hover:after {
   width: auto;
   right: 0px;
 }
@@ -1402,7 +1342,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
 :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) ::slotted(a) {
   display: flex;
   align-items: center;
-  padding: 14px 16px;
+  padding: 14px 10px;
   position: relative;
   text-decoration: none;
   cursor: pointer;
@@ -1417,11 +1357,15 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   border-radius: 0px;
   border: none;
 }
-:host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > a:focus, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > a:hover, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > button:focus, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > button:hover {
+:host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > a:focus, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > button:focus {
   outline: var(--IDS-FOCUS_OUTLINE);
   outline-offset: -2px !important;
 }
-:host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > a:focus:after, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > a:hover:after, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > button:focus:after, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > button:hover:after {
+:host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > a:focus:after, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > button:focus:after {
+  width: auto;
+  right: 0px;
+}
+:host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > a:hover:after, :host .ids-header-1177__nav-item:not(.ids-header-1177__nav-item--unresponsive) > button:hover:after {
   width: auto;
   right: 0px;
 }
@@ -1505,7 +1449,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
 :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive ::slotted(a) {
   display: flex;
   align-items: center;
-  padding: 14px 16px;
+  padding: 14px 10px;
   position: relative;
   text-decoration: none;
   cursor: pointer;
@@ -1520,11 +1464,15 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   border-radius: 0px;
   border: none;
 }
-:host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > a:focus, :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > a:hover, :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > button:focus, :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > button:hover {
+:host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > a:focus, :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > button:focus {
   outline: var(--IDS-FOCUS_OUTLINE);
   outline-offset: -2px !important;
 }
-:host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > a:focus:after, :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > a:hover:after, :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > button:focus:after, :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > button:hover:after {
+:host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > a:focus:after, :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > button:focus:after {
+  width: auto;
+  right: 0px;
+}
+:host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > a:hover:after, :host .ids-header-1177__nav-item.ids-header-1177__nav-item--unresponsive > button:hover:after {
   width: auto;
   right: 0px;
 }
@@ -1603,31 +1551,11 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   max-width: 100% !important;
 }
 
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-/*******
-* Accessibility
-********/
-/* headings */
-@media (max-width: 1023px) {
-  .ids-desktop {
-    display: none !important;
-  }
-}
-
-@media (min-width: 1024px) {
-  .ids-mobile {
-    display: none !important;
-  }
-}
-
 .ids-header-1177__nav-mobile__menu {
   background: none;
   color: inherit;
   border: none;
-  padding: 0px;
+  padding: 0;
   font: inherit;
   cursor: pointer;
   outline: inherit;
@@ -1743,7 +1671,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   background: none;
   color: inherit;
   border: none;
-  padding: 0px;
+  padding: 0;
   font: inherit;
   cursor: pointer;
   outline: inherit;
@@ -1786,7 +1714,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   background: none;
   color: inherit;
   border: none;
-  padding: 0px;
+  padding: 0;
   font: inherit;
   cursor: pointer;
   outline: inherit;
@@ -1834,7 +1762,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   background: none;
   color: inherit;
   border: none;
-  padding: 0px;
+  padding: 0;
   font: inherit;
   cursor: pointer;
   outline: inherit;
@@ -1881,7 +1809,7 @@ header.ids-header-1177.ids-header-1177--fluid .ids-header-1177__container .ids-h
   background: none;
   color: inherit;
   border: none;
-  padding: 0px;
+  padding: 0;
   font: inherit;
   cursor: pointer;
   outline: inherit;

package/components/header-1177/header-1177-avatar.css

@@ -10,14 +10,6 @@
   }
 }
 
-/* 1177 Typography - no margins */
-/*******
-* FORM
-********/
-/*******
-* Accessibility
-********/
-/* headings */
 .ids-header-1177--unresponsive .ids-header-1177__avatar {
   grid-column: 3;
   justify-self: end;

package/components/header-1177/header-1177-item.css

@@ -10,14 +10,18 @@
   }
 }
 
-/* 1177 Typography - no margins */
+/*******
+* BUTTONS
+********/
+/*******
+* SCROLLBAR
+********/
 /*******
 * FORM
 ********/
 /*******
-* Accessibility
+* A11Y
 ********/
-/* headings */
 .ids-header-1177--unresponsive .ids-header-1177__items__item {
   display: flex;
   flex-direction: column;