show format bar when text is selected

This commit is contained in:
Bruno Windels 2019-09-03 16:02:37 +02:00
parent 0d02ab59d6
commit 65ddfc0a50
7 changed files with 150 additions and 0 deletions

View file

@ -16,6 +16,8 @@ limitations under the License.
*/
.mx_BasicMessageComposer {
position: relative;
.mx_BasicMessageComposer_inputEmpty > :first-child::before {
content: var(--placeholder);
opacity: 0.333;
@ -71,4 +73,70 @@ limitations under the License.
position: relative;
height: 0;
}
.mx_BasicMessageComposer_formatBar {
display: none;
background-color: red;
width: calc(26px * 4);
height: 24px;
position: absolute;
cursor: pointer;
border-radius: 4px;
background: $message-action-bar-bg-color;
&.mx_BasicMessageComposer_formatBar_shown {
display: block;
}
> * {
white-space: nowrap;
display: inline-block;
position: relative;
border: 1px solid $message-action-bar-border-color;
margin-left: -1px;
&:hover {
border-color: $message-action-bar-hover-border-color;
}
}
.mx_BasicMessageComposer_formatButton {
width: 27px;
height: 24px;
box-sizing: border-box;
}
.mx_BasicMessageComposer_formatButton::after {
content: '';
position: absolute;
top: 0;
left: 0;
height: 100%;
width: 100%;
mask-repeat: no-repeat;
mask-position: center;
background-color: $message-action-bar-fg-color;
}
.mx_BasicMessageComposer_formatBold::after {
mask-image: url('$(res)/img/format/bold.svg');
}
.mx_BasicMessageComposer_formatItalic::after {
mask-image: url('$(res)/img/format/italics.svg');
}
.mx_BasicMessageComposer_formatStrikethrough::after {
mask-image: url('$(res)/img/format/strikethrough.svg');
}
.mx_BasicMessageComposer_formatQuote::after {
mask-image: url('$(res)/img/format/quote.svg');
}
.mx_BasicMessageComposer_formatCode::after {
mask-image: url('$(res)/img/format/code.svg');
}
}
}