wbrawner/Caret
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Move menus out, add command line styles.

Browse source
This commit is contained in:
Thomas Wilburn 2014-04-03 23:44:41 -07:00
parent f2764f16c4
commit e58cb24b69
4 changed files with 104 additions and 77 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

75
css/menus.less Normal file
View file

@ -0,0 +1,75 @@
.toolbar {
padding: 0;
margin: 0;
color: @foreground;
line-height: 30px;
list-style-type: none;
z-index: 99;
hr {
border: none;
border-top: 1px solid rgba(128, 128, 128, .2);
margin: 4px 8px;
}
.shortcut {
color: fade(@foreground, 50%);
margin-left: 1em;
}
//nested menus (default)
li {
transition: opacity .2s;
display: flex;
padding: 4px 8px;
justify-content: space-between;
position: relative;
&:hover, &.active {
background: mix(@background, #888, 80%);
}
&.parent:hover, &.active {
& > .menu {
display: block;
}
}
.menu {
display: none;
min-width: 250px;
position: absolute;
margin-left: 90%;
margin-top: -2em;
z-index: 999;
background: @background;
padding: 8px 0;
box-shadow: 4px 8px 16px rgba(0, 0, 0, .25);
}
&.parent::after {
content: "►";
font-family: serif;
position: absolute;
right: 4px;
top: 0;
color: fade(@foreground, 50%);
}
}
//base-level menus
& > li {
display: inline-block;
padding: 4px 8px;
line-height: initial;
& > .menu {
margin-left: -8px;
margin-top: 4px;
}
}
}

1
css/seed-dark.less
View file

@ -6,6 +6,7 @@
@import "base";
@import "tabs";
@import "ui";
@import "menus";
@import "dialog";
@import "palette";
@import "project";

1
css/seed.less
View file

@ -6,6 +6,7 @@
@import "base";
@import "tabs";
@import "ui";
@import "menus";
@import "dialog";
@import "palette";
@import "project";

104
css/ui.less
View file

@ -57,83 +57,6 @@
}
}
//menus
.toolbar {
padding: 0;
margin: 0;
color: @foreground;
line-height: 30px;
list-style-type: none;
z-index: 99;
hr {
border: none;
border-top: 1px solid rgba(128, 128, 128, .2);
margin: 4px 8px;
}
.shortcut {
color: fade(@foreground, 50%);
margin-left: 1em;
}
//nested menus (default)
li {
transition: opacity .2s;
display: flex;
padding: 4px 8px;
justify-content: space-between;
position: relative;
&:hover, &.active {
background: mix(@background, #888, 80%);
}
&.parent:hover, &.active {
& > .menu {
display: block;
}
}
.menu {
display: none;
min-width: 250px;
position: absolute;
margin-left: 90%;
margin-top: -2em;
z-index: 999;
background: @background;
padding: 8px 0;
box-shadow: 4px 8px 16px rgba(0, 0, 0, .25);
}
&.parent::after {
content: "►";
font-family: serif;
position: absolute;
right: 4px;
top: 0;
color: fade(@foreground, 50%);
}
}
//base-level menus
& > li {
display: inline-block;
padding: 4px 8px;
line-height: initial;
& > .menu {
margin-left: -8px;
margin-top: 4px;
}
}
}
//status bar
.bottom-bar {
margin: 0;
@ -155,6 +78,33 @@
}
}
//command line
.command-line {
display: none;
height: 30px;
padding: 4px;
&.show {
display: flex;
align-content: stretch;
align-items: center;
}
input {
width: 100%;
padding: 4px;
font-family: monospace;
border: none;
}
.close {
font-weight: bold;
font-size: 15px;
padding: 0 8px;
}
}
//app-wide scrollbar
::-webkit-scrollbar {
width: 15px;