/* === Messagebar === */ .toolbar.messagebar { transform: translate3d(0,0,0); background: #fff; height: auto; .toolbar-inner { position: relative; .rtl({ flex-direction: row-reverse; }); } .messagebar-area { width: 100%; flex-shrink: 1; overflow: hidden; position: relative; } textarea { width: 100%; flex-shrink: 1; } a.link { align-self: flex-end; flex-shrink: 0; } } .messagebar-attachments { width: 100%; .scrollable(); font-size: 0; white-space: nowrap; box-sizing: border-box; position: relative; } .messagebar:not(.messagebar-attachments-visible) .messagebar-attachments { display: none; } .messagebar-attachment { background-size: cover; background-position: center; background-repeat: no-repeat; display: inline-block; vertical-align: middle; white-space: normal; height: 155px; position: relative; @media (orientation: landscape) { height: 120px; } img { display: block; width: auto; height: 100%; } + .messagebar-attachment { .ltr({ margin-left: 8px; }); .rtl({ margin-right: 8px; }); } } .messagebar-sheet { .scrollable(); display: flex; flex-wrap: wrap; flex-direction: column; align-content: flex-start; height: 252px; @media (orientation: landscape) { height: 192px; } } .messagebar-sheet-image, .messagebar-sheet-item { box-sizing: border-box; flex-shrink: 0; margin-top: 1px; position: relative; overflow: hidden; height: 125px; width: 125px; .ltr({ margin-left: 1px; }); .rtl({ margin-right: 1px; }); @media (orientation: landscape) { width: 190px / 2; height: 190px / 2; } .icon-checkbox, .icon-radio { position: absolute; right: 8px; bottom: 8px; } } .messagebar-sheet-image { background-size: cover; background-position: center; background-repeat: no-repeat; } .messagebar-attachment-delete { display: block; position: absolute; border-radius: 50%; box-sizing: border-box; cursor: pointer; box-shadow: 0px 0px 2px rgba(0,0,0,0.2); &:after, &:before { position: absolute; content: ''; left: 50%; top: 50%; } &:after { transform: rotate(45deg); } &:before { transform: rotate(-45deg); } } .messagebar:not(.messagebar-sheet-visible) .messagebar-sheet { display: none; } .ios, .md { .safe-areas({ .messagebar:not(.messagebar-top) { height: auto !important; } .messagebar:not(.messagebar-top):not(.messagebar-sheet-visible) { padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } .messagebar-sheet { padding-left: constant(safe-area-inset-left); padding-left: env(safe-area-inset-left); padding-right: constant(safe-area-inset-right); padding-right: env(safe-area-inset-right); padding-bottom: constant(safe-area-inset-bottom); padding-bottom: env(safe-area-inset-bottom); } }); } & when (@includeIosTheme) { @import url('./messagebar-ios.less'); } & when (@includeMdTheme) { @import url('./messagebar-md.less'); }