@ilo-org/styles 0.1.7 → 0.1.8

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.
Files changed (17) hide show
  1. package/build/css/components/index.css +257 -91
  2. package/build/css/components/index.css.map +1 -1
  3. package/build/css/index.css +257 -91
  4. package/build/css/index.css.map +1 -1
  5. package/build/css/monorepo.css +257 -91
  6. package/build/css/monorepo.css.map +1 -1
  7. package/build/minified/index.css +1 -1
  8. package/build/minified/index.css.map +1 -1
  9. package/build/minified/monorepo.css +1 -1
  10. package/build/minified/monorepo.css.map +1 -1
  11. package/package.json +3 -3
  12. package/scss/components/_card.scss +101 -22
  13. package/scss/components/_checkbox.scss +2 -1
  14. package/scss/components/_linklist.scss +1 -0
  15. package/scss/components/_navigation.scss +1 -1
  16. package/scss/components/_tag.scss +83 -3
  17. package/scss/components/_tooltip.scss +1 -1
package/scss/components/_linklist.scss CHANGED
@@ -81,6 +81,7 @@
81
81
  padding-right: px-to-rem($spacing-padding-4);
82
82
  text-decoration: none;
83
83
  @include dataurlicon("arrowright", $color-link-text-default);
84
+ @include globaltransition("color, background-color, border-color");
84
85
 
85
86
  &:visited {
86
87
  color: map-get($color, "link", "text", "default");
package/scss/components/_navigation.scss CHANGED
@@ -488,7 +488,7 @@
488
488
  width: 32px;
489
489
 
490
490
  .right-to-left & {
491
- clip-path: polygon(0 0, 0 100%, 100% 100%);
491
+ clip-path: polygon(0 0, 0 100%, 100% 0);
492
492
  left: auto;
493
493
  right: -32px;
494
494
  }
package/scss/components/_tag.scss CHANGED
@@ -1,6 +1,7 @@
1
1
  @use "../tokens" as *;
2
2
  @use "../functions" as *;
3
- @use "../mixins" as *;
3
+ @use "../animations" as *;
4
+ @import "../mixins";
4
5
 
5
6
  .ilo--tags {
6
7
  list-style: none;
@@ -26,9 +27,11 @@
26
27
  font-size: inherit;
27
28
  font-weight: 500;
28
29
  line-height: inherit;
29
- padding: px-to-rem(10px) px-to-rem(map-get($spacing, "ui-padding-sm"));
30
+ padding: px-to-rem(10px) px-to-rem(map-get($spacing, "ui-padding-sm"))
31
+ px-to-rem(8px) px-to-rem(map-get($spacing, "ui-padding-sm"));
30
32
  text-decoration: none;
31
33
  $self: &;
34
+ @include globaltransition("color, background-color, border-color");
32
35
 
33
36
  &--active {
34
37
  background: map-get($color, "tag", "background", "active");
@@ -44,17 +47,24 @@
44
47
  color: map-get($color, "tag", "text", "active");
45
48
  cursor: pointer;
46
49
  outline: none;
50
+ pointer-events: none;
47
51
 
48
52
  &:hover {
49
53
  background: map-get($color, "tag", "background", "hover");
50
54
  color: map-get($color, "tag", "text", "hover");
51
55
  text-decoration: none;
56
+ @include globaltransition("color, background-color, border-color");
52
57
  }
53
58
 
54
59
  &:focus {
55
60
  background: map-get($color, "tag", "background", "focus");
56
61
  color: map-get($color, "tag", "text", "focus");
57
62
  outline: none;
63
+ @include globaltransition("color, background-color, border-color");
64
+ }
65
+
66
+ &.ilo--tag--active {
67
+ pointer-events: auto;
58
68
  }
59
69
  }
60
70
  }
@@ -76,12 +86,37 @@
76
86
  opacity: 1;
77
87
  outline: none;
78
88
  visibility: visible;
89
+ @include globaltransition("color, background-color, border-color");
90
+ }
91
+
92
+ &.icon__position--right {
93
+ .ilo--icon {
94
+ @include dataurlicon("close", map-get($color, "tag", "text", "active"));
95
+
96
+ height: 100%;
97
+ max-height: 28px;
98
+ max-width: 28px;
99
+ position: absolute;
100
+ right: 5px;
101
+ top: 5px;
102
+ width: 100%;
103
+ }
79
104
  }
80
105
 
81
106
  &:hover {
82
107
  background: map-get($color, "tag", "background", "hover");
83
108
  color: map-get($color, "tag", "text", "hover");
84
109
  text-decoration: none;
110
+ @include globaltransition("color, background-color, border-color");
111
+
112
+ &.icon__position--right {
113
+ .ilo--icon {
114
+ @include dataurlicon(
115
+ "close",
116
+ map-get($color, "tag", "text", "hover")
117
+ );
118
+ }
119
+ }
85
120
  }
86
121
 
87
122
  &:focus {
@@ -89,6 +124,27 @@
89
124
  color: map-get($color, "tag", "text", "focus");
90
125
  outline: none;
91
126
  }
127
+ }
128
+
129
+ &--reset {
130
+ @include font-styles("label-small");
131
+
132
+ cursor: pointer;
133
+ display: none;
134
+ opacity: 0;
135
+ position: relative;
136
+ visibility: hidden;
137
+
138
+ &.ilo--tag--active {
139
+ background: $color-base-neutrals-white;
140
+ border: 1.5px solid $color-base-neutrals-light;
141
+ color: map-get($color, "tag", "text", "active");
142
+ display: block;
143
+ opacity: 1;
144
+ outline: none;
145
+ visibility: visible;
146
+ @include globaltransition("color, background-color, border-color");
147
+ }
92
148
 
93
149
  &.icon__position--right {
94
150
  .ilo--icon {
@@ -99,9 +155,33 @@
99
155
  max-width: 28px;
100
156
  position: absolute;
101
157
  right: 5px;
102
- top: 6px;
158
+ top: 5px;
103
159
  width: 100%;
104
160
  }
105
161
  }
162
+
163
+ &:hover {
164
+ background: map-get($color, "tag", "background", "hover");
165
+ border: 1.5px solid map-get($color, "tag", "background", "hover");
166
+ color: map-get($color, "tag", "text", "hover");
167
+ text-decoration: none;
168
+ @include globaltransition("color, background-color, border-color");
169
+
170
+ &.icon__position--right {
171
+ .ilo--icon {
172
+ @include dataurlicon(
173
+ "close",
174
+ map-get($color, "tag", "text", "hover")
175
+ );
176
+ }
177
+ }
178
+ }
179
+
180
+ &:focus {
181
+ background: map-get($color, "tag", "background", "focus");
182
+ border: 1.5px solid map-get($color, "tag", "background", "focus");
183
+ color: map-get($color, "tag", "text", "focus");
184
+ outline: none;
185
+ }
106
186
  }
107
187
  }
package/scss/components/_tooltip.scss CHANGED
@@ -22,7 +22,7 @@
22
22
  );
23
23
  color: map-get($color, "tooltip", "default", "text");
24
24
  opacity: 0;
25
- padding: map-get($spacing, "ui-padding");
25
+ padding: px-to-rem($spacing-padding-1) px-to-rem($spacing-padding-1-5);
26
26
  position: absolute;
27
27
  transition: opacity 0.15s ease-in-out;
28
28
  visibility: hidden;