@ilo-org/styles 1.8.5 → 1.9.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.
Files changed (81) hide show
  1. package/css/components/accordion.css +1 -1
  2. package/css/components/blockquote.css +1 -1
  3. package/css/components/breadcrumb.css +1 -1
  4. package/css/components/button.css +1 -1
  5. package/css/components/checkbox.css +1 -1
  6. package/css/components/contextmenu.css +1 -1
  7. package/css/components/detailcard.css +1 -1
  8. package/css/components/dropdown.css +1 -1
  9. package/css/components/featurecard.css +1 -1
  10. package/css/components/fieldset.css +1 -1
  11. package/css/components/file-upload.css +1 -1
  12. package/css/components/footer.css +1 -1
  13. package/css/components/formcontrol.css +1 -1
  14. package/css/components/hero.css +1 -1
  15. package/css/components/herocard.css +1 -1
  16. package/css/components/image.css +1 -1
  17. package/css/components/input.css +1 -1
  18. package/css/components/languagetoggle.css +1 -1
  19. package/css/components/linklist.css +1 -1
  20. package/css/components/multilinkcard.css +1 -1
  21. package/css/components/navigation.css +1 -1
  22. package/css/components/notification.css +1 -1
  23. package/css/components/pagination.css +1 -1
  24. package/css/components/readmore.css +1 -1
  25. package/css/components/richtext.css +1 -1
  26. package/css/components/socialmedia.css +1 -1
  27. package/css/components/statcard.css +1 -1
  28. package/css/components/table.css +1 -1
  29. package/css/components/tableofcontents.css +1 -1
  30. package/css/components/textarea.css +1 -1
  31. package/css/components/textinput.css +1 -1
  32. package/css/components/tooltip.css +1 -1
  33. package/css/components/video.css +1 -1
  34. package/css/global.css +1 -1
  35. package/css/global.css.map +1 -1
  36. package/css/index.css +4 -2
  37. package/css/index.css.map +1 -1
  38. package/css/monorepo.css +4 -2
  39. package/css/monorepo.css.map +1 -1
  40. package/package.json +3 -3
  41. package/scss/_mixins.scss +7 -18
  42. package/scss/_typography.scss +28 -12
  43. package/scss/components/_accordion.scss +57 -25
  44. package/scss/components/_blockquote.scss +20 -20
  45. package/scss/components/_breadcrumb.scss +1 -1
  46. package/scss/components/_button.scss +3 -3
  47. package/scss/components/_checkbox.scss +63 -25
  48. package/scss/components/_contextmenu.scss +1 -4
  49. package/scss/components/_detailcard.scss +18 -1
  50. package/scss/components/_dropdown.scss +66 -138
  51. package/scss/components/_featurecard.scss +1 -1
  52. package/scss/components/_fieldset.scss +2 -2
  53. package/scss/components/_file-upload.scss +2 -2
  54. package/scss/components/_footer.scss +5 -5
  55. package/scss/components/_formcontrol.scss +4 -23
  56. package/scss/components/_hero.scss +0 -4
  57. package/scss/components/_herocard.scss +9 -19
  58. package/scss/components/_image.scss +72 -27
  59. package/scss/components/_input.scss +1 -1
  60. package/scss/components/_languagetoggle.scss +1 -1
  61. package/scss/components/_linklist.scss +3 -3
  62. package/scss/components/_multilinkcard.scss +6 -6
  63. package/scss/components/_navigation.scss +12 -27
  64. package/scss/components/_notification.scss +3 -3
  65. package/scss/components/_pagination.scss +1 -1
  66. package/scss/components/_readmore.scss +1 -1
  67. package/scss/components/_richtext.scss +15 -63
  68. package/scss/components/_socialmedia.scss +1 -1
  69. package/scss/components/_statcard.scss +3 -3
  70. package/scss/components/_table.scss +4 -5
  71. package/scss/components/_tableofcontents.scss +5 -47
  72. package/scss/components/_textarea.scss +1 -1
  73. package/scss/components/_textinput.scss +1 -1
  74. package/scss/components/_tooltip.scss +1 -1
  75. package/scss/components/_video.scss +4 -19
  76. package/scss/components/index.scss +0 -2
  77. package/scss/theme/_typography.scss +2 -4
  78. package/css/components/credit.css +0 -1
  79. package/css/components/heading.css +0 -1
  80. package/scss/components/_credit.scss +0 -112
  81. package/scss/components/_heading.scss +0 -74
package/scss/components/_credit.scss DELETED
@@ -1,112 +0,0 @@
1
- @use "../tokens" as *;
2
- @import "../functions";
3
- @import "../mixins";
4
- @import "../animations";
5
-
6
- .ilo--credit {
7
- color: #ffffff;
8
- display: inline-block;
9
- height: px-to-rem($spacing-ux-credit-height);
10
- padding: 0;
11
- position: relative;
12
- @include font-styles("image-credit");
13
-
14
- &--label {
15
- background-color: $color-ux-credit-background;
16
- @include boxpadding("credit", "large");
17
- }
18
-
19
- &:after {
20
- background-position: top right;
21
- background-repeat: no-repeat;
22
- background-size: contain;
23
- content: "";
24
- height: px-to-rem($spacing-ux-credit-height);
25
- position: absolute;
26
- left: 100%;
27
- top: -#{px-to-rem(map-get($spacing, "padding-0-5"))};
28
- width: px-to-rem($spacing-ux-credit-height);
29
- }
30
-
31
- @include breakpoint("lg", true) {
32
- width: 75%;
33
-
34
- &--label {
35
- bottom: calc(100% + 1px);
36
- display: none;
37
- left: 0;
38
- margin-bottom: px-to-rem(map-get($spacing, "padding-1-5"));
39
- position: absolute;
40
-
41
- &:after {
42
- background-position: top left;
43
- background-repeat: no-repeat;
44
- background-size: contain;
45
- content: "";
46
- height: px-to-rem(map-get($spacing, "padding-1-5"));
47
- position: absolute;
48
- left: calc(#{px-to-rem(map-get($spacing, "padding-1-5"))} / 2);
49
- bottom: -#{px-to-rem(map-get($spacing, "padding-1-5"))};
50
- width: px-to-rem(map-get($spacing, "padding-1-5"));
51
- }
52
- }
53
-
54
- &:before {
55
- background-color: $color-base-neutrals-dark;
56
- background-position: calc(100% - 4px) center;
57
- background-repeat: no-repeat;
58
- background-size: px-to-rem(map-get($spacing, "padding-1-5"))
59
- px-to-rem(map-get($spacing, "padding-1-5"));
60
- content: "";
61
- height: px-to-rem(map-get($spacing, "padding-3"));
62
- position: absolute;
63
- left: 0;
64
- top: 0;
65
- width: px-to-rem(29px);
66
- }
67
-
68
- &:after {
69
- left: px-to-rem(29px);
70
- top: 0;
71
- }
72
-
73
- &:hover {
74
- .ilo--credit--label {
75
- display: inline-block;
76
- }
77
- }
78
- }
79
-
80
- [dir="rtl"] & {
81
- &:after {
82
- background-position: top left;
83
- left: auto;
84
- right: 100%;
85
- transform: scaleX(-1);
86
- }
87
-
88
- @include breakpoint("lg", true) {
89
- &--label {
90
- left: auto;
91
- right: 0;
92
-
93
- &:after {
94
- background-position: top right;
95
- left: auto;
96
- right: calc(#{px-to-rem(map-get($spacing, "padding-1-5"))} / 2);
97
- }
98
- }
99
-
100
- &:before {
101
- background-position: 4px center;
102
- left: auto;
103
- right: 0;
104
- }
105
-
106
- &:after {
107
- left: auto;
108
- right: px-to-rem(29px);
109
- }
110
- }
111
- }
112
- }
package/scss/components/_heading.scss DELETED
@@ -1,74 +0,0 @@
1
- @use "../tokens" as *;
2
- @use "../functions" as *;
3
- @import "../mixins";
4
-
5
- .ilo--h1,
6
- .ilo--h2,
7
- .ilo--h3,
8
- .ilo--h4,
9
- .ilo--h5,
10
- .ilo--h6 {
11
- color: inherit;
12
- font-family: var(--ilo-fonts-display);
13
- font-weight: 700;
14
-
15
- &--default {
16
- color: $color-font-base;
17
- }
18
-
19
- &--actionable {
20
- color: $color-base-purple-medium;
21
- }
22
-
23
- &--light {
24
- color: $color-base-neutrals-white;
25
- }
26
- }
27
-
28
- .ilo--h1 {
29
- @include font-styles("headline-2");
30
-
31
- @include breakpoint("md") {
32
- @include font-styles("headline-1");
33
- }
34
- }
35
-
36
- .ilo--h2 {
37
- @include font-styles("headline-3");
38
-
39
- @include breakpoint("md") {
40
- @include font-styles("headline-2");
41
- }
42
- }
43
-
44
- .ilo--h3 {
45
- @include font-styles("headline-4");
46
-
47
- @include breakpoint("md") {
48
- @include font-styles("headline-3");
49
- }
50
- }
51
-
52
- .ilo--h4 {
53
- @include font-styles("headline-5");
54
-
55
- @include breakpoint("md") {
56
- @include font-styles("headline-4");
57
- }
58
- }
59
-
60
- .ilo--h5 {
61
- @include font-styles("headline-6");
62
-
63
- @include breakpoint("md") {
64
- @include font-styles("headline-5");
65
- }
66
- }
67
-
68
- .ilo--h6 {
69
- @include font-styles("headline-6");
70
-
71
- @include breakpoint("md") {
72
- @include font-styles("headline-6");
73
- }
74
- }