mirror of
https://github.com/prurigro/hypothetical.git
synced 2024-11-22 07:54:11 -05:00
Convert less to scss and make the required changes to support that
This commit is contained in:
Kevin MacMartin
parent
eeeac52dbe
commit
5091f95475
19 changed files with 316 additions and 302 deletions
|
|
@ -8,13 +8,13 @@
|
|||
"license": "MIT",
|
||||
"dependencies": {
|
||||
"jquery": "~2.2.4",
|
||||
"bootstrap": "^3.3.7",
|
||||
"fontawesome": "~4.6.3",
|
||||
"awesome-bootstrap-checkbox": "~0.3.7",
|
||||
"Sortable": "~1.4.2",
|
||||
"simplemde": "~1.11.2",
|
||||
"datetimepicker": "~2.5.4",
|
||||
"SpinKit": "~1.2.5",
|
||||
"jQuery.stickyFooter": "https://github.com/miWebb/jQuery.stickyFooter.git#~1.2.3"
|
||||
"jQuery.stickyFooter": "https://github.com/miWebb/jQuery.stickyFooter.git#~1.2.3",
|
||||
"bootstrap-sass": "^3.3.7"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
42
gulpfile.js
42
gulpfile.js
|
|
@ -1,25 +1,22 @@
|
|||
// include packages
|
||||
const gulp = require("gulp"),
|
||||
gUtil = require("gulp-util"),
|
||||
gLess = require("gulp-less"),
|
||||
gSass = require("gulp-sass"),
|
||||
gSassGlob = require("gulp-sass-glob"),
|
||||
gConcat = require("gulp-concat"),
|
||||
gPlumber = require("gulp-plumber"),
|
||||
gUglify = require("gulp-uglify"),
|
||||
gModernizr = require("gulp-modernizr"),
|
||||
gBabel = require("gulp-babel"),
|
||||
gPostCSS = require("gulp-postcss"),
|
||||
autoprefixer = require("autoprefixer"),
|
||||
lessGlob = require("less-plugin-glob"),
|
||||
lessCleanCSS = require("less-plugin-clean-css");
|
||||
autoprefixer = require("autoprefixer");
|
||||
|
||||
// determine if gulp has been run with --production
|
||||
const prod = gUtil.env.production;
|
||||
|
||||
// initialize plugins
|
||||
const cleancss = new lessCleanCSS({ advanced: true });
|
||||
|
||||
// declare plugin settings and modernizr tests
|
||||
const lessPlugins = prod ? [ lessGlob, cleancss ] : [ lessGlob ],
|
||||
const sassOutputStyle = prod ? "compressed" : "nested",
|
||||
sassIncludePaths = [ "bower_components" ],
|
||||
autoprefixerSettings = { remove: false, cascade: false, browsers: [ "last 6 versions" ] },
|
||||
modernizrTests = [];
|
||||
|
||||
|
|
@ -34,7 +31,7 @@ const jsPublic = [
|
|||
// javascript libraries for the public site
|
||||
const jsPublicLibs = [
|
||||
"bower_components/jquery/dist/jquery.js",
|
||||
"bower_components/bootstrap/dist/js/bootstrap.js",
|
||||
"bower_components/bootstrap-sass/assets/javascripts/bootstrap.js",
|
||||
"bower_components/jQuery.stickyFooter/assets/js/jquery.stickyfooter.js"
|
||||
];
|
||||
|
||||
|
|
@ -46,7 +43,7 @@ const jsDashboard = [
|
|||
// javascript libraries for the dashboard
|
||||
const jsDashboardLibs = [
|
||||
"bower_components/jquery/dist/jquery.js",
|
||||
"bower_components/bootstrap/dist/js/bootstrap.js",
|
||||
"bower_components/bootstrap-sass/assets/javascripts/bootstrap.js",
|
||||
"bower_components/Sortable/Sortable.js",
|
||||
"bower_components/datetimepicker/build/jquery.datetimepicker.full.js",
|
||||
"bower_components/simplemde/dist/simplemde.min.js"
|
||||
|
|
@ -55,7 +52,7 @@ const jsDashboardLibs = [
|
|||
// paths to folders containing fonts that should be copied to public/fonts/
|
||||
const fontPaths = [
|
||||
"resources/assets/fonts/**",
|
||||
"bower_components/bootstrap/dist/fonts/**",
|
||||
"bower_components/bootstrap-sass/assets/fonts/**/*",
|
||||
"bower_components/fontawesome/fonts/**"
|
||||
];
|
||||
|
||||
|
|
@ -65,11 +62,12 @@ function plumberError(err) {
|
|||
this.emit("end");
|
||||
}
|
||||
|
||||
// function to handle the processing of less files
|
||||
function processLess(filename) {
|
||||
return gulp.src("resources/assets/less/" + filename + ".less")
|
||||
// function to handle the processing of sass files
|
||||
function processSass(filename) {
|
||||
return gulp.src("resources/assets/sass/" + filename + ".scss")
|
||||
.pipe(gPlumber(plumberError))
|
||||
.pipe(gLess({ plugins: lessPlugins, paths: "bower_components/" }))
|
||||
.pipe(gSassGlob())
|
||||
.pipe(gSass({ outputStyle: sassOutputStyle, includePaths: sassIncludePaths }))
|
||||
.pipe(gPostCSS([ autoprefixer(autoprefixerSettings) ]))
|
||||
.pipe(gConcat(filename + ".css"))
|
||||
.pipe(gulp.dest("public/css/"));
|
||||
|
|
@ -87,13 +85,13 @@ function processJavaScript(ouputFilename, inputFiles, es6) {
|
|||
}
|
||||
|
||||
// gulp task for public styles
|
||||
gulp.task("less-public", function() {
|
||||
return processLess("app");
|
||||
gulp.task("sass-public", function() {
|
||||
return processSass("app");
|
||||
});
|
||||
|
||||
// gulp task for dashboard styles
|
||||
gulp.task("less-dashboard", function() {
|
||||
return processLess("dashboard");
|
||||
gulp.task("sass-dashboard", function() {
|
||||
return processSass("dashboard");
|
||||
});
|
||||
|
||||
// gulp task for public javascript
|
||||
|
|
@ -155,15 +153,15 @@ gulp.task("watch", function() {
|
|||
gulp.watch(jsDashboard, [ "js-dashboard" ]).on("change", liveReloadUpdate);
|
||||
gulp.watch([ "app/**/*.php", "resources/views/**/*.blade.php" ]).on("change", liveReloadUpdate);
|
||||
|
||||
gulp.watch("resources/assets/less/**/*.less", [ "less-public", "less-dashboard" ]).on("change", function() {
|
||||
gulp.watch("resources/assets/sass/**/*.scss", [ "sass-public", "sass-dashboard" ]).on("change", function() {
|
||||
liveReloadUpdate(1000);
|
||||
});
|
||||
});
|
||||
|
||||
// gulp default task
|
||||
gulp.task("default", [
|
||||
"less-public",
|
||||
"less-dashboard",
|
||||
"sass-public",
|
||||
"sass-dashboard",
|
||||
"js-public",
|
||||
"js-public-libs",
|
||||
"js-dashboard",
|
||||
|
|
|
|||
|
|
@ -9,13 +9,12 @@
|
|||
"gulp": "^3.9.1",
|
||||
"gulp-babel": "^6.1.2",
|
||||
"gulp-concat": "^2.6.0",
|
||||
"gulp-less": "^3.1.0",
|
||||
"gulp-modernizr": "^1.0.0-alpha",
|
||||
"gulp-plumber": "^1.1.0",
|
||||
"gulp-postcss": "^6.1.1",
|
||||
"gulp-sass": "^2.3.2",
|
||||
"gulp-sass-glob": "^1.0.6",
|
||||
"gulp-uglify": "^2.0.0",
|
||||
"gulp-util": "^3.0.7",
|
||||
"less-plugin-clean-css": "^1.5.1",
|
||||
"less-plugin-glob": "^1.1.1"
|
||||
"gulp-util": "^3.0.7"
|
||||
}
|
||||
}
|
||||
|
|
|
|||
BIN
resources/assets/fonts/OpenSans-Regular.otf
Normal file
BIN
resources/assets/fonts/OpenSans-Regular.otf
Normal file
Binary file not shown.
BIN
resources/assets/fonts/OpenSans-Regular.woff2
Normal file
BIN
resources/assets/fonts/OpenSans-Regular.woff2
Normal file
Binary file not shown.
35
resources/assets/less/app.less
vendored
35
resources/assets/less/app.less
vendored
|
|
@ -1,35 +0,0 @@
|
|||
// Core
|
||||
@import "bootstrap/less/bootstrap";
|
||||
@import "var";
|
||||
@import "fonts";
|
||||
|
||||
// Supplementary
|
||||
@import "elements/**";
|
||||
@import "pages/**";
|
||||
|
||||
/*
|
||||
|
|
||||
| Main Styles
|
||||
|
|
||||
*/
|
||||
|
||||
html, body {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
}
|
||||
|
||||
html.no-scroll { overflow-y: hidden; }
|
||||
|
||||
body {
|
||||
.font_sans;
|
||||
color: @c_text;
|
||||
padding-top: @nav_height;
|
||||
@media (max-width: @grid-float-breakpoint-max) { padding-top: @mobile_nav_height; }
|
||||
}
|
||||
|
||||
* {
|
||||
outline: none !important;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
74
resources/assets/less/elements/nav.less
vendored
74
resources/assets/less/elements/nav.less
vendored
|
|
@ -1,74 +0,0 @@
|
|||
nav.navbar {
|
||||
height: @nav_height;
|
||||
margin-bottom: 0px;
|
||||
padding-right: 10px;
|
||||
background-color: @c_base;
|
||||
border: none;
|
||||
border-radius: 0px;
|
||||
z-index: 1;
|
||||
@media (max-width: @grid-float-breakpoint-max) { height: @mobile_nav_height; }
|
||||
|
||||
.navbar-logo {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 10px;
|
||||
width: (@nav_height - 10);
|
||||
height: (@nav_height - 10);
|
||||
background-image: url('/img/logo.png');
|
||||
background-size: contain;
|
||||
background-position: center center;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
width: (@mobile_nav_height - 10);
|
||||
height: (@mobile_nav_height - 10);
|
||||
}
|
||||
}
|
||||
|
||||
#navbar {
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
|
||||
ul.nav {
|
||||
li {
|
||||
a {
|
||||
padding: 0px 15px;
|
||||
user-select: none;
|
||||
color: @c_text_light;
|
||||
text-decoration: none;
|
||||
text-transform: uppercase;
|
||||
line-height: @nav_height;
|
||||
font-size: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (max-width: @grid-float-breakpoint-max) {
|
||||
position: relative;
|
||||
bottom: 4px;
|
||||
width: 100vw;
|
||||
padding-bottom: 5px;
|
||||
background-color: @c_base;
|
||||
|
||||
ul.nav li a {
|
||||
line-height: 40px;
|
||||
font-size: 18px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
left: 20px;
|
||||
border: none;
|
||||
&, &:hover, &:focus { background-color: transparent; }
|
||||
|
||||
.icon-bar {
|
||||
width: 27px;
|
||||
height: 4px;
|
||||
background-color: @c_text_light;
|
||||
}
|
||||
}
|
||||
}
|
||||
9
resources/assets/less/fonts.less
vendored
9
resources/assets/less/fonts.less
vendored
|
|
@ -1,9 +0,0 @@
|
|||
@font-face {
|
||||
font-family: 'OpenSans-Regular';
|
||||
src: url('/fonts/OpenSans-Regular.eot');
|
||||
src: url('/fonts/OpenSans-Regular.eot?#iefix') format('embedded-opentype'), url('/fonts/OpenSans-Regular.svg#OpenSans-Regular') format('svg'), url('/fonts/OpenSans-Regular.woff') format('woff'), url('/fonts/OpenSans-Regular.ttf') format('truetype');
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
.font_sans { font-family: OpenSans-Regular, Arial, Helvetica, sans-serif; }
|
||||
30
resources/assets/less/var.less
vendored
30
resources/assets/less/var.less
vendored
|
|
@ -1,30 +0,0 @@
|
|||
/*
|
||||
|
|
||||
| Overrides
|
||||
|
|
||||
*/
|
||||
|
||||
@grid-float-breakpoint: @screen-sm;
|
||||
@grid-float-breakpoint-max: (@grid-float-breakpoint - 1);
|
||||
|
||||
/*
|
||||
|
|
||||
| Custom Variables
|
||||
|
|
||||
*/
|
||||
|
||||
// Colours
|
||||
@c_text: #111; // text
|
||||
@c_text_light: #fff; // light text
|
||||
@c_base: #0088cc; // base
|
||||
@c_accent: #000; // accent
|
||||
@c_error: #ff0000; // error
|
||||
|
||||
@c_dashboard_dark: #3e6087;
|
||||
@c_dashboard_light: #f1f1f1;
|
||||
@c_dashboard_edit: #87823e;
|
||||
@c_dashboard_delete: #87483e;
|
||||
|
||||
// Sizes
|
||||
@nav_height: 60px;
|
||||
@mobile_nav_height: 50px;
|
||||
18
resources/assets/sass/_fonts.scss
Normal file
18
resources/assets/sass/_fonts.scss
Normal file
|
|
@ -0,0 +1,18 @@
|
|||
@font-face {
|
||||
font-family: "OpenSans-Regular";
|
||||
src: url("/fonts/OpenSans-Regular.eot");
|
||||
src: url("/fonts/OpenSans-Regular.eot?#iefix") format("embedded-opentype"),
|
||||
url("/fonts/OpenSans-Regular.svg#OpenSans-Regular") format("svg"),
|
||||
url("/fonts/OpenSans-Regular.woff") format("woff"),
|
||||
url("/fonts/OpenSans-Regular.woff2") format("woff2"),
|
||||
url("/fonts/OpenSans-Regular.ttf") format("truetype"),
|
||||
url("/fonts/OpenSans-Regular.otf") format("opentype");
|
||||
font-weight: normal;
|
||||
font-style: normal;
|
||||
}
|
||||
|
||||
@mixin font-sans {
|
||||
font-family: OpenSans-Regular, Arial, Helvetica, sans-serif;
|
||||
font-style: normal;
|
||||
font-weight: normal;
|
||||
}
|
||||
26
resources/assets/sass/_var.scss
Normal file
26
resources/assets/sass/_var.scss
Normal file
|
|
@ -0,0 +1,26 @@
|
|||
//
|
||||
// Overrides
|
||||
//
|
||||
|
||||
$grid-float-breakpoint: $screen-sm;
|
||||
$grid-float-breakpoint-max: ($grid-float-breakpoint - 1);
|
||||
|
||||
//
|
||||
// Custom Variables
|
||||
//
|
||||
|
||||
// Colours
|
||||
$c-text: #111; // text
|
||||
$c-text-light: #fff; // light text
|
||||
$c-base: #08c; // base
|
||||
$c-accent: #000; // accent
|
||||
$c-error: #f00; // error
|
||||
|
||||
$c-dashboard-dark: #3e6087;
|
||||
$c-dashboard-light: #f1f1f1;
|
||||
$c-dashboard-edit: #87823e;
|
||||
$c-dashboard-delete: #87483e;
|
||||
|
||||
// Sizes
|
||||
$nav-height: 60px;
|
||||
$nav-height-mobile: 50px;
|
||||
36
resources/assets/sass/app.scss
Normal file
36
resources/assets/sass/app.scss
Normal file
|
|
@ -0,0 +1,36 @@
|
|||
// Libraries
|
||||
@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";
|
||||
|
||||
// Core
|
||||
@import "_var";
|
||||
@import "_fonts";
|
||||
|
||||
// Supplementary
|
||||
@import "elements/**";
|
||||
@import "pages/**";
|
||||
|
||||
//
|
||||
// Main Styles
|
||||
//
|
||||
|
||||
* {
|
||||
outline: none !important;
|
||||
}
|
||||
|
||||
html {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
&.no-scroll { overflow-y: hidden; }
|
||||
}
|
||||
|
||||
body {
|
||||
@include font-sans;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
padding-top: $nav-height;
|
||||
color: $c-text;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
-webkit-overflow-scrolling: touch;
|
||||
@media (max-width: $grid-float-breakpoint-max) { padding-top: $nav-height-mobile; }
|
||||
}
|
||||
|
|
@ -1,68 +1,77 @@
|
|||
// Core
|
||||
@import "bootstrap/less/bootstrap";
|
||||
@import "fontawesome/less/font-awesome";
|
||||
// Libraries
|
||||
@import "bootstrap-sass/assets/stylesheets/_bootstrap.scss";
|
||||
@import "fontawesome/scss/font-awesome.scss";
|
||||
@import "awesome-bootstrap-checkbox/awesome-bootstrap-checkbox";
|
||||
@import (inline) "datetimepicker/jquery.datetimepicker.css";
|
||||
@import (inline) "simplemde/dist/simplemde.min.css";
|
||||
@import (inline) "SpinKit/css/spinners/11-folding-cube.css";
|
||||
@import "var";
|
||||
@import "fonts";
|
||||
@fa-font-path: "../../fonts";
|
||||
@import "jquery-ui/themes/base/datepicker";
|
||||
@import "simplemde/dist/simplemde.min";
|
||||
@import "SpinKit/css/spinners/11-folding-cube";
|
||||
|
||||
// Core
|
||||
@import "_var";
|
||||
@import "_fonts";
|
||||
|
||||
// Fontawesome Path
|
||||
$fa-font-path: "/fonts";
|
||||
|
||||
* {
|
||||
outline: none !important;
|
||||
.font_sans;
|
||||
}
|
||||
|
||||
body {
|
||||
@include font-sans;
|
||||
min-width: 350px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
}
|
||||
|
||||
body { min-width: 350px; }
|
||||
|
||||
nav.navbar {
|
||||
background-color: @c_dashboard_dark;
|
||||
.navbar {
|
||||
background-color: $c-dashboard-dark;
|
||||
.navbar-brand { font-weight: bold; }
|
||||
|
||||
#spark-navbar-collapse {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
border: none;
|
||||
|
||||
.dropdown {
|
||||
.dropdown-toggle .caret { margin-left: 4px; }
|
||||
|
||||
&.open .dropdown-toggle {
|
||||
background-color: darken(@c_dashboard_dark, 5%);
|
||||
color: @c_dashboard_light;
|
||||
background-color: darken($c-dashboard-dark, 5%);
|
||||
color: $c-dashboard-light;
|
||||
}
|
||||
|
||||
.dropdown-menu {
|
||||
top: calc(100% ~"-" 1px);
|
||||
top: calc(100% - 1px);
|
||||
right: -1px;
|
||||
background-color: @c_dashboard_dark;
|
||||
& > li > a:hover, & > li > a:focus { background-color: transparent; }
|
||||
& > li > a { &, &:hover, &:focus { color: #fff; } }
|
||||
background-color: $c-dashboard-dark;
|
||||
> li > a:hover, > li > a:focus { background-color: transparent; }
|
||||
|
||||
> li > a {
|
||||
&, &:hover, &:focus { color: #fff; }
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-brand, .navbar-default .navbar-nav > li > a, .navbar-nav > li > a {
|
||||
&, &:hover, &:focus { color: @c_dashboard_light; }
|
||||
&, &:hover, &:focus { color: $c-dashboard-light; }
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
position: relative;
|
||||
bottom: 0px;
|
||||
left: 10px;
|
||||
border: none;
|
||||
border: 0;
|
||||
&, &:hover, &:focus { background-color: transparent; }
|
||||
|
||||
.icon-bar {
|
||||
width: 27px;
|
||||
height: 4px;
|
||||
background-color: @c_dashboard_light;
|
||||
background-color: $c-dashboard-light;
|
||||
transition: background-color 100ms;
|
||||
}
|
||||
|
||||
&:hover .icon-bar { background-color: darken(@c_dashboard_dark, 15%); }
|
||||
&:hover .icon-bar { background-color: darken($c-dashboard-dark, 15%); }
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -72,25 +81,25 @@ nav.navbar {
|
|||
|
||||
.panel-body {
|
||||
padding-bottom: 0px;
|
||||
background-color: lighten(@c_dashboard_light, 1%);
|
||||
background-color: lighten($c-dashboard-light, 1%);
|
||||
|
||||
.help-text {
|
||||
padding: 5px 10px;
|
||||
margin-top: 10px;
|
||||
margin-bottom: 10px;
|
||||
padding: 5px 10px;
|
||||
border: 1px solid darken($c-dashboard-dark, 5%);
|
||||
border-radius: 5px;
|
||||
border: 1px solid darken(@c_dashboard_dark, 5%);
|
||||
background-color: @c_dashboard_dark;
|
||||
color: @c_text_light;
|
||||
background-color: $c-dashboard-dark;
|
||||
color: $c-text-light;
|
||||
}
|
||||
}
|
||||
|
||||
& > .panel-heading {
|
||||
border-top: 1px solid darken(@c_dashboard_dark, 5%);
|
||||
border-right: 1px solid darken(@c_dashboard_dark, 5%);
|
||||
border-left: 1px solid darken(@c_dashboard_dark, 5%);
|
||||
background-color: @c_dashboard_dark;
|
||||
color: @c_dashboard_light;
|
||||
> .panel-heading {
|
||||
border-top: 1px solid darken($c-dashboard-dark, 5%);
|
||||
border-right: 1px solid darken($c-dashboard-dark, 5%);
|
||||
border-left: 1px solid darken($c-dashboard-dark, 5%);
|
||||
background-color: $c-dashboard-dark;
|
||||
color: $c-dashboard-light;
|
||||
font-weight: bold;
|
||||
|
||||
.btn {
|
||||
|
|
@ -104,76 +113,78 @@ nav.navbar {
|
|||
}
|
||||
|
||||
a {
|
||||
color: $c-text;
|
||||
text-decoration: none;
|
||||
color: @c_text;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.form-control {
|
||||
&:focus {
|
||||
border-color: @c_dashboard_dark;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 8px fade(@c_dashboard_dark, 60%);
|
||||
}
|
||||
.form-control:focus {
|
||||
border-color: $c-dashboard-dark;
|
||||
box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075), 0 0 8px fade-out($c-dashboard-dark, 0.4);
|
||||
}
|
||||
|
||||
.btn {
|
||||
border-color: darken(@c_dashboard_dark, 5%);
|
||||
background-color: @c_dashboard_dark;
|
||||
border-color: darken($c-dashboard-dark, 5%);
|
||||
background-color: $c-dashboard-dark;
|
||||
transition: background-color 100ms;
|
||||
&:hover { background-color: darken(@c_dashboard_dark, 5%); }
|
||||
&:focus { background-color: lighten(@c_dashboard_dark, 5%); }
|
||||
&:hover { background-color: darken($c-dashboard-dark, 5%); }
|
||||
&:focus { background-color: lighten($c-dashboard-dark, 5%); }
|
||||
|
||||
&.btn-warning {
|
||||
border-color: darken(@c_dashboard_edit, 10%);
|
||||
background-color: @c_dashboard_edit;
|
||||
&:hover { background-color: darken(@c_dashboard_edit, 5%); }
|
||||
&:focus { background-color: lighten(@c_dashboard_edit, 5%); }
|
||||
border-color: darken($c-dashboard-edit, 10%);
|
||||
background-color: $c-dashboard-edit;
|
||||
&:hover { background-color: darken($c-dashboard-edit, 5%); }
|
||||
&:focus { background-color: lighten($c-dashboard-edit, 5%); }
|
||||
}
|
||||
|
||||
&.btn-danger {
|
||||
border-color: darken(@c_dashboard_delete, 10%);
|
||||
background-color: @c_dashboard_delete;
|
||||
&:hover { background-color: darken(@c_dashboard_delete, 5%); }
|
||||
&:focus { background-color: lighten(@c_dashboard_delete, 5%); }
|
||||
border-color: darken($c-dashboard-delete, 10%);
|
||||
background-color: $c-dashboard-delete;
|
||||
&:hover { background-color: darken($c-dashboard-delete, 5%); }
|
||||
&:focus { background-color: lighten($c-dashboard-delete, 5%); }
|
||||
}
|
||||
|
||||
&.btn-default {
|
||||
border-color: darken(@c_dashboard_light, 10%);
|
||||
background-color: @c_dashboard_light;
|
||||
color: @c_text;
|
||||
&:hover { background-color: darken(@c_dashboard_light, 5%); }
|
||||
&:focus { background-color: lighten(@c_dashboard_light, 5%); }
|
||||
border-color: darken($c-dashboard-light, 10%);
|
||||
background-color: $c-dashboard-light;
|
||||
color: $c-text;
|
||||
&:hover { background-color: darken($c-dashboard-light, 5%); }
|
||||
&:focus { background-color: lighten($c-dashboard-light, 5%); }
|
||||
}
|
||||
|
||||
&.btn-link { color: @c_dashboard_light; }
|
||||
&.btn-link { color: $c-dashboard-light; }
|
||||
&, &:hover, &:focus { text-decoration: none; }
|
||||
}
|
||||
|
||||
.table {
|
||||
& > thead > tr > th { border-bottom: 1px solid #666; }
|
||||
> thead > tr > th { border-bottom: 1px solid #666; }
|
||||
|
||||
@media (max-width: @screen-md-max) {
|
||||
tr.heading-row { display: none; }
|
||||
tr:not(:first-child) { border-top: 1px solid #ddd; }
|
||||
@media (max-width: $screen-md-max) {
|
||||
tr {
|
||||
&.heading-row { display: none; }
|
||||
&:not(:first-child) { border-top: 1px solid #ddd; }
|
||||
}
|
||||
|
||||
& > tbody > tr > td {
|
||||
> tbody > tr > td {
|
||||
&:first-child { padding-top: 20px; }
|
||||
&:last-child { padding-bottom: 20px; }
|
||||
}
|
||||
|
||||
& > tbody > tr:first-child > td:first-child { padding-top: 0px; }
|
||||
& > tbody > tr:last-child > td:last-child { padding-bottom: 0px; }
|
||||
> tbody > tr {
|
||||
&:first-child > td:first-child { padding-top: 0px; }
|
||||
&:last-child > td:last-child { padding-bottom: 0px; }
|
||||
|
||||
& > tbody > tr > td {
|
||||
display: block;
|
||||
border-top: none;
|
||||
> td {
|
||||
display: block;
|
||||
border-top: 0;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
@media (min-width: @screen-lg-min) {
|
||||
& > tbody > tr > td { padding: 20px 8px; }
|
||||
& > tbody > tr:last-child > td { padding-bottom: 0px; }
|
||||
@media (min-width: $screen-lg-min) {
|
||||
> tbody > tr > td { padding: 20px 8px; }
|
||||
> tbody > tr:last-child > td { padding-bottom: 0px; }
|
||||
.mobile-heading { display: none; }
|
||||
}
|
||||
}
|
||||
|
|
@ -191,14 +202,14 @@ nav.navbar {
|
|||
a {
|
||||
display: block;
|
||||
padding: 10px 15px;
|
||||
color: @c_dashboard_dark;
|
||||
background-color: #fff;
|
||||
color: $c-dashboard-dark;
|
||||
transition: background-color 100ms, color 100ms;
|
||||
&:focus, &:hover { text-decoration: none; }
|
||||
|
||||
&:hover {
|
||||
color: @c_dashboard_light;
|
||||
background-color: @c_dashboard_dark;
|
||||
background-color: $c-dashboard-dark;
|
||||
color: $c-dashboard-light;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -221,8 +232,8 @@ nav.navbar {
|
|||
padding-bottom: 4px;
|
||||
|
||||
.sort-icon {
|
||||
display: inline-block;
|
||||
margin-right: 10px;
|
||||
display: inline-block;
|
||||
cursor: grab;
|
||||
cursor: -webkit-grabbing;
|
||||
}
|
||||
|
|
@ -234,14 +245,14 @@ nav.navbar {
|
|||
}
|
||||
|
||||
.button-column {
|
||||
text-align: right;
|
||||
padding-right: 0px;
|
||||
padding-left: 0px;
|
||||
text-align: right;
|
||||
|
||||
.btn {
|
||||
margin: 3px;
|
||||
min-width: 70px;
|
||||
height: 26px;
|
||||
margin: 3px;
|
||||
padding-top: 1px;
|
||||
padding-bottom: 2px;
|
||||
}
|
||||
|
|
@ -261,16 +272,16 @@ nav.navbar {
|
|||
}
|
||||
|
||||
input {
|
||||
margin-bottom: 15px;
|
||||
display: block;
|
||||
width: 100%;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.current-image {
|
||||
width: 125px;
|
||||
height: 125px;
|
||||
background-size: contain;
|
||||
background-position: left center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
}
|
||||
|
||||
|
|
@ -280,9 +291,9 @@ nav.navbar {
|
|||
.back-button, .submit-button {
|
||||
margin: 25px 15px 15px 15px;
|
||||
|
||||
@media (max-width: (@screen-sm - 1)) {
|
||||
@media (max-width: ($screen-sm - 1)) {
|
||||
float: none;
|
||||
width: calc(100% ~"-" 30px);
|
||||
width: calc(100% - 30px);
|
||||
&:first-child { margin: 25px 15px 5px 15px; }
|
||||
&:last-child { margin: 5px 15px 25px 15px; }
|
||||
}
|
||||
|
|
@ -290,16 +301,16 @@ nav.navbar {
|
|||
}
|
||||
|
||||
#loading-modal {
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
visibility: hidden;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: fade(lighten(@c_dashboard_light, 1%), 40%);
|
||||
transition: opacity 250ms;
|
||||
background-color: fade-out(lighten($c-dashboard-light, 1%), 0.6);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 1000;
|
||||
transition: opacity 250ms;
|
||||
|
||||
.spinner-container {
|
||||
position: absolute;
|
||||
|
|
@ -310,17 +321,17 @@ nav.navbar {
|
|||
}
|
||||
|
||||
.modal {
|
||||
display: table;
|
||||
z-index: 1000;
|
||||
position: fixed;
|
||||
top: 0px;
|
||||
left: 0px;
|
||||
visibility: hidden;
|
||||
display: table;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background-color: fade(lighten(@c_dashboard_light, 1%), 40%);
|
||||
transition: opacity 250ms;
|
||||
background-color: fade-out(lighten($c-dashboard-light, 1%), 0.6);
|
||||
opacity: 0;
|
||||
visibility: hidden;
|
||||
z-index: 1000;
|
||||
transition: opacity 250ms;
|
||||
|
||||
.modal-container {
|
||||
display: table-cell;
|
||||
|
|
@ -329,8 +340,8 @@ nav.navbar {
|
|||
.panel { margin: 0px; }
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
margin: 20px 15px;
|
||||
display: inline-block;
|
||||
}
|
||||
}
|
||||
|
||||
|
|
@ -346,8 +357,8 @@ nav.navbar {
|
|||
|
||||
.btn {
|
||||
position: absolute;
|
||||
right: 0px;
|
||||
top: 50%;
|
||||
right: 0px;
|
||||
transform: translateY(-50%);
|
||||
}
|
||||
}
|
||||
|
|
@ -1,14 +1,14 @@
|
|||
footer {
|
||||
width: 100%;
|
||||
height: 32px;
|
||||
line-height: 32px;
|
||||
padding-left: 10px;
|
||||
background-color: @c_base;
|
||||
color: @c_text_light;
|
||||
background-color: $c-base;
|
||||
color: $c-text-light;
|
||||
line-height: 32px;
|
||||
|
||||
&.sticky-footer {
|
||||
width: 100%;
|
||||
position: absolute;
|
||||
bottom: 0px;
|
||||
width: 100%;
|
||||
}
|
||||
}
|
||||
70
resources/assets/sass/elements/_nav.scss
Normal file
70
resources/assets/sass/elements/_nav.scss
Normal file
|
|
@ -0,0 +1,70 @@
|
|||
.navbar {
|
||||
z-index: 1;
|
||||
margin-bottom: 0px;
|
||||
height: $nav-height;
|
||||
padding-right: 10px;
|
||||
border: 0;
|
||||
border-radius: 0px;
|
||||
background-color: $c-base;
|
||||
@media (max-width: $grid-float-breakpoint-max) { height: $nav-height-mobile; }
|
||||
|
||||
.navbar-logo {
|
||||
position: absolute;
|
||||
top: 5px;
|
||||
left: 10px;
|
||||
width: ($nav-height - 10);
|
||||
height: ($nav-height - 10);
|
||||
background-image: url("/img/logo.png");
|
||||
background-position: center center;
|
||||
background-size: contain;
|
||||
background-repeat: no-repeat;
|
||||
cursor: pointer;
|
||||
|
||||
@media (max-width: $grid-float-breakpoint-max) {
|
||||
width: ($nav-height-mobile - 10);
|
||||
height: ($nav-height-mobile - 10);
|
||||
}
|
||||
}
|
||||
|
||||
#navbar-collapse {
|
||||
border: 0;
|
||||
box-shadow: none;
|
||||
|
||||
@media (max-width: $grid-float-breakpoint-max) {
|
||||
position: relative;
|
||||
bottom: 4px;
|
||||
width: 100vw;
|
||||
padding-bottom: 5px;
|
||||
background-color: $c-base;
|
||||
}
|
||||
|
||||
.nav li a {
|
||||
padding: 0px 15px;
|
||||
color: $c-text-light;
|
||||
font-size: 24px;
|
||||
line-height: $nav-height;
|
||||
text-transform: uppercase;
|
||||
text-decoration: none;
|
||||
user-select: none;
|
||||
|
||||
@media (max-width: $grid-float-breakpoint-max) {
|
||||
font-size: 18px;
|
||||
line-height: 40px;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
.navbar-toggle {
|
||||
position: relative;
|
||||
bottom: 2px;
|
||||
left: 20px;
|
||||
border: 0;
|
||||
&, &:hover, &:focus { background-color: transparent; }
|
||||
|
||||
.icon-bar {
|
||||
width: 27px;
|
||||
height: 4px;
|
||||
background-color: $c-text-light;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
|
@ -1,16 +1,16 @@
|
|||
#subscription-form {
|
||||
position: absolute;
|
||||
top: 50%;
|
||||
left: 0px;
|
||||
right: 0px;
|
||||
margin-left: auto;
|
||||
margin-right: auto;
|
||||
left: 0px;
|
||||
transform: translateY(-50%);
|
||||
margin-right: auto;
|
||||
margin-left: auto;
|
||||
width: 200px;
|
||||
|
||||
input {
|
||||
width: calc(100% ~"-" 10px);
|
||||
padding: 3px;
|
||||
margin: 5px;
|
||||
width: calc(100% - 10px);
|
||||
padding: 3px;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,19 +1,19 @@
|
|||
body.contact {
|
||||
.page-contact {
|
||||
#contact-form {
|
||||
@trans-speed: 100ms;
|
||||
$trans-speed: 100ms;
|
||||
margin-top: 35px;
|
||||
margin-bottom: 20px;
|
||||
|
||||
input, textarea {
|
||||
width: 100%;
|
||||
margin-bottom: 20px;
|
||||
width: 100%;
|
||||
padding: 5px 10px;
|
||||
font-size: 14px;
|
||||
border: 2px solid fade-out($c-text, 0.75);
|
||||
background-color: rgba(255, 255, 255, 0.8);
|
||||
border: 2px solid fade(@c_text, 25%);
|
||||
transition: border @trans-speed;
|
||||
&:focus { border: 2px solid fade(@c_base, 60%); }
|
||||
&.error { border: 2px solid @c_error; }
|
||||
font-size: 14px;
|
||||
transition: border $trans-speed;
|
||||
&:focus { border: 2px solid fade-out($c-base, 0.4); }
|
||||
&.error { border: 2px solid $c-error; }
|
||||
}
|
||||
|
||||
textarea {
|
||||
|
|
@ -22,30 +22,30 @@ body.contact {
|
|||
}
|
||||
|
||||
#submit {
|
||||
text-align: center;
|
||||
background-color: lighten($c-base, 5%);
|
||||
color: $c-text-light;
|
||||
font-weight: bold;
|
||||
color: @c_text_light;
|
||||
background-color: lighten(@c_base, 5%);
|
||||
transition: background-color @trans-speed;
|
||||
&:hover { background-color: @c_base; }
|
||||
&.disabled { background-color: @c_base; }
|
||||
text-align: center;
|
||||
transition: background-color $trans-speed;
|
||||
&:hover { background-color: $c-base; }
|
||||
&.disabled { background-color: $c-base; }
|
||||
}
|
||||
|
||||
#notification {
|
||||
margin: 0px auto 15px auto;
|
||||
padding: 5px 10px;
|
||||
color: @c_text_light;
|
||||
text-align: center;
|
||||
background-color: lighten($c-error, 15%);
|
||||
color: $c-text-light;
|
||||
font-size: 14px;
|
||||
text-align: center;
|
||||
opacity: 0;
|
||||
background-color: lighten(@c_error, 15%);
|
||||
transition: opacity @trans-speed;
|
||||
transition: opacity $trans-speed;
|
||||
span { font-weight: bold; }
|
||||
&.visible { opacity: 1; }
|
||||
|
||||
&.success {
|
||||
background-color: transparent;
|
||||
color: @c_text;
|
||||
color: $c-text;
|
||||
font-weight: bold;
|
||||
}
|
||||
}
|
||||
|
|
@ -1,7 +1,7 @@
|
|||
<nav class="navbar navbar-default navbar-fixed-top">
|
||||
<div class="container-fluid">
|
||||
<div class="navbar-header">
|
||||
<button type="button" id="navbar-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
|
||||
<button type="button" id="navbar-toggle" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar-collapse" aria-expanded="false" aria-controls="navbar">
|
||||
<span class="sr-only">Toggle Navigation</span>
|
||||
<span class="icon-bar"></span>
|
||||
<span class="icon-bar"></span>
|
||||
|
|
@ -11,7 +11,7 @@
|
|||
<a class="navbar-logo" href="/"></a>
|
||||
</div>
|
||||
|
||||
<div id="navbar" class="navbar-collapse collapse">
|
||||
<div id="navbar-collapse" class="navbar-collapse collapse">
|
||||
<ul class="nav navbar-nav navbar-right">
|
||||
<li class="navlink"><a href="/" title="Home">Home</a></li>
|
||||
<li class="navlink"><a href="/contact" title="Contact">Contact</a></li>
|
||||
|
|
|
|||
|
|
@ -12,9 +12,13 @@
|
|||
@endif
|
||||
</head>
|
||||
|
||||
<body class="{{ Request::path() == '/' ? 'index' : preg_replace('/\/.*/', '', Request::path()) }}">
|
||||
<body class="page-{{ Request::path() == '/' ? 'index' : preg_replace('/\/.*/', '', Request::path()) }}">
|
||||
@yield('page-top')
|
||||
<div id="page-content">@yield('content')</div>
|
||||
|
||||
<div id="page-content">
|
||||
@yield('content')
|
||||
</div>
|
||||
|
||||
@yield('page-bottom')
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
Loading…
Reference in a new issue