2015-03-06 07:42:38 +08:00
|
|
|
@import "ui-variables";
|
|
|
|
@import "ui-mixins";
|
|
|
|
|
2015-02-21 05:17:11 +08:00
|
|
|
html,
|
|
|
|
body {
|
|
|
|
width: 100%;
|
|
|
|
height: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
font-family: @font-family;
|
|
|
|
font-size: @font-size;
|
2015-03-06 05:31:11 +08:00
|
|
|
line-height: @line-height-base;
|
2015-03-05 02:37:57 +08:00
|
|
|
-webkit-font-smoothing: antialiased;
|
2015-02-21 05:17:11 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
atom-workspace {
|
|
|
|
display: block;
|
|
|
|
height: 100%;
|
|
|
|
overflow: hidden;
|
|
|
|
position: relative;
|
|
|
|
font-family: @font-family;
|
|
|
|
|
2015-06-03 10:51:00 +08:00
|
|
|
/* Important: This attribute is used in the theme-manager-specs to check that
|
|
|
|
themes load and override each other correctly. Do not remove! */
|
|
|
|
background-color: @background-primary;
|
|
|
|
|
2015-02-21 05:17:11 +08:00
|
|
|
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%;
|
|
|
|
}
|
|
|
|
|
2015-04-09 10:25:00 +08:00
|
|
|
.sheet {
|
|
|
|
background-color: @background-primary;
|
|
|
|
}
|
|
|
|
|
2015-02-21 05:17:11 +08:00
|
|
|
.sheet-stack-enter {
|
2015-03-26 03:41:48 +08:00
|
|
|
left:30px;
|
2015-03-19 09:21:04 +08:00
|
|
|
opacity: 0;
|
2015-03-26 03:41:48 +08:00
|
|
|
transition: all .125s ease-out;
|
2015-02-21 05:17:11 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.sheet-stack-enter.sheet-stack-enter-active {
|
|
|
|
left:0;
|
2015-03-19 09:21:04 +08:00
|
|
|
opacity: 1;
|
2015-02-21 05:17:11 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.sheet-stack-leave {
|
|
|
|
left:0;
|
2015-03-19 09:21:04 +08:00
|
|
|
opacity: 1;
|
2015-03-26 03:41:48 +08:00
|
|
|
transition: all .125s ease-in;
|
2015-02-21 05:17:11 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.sheet-stack-leave.sheet-stack-leave-active {
|
2015-03-26 03:41:48 +08:00
|
|
|
left:30px;
|
2015-03-19 09:21:04 +08:00
|
|
|
opacity: 0;
|
2015-02-21 05:17:11 +08:00
|
|
|
}
|
|
|
|
|
2015-03-19 09:21:04 +08:00
|
|
|
.toolbar-window-controls {
|
2015-03-26 09:22:52 +08:00
|
|
|
margin-top:14px;
|
|
|
|
margin-left:@spacing-half;
|
2015-03-19 09:21:04 +08:00
|
|
|
order: -1000;
|
2015-03-26 09:22:52 +08:00
|
|
|
min-width: 72px;
|
|
|
|
width: 72px;
|
2015-03-21 05:52:10 +08:00
|
|
|
flex-grow: 0;
|
|
|
|
flex-shrink: 0;
|
2015-03-14 08:02:46 +08:00
|
|
|
|
2015-03-28 07:35:15 +08:00
|
|
|
&:hover {
|
|
|
|
button {
|
|
|
|
background-position: 0 -12px;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-03-14 08:02:46 +08:00
|
|
|
button {
|
|
|
|
-webkit-app-region: no-drag;
|
|
|
|
display:inline-block;
|
|
|
|
padding:0;
|
2015-03-28 07:35:15 +08:00
|
|
|
width:12px;
|
|
|
|
height:12px;
|
2015-03-14 08:02:46 +08:00
|
|
|
margin:4px;
|
|
|
|
float:left;
|
2015-03-28 07:35:15 +08:00
|
|
|
background-color: transparent;
|
|
|
|
background-repeat: no-repeat;
|
|
|
|
background-position: 0 0;
|
|
|
|
background-size: 12px 48px;
|
|
|
|
border: 0;
|
2015-03-14 08:02:46 +08:00
|
|
|
&:active {
|
2015-03-28 07:35:15 +08:00
|
|
|
background-position: 0 -24px;
|
2015-03-14 08:02:46 +08:00
|
|
|
}
|
|
|
|
}
|
2015-03-28 07:35:15 +08:00
|
|
|
.close {
|
|
|
|
background-image: url("images/application-frame/close@2x.png");
|
|
|
|
}
|
2015-03-14 08:02:46 +08:00
|
|
|
.minimize {
|
2015-03-28 07:35:15 +08:00
|
|
|
background-image: url("images/application-frame/minimize@2x.png");
|
2015-03-14 08:02:46 +08:00
|
|
|
}
|
|
|
|
.maximize {
|
2015-03-28 07:35:15 +08:00
|
|
|
background-image: url("images/application-frame/maximize@2x.png");
|
2015-03-14 08:02:46 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
body.platform-win32, body.platform-linux {
|
2015-03-19 09:21:04 +08:00
|
|
|
.toolbar-window-controls {
|
2015-03-14 08:02:46 +08:00
|
|
|
display:none;
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
body.is-blurred {
|
2015-03-19 09:21:04 +08:00
|
|
|
.toolbar-window-controls {
|
2015-03-14 08:02:46 +08:00
|
|
|
button {
|
2015-03-28 07:35:15 +08:00
|
|
|
background-position: 0 -36px;
|
2015-03-14 08:02:46 +08:00
|
|
|
}
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
2015-04-09 10:25:00 +08:00
|
|
|
.sheet-toolbar-container {
|
|
|
|
background: @toolbar-background-color;
|
|
|
|
}
|
|
|
|
|
2015-03-13 06:07:38 +08:00
|
|
|
.sheet-toolbar {
|
2015-03-14 08:02:46 +08:00
|
|
|
position: relative;
|
|
|
|
-webkit-app-region: drag;
|
2015-02-21 05:17:11 +08:00
|
|
|
background: @toolbar-background-color;
|
|
|
|
border-bottom: 1px solid @border-color-divider;
|
2015-03-07 03:05:25 +08:00
|
|
|
width: 100%;
|
|
|
|
height: 50px;
|
2015-03-25 04:57:24 +08:00
|
|
|
|
2015-03-07 03:05:25 +08:00
|
|
|
// 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;
|
2015-03-07 04:03:32 +08:00
|
|
|
|
2015-03-14 08:02:46 +08:00
|
|
|
.item-container > * {
|
|
|
|
-webkit-app-region: no-drag;
|
|
|
|
}
|
|
|
|
.item-spacer {
|
|
|
|
-webkit-app-region: drag;
|
|
|
|
}
|
2015-03-19 09:21:04 +08:00
|
|
|
.item-back {
|
|
|
|
order:-999;
|
|
|
|
padding-top: 5px;
|
|
|
|
padding-left: @spacing-three-quarters;
|
2015-03-21 05:52:10 +08:00
|
|
|
flex-grow: 0;
|
|
|
|
flex-shrink: 0;
|
2015-03-19 09:21:04 +08:00
|
|
|
}
|
2015-03-14 08:02:46 +08:00
|
|
|
|
2015-03-07 04:03:32 +08:00
|
|
|
.btn-toolbar {
|
2015-06-04 02:07:59 +08:00
|
|
|
margin-top: @spacing-half * 0.94;
|
2015-03-07 04:03:32 +08:00
|
|
|
margin-left: @spacing-three-quarters;
|
2015-04-09 10:25:00 +08:00
|
|
|
margin-right: @spacing-three-quarters;
|
2015-05-22 09:08:29 +08:00
|
|
|
flex-shrink: 0;
|
2015-03-07 04:03:32 +08:00
|
|
|
height:32px;
|
|
|
|
}
|
2015-02-21 05:17:11 +08:00
|
|
|
}
|
|
|
|
|
2015-03-14 04:11:24 +08:00
|
|
|
.sheet-toolbar-enter {
|
|
|
|
opacity:0;
|
2015-03-26 03:41:48 +08:00
|
|
|
transition: opacity .125s ease-out;
|
2015-03-14 04:11:24 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.sheet-toolbar-enter.sheet-toolbar-enter-active {
|
|
|
|
opacity:1;
|
|
|
|
}
|
|
|
|
|
|
|
|
.sheet-toolbar-leave {
|
|
|
|
opacity:1;
|
2015-03-26 03:41:48 +08:00
|
|
|
transition: opacity .125s ease-in;
|
2015-03-14 04:11:24 +08:00
|
|
|
}
|
|
|
|
|
|
|
|
.sheet-toolbar-leave.sheet-toolbar-leave-active {
|
|
|
|
opacity:0;
|
|
|
|
}
|
|
|
|
|
2015-02-21 05:17:11 +08:00
|
|
|
.flexbox-handle-horizontal {
|
2015-03-04 10:09:57 +08:00
|
|
|
width: 6px;
|
|
|
|
top: 0;
|
|
|
|
bottom: 0;
|
|
|
|
z-index: 2;
|
|
|
|
position: absolute;
|
2015-02-21 05:17:11 +08:00
|
|
|
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;
|
|
|
|
}
|
|
|
|
}
|
2015-02-28 07:34:37 +08:00
|
|
|
|
|
|
|
.flexbox-handle-vertical {
|
|
|
|
width:100%;
|
|
|
|
height:6px;
|
|
|
|
left:0;
|
|
|
|
right:0;
|
|
|
|
z-index:2;
|
|
|
|
position:absolute;
|
|
|
|
cursor: row-resize;
|
|
|
|
div {
|
|
|
|
width:100%;
|
2015-03-05 07:52:40 +08:00
|
|
|
// border-top: 1px solid @border-color-divider;
|
2015-02-28 07:34:37 +08:00
|
|
|
}
|
|
|
|
&.flexbox-handle-top {
|
|
|
|
top:-3px;
|
|
|
|
padding-right:3px;
|
|
|
|
}
|
|
|
|
&.flexbox-handle-bottom {
|
2015-03-06 07:42:38 +08:00
|
|
|
bottom: 0;
|
2015-02-28 07:34:37 +08:00
|
|
|
padding-right:2px;
|
|
|
|
}
|
|
|
|
}
|
2015-03-12 04:13:51 +08:00
|
|
|
|
2015-04-22 09:16:08 +08:00
|
|
|
.registered-region-visible {
|
feat(unsafe-components): Wrap injected components, catch exceptions, clean up ComponentRegistry
Summary:
This diff gives the ComponentRegistry a cleaner, smaller API. Instead of querying by name, location or role,
it's now just location and role, and you can register components for one or more location and one or more
roles without assigning the entries in the registry separate names.
When you register with the ComponentRegistry, the syntax is also cleaner and uses the component's displayName
instead of requiring you to provide a name. You also provide the actual component when unregistering, ensuring
that you can't unregister someone else's component.
InjectedComponent and InjectedComponentSet now wrap their children in UnsafeComponent, which prevents
render/component lifecycle problems from propogating.
Existing components have been updated:
1. maxWidth / minWidth are now containerStyles.maxWidth/minWidth
2. displayName is now required to use the CR.
3. containerRequired = false can be provided to exempt a component from being wrapped in an UnsafeComponent.
This is useful because it's slightly faster and keeps DOM flat.
This diff also makes the "Show Component Regions" more awesome. It displays column regions, since they now
use the InjectedComponentSet, and also shows for InjectedComponent as well as InjectedComponentSet.
Change ComponentRegistry syntax, lots more work on safely wrapping items. See description.
Fix for inline flexbox scenarios (message actions)
Allow ~/.inbox/packages to be symlinked to a github repo
Test Plan: Run tests!
Reviewers: evan
Reviewed By: evan
Differential Revision: https://review.inboxapp.com/D1457
2015-05-01 07:10:15 +08:00
|
|
|
border: 1px dashed rgba(255,0,0,0.5);
|
|
|
|
margin: 2px;
|
2015-04-22 09:16:08 +08:00
|
|
|
position:relative;
|
|
|
|
min-height:1.5em;
|
feat(unsafe-components): Wrap injected components, catch exceptions, clean up ComponentRegistry
Summary:
This diff gives the ComponentRegistry a cleaner, smaller API. Instead of querying by name, location or role,
it's now just location and role, and you can register components for one or more location and one or more
roles without assigning the entries in the registry separate names.
When you register with the ComponentRegistry, the syntax is also cleaner and uses the component's displayName
instead of requiring you to provide a name. You also provide the actual component when unregistering, ensuring
that you can't unregister someone else's component.
InjectedComponent and InjectedComponentSet now wrap their children in UnsafeComponent, which prevents
render/component lifecycle problems from propogating.
Existing components have been updated:
1. maxWidth / minWidth are now containerStyles.maxWidth/minWidth
2. displayName is now required to use the CR.
3. containerRequired = false can be provided to exempt a component from being wrapped in an UnsafeComponent.
This is useful because it's slightly faster and keeps DOM flat.
This diff also makes the "Show Component Regions" more awesome. It displays column regions, since they now
use the InjectedComponentSet, and also shows for InjectedComponent as well as InjectedComponentSet.
Change ComponentRegistry syntax, lots more work on safely wrapping items. See description.
Fix for inline flexbox scenarios (message actions)
Allow ~/.inbox/packages to be symlinked to a github repo
Test Plan: Run tests!
Reviewers: evan
Reviewed By: evan
Differential Revision: https://review.inboxapp.com/D1457
2015-05-01 07:10:15 +08:00
|
|
|
> .name {
|
2015-04-22 09:16:08 +08:00
|
|
|
background-color: rgba(255,180,180,0.9);
|
|
|
|
position: absolute;
|
|
|
|
color: black;
|
|
|
|
font-size: 13px;
|
|
|
|
top:50%;
|
|
|
|
left:50%;
|
|
|
|
white-space: nowrap;
|
|
|
|
z-index:100;
|
|
|
|
-webkit-transform: translate(-50%, -50%);
|
feat(unsafe-components): Wrap injected components, catch exceptions, clean up ComponentRegistry
Summary:
This diff gives the ComponentRegistry a cleaner, smaller API. Instead of querying by name, location or role,
it's now just location and role, and you can register components for one or more location and one or more
roles without assigning the entries in the registry separate names.
When you register with the ComponentRegistry, the syntax is also cleaner and uses the component's displayName
instead of requiring you to provide a name. You also provide the actual component when unregistering, ensuring
that you can't unregister someone else's component.
InjectedComponent and InjectedComponentSet now wrap their children in UnsafeComponent, which prevents
render/component lifecycle problems from propogating.
Existing components have been updated:
1. maxWidth / minWidth are now containerStyles.maxWidth/minWidth
2. displayName is now required to use the CR.
3. containerRequired = false can be provided to exempt a component from being wrapped in an UnsafeComponent.
This is useful because it's slightly faster and keeps DOM flat.
This diff also makes the "Show Component Regions" more awesome. It displays column regions, since they now
use the InjectedComponentSet, and also shows for InjectedComponent as well as InjectedComponentSet.
Change ComponentRegistry syntax, lots more work on safely wrapping items. See description.
Fix for inline flexbox scenarios (message actions)
Allow ~/.inbox/packages to be symlinked to a github repo
Test Plan: Run tests!
Reviewers: evan
Reviewed By: evan
Differential Revision: https://review.inboxapp.com/D1457
2015-05-01 07:10:15 +08:00
|
|
|
-webkit-user-select:text;
|
|
|
|
}
|
|
|
|
&:hover {
|
|
|
|
border: 1px dashed rgba(255,0,0,1);
|
2015-04-22 09:16:08 +08:00
|
|
|
}
|
|
|
|
}
|
2015-03-12 04:13:51 +08:00
|
|
|
|
|
|
|
body.platform-win32 {
|
|
|
|
.flexbox-handle-vertical {
|
|
|
|
cursor:ns-resize;
|
|
|
|
}
|
|
|
|
.flexbox-handle-horizontal {
|
|
|
|
cursor:ew-resize;
|
|
|
|
}
|
2015-03-25 04:57:24 +08:00
|
|
|
}
|