@itwin/itwinui-css 0.51.0 → 0.52.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.
- package/css/all.css +99 -21
- package/css/modal.css +65 -6
- package/css/user-icon.css +34 -15
- package/package.json +1 -1
- package/scss/modal/classes.scss +4 -0
- package/scss/modal/modal.scss +81 -7
- package/scss/style/ripple.scss +1 -1
- package/scss/style/speed.scss +1 -0
- package/scss/tooltip/tooltip.scss +1 -1
- package/scss/user-icon/user-icon.scss +38 -19
package/css/all.css
CHANGED
|
@@ -4699,16 +4699,29 @@ label.iui-input-label.iui-disabled{
|
|
|
4699
4699
|
left:0;
|
|
4700
4700
|
width:100%;
|
|
4701
4701
|
height:100%;
|
|
4702
|
-
visibility:hidden;
|
|
4703
|
-
opacity:0;
|
|
4704
4702
|
background-color:rgba(0, 0, 0, 0.4);
|
|
4705
4703
|
background-color:rgba(0, 0, 0, var(--iui-opacity-4));
|
|
4704
|
+
visibility:hidden;
|
|
4705
|
+
opacity:0;
|
|
4706
4706
|
}
|
|
4707
4707
|
@media (prefers-reduced-motion: no-preference){
|
|
4708
4708
|
.iui-modal{
|
|
4709
4709
|
transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
|
|
4710
4710
|
}
|
|
4711
4711
|
}
|
|
4712
|
+
.iui-modal.iui-modal-visible{
|
|
4713
|
+
visibility:visible;
|
|
4714
|
+
opacity:1;
|
|
4715
|
+
transition-delay:0s;
|
|
4716
|
+
}
|
|
4717
|
+
.iui-modal.iui-modal-animation-enter{
|
|
4718
|
+
visibility:hidden;
|
|
4719
|
+
opacity:0;
|
|
4720
|
+
}
|
|
4721
|
+
.iui-modal.iui-modal-animation-enter-active{
|
|
4722
|
+
visibility:visible;
|
|
4723
|
+
opacity:1;
|
|
4724
|
+
}
|
|
4712
4725
|
.iui-modal > .iui-modal-dialog{
|
|
4713
4726
|
position:absolute;
|
|
4714
4727
|
left:50%;
|
|
@@ -4716,10 +4729,12 @@ label.iui-input-label.iui-disabled{
|
|
|
4716
4729
|
transform:translate(-50%, -33%);
|
|
4717
4730
|
z-index:1000;
|
|
4718
4731
|
max-width:50%;
|
|
4719
|
-
min-width:
|
|
4732
|
+
min-width:380px;
|
|
4733
|
+
max-height:100vh;
|
|
4720
4734
|
border-radius:3px;
|
|
4721
4735
|
box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
|
|
4722
4736
|
padding:11px 16px;
|
|
4737
|
+
box-sizing:border-box;
|
|
4723
4738
|
background-color:#FFF;
|
|
4724
4739
|
background-color:var(--iui-color-background-1);
|
|
4725
4740
|
}
|
|
@@ -4752,10 +4767,54 @@ label.iui-input-label.iui-disabled{
|
|
|
4752
4767
|
.iui-modal > .iui-modal-dialog .iui-button-bar > .iui-button:not(:last-child){
|
|
4753
4768
|
margin-right:8px;
|
|
4754
4769
|
}
|
|
4755
|
-
.iui-modal.iui-modal-
|
|
4756
|
-
|
|
4770
|
+
.iui-modal > .iui-modal-dialog .iui-modal-content{
|
|
4771
|
+
flex-grow:2;
|
|
4772
|
+
margin:0 -16px;
|
|
4773
|
+
padding:0 16px;
|
|
4774
|
+
overflow-y:auto;
|
|
4775
|
+
overflow-y:overlay;
|
|
4776
|
+
}
|
|
4777
|
+
.iui-modal-full-page > .iui-modal-dialog{
|
|
4778
|
+
display:flex;
|
|
4779
|
+
flex-direction:column;
|
|
4780
|
+
height:100vh;
|
|
4781
|
+
width:100vw;
|
|
4782
|
+
left:0;
|
|
4783
|
+
top:0;
|
|
4784
|
+
transform:none;
|
|
4785
|
+
max-width:initial;
|
|
4786
|
+
min-width:initial;
|
|
4787
|
+
border-radius:0;
|
|
4788
|
+
will-change:transform;
|
|
4789
|
+
}
|
|
4790
|
+
@media (prefers-reduced-motion: no-preference){
|
|
4791
|
+
.iui-modal-full-page{
|
|
4792
|
+
transition:visibility 0s linear 0.4s, opacity 0.4s ease-out 0.2s;
|
|
4793
|
+
}
|
|
4794
|
+
}
|
|
4795
|
+
.iui-modal-full-page > .iui-modal-dialog{
|
|
4796
|
+
transform:translateY(100%);
|
|
4797
|
+
}
|
|
4798
|
+
@media (prefers-reduced-motion: no-preference){
|
|
4799
|
+
.iui-modal-full-page > .iui-modal-dialog{
|
|
4800
|
+
transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.4s ease-in;
|
|
4801
|
+
}
|
|
4802
|
+
}
|
|
4803
|
+
.iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
|
|
4804
|
+
transform:translateY(0);
|
|
4805
|
+
}
|
|
4806
|
+
@media (prefers-reduced-motion: no-preference){
|
|
4807
|
+
.iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
|
|
4808
|
+
transition:transform 0.4s ease-out;
|
|
4809
|
+
}
|
|
4810
|
+
}
|
|
4811
|
+
.iui-modal-full-page.iui-modal-animation-enter > .iui-modal-dialog{
|
|
4812
|
+
transform:translateY(100%);
|
|
4813
|
+
opacity:0;
|
|
4814
|
+
}
|
|
4815
|
+
.iui-modal-full-page.iui-modal-animation-enter-active > .iui-modal-dialog{
|
|
4816
|
+
transform:translateY(0);
|
|
4757
4817
|
opacity:1;
|
|
4758
|
-
transition-delay:0s;
|
|
4759
4818
|
}
|
|
4760
4819
|
|
|
4761
4820
|
.iui-non-ideal-state{
|
|
@@ -8477,38 +8536,57 @@ div.iui-tile-thumbnail-picture{
|
|
|
8477
8536
|
height:25%;
|
|
8478
8537
|
border-radius:50%;
|
|
8479
8538
|
border:2px solid #FFF;
|
|
8480
|
-
background-color:#
|
|
8481
|
-
box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.6);
|
|
8539
|
+
background-color:#C7CCD1;
|
|
8482
8540
|
border:2px solid var(--iui-color-background-1);
|
|
8483
|
-
background-color:var(--iui-color-background-
|
|
8484
|
-
box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
|
|
8541
|
+
background-color:var(--iui-color-background-5);
|
|
8485
8542
|
}
|
|
8486
|
-
.iui-user-icon > .iui-status
|
|
8487
|
-
|
|
8488
|
-
fill:rgba(0, 0, 0, 0.4);
|
|
8489
|
-
fill:var(--iui-icons-color);
|
|
8543
|
+
.iui-user-icon > .iui-status::after{
|
|
8544
|
+
content:"";
|
|
8490
8545
|
width:66.6666666667%;
|
|
8491
8546
|
height:66.6666666667%;
|
|
8492
8547
|
}
|
|
8493
|
-
.iui-user-icon > .iui-status.iui-online, .iui-user-icon > .iui-status.iui-away, .iui-user-icon > .iui-status.iui-busy{
|
|
8494
|
-
box-shadow:none;
|
|
8495
|
-
}
|
|
8496
|
-
.iui-user-icon > .iui-status.iui-online > .iui-status-symbol, .iui-user-icon > .iui-status.iui-away > .iui-status-symbol, .iui-user-icon > .iui-status.iui-busy > .iui-status-symbol{
|
|
8497
|
-
fill:#FFF;
|
|
8498
|
-
fill:var(--iui-color-foreground-accessory);
|
|
8499
|
-
}
|
|
8500
8548
|
.iui-user-icon > .iui-status.iui-online{
|
|
8501
8549
|
background-color:#53A21A;
|
|
8502
8550
|
background-color:var(--iui-color-background-positive);
|
|
8503
8551
|
}
|
|
8552
|
+
.iui-user-icon > .iui-status.iui-online::after{
|
|
8553
|
+
-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
|
|
8554
|
+
mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
|
|
8555
|
+
background-color:#FFF;
|
|
8556
|
+
background-color:var(--iui-color-foreground-accessory);
|
|
8557
|
+
}
|
|
8504
8558
|
.iui-user-icon > .iui-status.iui-away{
|
|
8505
8559
|
background-color:#F18B12;
|
|
8506
8560
|
background-color:var(--iui-color-background-warning);
|
|
8507
8561
|
}
|
|
8562
|
+
.iui-user-icon > .iui-status.iui-away::after{
|
|
8563
|
+
-webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
|
|
8564
|
+
mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
|
|
8565
|
+
background-color:#FFF;
|
|
8566
|
+
background-color:var(--iui-color-foreground-accessory);
|
|
8567
|
+
}
|
|
8508
8568
|
.iui-user-icon > .iui-status.iui-busy{
|
|
8509
8569
|
background-color:#D30A0A;
|
|
8510
8570
|
background-color:var(--iui-color-background-negative);
|
|
8511
8571
|
}
|
|
8572
|
+
.iui-user-icon > .iui-status.iui-busy::after{
|
|
8573
|
+
-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
|
|
8574
|
+
mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
|
|
8575
|
+
background-color:#FFF;
|
|
8576
|
+
background-color:var(--iui-color-foreground-accessory);
|
|
8577
|
+
}
|
|
8578
|
+
.iui-user-icon > .iui-status.iui-offline{
|
|
8579
|
+
background-color:#FFF;
|
|
8580
|
+
box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.6);
|
|
8581
|
+
background-color:var(--iui-color-background-1);
|
|
8582
|
+
box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
|
|
8583
|
+
}
|
|
8584
|
+
.iui-user-icon > .iui-status.iui-offline::after{
|
|
8585
|
+
-webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
|
|
8586
|
+
mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
|
|
8587
|
+
background-color:rgba(0, 0, 0, 0.4);
|
|
8588
|
+
background-color:var(--iui-icons-color);
|
|
8589
|
+
}
|
|
8512
8590
|
.iui-user-icon.iui-user-icon-count > .iui-initials{
|
|
8513
8591
|
background-color:#EEF0F3;
|
|
8514
8592
|
color:rgba(0, 0, 0, 0.4);
|
package/css/modal.css
CHANGED
|
@@ -13,16 +13,29 @@
|
|
|
13
13
|
left:0;
|
|
14
14
|
width:100%;
|
|
15
15
|
height:100%;
|
|
16
|
-
visibility:hidden;
|
|
17
|
-
opacity:0;
|
|
18
16
|
background-color:rgba(0, 0, 0, 0.4);
|
|
19
17
|
background-color:rgba(0, 0, 0, var(--iui-opacity-4));
|
|
18
|
+
visibility:hidden;
|
|
19
|
+
opacity:0;
|
|
20
20
|
}
|
|
21
21
|
@media (prefers-reduced-motion: no-preference){
|
|
22
22
|
.iui-modal{
|
|
23
23
|
transition:visibility 0s linear 0.2s, opacity 0.2s ease-out;
|
|
24
24
|
}
|
|
25
25
|
}
|
|
26
|
+
.iui-modal.iui-modal-visible{
|
|
27
|
+
visibility:visible;
|
|
28
|
+
opacity:1;
|
|
29
|
+
transition-delay:0s;
|
|
30
|
+
}
|
|
31
|
+
.iui-modal.iui-modal-animation-enter{
|
|
32
|
+
visibility:hidden;
|
|
33
|
+
opacity:0;
|
|
34
|
+
}
|
|
35
|
+
.iui-modal.iui-modal-animation-enter-active{
|
|
36
|
+
visibility:visible;
|
|
37
|
+
opacity:1;
|
|
38
|
+
}
|
|
26
39
|
.iui-modal > .iui-modal-dialog{
|
|
27
40
|
position:absolute;
|
|
28
41
|
left:50%;
|
|
@@ -30,10 +43,12 @@
|
|
|
30
43
|
transform:translate(-50%, -33%);
|
|
31
44
|
z-index:1000;
|
|
32
45
|
max-width:50%;
|
|
33
|
-
min-width:
|
|
46
|
+
min-width:380px;
|
|
47
|
+
max-height:100vh;
|
|
34
48
|
border-radius:3px;
|
|
35
49
|
box-shadow:0 9px 46px rgba(0, 0, 0, 0.25);
|
|
36
50
|
padding:11px 16px;
|
|
51
|
+
box-sizing:border-box;
|
|
37
52
|
background-color:#FFF;
|
|
38
53
|
background-color:var(--iui-color-background-1);
|
|
39
54
|
}
|
|
@@ -66,8 +81,52 @@
|
|
|
66
81
|
.iui-modal > .iui-modal-dialog .iui-button-bar > .iui-button:not(:last-child){
|
|
67
82
|
margin-right:8px;
|
|
68
83
|
}
|
|
69
|
-
.iui-modal.iui-modal-
|
|
70
|
-
|
|
84
|
+
.iui-modal > .iui-modal-dialog .iui-modal-content{
|
|
85
|
+
flex-grow:2;
|
|
86
|
+
margin:0 -16px;
|
|
87
|
+
padding:0 16px;
|
|
88
|
+
overflow-y:auto;
|
|
89
|
+
overflow-y:overlay;
|
|
90
|
+
}
|
|
91
|
+
.iui-modal-full-page > .iui-modal-dialog{
|
|
92
|
+
display:flex;
|
|
93
|
+
flex-direction:column;
|
|
94
|
+
height:100vh;
|
|
95
|
+
width:100vw;
|
|
96
|
+
left:0;
|
|
97
|
+
top:0;
|
|
98
|
+
transform:none;
|
|
99
|
+
max-width:initial;
|
|
100
|
+
min-width:initial;
|
|
101
|
+
border-radius:0;
|
|
102
|
+
will-change:transform;
|
|
103
|
+
}
|
|
104
|
+
@media (prefers-reduced-motion: no-preference){
|
|
105
|
+
.iui-modal-full-page{
|
|
106
|
+
transition:visibility 0s linear 0.4s, opacity 0.4s ease-out 0.2s;
|
|
107
|
+
}
|
|
108
|
+
}
|
|
109
|
+
.iui-modal-full-page > .iui-modal-dialog{
|
|
110
|
+
transform:translateY(100%);
|
|
111
|
+
}
|
|
112
|
+
@media (prefers-reduced-motion: no-preference){
|
|
113
|
+
.iui-modal-full-page > .iui-modal-dialog{
|
|
114
|
+
transition:visibility 0s linear 0.4s, opacity 0s linear 0.4s, transform 0.4s ease-in;
|
|
115
|
+
}
|
|
116
|
+
}
|
|
117
|
+
.iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
|
|
118
|
+
transform:translateY(0);
|
|
119
|
+
}
|
|
120
|
+
@media (prefers-reduced-motion: no-preference){
|
|
121
|
+
.iui-modal-full-page.iui-modal-visible > .iui-modal-dialog{
|
|
122
|
+
transition:transform 0.4s ease-out;
|
|
123
|
+
}
|
|
124
|
+
}
|
|
125
|
+
.iui-modal-full-page.iui-modal-animation-enter > .iui-modal-dialog{
|
|
126
|
+
transform:translateY(100%);
|
|
127
|
+
opacity:0;
|
|
128
|
+
}
|
|
129
|
+
.iui-modal-full-page.iui-modal-animation-enter-active > .iui-modal-dialog{
|
|
130
|
+
transform:translateY(0);
|
|
71
131
|
opacity:1;
|
|
72
|
-
transition-delay:0s;
|
|
73
132
|
}
|
package/css/user-icon.css
CHANGED
|
@@ -84,38 +84,57 @@
|
|
|
84
84
|
height:25%;
|
|
85
85
|
border-radius:50%;
|
|
86
86
|
border:2px solid #FFF;
|
|
87
|
-
background-color:#
|
|
88
|
-
box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.6);
|
|
87
|
+
background-color:#C7CCD1;
|
|
89
88
|
border:2px solid var(--iui-color-background-1);
|
|
90
|
-
background-color:var(--iui-color-background-
|
|
91
|
-
box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
|
|
89
|
+
background-color:var(--iui-color-background-5);
|
|
92
90
|
}
|
|
93
|
-
.iui-user-icon > .iui-status
|
|
94
|
-
|
|
95
|
-
fill:rgba(0, 0, 0, 0.4);
|
|
96
|
-
fill:var(--iui-icons-color);
|
|
91
|
+
.iui-user-icon > .iui-status::after{
|
|
92
|
+
content:"";
|
|
97
93
|
width:66.6666666667%;
|
|
98
94
|
height:66.6666666667%;
|
|
99
95
|
}
|
|
100
|
-
.iui-user-icon > .iui-status.iui-online, .iui-user-icon > .iui-status.iui-away, .iui-user-icon > .iui-status.iui-busy{
|
|
101
|
-
box-shadow:none;
|
|
102
|
-
}
|
|
103
|
-
.iui-user-icon > .iui-status.iui-online > .iui-status-symbol, .iui-user-icon > .iui-status.iui-away > .iui-status-symbol, .iui-user-icon > .iui-status.iui-busy > .iui-status-symbol{
|
|
104
|
-
fill:#FFF;
|
|
105
|
-
fill:var(--iui-color-foreground-accessory);
|
|
106
|
-
}
|
|
107
96
|
.iui-user-icon > .iui-status.iui-online{
|
|
108
97
|
background-color:#53A21A;
|
|
109
98
|
background-color:var(--iui-color-background-positive);
|
|
110
99
|
}
|
|
100
|
+
.iui-user-icon > .iui-status.iui-online::after{
|
|
101
|
+
-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
|
|
102
|
+
mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
|
|
103
|
+
background-color:#FFF;
|
|
104
|
+
background-color:var(--iui-color-foreground-accessory);
|
|
105
|
+
}
|
|
111
106
|
.iui-user-icon > .iui-status.iui-away{
|
|
112
107
|
background-color:#F18B12;
|
|
113
108
|
background-color:var(--iui-color-background-warning);
|
|
114
109
|
}
|
|
110
|
+
.iui-user-icon > .iui-status.iui-away::after{
|
|
111
|
+
-webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
|
|
112
|
+
mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
|
|
113
|
+
background-color:#FFF;
|
|
114
|
+
background-color:var(--iui-color-foreground-accessory);
|
|
115
|
+
}
|
|
115
116
|
.iui-user-icon > .iui-status.iui-busy{
|
|
116
117
|
background-color:#D30A0A;
|
|
117
118
|
background-color:var(--iui-color-background-negative);
|
|
118
119
|
}
|
|
120
|
+
.iui-user-icon > .iui-status.iui-busy::after{
|
|
121
|
+
-webkit-mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
|
|
122
|
+
mask:url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
|
|
123
|
+
background-color:#FFF;
|
|
124
|
+
background-color:var(--iui-color-foreground-accessory);
|
|
125
|
+
}
|
|
126
|
+
.iui-user-icon > .iui-status.iui-offline{
|
|
127
|
+
background-color:#FFF;
|
|
128
|
+
box-shadow:inset 0 0 0 1px rgba(0, 0, 0, 0.6);
|
|
129
|
+
background-color:var(--iui-color-background-1);
|
|
130
|
+
box-shadow:inset 0 0 0 1px rgba(var(--iui-color-foreground-body-rgb), var(--iui-opacity-3));
|
|
131
|
+
}
|
|
132
|
+
.iui-user-icon > .iui-status.iui-offline::after{
|
|
133
|
+
-webkit-mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
|
|
134
|
+
mask:url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
|
|
135
|
+
background-color:rgba(0, 0, 0, 0.4);
|
|
136
|
+
background-color:var(--iui-icons-color);
|
|
137
|
+
}
|
|
119
138
|
.iui-user-icon.iui-user-icon-count > .iui-initials{
|
|
120
139
|
background-color:#EEF0F3;
|
|
121
140
|
color:rgba(0, 0, 0, 0.4);
|
package/package.json
CHANGED
package/scss/modal/classes.scss
CHANGED
package/scss/modal/modal.scss
CHANGED
|
@@ -11,15 +11,37 @@
|
|
|
11
11
|
left: 0;
|
|
12
12
|
width: 100%;
|
|
13
13
|
height: 100%;
|
|
14
|
+
@include themed {
|
|
15
|
+
background-color: rgba(0, 0, 0, t(iui-opacity-4));
|
|
16
|
+
}
|
|
17
|
+
|
|
18
|
+
// #region Small Modal Animations for CSS
|
|
14
19
|
visibility: hidden;
|
|
15
20
|
opacity: 0;
|
|
16
21
|
@media (prefers-reduced-motion: no-preference) {
|
|
17
|
-
transition: visibility
|
|
22
|
+
transition: visibility $iui-speed-instant linear $iui-speed-fast, opacity $iui-speed-fast ease-out;
|
|
18
23
|
}
|
|
19
|
-
|
|
20
|
-
|
|
24
|
+
|
|
25
|
+
&.iui-modal-visible {
|
|
26
|
+
visibility: visible;
|
|
27
|
+
opacity: 1;
|
|
28
|
+
// remove delay for entry animation so it's instantly visible
|
|
29
|
+
transition-delay: $iui-speed-instant;
|
|
30
|
+
}
|
|
31
|
+
// #endregion Small Modal Animations for CSS
|
|
32
|
+
|
|
33
|
+
// #region Small Modal Animations for React
|
|
34
|
+
&.iui-modal-animation-enter {
|
|
35
|
+
visibility: hidden;
|
|
36
|
+
opacity: 0;
|
|
21
37
|
}
|
|
22
38
|
|
|
39
|
+
&.iui-modal-animation-enter-active {
|
|
40
|
+
visibility: visible;
|
|
41
|
+
opacity: 1;
|
|
42
|
+
}
|
|
43
|
+
// #endregion Full Page Modal Animations for React
|
|
44
|
+
|
|
23
45
|
> .iui-modal-dialog {
|
|
24
46
|
position: absolute;
|
|
25
47
|
left: 50%;
|
|
@@ -27,10 +49,12 @@
|
|
|
27
49
|
transform: translate(-50%, -33%);
|
|
28
50
|
z-index: 1000;
|
|
29
51
|
max-width: 50%;
|
|
30
|
-
min-width:
|
|
52
|
+
min-width: 380px;
|
|
53
|
+
max-height: 100vh;
|
|
31
54
|
border-radius: $iui-border-radius;
|
|
32
55
|
box-shadow: $iui-elevation-24;
|
|
33
56
|
padding: $iui-baseline $iui-m;
|
|
57
|
+
box-sizing: border-box;
|
|
34
58
|
|
|
35
59
|
@include themed {
|
|
36
60
|
background-color: t(iui-color-background-1);
|
|
@@ -67,11 +91,61 @@
|
|
|
67
91
|
margin-right: $iui-s;
|
|
68
92
|
}
|
|
69
93
|
}
|
|
94
|
+
|
|
95
|
+
.iui-modal-content {
|
|
96
|
+
flex-grow: 2;
|
|
97
|
+
margin: 0 -#{$iui-m};
|
|
98
|
+
padding: 0 $iui-m;
|
|
99
|
+
overflow-y: auto;
|
|
100
|
+
overflow-y: overlay;
|
|
101
|
+
}
|
|
70
102
|
}
|
|
103
|
+
}
|
|
71
104
|
|
|
72
|
-
|
|
73
|
-
|
|
105
|
+
@mixin iui-modal-full-page {
|
|
106
|
+
> .iui-modal-dialog {
|
|
107
|
+
display: flex;
|
|
108
|
+
flex-direction: column;
|
|
109
|
+
height: 100vh;
|
|
110
|
+
width: 100vw;
|
|
111
|
+
left: 0;
|
|
112
|
+
top: 0;
|
|
113
|
+
transform: none;
|
|
114
|
+
max-width: initial;
|
|
115
|
+
min-width: initial;
|
|
116
|
+
border-radius: 0;
|
|
117
|
+
will-change: transform;
|
|
118
|
+
}
|
|
119
|
+
|
|
120
|
+
// #region Full Page Modal Animations for CSS
|
|
121
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
122
|
+
transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed ease-out $iui-speed-fast;
|
|
123
|
+
}
|
|
124
|
+
|
|
125
|
+
> .iui-modal-dialog {
|
|
126
|
+
transform: translateY(100%);
|
|
127
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
128
|
+
transition: visibility $iui-speed-instant linear $iui-speed, opacity $iui-speed-instant linear $iui-speed, transform $iui-speed ease-in;
|
|
129
|
+
}
|
|
130
|
+
}
|
|
131
|
+
|
|
132
|
+
&.iui-modal-visible > .iui-modal-dialog {
|
|
133
|
+
transform: translateY(0);
|
|
134
|
+
@media (prefers-reduced-motion: no-preference) {
|
|
135
|
+
transition: transform $iui-speed ease-out;
|
|
136
|
+
}
|
|
137
|
+
}
|
|
138
|
+
// #endregion Full Page Modal Animations for CSS
|
|
139
|
+
|
|
140
|
+
// #region Full Page Modal Animations for React
|
|
141
|
+
&.iui-modal-animation-enter > .iui-modal-dialog {
|
|
142
|
+
transform: translateY(100%);
|
|
143
|
+
opacity: 0;
|
|
144
|
+
}
|
|
145
|
+
|
|
146
|
+
&.iui-modal-animation-enter-active > .iui-modal-dialog {
|
|
147
|
+
transform: translateY(0);
|
|
74
148
|
opacity: 1;
|
|
75
|
-
transition-delay: 0s;
|
|
76
149
|
}
|
|
150
|
+
// #endregion Full Page Modal Animations for React
|
|
77
151
|
}
|
package/scss/style/ripple.scss
CHANGED
package/scss/style/speed.scss
CHANGED
|
@@ -30,7 +30,7 @@
|
|
|
30
30
|
opacity: 0;
|
|
31
31
|
/// Following this guide for animation on exit hover: https://greywyvern.com/?post=337
|
|
32
32
|
@media (prefers-reduced-motion: no-preference) {
|
|
33
|
-
transition: visibility
|
|
33
|
+
transition: visibility $iui-speed-instant linear $iui-speed-fast, opacity $iui-speed-fast ease-out;
|
|
34
34
|
}
|
|
35
35
|
}
|
|
36
36
|
|
|
@@ -87,47 +87,66 @@
|
|
|
87
87
|
border-radius: 50%;
|
|
88
88
|
@include themed {
|
|
89
89
|
border: $iui-xxs solid t(iui-color-background-1);
|
|
90
|
-
background-color: t(iui-color-background-
|
|
91
|
-
box-shadow: inset 0 0 0 1px rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
|
|
90
|
+
background-color: t(iui-color-background-5);
|
|
92
91
|
}
|
|
93
92
|
|
|
94
|
-
|
|
95
|
-
|
|
96
|
-
@include themed {
|
|
97
|
-
fill: t(iui-icons-color);
|
|
98
|
-
}
|
|
93
|
+
&::after {
|
|
94
|
+
content: '';
|
|
99
95
|
width: calc(100% / 1.5);
|
|
100
96
|
height: calc(100% / 1.5);
|
|
101
97
|
}
|
|
102
98
|
|
|
103
|
-
&.iui-online,
|
|
104
|
-
&.iui-away,
|
|
105
|
-
&.iui-busy {
|
|
106
|
-
box-shadow: none;
|
|
107
|
-
|
|
108
|
-
> .iui-status-symbol {
|
|
109
|
-
@include themed {
|
|
110
|
-
fill: t(iui-color-foreground-accessory);
|
|
111
|
-
}
|
|
112
|
-
}
|
|
113
|
-
}
|
|
114
|
-
|
|
115
99
|
&.iui-online {
|
|
116
100
|
@include themed {
|
|
117
101
|
background-color: t(iui-color-background-positive);
|
|
118
102
|
}
|
|
103
|
+
|
|
104
|
+
&::after {
|
|
105
|
+
mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><path d='M6,14L0,8l2-2l4,4l8-8l2,2L6,14z' /></svg>");
|
|
106
|
+
@include themed {
|
|
107
|
+
background-color: t(iui-color-foreground-accessory);
|
|
108
|
+
}
|
|
109
|
+
}
|
|
119
110
|
}
|
|
120
111
|
|
|
121
112
|
&.iui-away {
|
|
122
113
|
@include themed {
|
|
123
114
|
background-color: t(iui-color-background-warning);
|
|
124
115
|
}
|
|
116
|
+
|
|
117
|
+
&::after {
|
|
118
|
+
mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m13.445 12.832-6.445-4.297v-7.535h2v6.465l5.555 3.703z' /></svg>");
|
|
119
|
+
@include themed {
|
|
120
|
+
background-color: t(iui-color-foreground-accessory);
|
|
121
|
+
}
|
|
122
|
+
}
|
|
125
123
|
}
|
|
126
124
|
|
|
127
125
|
&.iui-busy {
|
|
128
126
|
@include themed {
|
|
129
127
|
background-color: t(iui-color-background-negative);
|
|
130
128
|
}
|
|
129
|
+
|
|
130
|
+
&::after {
|
|
131
|
+
mask: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'><rect x='2' y='7' width='12' height='2'></rect></svg>");
|
|
132
|
+
@include themed {
|
|
133
|
+
background-color: t(iui-color-foreground-accessory);
|
|
134
|
+
}
|
|
135
|
+
}
|
|
136
|
+
}
|
|
137
|
+
|
|
138
|
+
&.iui-offline {
|
|
139
|
+
@include themed {
|
|
140
|
+
background-color: t(iui-color-background-1);
|
|
141
|
+
box-shadow: inset 0 0 0 1px rgba(t(iui-color-foreground-body-rgb), t(iui-opacity-3));
|
|
142
|
+
}
|
|
143
|
+
|
|
144
|
+
&::after {
|
|
145
|
+
mask: url("data:image/svg+xml,<svg viewBox='0 0 16 16' xmlns='http://www.w3.org/2000/svg'><path d='m12.5 2-4.5 4.5-4.5-4.5-1.5 1.5 4.5 4.5-4.5 4.5 1.5 1.5 4.5-4.5 4.5 4.5 1.5-1.5-4.5-4.5 4.5-4.5z' /></svg>");
|
|
146
|
+
@include themed {
|
|
147
|
+
background-color: t(iui-icons-color);
|
|
148
|
+
}
|
|
149
|
+
}
|
|
131
150
|
}
|
|
132
151
|
}
|
|
133
152
|
|