| // Colors | |
| $blue = #44A1FF | |
| $grey = #DDDDDD | |
| $darkGrey = #CCC | |
| $darkerGrey = #AAA | |
| $blueishGrey = #486887 | |
| $green = #42B983 | |
| $darkerGreen = #3BA776 | |
| $slate = #242424 | |
| $white = #FFFFFF | |
| $orange = #FF6B00 | |
| $red = #c41a16 | |
| $black = #222 | |
| $vividBlue = #0033cc | |
| $purple = #997fff | |
| $pink = #881391 | |
| $lightPink = #e36eec | |
| // The min-width to give icons text... | |
| $wide = 1100px | |
| // The min-height to give the tools a little more breathing room... | |
| $tall = 350px | |
| // Theme | |
| $active-color = $darkerGreen | |
| $border-color = $md-grey-200 | |
| $background-color = $white | |
| $component-color = $active-color | |
| $hover-color = #c2e9d7 | |
| $dark-active-color = $active-color | |
| $dark-border-color = darken($vue-ui-gray-900, 30%) | |
| $dark-background-color = $vue-ui-black | |
| $dark-component-color = $active-color | |
| $dark-hover-color = $vue-ui-color-dark | |
| // Entries | |
| // TODO: FIX THIS | |
| // .no-entries | |
| // color: #ccc | |
| // text-align: center | |
| // margin-top: 50px | |
| // line-height: 30px | |
| // | |
| // .entry | |
| // position: relative; | |
| // font-family Menlo, Consolas, monospace | |
| // color #881391 | |
| // cursor pointer | |
| // padding 10px 20px | |
| // font-size 12px | |
| // background-color $background-color | |
| // box-shadow 0 1px 5px rgba(0,0,0,.12) | |
| // .entry-name | |
| // font-weight 600 | |
| // .entry-source | |
| // color #999 | |
| // .component-name | |
| // color $component-color | |
| // .entry-type | |
| // color #999 | |
| // margin-left 8px | |
| // &.active | |
| // color #fff | |
| // background-color $active-color | |
| // .time, .entry-type, .component-name | |
| // color lighten($active-color, 75%) | |
| // .entry-name | |
| // color: #fff | |
| // .entry-source | |
| // color #ddd | |
| // .app.dark & | |
| // background-color $dark-background-color | |
| // | |
| // .time | |
| // font-size 11px | |
| // color #999 | |
| // float right | |
| // margin-top 3px | |