1
0
mirror of https://github.com/yldio/copilot.git synced 2024-11-10 21:30:06 +02:00

updating constants and updating components to use css constants

This commit is contained in:
Alex Windett 2016-10-31 12:08:05 +00:00
parent fcd55d3c44
commit 1b46c59ef7
5 changed files with 58 additions and 15 deletions

View File

@ -1,19 +1,30 @@
~boxes: "../../shared/constants.js";
~colors: "../../shared/constants.js";
:root {
--border-checked: ~boxes.border.checked;
--border-unchecked: ~boxes.border.unchecked;
--border-radius: ~boxes.borderRadius;
--bottom-shaddow: ~boxes.bottomShaddow;
}
.group {
& .item {
cursor: pointer;
background: #FFFFFF;
border: 1px solid #D8D8D8;
box-shadow: 0px 2px 0px 0px rgba(0,0,0,0.05);
border-radius: 4px;
margin-bottom: 15px;
padding: 25px;
border: var(--border-unchecked);
box-shadow: var(--bottom-shaddow);
border-radius: 4pxvar(--border-radius);
margin-bottom: remCalc(15);
padding: remCalc(25);
&:last-child {
margin-bottom: initial;
}
&.checked {
border: 1px solid #1D35BC;
border: var(--border-checked);
box-shadow: var(--bottom-shaddow);
}
&.disabled {

View File

@ -1,11 +1,20 @@
@import '../../shared/mixins.css';
~boxes: "../../shared/constants.js";
~colors: "../../shared/constants.js";
:root {
--border-unchecked: ~boxes.border.unchecked;
--border-radius: ~boxes.borderRadius;
--bottom-shaddow: ~boxes.bottomShaddow;
}
.tab {
display: inline;
& .label {
background: #F2F2F2;
border: 1px solid #D8D8D8;
border: var(--border-unchecked);
color: #646464;
display: inline-block;
font-size: remCalc(20);
@ -38,7 +47,7 @@
display: block;
background: white;
padding: remCalc(0 20);
border: 1px solid #D8D8D8;
border: var(--border-unchecked);
background: #FAFAFA;
float: left;
font-size: remCalc(16);

View File

@ -4,6 +4,17 @@
* - We shouldn't use #FFFFFF but a variation of it to have less contrast
*/
~boxes: "../../shared/constants.js";
~colors: "../../shared/constants.js";
:root {
--background-confirmed: ~colors.confirmation;
--border-confirmed: ~boxes.border.confirmed;
--border-unchecked: ~boxes.border.unchecked;
--border-radius: ~boxes.borderRadius;
--bottom-shaddow: ~boxes.bottomShaddow;
}
.toggle {
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
color: #464646;
@ -25,13 +36,13 @@
& .btn {
background: #FFFFFF;
box-shadow: 0px 1px 0px 0px rgba(0,0,0,0.05);
border-radius: 3px;
box-shadow: var(--bottom-shaddow);
border-radius: var(--border-radius);
}
&.on {
background: #38C647;
border: 1px solid #23AC32;
background: var(--background-confirmed);
border: var(--border-confirmed);
& .label {
float: right;
@ -45,7 +56,7 @@
&.off {
background: #E6E6E6;
border: 1px solid #D8D8D8;
border: var(--border-unchecked);
& .label {
float: left;

View File

@ -1,7 +1,14 @@
~boxes: "../../shared/constants.js";
:root {
--border-checked: ~boxes.border.checked;
--border-unchecked: ~boxes.border.unchecked;
}
.content {
cursor: pointer;
border-radius: 4px;
border: 1px solid #d8d8d8;
border: var(--border-uncheckedx);
padding: remCalc(36);
& img {
max-width: 100%;
@ -14,7 +21,7 @@
&:checked {
& ~ .content {
border: 1px solid #2532bb;
border: var(--border-checked);
}
}

View File

@ -70,6 +70,11 @@ const boxes = {
borderRadius: 4,
bottomShaddow: '0 2px 0 0 rgba(0, 0, 0, 0.05)',
insetShaddow: 'inset 0 3px 0 0 rgba(0, 0, 0, 0.05)'
border: {
checked: '1px solid #2532bb',
unchecked: '1px solid #d8d8d8',
confirmed: '1px solid #23AC32'
}
};
const forms = {