@ilo-org/styles 0.1.4 → 0.1.6

package/scss/components/_richtext.scss

@@ -9,6 +9,32 @@
 
   a {
     @include linkstyles();
+    border: none;
+    text-decoration: underline;
+
+    &:visited {
+      border: none;
+      text-decoration: underline;
+      text-decoration-color: map-get($color, "link", "underline", "visited");
+    }
+
+    &:hover {
+      border: none;
+      text-decoration: underline;
+      text-decoration-color: map-get($color, "link", "underline", "hover");
+    }
+
+    &:active {
+      border: none;
+      text-decoration: underline;
+      text-decoration-color: map-get($color, "link", "underline", "active");
+    }
+
+    &:focus {
+      border: none;
+      text-decoration: underline;
+      text-decoration-color: map-get($color, "link", "underline", "focus");
+    }
   }
 
   img {

package/scss/components/_table.scss

@@ -196,7 +196,7 @@
 
       &:hover,
       &:focus {
-        background-color: $color-ux-table-hover-background;
+        background-color: $color-ux-table-zebra-background;
       }
 
       .ilo--table--body--cell {

package/scss/components/_tableofcontents.scss

@@ -26,11 +26,13 @@
   }
 
   &--headline {
+    border-bottom: px-to-rem(3px) solid $color-base-neutrals-lighter;
     margin-bottom: px-to-rem($spacing-padding-3);
     margin-top: px-to-rem(9px);
     @include font-styles("base");
     font-family: $fonts-display;
     font-weight: 700;
+    padding-bottom: px-to-rem($spacing-padding-2);
   }
 
   &--wrapper {
@@ -75,7 +77,6 @@
 
   &--modal {
     display: none;
-    position: relative;
 
     & > * {
       opacity: 0;
@@ -102,7 +103,7 @@
     }
 
     .toc--modal--close {
-      bottom: 0;
+      top: 0;
       height: px-to-rem(40px);
       right: 0;
       position: absolute;

package/scss/components/_tabs.scss

@@ -3,9 +3,9 @@
 @import "../mixins";
 
 .ilo--tabs {
-  border-bottom: px-to-rem(4px) solid $color-base-neutrals-lighter;
-  border-left: px-to-rem(4px) solid $color-base-neutrals-lighter;
-  border-right: px-to-rem(4px) solid $color-base-neutrals-lighter;
+  border-bottom: px-to-rem(3px) solid $color-base-neutrals-lighter;
+  border-left: px-to-rem(3px) solid $color-base-neutrals-lighter;
+  border-right: px-to-rem(3px) solid $color-base-neutrals-lighter;
 
   &:not(.tabs--js) {
     .ilo--tabs--selection {
@@ -158,7 +158,7 @@
         }
 
         &--item {
-          width: min(calc(var(--tabscount) / 1 * 100%), 25%);
+          width: min(calc(var(--tabscount) / 1 * 100%), 100%);
         }
       }
     }

package/scss/components/_tag.scss

@@ -2,9 +2,13 @@
 @use "../functions" as *;
 @use "../mixins" as *;
 
-.ilo--tag-set {
+.ilo--tags {
   list-style: none;
 
+  .right-to-left & {
+    direction: rtl;
+  }
+
   &__item {
     display: inline-block;
     margin: map-get($spacing, "horizontal-rule");

package/scss/components/_textarea.scss

@@ -15,7 +15,7 @@
   );
   @include bordervalues("input", "formelements");
   box-sizing: border-box;
-  font-family: $fonts-display;
+  font-family: $fonts-copy;
   font-weight: map-get($type, "weights", "section");
   @include font-styles("label-medium");
   height: px-to-rem(

package/scss/components/_video.scss

@@ -425,7 +425,8 @@
 
     &--volume,
     .vjs-volume-panel {
-      bottom: 1px;
+      border-bottom: 1px solid;
+      bottom: 0;
       display: none;
       flex-direction: column;
       height: 140px;
@@ -499,6 +500,7 @@
     &--setvolume,
     .vjs-volume-control {
       background: $color-ux-video-controls-hover-background;
+      border-left: 3px solid rgb(184, 196, 204);
       display: none;
       height: px-to-rem($spacing-ux-video-controls-height);
       order: 1;
@@ -506,7 +508,7 @@
       position: absolute;
       transform: rotate(270deg);
       transform-origin: -4px -4px;
-      top: 6px;
+      top: 9px;
       width: px-to-rem(138px);
     }