ianharrigan/haxeui — pull request #23 by AdrianV (2013-10-23 15:47:31+00:00)
Title: changed Macros.hx that it supports template .css

Hello Ian,

the change seems to work now. I have tested it with this css code:

```css
@ {
scale: 1.7;
borderColor: 0xa5b8da;
padding: 1;
@border(@size=1) {
borderColor: borderColor;
borderSize: @size;
}
@padding(val=1) {
paddingLeft: @val;
paddingTop: @val;
paddingBottom: @val;
paddingRight: @val;
}
}

#popupRoot {
width: 760;
height: 560;
backgroundColor: 0xFFFFFF;
borderColor: borderColor;
@padding;
spacingY: 0;
cornerRadius: 3;
filter: dropShadow(4, 45, 0x808080, 1, 4, 4, 1, 3);
}

#modalOverlay {
backgroundColor: 0xE9EDF5;
alpha: .6;
}

Text {
fontSize: 16 * scale;
fontName: "_sans";
}

VBox {
@border(0);
@padding(0);
spacingY: 5;
cornerRadius: 2;
}

HBox {
@border(0);
@padding(0);
spacingX: 5;
cornerRadius: 2;
}

Grid {
@border(0);
@padding(0);
spacingX: 5;
spacingY: 5;
cornerRadius: 2;
}

ScrollView {
@border(1);
color: 0x000000;
@padding(1);
spacingX: 2;
spacingY: 2;
cornerRadius: 2;
inlineScrolls: true;
autoHideScrolls: true;
}

ScrollView VBox {
backgroundColor: 0xFFFFFF;
borderColor: 0x000000;
color: 0x000000;
@padding(0);
borderSize: 0;
spacingX: 5;
spacingY: 5;
}

Button {
@padding(8);
backgroundColor: 0x606c88;
backgroundColorGradientEnd: 0x3f4c6b;
color: 0xFFFFFF;
borderColor: 0x495267;
cornerRadius: 3;
borderSize: 1;
fontSize: 16 * scale;
fontName: "_sans";
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
iconPosition: "left";
}

Button:over {
backgroundColor: 0x4b546a;
backgroundColorGradientEnd: 0x2c354b;
color: 0xFFFFFF;
borderColor: 0x363d4c;
}

Button:down {
backgroundColor: 0x8C95A9;
backgroundColorGradientEnd: 0x767F95;
color: 0xFFFFFF;
borderColor: 0x363d4c;
}

VScroll {
width: 5;
height: 100;
@padding(0);
spacingY: 0;
cornerRadius: 0;
hasButtons: false;
alpha: 0.5;
}

VScroll Button {
backgroundColor: 0x606c88;
backgroundColorGradientEnd: 0x606c88;
borderColor: 0x606c88;
cornerRadius: 3;
filter: null;
iconPosition: "center";
}

VScroll Button:over {
backgroundColor: 0x4b546a;
backgroundColorGradientEnd: 0x4b546a;
borderColor: 0x4b546a;
}

VScroll Button:down {
backgroundColor: 0x4b546a;
backgroundColorGradientEnd: 0x4b546a;
borderColor: 0x4b546a;
}

HScroll {
width: 100;
height: 5;
@padding(0);
spacingX: 1;
cornerRadius: 0;
hasButtons: false;
alpha: 0.5;
}

HScroll Button {
backgroundColor: 0x606c88;
backgroundColorGradientEnd: 0x606c88;
borderColor: 0x606c88;
cornerRadius: 3;
filter: null;
iconPosition: "center";
}

HScroll Button:over {
backgroundColor: 0x4b546a;
backgroundColorGradientEnd: 0x4b546a;
borderColor: 0x4b546a;
}

HScroll Button:down {
backgroundColor: 0x4b546a;
backgroundColorGradientEnd: 0x4b546a;
borderColor: 0x4b546a;
}

HProgress {
width: 100;
height: 20;
backgroundColor: 0xFFFFFF;
borderColor: 0x363d4c;
@padding(1);
cornerRadius: 3;
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, true);
}

HProgress #background {
width: 100%;
height: 100%;
backgroundColor: borderColor;
borderColor: borderColor;
cornerRadius: 3;
}

HProgress #value {
height: 100%;
backgroundColor: 0x606c88;
backgroundColorGradientEnd: 0x3f4c6b;
borderColor: borderColor;
cornerRadius: 3;
}

VProgress {
width: 20;
height: 100;
backgroundColor: 0xFFFFFF;
borderColor: 0x363d4c;
@padding;
cornerRadius: 3;
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, true);
}

VProgress #background {
width: 100%;
height: 100%;
backgroundColor: borderColor;
borderColor: borderColor;
cornerRadius: 3;
}

VProgress #value {
width: 100%;
backgroundColor: 0x606c88;
backgroundColorGradientEnd: 0x3f4c6b;
borderColor: borderColor;
cornerRadius: 3;
gradientType: "horizontal";
}

HSlider {
width: 150;
height: 34;
}

HSlider #background {
width: 100%;
height: 10;
backgroundColor: borderColor;
borderColor: 0x363d4c;
cornerRadius: 3;
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, false);
}

HSlider #value {
height: 10;
backgroundColor: 0x819bcb;
backgroundColorGradientEnd: 0x536f9d;
borderColor: 0x363d4c;
cornerRadius: 3;
cornerRadiusTopRight: 0;
cornerRadiusBottomRight: 0;
}

HSlider Button {
width: 40;
height: 100%;
icon: "styles/gradient/gripper_horizontal.png";
iconPosition: "center";
}

VSlider {
width: 34;
height: 150;
}

VSlider #background {
width: 10;
height: 100%;
backgroundColor: borderColor;
borderColor: 0x363d4c;
cornerRadius: 3;
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, false);
}

VSlider #value {
width: 10;
backgroundColor: 0x819bcb;
backgroundColorGradientEnd: 0x536f9d;
borderColor: 0x363d4c;
cornerRadius: 3;
cornerRadiusTopRight: 0;
cornerRadiusTopLeft: 0;
gradientType: "horizontal";
}

VSlider Button {
width: 100%;
height: 40;
icon: "styles/gradient/gripper_vertical.png";
iconPosition: "center";
}

ListView {
@border(1);
color: 0x000000;
@padding;
spacingX: 2;
spacingY: 2;
cornerRadius: 2;
backgroundColor: 0xFFFFFF;
inlineScrolls: true;
autoHideScrolls: true;
}

ListView VBox {
color: 0x000000;
@padding(0);
borderSize: 0;
spacingX: 0;
spacingY: 0;
cornerRadius: 0;
}

ListViewItem {
color: 0x000000;
paddingLeft: 2;
paddingTop: 14;
paddingBottom: 14;
paddingRight: 2;
borderSize: 0;
spacingX: 2;
spacingY: 2;
cornerRadius: 2;
}

ListView #even {
backgroundColor: 0xE9EDF5;
color: 0x000000;
cornerRadius: 2;
}

ListView #odd {
backgroundColor: 0xFFFFFF;
color: 0x000000;
cornerRadius: 2;
}

ListViewItem:over {
backgroundColor: 0x606c88;
}

ListViewItem #text {
color: 0x000000;
}

ListViewItem #text:over {
color: 0xFFFFFF;
}

ListViewItem #subtext {
color: 0x606c88;
fontSize: 11 * scale;
}

ListViewItem #subtext:over {
color: 0xFFFFFF;
}

ListViewItem:selected {
backgroundColor: 0x3f4c6b;
}

ListViewItem #text:selected {
color: 0xFFFFFF;
}

ListViewItem #subtext:selected {
color: 0xFFFFFF;
}

CheckBox {
spacingX: 2;
}

CheckBoxValue {
width: 18;
height: 18;
}

CheckBoxValue #unselected {
backgroundColor: 0xFFFFFF;
backgroundColorGradientEnd: 0xFFFFFF;
borderColor: 0x363d4c;
@padding;
cornerRadius: 3;
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, true);
}

CheckBoxValue #selected {
backgroundColor: 0xFFFFFF;
backgroundColorGradientEnd: 0xFFFFFF;
borderColor: 0x363d4c;
@padding;
cornerRadius: 3;
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, true);
icon: "styles/gradient/cross_dark.png";
iconPosition: "center";
}

OptionBox {
spacingX: 2;
}

OptionBoxValue {
width: 18;
height: 18;
}

OptionBoxValue #unselected {
backgroundColor: 0xFFFFFF;
backgroundColorGradientEnd: 0xFFFFFF;
borderColor: 0x363d4c;
@padding;
cornerRadius: 3;
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, true);
}

OptionBoxValue #selected {
backgroundColor: 0xFFFFFF;
backgroundColorGradientEnd: 0xFFFFFF;
borderColor: 0x363d4c;
@padding;
cornerRadius: 3;
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, true);
icon: "styles/gradient/circle_dark.png";
iconPosition: "center";
}

TextInput, Code, RTF {
width: 150;
height: 30;
borderColor: 0x363d4c;
backgroundColor: 0xFFFFFF;
@padding(2);
cornerRadius: 2;
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3, true);
fontSize: 13 * scale;
fontName: "_sans";
}

TabBar {
backgroundColor: 0xFFFFFF;
height: 50;
paddingTop: 15;
paddingLeft: 5;
paddingRight: 5;
}

TabBar HBox {
spacingX: 3;
}

TabBar Button {
@padding(5);
height: 35;
backgroundColor: borderColor;
backgroundColorGradientEnd: 0x7089b3;
color: 0xFFFFFF;
borderColor: 0x7d99ca;
cornerRadius: 2;
cornerRadiusBottomLeft: 0;
cornerRadiusBottomRight: 0;
}

TabBar Button:over {
backgroundColor: 0x819bcb;
backgroundColorGradientEnd: 0x536f9d;
color: 0xFFFFFF;
borderColor: 0x5d7fbc;
}

TabBar Button:down {
backgroundColor: 0xf4f5f5;
backgroundColorGradientEnd: 0xdfdddd;
color: 0x363d4c;
borderColor: 0xdfdddd;
}

TabView {
backgroundColor: 0xdfdddd;
}

Stack {
@padding(5);
}

TabView Stack {
@padding(10);
}

MenuBar {
backgroundColor: 0xdfdddd;
width: 100%;
height: 45 * scale;
paddingLeft: 5;
paddingTop: 5 * scale;
paddingRight: 5;
paddingBottom: 5 * scale;
cornerRadius: 0;
filter: dropShadow(2, 90, 0x808080, 1, 0, 4, 1, 3);
}

MenuBar Button {
backgroundColor: borderColor;
backgroundColorGradientEnd: 0x7089b3;
color: 0xFFFFFF;
borderColor: 0x495267;
}

MenuBar Button:over {
backgroundColor: 0x819bcb;
backgroundColorGradientEnd: 0x536f9d;
color: 0xFFFFFF;
borderColor: 0x495267;
}

MenuBar Button:down {
backgroundColor: 0x606c88;
backgroundColorGradientEnd: 0x3f4c6b;
color: 0xFFFFFF;
borderColor: 0x495267;
}

List, Date {
@padding(8);
backgroundColor: 0x606c88;
backgroundColorGradientEnd: 0x3f4c6b;
color: 0xFFFFFF;
borderColor: 0x495267;
cornerRadius: 3;
borderSize: 1;
fontSize: 16 * scale;
fontName: "_sans";
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
icon: "styles/gradient/arrow_down.png";
iconPosition: "farRight";
labelPosition: "left";
selectionMethod: "popup";
}

List:over, Date:over {
backgroundColor: 0x4b546a;
backgroundColorGradientEnd: 0x2c354b;
color: 0xFFFFFF;
borderColor: 0x363d4c;
}

List:down, Date:down {
backgroundColor: 0x8C95A9;
backgroundColorGradientEnd: 0x767F95;
color: 0xFFFFFF;
borderColor: 0x363d4c;
}

MenuBar List {
backgroundColor: borderColor;
backgroundColorGradientEnd: 0x7089b3;
color: 0xFFFFFF;
borderColor: 0x495267;
}

MenuBar List:over {
backgroundColor: 0x819bcb;
backgroundColorGradientEnd: 0x536f9d;
color: 0xFFFFFF;
borderColor: 0x495267;
}

MenuBar List:down {
backgroundColor: 0x606c88;
backgroundColorGradientEnd: 0x3f4c6b;
color: 0xFFFFFF;
borderColor: 0x495267;
}

DropDownList {
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
}

ListView VBox Button {
backgroundColor: borderColor;
backgroundColorGradientEnd: 0x7089b3;
color: 0xFFFFFF;
borderColor: 0x495267;
}

ListView VBox Button:over {
backgroundColor: 0x819bcb;
backgroundColorGradientEnd: 0x536f9d;
color: 0xFFFFFF;
borderColor: 0x495267;
}

ListView VBox Button:down {
backgroundColor: 0x606c88;
backgroundColorGradientEnd: 0x3f4c6b;
color: 0xFFFFFF;
borderColor: 0x495267;
}

ListView VBox List {
backgroundColor: borderColor;
backgroundColorGradientEnd: 0x7089b3;
color: 0xFFFFFF;
borderColor: 0x495267;
}

ListView VBox List:over {
backgroundColor: 0x819bcb;
backgroundColorGradientEnd: 0x536f9d;
color: 0xFFFFFF;
borderColor: 0x495267;
}

ListView VBox List:down {
backgroundColor: 0x606c88;
backgroundColorGradientEnd: 0x3f4c6b;
color: 0xFFFFFF;
borderColor: 0x495267;
}

Popup {
backgroundColor: 0xE9EDF5;
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
borderColor: 0x495267;
cornerRadius: 3;
borderSize: 1;
@padding(2);
width: 350;
}

Popup #titleBar {
backgroundColor: 0x4b546a;
height: 30;
paddingTop: 4;
paddingLeft: 5;
}

Popup #content {
@padding(5);
}

Popup #titleBar Text {
color: 0xFFFFFF;
}

Popup #buttonBar {
paddingTop: 10;
paddingBottom: 5;
height: 54;
}

ListPopupContent {
@padding(0);
}

ListPopupContent ListView {
@padding(0);
borderSize: 0;
}

Accordion {
backgroundColor: 0xdfdddd;
spacingX: 0;
spacingY: 0;
padding: 0;
}

Accordion VBox, Accordion HBox, Accordion Grid {
@padding(5);
spacingX: 0;
spacingY: 0;
}

AccordionButton {
@padding(8);
backgroundColor: borderColor;
backgroundColorGradientEnd: 0x7089b3;
color: 0xFFFFFF;
borderColor: 0x495267;
cornerRadius: 0;
borderSize: 1;
fontSize: 16 * scale;
fontName: "_sans";
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
iconPosition: "farLeft";
labelPosition: "left";
icon: "styles/gradient/arrow_right2.png";
}

AccordionButton:over {
backgroundColor: 0x819bcb;
backgroundColorGradientEnd: 0x536f9d;
color: 0xFFFFFF;
borderColor: 0x495267;
}

AccordionButton:down {
backgroundColor: 0x606c88;
backgroundColorGradientEnd: 0x3f4c6b;
color: 0xFFFFFF;
borderColor: 0x495267;
icon: "styles/gradient/arrow_down.png";
}

RTFView {
spacingY: 8;
}

RTFView List {
backgroundColor: 0xf4f5f5;
backgroundColorGradientEnd: 0xdfdddd;
color: 0x363d4c;
borderColor: 0xdfdddd;
icon: "styles/gradient/arrow_down_dark.png";
}

RTFView List:over {
backgroundColor: borderColor;
backgroundColorGradientEnd: 0x7089b3;
borderColor: 0x7d99ca;
color: 0xFFFFFF;
icon: "styles/gradient/arrow_down.png";
}

RTFView List:down {
backgroundColor: 0x819bcb;
backgroundColorGradientEnd: 0x536f9d;
borderColor: 0x5d7fbc;
color: 0xFFFFFF;
icon: "styles/gradient/arrow_down.png";
}

RTFView RTFToolButton {
paddingLeft: 8;
paddingTop: 5;
paddingBottom: 5;
paddingRight: 8;
backgroundColor: 0xf4f5f5;
backgroundColorGradientEnd: 0xdfdddd;
color: 0x363d4c;
borderColor: 0xdfdddd;
width: 42;
height: 100%;
cornerRadius: 3;
borderSize: 1;
fontSize: 13 * scale;
fontName: "_sans";
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
iconPosition: "center";
}

RTFView RTFToolButton:over {
backgroundColor: borderColor;
backgroundColorGradientEnd: 0x7089b3;
borderColor: 0x7d99ca;
}

RTFView RTFToolButton:down {
backgroundColor: 0x819bcb;
backgroundColorGradientEnd: 0x536f9d;
borderColor: 0x5d7fbc;
}

RTFView #bold {
icon: "img/rtfview/edit-bold.png";
}

RTFView #italic {
icon: "img/rtfview/edit-italic.png";
}

RTFView #underline {
icon: "img/rtfview/edit-underline.png";
}

RTFView #bullet {
icon: "img/rtfview/edit-list.png";
}

RTFView #alignLeft {
icon: "img/rtfview/edit-alignment-left.png";
}

RTFView #alignCenter {
icon: "img/rtfview/edit-alignment-center.png";
}

RTFView #alignRight {
icon: "img/rtfview/edit-alignment-right.png";
}

RTFView #alignJustify {
icon: "img/rtfview/edit-alignment-justify.png";
}

CalendarView {
width: 250;
height: 250;
spacingX: 5;
spacingY: 5;
@padding(5);
borderSize: 1;
borderColor: 0x495267;
backgroundColor: 0xE9EDF5;
cornerRadius: 3;
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
}

Calendar {
width: 250;
height: 250;
spacingX: 2;
spacingY: 2;
@padding(0);
borderSize: 0;
filter: null;
}

CalendarDay {
paddingLeft: 8;
paddingTop: 5;
paddingBottom: 5;
paddingRight: 8;
backgroundColor: borderColor;
backgroundColorGradientEnd: 0x7089b3;
borderColor: 0x7d99ca;
color: 0xFFFFFF;
cornerRadius: 3;
borderSize: 1;
fontSize: 16 * scale;
fontName: "_sans";
filter: dropShadow(2, 45, 0x808080, 1, 4, 4, 1, 3);
iconPosition: "left";
}

CalendarDay:over {
backgroundColor: 0x4b546a;
backgroundColorGradientEnd: 0x2c354b;
color: 0xFFFFFF;
borderColor: 0x363d4c;
}

CalendarDay:down {
backgroundColor: 0x8C95A9;
backgroundColorGradientEnd: 0x767F95;
color: 0xFFFFFF;
borderColor: 0x363d4c;
}

Calendar #selectedDay {
backgroundColor: 0x4b546a;
backgroundColorGradientEnd: 0x2c354b;
color: 0xFFFFFF;
borderColor: 0x363d4c;
}

Calendar #selectedDay:over {
backgroundColor: 0x4b546a;
backgroundColorGradientEnd: 0x2c354b;
color: 0xFFFFFF;
borderColor: 0x363d4c;
}

Calendar #selectedDay:down {
backgroundColor: 0x4b546a;
backgroundColorGradientEnd: 0x2c354b;
color: 0xFFFFFF;
borderColor: 0x363d4c;
}

CalendarPopupContent CalendarView {
@padding(0);
borderSize: 0;
filter: null;
}

```