Convert less to scss and make the required changes to support that

This commit is contained in:
Kevin MacMartin 2016-08-16 19:33:02 -04:00
parent eeeac52dbe
commit 5091f95475
19 changed files with 316 additions and 302 deletions

View file

@ -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"
}
}

View file

@ -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",

View file

@ -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"
}
}

Binary file not shown.

Binary file not shown.

View file

@ -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;
}

View file

@ -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;
}
}
}

View file

@ -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; }

View file

@ -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;

View 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;
}

View 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;

View 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; }
}

View file

@ -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%);
}
}

View file

@ -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%;
}
}

View 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;
}
}
}

View file

@ -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;
}
}

View file

@ -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;
}
}

View file

@ -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>

View file

@ -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>