1
0
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:
Alex Windett 2016-10-28 17:36:44 +01:00
parent b3ee3b53ce
commit d69a549902
2 changed files with 36 additions and 13 deletions

View File

@ -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 {
border-radius: 4px;
box-shadow: remCalc(0 2 0 0) rgba(0,0,0,0.05);
border-radius: remCalc(~boxes.borderRadius);
box-shadow: ~boxes.bottomShaddow;
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
font-size: remCalc(16);
min-width: remCalc(120);
padding: remCalc(18 24);
&.primary {
background: #3B47CC;
border: 1px solid #2532BB;
color: #FFFFFF;
@add-mixin button var(--primary-background), var(--primary-border), var(--primary-color);
}
&.secondary {
background: #FFFFFF;
border: 1px solid #D8D8D8;
color: #646464;
@add-mixin button var(--secondary-backgroud), var(--secondary-border), var(--secondary-color);
}
&.inactive {
background: #F9F9F9;
border: 1px solid #D8D8D8;
color: #737373;
@add-mixin button var(--inactive-background), var(--inactive-border), var(--inactive-color);
}
}

View File

@ -66,13 +66,18 @@ const sizes = {
}
};
const boxes = {
borderRadius: 4,
bottomShaddow: '0 2px 0 0 rgba(0,0,0,0.05)'
};
const forms = {
cursorDisabled: 'not-allowed'
};
const colors = {
brandPrimary: '#0275d8',
brandSecondary: '#160D42',
brandPrimary: '#364acd',
brandSecondary: '#160d42',
grayLight: '#818a91',
confirmation: '#38C647'
};
@ -107,6 +112,7 @@ const breakpoints = {
module.exports = traverse({
breakpoints,
colors,
boxes,
forms,
links,
sizes,