Skip to content

Commit 6baeef2

Browse files
changed flyout to position: fixed (#351)
Co-authored-by: Shane Weaver <[email protected]>
1 parent 0ee358d commit 6baeef2

File tree

7 files changed

+188
-122
lines changed

7 files changed

+188
-122
lines changed

src/components/mgt-login/mgt-login.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -79,10 +79,8 @@ mgt-login .login-icon {
7979

8080
:host .popup,
8181
mgt-login .popup {
82-
position: absolute;
8382
font-family: var(--default-font-family);
8483
background: var(--popup-content-background-color);
85-
box-shadow: 0 12px 40px 2px rgba(0, 0, 0, 0.08);
8684
min-width: 240px;
8785
z-index: 1;
8886
color: var(--popup-color);

src/components/mgt-people-picker/mgt-people-picker.scss

Lines changed: 3 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -40,9 +40,7 @@ mgt-people-picker .people-picker {
4040

4141
:host .flyout-root,
4242
mgt-people-picker .flyout-root {
43-
margin: 7px 0px 0px 0px;
4443
padding: 0;
45-
box-shadow: 0px 1.3289px 2.65781px rgba(180, 180, 180, 0.182), 0px 1.3289px 2.65781px rgba(68, 68, 68, 0.3);
4644
border-radius: 2px;
4745
background-color: $people-list-background-color;
4846
width: 100%;
@@ -218,6 +216,8 @@ mgt-people-picker .loading-text {
218216
line-height: 19px;
219217
text-align: center;
220218
color: #232222;
219+
margin-left: 50px;
220+
margin-right: 50px;
221221
}
222222

223223
:host .SearchErrorIcon,
@@ -229,8 +229,7 @@ mgt-people-picker .SearchErrorIcon {
229229

230230
:host .message-parent,
231231
mgt-people-picker .message-parent {
232-
margin-top: 30px;
233-
margin-bottom: 30px;
232+
margin: 20px;
234233
display: flex;
235234
align-items: center;
236235
justify-content: center;

src/components/mgt-person-card/mgt-person-card.scss

Lines changed: 0 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,6 @@ $color: var(--color, #{$ms-color-neutralDark});
1616
position: relative;
1717
width: 340px;
1818
background: #ffffff;
19-
box-shadow: 0px 0px 4.55172px rgba(0, 0, 0, 0.16);
2019
font-family: var(--default-font-family);
2120

2221
.person-details-container {

src/components/mgt-person/mgt-person.scss

Lines changed: 0 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -223,7 +223,3 @@ mgt-person .user-email {
223223
grid-row: 2;
224224
-ms-grid-row: 2;
225225
}
226-
227-
.flyout {
228-
padding: 8px;
229-
}

src/components/mgt-tasks/mgt-tasks.scss

Lines changed: 0 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -387,13 +387,11 @@ mgt-tasks,
387387
}
388388
.Picker {
389389
background-color: white;
390-
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
391390
-webkit-background-clip: padding-box;
392391
-moz-background-clip: padding-box;
393392
background-clip: padding-box;
394393
width: 350px;
395394
color: var(--task-detail-color, black);
396-
margin: 8px;
397395
mgt-people-picker {
398396
--separator-margin: 0px 10px 0px 10px;
399397
}

src/components/sub-components/mgt-flyout/mgt-flyout.scss

Lines changed: 23 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -5,29 +5,37 @@
55
* -------------------------------------------------------------------------------------------
66
*/
77

8-
.root {
9-
position: relative;
10-
}
8+
@import '../../../../node_modules/office-ui-fabric-core/dist/sass/References';
119

12-
.root .flyout {
13-
display: none;
14-
position: absolute;
15-
z-index: 1;
16-
animation-duration: 300ms;
17-
width: 100%;
18-
}
10+
.root {
11+
.flyout {
12+
display: none;
13+
position: fixed;
14+
z-index: 9999999;
15+
opacity: 0;
16+
box-shadow: $ms-depth-shadow-8;
17+
}
1918

20-
.root .flyout.visible {
21-
display: inline-block;
22-
animation-name: fade-in;
19+
&.visible {
20+
.flyout {
21+
display: inline-block;
22+
animation-name: fadeIn;
23+
animation-duration: 0.3s;
24+
animation-timing-function: cubic-bezier(0.1, 0.9, 0.2, 1);
25+
animation-fill-mode: both;
26+
}
27+
}
2328
}
2429

25-
@keyframes fade-in {
30+
@keyframes fadeIn {
2631
from {
2732
opacity: 0;
33+
margin-top: -10px;
34+
margin-bottom: -10px;
2835
}
29-
3036
to {
3137
opacity: 1;
38+
margin-top: 0;
39+
margin-bottom: 0;
3240
}
3341
}

0 commit comments

Comments
 (0)