Creating functionality and implementing Mixins

- Adding postcss-import module
- Creating `Lib` directory for mixins, functions etc
- Creating pseudo element mixin
- Implementing pseduo element mixin on radio buttons
- Adding in postcss-debug js config file
This commit is contained in:
Alex Windett 2016-10-27 14:54:11 +01:00
parent 6a75f79801
commit 03f19a7da1
7 changed files with 704 additions and 39 deletions

View File

@ -4,6 +4,7 @@ module.exports = function (postcss) {
return postcss([
require('postcss-at-rules-variables')(),
require('postcss-modules-values'),
require("postcss-import"),
require('postcss-mixins')(),
require('postcss-for'),
require('postcss-cssnext')(),

View File

@ -49,6 +49,7 @@
"postcss-at-rules-variables": "0.0.25",
"postcss-cssnext": "^2.8.0",
"postcss-for": "^2.1.1",
"postcss-import": "^8.1.0",
"postcss-loader": "^1.0.0",
"postcss-mixins": "^5.4.0",
"postcss-modules-values": "^1.2.2",

View File

@ -5,7 +5,7 @@ const styles = require('./style.css');
const Radio = ({
name,
value,
children,
label,
checked,
disabled = false,
className,
@ -30,14 +30,14 @@ const Radio = ({
type='radio'
value={value}
/>
<span>{children}</span>
<span>{label}</span>
</label>
);
};
Radio.propTypes = {
checked: React.PropTypes.bool,
children: React.PropTypes.node,
label: React.PropTypes.node,
className: React.PropTypes.string,
disabled: React.PropTypes.bool,
id: React.PropTypes.string,

View File

@ -1,3 +1,5 @@
@import '../../lib/mixins.css';
:root {
--radio-radius: 20px;
--radio-border-size: calc( var(--radio-radius) / 4 );
@ -15,19 +17,11 @@
& span {
margin-left: 30px;
margin-right: 20px;
position: relative;
&:before {
content: '';
border : var(--radio-border-size) solid white;
@add-mixin pseduo-element before, var(--radio-radius), var(--radio-radius), -1px, auto, auto, -30px {
border: var(--radio-border-size) solid white;
border-radius: 50%;
box-shadow: 0 0 0 1px var(--border-color);
display: inline-block;
height: var(--radio-radius);
left: -30px;
position: absolute;
top: -1px;
width: var(--radio-radius);
}
}
@ -35,10 +29,8 @@
display: none;
visibility: hidden;
&:checked {
& ~ span:before {
&:checked ~ span:before {
background: var(--dot-color);
}
}
}
}

22
ui/src/lib/mixins.css Normal file
View File

@ -0,0 +1,22 @@
@define-mixin pseduo-element $type, $width:auto, $height:auto, $top:auto, $right:auto, $bottom:auto, $left:auto {
/**
TODO:
- Can't apply absolute positoning attributes - errors out with 'Missed semicolon' ????
*/
position: relative;
&::$(type) {
bottom: $bottom;
content: '';
display: inline-block;
height: $height;
left: $left;
position: absolute;
right: $right;
top: $top;
width: $width;
@mixin-content;
}
}

View File

@ -12,6 +12,7 @@ const plugins = {
options: {
postcss: {
plugins: [
require("postcss-import")(),
require('postcss-at-rules-variables')(),
require('postcss-modules-values'),
require('postcss-mixins')(),

File diff suppressed because it is too large Load Diff