mirror of
https://github.com/yldio/copilot.git
synced 2024-11-10 21:30:06 +02:00
adding box constants and creating mixin for generating buttons
This commit is contained in:
parent
b3ee3b53ce
commit
d69a549902
@ -1,26 +1,43 @@
|
|||||||
|
~colors: "../../shared/constants.js";
|
||||||
|
~boxes: "../../shared/constants.js";
|
||||||
|
|
||||||
|
:root {
|
||||||
|
--primary-background: ~colors.brandPrimary;
|
||||||
|
--primary-border: #2532bb;
|
||||||
|
--primary-color: #ffffff;
|
||||||
|
|
||||||
|
--secondary-backgroud: #ffffff;
|
||||||
|
--secondary-border: #d8d8d8;
|
||||||
|
--secondary-color: #646464;
|
||||||
|
|
||||||
|
--inactive-background: #F9F9F9;
|
||||||
|
--inactive-border: #D8D8D8;
|
||||||
|
--inactive-color: #737373;
|
||||||
|
}
|
||||||
|
|
||||||
|
@define-mixin button $background, $border-color, $color {
|
||||||
|
background: $background;
|
||||||
|
border: 1px solid $border-color;
|
||||||
|
color: $color;
|
||||||
|
}
|
||||||
|
|
||||||
.button {
|
.button {
|
||||||
border-radius: 4px;
|
border-radius: remCalc(~boxes.borderRadius);
|
||||||
box-shadow: remCalc(0 2 0 0) rgba(0,0,0,0.05);
|
box-shadow: ~boxes.bottomShaddow;
|
||||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
|
||||||
font-size: remCalc(16);
|
font-size: remCalc(16);
|
||||||
min-width: remCalc(120);
|
min-width: remCalc(120);
|
||||||
padding: remCalc(18 24);
|
padding: remCalc(18 24);
|
||||||
|
|
||||||
&.primary {
|
&.primary {
|
||||||
background: #3B47CC;
|
@add-mixin button var(--primary-background), var(--primary-border), var(--primary-color);
|
||||||
border: 1px solid #2532BB;
|
|
||||||
color: #FFFFFF;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.secondary {
|
&.secondary {
|
||||||
background: #FFFFFF;
|
@add-mixin button var(--secondary-backgroud), var(--secondary-border), var(--secondary-color);
|
||||||
border: 1px solid #D8D8D8;
|
|
||||||
color: #646464;
|
|
||||||
}
|
}
|
||||||
|
|
||||||
&.inactive {
|
&.inactive {
|
||||||
background: #F9F9F9;
|
@add-mixin button var(--inactive-background), var(--inactive-border), var(--inactive-color);
|
||||||
border: 1px solid #D8D8D8;
|
|
||||||
color: #737373;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
@ -66,13 +66,18 @@ const sizes = {
|
|||||||
}
|
}
|
||||||
};
|
};
|
||||||
|
|
||||||
|
const boxes = {
|
||||||
|
borderRadius: 4,
|
||||||
|
bottomShaddow: '0 2px 0 0 rgba(0,0,0,0.05)'
|
||||||
|
};
|
||||||
|
|
||||||
const forms = {
|
const forms = {
|
||||||
cursorDisabled: 'not-allowed'
|
cursorDisabled: 'not-allowed'
|
||||||
};
|
};
|
||||||
|
|
||||||
const colors = {
|
const colors = {
|
||||||
brandPrimary: '#0275d8',
|
brandPrimary: '#364acd',
|
||||||
brandSecondary: '#160D42',
|
brandSecondary: '#160d42',
|
||||||
grayLight: '#818a91',
|
grayLight: '#818a91',
|
||||||
confirmation: '#38C647'
|
confirmation: '#38C647'
|
||||||
};
|
};
|
||||||
@ -107,6 +112,7 @@ const breakpoints = {
|
|||||||
module.exports = traverse({
|
module.exports = traverse({
|
||||||
breakpoints,
|
breakpoints,
|
||||||
colors,
|
colors,
|
||||||
|
boxes,
|
||||||
forms,
|
forms,
|
||||||
links,
|
links,
|
||||||
sizes,
|
sizes,
|
||||||
|
Loading…
Reference in New Issue
Block a user