@itwin/itwinui-css 0.50.1 → 0.51.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 (60) hide show
  1. package/css/alert.css +232 -174
  2. package/css/all.css +7242 -5607
  3. package/css/badge.css +2 -1
  4. package/css/blockquote.css +10 -7
  5. package/css/breadcrumbs.css +110 -87
  6. package/css/button.css +441 -345
  7. package/css/carousel.css +119 -88
  8. package/css/code.css +69 -56
  9. package/css/color-picker.css +150 -103
  10. package/css/date-picker.css +73 -55
  11. package/css/expandable-block.css +212 -160
  12. package/css/fieldset.css +22 -18
  13. package/css/file-upload.css +93 -79
  14. package/css/footer.css +64 -53
  15. package/css/global.css +100 -78
  16. package/css/header.css +471 -364
  17. package/css/icon.css +108 -78
  18. package/css/information-panel.css +174 -137
  19. package/css/inputs.css +1134 -942
  20. package/css/keyboard.css +11 -7
  21. package/css/location-marker.css +68 -58
  22. package/css/menu.css +105 -80
  23. package/css/modal.css +54 -43
  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 +315 -237
  28. package/css/reset-global-styles.css +10 -5
  29. package/css/side-navigation.css +189 -140
  30. package/css/skip-to-content.css +41 -27
  31. package/css/slider.css +112 -87
  32. package/css/table.css +563 -419
  33. package/css/tabs.css +324 -238
  34. package/css/tag.css +111 -84
  35. package/css/text.css +46 -27
  36. package/css/tile.css +387 -311
  37. package/css/time-picker.css +113 -86
  38. package/css/toast-notification.css +232 -173
  39. package/css/toggle-switch.css +176 -111
  40. package/css/tooltip.css +21 -16
  41. package/css/tree.css +123 -93
  42. package/css/user-icon.css +204 -162
  43. package/css/wizard.css +156 -131
  44. package/package.json +5 -6
  45. package/scss/alert/alert.scss +1 -5
  46. package/scss/carousel/carousel.scss +4 -1
  47. package/scss/code/codeblock.scss +1 -1
  48. package/scss/inputs/checkbox.scss +1 -0
  49. package/scss/inputs/labeled-inputs.scss +8 -8
  50. package/scss/inputs/radio.scss +0 -4
  51. package/scss/location-marker/data-rich.scss +1 -1
  52. package/scss/location-marker/me.scss +4 -4
  53. package/scss/popover/popover.scss +1 -2
  54. package/scss/progress-indicator/linear.scss +2 -10
  55. package/scss/style/global.scss +1 -5
  56. package/scss/style/mixins.scss +9 -0
  57. package/scss/table/table.scss +23 -14
  58. package/scss/toast-notification/categories.scss +1 -5
  59. package/scss/toggle-switch/classes.scss +4 -0
  60. package/scss/toggle-switch/toggle-switch.scss +141 -162
package/css/keyboard.css CHANGED
@@ -26,10 +26,14 @@
26
26
  box-shadow:0 1px 1px #C7CCD1, 0 1px 0 0 rgba(255, 255, 255, 0.2) inset;
27
27
  background-color:var(--iui-color-background-1);
28
28
  border:1px solid var(--iui-color-background-5);
29
- box-shadow:0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset; }
30
- @media (prefers-reduced-motion: no-preference){
31
- .iui-keyboard{
32
- transition:box-shadow 0.2s ease-out; } }
33
- .iui-keyboard:hover{
34
- box-shadow:0 0 0 #C7CCD1, 0 0 0 0 rgba(255, 255, 255, 0.2) inset;
35
- box-shadow:0 0 0 var(--iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset; }
29
+ box-shadow:0 1px 1px var(--iui-color-background-5), 0 1px 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
30
+ }
31
+ @media (prefers-reduced-motion: no-preference){
32
+ .iui-keyboard{
33
+ transition:box-shadow 0.2s ease-out;
34
+ }
35
+ }
36
+ .iui-keyboard:hover{
37
+ box-shadow:0 0 0 #C7CCD1, 0 0 0 0 rgba(255, 255, 255, 0.2) inset;
38
+ box-shadow:0 0 0 var(--iui-color-background-5), 0 0 0 0 rgba(255, 255, 255, var(--iui-opacity-5)) inset;
39
+ }
package/css/location-marker.css CHANGED
@@ -15,12 +15,15 @@
15
15
  position:relative;
16
16
  width:24px;
17
17
  height:24px;
18
- cursor:pointer; }
19
- .iui-location-marker-default > .iui-location-marker-default-pin{
20
- filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25)); }
21
- .iui-location-marker-default > .iui-location-marker-default-pin > .iui-location-marker-default-pin-dot{
22
- fill:#FFF;
23
- fill:var(--iui-color-foreground-accessory); }
18
+ cursor:pointer;
19
+ }
20
+ .iui-location-marker-default > .iui-location-marker-default-pin{
21
+ filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
22
+ }
23
+ .iui-location-marker-default > .iui-location-marker-default-pin > .iui-location-marker-default-pin-dot{
24
+ fill:#FFF;
25
+ fill:var(--iui-color-foreground-accessory);
26
+ }
24
27
 
25
28
  .iui-location-marker-data-rich{
26
29
  margin:0;
@@ -33,45 +36,50 @@
33
36
  -ms-user-select:none;
34
37
  user-select:none;
35
38
  position:relative;
36
- cursor:pointer; }
37
- .iui-location-marker-data-rich > .iui-location-marker-data-rich-body{
38
- min-width:32px;
39
- border-radius:3px;
40
- text-align:center;
41
- font-size:16px;
42
- padding:3px 8px;
43
- filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
44
- box-sizing:border-box;
45
- position:relative;
46
- border:solid 1px #FFF;
47
- background-color:#FFF;
48
- color:#FFF;
49
- border:solid 1px var(--iui-color-foreground-accessory);
50
- background-color:var(--iui-color-foreground-accessory);
51
- color:var(--iui-color-foreground-accessory); }
52
- .iui-location-marker-data-rich > .iui-location-marker-data-rich-body::before{
53
- content:'';
54
- position:absolute;
55
- display:block;
56
- width:0;
57
- height:0;
58
- bottom:-9px;
59
- left:0;
60
- right:0;
61
- margin:auto;
62
- border-width:4px;
63
- border-style:solid;
64
- border-color:#FFF transparent transparent transparent;
65
- border-color:var(--iui-color-foreground-accessory) transparent transparent transparent; }
66
- .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon{
67
- display:inline-block;
68
- width:16px;
69
- height:16px;
70
- font-size:inherit;
71
- vertical-align:-2px; }
72
- .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon.iui-location-marker-data-rich-icon-monochrome{
73
- fill:#FFF;
74
- fill:var(--iui-color-foreground-accessory); }
39
+ cursor:pointer;
40
+ }
41
+ .iui-location-marker-data-rich > .iui-location-marker-data-rich-body{
42
+ min-width:32px;
43
+ border-radius:3px;
44
+ text-align:center;
45
+ font-size:16px;
46
+ padding:3px 8px;
47
+ filter:drop-shadow(0 1px 5px rgba(0, 0, 0, 0.25));
48
+ box-sizing:border-box;
49
+ position:relative;
50
+ border:solid 1px #FFF;
51
+ background-color:#FFF;
52
+ color:#FFF;
53
+ border:solid 1px var(--iui-color-foreground-accessory);
54
+ background-color:var(--iui-color-foreground-accessory);
55
+ color:var(--iui-color-foreground-accessory);
56
+ }
57
+ .iui-location-marker-data-rich > .iui-location-marker-data-rich-body::before{
58
+ content:"";
59
+ position:absolute;
60
+ display:block;
61
+ width:0;
62
+ height:0;
63
+ bottom:-9px;
64
+ left:0;
65
+ right:0;
66
+ margin:auto;
67
+ border-width:4px;
68
+ border-style:solid;
69
+ border-color:#FFF transparent transparent transparent;
70
+ border-color:var(--iui-color-foreground-accessory) transparent transparent transparent;
71
+ }
72
+ .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon{
73
+ display:inline-block;
74
+ width:16px;
75
+ height:16px;
76
+ font-size:inherit;
77
+ vertical-align:-2px;
78
+ }
79
+ .iui-location-marker-data-rich > .iui-location-marker-data-rich-body > .iui-location-marker-data-rich-icon.iui-location-marker-data-rich-icon-monochrome{
80
+ fill:#FFF;
81
+ fill:var(--iui-color-foreground-accessory);
82
+ }
75
83
 
76
84
  .iui-location-marker-me{
77
85
  margin:0;
@@ -90,16 +98,18 @@
90
98
  border-radius:50%;
91
99
  cursor:default;
92
100
  background:radial-gradient(circle at center, rgba(0, 139, 225, 0), rgba(0, 139, 225, 0.2));
93
- background:radial-gradient(circle at center, rgba(var(--iui-color-foreground-primary-rgb), 0), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5))); }
94
- .iui-location-marker-me > .iui-location-marker-me-dot{
95
- width:12px;
96
- height:12px;
97
- position:absolute;
98
- top:6px;
99
- left:6px;
100
- border-radius:50%;
101
- box-sizing:border-box;
102
- border:1px solid #FFF;
103
- background-color:#008BE1;
104
- border:1px solid var(--iui-color-foreground-accessory);
105
- background-color:var(--iui-color-background-primary); }
101
+ background:radial-gradient(circle at center, rgba(var(--iui-color-foreground-primary-rgb), 0), rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5)));
102
+ }
103
+ .iui-location-marker-me > .iui-location-marker-me-dot{
104
+ width:12px;
105
+ height:12px;
106
+ position:absolute;
107
+ top:6px;
108
+ left:6px;
109
+ border-radius:50%;
110
+ box-sizing:border-box;
111
+ border:1px solid #FFF;
112
+ background-color:#008BE1;
113
+ border:1px solid var(--iui-color-foreground-accessory);
114
+ background-color:var(--iui-color-background-primary);
115
+ }
package/css/menu.css CHANGED
@@ -19,17 +19,21 @@
19
19
  user-select:none;
20
20
  width:100%;
21
21
  margin:0;
22
- padding:0; }
23
- .iui-menu .iui-header-menu-icon{
24
- margin:0 4px; }
25
- .iui-menu div.iui-header-menu-icon{
26
- margin:0;
27
- width:24px;
28
- height:24px;
29
- border-radius:3px; }
30
- .iui-menu.iui-scroll{
31
- overflow-y:auto;
32
- overflow-y:overlay; }
22
+ padding:0;
23
+ }
24
+ .iui-menu .iui-header-menu-icon{
25
+ margin:0 4px;
26
+ }
27
+ .iui-menu div.iui-header-menu-icon{
28
+ margin:0;
29
+ width:24px;
30
+ height:24px;
31
+ border-radius:3px;
32
+ }
33
+ .iui-menu.iui-scroll{
34
+ overflow-y:auto;
35
+ overflow-y:overlay;
36
+ }
33
37
 
34
38
  .iui-menu-item{
35
39
  display:flex;
@@ -39,80 +43,101 @@
39
43
  height:38px;
40
44
  cursor:pointer;
41
45
  box-sizing:border-box;
42
- line-height:normal; }
43
- .iui-menu-item + .iui-menu-item{
44
- margin-top:-1px; }
45
- .iui-menu-item .iui-content,
46
- .iui-menu-item .iui-menu-label,
47
- .iui-menu-item .iui-menu-description{
48
- white-space:nowrap;
49
- overflow:hidden;
50
- text-overflow:ellipsis; }
51
- .iui-menu-item .iui-content{
52
- flex:1 1 auto; }
53
- .iui-menu-item .iui-content + .iui-icon{
54
- margin-right:0;
55
- margin-left:8px; }
56
- .iui-menu-item .iui-menu-description{
57
- display:none;
58
- font-size:12px;
59
- opacity:0.6;
60
- opacity:var(--iui-opacity-3); }
61
- .iui-menu-item > .iui-icon{
62
- width:16px;
63
- height:16px;
64
- flex:0 0 auto;
65
- fill:rgba(0, 0, 0, 0.8);
66
- fill:var(--iui-icons-color-actionable); }
67
- .iui-menu-item > .iui-icon + .iui-content{
68
- margin-left:8px; }
69
- .iui-menu-item:hover{
70
- background-color:rgba(0, 139, 225, 0.1);
71
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6)); }
72
- .iui-menu-item:focus, .iui-menu-item.iui-focused{
73
- outline:thin solid var(--iui-color-foreground-primary);
74
- outline-offset:-1px;
75
- outline:thin solid var(--iui-color-foreground-primary);
76
- outline-offset:-1px; }
77
- .iui-menu-item:focus:not(:focus-visible){
78
- outline:none; }
79
- .iui-menu-item.iui-large{
80
- height:49px; }
81
- .iui-menu-item.iui-large .iui-menu-description{
82
- display:block; }
83
- .iui-menu-item.iui-active, .iui-menu-item.iui-active:hover{
84
- background-color:rgba(0, 139, 225, 0.2);
85
- outline:thin solid var(--iui-color-foreground-primary);
86
- outline-offset:-1px;
87
- background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
88
- outline:thin solid var(--iui-color-foreground-primary);
89
- outline-offset:-1px; }
90
- .iui-menu-item.iui-active > .iui-icon{
91
- fill:#008BE1;
92
- fill:var(--iui-icons-color-primary); }
93
- .iui-menu-item.iui-active:focus, .iui-menu-item.iui-active.iui-focused{
94
- outline-width:2px;
95
- outline-offset:-2px; }
96
- .iui-menu-item.iui-active:focus:not(:focus-visible){
97
- outline:thin solid var(--iui-color-foreground-primary);
98
- outline-offset:-1px; }
99
- .iui-menu-item.iui-disabled, .iui-menu-item.iui-disabled:hover{
100
- cursor:not-allowed;
101
- outline:none;
102
- background-color:#FFF;
103
- color:rgba(0, 0, 0, 0.2);
104
- background-color:var(--iui-color-background-1);
105
- color:var(--iui-text-color-placeholder); }
106
- .iui-menu-item.iui-disabled > .iui-icon, .iui-menu-item.iui-disabled:hover > .iui-icon{
107
- fill:rgba(0, 0, 0, 0.2);
108
- fill:var(--iui-icons-color-actionable-disabled); }
46
+ line-height:normal;
47
+ }
48
+ .iui-menu-item + .iui-menu-item{
49
+ margin-top:-1px;
50
+ }
51
+ .iui-menu-item .iui-content,
52
+ .iui-menu-item .iui-menu-label,
53
+ .iui-menu-item .iui-menu-description{
54
+ white-space:nowrap;
55
+ overflow:hidden;
56
+ text-overflow:ellipsis;
57
+ }
58
+ .iui-menu-item .iui-content{
59
+ flex:1 1 auto;
60
+ }
61
+ .iui-menu-item .iui-content + .iui-icon{
62
+ margin-right:0;
63
+ margin-left:8px;
64
+ }
65
+ .iui-menu-item .iui-menu-description{
66
+ display:none;
67
+ font-size:12px;
68
+ opacity:0.6;
69
+ opacity:var(--iui-opacity-3);
70
+ }
71
+ .iui-menu-item > .iui-icon{
72
+ width:16px;
73
+ height:16px;
74
+ flex:0 0 auto;
75
+ fill:rgba(0, 0, 0, 0.8);
76
+ fill:var(--iui-icons-color-actionable);
77
+ }
78
+ .iui-menu-item > .iui-icon + .iui-content{
79
+ margin-left:8px;
80
+ }
81
+ .iui-menu-item:hover{
82
+ background-color:rgba(0, 139, 225, 0.1);
83
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-6));
84
+ }
85
+ .iui-menu-item:focus, .iui-menu-item.iui-focused{
86
+ outline:thin solid var(--iui-color-foreground-primary);
87
+ outline-offset:-1px;
88
+ outline:thin solid var(--iui-color-foreground-primary);
89
+ outline-offset:-1px;
90
+ }
91
+ .iui-menu-item:focus:not(:focus-visible){
92
+ outline:none;
93
+ }
94
+ .iui-menu-item.iui-large{
95
+ height:49px;
96
+ }
97
+ .iui-menu-item.iui-large .iui-menu-description{
98
+ display:block;
99
+ }
100
+ .iui-menu-item.iui-active, .iui-menu-item.iui-active:hover{
101
+ background-color:rgba(0, 139, 225, 0.2);
102
+ outline:thin solid var(--iui-color-foreground-primary);
103
+ outline-offset:-1px;
104
+ background-color:rgba(var(--iui-color-foreground-primary-rgb), var(--iui-opacity-5));
105
+ outline:thin solid var(--iui-color-foreground-primary);
106
+ outline-offset:-1px;
107
+ }
108
+ .iui-menu-item.iui-active > .iui-icon{
109
+ fill:#008BE1;
110
+ fill:var(--iui-icons-color-primary);
111
+ }
112
+ .iui-menu-item.iui-active:focus, .iui-menu-item.iui-active.iui-focused{
113
+ outline-width:2px;
114
+ outline-offset:-2px;
115
+ }
116
+ .iui-menu-item.iui-active:focus:not(:focus-visible){
117
+ outline:thin solid var(--iui-color-foreground-primary);
118
+ outline-offset:-1px;
119
+ }
120
+ .iui-menu-item.iui-disabled, .iui-menu-item.iui-disabled:hover{
121
+ cursor:not-allowed;
122
+ outline:none;
123
+ background-color:#FFF;
124
+ color:rgba(0, 0, 0, 0.2);
125
+ background-color:var(--iui-color-background-1);
126
+ color:var(--iui-text-color-placeholder);
127
+ }
128
+ .iui-menu-item.iui-disabled > .iui-icon, .iui-menu-item.iui-disabled:hover > .iui-icon{
129
+ fill:rgba(0, 0, 0, 0.2);
130
+ fill:var(--iui-icons-color-actionable-disabled);
131
+ }
109
132
 
110
133
  .iui-menu-content{
111
- padding:11px 13px; }
134
+ padding:11px 13px;
135
+ }
112
136
 
113
137
  .iui-menu-divider{
114
138
  height:1px;
115
139
  width:calc(100% - 24px);
116
140
  margin:1px auto;
117
141
  background-color:#DCE0E3;
118
- background-color:var(--iui-color-background-4); }
142
+ background-color:var(--iui-color-background-4);
143
+ }
package/css/modal.css CHANGED
@@ -16,47 +16,58 @@
16
16
  visibility:hidden;
17
17
  opacity:0;
18
18
  background-color:rgba(0, 0, 0, 0.4);
19
- background-color:rgba(0, 0, 0, var(--iui-opacity-4)); }
20
- @media (prefers-reduced-motion: no-preference){
21
- .iui-modal{
22
- transition:visibility 0s linear 0.2s, opacity 0.2s ease-out; } }
19
+ background-color:rgba(0, 0, 0, var(--iui-opacity-4));
20
+ }
21
+ @media (prefers-reduced-motion: no-preference){
22
+ .iui-modal{
23
+ transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
24
+ }
25
+ }
26
+ .iui-modal > .iui-modal-dialog{
27
+ position:absolute;
28
+ left:50%;
29
+ top:33%;
30
+ transform:translate(-50%, -33%);
31
+ z-index:1000;
32
+ max-width:50%;
33
+ min-width:400px;
34
+ border-radius:3px;
35
+ box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
36
+ padding:11px 16px;
37
+ background-color:#FFF;
38
+ background-color:var(--iui-color-background-1);
39
+ }
40
+ @media screen and (max-width: 400px){
23
41
  .iui-modal > .iui-modal-dialog{
24
- position:absolute;
25
- left:50%;
26
- top:33%;
27
- transform:translate(-50%, -33%);
28
- z-index:1000;
29
- max-width:50%;
30
- min-width:400px;
31
- border-radius:3px;
32
- box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
33
- padding:11px 16px;
34
- background-color:#FFF;
35
- background-color:var(--iui-color-background-1); }
36
- @media screen and (max-width: 400px){
37
- .iui-modal > .iui-modal-dialog{
38
- max-width:95%;
39
- width:95%;
40
- min-width:95%; } }
41
- .iui-modal > .iui-modal-dialog .iui-title-bar{
42
- display:flex;
43
- align-items:center;
44
- margin-bottom:11px;
45
- justify-content:space-between; }
46
- .iui-modal > .iui-modal-dialog .iui-title-bar > .iui-title{
47
- font-size:18px;
48
- white-space:nowrap;
49
- overflow:hidden;
50
- text-overflow:ellipsis;
51
- line-height:1.5; }
52
- .iui-modal > .iui-modal-dialog .iui-button-bar{
53
- margin-top:11px;
54
- display:flex;
55
- align-items:center;
56
- justify-content:flex-end; }
57
- .iui-modal > .iui-modal-dialog .iui-button-bar > .iui-button:not(:last-child){
58
- margin-right:8px; }
59
- .iui-modal.iui-modal-visible{
60
- visibility:visible;
61
- opacity:1;
62
- transition-delay:0s; }
42
+ max-width:95%;
43
+ width:95%;
44
+ min-width:95%;
45
+ }
46
+ }
47
+ .iui-modal > .iui-modal-dialog .iui-title-bar{
48
+ display:flex;
49
+ align-items:center;
50
+ margin-bottom:11px;
51
+ justify-content:space-between;
52
+ }
53
+ .iui-modal > .iui-modal-dialog .iui-title-bar > .iui-title{
54
+ font-size:18px;
55
+ white-space:nowrap;
56
+ overflow:hidden;
57
+ text-overflow:ellipsis;
58
+ line-height:1.5;
59
+ }
60
+ .iui-modal > .iui-modal-dialog .iui-button-bar{
61
+ margin-top:11px;
62
+ display:flex;
63
+ align-items:center;
64
+ justify-content:flex-end;
65
+ }
66
+ .iui-modal > .iui-modal-dialog .iui-button-bar > .iui-button:not(:last-child){
67
+ margin-right:8px;
68
+ }
69
+ .iui-modal.iui-modal-visible{
70
+ visibility:visible;
71
+ opacity:1;
72
+ transition-delay:0s;
73
+ }
package/css/non-ideal-state.css CHANGED
@@ -16,43 +16,50 @@
16
16
  left:50%;
17
17
  top:40%;
18
18
  min-width:220px;
19
- transform:translate(-50%, -40%); }
20
- .iui-non-ideal-state > .iui-non-ideal-state-illustration{
21
- max-width:220px;
22
- max-height:242px;
23
- margin-bottom:22px;
24
- text-align:center;
25
- display:flex;
26
- justify-content:center;
27
- align-items:center; }
28
- .iui-non-ideal-state > .iui-non-ideal-state-title{
29
- margin:0;
30
- padding:0;
31
- border:none;
32
- vertical-align:baseline;
33
- font-size:32px;
34
- font-weight:300;
35
- line-height:44px;
36
- padding:0;
37
- margin:0 0 22px; }
38
- .iui-non-ideal-state > .iui-non-ideal-state-description{
39
- margin:0;
40
- padding:0;
41
- border:none;
42
- vertical-align:baseline;
43
- font-size:14px;
44
- font-weight:400;
45
- line-height:22px;
46
- padding:0;
47
- margin:0 0 22px; }
48
- .iui-non-ideal-state > .iui-non-ideal-state-actions{
49
- display:flex;
50
- align-items:center;
51
- margin-bottom:8px; }
52
- .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-input-container{
53
- display:inline-block;
54
- width:200px;
55
- text-align:left;
56
- margin:0 4px 0 0; }
57
- .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-button{
58
- margin:0 4px; }
19
+ transform:translate(-50%, -40%);
20
+ }
21
+ .iui-non-ideal-state > .iui-non-ideal-state-illustration{
22
+ max-width:220px;
23
+ max-height:242px;
24
+ margin-bottom:22px;
25
+ text-align:center;
26
+ display:flex;
27
+ justify-content:center;
28
+ align-items:center;
29
+ }
30
+ .iui-non-ideal-state > .iui-non-ideal-state-title{
31
+ margin:0;
32
+ padding:0;
33
+ border:none;
34
+ vertical-align:baseline;
35
+ font-size:32px;
36
+ font-weight:300;
37
+ line-height:44px;
38
+ padding:0;
39
+ margin:0 0 22px;
40
+ }
41
+ .iui-non-ideal-state > .iui-non-ideal-state-description{
42
+ margin:0;
43
+ padding:0;
44
+ border:none;
45
+ vertical-align:baseline;
46
+ font-size:14px;
47
+ font-weight:400;
48
+ line-height:22px;
49
+ padding:0;
50
+ margin:0 0 22px;
51
+ }
52
+ .iui-non-ideal-state > .iui-non-ideal-state-actions{
53
+ display:flex;
54
+ align-items:center;
55
+ margin-bottom:8px;
56
+ }
57
+ .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-input-container{
58
+ display:inline-block;
59
+ width:200px;
60
+ text-align:left;
61
+ margin:0 4px 0 0;
62
+ }
63
+ .iui-non-ideal-state > .iui-non-ideal-state-actions > .iui-button{
64
+ margin:0 4px;
65
+ }