vitalif
/
react-toolbox
1
0
Fork 0
Code Issues Pull Requests Releases 12 Wiki Activity

Move some mixins

old
Javi Velasco 2016-06-04 16:36:17 +02:00
parent fbca206e49
commit 96599d3a09
7 changed files with 68 additions and 68 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

42
components/_mixins.scss
View File

@ -197,38 +197,38 @@
@mixin shadow-2dp() { @mixin shadow-2dp() {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 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 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
} }
@mixin shadow-3dp() { @mixin shadow-3dp() {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 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 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); 0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
} }
@mixin shadow-4dp() { @mixin shadow-4dp() {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 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 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity); 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
} }
@mixin shadow-6dp() { @mixin shadow-6dp() {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 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 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity); 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
} }
@mixin shadow-8dp() { @mixin shadow-8dp() {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 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 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity); 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
} }
@mixin shadow-16dp() { @mixin shadow-16dp() {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 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 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity); 0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
} }
//-- Animations //-- Animations
@ -258,21 +258,3 @@
height: 0; 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;
}
}
}

17
components/button/_mixins.scss Normal file
View File

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

1
components/button/theme.scss
View File

@ -1,5 +1,6 @@
@import "../base"; @import "../base";
@import "./config"; @import "./config";
@import "./mixins";
.button { .button {
position: relative; position: relative;

42
lib/_mixins.scss
View File

@ -197,38 +197,38 @@
@mixin shadow-2dp() { @mixin shadow-2dp() {
box-shadow: 0 2px 2px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 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 3px 1px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); 0 1px 5px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
} }
@mixin shadow-3dp() { @mixin shadow-3dp() {
box-shadow: 0 3px 4px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 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 3px 3px -2px rgba(0, 0, 0, $shadow-key-umbra-opacity),
0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity); 0 1px 8px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity);
} }
@mixin shadow-4dp() { @mixin shadow-4dp() {
box-shadow: 0 4px 5px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 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 1px 10px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity); 0 2px 4px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
} }
@mixin shadow-6dp() { @mixin shadow-6dp() {
box-shadow: 0 6px 10px 0 rgba(0, 0, 0, $shadow-key-penumbra-opacity), 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 1px 18px 0 rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity); 0 3px 5px -1px rgba(0, 0, 0, $shadow-key-umbra-opacity);
} }
@mixin shadow-8dp() { @mixin shadow-8dp() {
box-shadow: 0 8px 10px 1px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 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 3px 14px 2px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity); 0 5px 5px -3px rgba(0, 0, 0, $shadow-key-umbra-opacity);
} }
@mixin shadow-16dp() { @mixin shadow-16dp() {
box-shadow: 0 16px 24px 2px rgba(0, 0, 0, $shadow-key-penumbra-opacity), 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 6px 30px 5px rgba(0, 0, 0, $shadow-ambient-shadow-opacity),
0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity); 0 8px 10px -5px rgba(0, 0, 0, $shadow-key-umbra-opacity);
} }
//-- Animations //-- Animations
@ -258,21 +258,3 @@
height: 0; 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;
}
}
}

17
lib/button/_mixins.scss Normal file
View File

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

1
lib/button/theme.scss
View File

@ -1,5 +1,6 @@
@import "../base"; @import "../base";
@import "./config"; @import "./config";
@import "./mixins";
.button { .button {
position: relative; position: relative;

16
server.js
View File

@ -7,8 +7,8 @@ const app = express();
const compiler = webpack(config); const compiler = webpack(config);
app.use(require('webpack-dev-middleware')(compiler, { app.use(require('webpack-dev-middleware')(compiler, {
noInfo: true, noInfo: true,
publicPath: config.output.publicPath, publicPath: config.output.publicPath,
stats: { stats: {
colors: true colors: true
} }
@ -17,14 +17,14 @@ app.use(require('webpack-dev-middleware')(compiler, {
app.use(require('webpack-hot-middleware')(compiler)); app.use(require('webpack-hot-middleware')(compiler));
app.get('*', function (req, res) { 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) { app.listen(8080, '0.0.0.0', function (err) {
if (err) { if (err) {
console.log(err); console.log(err);
return; return;
} }
console.log('Listening at http://0.0.0.0:8080'); console.log('Listening at http://0.0.0.0:8080');
}); });