@ilo-org/styles 0.1.5 → 0.1.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
@@ -26,11 +26,13 @@
26
26
  }
27
27
 
28
28
  &--headline {
29
+ border-bottom: px-to-rem(3px) solid $color-base-neutrals-lighter;
29
30
  margin-bottom: px-to-rem($spacing-padding-3);
30
31
  margin-top: px-to-rem(9px);
31
32
  @include font-styles("base");
32
33
  font-family: $fonts-display;
33
34
  font-weight: 700;
35
+ padding-bottom: px-to-rem($spacing-padding-2);
34
36
  }
35
37
 
36
38
  &--wrapper {
@@ -75,7 +77,6 @@
75
77
 
76
78
  &--modal {
77
79
  display: none;
78
- position: relative;
79
80
 
80
81
  & > * {
81
82
  opacity: 0;
@@ -102,7 +103,7 @@
102
103
  }
103
104
 
104
105
  .toc--modal--close {
105
- bottom: 0;
106
+ top: 0;
106
107
  height: px-to-rem(40px);
107
108
  right: 0;
108
109
  position: absolute;
@@ -1,5 +1,6 @@
1
1
  @use "../tokens" as *;
2
2
  @use "../functions" as *;
3
+ @use "../animations" as *;
3
4
  @import "../mixins";
4
5
 
5
6
  .ilo--tabs {
@@ -20,6 +21,7 @@
20
21
  font-weight: inherit;
21
22
  line-height: inherit;
22
23
  text-decoration: none;
24
+ @include globaltransition("color, background-color, border-color");
23
25
 
24
26
  &:visited {
25
27
  background: map-get($color, "link", "background", "visited");
@@ -34,6 +36,7 @@
34
36
  map-get($color, "link", "underline", "hover");
35
37
  color: map-get($color, "link", "text", "hover");
36
38
  text-decoration: none;
39
+ @include globaltransition("color, background-color, border-color");
37
40
  }
38
41
 
39
42
  &:active {
@@ -74,10 +77,12 @@
74
77
  padding-right: $spacing-padding-3;
75
78
  text-decoration: none;
76
79
  @include font-styles("label-medium");
80
+ @include globaltransition("color, background-color, border-color");
77
81
 
78
82
  &[aria-selected="true"] {
79
83
  background-color: $color-base-neutrals-white;
80
84
  border-top: px-to-rem(3px) solid $color-ux-labels-actionable;
85
+ @include globaltransition("color, background-color, border-color");
81
86
  }
82
87
 
83
88
  &.icon {
@@ -98,6 +103,7 @@
98
103
  background-color: $color-base-blue-light;
99
104
  color: $color-base-blue-medium;
100
105
  outline: none;
106
+ @include globaltransition("color, background-color, border-color");
101
107
 
102
108
  &.has--tooltip {
103
109
  .ilo--tooltip--wrapper {
@@ -425,7 +425,8 @@
425
425
 
426
426
  &--volume,
427
427
  .vjs-volume-panel {
428
- bottom: 1px;
428
+ border-bottom: 1px solid;
429
+ bottom: 0;
429
430
  display: none;
430
431
  flex-direction: column;
431
432
  height: 140px;
@@ -499,6 +500,7 @@
499
500
  &--setvolume,
500
501
  .vjs-volume-control {
501
502
  background: $color-ux-video-controls-hover-background;
503
+ border-left: 3px solid rgb(184, 196, 204);
502
504
  display: none;
503
505
  height: px-to-rem($spacing-ux-video-controls-height);
504
506
  order: 1;
@@ -506,7 +508,7 @@
506
508
  position: absolute;
507
509
  transform: rotate(270deg);
508
510
  transform-origin: -4px -4px;
509
- top: 6px;
511
+ top: 9px;
510
512
  width: px-to-rem(138px);
511
513
  }
512
514