@ilo-org/styles 1.14.3 → 1.15.1

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.
package/package.json CHANGED
@@ -1,7 +1,7 @@
1
1
  {
2
2
  "name": "@ilo-org/styles",
3
3
  "description": "Styles for products using ILO's Design System",
4
- "version": "1.14.3",
4
+ "version": "1.15.1",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/international-labour-organization/designsystem.git",
package/scss/_mixins.scss CHANGED
@@ -264,7 +264,7 @@
264
264
 
265
265
  // Adjust for RTL
266
266
  [dir="rtl"] & {
267
- transform: rotate(180deg);
267
+ transform: scaleX(-1);
268
268
  }
269
269
  }
270
270
  }
@@ -143,7 +143,6 @@
143
143
  box-shadow:
144
144
  4px 4px 0 1px var(--ilo-color-borders-focus) inset,
145
145
  -4px -4px 0 1px var(--ilo-color-borders-focus) inset;
146
- color: var(--ilo-button-labels-focus-color);
147
146
  @include globaltransition("color, background-color, border-color");
148
147
 
149
148
  &.#{$prefix}--small {
@@ -176,6 +176,10 @@
176
176
  margin-right: calc(1 * var(--ilo-spacing-base));
177
177
  }
178
178
  }
179
+
180
+ &--required {
181
+ color: var(--ilo-color-red-dark);
182
+ }
179
183
  }
180
184
 
181
185
  &--helper {
@@ -7,6 +7,7 @@
7
7
  // component.
8
8
  .ilo--input {
9
9
  appearance: none;
10
+ color: var(--ilo-color-light-text-default);
10
11
  background-color: var(--ilo-color-white);
11
12
  border: var(--ilo-border-md) solid var(--ilo-color-gray-base);
12
13
  box-sizing: border-box;
@@ -11,7 +11,7 @@
11
11
  --row-1-height: #{$row-1-lg};
12
12
 
13
13
  display: grid;
14
- grid-template-columns: min-content 1fr;
14
+ grid-template-columns: auto 1fr;
15
15
  grid-template-rows: repeat(minmax(var(--row-1-height), auto));
16
16
  max-width: px-to-rem(343px);
17
17
  width: 100%;
@@ -30,7 +30,6 @@
30
30
  flex-flow: column;
31
31
  justify-content: center;
32
32
  grid-row: 1;
33
- grid-column-end: -1;
34
33
  }
35
34
 
36
35
  &--figcaption--content {
@@ -6,8 +6,14 @@
6
6
  // Video Button
7
7
  // ======================================
8
8
  @mixin videobutton($name, $size: "standard") {
9
- $height: if($size == "big", 72px, 24px);
10
- $box: if($size == "big", 80px, 40px);
9
+ $height: 24px;
10
+ $box: 40px;
11
+
12
+ @if $size == "big" {
13
+ $height: 72px;
14
+ $box: 80px;
15
+ }
16
+
11
17
  $width: $height;
12
18
  $icon-color-default: rgba(237, 240, 242, 1);
13
19
  $icon-color-hover: rgba(30, 45, 190, 1);
@@ -58,6 +64,10 @@
58
64
 
59
65
  @include image-caption-styles;
60
66
 
67
+ &__theme__dark {
68
+ @include image-caption-dark-styles;
69
+ }
70
+
61
71
  // ? drupal style reset issue
62
72
  button {
63
73
  padding: 0;