feat(): add menu bar and main content with colors from atom editor

This commit is contained in:
kendo5731
2016-01-31 15:24:53 +01:00
commit 06de5347fa
10 changed files with 358 additions and 0 deletions

View File

@@ -0,0 +1,46 @@
$bootstrap_path: "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/";
// Core variables and mixins
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/variables";
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/mixins";
// Reset and dependencies
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/normalize";
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/print";
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/glyphicons";
// Core CSS
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/scaffolding";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/type";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/code";
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/grid";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/tables";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/forms";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/buttons";
//// Components
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/component-animations";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/dropdowns";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/button-groups";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/input-groups";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navs";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/navbar";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/breadcrumbs";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pagination";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/pager";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/labels";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/badges";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/jumbotron";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/thumbnails";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/alerts";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/progress-bars";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/media";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/list-group";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/panels";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-embed";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/wells";
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/close";
// Utility classes
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/utilities";
@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap/responsive-utilities";

14
public/css/_mixins.scss Normal file
View File

@@ -0,0 +1,14 @@
.no-padding-left-and-right {
padding-left: 0px;
padding-right: 0px;
}
.no-user-select {
-webkit-touch-callout: none; /* iOS Safari */
-webkit-user-select: none; /* Chrome/Safari/Opera */
-khtml-user-select: none; /* Konqueror */
-moz-user-select: none; /* Firefox */
-ms-user-select: none; /* IE/Edge */
user-select: none; /* non-prefixed version, currently
not supported by any browser */
}

View File

@@ -0,0 +1,7 @@
$bg-color: #001f27;
$content-bg-color: #002b36;
$menu-hover-bg-color: #003b4a;
$text-color: #839496;
$link-color: #2aa198;
$icon-font-path: "../fonts/";

109
public/css/theme.scss Normal file
View File

@@ -0,0 +1,109 @@
//@import "../../node_modules/bootstrap-sass/assets/stylesheets/bootstrap";
@import "./variables.scss";
@import "./custom-bootstrap.scss";
@import "./mixins.scss";
html {
height: 100%;
}
body {
min-height: 100%;
height: 100%;
font-family: 'Source Code Pro';
background-color: $bg-color;
color: $text-color;
&>.container-fluid {
@extend .no-padding-left-and-right;
}
}
.page-container {
height: 100%;
min-height: 100%;
}
a {
color: $link-color;
&:hover {
color: $link-color;
text-decoration: underline;
}
}
.article-content {
background-color: $content-bg-color;
min-height: 100%;
padding-top: 1px;
padding-bottom: 15px;
}
.menu {
padding-left: 0px;
nav {
@media (min-width: $screen-md-min) {
@extend .no-padding-left-and-right;
position: fixed;
height: 100%;
overflow-y: auto;
}
@media (max-width: $screen-sm-max) {
ul {
display: none;
}
}
h3 {
@extend .no-user-select;
cursor: pointer;
font-size: 14px;
padding: 4px 0px 4px 15px;
margin: 0px;
&:before {
@extend .glyphicon;
@extend .glyphicon-folder-close;
margin-right: 8px;
}
}
.open {
h3:before {
@extend .glyphicon-folder-open;
}
}
ul {
padding-left: 0px;
margin: 0px;
li {
list-style: none;
padding: 4px 30px 4px 40px;
margin-right: -15px;
&:before {
@extend .glyphicon;
@extend .glyphicon-file;
margin-right: 8px;
}
&:hover {
background-color: $menu-hover-bg-color;
}
a, a:hover {
color: $text-color;
text-decoration: none;
}
}
}
@media (max-width: $screen-sm-max) {
h3 {
padding: 10px 0px 10px 15px;
}
ul li {
padding: 10px 30px 10px 40px;
}
}
}
}