@itwin/itwinui-css 0.49.0 → 0.50.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 (9) hide show
  1. package/css/all.css +60 -14
  2. package/css/button.css +35 -6
  3. package/css/carousel.css +23 -7
  4. package/css/modal.css +2 -1
  5. package/package.json +1 -1
  6. package/scss/button/button-group.scss +35 -8
  7. package/scss/button/classes.scss +4 -0
  8. package/scss/carousel/carousel.scss +13 -5
  9. package/scss/modal/modal.scss +1 -0
package/css/all.css CHANGED
@@ -931,13 +931,43 @@ html.iui-theme-dark{
931
931
  border-top-left-radius:3px;
932
932
  border-bottom-left-radius:3px; }
933
933
  .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not(.iui-borderless)){
934
- border-top-right-radius:3px;
935
- border-bottom-right-radius:3px; }
934
+ border-bottom-right-radius:3px;
935
+ border-top-right-radius:3px; }
936
936
  .iui-button-group > * + *{
937
937
  margin-left:-1px; }
938
938
  .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
939
- border-left-color:#DCE0E3;
940
939
  border-left-color:var(--iui-color-background-4); }
940
+ .iui-button-group-vertical{
941
+ display:inline-flex;
942
+ align-items:center;
943
+ isolation:isolate;
944
+ flex-direction:column; }
945
+ .iui-button-group-vertical > *{
946
+ display:flex; }
947
+ .iui-button-group-vertical > * .iui-input-container, .iui-button-group-vertical > * .iui-button, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)){
948
+ position:relative;
949
+ --_iui-button-active-stripe-inset:2px calc(100% - 4px) 2px 2px; }
950
+ .iui-button-group-vertical > * .iui-input-container:hover, .iui-button-group-vertical > * .iui-button:hover, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
951
+ z-index:1; }
952
+ .iui-button-group-vertical > * .iui-input-container:focus, .iui-button-group-vertical > * .iui-input-container:focus-within, .iui-button-group-vertical > * .iui-button:focus, .iui-button-group-vertical > * .iui-button:focus-within, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
953
+ z-index:2; }
954
+ .iui-button-group-vertical > * .iui-input-container:disabled, .iui-button-group-vertical > * .iui-input-container.iui-disabled, .iui-button-group-vertical > * .iui-input-container[aria-disabled="true"], .iui-button-group-vertical > * .iui-button:disabled, .iui-button-group-vertical > * .iui-button.iui-disabled, .iui-button-group-vertical > * .iui-button[aria-disabled="true"], .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled="true"]{
955
+ z-index:-1; }
956
+ .iui-button-group-vertical > * .iui-input, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)){
957
+ border-radius:0;
958
+ transition-duration:0ms; }
959
+ .iui-button-group-vertical > * .iui-input:hover, .iui-button-group-vertical > * .iui-input:focus, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)):focus{
960
+ transition-duration:0.2s; }
961
+ .iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not(.iui-borderless)){
962
+ border-top-left-radius:3px;
963
+ border-top-right-radius:3px; }
964
+ .iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not(.iui-borderless)){
965
+ border-bottom-right-radius:3px;
966
+ border-bottom-left-radius:3px; }
967
+ .iui-button-group-vertical > * + *{
968
+ margin-top:-1px; }
969
+ .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
970
+ border-top-color:var(--iui-color-background-4); }
941
971
 
942
972
  .iui-button-split-menu{
943
973
  display:inline-flex;
@@ -963,12 +993,11 @@ html.iui-theme-dark{
963
993
  border-top-left-radius:3px;
964
994
  border-bottom-left-radius:3px; }
965
995
  .iui-button-split-menu > *:last-child .iui-input, .iui-button-split-menu > *:last-child .iui-button:where(:not(.iui-borderless)){
966
- border-top-right-radius:3px;
967
- border-bottom-right-radius:3px; }
996
+ border-bottom-right-radius:3px;
997
+ border-top-right-radius:3px; }
968
998
  .iui-button-split-menu > * + *{
969
999
  margin-left:-1px; }
970
1000
  .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
971
- border-left-color:#DCE0E3;
972
1001
  border-left-color:var(--iui-color-background-4); }
973
1002
  .iui-button-split-menu:hover{
974
1003
  background-color:rgba(0, 0, 0, 0.1);
@@ -1020,16 +1049,25 @@ html.iui-theme-dark{
1020
1049
 
1021
1050
  .iui-carousel-slider{
1022
1051
  display:flex;
1052
+ gap:8px;
1023
1053
  list-style:none;
1024
1054
  margin:0;
1025
- padding:0; }
1055
+ padding:0;
1056
+ overflow-x:auto;
1057
+ overflow-x:overlay;
1058
+ -ms-scroll-snap-type:x mandatory;
1059
+ scroll-snap-type:x mandatory;
1060
+ scrollbar-width:none; }
1026
1061
  @media (prefers-reduced-motion: no-preference){
1027
1062
  .iui-carousel-slider{
1028
- transition:transform 0.8s ease-in-out; } }
1063
+ scroll-behavior:smooth; } }
1064
+ .iui-carousel-slider::-webkit-scrollbar{
1065
+ display:none; }
1029
1066
  .iui-carousel-slider-item{
1030
1067
  width:100%;
1031
1068
  flex-shrink:0;
1032
- box-sizing:border-box; }
1069
+ box-sizing:border-box;
1070
+ scroll-snap-align:center; }
1033
1071
 
1034
1072
  .iui-carousel-navigation{
1035
1073
  display:flex;
@@ -1074,7 +1112,16 @@ html.iui-theme-dark{
1074
1112
  background-color:rgba(0, 0, 0, 0.6);
1075
1113
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
1076
1114
  .iui-carousel-navigation-dot.iui-invisible{
1077
- display:none; }
1115
+ -webkit-clip-path:inset(50%);
1116
+ clip-path:inset(50%);
1117
+ overflow:hidden;
1118
+ position:absolute;
1119
+ white-space:nowrap;
1120
+ height:1px;
1121
+ width:1px;
1122
+ padding:0;
1123
+ margin:-1px;
1124
+ border-width:0; }
1078
1125
  .iui-carousel-navigation-dot::after{
1079
1126
  content:'';
1080
1127
  display:block;
@@ -1092,9 +1139,7 @@ html.iui-theme-dark{
1092
1139
  .iui-carousel-navigation-dot.iui-second::after{
1093
1140
  transform:scale(0.75); }
1094
1141
  .iui-carousel-navigation-dot.iui-invisible::after{
1095
- transform:scale(0);
1096
- background-color:rgba(0, 0, 0, 0);
1097
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0); }
1142
+ transform:scale(0); }
1098
1143
  .iui-carousel-navigation-dot.iui-active::after{
1099
1144
  background-color:#008BE1;
1100
1145
  background-color:var(--iui-color-foreground-primary); }
@@ -3887,7 +3932,8 @@ html.iui-theme-dark{
3887
3932
  font-size:18px;
3888
3933
  white-space:nowrap;
3889
3934
  overflow:hidden;
3890
- text-overflow:ellipsis; }
3935
+ text-overflow:ellipsis;
3936
+ line-height:1.5; }
3891
3937
  .iui-modal > .iui-modal-dialog .iui-button-bar{
3892
3938
  margin-top:11px;
3893
3939
  display:flex;
package/css/button.css CHANGED
@@ -289,13 +289,43 @@
289
289
  border-top-left-radius:3px;
290
290
  border-bottom-left-radius:3px; }
291
291
  .iui-button-group > *:last-child .iui-input, .iui-button-group > *:last-child .iui-button:where(:not(.iui-borderless)){
292
- border-top-right-radius:3px;
293
- border-bottom-right-radius:3px; }
292
+ border-bottom-right-radius:3px;
293
+ border-top-right-radius:3px; }
294
294
  .iui-button-group > * + *{
295
295
  margin-left:-1px; }
296
296
  .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
297
- border-left-color:#DCE0E3;
298
297
  border-left-color:var(--iui-color-background-4); }
298
+ .iui-button-group-vertical{
299
+ display:inline-flex;
300
+ align-items:center;
301
+ isolation:isolate;
302
+ flex-direction:column; }
303
+ .iui-button-group-vertical > *{
304
+ display:flex; }
305
+ .iui-button-group-vertical > * .iui-input-container, .iui-button-group-vertical > * .iui-button, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)){
306
+ position:relative;
307
+ --_iui-button-active-stripe-inset:2px calc(100% - 4px) 2px 2px; }
308
+ .iui-button-group-vertical > * .iui-input-container:hover, .iui-button-group-vertical > * .iui-button:hover, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):hover{
309
+ z-index:1; }
310
+ .iui-button-group-vertical > * .iui-input-container:focus, .iui-button-group-vertical > * .iui-input-container:focus-within, .iui-button-group-vertical > * .iui-button:focus, .iui-button-group-vertical > * .iui-button:focus-within, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):focus-within{
311
+ z-index:2; }
312
+ .iui-button-group-vertical > * .iui-input-container:disabled, .iui-button-group-vertical > * .iui-input-container.iui-disabled, .iui-button-group-vertical > * .iui-input-container[aria-disabled="true"], .iui-button-group-vertical > * .iui-button:disabled, .iui-button-group-vertical > * .iui-button.iui-disabled, .iui-button-group-vertical > * .iui-button[aria-disabled="true"], .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)):disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input)).iui-disabled, .iui-button-group-vertical > * .iui-input:where(:not(.iui-input-container .iui-input))[aria-disabled="true"]{
313
+ z-index:-1; }
314
+ .iui-button-group-vertical > * .iui-input, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)){
315
+ border-radius:0;
316
+ transition-duration:0ms; }
317
+ .iui-button-group-vertical > * .iui-input:hover, .iui-button-group-vertical > * .iui-input:focus, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)):hover, .iui-button-group-vertical > * .iui-button:where(:not(.iui-borderless)):focus{
318
+ transition-duration:0.2s; }
319
+ .iui-button-group-vertical > *:first-child .iui-input, .iui-button-group-vertical > *:first-child .iui-button:where(:not(.iui-borderless)){
320
+ border-top-left-radius:3px;
321
+ border-top-right-radius:3px; }
322
+ .iui-button-group-vertical > *:last-child .iui-input, .iui-button-group-vertical > *:last-child .iui-button:where(:not(.iui-borderless)){
323
+ border-bottom-right-radius:3px;
324
+ border-bottom-left-radius:3px; }
325
+ .iui-button-group-vertical > * + *{
326
+ margin-top:-1px; }
327
+ .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-group-vertical > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
328
+ border-top-color:var(--iui-color-background-4); }
299
329
 
300
330
  .iui-button-split-menu{
301
331
  display:inline-flex;
@@ -321,12 +351,11 @@
321
351
  border-top-left-radius:3px;
322
352
  border-bottom-left-radius:3px; }
323
353
  .iui-button-split-menu > *:last-child .iui-input, .iui-button-split-menu > *:last-child .iui-button:where(:not(.iui-borderless)){
324
- border-top-right-radius:3px;
325
- border-bottom-right-radius:3px; }
354
+ border-bottom-right-radius:3px;
355
+ border-top-right-radius:3px; }
326
356
  .iui-button-split-menu > * + *{
327
357
  margin-left:-1px; }
328
358
  .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default):disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default).iui-disabled, .iui-button-split-menu > *:not(:first-child) :where(.iui-button.iui-default)[aria-disabled="true"]{
329
- border-left-color:#DCE0E3;
330
359
  border-left-color:var(--iui-color-background-4); }
331
360
  .iui-button-split-menu:hover{
332
361
  background-color:rgba(0, 0, 0, 0.1);
package/css/carousel.css CHANGED
@@ -15,16 +15,25 @@
15
15
 
16
16
  .iui-carousel-slider{
17
17
  display:flex;
18
+ gap:8px;
18
19
  list-style:none;
19
20
  margin:0;
20
- padding:0; }
21
+ padding:0;
22
+ overflow-x:auto;
23
+ overflow-x:overlay;
24
+ -ms-scroll-snap-type:x mandatory;
25
+ scroll-snap-type:x mandatory;
26
+ scrollbar-width:none; }
21
27
  @media (prefers-reduced-motion: no-preference){
22
28
  .iui-carousel-slider{
23
- transition:transform 0.8s ease-in-out; } }
29
+ scroll-behavior:smooth; } }
30
+ .iui-carousel-slider::-webkit-scrollbar{
31
+ display:none; }
24
32
  .iui-carousel-slider-item{
25
33
  width:100%;
26
34
  flex-shrink:0;
27
- box-sizing:border-box; }
35
+ box-sizing:border-box;
36
+ scroll-snap-align:center; }
28
37
 
29
38
  .iui-carousel-navigation{
30
39
  display:flex;
@@ -69,7 +78,16 @@
69
78
  background-color:rgba(0, 0, 0, 0.6);
70
79
  background-color:rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3)); }
71
80
  .iui-carousel-navigation-dot.iui-invisible{
72
- display:none; }
81
+ -webkit-clip-path:inset(50%);
82
+ clip-path:inset(50%);
83
+ overflow:hidden;
84
+ position:absolute;
85
+ white-space:nowrap;
86
+ height:1px;
87
+ width:1px;
88
+ padding:0;
89
+ margin:-1px;
90
+ border-width:0; }
73
91
  .iui-carousel-navigation-dot::after{
74
92
  content:'';
75
93
  display:block;
@@ -87,9 +105,7 @@
87
105
  .iui-carousel-navigation-dot.iui-second::after{
88
106
  transform:scale(0.75); }
89
107
  .iui-carousel-navigation-dot.iui-invisible::after{
90
- transform:scale(0);
91
- background-color:rgba(0, 0, 0, 0);
92
- background-color:rgba(var(--iui-color-foreground-body-rgb), 0); }
108
+ transform:scale(0); }
93
109
  .iui-carousel-navigation-dot.iui-active::after{
94
110
  background-color:#008BE1;
95
111
  background-color:var(--iui-color-foreground-primary); }
package/css/modal.css CHANGED
@@ -47,7 +47,8 @@
47
47
  font-size:18px;
48
48
  white-space:nowrap;
49
49
  overflow:hidden;
50
- text-overflow:ellipsis; }
50
+ text-overflow:ellipsis;
51
+ line-height:1.5; }
51
52
  .iui-modal > .iui-modal-dialog .iui-button-bar{
52
53
  margin-top:11px;
53
54
  display:flex;
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "@itwin/itwinui-css",
3
- "version": "0.49.0",
3
+ "version": "0.50.0",
4
4
  "author": "Bentley Systems",
5
5
  "license": "MIT",
6
6
  "main": "src/index.scss",
package/scss/button/button-group.scss CHANGED
@@ -2,11 +2,18 @@
2
2
  // See LICENSE.md in the project root for license terms and full copyright notice.
3
3
  @import '../style/index';
4
4
 
5
- @mixin iui-button-group {
5
+ /// Mixin for button group or input+button combo group.
6
+ /// @arg $orientation must be one of: horizontal, vertical
7
+ /// Note: Vertical button-group should be used for icon buttons only.
8
+ @mixin iui-button-group($orientation: horizontal) {
6
9
  display: inline-flex;
7
10
  align-items: center;
8
11
  isolation: isolate;
9
12
 
13
+ @if $orientation != 'horizontal' {
14
+ flex-direction: column;
15
+ }
16
+
10
17
  $childZindexSelector: '.iui-input-container, .iui-button, .iui-input:where(:not(.iui-input-container .iui-input))';
11
18
  $childBorderSelector: '.iui-input, .iui-button:where(:not(.iui-borderless))';
12
19
  $disabledSelector: '&:disabled, &.iui-disabled, &[aria-disabled="true"]';
@@ -17,8 +24,12 @@
17
24
  #{$childZindexSelector} {
18
25
  position: relative;
19
26
 
20
- // Adds stripe above active button
21
- --_iui-button-active-stripe-inset: #{$iui-xxs} #{$iui-xxs} calc(100% - #{$iui-xs});
27
+ // Adds stripe to active button
28
+ @if $orientation == 'horizontal' {
29
+ --_iui-button-active-stripe-inset: #{$iui-xxs} #{$iui-xxs} calc(100% - #{$iui-xs});
30
+ } @else {
31
+ --_iui-button-active-stripe-inset: #{$iui-xxs} calc(100% - #{$iui-xs}) #{$iui-xxs} #{$iui-xxs};
32
+ }
22
33
 
23
34
  &:hover {
24
35
  z-index: 1;
@@ -50,27 +61,43 @@
50
61
  &:first-child {
51
62
  #{$childBorderSelector} {
52
63
  border-top-left-radius: $iui-border-radius;
53
- border-bottom-left-radius: $iui-border-radius;
64
+
65
+ @if $orientation == 'horizontal' {
66
+ border-bottom-left-radius: $iui-border-radius;
67
+ } @else {
68
+ border-top-right-radius: $iui-border-radius;
69
+ }
54
70
  }
55
71
  }
56
72
 
57
73
  &:last-child {
58
74
  #{$childBorderSelector} {
59
- border-top-right-radius: $iui-border-radius;
60
75
  border-bottom-right-radius: $iui-border-radius;
76
+
77
+ @if $orientation == 'horizontal' {
78
+ border-top-right-radius: $iui-border-radius;
79
+ } @else {
80
+ border-bottom-left-radius: $iui-border-radius;
81
+ }
61
82
  }
62
83
  }
63
84
 
64
85
  // Use negative margin to make adjacent borders overlap
65
86
  + * {
66
- margin-left: -1px;
87
+ @if $orientation == 'horizontal' {
88
+ margin-left: -1px;
89
+ } @else {
90
+ margin-top: -1px;
91
+ }
67
92
  }
68
93
 
69
94
  // Add slight border between disabled items
70
95
  &:not(:first-child) :where(.iui-button.iui-default) {
71
96
  #{$disabledSelector} {
72
- @include themed {
73
- border-left-color: t(iui-color-background-4);
97
+ @if $orientation == 'horizontal' {
98
+ border-left-color: var(--iui-color-background-4);
99
+ } @else {
100
+ border-top-color: var(--iui-color-background-4);
74
101
  }
75
102
  }
76
103
  }
package/scss/button/classes.scss CHANGED
@@ -47,6 +47,10 @@
47
47
 
48
48
  .iui-button-group {
49
49
  @include iui-button-group;
50
+
51
+ &-vertical {
52
+ @include iui-button-group(vertical);
53
+ }
50
54
  }
51
55
 
52
56
  .iui-button-split-menu {
package/scss/carousel/carousel.scss CHANGED
@@ -12,17 +12,28 @@
12
12
 
13
13
  @mixin iui-carousel-slider {
14
14
  display: flex;
15
+ gap: $iui-s;
15
16
  list-style: none;
16
17
  margin: 0;
17
18
  padding: 0;
19
+ overflow-x: auto;
20
+ overflow-x: overlay;
21
+ scroll-snap-type: x mandatory;
18
22
  @media (prefers-reduced-motion: no-preference) {
19
- transition: transform $iui-speed-slow ease-in-out;
23
+ scroll-behavior: smooth;
20
24
  }
21
25
 
26
+ // hide scrollbar
27
+ &::-webkit-scrollbar {
28
+ display: none;
29
+ }
30
+ scrollbar-width: none;
31
+
22
32
  &-item {
23
33
  width: 100%;
24
34
  flex-shrink: 0;
25
35
  box-sizing: border-box;
36
+ scroll-snap-align: center;
26
37
  }
27
38
  }
28
39
 
@@ -73,7 +84,7 @@
73
84
  }
74
85
 
75
86
  &.iui-invisible {
76
- display: none;
87
+ @include visually-hidden;
77
88
  }
78
89
 
79
90
  &::after {
@@ -101,9 +112,6 @@
101
112
 
102
113
  &.iui-invisible::after {
103
114
  transform: scale(0);
104
- @include themed {
105
- background-color: rgba(t(iui-color-foreground-body-rgb), 0);
106
- }
107
115
  }
108
116
 
109
117
  &.iui-active::after {
package/scss/modal/modal.scss CHANGED
@@ -53,6 +53,7 @@
53
53
  white-space: nowrap;
54
54
  overflow: hidden;
55
55
  text-overflow: ellipsis;
56
+ line-height: 1.5;
56
57
  }
57
58
  }
58
59