Mailspring/static/workspace.less
Evan Morikawa ee51602b26 feat(selection): by default nothing is selectable.
Summary:
Now all elements by default have selection set to inherit with the root
level body object set to no selection.

This makes everything (except input elements) not selectable by default.

You can explicitly set the css class or use the new `.selectable` class.

Test Plan: edgehill --test

Reviewers: bengotow

Reviewed By: bengotow

Differential Revision: https://review.inboxapp.com/D1355
2015-03-26 14:39:42 -04:00

233 lines
4 KiB
Text

@import "ui-variables";
@import "ui-mixins";
html,
body {
width: 100%;
height: 100%;
overflow: hidden;
font-family: @font-family;
font-size: @font-size;
line-height: @line-height-base;
-webkit-font-smoothing: antialiased;
}
atom-workspace {
display: block;
height: 100%;
overflow: hidden;
position: relative;
font-family: @font-family;
atom-workspace-axis.horizontal {
display: -webkit-flex;
height: 100%;
}
atom-workspace-axis.vertical {
display: -webkit-flex;
-webkit-flex: 1;
-webkit-flex-flow: column;
}
}
.sheet-container {
height:100%;
}
.sheet-stack-enter {
left:30px;
opacity: 0;
transition: all .125s ease-out;
}
.sheet-stack-enter.sheet-stack-enter-active {
left:0;
opacity: 1;
}
.sheet-stack-leave {
left:0;
opacity: 1;
transition: all .125s ease-in;
}
.sheet-stack-leave.sheet-stack-leave-active {
left:30px;
opacity: 0;
}
.toolbar-window-controls {
margin-top:14px;
margin-left:@spacing-half;
order: -1000;
min-width: 72px;
width: 72px;
flex-grow: 0;
flex-shrink: 0;
button {
-webkit-app-region: no-drag;
display:inline-block;
padding:0;
width:13px;
height:13px;
margin:4px;
border-radius: 13px;
border: 1px solid rgba(0,0,0,0.2);
float:left;
}
.close {
background-color: #FB0015;
&:hover {
background-color: darken(#FB0015, 10%);
}
&:active {
background-color: darken(#FB0015, 20%);
}
}
.minimize {
background-color: #FCB40A;
&:hover {
background-color: darken(#FCB40A, 10%);
}
&:active {
background-color: darken(#FCB40A, 20%);
}
}
.maximize {
background-color: #0AAF00;
&:hover {
background-color: darken(#0AAF00, 10%);
}
&:active {
background-color: darken(#0AAF00, 20%);
}
}
}
body.platform-win32, body.platform-linux {
.toolbar-window-controls {
display:none;
}
}
body.is-blurred {
.toolbar-window-controls {
button {
background-color: desaturate(fade(#FCB40A, 20%), 100%);
}
}
}
.sheet-toolbar {
position: relative;
-webkit-app-region: drag;
background: @toolbar-background-color;
border-bottom: 1px solid @border-color-divider;
width: 100%;
height: 50px;
box-shadow: 0 0 6px rgba(0,0,0,0.09);
// prevent flexbox from ever, ever resizing toolbars, no matter
// how much it thinks other content is being squished
min-height: 50px;
max-height: 50px;
// cover up the vertical resizing separators, so the toolbar appears
// to be one continuous bar.
z-index: 10;
.item-container > * {
-webkit-app-region: no-drag;
}
.item-spacer {
-webkit-app-region: drag;
}
.item-back {
order:-999;
padding-top: 5px;
padding-left: @spacing-three-quarters;
flex-grow: 0;
flex-shrink: 0;
}
.btn-toolbar {
margin-top: @spacing-half;
margin-left: @spacing-three-quarters;
height:32px;
}
}
.sheet-toolbar-enter {
opacity:0;
transition: opacity .125s ease-out;
}
.sheet-toolbar-enter.sheet-toolbar-enter-active {
opacity:1;
}
.sheet-toolbar-leave {
opacity:1;
transition: opacity .125s ease-in;
}
.sheet-toolbar-leave.sheet-toolbar-leave-active {
opacity:0;
}
.flexbox-handle-horizontal {
width: 6px;
top: 0;
bottom: 0;
z-index: 2;
position: absolute;
cursor: col-resize;
div {
height:100%;
border-right: 1px solid @border-color-divider;
}
&.flexbox-handle-right {
right:-3px;
padding-right:3px;
}
&.flexbox-handle-left {
left:-3px;
padding-right:2px;
}
}
.flexbox-handle-vertical {
width:100%;
height:6px;
left:0;
right:0;
z-index:2;
position:absolute;
cursor: row-resize;
div {
width:100%;
// border-top: 1px solid @border-color-divider;
}
&.flexbox-handle-top {
top:-3px;
padding-right:3px;
}
&.flexbox-handle-bottom {
bottom: 0;
padding-right:2px;
}
}
body.platform-win32 {
.flexbox-handle-vertical {
cursor:ns-resize;
}
.flexbox-handle-horizontal {
cursor:ew-resize;
}
}