feat(): add menu bar and main content with colors from atom editor
This commit is contained in:
46
public/css/_custom-bootstrap.scss
Normal file
46
public/css/_custom-bootstrap.scss
Normal 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
14
public/css/_mixins.scss
Normal 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 */
|
||||
}
|
||||
7
public/css/_variables.scss
Normal file
7
public/css/_variables.scss
Normal 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
109
public/css/theme.scss
Normal 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user