@ilo-org/styles 0.9.2 → 0.10.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.
Files changed (37) hide show
  1. package/build/css/components/index.css +325 -233
  2. package/build/css/components/index.css.map +1 -1
  3. package/build/css/global.css +1 -1
  4. package/build/css/global.css.map +1 -1
  5. package/build/css/index.css +325 -233
  6. package/build/css/index.css.map +1 -1
  7. package/build/css/monorepo.css +325 -233
  8. package/build/css/monorepo.css.map +1 -1
  9. package/build/minified/index.css +1 -1
  10. package/build/minified/index.css.map +1 -1
  11. package/build/minified/monorepo.css +1 -1
  12. package/build/minified/monorepo.css.map +1 -1
  13. package/css/components/container.css +1 -0
  14. package/css/components/file-upload.css +1 -1
  15. package/css/components/footer.css +1 -1
  16. package/css/components/formcontrol.css +1 -1
  17. package/css/components/herocard.css +1 -1
  18. package/css/components/navigation.css +1 -1
  19. package/css/components/radio.css +1 -1
  20. package/css/components/socialmedia.css +1 -1
  21. package/css/components/tooltip.css +1 -1
  22. package/css/global.css.map +1 -1
  23. package/css/index.css +1 -1
  24. package/css/index.css.map +1 -1
  25. package/css/monorepo.css +1 -1
  26. package/css/monorepo.css.map +1 -1
  27. package/package.json +2 -2
  28. package/scss/components/_container.scss +11 -0
  29. package/scss/components/_file-upload.scss +5 -2
  30. package/scss/components/_footer.scss +186 -125
  31. package/scss/components/_formcontrol.scss +13 -13
  32. package/scss/components/_herocard.scss +11 -6
  33. package/scss/components/_navigation.scss +10 -10
  34. package/scss/components/_radio.scss +23 -28
  35. package/scss/components/_socialmedia.scss +10 -0
  36. package/scss/components/_tooltip.scss +2 -4
  37. package/scss/components/index.scss +1 -0
@@ -12,7 +12,15 @@
12
12
  width: px-to-rem(24px);
13
13
  cursor: pointer;
14
14
 
15
- &:before {
15
+ input {
16
+ appearance: none;
17
+ width: px-to-rem(24px);
18
+ height: px-to-rem(24px);
19
+ border-radius: 50%;
20
+ cursor: pointer;
21
+ }
22
+
23
+ &--control:before {
16
24
  content: "";
17
25
  background-color: $color-base-neutrals-light;
18
26
  border: px-to-rem(4px) solid $color-base-neutrals-light;
@@ -26,7 +34,7 @@
26
34
  pointer-events: none;
27
35
  }
28
36
 
29
- &:after {
37
+ &--control:after {
30
38
  content: "";
31
39
  background-color: $color-base-neutrals-light;
32
40
  border-radius: 50%;
@@ -39,39 +47,26 @@
39
47
  pointer-events: none;
40
48
  }
41
49
 
42
- &:checked {
43
- &:before {
44
- background-color: $color-base-blue-light;
45
- border-color: $color-base-blue-dark;
46
- }
50
+ input:checked + &--control:before {
51
+ background-color: $color-base-blue-light;
52
+ border-color: $color-base-blue-dark;
53
+ }
47
54
 
48
- &:after {
49
- background-color: $color-base-blue-dark;
50
- }
55
+ input:checked + &--control:after {
56
+ background-color: $color-base-blue-dark;
51
57
  }
52
58
 
53
- &:focus {
54
- &:after {
55
- background-color: $color-base-yellow;
56
- }
57
- outline: none;
59
+ input:focus + &--control:after {
60
+ background-color: $color-base-yellow;
58
61
  }
59
62
 
60
- &:disabled {
63
+ input:disabled + &--control:after,
64
+ input:disabled + &--control:before {
61
65
  opacity: 45%;
62
- pointer-events: none;
63
66
  }
64
67
 
65
- &:invalid,
66
- &__error {
67
- &:after {
68
- background-color: $color-base-red-medium;
69
- }
70
-
71
- &:checked {
72
- &:before {
73
- border-color: $color-base-blue-dark;
74
- }
75
- }
68
+ input:invalid + &--control:after,
69
+ &__error &--control:after {
70
+ background-color: $color-base-red-medium;
76
71
  }
77
72
  }
@@ -31,10 +31,20 @@
31
31
  }
32
32
 
33
33
  .right-to-left & {
34
+ direction: rtl;
35
+
34
36
  .social--links {
35
37
  flex-direction: row-reverse;
36
38
  }
37
39
 
40
+ #{$c}--list {
41
+ &--item {
42
+ &--icon {
43
+ text-indent: 999px;
44
+ }
45
+ }
46
+ }
47
+
38
48
  * {
39
49
  text-align: right;
40
50
  }
@@ -39,16 +39,14 @@
39
39
  position: relative;
40
40
  cursor: pointer;
41
41
 
42
- &.has-icon {
42
+ &__icon {
43
43
  background-repeat: no-repeat;
44
44
  background-size: cover;
45
45
  height: px-to-rem($spacing-padding-2);
46
46
  min-width: px-to-rem($spacing-padding-2);
47
47
  @include dataurlicon("info", $color-ux-labels-actionable);
48
- }
49
48
 
50
- &--dark {
51
- &.has-icon {
49
+ &#{&}__theme__dark {
52
50
  @include dataurlicon("info", $color-tooltip-dark-icon);
53
51
  }
54
52
  }
@@ -2,6 +2,7 @@
2
2
  @use "breadcrumb";
3
3
  @use "button";
4
4
  @use "callout";
5
+ @use "container";
5
6
  @use "card";
6
7
  @use "featurecard";
7
8
  @use "textcard";