@inera/ids-design 6.1.0 → 6.2.0

package/themes/inera/inera.css

@@ -2739,6 +2739,11 @@ body.ids {
   -moz-user-select: none;
   -ms-user-select: none;
 }
+.ids .ids-button [class*=" ids-icon-"],
+.ids-button [class*=" ids-icon-"],
+.ids button.ids-button [class*=" ids-icon-"] {
+  font-size: 1.125rem;
+}
 .ids .ids-button:hover,
 .ids-button:hover,
 .ids button.ids-button:hover {
@@ -2756,6 +2761,8 @@ body.ids {
 .ids .ids-button:focus,
 .ids-button:focus,
 .ids button.ids-button:focus {
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
@@ -2817,6 +2824,9 @@ body.ids {
 .ids .ids-button.ids-button--secondary:focus,
 .ids-button.ids-button--secondary:focus,
 .ids button.ids-button.ids-button--secondary:focus {
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
@@ -2830,6 +2840,7 @@ body.ids {
   box-shadow: none;
   font-family: var(--IDS-FONT-FAMILY-HEADING);
   text-decoration: underline;
+  text-underline-offset: 0.125rem;
 }
 .ids .ids-button.ids-button--tertiary.ids-button--s,
 .ids-button.ids-button--tertiary.ids-button--s,
@@ -2864,6 +2875,10 @@ body.ids {
 .ids .ids-button.ids-button--tertiary:focus,
 .ids-button.ids-button--tertiary:focus,
 .ids button.ids-button.ids-button--tertiary:focus {
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-100);
+  border-radius: var(--IDS-BUTTON__BORDER-RADIUS);
+  border: 0.063rem solid var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
@@ -2877,11 +2892,6 @@ body.ids {
   color: var(--IDS-BUTTON--DISABLED__COLOR);
   text-decoration: none;
 }
-.ids .ids-button [class^=ids-icon-],
-.ids-button [class^=ids-icon-],
-.ids button.ids-button [class^=ids-icon-] {
-  font-size: 1.125rem;
-}
 .ids .ids-button.ids-button--icon, .ids .ids-button.ids-button--fab,
 .ids-button.ids-button--icon,
 .ids-button.ids-button--fab,
@@ -2889,7 +2899,7 @@ body.ids {
 .ids button.ids-button.ids-button--fab {
   width: 2.75rem;
   height: 2.75rem !important;
-  border-radius: 100%;
+  border-radius: 100% !important;
   font-style: normal;
   font-weight: 400;
   line-height: 0 !important;
@@ -2948,6 +2958,8 @@ body.ids {
 .ids .ids-button.ids-button--icon:focus,
 .ids-button.ids-button--icon:focus,
 .ids button.ids-button.ids-button--icon:focus {
+  background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
+  color: var(--IDS-COLOR-NEUTRAL-100);
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
@@ -2987,8 +2999,6 @@ body.ids {
 .ids button.ids-button.ids-button--block {
   display: flex;
   width: 100%;
-  align-items: center;
-  justify-content: center;
 }
 @media (max-width: 1024px) {
   .ids .ids-button.ids-button--m-block,
@@ -2996,8 +3006,6 @@ body.ids {
   .ids button.ids-button.ids-button--m-block {
     display: flex;
     width: 100%;
-    align-items: center;
-    justify-content: center;
   }
 }
 @media (max-width: 640px) {
@@ -3006,8 +3014,6 @@ body.ids {
   .ids button.ids-button.ids-button--s-block {
     display: flex;
     width: 100%;
-    align-items: center;
-    justify-content: center;
   }
 }
 .ids .ids-button.ids-button--disabled, .ids .ids-button[disabled],
@@ -3456,63 +3462,6 @@ input:focus + .ids-checkbox input::before {
   font-style: italic;
 }
 
-input.ids-range {
-  appearance: none;
-  width: 100%;
-  height: 0.5rem;
-  background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
-  background-image: linear-gradient(var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR), var(--IDS-RANGE__SELECTION-BACKGROUND-COLOR));
-  background-repeat: no-repeat;
-  border: 0.063rem;
-  cursor: pointer;
-  display: block;
-  padding: 0;
-  border-radius: 1rem;
-  margin: 0;
-}
-input.ids-range::-ms-track {
-  width: 100%;
-  cursor: pointer;
-  background: transparent;
-  border-color: transparent;
-  color: transparent;
-}
-input.ids-range::-webkit-slider-thumb {
-  -webkit-appearance: none;
-  border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
-  height: 1.5rem;
-  width: 1.5rem;
-  border-radius: 100%;
-  background: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
-  cursor: pointer;
-}
-input.ids-range::-ms-thumb {
-  border: 0.125rem solid var(--IDS-COLOR-NEUTRAL-100);
-  height: 1.375rem;
-  width: 1.5rem;
-  border-radius: 100%;
-  cursor: pointer;
-}
-input.ids-range:disabled {
-  cursor: default;
-  appearance: none;
-  width: 100%;
-  height: 0.5rem;
-  background-color: var(--IDS-RANGE__BACKGROUND-COLOR);
-  background-image: linear-gradient(var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR), var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR));
-  background-repeat: no-repeat;
-  border: 0.063rem;
-  padding: 0;
-  border-radius: 1rem;
-}
-input.ids-range:disabled::-webkit-slider-thumb {
-  cursor: default;
-  background: var(--IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR);
-}
-input.ids-range:disabled::-ms-thumb {
-  cursor: default;
-}
-
 .ids-select {
   appearance: none !important;
   -webkit-appearance: none !important;
@@ -3920,6 +3869,88 @@ input:focus + .ids-toggle input:before {
   }
 }
 
+.ids-range .ids-label {
+  display: inline-block;
+  margin-bottom: 0.75rem !important;
+}
+
+.ids-range__input,
+input[type=range] {
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  box-sizing: border-box;
+  display: block;
+  padding: 0;
+  margin: 0;
+  width: 100%;
+  height: 0.5rem;
+  border: 0.0625rem solid var(--IDS-RANGE__BORDER-COLOR);
+  border-radius: 1rem;
+  background-size: 98% 100%;
+  background-repeat: no-repeat;
+  background-image: linear-gradient(var(--IDS-RANGE__FILL-BACKGROUND-COLOR), var(--IDS-RANGE__FILL-BACKGROUND-COLOR));
+  touch-action: pan-x;
+  -webkit-tap-highlight-color: transparent;
+  margin-bottom: 0.75rem;
+}
+.ids-range__input::-webkit-slider-thumb,
+input[type=range]::-webkit-slider-thumb {
+  -webkit-appearance: none;
+  height: 1.5rem;
+  width: 1.5rem;
+  outline: 0.1875rem solid var(--IDS-COLOR-NEUTRAL-100);
+  border-radius: 100%;
+  background-color: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+.ids-range__input::-moz-range-thumb,
+input[type=range]::-moz-range-thumb {
+  -moz-appearance: none;
+  height: 1.5rem;
+  width: 1.5rem;
+  outline: 0.1875rem solid var(--IDS-COLOR-NEUTRAL-100);
+  border-radius: 100%;
+  background-color: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+.ids-range__input::-ms-thumb,
+input[type=range]::-ms-thumb {
+  height: 1.5rem;
+  width: 1.5rem;
+  outline: 0.1875rem solid var(--IDS-COLOR-NEUTRAL-100);
+  border-radius: 100%;
+  background-color: var(--IDS-RANGE__THUMB-BACKGROUND-COLOR);
+  cursor: pointer;
+  position: relative;
+  z-index: 1;
+}
+.ids-range__input:disabled,
+input[type=range]:disabled {
+  cursor: default;
+  border: 0.0625rem dashed var(--IDS-RANGE--DISABLED__BORDER-COLOR);
+  background-image: linear-gradient(var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR), var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR));
+}
+.ids-range__input:disabled::-moz-range-thumb,
+input[type=range]:disabled::-moz-range-thumb {
+  cursor: default;
+  background: var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR);
+}
+.ids-range__input:disabled::-webkit-slider-thumb,
+input[type=range]:disabled::-webkit-slider-thumb {
+  cursor: default;
+  background: var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR);
+}
+.ids-range__input:disabled::-ms-thumb,
+input[type=range]:disabled::-ms-thumb {
+  cursor: default;
+  background: var(--IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR);
+}
+
 .ids-form-group__fieldset {
   border: none;
   margin: 0;
@@ -4095,7 +4126,7 @@ input:focus + .ids-toggle input:before {
   }
 }
 .ids .ids-heading-m .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--IDS-ANCHOR__COLOR) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
@@ -4128,7 +4159,7 @@ input:focus + .ids-toggle input:before {
   }
 }
 .ids .ids-heading-s .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--IDS-ANCHOR__COLOR) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
@@ -4154,7 +4185,7 @@ input:focus + .ids-toggle input:before {
   font-weight: var(--IDS-HEADING-XS__FONT-WEIGHT);
 }
 .ids .ids-heading-xs .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--IDS-ANCHOR__COLOR) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
@@ -4186,7 +4217,7 @@ input:focus + .ids-toggle input:before {
   }
 }
 .ids .ids-preamble .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--IDS-ANCHOR__COLOR) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
@@ -4210,7 +4241,7 @@ input:focus + .ids-toggle input:before {
   letter-spacing: 0;
 }
 .ids .ids-body .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--IDS-ANCHOR__COLOR) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
@@ -4238,7 +4269,7 @@ input:focus + .ids-toggle input:before {
   font-family: var(--IDS-FONT-FAMILY-BASE);
 }
 .ids .ids-small .ids-anchor {
-  color: var(--IDS-ANCHOR__COLOR);
+  color: var(--IDS-ANCHOR__COLOR) !important;
   text-decoration: none;
   text-underline-offset: 0.125rem;
 }
@@ -4261,6 +4292,21 @@ input:focus + .ids-toggle input:before {
   font-weight: var(--IDS-PAGE-LIST__FONT-WEIGHT);
   letter-spacing: var(--IDS-PAGE-LIST__LETTER-SPACING);
 }
+.ids .ids-pagelist .ids-anchor {
+  color: var(--IDS-ANCHOR__COLOR) !important;
+  text-decoration: none;
+  text-underline-offset: 0.125rem;
+}
+.ids .ids-pagelist .ids-anchor:visited {
+  color: var(--IDS-ANCHOR__COLOR);
+}
+.ids .ids-pagelist .ids-anchor:link {
+  text-decoration: underline;
+}
+.ids .ids-pagelist .ids-anchor:active, .ids .ids-pagelist .ids-anchor:hover {
+  color: var(--IDS-ANCHOR__HOVER-COLOR);
+  text-decoration: underline;
+}
 .ids ul.ids-bullet-list,
 .ids .ids-bullet-list {
   list-style: disc;
@@ -5009,25 +5055,17 @@ input:focus + .ids-toggle input:before {
 [class^=ids-icon-].ids-icon--text-start {
   margin-right: 0.5rem;
   position: relative;
-  bottom: -0.125rem;
+  top: -0.0938rem;
+  vertical-align: middle;
   flex-shrink: 0;
 }
-[class^=ids-icon-].ids-icon--text-start:before {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
 [class^=ids-icon-].ids-icon--text-end {
   margin-left: 0.5rem;
   position: relative;
-  bottom: -0.125rem;
+  top: -0.0938rem;
+  vertical-align: middle;
   flex-shrink: 0;
 }
-[class^=ids-icon-].ids-icon--text-end:before {
-  top: 50%;
-  left: 50%;
-  transform: translate(-50%, -50%);
-}
 [class^=ids-icon-].ids-icon--s {
   width: 1rem;
   height: 1rem;
@@ -5287,12 +5325,13 @@ input[type=search]::-webkit-search-results-decoration {
   --IDS-TOGGLE--DISABLED__KNOB-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
   --IDS-TOGGLE--DISABLED-CHECKED__KNOB-BACKGROUND-IMAGE: url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="1rem" height="0.688rem" viewBox="0 0 40 32" fill="none"><path xmlns="http://www.w3.org/2000/svg" fill-rule="evenodd" clip-rule="evenodd" d="M39.1772 0.674536C40.2151 1.62733 40.2798 3.23649 39.3218 4.26869L14.343 31.1817C13.8554 31.7071 13.1679 32.0041 12.4489 32C11.73 31.9958 11.046 31.6909 10.5646 31.1598L0.658175 20.2339C-0.287695 19.1907 -0.20415 17.5824 0.844778 16.6417C1.8937 15.7009 3.51081 15.784 4.45668 16.8273L12.4859 25.6828L35.5634 0.818302C36.5214 -0.213896 38.1394 -0.278263 39.1772 0.674536Z" fill="rgb(128,130,133)"></path></svg>');
   /* Range */
-  --IDS-RANGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-90);
+  --IDS-RANGE__BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-100);
+  --IDS-RANGE__BORDER-COLOR: var(--IDS-COLOR-ACCENT-40);
   --IDS-RANGE__THUMB-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
-  --IDS-RANGE__TICK-COLOR: var(--IDS-COLOR-NEUTRAL-20);
+  --IDS-RANGE__FILL-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
   --IDS-RANGE__TICK-LINE-COLOR: var(--IDS-COLOR-NEUTRAL-20);
-  --IDS-RANGE__SELECTION-BACKGROUND-COLOR: var(--IDS-COLOR-ACCENT-40);
-  --IDS-RANGE--DISABLED__SELECTION-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-RANGE--DISABLED__BORDER-COLOR: var(--IDS-COLOR-NEUTRAL-40);
+  --IDS-RANGE--DISABLED__FILL-BACKGROUND-COLOR: var(--IDS-COLOR-NEUTRAL-40);
   /**********************
   * COMPONENTS
   **********************/