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:
parent
fcd55d3c44
commit
1b46c59ef7
@ -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 {
|
||||
|
@ -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);
|
||||
|
@ -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;
|
||||
|
@ -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);
|
||||
}
|
||||
}
|
||||
|
||||
|
@ -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 = {
|
||||
|
Loading…
Reference in New Issue
Block a user