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([
|
||||
require('postcss-at-rules-variables')(),
|
||||
require('postcss-modules-values'),
|
||||
require("postcss-import"),
|
||||
require('postcss-mixins')(),
|
||||
require('postcss-for'),
|
||||
require('postcss-cssnext')(),
|
||||
|
@ -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",
|
||||
|
@ -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,
|
||||
|
@ -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: '';
|
||||
@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
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: {
|
||||
postcss: {
|
||||
plugins: [
|
||||
require("postcss-import")(),
|
||||
require('postcss-at-rules-variables')(),
|
||||
require('postcss-modules-values'),
|
||||
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