@ilo-org/styles 0.13.3 → 0.14.0

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": "0.13.3",
4
+ "version": "0.14.0",
5
5
  "repository": {
6
6
  "type": "git",
7
7
  "url": "https://github.com/international-labour-organization/designsystem.git",
@@ -0,0 +1,6 @@
1
+ .ilo--icon {
2
+ &:not([data-js-processed="true"]) {
3
+ height: 24px;
4
+ width: 24px;
5
+ }
6
+ }
@@ -782,7 +782,7 @@
782
782
  cursor: pointer;
783
783
  font-family: $fonts-display;
784
784
  font-weight: 500;
785
- padding: spacing(4) spacing(4) spacing(4) spacing(8);
785
+ padding: spacing(5) spacing(4) spacing(4) spacing(8);
786
786
  position: relative;
787
787
  transition: all 150ms ease-out;
788
788
 
@@ -802,7 +802,7 @@
802
802
  }
803
803
 
804
804
  [dir="rtl"] & {
805
- padding: 16px 32px 16px 16px;
805
+ padding: spacing(5) spacing(8) spacing(4) spacing(4);
806
806
 
807
807
  &::before {
808
808
  @include dataurlicon("arrowright", $brand-ilo-dark-blue);
@@ -6,9 +6,14 @@
6
6
  display: flex;
7
7
 
8
8
  .ilo--fieldset {
9
+ position: relative;
9
10
  width: 100%;
10
11
  }
11
12
 
13
+ .ilo--input {
14
+ padding-inline-end: spacing(14);
15
+ }
16
+
12
17
  &--button {
13
18
  background-color: map-get(
14
19
  $color,
@@ -68,11 +73,38 @@
68
73
  }
69
74
  }
70
75
 
76
+ &--clear-button {
77
+ display: none;
78
+ align-items: center;
79
+ cursor: pointer;
80
+
81
+ &.show {
82
+ display: inline;
83
+ position: absolute;
84
+ top: 12px;
85
+ right: 2%;
86
+ }
87
+ }
88
+
89
+ // Remove the default clear button in search
90
+ [type="search"]::-webkit-search-cancel-button {
91
+ -webkit-appearance: none;
92
+ -moz-appearance: none;
93
+ appearance: none;
94
+ }
95
+
71
96
  [dir="rtl"] & {
72
- .ilo--searchfield--button {
73
- border-left: px-to-rem(2px) solid
74
- $color-formelements-inputbutton-default-border-left;
75
- border-right: 0 solid $color-formelements-inputbutton-default-border-right;
97
+ .ilo--searchfield {
98
+ &--button {
99
+ border-left: px-to-rem(2px) solid
100
+ $color-formelements-inputbutton-default-border-left;
101
+ border-right: 0;
102
+ }
103
+ &--clear-button {
104
+ &.show {
105
+ right: 95%;
106
+ }
107
+ }
76
108
  }
77
109
  }
78
110
  }
@@ -55,3 +55,4 @@
55
55
  @use "video-legacy";
56
56
  @use "video";
57
57
  @use "socialmedia";
58
+ @use "icon";