@inera/ids-design 7.1.1 → 7.1.3

package/themes/inera-admin/inera-admin.css

@@ -3371,6 +3371,10 @@ body.ids {
 /*******
 * A11Y
 ********/
+.ids-link:focus {
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
+}
 .ids-link {
   font-family: var(--IDS-LINK__FONT-FAMILY);
   color: var(--IDS-LINK--COLOR-PRESET-1__COLOR);
@@ -3384,10 +3388,6 @@ body.ids {
   text-decoration: underline;
   position: relative;
 }
-.ids-link:focus {
-  outline: var(--IDS-FOCUS__OUTLINE);
-  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
-}
 .ids-link:has(.ids-icon), .ids-link.ids-link--old-icon {
   text-decoration: none;
   display: inline-flex;
@@ -3670,6 +3670,8 @@ body.ids {
 .ids button.ids-button.ids-button--active {
   background-color: var(--IDS-BUTTON--ACTIVE__BACKGROUND-COLOR);
   box-shadow: var(--IDS-BUTTON--ACTIVE__BOX-SHADOW);
+  outline: var(--IDS-FOCUS__OUTLINE);
+  outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
 .ids .ids-button:focus,
 .ids-button:focus,
@@ -3733,6 +3735,8 @@ body.ids {
 .ids button.ids-button.ids-button--secondary:active {
   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;
 }
 .ids .ids-button.ids-button--secondary:focus,
 .ids-button.ids-button--secondary:focus,
@@ -3784,6 +3788,8 @@ body.ids {
   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;
 }
 .ids .ids-button.ids-button--tertiary:focus,
 .ids-button.ids-button--tertiary:focus,
@@ -3867,6 +3873,8 @@ body.ids {
 .ids button.ids-button.ids-button--icon.ids-button--active {
   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;
 }
 .ids .ids-button.ids-button--icon:focus,
 .ids-button.ids-button--icon:focus,
@@ -4454,10 +4462,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  width: 100% !important;
-  height: var(--IDS-INPUT__HEIGHT);
-  line-height: 1.5rem;
-  font-size: 1rem;
 }
 .ids-input:disabled, .ids-input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4488,6 +4492,12 @@ input:focus + .ids-checkbox input::before {
   outline: var(--IDS-FOCUS__OUTLINE);
   outline-offset: var(--IDS-FOCUS__OUTLINE-OFFSET) !important;
 }
+.ids-input {
+  width: 100% !important;
+  height: var(--IDS-INPUT__HEIGHT);
+  line-height: 1.5rem;
+  font-size: 1rem;
+}
 .ids-input.ids-input--search, .ids-input[type=search] {
   margin-top: 0;
   margin-bottom: 0;
@@ -4529,15 +4539,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  height: var(--IDS-INPUT__HEIGHT);
-  cursor: pointer;
-  display: inline-block !important;
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
-  text-align: left;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  border: var(--IDS-INPUT__BORDER);
-  width: 100% !important;
 }
 .ids-select:disabled, .ids-select[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4564,6 +4565,17 @@ input:focus + .ids-checkbox input::before {
 .ids-select.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+.ids-select {
+  height: var(--IDS-INPUT__HEIGHT);
+  cursor: pointer;
+  display: inline-block !important;
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT) !important;
+  text-align: left;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  border: var(--IDS-INPUT__BORDER);
+  width: 100% !important;
+}
 .ids-select.ids-input--invalid, .ids-select[aria-invalid=true] {
   background: var(--IDS-FORM--INVALID__BACKGROUND-COLOR) !important;
   border: var(--IDS-FORM--INVALID__BORDER);
@@ -4640,8 +4652,6 @@ input:focus + .ids-checkbox input::before {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  padding: var(--IDS-TEXTAREA__PADDING);
-  box-sizing: border-box;
 }
 .ids-textarea textarea:disabled, .ids-textarea textarea[readonly],
 .ids-textarea .ids-textarea__textarea:disabled,
@@ -4702,6 +4712,11 @@ input:focus + .ids-checkbox input::before {
 .ids-textarea .ids-textarea__textarea::-webkit-scrollbar-corner {
   background-color: transparent;
 }
+.ids-textarea textarea,
+.ids-textarea .ids-textarea__textarea {
+  padding: var(--IDS-TEXTAREA__PADDING);
+  box-sizing: border-box;
+}
 .ids-textarea textarea:focus,
 .ids-textarea .ids-textarea__textarea:focus {
   box-shadow: var(--IDS-INPUT__BOX-SHADOW);
@@ -4781,16 +4796,6 @@ input.ids-time__input {
   font-size: 1rem;
   color: var(--IDS-INPUT__COLOR);
   display: block;
-  cursor: pointer;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance: none;
-  display: inline-block;
-  box-sizing: border-box;
-  width: 100%;
-  height: var(--IDS-INPUT__HEIGHT);
-  padding: var(--IDS-INPUT__PADDING);
-  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
 }
 input.ids-time__input:disabled, input.ids-time__input[readonly] {
   color: var(--IDS-FORM--DISABLED__COLOR);
@@ -4817,6 +4822,18 @@ input.ids-time__input.ids-input--light:disabled, input.ids-time__input.ids-input
 input.ids-time__input.ids-input--light.ids-input--invalid {
   background-color: var(--IDS-FORM--INVALID__BACKGROUND-COLOR);
 }
+input.ids-time__input {
+  cursor: pointer;
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance: none;
+  display: inline-block;
+  box-sizing: border-box;
+  width: 100%;
+  height: var(--IDS-INPUT__HEIGHT);
+  padding: var(--IDS-INPUT__PADDING);
+  padding-right: var(--IDS-INPUT__ICON-PADDING-RIGHT);
+}
 input.ids-time__input::-webkit-calendar-picker-indicator {
   opacity: 0;
   appearance: none;