1 /** 2 * Mixins that mimic the way Atlaskit fills the screen with modals at low screen widths. 3 */ 4 @mixin full-size-modal-positioner() { 5 height: 100%; 6 left: 0; 7 position: fixed; 8 top: 0; 9 max-width: 100%; 10 width: 100%; 11 } 12 13 @mixin full-size-modal-dialog() { 14 height: 100%; 15 max-height: 100%; 16 border-radius: 0; 17 } 18 19 /** 20 * Move the @atlaskit/flag container up a little bit so it does not cover the 21 * toolbar with the first notification. 22 */ 23 .atlaskit-portal > #notifications-container { 24 bottom: calc(#{$newToolbarSizeWithPadding}) !important; 25 } 26 27 28 /** 29 * Keep overflow menu within screen vertical bounds and make it scrollable. 30 */ 31 .toolbox-button-wth-dialog > div:nth-child(2) { 32 background: $menuBG; 33 max-height: calc(100vh - #{$newToolbarSizeWithPadding} - 46px); 34 margin-bottom: 4px; 35 padding: 0; 36 overflow-y: auto; 37 } 38 39 /** 40 * Remove background color and box-shadow for the context menu container. 41 */ 42 .toolbox-button-wth-dialog.context-menu > div:nth-child(2) { 43 background: transparent; 44 box-shadow: none; 45 overflow-y: initial; 46 } 47 48 .audio-preview > div:nth-child(2), 49 .video-preview > div:nth-child(2) { 50 margin-bottom: 4px; 51 outline: none; 52 padding: 0; 53 } 54 55 /** 56 * The following selectors keep the chat modal full-size anywhere between 100px 57 * and 580px for desktop or 680px for mobile. 58 */ 59 @media (min-width: 100px) and (max-width: 320px) { 60 .smiley-input { 61 display: none; 62 } 63 .shift-right .focus-lock > div > div { 64 @include full-size-modal-positioner(); 65 } 66 67 .shift-right .focus-lock [role="dialog"] { 68 @include full-size-modal-dialog(); 69 } 70 } 71 72 @media (min-width: 480px) and (max-width: 580px) { 73 .shift-right .focus-lock > div > div { 74 @include full-size-modal-positioner(); 75 } 76 77 .shift-right .focus-lock [role="dialog"] { 78 @include full-size-modal-dialog(); 79 } 80 } 81 82 @media (max-width: 580px) { 83 // Override Atlaskit inline style for the modal background. 84 // Important is unfortunately needed for that. 85 .shift-right .focus-lock [role="dialog"][style] { 86 background-color: $chatBackgroundColor !important; 87 } 88 89 // Remove Atlaskit padding from the chat dialog. 90 .shift-right .focus-lock [role="dialog"] > div:first-child > div:nth-child(2) { 91 padding: 0; 92 } 93 } 94 95 div.Tooltip { 96 color: #fff; 97 font-size: 12px; 98 line-height: 14px; 99 padding: 8px; 100 } 101 102 // make modal full screen on landscape orientation 103 @media (max-height: 420px) { 104 .atlaskit-portal { 105 .css-1oc7v0j { 106 height: 100%; 107 padding: 0; 108 max-width: 100%; 109 top: 0; 110 width: 100%; 111 112 &> div { 113 height: 100%; 114 } 115 } 116 } 117 }