Foundry376/Mailspring
1
1
Fork 0
mirror of https://github.com/Foundry376/Mailspring.git synced 2024-09-22 00:06:06 +08:00
Code Issues Packages Projects Releases Wiki Activity

💄(composer): Shadow on pointer of floating toolbar

Browse source
This commit is contained in:
Ben Gotow 2016-02-24 14:12:07 -08:00
parent bb824f36fa
commit bb321f4bd2
2 changed files with 25 additions and 11 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

7
src/components/contenteditable/floating-toolbar.cjsx
View file

@ -215,7 +215,10 @@ class FloatingToolbar extends React.Component
return styles
_renderPointer: =>
unless @state.hidePointer
return <div className="toolbar-pointer" style={@_toolbarPointerStyles()}></div>
return false if @state.hidePointer
<div className="toolbar-pointer-container" style={@_toolbarPointerStyles()}>
<div className="shadow"></div>
<div className="foreground"></div>
</div>
module.exports = FloatingToolbar

29
static/components/contenteditable.less
View file

@ -42,24 +42,35 @@
margin-top: 0;
}
.toolbar-pointer {
.toolbar-pointer-container {
position: absolute;
width: 22.5px;
width: 23px;
height: 10px;
background: transparent url('images/tooltip/tooltip-bg-pointer@2x.png') no-repeat;
background-size: 22.5px 9.5px;
margin-left: -11.2px;
div {
-webkit-mask-image: url('images/tooltip/tooltip-bg-pointer@2x.png');
background-color: #fff;
position: absolute;
zoom: 0.5;
width: 45px;
height: 21px;
&.shadow {
-webkit-mask-image: url('images/tooltip/tooltip-bg-pointer-shadow@2x.png');
background-color: fade(@black, 22%);
transform: translateY(0.5px);
}
}
}
&.above {
.toolbar-pointer {
transform: rotate(0deg);
.toolbar-pointer-container {
transform: translateX(-11px) rotate(0deg);
bottom: -9px;
}
}
&.below {
.toolbar-pointer {
transform: rotate(180deg);
.toolbar-pointer-container {
transform: translateX(-11px) rotate(180deg);
top: -9px;
}
}