show format bar when text is selected
This commit is contained in:
parent
0d02ab59d6
commit
65ddfc0a50
7 changed files with 150 additions and 0 deletions
|
@ -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');
|
||||
}
|
||||
|
||||
}
|
||||
}
|
||||
|
|
Loading…
Add table
Add a link
Reference in a new issue