Spearhead/joyent-portal
1
0
Fork 0
Code Issues Pull Requests Releases Wiki Activity

Radio Input - Refactoring CSS

Browse Source
This commit is contained in:
Alex Windett 2016-10-27 10:12:04 +01:00
parent 3a983b10a5
commit e76ca342c6
3 changed files with 14 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

11
ui/.postcss.js Normal file
View File

@ -0,0 +1,11 @@
var calc = require('postcss-calc');
module.exports = function (postcss) {
return postcss([
require('postcss-at-rules-variables')(),
require('postcss-modules-values'),
require('postcss-mixins')(),
require('postcss-for'),
require('postcss-cssnext')(),
])
}

9
ui/src/components/radio/style.css
View File

@ -1,5 +1,6 @@
:root { :root {
--radio-radius: 20px; --radio-radius: 20px;
--radio-border-size: calc( var(--radio-radius) / 4 );
--dot-color: #646464; --dot-color: #646464;
--border-color: #cfd1d1; --border-color: #cfd1d1;
} }
@ -18,7 +19,7 @@
&:before { &:before {
content: ''; content: '';
border : calc( var(--radio-radius) / 4 ) 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; display: inline-block;
@ -38,12 +39,6 @@
&:checked { &:checked {
& ~ span:before { & ~ span:before {
background: var(--dot-color); background: var(--dot-color);
border : calc( var(--radio-radius) / 4 ) solid white;
border-radius: 50%;
box-shadow: 0 0 0 1px var(--border-color);
height: var(--radio-radius);
position: absolute;
width: var(--radio-radius);
} }
} }
} }