@itwin/itwinui-css 0.36.0 → 0.36.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 (6) hide show
  1. package/css/all.css +36 -15
  2. package/css/expandable-block.css +12 -5
  3. package/css/side-navigation.css +12 -5
  4. package/css/table.css +12 -5
  5. package/package.json +1 -1
  6. package/scss/style/mixins.scss +12 -5
package/css/all.css CHANGED
@@ -1463,13 +1463,20 @@ html.iui-theme-dark{
1463
1463
  border-bottom:1px solid var(--iui-color-background-4);
1464
1464
  border-right:1px solid var(--iui-color-background-4);
1465
1465
  border-left:1px solid var(--iui-color-background-4); }
1466
- .iui-expandable-block .iui-expandable-content.iui-enter, .iui-expandable-block .iui-expandable-content.iui-exit-active{
1466
+ .iui-expandable-block .iui-expandable-content.iui-enter{
1467
1467
  opacity:0; }
1468
- .iui-expandable-block .iui-expandable-content.iui-exit, .iui-expandable-block .iui-expandable-content.iui-enter-active{
1468
+ .iui-expandable-block .iui-expandable-content.iui-enter-active{
1469
1469
  opacity:1; }
1470
- @media (prefers-reduced-motion: no-preference){
1471
- .iui-expandable-block .iui-expandable-content.iui-enter-active, .iui-expandable-block .iui-expandable-content.iui-exit-active{
1472
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
1470
+ @media (prefers-reduced-motion: no-preference){
1471
+ .iui-expandable-block .iui-expandable-content.iui-enter-active{
1472
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
1473
+ .iui-expandable-block .iui-expandable-content.iui-exit{
1474
+ opacity:1; }
1475
+ .iui-expandable-block .iui-expandable-content.iui-exit-active{
1476
+ opacity:0; }
1477
+ @media (prefers-reduced-motion: no-preference){
1478
+ .iui-expandable-block .iui-expandable-content.iui-exit-active{
1479
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
1473
1480
  .iui-expandable-block .iui-expandable-content > div{
1474
1481
  padding:11px 12px; }
1475
1482
  .iui-expandable-block:hover > .iui-header{
@@ -4364,13 +4371,20 @@ html.iui-theme-dark{
4364
4371
  border-right:1px solid #C7CCD1;
4365
4372
  background-color:var(--iui-color-background-1);
4366
4373
  border-right:1px solid var(--iui-color-background-5); }
4367
- .iui-side-navigation-submenu.iui-enter, .iui-side-navigation-submenu.iui-exit-active{
4374
+ .iui-side-navigation-submenu.iui-enter{
4368
4375
  opacity:0; }
4369
- .iui-side-navigation-submenu.iui-exit, .iui-side-navigation-submenu.iui-enter-active{
4376
+ .iui-side-navigation-submenu.iui-enter-active{
4370
4377
  opacity:1; }
4371
- @media (prefers-reduced-motion: no-preference){
4372
- .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
4373
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
4378
+ @media (prefers-reduced-motion: no-preference){
4379
+ .iui-side-navigation-submenu.iui-enter-active{
4380
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
4381
+ .iui-side-navigation-submenu.iui-exit{
4382
+ opacity:1; }
4383
+ .iui-side-navigation-submenu.iui-exit-active{
4384
+ opacity:0; }
4385
+ @media (prefers-reduced-motion: no-preference){
4386
+ .iui-side-navigation-submenu.iui-exit-active{
4387
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
4374
4388
  .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
4375
4389
  display:flex; }
4376
4390
  .iui-side-navigation-submenu-content{
@@ -4704,13 +4718,20 @@ html.iui-theme-dark{
4704
4718
  border-right-color:var(--iui-color-background-4); }
4705
4719
  .iui-table-body .iui-row.iui-expanded-content{
4706
4720
  overflow:hidden; }
4707
- .iui-table-body .iui-row.iui-expanded-content.iui-enter, .iui-table-body .iui-row.iui-expanded-content.iui-exit-active{
4721
+ .iui-table-body .iui-row.iui-expanded-content.iui-enter{
4708
4722
  opacity:0; }
4709
- .iui-table-body .iui-row.iui-expanded-content.iui-exit, .iui-table-body .iui-row.iui-expanded-content.iui-enter-active{
4723
+ .iui-table-body .iui-row.iui-expanded-content.iui-enter-active{
4710
4724
  opacity:1; }
4711
- @media (prefers-reduced-motion: no-preference){
4712
- .iui-table-body .iui-row.iui-expanded-content.iui-enter-active, .iui-table-body .iui-row.iui-expanded-content.iui-exit-active{
4713
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
4725
+ @media (prefers-reduced-motion: no-preference){
4726
+ .iui-table-body .iui-row.iui-expanded-content.iui-enter-active{
4727
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
4728
+ .iui-table-body .iui-row.iui-expanded-content.iui-exit{
4729
+ opacity:1; }
4730
+ .iui-table-body .iui-row.iui-expanded-content.iui-exit-active{
4731
+ opacity:0; }
4732
+ @media (prefers-reduced-motion: no-preference){
4733
+ .iui-table-body .iui-row.iui-expanded-content.iui-exit-active{
4734
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
4714
4735
  .iui-table-body .iui-row:not(.iui-selected) + .iui-selected, .iui-table-body .iui-row.iui-selected:first-child{
4715
4736
  border-bottom-color:transparent; }
4716
4737
  .iui-table-body .iui-row.iui-selected{
package/css/expandable-block.css CHANGED
@@ -101,13 +101,20 @@
101
101
  border-bottom:1px solid var(--iui-color-background-4);
102
102
  border-right:1px solid var(--iui-color-background-4);
103
103
  border-left:1px solid var(--iui-color-background-4); }
104
- .iui-expandable-block .iui-expandable-content.iui-enter, .iui-expandable-block .iui-expandable-content.iui-exit-active{
104
+ .iui-expandable-block .iui-expandable-content.iui-enter{
105
105
  opacity:0; }
106
- .iui-expandable-block .iui-expandable-content.iui-exit, .iui-expandable-block .iui-expandable-content.iui-enter-active{
106
+ .iui-expandable-block .iui-expandable-content.iui-enter-active{
107
107
  opacity:1; }
108
- @media (prefers-reduced-motion: no-preference){
109
- .iui-expandable-block .iui-expandable-content.iui-enter-active, .iui-expandable-block .iui-expandable-content.iui-exit-active{
110
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
108
+ @media (prefers-reduced-motion: no-preference){
109
+ .iui-expandable-block .iui-expandable-content.iui-enter-active{
110
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
111
+ .iui-expandable-block .iui-expandable-content.iui-exit{
112
+ opacity:1; }
113
+ .iui-expandable-block .iui-expandable-content.iui-exit-active{
114
+ opacity:0; }
115
+ @media (prefers-reduced-motion: no-preference){
116
+ .iui-expandable-block .iui-expandable-content.iui-exit-active{
117
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
111
118
  .iui-expandable-block .iui-expandable-content > div{
112
119
  padding:11px 12px; }
113
120
  .iui-expandable-block:hover > .iui-header{
package/css/side-navigation.css CHANGED
@@ -131,13 +131,20 @@
131
131
  border-right:1px solid #C7CCD1;
132
132
  background-color:var(--iui-color-background-1);
133
133
  border-right:1px solid var(--iui-color-background-5); }
134
- .iui-side-navigation-submenu.iui-enter, .iui-side-navigation-submenu.iui-exit-active{
134
+ .iui-side-navigation-submenu.iui-enter{
135
135
  opacity:0; }
136
- .iui-side-navigation-submenu.iui-exit, .iui-side-navigation-submenu.iui-enter-active{
136
+ .iui-side-navigation-submenu.iui-enter-active{
137
137
  opacity:1; }
138
- @media (prefers-reduced-motion: no-preference){
139
- .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
140
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
138
+ @media (prefers-reduced-motion: no-preference){
139
+ .iui-side-navigation-submenu.iui-enter-active{
140
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
141
+ .iui-side-navigation-submenu.iui-exit{
142
+ opacity:1; }
143
+ .iui-side-navigation-submenu.iui-exit-active{
144
+ opacity:0; }
145
+ @media (prefers-reduced-motion: no-preference){
146
+ .iui-side-navigation-submenu.iui-exit-active{
147
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
141
148
  .iui-side-navigation-submenu.iui-enter-active, .iui-side-navigation-submenu.iui-exit-active{
142
149
  display:flex; }
143
150
  .iui-side-navigation-submenu-content{
package/css/table.css CHANGED
@@ -161,13 +161,20 @@
161
161
  border-right-color:var(--iui-color-background-4); }
162
162
  .iui-table-body .iui-row.iui-expanded-content{
163
163
  overflow:hidden; }
164
- .iui-table-body .iui-row.iui-expanded-content.iui-enter, .iui-table-body .iui-row.iui-expanded-content.iui-exit-active{
164
+ .iui-table-body .iui-row.iui-expanded-content.iui-enter{
165
165
  opacity:0; }
166
- .iui-table-body .iui-row.iui-expanded-content.iui-exit, .iui-table-body .iui-row.iui-expanded-content.iui-enter-active{
166
+ .iui-table-body .iui-row.iui-expanded-content.iui-enter-active{
167
167
  opacity:1; }
168
- @media (prefers-reduced-motion: no-preference){
169
- .iui-table-body .iui-row.iui-expanded-content.iui-enter-active, .iui-table-body .iui-row.iui-expanded-content.iui-exit-active{
170
- transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
168
+ @media (prefers-reduced-motion: no-preference){
169
+ .iui-table-body .iui-row.iui-expanded-content.iui-enter-active{
170
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
171
+ .iui-table-body .iui-row.iui-expanded-content.iui-exit{
172
+ opacity:1; }
173
+ .iui-table-body .iui-row.iui-expanded-content.iui-exit-active{
174
+ opacity:0; }
175
+ @media (prefers-reduced-motion: no-preference){
176
+ .iui-table-body .iui-row.iui-expanded-content.iui-exit-active{
177
+ transition:opacity 0.2s ease-out, width 0.2s ease-out, height 0.2s ease-out; } }
171
178
  .iui-table-body .iui-row:not(.iui-selected) + .iui-selected, .iui-table-body .iui-row.iui-selected:first-child{
172
179
  border-bottom-color:transparent; }
173
180
  .iui-table-body .iui-row.iui-selected{
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "0.36.0",
3
+ "version": "0.36.1",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "src/index.scss",
package/scss/style/mixins.scss CHANGED
@@ -142,20 +142,27 @@
142
142
  /// Classes for react-transition-group
143
143
  /// Used for expand/collapse transitions. Needs height/width to be set in JS.
144
144
  @mixin iui-transition-group {
145
- &.iui-enter,
146
- &.iui-exit-active {
145
+ $transition-rule: opacity $iui-speed-fast ease-out, width $iui-speed-fast ease-out, height $iui-speed-fast ease-out;
146
+
147
+ &.iui-enter {
147
148
  opacity: 0;
148
149
  }
149
150
 
150
- &.iui-exit,
151
151
  &.iui-enter-active {
152
152
  opacity: 1;
153
+ @media (prefers-reduced-motion: no-preference) {
154
+ transition: $transition-rule;
155
+ }
156
+ }
157
+
158
+ &.iui-exit {
159
+ opacity: 1;
153
160
  }
154
161
 
155
- &.iui-enter-active,
156
162
  &.iui-exit-active {
163
+ opacity: 0;
157
164
  @media (prefers-reduced-motion: no-preference) {
158
- transition: opacity $iui-speed-fast ease-out, width $iui-speed-fast ease-out, height $iui-speed-fast ease-out;
165
+ transition: $transition-rule;
159
166
  }
160
167
  }
161
168
  }