Mixins
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:
parent
6a75f79801
commit
03f19a7da1
@ -4,6 +4,7 @@ module.exports = function (postcss) {
|
|||||||
return postcss([
|
return postcss([
|
||||||
require('postcss-at-rules-variables')(),
|
require('postcss-at-rules-variables')(),
|
||||||
require('postcss-modules-values'),
|
require('postcss-modules-values'),
|
||||||
|
require("postcss-import"),
|
||||||
require('postcss-mixins')(),
|
require('postcss-mixins')(),
|
||||||
require('postcss-for'),
|
require('postcss-for'),
|
||||||
require('postcss-cssnext')(),
|
require('postcss-cssnext')(),
|
||||||
|
@ -49,6 +49,7 @@
|
|||||||
"postcss-at-rules-variables": "0.0.25",
|
"postcss-at-rules-variables": "0.0.25",
|
||||||
"postcss-cssnext": "^2.8.0",
|
"postcss-cssnext": "^2.8.0",
|
||||||
"postcss-for": "^2.1.1",
|
"postcss-for": "^2.1.1",
|
||||||
|
"postcss-import": "^8.1.0",
|
||||||
"postcss-loader": "^1.0.0",
|
"postcss-loader": "^1.0.0",
|
||||||
"postcss-mixins": "^5.4.0",
|
"postcss-mixins": "^5.4.0",
|
||||||
"postcss-modules-values": "^1.2.2",
|
"postcss-modules-values": "^1.2.2",
|
||||||
|
@ -5,7 +5,7 @@ const styles = require('./style.css');
|
|||||||
const Radio = ({
|
const Radio = ({
|
||||||
name,
|
name,
|
||||||
value,
|
value,
|
||||||
children,
|
label,
|
||||||
checked,
|
checked,
|
||||||
disabled = false,
|
disabled = false,
|
||||||
className,
|
className,
|
||||||
@ -30,14 +30,14 @@ const Radio = ({
|
|||||||
type='radio'
|
type='radio'
|
||||||
value={value}
|
value={value}
|
||||||
/>
|
/>
|
||||||
<span>{children}</span>
|
<span>{label}</span>
|
||||||
</label>
|
</label>
|
||||||
);
|
);
|
||||||
};
|
};
|
||||||
|
|
||||||
Radio.propTypes = {
|
Radio.propTypes = {
|
||||||
checked: React.PropTypes.bool,
|
checked: React.PropTypes.bool,
|
||||||
children: React.PropTypes.node,
|
label: React.PropTypes.node,
|
||||||
className: React.PropTypes.string,
|
className: React.PropTypes.string,
|
||||||
disabled: React.PropTypes.bool,
|
disabled: React.PropTypes.bool,
|
||||||
id: React.PropTypes.string,
|
id: React.PropTypes.string,
|
||||||
|
@ -1,3 +1,5 @@
|
|||||||
|
@import '../../lib/mixins.css';
|
||||||
|
|
||||||
:root {
|
:root {
|
||||||
--radio-radius: 20px;
|
--radio-radius: 20px;
|
||||||
--radio-border-size: calc( var(--radio-radius) / 4 );
|
--radio-border-size: calc( var(--radio-radius) / 4 );
|
||||||
@ -15,19 +17,11 @@
|
|||||||
& span {
|
& span {
|
||||||
margin-left: 30px;
|
margin-left: 30px;
|
||||||
margin-right: 20px;
|
margin-right: 20px;
|
||||||
position: relative;
|
|
||||||
|
|
||||||
&:before {
|
@add-mixin pseduo-element before, var(--radio-radius), var(--radio-radius), -1px, auto, auto, -30px {
|
||||||
content: '';
|
border: var(--radio-border-size) solid white;
|
||||||
border : var(--radio-border-size) solid white;
|
|
||||||
border-radius: 50%;
|
border-radius: 50%;
|
||||||
box-shadow: 0 0 0 1px var(--border-color);
|
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;
|
display: none;
|
||||||
visibility: hidden;
|
visibility: hidden;
|
||||||
|
|
||||||
&:checked {
|
&:checked ~ span:before {
|
||||||
& ~ span:before {
|
background: var(--dot-color);
|
||||||
background: var(--dot-color);
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
22
ui/src/lib/mixins.css
Normal file
22
ui/src/lib/mixins.css
Normal 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;
|
||||||
|
}
|
||||||
|
}
|
@ -12,6 +12,7 @@ const plugins = {
|
|||||||
options: {
|
options: {
|
||||||
postcss: {
|
postcss: {
|
||||||
plugins: [
|
plugins: [
|
||||||
|
require("postcss-import")(),
|
||||||
require('postcss-at-rules-variables')(),
|
require('postcss-at-rules-variables')(),
|
||||||
require('postcss-modules-values'),
|
require('postcss-modules-values'),
|
||||||
require('postcss-mixins')(),
|
require('postcss-mixins')(),
|
||||||
|
692
ui/yarn.lock
692
ui/yarn.lock
File diff suppressed because it is too large
Load Diff
Loading…
Reference in New Issue
Block a user