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

adding box constants and creating mixin for generating buttons

Browse Source
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
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

39
ui/src/components/button/style.css
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 { .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;
} }
} }

10
ui/src/shared/constants.js
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 = { 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,