Gutter improvements + Material colors
This commit is contained in:
Tony Air
parent
58bf6f924a
commit
9fd8093351
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
File diff suppressed because one or more lines are too long
|
|
@ -84,6 +84,7 @@
|
|||
"file-loader": "^1.1.5",
|
||||
"html-webpack-plugin": "^4.0.0-beta.8",
|
||||
"lost": "^8.3.1",
|
||||
"material-design-color": "^2.3.2",
|
||||
"node-sass": "^4.12.0",
|
||||
"object-assign": "^4.1.1",
|
||||
"optimize-css-assets-webpack-plugin": "^5.0.3",
|
||||
|
|
|
|||
|
|
@ -0,0 +1,66 @@
|
|||
// Google material colors Ref: https://material.io/design/color/
|
||||
@import "~material-design-color/material-color.scss";
|
||||
|
||||
// Bootstrap Color system adapter
|
||||
|
||||
$white: $clr-white !default;
|
||||
$gray-100: map-get($clr-grey-list, "100") !default;
|
||||
$gray-200: map-get($clr-grey-list, "200") !default;
|
||||
$gray-300: map-get($clr-grey-list, "300") !default;
|
||||
$gray-400: map-get($clr-grey-list, "400") !default;
|
||||
$gray-500: map-get($clr-grey-list, "500") !default;
|
||||
$gray-600: map-get($clr-grey-list, "600") !default;
|
||||
$gray-700: map-get($clr-grey-list, "700") !default;
|
||||
$gray-800: map-get($clr-grey-list, "800") !default;
|
||||
$gray-900: map-get($clr-grey-list, "900") !default;
|
||||
$black: $clr-black !default;
|
||||
|
||||
$grays: () !default;
|
||||
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$grays: map-merge(("100": $gray-100, "200": $gray-200, "300": $gray-300, "400": $gray-400, "500": $gray-500, "600": $gray-600, "700": $gray-700, "800": $gray-800, "900": $gray-900), $grays) !default;
|
||||
|
||||
$blue: $clr-blue !default;
|
||||
$indigo: $clr-indigo !default;
|
||||
$purple: $clr-purple !default;
|
||||
$pink: $clr-pink !default;
|
||||
$red: $clr-red !default;
|
||||
$orange: $clr-orange !default;
|
||||
$yellow: $clr-yellow !default;
|
||||
$green: $clr-green !default;
|
||||
$teal: $clr-teal !default;
|
||||
$cyan: $clr-cyan !default;
|
||||
|
||||
$colors: () !default;
|
||||
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$colors: map-merge(("blue": $blue, "indigo": $indigo, "purple": $purple, "pink": $pink, "red": $red, "orange": $orange, "yellow": $yellow, "green": $green, "teal": $teal, "cyan": $cyan, "white": $white, "gray": $gray-600, "gray-dark": $gray-800), $colors) !default;
|
||||
|
||||
$primary: $blue !default;
|
||||
$secondary: $gray-600 !default;
|
||||
$success: $green !default;
|
||||
$info: $cyan !default;
|
||||
$warning: $yellow !default;
|
||||
$danger: $red !default;
|
||||
$light: $gray-100 !default;
|
||||
$dark: $gray-900 !default;
|
||||
|
||||
$theme-colors: () !default;
|
||||
|
||||
// stylelint-disable-next-line scss/dollar-variable-default
|
||||
$theme-colors: map-merge(("primary": $primary, "secondary": $secondary, "success": $success, "info": $info, "warning": $warning, "danger": $danger, "light": $light, "dark": $dark), $theme-colors) !default;
|
||||
|
||||
// UI color variables
|
||||
|
||||
//$primary: $dark !default;
|
||||
$bg-alt: $yellow !default;
|
||||
|
||||
$body-color: $gray-900 !default;
|
||||
$navbar-light-active-color: $blue !default;
|
||||
|
||||
$navbar-dark-hover-background: $dark !default;
|
||||
$navbar-dark-active-background: $dark !default;
|
||||
$navbar-dark-show-color: $blue !default;
|
||||
$navbar-dark-show-background: $dark !default;
|
||||
|
||||
$dropdown-border-color: $white !default;
|
||||
|
|
@ -14,7 +14,7 @@ h1.page-header {
|
|||
// add top/bottom paddings for basic elements
|
||||
.page-content > .element {
|
||||
position: relative;
|
||||
padding: ($grid-gutter-height / 2) 0;
|
||||
padding: $grid-gutter-element-height 0;
|
||||
|
||||
// remove paddings of the slideshow
|
||||
&.dynamic__elements__image__elements__elementimage,
|
||||
|
|
@ -34,5 +34,5 @@ h1.page-header {
|
|||
// add top/bottom paddings for basic Include/Content.ss forms
|
||||
.page-content > .form-container {
|
||||
position: relative;
|
||||
padding: ($grid-gutter-height / 2) 0;
|
||||
padding: $grid-gutter-element-height 0;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -1,10 +0,0 @@
|
|||
$grid-gutter-xs-width: $grid-gutter-width / 2 !default;
|
||||
$grid-gutter-height: 8rem !default;
|
||||
|
||||
$blue: #016cb1 !default;
|
||||
$dark: #000 !default;
|
||||
|
||||
$navbar-dark-hover-background: $dark !default;
|
||||
$navbar-dark-active-background: $dark !default;
|
||||
$navbar-dark-show-color: $blue !default;
|
||||
$navbar-dark-show-background: $dark !default;
|
||||
|
|
@ -1,38 +1,17 @@
|
|||
/*
|
||||
* Your custom variables
|
||||
*/
|
||||
@import "_colors";
|
||||
|
||||
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1390px, xxxl: 1590px);
|
||||
$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1330px, xxxl: 1560px);
|
||||
$grid-breakpoints: (xs: 0, sm: 576px, md: 768px, lg: 992px, xl: 1200px, xxl: 1390px, xxxl: 1590px) !default;
|
||||
$container-max-widths: (sm: 540px, md: 720px, lg: 960px, xl: 1140px, xxl: 1330px, xxxl: 1560px) !default;
|
||||
|
||||
$font-family-base: "Lato", sans-serif;
|
||||
$font-family-base: "Lato", sans-serif !default;
|
||||
|
||||
$grid-gutter-width: 30px;
|
||||
$grid-gutter-xs-width: $grid-gutter-width / 2;
|
||||
$grid-gutter-height: 8rem;
|
||||
$grid-gutter-width: 2rem !default;
|
||||
$grid-gutter-height: 2rem !default;
|
||||
$grid-gutter-xs-width: $grid-gutter-width / 2 !default;
|
||||
$grid-gutter-element-height: $grid-gutter-height * 2 !default;
|
||||
|
||||
$gray-900: #212529;
|
||||
$white: #fff;
|
||||
$blue: #016cb1;
|
||||
$yellow: #ecac02;
|
||||
|
||||
$dark: #000;
|
||||
|
||||
//$primary: $dark;
|
||||
$bg-alt: $yellow;
|
||||
|
||||
$body-color: $gray-900;
|
||||
$navbar-light-active-color: $blue;
|
||||
|
||||
$navbar-dark-hover-background: $dark;
|
||||
$navbar-dark-active-background: $dark;
|
||||
$navbar-dark-show-color: $blue;
|
||||
$navbar-dark-show-background: $dark;
|
||||
|
||||
$dropdown-border-color: $white;
|
||||
|
||||
$footer-size: 18.5rem;
|
||||
$footer-bar-size: 2.5rem;
|
||||
$footer-size: 18.5rem !default;
|
||||
$footer-bar-size: 2.5rem !default;
|
||||
|
||||
/*
|
||||
* bootstrap includes
|
||||
|
|
@ -40,13 +19,12 @@ $footer-bar-size: 2.5rem;
|
|||
*/
|
||||
|
||||
// bootstrap minify bugfix:
|
||||
$navbar-dark-toggler-icon-bg: none;
|
||||
$navbar-light-toggler-icon-bg: none;
|
||||
$navbar-dark-toggler-icon-bg: none !default;
|
||||
$navbar-light-toggler-icon-bg: none !default;
|
||||
|
||||
// IE > 9
|
||||
$enable-flex: true;
|
||||
$enable-flex: true !default;
|
||||
|
||||
@import "~bootstrap/scss/functions";
|
||||
@import "~bootstrap/scss/variables";
|
||||
@import "~bootstrap/scss/mixins";
|
||||
@import "_components/_variables";
|
||||
|
|
|
|||
|
|
@ -1,3 +1,5 @@
|
|||
const COMPRESS = false;
|
||||
|
||||
const HtmlWebpackPlugin = require('html-webpack-plugin');
|
||||
const webpack = require('webpack');
|
||||
const path = require('path');
|
||||
|
|
@ -8,13 +10,48 @@ const ExtractTextPlugin = require('extract-text-webpack-plugin');
|
|||
const TerserPlugin = require('terser-webpack-plugin');
|
||||
const OptimizeCssAssetsPlugin = require('optimize-css-assets-webpack-plugin');
|
||||
|
||||
const plugins = [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
'NODE_ENV': JSON.stringify('production')
|
||||
}
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: COMPRESS,
|
||||
debug: false
|
||||
}),
|
||||
new ExtractTextPlugin({
|
||||
filename: 'css/[name].css',
|
||||
allChunks: true
|
||||
}),
|
||||
/**/
|
||||
new HtmlWebpackPlugin({
|
||||
template: './src/index.html'
|
||||
}),
|
||||
];
|
||||
|
||||
if (COMPRESS) {
|
||||
plugins.push(new OptimizeCssAssetsPlugin({
|
||||
//assetNameRegExp: /\.optimize\.css$/g,
|
||||
cssProcessor: require('cssnano'),
|
||||
cssProcessorPluginOptions: {
|
||||
preset: ['default', {
|
||||
discardComments: {
|
||||
removeAll: true
|
||||
}
|
||||
}],
|
||||
},
|
||||
canPrint: true
|
||||
}));
|
||||
}
|
||||
|
||||
module.exports = {
|
||||
entry: './src/js/app.js',
|
||||
output: {
|
||||
path: path.resolve(__dirname, 'dist'),
|
||||
filename: 'js/app.js'
|
||||
},
|
||||
devtool: 'source-map',
|
||||
devtool: (COMPRESS ? '' : 'source-map'),
|
||||
externals: {
|
||||
'jquery': 'jQuery',
|
||||
},
|
||||
|
|
@ -29,7 +66,7 @@ module.exports = {
|
|||
minimizer: [
|
||||
new TerserPlugin({
|
||||
parallel: true,
|
||||
sourceMap: false,
|
||||
sourceMap: !COMPRESS,
|
||||
terserOptions: {
|
||||
parse: {
|
||||
ecma: 8,
|
||||
|
|
@ -79,12 +116,12 @@ module.exports = {
|
|||
use: [{
|
||||
loader: 'css-loader',
|
||||
options: {
|
||||
sourceMap: false
|
||||
sourceMap: !COMPRESS
|
||||
}
|
||||
}, {
|
||||
loader: 'postcss-loader',
|
||||
options: {
|
||||
sourceMap: false,
|
||||
sourceMap: !COMPRESS,
|
||||
plugins: [
|
||||
autoprefixer({
|
||||
// If we want to use the same browser list for more tools
|
||||
|
|
@ -106,7 +143,7 @@ module.exports = {
|
|||
}, {
|
||||
loader: 'sass-loader',
|
||||
options: {
|
||||
sourceMap: false
|
||||
sourceMap: !COMPRESS
|
||||
}
|
||||
}, ]
|
||||
})
|
||||
|
|
@ -150,36 +187,7 @@ module.exports = {
|
|||
'jQuery': require.resolve('jquery'),
|
||||
},
|
||||
},
|
||||
plugins: [
|
||||
new webpack.DefinePlugin({
|
||||
'process.env': {
|
||||
'NODE_ENV': JSON.stringify('production')
|
||||
}
|
||||
}),
|
||||
new webpack.LoaderOptionsPlugin({
|
||||
minimize: true,
|
||||
debug: false
|
||||
}),
|
||||
new ExtractTextPlugin({
|
||||
filename: 'css/[name].css',
|
||||
allChunks: true
|
||||
}),
|
||||
new OptimizeCssAssetsPlugin({
|
||||
//assetNameRegExp: /\.optimize\.css$/g,
|
||||
cssProcessor: require('cssnano'),
|
||||
cssProcessorPluginOptions: {
|
||||
preset: ['default', {
|
||||
discardComments: {
|
||||
removeAll: true
|
||||
}
|
||||
}],
|
||||
},
|
||||
canPrint: true
|
||||
}),
|
||||
new HtmlWebpackPlugin({
|
||||
template: './src/index.html'
|
||||
}),
|
||||
],
|
||||
plugins: plugins,
|
||||
|
||||
devServer: {
|
||||
host: '127.0.0.1',
|
||||
|
|
|
|||
Loading…
Reference in New Issue