From 96599d3a0938647e9281a147b8fc4ee25ea57235 Mon Sep 17 00:00:00 2001 From: Javi Velasco Date: Sat, 4 Jun 2016 16:36:17 +0200 Subject: [PATCH] Move some mixins --- components/_mixins.scss | 42 ++++++++++------------------------ components/button/_mixins.scss | 17 ++++++++++++++ components/button/theme.scss | 1 + lib/_mixins.scss | 42 ++++++++++------------------------ lib/button/_mixins.scss | 17 ++++++++++++++ lib/button/theme.scss | 1 + server.js | 16 ++++++------- 7 files changed, 68 insertions(+), 68 deletions(-) create mode 100644 components/button/_mixins.scss create mode 100644 lib/button/_mixins.scss diff --git a/components/_mixins.scss b/components/_mixins.scss index a4d9dfeb..f6159734 100644 --- a/components/_mixins.scss +++ b/components/_mixins.scss @@ -197,38 +197,38 @@ @mixin shadow-2dp() { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), - 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), - 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); + 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); } @mixin shadow-3dp() { box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), - 0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), - 0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); + 0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); } @mixin shadow-4dp() { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), - 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), - 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity); + 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), + 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity); } @mixin shadow-6dp() { box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), - 0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), - 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity); + 0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), + 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity); } @mixin shadow-8dp() { box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), - 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity), - 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity); + 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity), + 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity); } @mixin shadow-16dp() { box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), - 0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity), - 0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity); + 0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity), + 0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity); } //-- Animations @@ -258,21 +258,3 @@ height: 0; } } - -@mixin btn-colors($name, $color, $background, $hover) { - .#{$name}:not([disabled]) { - &.raised, &.floating { - color: $color; - background: $background; - } - &.flat, &.toggle { - color: $background; - &:focus:not(:active) { - background: $hover; - } - } - &.flat:hover { - background: $hover; - } - } -} diff --git a/components/button/_mixins.scss b/components/button/_mixins.scss new file mode 100644 index 00000000..305be037 --- /dev/null +++ b/components/button/_mixins.scss @@ -0,0 +1,17 @@ +@mixin btn-colors($name, $color, $background, $hover) { + .#{$name}:not([disabled]) { + &.raised, &.floating { + color: $color; + background: $background; + } + &.flat, &.toggle { + color: $background; + &:focus:not(:active) { + background: $hover; + } + } + &.flat:hover { + background: $hover; + } + } +} diff --git a/components/button/theme.scss b/components/button/theme.scss index 757e2056..ee875bd4 100644 --- a/components/button/theme.scss +++ b/components/button/theme.scss @@ -1,5 +1,6 @@ @import "../base"; @import "./config"; +@import "./mixins"; .button { position: relative; diff --git a/lib/_mixins.scss b/lib/_mixins.scss index a4d9dfeb..f6159734 100644 --- a/lib/_mixins.scss +++ b/lib/_mixins.scss @@ -197,38 +197,38 @@ @mixin shadow-2dp() { box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), - 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), - 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); + 0 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); } @mixin shadow-3dp() { box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), - 0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), - 0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); + 0 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity), + 0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); } @mixin shadow-4dp() { box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), - 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), - 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity); + 0 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), + 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity); } @mixin shadow-6dp() { box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), - 0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), - 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity); + 0 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity), + 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity); } @mixin shadow-8dp() { box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), - 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity), - 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity); + 0 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity), + 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity); } @mixin shadow-16dp() { box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), - 0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity), - 0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity); + 0 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity), + 0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity); } //-- Animations @@ -258,21 +258,3 @@ height: 0; } } - -@mixin btn-colors($name, $color, $background, $hover) { - .#{$name}:not([disabled]) { - &.raised, &.floating { - color: $color; - background: $background; - } - &.flat, &.toggle { - color: $background; - &:focus:not(:active) { - background: $hover; - } - } - &.flat:hover { - background: $hover; - } - } -} diff --git a/lib/button/_mixins.scss b/lib/button/_mixins.scss new file mode 100644 index 00000000..305be037 --- /dev/null +++ b/lib/button/_mixins.scss @@ -0,0 +1,17 @@ +@mixin btn-colors($name, $color, $background, $hover) { + .#{$name}:not([disabled]) { + &.raised, &.floating { + color: $color; + background: $background; + } + &.flat, &.toggle { + color: $background; + &:focus:not(:active) { + background: $hover; + } + } + &.flat:hover { + background: $hover; + } + } +} diff --git a/lib/button/theme.scss b/lib/button/theme.scss index 757e2056..ee875bd4 100644 --- a/lib/button/theme.scss +++ b/lib/button/theme.scss @@ -1,5 +1,6 @@ @import "../base"; @import "./config"; +@import "./mixins"; .button { position: relative; diff --git a/server.js b/server.js index a0942f30..e52c1bbc 100644 --- a/server.js +++ b/server.js @@ -7,8 +7,8 @@ const app = express(); const compiler = webpack(config); app.use(require('webpack-dev-middleware')(compiler, { - noInfo: true, - publicPath: config.output.publicPath, + noInfo: true, + publicPath: config.output.publicPath, stats: { colors: true } @@ -17,14 +17,14 @@ app.use(require('webpack-dev-middleware')(compiler, { app.use(require('webpack-hot-middleware')(compiler)); app.get('*', function (req, res) { - res.sendFile(path.join(__dirname, './spec/index.html')); + res.sendFile(path.join(__dirname, './spec/index.html')); }); app.listen(8080, '0.0.0.0', function (err) { - if (err) { - console.log(err); - return; - } + if (err) { + console.log(err); + return; + } - console.log('Listening at http://0.0.0.0:8080'); + console.log('Listening at http://0.0.0.0:8080'); });