@itwin/itwinui-css 0.50.1 → 0.53.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 (89) hide show
  1. package/css/alert.css +234 -176
  2. package/css/all.css +8324 -5880
  3. package/css/badge.css +3 -2
  4. package/css/blockquote.css +12 -9
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +441 -345
  7. package/css/carousel.css +110 -91
  8. package/css/code.css +70 -57
  9. package/css/color-picker.css +164 -113
  10. package/css/date-picker.css +454 -80
  11. package/css/expandable-block.css +213 -161
  12. package/css/fieldset.css +25 -21
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +550 -197
  16. package/css/header.css +485 -367
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +181 -137
  19. package/css/inputs.css +1137 -945
  20. package/css/keyboard.css +14 -10
  21. package/css/location-marker.css +69 -59
  22. package/css/menu.css +124 -86
  23. package/css/modal.css +114 -44
  24. package/css/non-ideal-state.css +47 -40
  25. package/css/notification-marker.css +275 -200
  26. package/css/popover.css +10 -8
  27. package/css/progress-indicator.css +316 -238
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +193 -144
  30. package/css/skip-to-content.css +42 -28
  31. package/css/slider.css +116 -91
  32. package/css/surface.css +19 -0
  33. package/css/table.css +578 -430
  34. package/css/tabs.css +324 -238
  35. package/css/tag.css +112 -85
  36. package/css/text.css +47 -28
  37. package/css/tile.css +389 -313
  38. package/css/time-picker.css +114 -87
  39. package/css/toast-notification.css +234 -175
  40. package/css/toggle-switch.css +176 -111
  41. package/css/tooltip.css +24 -17
  42. package/css/tree.css +123 -93
  43. package/css/user-icon.css +222 -162
  44. package/css/wizard.css +158 -133
  45. package/package.json +5 -6
  46. package/scss/alert/alert.scss +1 -5
  47. package/scss/carousel/carousel.scss +24 -27
  48. package/scss/classes.scss +1 -0
  49. package/scss/code/codeblock.scss +1 -1
  50. package/scss/color-picker/color-picker.scss +2 -2
  51. package/scss/date-picker/classes.scss +20 -0
  52. package/scss/date-picker/date-picker.scss +194 -33
  53. package/scss/fieldset/fieldset.scss +1 -1
  54. package/scss/header/header.scss +15 -10
  55. package/scss/index.scss +1 -0
  56. package/scss/information-panel/information-panel.scss +10 -3
  57. package/scss/inputs/checkbox.scss +1 -0
  58. package/scss/inputs/labeled-inputs.scss +8 -8
  59. package/scss/inputs/radio.scss +0 -4
  60. package/scss/location-marker/data-rich.scss +1 -1
  61. package/scss/location-marker/me.scss +4 -4
  62. package/scss/menu/classes.scss +2 -1
  63. package/scss/menu/menu.scss +8 -11
  64. package/scss/modal/classes.scss +4 -0
  65. package/scss/modal/modal.scss +82 -7
  66. package/scss/popover/popover.scss +1 -2
  67. package/scss/progress-indicator/linear.scss +3 -11
  68. package/scss/progress-indicator/radial.scss +1 -1
  69. package/scss/side-navigation/side-navigation.scss +5 -5
  70. package/scss/slider/slider.scss +2 -2
  71. package/scss/style/elevation.scss +5 -5
  72. package/scss/style/global.scss +33 -26
  73. package/scss/style/mixins.scss +9 -0
  74. package/scss/style/ripple.scss +1 -1
  75. package/scss/style/speed.scss +1 -0
  76. package/scss/style/theme.scss +248 -65
  77. package/scss/surface/classes.scss +7 -0
  78. package/scss/surface/index.scss +3 -0
  79. package/scss/surface/surface.scss +18 -0
  80. package/scss/table/column-filter.scss +2 -2
  81. package/scss/table/table.scss +26 -17
  82. package/scss/tile/tile.scss +5 -5
  83. package/scss/time-picker/time-picker.scss +2 -2
  84. package/scss/toast-notification/categories.scss +1 -5
  85. package/scss/toggle-switch/classes.scss +4 -0
  86. package/scss/toggle-switch/toggle-switch.scss +141 -162
  87. package/scss/tooltip/tooltip.scss +2 -1
  88. package/scss/user-icon/user-icon.scss +38 -19
  89. package/scss/wizard/wizard.scss +1 -1
package/css/tag.css CHANGED
@@ -11,100 +11,127 @@
11
11
  -moz-user-select:all;
12
12
  user-select:all;
13
13
  text-transform:lowercase;
14
- display:inline-flex; }
15
- .iui-tag:focus-visible{
14
+ display:inline-flex;
15
+ }
16
+ .iui-tag:focus-visible{
17
+ outline:2px solid var(--iui-color-foreground-primary);
18
+ outline-offset:-2px;
19
+ }
20
+ @supports not selector(*:focus-visible){
21
+ .iui-tag:focus{
16
22
  outline:2px solid var(--iui-color-foreground-primary);
17
- outline-offset:-2px; }
18
- @supports not selector(*:focus-visible){
19
- .iui-tag:focus{
20
- outline:2px solid var(--iui-color-foreground-primary);
21
- outline-offset:-2px; } }
22
- .iui-tag:not(a){
23
- color:rgba(0, 0, 0, 0.4);
24
- color:var(--iui-text-color-muted); }
23
+ outline-offset:-2px;
24
+ }
25
+ }
26
+ .iui-tag:not(a){
27
+ color:rgba(0, 0, 0, 0.4);
28
+ color:var(--iui-text-color-muted);
29
+ }
30
+ .iui-tag:not(.iui-basic){
31
+ height:33px;
32
+ margin:3px 0;
33
+ border-radius:16.5px;
34
+ box-sizing:border-box;
35
+ padding:0 2px;
36
+ align-items:center;
37
+ font-size:14px;
38
+ text-transform:none;
39
+ cursor:default;
40
+ border:1px solid rgba(0, 0, 0, 0.4);
41
+ background-color:white;
42
+ color:rgba(0, 0, 0, 0.8);
43
+ border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
44
+ background-color:var(--iui-color-background-1);
45
+ color:var(--iui-text-color);
46
+ }
47
+ @media (prefers-reduced-motion: no-preference){
25
48
  .iui-tag:not(.iui-basic){
26
- height:33px;
27
- margin:3px 0;
28
- border-radius:16.5px;
29
- box-sizing:border-box;
30
- padding:0 2px;
31
- align-items:center;
32
- font-size:14px;
33
- text-transform:none;
34
- cursor:default;
35
- border:1px solid rgba(0, 0, 0, 0.4);
36
- background-color:#FFF;
37
- color:rgba(0, 0, 0, 0.8);
38
- border:1px solid rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-4));
39
- background-color:var(--iui-color-background-1);
40
- color:var(--iui-text-color); }
41
- @media (prefers-reduced-motion: no-preference){
42
- .iui-tag:not(.iui-basic){
43
- transition:border 0.2s ease-out; } }
44
- .iui-tag:not(.iui-basic) > .iui-label{
45
- margin:0;
46
- padding:0;
47
- border:none;
48
- vertical-align:baseline;
49
- font-size:14px;
50
- font-weight:400;
51
- line-height:22px;
52
- white-space:nowrap;
53
- text-overflow:ellipsis;
54
- overflow:hidden;
55
- margin:0 4px 0 8px; }
56
- .iui-tag:not(.iui-basic) > .iui-label:only-child{
57
- margin:0 8px; }
58
- .iui-tag:not(.iui-basic) > .iui-button{
59
- border-radius:50%; }
60
- .iui-tag:not(.iui-basic):hover{
61
- border-color:black;
62
- border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1)); }
63
- .iui-tag.iui-basic{
64
- outline-offset:1px; }
49
+ transition:border 0.2s ease-out;
50
+ }
51
+ }
52
+ .iui-tag:not(.iui-basic) > .iui-label{
53
+ margin:0;
54
+ padding:0;
55
+ border:none;
56
+ vertical-align:baseline;
57
+ font-size:14px;
58
+ font-weight:400;
59
+ line-height:22px;
60
+ white-space:nowrap;
61
+ text-overflow:ellipsis;
62
+ overflow:hidden;
63
+ margin:0 4px 0 8px;
64
+ }
65
+ .iui-tag:not(.iui-basic) > .iui-label:only-child{
66
+ margin:0 8px;
67
+ }
68
+ .iui-tag:not(.iui-basic) > .iui-button{
69
+ border-radius:50%;
70
+ }
71
+ .iui-tag:not(.iui-basic):hover{
72
+ border-color:black;
73
+ border-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-1));
74
+ }
75
+ .iui-tag.iui-basic{
76
+ outline-offset:1px;
77
+ }
65
78
 
66
79
  a.iui-tag{
67
80
  border-radius:3px;
68
81
  text-decoration:none;
69
82
  cursor:pointer;
70
- color:#008BE1;
71
- color:var(--iui-color-foreground-primary); }
72
- a.iui-tag:focus-visible{
83
+ color:#008ae0;
84
+ color:var(--iui-color-foreground-primary);
85
+ }
86
+ a.iui-tag:focus-visible{
87
+ outline:1px solid var(--iui-color-foreground-primary);
88
+ outline-offset:2px;
89
+ }
90
+ @supports not selector(*:focus-visible){
91
+ a.iui-tag:focus{
73
92
  outline:1px solid var(--iui-color-foreground-primary);
74
- outline-offset:2px; }
75
- @supports not selector(*:focus-visible){
76
- a.iui-tag:focus{
77
- outline:1px solid var(--iui-color-foreground-primary);
78
- outline-offset:2px; } }
79
- a.iui-tag:hover{
80
- color:#006bae;
81
- color:var(--iui-color-foreground-primary-overlay);
82
- text-decoration:underline; }
93
+ outline-offset:2px;
94
+ }
95
+ }
96
+ a.iui-tag:hover{
97
+ color:#006bad;
98
+ color:var(--iui-color-foreground-primary-overlay);
99
+ text-decoration:underline;
100
+ }
83
101
 
84
102
  .iui-tag-container{
85
103
  color:rgba(0, 0, 0, 0.4);
86
- color:var(--iui-text-color-muted); }
87
- .iui-tag-container > a.iui-basic{
88
- margin:2px; }
89
- .iui-tag-container > .iui-tag:not(:last-child){
90
- margin-right:4px; }
91
- .iui-tag-container > .iui-basic:not(:last-child)::after{
92
- content:','; }
104
+ color:var(--iui-text-color-muted);
105
+ }
106
+ .iui-tag-container > a.iui-basic{
107
+ margin:2px;
108
+ }
109
+ .iui-tag-container > .iui-tag:not(:last-child){
110
+ margin-right:4px;
111
+ }
112
+ .iui-tag-container > .iui-basic:not(:last-child)::after{
113
+ content:",";
114
+ }
115
+ .iui-tag-container.iui-truncate{
116
+ overflow:hidden;
117
+ white-space:nowrap;
118
+ text-overflow:ellipsis;
119
+ }
120
+ @supports (-webkit-line-clamp: 1){
93
121
  .iui-tag-container.iui-truncate{
94
- overflow:hidden;
95
- white-space:nowrap;
96
- text-overflow:ellipsis; }
97
- @supports (-webkit-line-clamp: 1){
98
- .iui-tag-container.iui-truncate{
99
- white-space:unset;
100
- display:-webkit-box;
101
- -webkit-line-clamp:1;
102
- -webkit-box-orient:vertical; } }
103
- .iui-tag-container.iui-scroll{
104
- white-space:nowrap;
105
- overflow-x:scroll; }
106
- .iui-tag-container.iui-visible{
107
- border-radius:3px;
108
- padding:3px 12px;
109
- background-color:#F8F9FB;
110
- background-color:var(--iui-color-background-2); }
122
+ white-space:unset;
123
+ display:-webkit-box;
124
+ -webkit-line-clamp:1;
125
+ -webkit-box-orient:vertical;
126
+ }
127
+ }
128
+ .iui-tag-container.iui-scroll{
129
+ white-space:nowrap;
130
+ overflow-x:scroll;
131
+ }
132
+ .iui-tag-container.iui-visible{
133
+ border-radius:3px;
134
+ padding:3px 12px;
135
+ background-color:#f9f9fb;
136
+ background-color:var(--iui-color-background-2);
137
+ }
package/css/text.css CHANGED
@@ -9,7 +9,8 @@
9
9
  vertical-align:baseline;
10
10
  font-size:32px;
11
11
  font-weight:300;
12
- line-height:44px; }
12
+ line-height:44px;
13
+ }
13
14
 
14
15
  .iui-text-title{
15
16
  margin:0;
@@ -18,7 +19,8 @@
18
19
  vertical-align:baseline;
19
20
  font-size:24px;
20
21
  font-weight:300;
21
- line-height:33px; }
22
+ line-height:33px;
23
+ }
22
24
 
23
25
  .iui-text-subheading{
24
26
  margin:0;
@@ -27,7 +29,8 @@
27
29
  vertical-align:baseline;
28
30
  font-size:18px;
29
31
  font-weight:400;
30
- line-height:33px; }
32
+ line-height:33px;
33
+ }
31
34
 
32
35
  .iui-text-leading{
33
36
  margin:0;
@@ -36,7 +39,8 @@
36
39
  vertical-align:baseline;
37
40
  font-size:16px;
38
41
  font-weight:400;
39
- line-height:22px; }
42
+ line-height:22px;
43
+ }
40
44
 
41
45
  .iui-text-block{
42
46
  margin:0;
@@ -45,7 +49,8 @@
45
49
  vertical-align:baseline;
46
50
  font-size:14px;
47
51
  font-weight:400;
48
- line-height:22px; }
52
+ line-height:22px;
53
+ }
49
54
 
50
55
  .iui-text-small{
51
56
  margin:0;
@@ -54,11 +59,13 @@
54
59
  vertical-align:baseline;
55
60
  font-size:12px;
56
61
  font-weight:400;
57
- line-height:22px; }
62
+ line-height:22px;
63
+ }
58
64
 
59
65
  .iui-text-muted{
60
66
  color:rgba(0, 0, 0, 0.4);
61
- color:var(--iui-text-color-muted); }
67
+ color:var(--iui-text-color-muted);
68
+ }
62
69
 
63
70
  .iui-skeleton{
64
71
  display:inline-block;
@@ -68,29 +75,41 @@
68
75
  user-select:none;
69
76
  color:transparent;
70
77
  border-radius:3px;
71
- background:linear-gradient(270deg, #EEF0F3, #EEF0F3, #F8F9FB, #EEF0F3, #EEF0F3);
78
+ background:linear-gradient(270deg, #edeff2, #edeff2, #f9f9fb, #edeff2, #edeff2);
72
79
  background-size:200% 100%;
73
80
  background:linear-gradient(270deg, var(--iui-color-background-3), var(--iui-color-background-3), var(--iui-color-background-2), var(--iui-color-background-3), var(--iui-color-background-3));
74
- background-size:200% 100%; }
75
- @media (prefers-reduced-motion: no-preference){
76
- .iui-skeleton{
77
- -webkit-animation:skeleton-shimmer 0.8s linear infinite;
78
- animation:skeleton-shimmer 0.8s linear infinite; }
79
- @-webkit-keyframes skeleton-shimmer{
80
- 0%{
81
- background-position:200% 50%; }
82
- 50%{
83
- background-position:100% 50%; }
84
- 100%{
85
- background-position:0% 50%; } }
86
- @keyframes skeleton-shimmer{
87
- 0%{
88
- background-position:200% 50%; }
89
- 50%{
90
- background-position:100% 50%; }
91
- 100%{
92
- background-position:0% 50%; } } }
81
+ background-size:200% 100%;
82
+ }
83
+ @media (prefers-reduced-motion: no-preference){
84
+ .iui-skeleton{
85
+ -webkit-animation:skeleton-shimmer 0.8s linear infinite;
86
+ animation:skeleton-shimmer 0.8s linear infinite;
87
+ }
88
+ @-webkit-keyframes skeleton-shimmer{
89
+ 0%{
90
+ background-position:200% 50%;
91
+ }
92
+ 50%{
93
+ background-position:100% 50%;
94
+ }
95
+ 100%{
96
+ background-position:0% 50%;
97
+ }
98
+ }
99
+ @keyframes skeleton-shimmer{
100
+ 0%{
101
+ background-position:200% 50%;
102
+ }
103
+ 50%{
104
+ background-position:100% 50%;
105
+ }
106
+ 100%{
107
+ background-position:0% 50%;
108
+ }
109
+ }
110
+ }
93
111
 
94
112
  .iui-text-spacing{
95
113
  padding:0;
96
- margin:0 0 22px; }
114
+ margin:0 0 22px;
115
+ }