@itwin/itwinui-css 0.62.0 → 0.63.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 (8) hide show
  1. package/CHANGELOG.md +11 -0
  2. package/css/all.css +30 -30
  3. package/css/footer.css +28 -28
  4. package/css/table.css +2 -2
  5. package/package.json +1 -1
  6. package/scss/footer/classes.scss +16 -0
  7. package/scss/footer/footer.scss +38 -41
  8. package/scss/table/table.scss +5 -1
package/CHANGELOG.md CHANGED
@@ -1,5 +1,16 @@
1
1
  # Changelog
2
2
 
3
+ ## [0.63.0](https://www.github.com/iTwin/iTwinUI/compare/v0.62.0...v0.63.0) (2022-08-01)
4
+
5
+ ### What's new
6
+
7
+ * **Footer:** Footer refactor for better customization ([#717](https://www.github.com/iTwin/iTwinUI/issues/717)) ([aa04c38](https://www.github.com/iTwin/iTwinUI/commit/aa04c38fabecaafebe35e5ad42934e5544139094))
8
+
9
+
10
+ ### Fixes
11
+
12
+ * **Table:** Zebra stripes content no longer goes on top of stick column ([#727](https://www.github.com/iTwin/iTwinUI/issues/727)) ([152bede](https://www.github.com/iTwin/iTwinUI/commit/152bede43af3ae6b922d4b14dc01c693f7c81366))
13
+
3
14
  ## [0.62.0](https://www.github.com/iTwin/iTwinUI/compare/v0.61.0...v0.62.0) (2022-07-27)
4
15
 
5
16
  ### What's new
package/css/all.css CHANGED
@@ -3517,7 +3517,8 @@ a.iui-breadcrumbs-text:focus{
3517
3517
  padding:11px 0;
3518
3518
  font-size:12px;
3519
3519
  }
3520
- .iui-legal-footer > ul{
3520
+
3521
+ .iui-legal-footer-list{
3521
3522
  list-style-type:none;
3522
3523
  margin:0 auto;
3523
3524
  padding:0;
@@ -3526,8 +3527,10 @@ a.iui-breadcrumbs-text:focus{
3526
3527
  align-items:center;
3527
3528
  flex-wrap:wrap;
3528
3529
  }
3529
- .iui-legal-footer > ul > li{
3530
- display:inline-block;
3530
+
3531
+ .iui-legal-footer-item{
3532
+ display:flex;
3533
+ align-items:center;
3531
3534
  -webkit-user-select:none;
3532
3535
  -moz-user-select:none;
3533
3536
  -ms-user-select:none;
@@ -3537,15 +3540,7 @@ a.iui-breadcrumbs-text:focus{
3537
3540
  color:rgba(0, 0, 0, 0.4);
3538
3541
  color:var(--iui-text-color-muted);
3539
3542
  }
3540
- .iui-legal-footer > ul > li .iui-separator{
3541
- margin:0 8px;
3542
- width:1px;
3543
- height:11px;
3544
- display:inline-table;
3545
- background-color:rgba(0, 0, 0, 0.4);
3546
- background-color:var(--iui-text-color-muted);
3547
- }
3548
- .iui-legal-footer > ul > li > a{
3543
+ .iui-legal-footer-item > a{
3549
3544
  color:#008ae0;
3550
3545
  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
3551
3546
  color:var(--iui-color-foreground-primary);
@@ -3555,54 +3550,59 @@ a.iui-breadcrumbs-text:focus{
3555
3550
  cursor:pointer;
3556
3551
  text-decoration:none;
3557
3552
  }
3558
- .iui-legal-footer > ul > li > a:focus-visible{
3553
+ .iui-legal-footer-item > a:focus-visible{
3559
3554
  outline:1px solid var(--iui-color-foreground-primary);
3560
3555
  outline-offset:1px;
3561
3556
  }
3562
3557
  @supports not selector(*:focus-visible){
3563
- .iui-legal-footer > ul > li > a:focus{
3558
+ .iui-legal-footer-item > a:focus{
3564
3559
  outline:1px solid var(--iui-color-foreground-primary);
3565
3560
  outline-offset:1px;
3566
3561
  }
3567
3562
  }
3568
- .iui-legal-footer > ul > li > a:hover{
3563
+ .iui-legal-footer-item > a:hover{
3569
3564
  color:#006bad;
3570
3565
  color:var(--iui-color-foreground-primary-overlay);
3571
3566
  }
3572
- .iui-legal-footer > ul > li > a:hover{
3567
+ .iui-legal-footer-item > a:hover{
3573
3568
  text-decoration:underline;
3574
3569
  }
3575
3570
  @media (prefers-contrast: more){
3576
- .iui-legal-footer > ul > li > a{
3571
+ .iui-legal-footer-item > a{
3577
3572
  text-decoration:underline;
3578
3573
  }
3579
- .iui-legal-footer > ul > li > a:hover{
3574
+ .iui-legal-footer-item > a:hover{
3580
3575
  text-decoration:none;
3581
3576
  }
3582
3577
  }
3583
- .iui-theme-light .iui-legal-footer > ul > li > a, .iui-theme-dark .iui-legal-footer > ul > li > a{
3578
+ .iui-theme-light .iui-legal-footer-item > a, .iui-theme-dark .iui-legal-footer-item > a{
3584
3579
  text-decoration:none;
3585
3580
  }
3586
- .iui-theme-light .iui-legal-footer > ul > li > a:hover, .iui-theme-dark .iui-legal-footer > ul > li > a:hover{
3581
+ .iui-theme-light .iui-legal-footer-item > a:hover, .iui-theme-dark .iui-legal-footer-item > a:hover{
3587
3582
  text-decoration:underline;
3588
3583
  }
3589
3584
 
3590
- .iui-theme-light-hc .iui-legal-footer > ul > li > a, .iui-theme-dark-hc .iui-legal-footer > ul > li > a{
3585
+ .iui-theme-light-hc .iui-legal-footer-item > a, .iui-theme-dark-hc .iui-legal-footer-item > a{
3591
3586
  text-decoration:underline;
3592
3587
  }
3593
- .iui-theme-light-hc .iui-legal-footer > ul > li > a:hover, .iui-theme-dark-hc .iui-legal-footer > ul > li > a:hover{
3588
+ .iui-theme-light-hc .iui-legal-footer-item > a:hover, .iui-theme-dark-hc .iui-legal-footer-item > a:hover{
3594
3589
  text-decoration:none;
3595
3590
  }
3596
3591
 
3597
- .iui-legal-footer > ul > li > a, .iui-legal-footer > ul > li > a:hover{
3592
+ .iui-legal-footer-item > a, .iui-legal-footer-item > a:hover{
3598
3593
  color:rgba(0, 0, 0, 0.4);
3599
3594
  color:var(--iui-text-color-muted);
3600
3595
  }
3601
- .iui-legal-footer > .iui-legal-footer-developer{
3602
- display:block;
3603
- -webkit-user-select:all;
3604
- -moz-user-select:all;
3605
- user-select:all;
3596
+
3597
+ .iui-legal-footer-separator{
3598
+ margin:0 8px;
3599
+ width:1px;
3600
+ height:11px;
3601
+ background-color:rgba(0, 0, 0, 0.4);
3602
+ background-color:var(--iui-text-color-muted);
3603
+ }
3604
+
3605
+ .iui-legal-footer-developer{
3606
3606
  color:rgba(0, 0, 0, 0.4);
3607
3607
  color:var(--iui-text-color-muted);
3608
3608
  }
@@ -7912,8 +7912,8 @@ label.iui-input-label.iui-disabled{
7912
7912
  scroll-snap-align:start none;
7913
7913
  }
7914
7914
  .iui-table-body.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected) .iui-cell{
7915
- background-color:rgba(0, 0, 0, 0.02);
7916
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02);
7915
+ background:linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)), linear-gradient(white, white);
7916
+ background:linear-gradient(rgba(var(--iui-color-foreground-body-rgb), 0.02), rgba(var(--iui-color-foreground-body-rgb), 0.02)), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
7917
7917
  }
7918
7918
  .iui-table-body .iui-row{
7919
7919
  min-width:100%;
package/css/footer.css CHANGED
@@ -12,7 +12,8 @@
12
12
  padding:11px 0;
13
13
  font-size:12px;
14
14
  }
15
- .iui-legal-footer > ul{
15
+
16
+ .iui-legal-footer-list{
16
17
  list-style-type:none;
17
18
  margin:0 auto;
18
19
  padding:0;
@@ -21,8 +22,10 @@
21
22
  align-items:center;
22
23
  flex-wrap:wrap;
23
24
  }
24
- .iui-legal-footer > ul > li{
25
- display:inline-block;
25
+
26
+ .iui-legal-footer-item{
27
+ display:flex;
28
+ align-items:center;
26
29
  -webkit-user-select:none;
27
30
  -moz-user-select:none;
28
31
  -ms-user-select:none;
@@ -32,15 +35,7 @@
32
35
  color:rgba(0, 0, 0, 0.4);
33
36
  color:var(--iui-text-color-muted);
34
37
  }
35
- .iui-legal-footer > ul > li .iui-separator{
36
- margin:0 8px;
37
- width:1px;
38
- height:11px;
39
- display:inline-table;
40
- background-color:rgba(0, 0, 0, 0.4);
41
- background-color:var(--iui-text-color-muted);
42
- }
43
- .iui-legal-footer > ul > li > a{
38
+ .iui-legal-footer-item > a{
44
39
  color:#008ae0;
45
40
  -webkit-tap-highlight-color:rgba(0, 138, 224, 0.2);
46
41
  color:var(--iui-color-foreground-primary);
@@ -50,54 +45,59 @@
50
45
  cursor:pointer;
51
46
  text-decoration:none;
52
47
  }
53
- .iui-legal-footer > ul > li > a:focus-visible{
48
+ .iui-legal-footer-item > a:focus-visible{
54
49
  outline:1px solid var(--iui-color-foreground-primary);
55
50
  outline-offset:1px;
56
51
  }
57
52
  @supports not selector(*:focus-visible){
58
- .iui-legal-footer > ul > li > a:focus{
53
+ .iui-legal-footer-item > a:focus{
59
54
  outline:1px solid var(--iui-color-foreground-primary);
60
55
  outline-offset:1px;
61
56
  }
62
57
  }
63
- .iui-legal-footer > ul > li > a:hover{
58
+ .iui-legal-footer-item > a:hover{
64
59
  color:#006bad;
65
60
  color:var(--iui-color-foreground-primary-overlay);
66
61
  }
67
- .iui-legal-footer > ul > li > a:hover{
62
+ .iui-legal-footer-item > a:hover{
68
63
  text-decoration:underline;
69
64
  }
70
65
  @media (prefers-contrast: more){
71
- .iui-legal-footer > ul > li > a{
66
+ .iui-legal-footer-item > a{
72
67
  text-decoration:underline;
73
68
  }
74
- .iui-legal-footer > ul > li > a:hover{
69
+ .iui-legal-footer-item > a:hover{
75
70
  text-decoration:none;
76
71
  }
77
72
  }
78
- .iui-theme-light .iui-legal-footer > ul > li > a, .iui-theme-dark .iui-legal-footer > ul > li > a{
73
+ .iui-theme-light .iui-legal-footer-item > a, .iui-theme-dark .iui-legal-footer-item > a{
79
74
  text-decoration:none;
80
75
  }
81
- .iui-theme-light .iui-legal-footer > ul > li > a:hover, .iui-theme-dark .iui-legal-footer > ul > li > a:hover{
76
+ .iui-theme-light .iui-legal-footer-item > a:hover, .iui-theme-dark .iui-legal-footer-item > a:hover{
82
77
  text-decoration:underline;
83
78
  }
84
79
 
85
- .iui-theme-light-hc .iui-legal-footer > ul > li > a, .iui-theme-dark-hc .iui-legal-footer > ul > li > a{
80
+ .iui-theme-light-hc .iui-legal-footer-item > a, .iui-theme-dark-hc .iui-legal-footer-item > a{
86
81
  text-decoration:underline;
87
82
  }
88
- .iui-theme-light-hc .iui-legal-footer > ul > li > a:hover, .iui-theme-dark-hc .iui-legal-footer > ul > li > a:hover{
83
+ .iui-theme-light-hc .iui-legal-footer-item > a:hover, .iui-theme-dark-hc .iui-legal-footer-item > a:hover{
89
84
  text-decoration:none;
90
85
  }
91
86
 
92
- .iui-legal-footer > ul > li > a, .iui-legal-footer > ul > li > a:hover{
87
+ .iui-legal-footer-item > a, .iui-legal-footer-item > a:hover{
93
88
  color:rgba(0, 0, 0, 0.4);
94
89
  color:var(--iui-text-color-muted);
95
90
  }
96
- .iui-legal-footer > .iui-legal-footer-developer{
97
- display:block;
98
- -webkit-user-select:all;
99
- -moz-user-select:all;
100
- user-select:all;
91
+
92
+ .iui-legal-footer-separator{
93
+ margin:0 8px;
94
+ width:1px;
95
+ height:11px;
96
+ background-color:rgba(0, 0, 0, 0.4);
97
+ background-color:var(--iui-text-color-muted);
98
+ }
99
+
100
+ .iui-legal-footer-developer{
101
101
  color:rgba(0, 0, 0, 0.4);
102
102
  color:var(--iui-text-color-muted);
103
103
  }
package/css/table.css CHANGED
@@ -216,8 +216,8 @@
216
216
  scroll-snap-align:start none;
217
217
  }
218
218
  .iui-table-body.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected) .iui-cell{
219
- background-color:rgba(0, 0, 0, 0.02);
220
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0.02);
219
+ background:linear-gradient(rgba(0, 0, 0, 0.02), rgba(0, 0, 0, 0.02)), linear-gradient(white, white);
220
+ background:linear-gradient(rgba(var(--iui-color-foreground-body-rgb), 0.02), rgba(var(--iui-color-foreground-body-rgb), 0.02)), linear-gradient(var(--iui-color-background-1), var(--iui-color-background-1));
221
221
  }
222
222
  .iui-table-body .iui-row{
223
223
  min-width:100%;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "0.62.0",
3
+ "version": "0.63.0",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "src/index.scss",
package/scss/footer/classes.scss CHANGED
@@ -5,3 +5,19 @@
5
5
  .iui-legal-footer {
6
6
  @include iui-legal-footer;
7
7
  }
8
+
9
+ .iui-legal-footer-list {
10
+ @include iui-legal-footer-list;
11
+ }
12
+
13
+ .iui-legal-footer-item {
14
+ @include iui-legal-footer-item;
15
+ }
16
+
17
+ .iui-legal-footer-separator {
18
+ @include iui-legal-footer-separator;
19
+ }
20
+
21
+ .iui-legal-footer-developer {
22
+ @include iui-legal-footer-developer;
23
+ }
package/scss/footer/footer.scss CHANGED
@@ -10,56 +10,53 @@
10
10
  width: 100%;
11
11
  padding: $iui-baseline 0;
12
12
  font-size: $iui-font-size-small;
13
+ }
13
14
 
14
- > ul {
15
- list-style-type: none;
16
- margin: 0 auto;
17
- padding: 0;
18
- display: flex;
19
- justify-content: center;
20
- align-items: center;
21
- flex-wrap: wrap;
22
-
23
- > li {
24
- display: inline-block;
25
- user-select: none;
26
- white-space: nowrap;
27
- word-break: keep-all;
28
-
29
- @include themed {
30
- color: t(iui-text-color-muted);
31
- }
15
+ @mixin iui-legal-footer-list {
16
+ list-style-type: none;
17
+ margin: 0 auto;
18
+ padding: 0;
19
+ display: flex;
20
+ justify-content: center;
21
+ align-items: center;
22
+ flex-wrap: wrap;
23
+ }
32
24
 
33
- .iui-separator {
34
- margin: 0 $iui-s;
35
- width: 1px;
36
- height: $iui-baseline;
37
- display: inline-table;
25
+ @mixin iui-legal-footer-item {
26
+ display: flex;
27
+ align-items: center;
28
+ user-select: none;
29
+ white-space: nowrap;
30
+ word-break: keep-all;
38
31
 
39
- @include themed {
40
- background-color: t(iui-text-color-muted);
41
- }
42
- }
32
+ @include themed {
33
+ color: t(iui-text-color-muted);
34
+ }
43
35
 
44
- > a {
45
- @include iui-anchor;
36
+ > a {
37
+ @include iui-anchor;
46
38
 
47
- &,
48
- &:hover {
49
- @include themed {
50
- color: t(iui-text-color-muted);
51
- }
52
- }
39
+ &,
40
+ &:hover {
41
+ @include themed {
42
+ color: t(iui-text-color-muted);
53
43
  }
54
44
  }
55
45
  }
46
+ }
56
47
 
57
- > .iui-legal-footer-developer {
58
- display: block;
59
- user-select: all;
48
+ @mixin iui-legal-footer-separator {
49
+ margin: 0 $iui-s;
50
+ width: 1px;
51
+ height: $iui-baseline;
60
52
 
61
- @include themed {
62
- color: t(iui-text-color-muted);
63
- }
53
+ @include themed {
54
+ background-color: t(iui-text-color-muted);
55
+ }
56
+ }
57
+
58
+ @mixin iui-legal-footer-developer {
59
+ @include themed {
60
+ color: t(iui-text-color-muted);
64
61
  }
65
62
  }
package/scss/table/table.scss CHANGED
@@ -195,7 +195,11 @@
195
195
 
196
196
  &.iui-zebra-striping .iui-row:nth-child(even):not(.iui-selected) .iui-cell {
197
197
  @include themed {
198
- background-color: rgba(t(iui-color-foreground-body-rgb), 0.02);
198
+ background: linear-gradient(
199
+ rgba(t(iui-color-foreground-body-rgb), 0.02),
200
+ rgba(t(iui-color-foreground-body-rgb), 0.02)
201
+ ),
202
+ linear-gradient(t(iui-color-background-1), t(iui-color-background-1));
199
203
  }
200
204
  }
201
205