initial

lib/flat/dijit/Calendar.css

@@ -0,0 +1,216 @@
+/* Calendar
+ *
+ * Styling Calendar mainly includes:
+ *
+ * 1. Calendar container
+ * 		.dijitCalendar - main container
+ * 		.dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active
+ *
+ * 2. Month
+ * 		.dijitCalendarMonthContainer
+ * 		.dijitCalendarMonthLabel
+ *      .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month
+ *      .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active
+ *
+ * 3. Date
+ * 		.dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S
+ * 		.dijitCalendarDateTemplate - date label wrapper
+ * 		.dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month
+ *      .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date
+ * 		.dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date
+ * 		.dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active
+ *
+ * 4. Year
+ * 		.dijitCalendarYearContainer
+ * 		.dijitCalendarYearLabel
+ * 		.dijitCalendarPreviousYear /.dijitCalendarNextYear
+ *      .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active
+ *
+ * 5. Dropdown Month Menu
+ * 		.dijitCalendarMonthMenu - menu container
+ * 		.dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item
+ * 		.dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state
+ */
+.flat .dijitCalendar {
+  background-color: #fff;
+  text-align: center;
+  padding: 4px;
+  border: 1px solid #9e9e9e;
+  border-collapse: separate;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+}
+.flat .dijitCalendarMonthContainer th {
+  text-align: center;
+  line-height: 20px;
+  vertical-align: middle;
+  margin: 4px 0;
+}
+.flat .dijitCalendarArrow {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  cursor: pointer;
+  font-size: 24px;
+  border: 1px solid transparent;
+  padding: 4px;
+}
+.flat .dijitCalendarDecrease,
+.flat .dijitCalendarIncrease {
+  display: none;
+}
+.flat .dijitCalendarDecrementArrow {
+  float: left;
+  padding-left: 2px;
+}
+.flat .dijitCalendarDecrementArrow:before {
+  content: "\f000";
+}
+.flat .dijitCalendarIncrementArrow {
+  float: right;
+  padding-right: 2px;
+}
+.flat .dijitCalendarIncrementArrow:before {
+  content: "\f001";
+}
+.flat .dijitCalendarArrowHover .dijitCalendarIncrementControl,
+.flat .dijitCalendarArrow:hover .dijitCalendarIncrementControl,
+.flat .dijitCalendarNextYearHover,
+.flat .dijitCalendarNextYear:hover,
+.flat .dijitCalendarPreviousYearHover,
+.flat .dijitCalendarPreviousYear:hover {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  padding: 4px;
+}
+.flat .dijitCalendarArrowActive .dijitCalendarIncrementControl,
+.flat .dijitCalendarArrow:active .dijitCalendarIncrementControl,
+.flat .dijitCalendarNextYearActive,
+.flat .dijitCalendarNextYear:active,
+.flat .dijitCalendarPreviousYearActive,
+.flat .dijitCalendarPreviousYear:active {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitA11ySideArrow {
+/* text +/- labels instead of arrow icons, for high contrast mode */
+  display: none;
+}
+.flat .dijitCalendarContainer th,
+.flat .dijitCalendarContainer td {
+  padding: 4px;
+}
+.flat .dijitCalendarDayLabelTemplate {
+  text-align: center;
+  border-bottom: #9e9e9e;
+}
+.flat .dijitCalendarDayLabel {
+  font-weight: bold;
+  text-align: center;
+}
+.flat .dijitCalendarDateTemplate {
+  font-size: 0.9em;
+  letter-spacing: 0.05em;
+  text-align: center;
+}
+.flat .dijitCalendarDateTemplate .dijitCalendarDateLabel {
+  text-decoration: none;
+  display: block;
+  padding: 2px 4px;
+  border: 0 none;
+  border-radius: 50%;
+}
+.flat .dijitCalendarPreviousMonth .dijitCalendarDateLabel,
+.flat .dijitCalendarNextMonth .dijitCalendarDateLabel {
+  color: #c2c2c2;
+}
+.flat .dijitCalendarCurrentDate .dijitCalendarDateLabel {
+  border-color: #2196f3;
+}
+.flat .dijitCalendarHoveredDate .dijitCalendarDateLabel,
+.flat .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel {
+  background-color: #f2f2f2;
+}
+.flat .dijitCalendarActiveDate .dijitCalendarDateLabel,
+.flat .dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
+  background-color: #e6e6e6;
+}
+.flat .dijitCalendarSelectedDate .dijitCalendarDateLabel,
+.flat .dijitCalendarSelectedDate.dijitCalendarHoveredDate .dijitCalendarDateLabel {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitCalendarDisabledDate .dijitCalendarDateLabel {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitCalendarYearContainer {
+  vertical-align: middle;
+}
+.flat .dijitCalendarYearLabel {
+  padding: 4px 0 0 0;
+  margin: 0;
+  font-size: 1.15em;
+}
+.flat .dijitCalendarYearLabel span {
+  vertical-align: middle;
+}
+.flat .dijitCalendarSelectedYear,
+.flat .dijitCalendarNextYear,
+.flat .dijitCalendarPreviousYear {
+  padding: 4px;
+}
+.flat .dijitCalendarSelectedYear {
+  color: #2196f3;
+}
+.flat .dijitCalendarNextYear,
+.flat .dijitCalendarPreviousYear {
+  color: #2196f3;
+  font-size: 0.9em;
+  line-height: 20px;
+  border: 1px solid transparent;
+}
+.flat .dijitCalendarSelectedYear {
+  padding: 0 4px;
+}
+.flat .dijitCalendar .dijitDropDownButton {
+  margin: 0;
+}
+.flat .dijitCalendarMonthMenu {
+  padding: 8px 0;
+}
+.flat .dijitCalendarMonthMenu .dijitCalendarMonthLabel {
+  padding: 4px;
+}
+.flat .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover {
+  color: #fff;
+  background-color: #2196f3;
+}

lib/flat/dijit/Calendar.styl

@@ -0,0 +1,247 @@
+/* Calendar
+ *
+ * Styling Calendar mainly includes:
+ *
+ * 1. Calendar container
+ * 		.dijitCalendar - main container
+ * 		.dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active
+ *
+ * 2. Month
+ * 		.dijitCalendarMonthContainer
+ * 		.dijitCalendarMonthLabel
+ *      .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month
+ *      .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active
+ *
+ * 3. Date
+ * 		.dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S
+ * 		.dijitCalendarDateTemplate - date label wrapper
+ * 		.dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month
+ *      .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date
+ * 		.dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date
+ * 		.dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active
+ *
+ * 4. Year
+ * 		.dijitCalendarYearContainer
+ * 		.dijitCalendarYearLabel
+ * 		.dijitCalendarPreviousYear /.dijitCalendarNextYear
+ *      .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active
+ *
+ * 5. Dropdown Month Menu
+ * 		.dijitCalendarMonthMenu - menu container
+ * 		.dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item
+ * 		.dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitCalendar {
+		background-color: $calendar-background-color;
+		text-align:center;
+		padding: $calendar-padding;
+		border: 1px solid $calendar-border-color;
+		border-collapse: separate;	// in case user CSS has set border-collapse: collapse for tables
+		border-radius: $calendar-border-radius;
+		box-shadow: $calendar-box-shadow;
+	}
+
+	.dijitCalendarMonthContainer th {
+		text-align:center;
+		line-height: $line-height;
+		vertical-align:middle;
+		margin: $calendar-padding 0;
+	}
+
+	/* next/previous month arrows */
+
+	.dijitCalendarArrow {
+		_icon-core-style();
+		cursor: pointer;
+		font-size: $calendar-icon-size;
+		border: 1px solid transparent;
+		padding: $padding;
+	}
+
+	// Since the arrow icons are pulled from the font, the `img` tags are not needed.
+	.dijitCalendarDecrease,
+	.dijitCalendarIncrease {
+		display: none;
+	}
+
+	.dijitCalendarDecrementArrow {
+		float: left;
+		padding-left: ($padding / 2);
+
+		&:before {
+			content: $calendar-icon-decrease;
+		}
+	}
+
+	.dijitCalendarIncrementArrow {
+		float: right;
+		padding-right: ($padding / 2);
+
+		&:before {
+			content: $calendar-icon-increase;
+		}
+	}
+
+	.dijitCalendarArrowHover .dijitCalendarIncrementControl,
+	.dijitCalendarArrow:hover .dijitCalendarIncrementControl,
+	.dijitCalendarNextYearHover, .dijitCalendarNextYear:hover,
+	.dijitCalendarPreviousYearHover, .dijitCalendarPreviousYear:hover  {
+		button-style();
+		padding: $padding;
+	}
+
+	.dijitCalendarArrowActive .dijitCalendarIncrementControl,
+	.dijitCalendarArrow:active .dijitCalendarIncrementControl,
+	.dijitCalendarNextYearActive, .dijitCalendarNextYear:active
+	.dijitCalendarPreviousYearActive, .dijitCalendarPreviousYear:active  {
+		button-active-style();
+	}
+
+	.dijitA11ySideArrow {
+		/* text +/- labels instead of arrow icons, for high contrast mode */
+		display: none;
+	}
+
+	.dijitCalendarContainer {
+		th, td {
+			padding: $calendar-day-cell-padding;
+		}
+	}
+
+	/* day */
+
+	.dijitCalendarDayLabelTemplate {
+		text-align: center;
+		border-bottom: $border-color;
+	}
+
+	.dijitCalendarDayLabel {
+		font-weight: $calendar-day-cell-font-weight;
+		text-align: center;
+	}
+
+	/* date */
+
+	.dijitCalendarDateTemplate {
+		font-size: $calendar-date-font-size;
+		letter-spacing: .05em;
+		text-align:center;
+
+		.dijitCalendarDateLabel {
+			text-decoration: none;
+			display: block;
+			padding: $calendar-date-cell-padding;
+			border: 0 none;
+			border-radius: $calendar-date-cell-border-radius;
+		}
+	}
+
+	.dijitCalendarPreviousMonth,
+	.dijitCalendarNextMonth {
+		.dijitCalendarDateLabel {
+			color: $calendar-date-cell-prev-next-month-text-color;
+		}
+	}
+
+	.dijitCalendarCurrentDate {
+		.dijitCalendarDateLabel {
+			border-color: $calendar-date-cell-current-border-color;
+		}
+	}
+
+	/* hover */
+
+	.dijitCalendarHoveredDate .dijitCalendarDateLabel,
+	.dijitCalendarEnabledDate:hover .dijitCalendarDateLabel {
+		background-color: $calendar-date-cell-hovered-background-color;
+	}
+
+	/* active */
+
+	.dijitCalendarActiveDate .dijitCalendarDateLabel,
+	.dijitCalendarEnabledDate:active .dijitCalendarDateLabel {
+		background-color: $calendar-date-cell-active-background-color;
+	}
+
+	/* selected */
+
+	.dijitCalendarSelectedDate,
+	.dijitCalendarSelectedDate.dijitCalendarHoveredDate {
+		 .dijitCalendarDateLabel {
+			color:$calendar-date-cell-selected-text-color;
+			background-color: $calendar-date-cell-selected-background-color;
+		}
+	}
+
+	/* disabled */
+
+	.dijitCalendarDisabledDate .dijitCalendarDateLabel {
+		opacity: $disabled-opacity;
+	}
+
+	/* year */
+
+	.dijitCalendarYearContainer {
+		vertical-align:middle;
+	}
+
+	.dijitCalendarYearLabel {
+		padding: $calendar-year-cell-padding 0 0 0;
+		margin: 0;
+		font-size: $calendar-year-font-size;
+
+		span {
+			vertical-align:middle;
+		}
+	}
+
+	.dijitCalendarSelectedYear,
+	.dijitCalendarNextYear,
+	.dijitCalendarPreviousYear {
+		padding: $padding;
+	}
+
+	.dijitCalendarSelectedYear {
+		color: $calendar-year-prev-current-year-text-color;
+	}
+
+	.dijitCalendarNextYear,
+	.dijitCalendarPreviousYear {
+		color: $calendar-year-prev-next-year-text-color;
+		font-size: $calendar-year-prev-next-year-font-size;
+		line-height: $line-height;
+		border: 1px solid transparent;
+	}
+
+	.dijitCalendarSelectedYear {
+		padding: 0 $calendar-year-cell-padding;
+	}
+
+	/* month dropdown */
+
+	.dijitCalendar .dijitDropDownButton {
+		margin: 0;
+
+		.dijitButtonNode {
+		}
+	}
+
+	.dijitCalendarMonthMenu {
+		padding: $calendar-month-dropdown-menu-padding 0;
+
+		.dijitCalendarMonthLabel {
+			padding: $calendar-month-dropdown-menu-item-padding;
+		}
+
+		.dijitCalendarMonthLabelHover {
+			color: $calendar-month-dropdown-menu-item-hovered-text-color;
+			background-color: $calendar-month-dropdown-menu-item-hovered-background-color;
+		}
+	}
+
+}

lib/flat/dijit/Calendar_rtl.css

@@ -0,0 +1,6 @@
+.flat .dijitCalendarRtl .dijitCalendarDecrease:before {
+  content: "\f001";
+}
+.flat .dijitCalendarRtl .dijitCalendarIncrease:before {
+  content: "\f000";
+}

lib/flat/dijit/Calendar_rtl.styl

@@ -0,0 +1,17 @@
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitCalendarRtl .dijitCalendarDecrease {
+		&:before {
+			content: $calendar-icon-increase;
+		}
+	}
+
+	.dijitCalendarRtl .dijitCalendarIncrease {
+		&:before {
+			content: $calendar-icon-decrease;
+		}
+	}
+	
+}

lib/flat/dijit/ColorPalette.css

@@ -0,0 +1,66 @@
+/* ColorPalette
+ * 
+ * Styling of the ColorPalette consists of the following:
+ * 
+ * 1. the whole color palette
+ *		.dijitColorPalette - for outline, border, and background color of the whole color palette
+ *		Note: outline does not work for IE
+ *
+ * 2. the color swatch 
+ *		.dijitColorPalette .dijitPaletteImg
+ *		transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
+ *		displays border around a color swatch
+ *
+ * 3. hovered swatch
+ * 		.dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg
+ *		the hovered state of the color swatch - adds border
+ * 	
+ * 4. active and selected swatch
+ * 		.dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg
+ *		.dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg
+ *		adds border for active or selected state
+ */
+.flat .dijitColorPalette {
+  border: 1px solid #9e9e9e;
+  background-color: #fff;
+  border-radius: 3px;
+/* swatch */
+}
+.flat .dijitColorPalette .dijitPaletteTable {
+  padding: 4px;
+}
+.flat .dijitColorPalette .dijitColorPaletteSwatch {
+  height: 15px;
+  width: 15px;
+  border-radius: 2px;
+}
+.flat .dijitColorPalette .dijitPaletteImg {
+/* transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
+			 * displays border around a color swatch
+			 * overrides border color in dijit.css */
+  border: 1px solid transparent;
+  line-height: normal;
+}
+.flat .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg {
+  border-color: #9e9e9e;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+  border-radius: 2px;
+  -webkit-transform: scale(1.2);
+  -moz-transform: scale(1.2);
+  -o-transform: scale(1.2);
+  -ms-transform: scale(1.2);
+  transform: scale(1.2);
+}
+.flat .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg,
+.flat .dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg {
+  border: 1px solid #2196f3;
+  -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
+  box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
+  border-radius: 2px;
+  -webkit-transform: scale(1.2);
+  -moz-transform: scale(1.2);
+  -o-transform: scale(1.2);
+  -ms-transform: scale(1.2);
+  transform: scale(1.2);
+}

lib/flat/dijit/ColorPalette.styl

@@ -0,0 +1,69 @@
+/* ColorPalette
+ * 
+ * Styling of the ColorPalette consists of the following:
+ * 
+ * 1. the whole color palette
+ *		.dijitColorPalette - for outline, border, and background color of the whole color palette
+ *		Note: outline does not work for IE
+ *
+ * 2. the color swatch 
+ *		.dijitColorPalette .dijitPaletteImg
+ *		transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
+ *		displays border around a color swatch
+ *
+ * 3. hovered swatch
+ * 		.dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg
+ *		the hovered state of the color swatch - adds border
+ * 	
+ * 4. active and selected swatch
+ * 		.dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg
+ *		.dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg
+ *		adds border for active or selected state
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitColorPalette {
+		border: 1px solid $colorpalette-border-color;
+		background-color: $colorpalette-background-color;
+		border-radius: $colorpalette-border-radius;
+
+		.dijitPaletteTable {
+			padding: $colorpalette-padding;
+		}
+
+		/* swatch */
+
+		.dijitColorPaletteSwatch {
+			height: $colorpalette-swatch-height;
+			width: $colorpalette-swatch-width;
+			border-radius:$colorpalette-swatch-radius;
+		}
+
+		.dijitPaletteImg {
+			/* transparent (but clickable) <img> node inside of each <td>, overlaying the color swatch.
+			 * displays border around a color swatch
+			 * overrides border color in dijit.css */
+			border: 1px solid $colorpalette-swatch-border-color;
+			line-height: normal;
+		}
+
+		.dijitPaletteCell:hover .dijitPaletteImg {
+			border-color: $colorpalette-swatch-hover-border-color;
+			box-shadow: $colorpalette-swatch-hover-box-shadow;
+			border-radius: $colorpalette-swatch-radius;
+			transform: scale(1.2);
+		}
+
+		.dijitPaletteCell:active .dijitPaletteImg,
+		.dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg {
+			border: 1px solid $colorpalette-swatch-selected-border-color;
+			box-shadow: $colorpalette-swatch-selected-box-shadow;
+			border-radius: $colorpalette-swatch-radius;
+			transform: scale(1.2);
+		}
+	}
+	
+}

lib/flat/dijit/ColorPalette_rtl.css

@@ -0,0 +1,4 @@
+.flat .dijitColorPaletteRtl .dijitColorPaletteUnder {
+  left: auto;
+  right: 0;
+}

lib/flat/dijit/ColorPalette_rtl.styl

@@ -0,0 +1,10 @@
+@import 'dijit_variables';
+
+.{$theme-name} {
+	
+	.dijitColorPaletteRtl .dijitColorPaletteUnder {
+		left: auto;
+		right: 0;
+	}
+	
+}

lib/flat/dijit/Common.css

@@ -0,0 +1,87 @@
+.dijitPopup {
+  border-radius: 3px;
+}
+/* ----- Drag and Drop ----- */
+.dojoDndItem {
+  border: 1px solid transparent;
+  cursor: pointer;
+  -webkit-transition-duration: 0.25s;
+  -moz-transition-duration: 0.25s;
+  -o-transition-duration: 0.25s;
+  -ms-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  -webkit-transition-property: background-color, border-color, opacity;
+  -moz-transition-property: background-color, border-color, opacity;
+  -o-transition-property: background-color, border-color, opacity;
+  -ms-transition-property: background-color, border-color, opacity;
+  transition-property: background-color, border-color, opacity;
+}
+/* hover */
+.dojoDndItemOver {
+  background-color: #f5f5f5;
+  border-radius: 3px;
+}
+.dojoDndItemAnchor {
+  background-color: transparent;
+  border: 1px dashed #2196f3;
+  border-radius: 3px;
+}
+/* selected */
+.dojoDndItemBefore {
+  background: transparent;
+  padding-top: 2px;
+  border-top: 1px solid #2196f3;
+}
+.dojoDndItemAfter {
+  background: transparent;
+  padding-bottom: 2px;
+  border-bottom: 1px solid #2196f3;
+}
+/* Avatar */
+table.dojoDndAvatar {
+  display: block;
+}
+.dojoDndAvatarHeader td {
+  display: none;
+}
+.dojoDndAvatarHeader:before {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  display: table-cell;
+}
+/* cannot drop */
+.dojoDndMove .dojoDndAvatarHeader:before {
+  color: #dd2c00;
+  content: "\f01c";
+}
+.dojoDndCopy .dojoDndAvatarHeader:before {
+  color: #dd2c00;
+  content: "\f01c";
+}
+/* can drop */
+.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader:before {
+  color: #43a047;
+  content: "\f008";
+}
+.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader:before {
+  color: #43a047;
+  content: "\f008";
+}
+.dojoDndAvatarItem {
+  border-radius: 3px;
+}
+.dojoDndAvatarItem td > * {
+  padding: 4px 8px;
+  list-style-type: none;
+  background-color: #fff;
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+}

lib/flat/dijit/Common.styl

@@ -0,0 +1,104 @@
+@import 'dijit_variables';
+
+.dijitPopup {
+	border-radius: $popup-border-radius;
+}
+
+/* ----- Drag and Drop ----- */
+
+.dojoDndItem {
+	border: 1px solid $dnd-item-border-color;
+	cursor: pointer;
+	transition-duration: .25s;
+	transition-property: background-color, border-color, opacity;
+}
+
+/* hover */
+
+.dojoDndItemOver {
+	background-color: $dnd-hover-background-color;
+	border-radius: $dnd-hover-border-radius;
+}
+
+.dojoDndItemAnchor {
+	background-color: $dnd-anchor-background-color;
+	border: 1px dashed $dnd-anchor-border-color;
+	border-radius: $dnd-anchor-border-radius;
+}
+
+/* selected */
+
+.dojoDndItemSelected {
+}
+
+.dojoDndItemBefore {
+	background: transparent;
+	padding-top: 2px;
+	border-top: 1px solid $dnd-avatar-item-insert-indicator-color;
+}
+
+.dojoDndItemAfter {
+	background: transparent;
+	padding-bottom: 2px;
+	border-bottom: 1px solid $dnd-avatar-item-insert-indicator-color;
+}
+
+/* Avatar */
+
+table.dojoDndAvatar {
+	display: block;
+}
+
+.dojoDndAvatarHeader {
+	td	{ 
+		display: none;
+	}
+	&:before {
+		_icon-core-style();
+		display: table-cell;
+	}
+}
+
+/* cannot drop */
+
+.dojoDndMove .dojoDndAvatarHeader {
+	&:before {
+		color: $error;
+		content: $dnd-icon-no-drop;
+	}
+}
+
+.dojoDndCopy .dojoDndAvatarHeader {
+	&:before {
+		color: $error;
+		content: $dnd-icon-no-drop;
+	}
+}
+
+/* can drop */
+
+.dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{
+	&:before {
+		color: $success;
+		content: $dnd-icon-drop;
+	}
+}
+
+.dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader	{
+	&:before {
+		color: $success;
+		content: $dnd-icon-drop;
+	}
+}
+
+.dojoDndAvatarItem {
+	border-radius: $dnd-avatar-item-border-radius;
+	td {
+		> * {
+			padding: $dnd-avatar-item-padding;
+			list-style-type: none;
+			background-color: $dnd-avatar-item-background-color;
+			box-shadow: $dnd-avatar-item-box-shadow;
+		}
+	}
+}

lib/flat/dijit/Dialog.css

@@ -0,0 +1,274 @@
+/* Dialog 
+ * 
+ * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog
+ * 
+ * Dialog:
+ * 1. Dialog (default styling): 
+ * 		.dijitDialog - styles for dialog's bounding box
+ *
+ * 2. Dialog title 
+ * 		.dijitDialogTitleBar - styles for the title container at the top of dialog
+ * 		.dijitDialogTitle - the text container in dialog title
+ * 
+ * 3. Dialog content 
+ * 		.dijitDialogPaneContent - main container for content area and action bar
+ * 		.dijitDialogPaneContentArea - styles for content container
+ * 
+ * 4. Dialog action bar 
+ * 		.dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content
+ * 
+ * 5. Dialog underlay 
+ * 		.dijitDialogUnderlay - div under the dialog which used for separate dialog and page content
+ * 
+ * 
+ * Tooltip & TooltipDialog:
+ * 1. tooltip content container: 
+ * 		.dijitTooltipContainer - tooltip content container
+ *
+ * 2. tooltip connector: 
+ * 		.dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right)
+ */
+.flat .dijitDialog {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+}
+.flat .dijitDialogPaneContent {
+  background-color: #fff;
+  border-radius: 0 0 3px 3px;
+  padding: 8px;
+  position: relative;
+}
+.flat .dijitDialogPaneActionBar {
+/* the bar at bottom with OK/Cancel buttons */
+  padding-top: 8px;
+  text-align: right;
+  position: relative;
+}
+.flat .dijitDialogPaneActionBar .dijitButton {
+  float: none;
+}
+.flat .dijitTooltipDialog .dijitDialogPaneActionBar {
+  border-radius: 0 0 3px 3px;
+  margin: 8px 0 0;
+}
+.flat .dijitDialogTitleBar {
+/* outer container for the titlebar of the dialog */
+  line-height: 20px;
+  border-bottom: 1px solid #e0e0e0;
+  padding: 8px 12px;
+  border-radius: 3px 3px 0 0;
+}
+.flat .dijitDialogTitle {
+/* typography and styling of the dialog title */
+  font-size: 1.1em;
+  font-weight: bold;
+}
+.flat .dijitDialogCloseIcon {
+/* the default close icon for the dialog */
+  width: 20px;
+  height: 20px;
+  line-height: 20px;
+  text-align: center;
+  position: absolute;
+  top: 8px;
+  right: 12px;
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitDialogCloseIcon:before {
+  content: "\f00e";
+  font-size: 20px;
+}
+.flat .dijitDialogCloseIcon .closeText {
+  display: none;
+}
+.flat .dijitDialogCloseIconHover,
+.flat .dijitDialogCloseIconActive {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .dijitDialogUnderlay {
+  background: #000;
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitTooltip,
+.flat .dijitTooltipDialog {
+/* the outermost dom node, holding the connector and container */
+  background: transparent; /* make the area on the sides of the arrow transparent */
+}
+.flat .dijitTooltipContainer {
+  background-color: #424242;
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+  padding: 4px 8px;
+  border-radius: 3px;
+}
+.flat .dijitTooltip .dijitTooltipContainer {
+  color: #fff;
+  border: 0 none;
+}
+.flat .dijitTooltipConnector {
+/* the arrow */
+  z-index: 2;
+  width: auto;
+  height: auto;
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .dijitTooltipABRight .dijitTooltipConnector {
+/* above or below tooltip, but the arrow appears on the right,
+			and the right edges of target and tooltip are aligned rather than the left */
+  left: auto !important;
+  right: 8px;
+}
+.flat .dijitTooltipBelow {
+/* leave room for arrow above content */
+  padding-top: 4px;
+}
+.flat .dijitTooltipBelow .dijitTooltipConnector {
+/* the arrow piece for tooltips below an element */
+  top: 0;
+  left: 8px;
+  border-bottom: 4px solid #424242;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-top: 0;
+}
+.flat .dijitTooltipAbove {
+/* leave room for arrow below content */
+  padding-bottom: 4px;
+}
+.flat .dijitTooltipAbove .dijitTooltipConnector {
+/* the arrow piece for tooltips above an element */
+  bottom: 0;
+  left: 8px;
+  border-top: 4px solid #424242;
+  border-left: 4px solid transparent;
+  border-right: 4px solid transparent;
+  border-bottom: 0;
+}
+.flat .dijitTooltipLeft {
+  padding-right: 4px;
+}
+.flat .dijitTooltipLeft .dijitTooltipConnector {
+/* the arrow piece for tooltips to the left of an element, bottom borders aligned */
+  right: 0;
+  border-left: 4px solid #424242;
+  border-bottom: 4px solid transparent;
+  border-top: 4px solid transparent;
+  border-right: 0;
+}
+.flat .dijitTooltipRight {
+  padding-left: 4px;
+}
+.flat .dijitTooltipRight .dijitTooltipConnector {
+/* the arrow piece for tooltips to the right of an element, bottom borders aligned */
+  left: 0;
+  border-bottom: 4px solid transparent;
+  border-top: 4px solid transparent;
+  border-right: 4px solid #424242;
+}
+.flat .dijitTooltipDialog .dijitTooltipContainer {
+  background: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .dijitTooltipDialog.dijitTooltipBelow {
+  padding-top: 6px;
+}
+.flat .dijitTooltipDialog.dijitTooltipAbove {
+  padding-bottom: 6px;
+}
+.flat .dijitTooltipDialog.dijitTooltipLeft {
+  padding-right: 6px;
+}
+.flat .dijitTooltipDialog.dijitTooltipRight {
+  padding-left: 6px;
+}
+.flat .dijitTooltipDialog .dijitTooltipConnector {
+  height: 0;
+  width: 0;
+  position: absolute;
+  z-index: 2;
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .dijitTooltipDialog .dijitTooltipConnector:after {
+  content: "";
+  height: 0;
+  width: 0;
+  position: absolute;
+}
+.flat .dijitTooltipDialog.dijitTooltipAbove .dijitTooltipConnector {
+  border-color: #9e9e9e transparent transparent;
+  border-width: 7px 7px 0; /* one extra pixel is added as the border of the arrows */
+  border-style: solid;
+}
+.flat .dijitTooltipDialog.dijitTooltipAbove .dijitTooltipConnector:after {
+  border-color: #fff transparent transparent;
+  border-width: 6px 6px 0;
+  border-style: solid;
+  left: -6px;
+  top: -7px;
+}
+.flat .dijitTooltipDialog.dijitTooltipBelow .dijitTooltipConnector {
+  border-color: transparent transparent #9e9e9e;
+  border-width: 0 7px 7px;
+  border-style: solid;
+}
+.flat .dijitTooltipDialog.dijitTooltipBelow .dijitTooltipConnector:after {
+  border-color: transparent transparent #fff;
+  border-width: 0 6px 6px;
+  border-style: solid;
+  left: -6px;
+  bottom: -7px;
+}
+.flat .dijitTooltipDialog.dijitTooltipLeft .dijitTooltipConnector {
+  border-color: transparent transparent transparent #9e9e9e;
+  border-width: 7px 0 7px 7px;
+  border-style: solid;
+}
+.flat .dijitTooltipDialog.dijitTooltipLeft .dijitTooltipConnector:after {
+  border-color: transparent transparent transparent #fff;
+  border-width: 6px 0 6px 6px;
+  border-style: solid;
+  top: -6px;
+  left: -7px;
+}
+.flat .dijitTooltipDialog.dijitTooltipRight .dijitTooltipConnector {
+  border-color: transparent #9e9e9e transparent transparent;
+  border-width: 7px 7px 7px 0;
+  border-style: solid;
+}
+.flat .dijitTooltipDialog.dijitTooltipRight .dijitTooltipConnector:after {
+  border-color: transparent #fff transparent transparent;
+  border-width: 6px 6px 6px 0;
+  border-style: solid;
+  top: -6px;
+  right: -7px;
+}

lib/flat/dijit/Dialog.styl

@@ -0,0 +1,308 @@
+/* Dialog 
+ * 
+ * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog
+ * 
+ * Dialog:
+ * 1. Dialog (default styling): 
+ * 		.dijitDialog - styles for dialog's bounding box
+ *
+ * 2. Dialog title 
+ * 		.dijitDialogTitleBar - styles for the title container at the top of dialog
+ * 		.dijitDialogTitle - the text container in dialog title
+ * 
+ * 3. Dialog content 
+ * 		.dijitDialogPaneContent - main container for content area and action bar
+ * 		.dijitDialogPaneContentArea - styles for content container
+ * 
+ * 4. Dialog action bar 
+ * 		.dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content
+ * 
+ * 5. Dialog underlay 
+ * 		.dijitDialogUnderlay - div under the dialog which used for separate dialog and page content
+ * 
+ * 
+ * Tooltip & TooltipDialog:
+ * 1. tooltip content container: 
+ * 		.dijitTooltipContainer - tooltip content container
+ *
+ * 2. tooltip connector: 
+ * 		.dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right)
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+		
+	/* ----- Dialog ----- */
+	
+	.dijitDialog {
+		background-color: $dialog-background-color;
+		border: 1px solid $dialog-border-color;
+		border-radius: $dialog-border-radius;
+		box-shadow: $dialog-box-shadow;
+	}
+
+	/* content pane */
+
+	.dijitDialogPaneContent {
+		background-color: $dialog-content-bg-color;
+		border-radius: 0 0 $dialog-border-radius $dialog-border-radius;
+		padding: $dialog-padding;
+		position: relative;
+	}
+
+	/* action bar */
+
+	.dijitDialogPaneActionBar {
+		/* the bar at bottom with OK/Cancel buttons */
+		padding-top: $dialog-padding;
+		text-align: right;
+		position: relative;
+		.dijitButton {
+			float: none;
+		}
+	}
+
+	/* action bar within a TooltipDialog */
+	.dijitTooltipDialog .dijitDialogPaneActionBar {
+		border-radius: 0 0 $dialog-border-radius $dialog-border-radius
+		margin: $dialog-padding  0 0;
+	}
+
+	/* title bar */
+
+	.dijitDialogTitleBar {
+		/* outer container for the titlebar of the dialog */
+		line-height: $line-height;
+		border-bottom: 1px solid $dialog-titlebar-border-color;
+		padding: $dialog-padding $dialog-padding * 1.5;
+		border-radius: $dialog-border-radius $dialog-border-radius 0 0;
+	}
+
+	.dijitDialogTitle {
+		/* typography and styling of the dialog title */
+		font-size: $dialog-titlebar-font-size;
+		font-weight: bold;
+	}
+
+	/* close button */
+	
+	.dijitDialogCloseIcon {
+		/* the default close icon for the dialog */
+		width: $dialog-close-icon-size;
+		height: @width;
+		line-height: @height;
+		text-align: center;
+		position: absolute;
+		top: ($line-height + $dialog-padding * 2 - 20px ) * 0.5;
+		right: $dialog-padding * 1.5;
+		_icon-core-style();
+		opacity: 0.65;
+		
+		&:before {
+			content: $dialog-close-icon;
+			font-size: $dialog-close-icon-size;
+		}
+
+		.closeText {
+			display: none;
+		}
+	}
+
+	.dijitDialogCloseIconHover,
+	.dijitDialogCloseIconActive {
+		opacity: 1;
+	}
+
+	/* underlay */
+		
+	.dijitDialogUnderlay {
+		background: $dialog-underlay-color;
+		opacity: $dialog-underlay-opacity;
+	}
+
+	/* ----- Tooltip and TooltipDialog ----- */
+
+	.dijitTooltip,
+	.dijitTooltipDialog {
+		/* the outermost dom node, holding the connector and container */
+		background: transparent; /* make the area on the sides of the arrow transparent */
+	}
+
+	.dijitTooltipContainer {
+		background-color: $tooltip-background-color;
+		opacity: $tooltip-opacity;
+		padding: $tooltip-padding $tooltip-padding * 2;
+		border-radius: $tooltip-border-radius;
+	} 
+
+	.dijitTooltip .dijitTooltipContainer {
+		color: $tooltip-text-color;
+		border: $tooltip-border;
+	}
+
+	.dijitTooltipConnector {
+		/* the arrow */
+		z-index: 2;
+		width:auto;
+		height:auto;
+		opacity: $tooltip-opacity;
+	}
+
+	.dijitTooltipABRight .dijitTooltipConnector {
+		/* above or below tooltip, but the arrow appears on the right,
+			and the right edges of target and tooltip are aligned rather than the left */
+		left: auto !important;
+		right: $tooltip-padding * 2;
+	}
+
+	.dijitTooltipBelow {
+		/* leave room for arrow above content */
+		padding-top: $tooltip-arrow-thickness;
+
+		.dijitTooltipConnector {
+			/* the arrow piece for tooltips below an element */
+			top: 0;
+			left: $tooltip-padding * 2;
+			border-bottom: $tooltip-arrow-thickness solid $tooltip-arrow-color;
+			border-left: $tooltip-arrow-thickness solid transparent;
+			border-right: $tooltip-arrow-thickness solid transparent;
+			border-top: 0;
+		}
+	}
+
+	.dijitTooltipAbove {
+		/* leave room for arrow below content */
+		padding-bottom: $tooltip-arrow-thickness;
+
+		.dijitTooltipConnector {
+			/* the arrow piece for tooltips above an element */
+			bottom: 0;
+			left: $tooltip-padding * 2;
+			border-top: $tooltip-arrow-thickness solid $tooltip-arrow-color;
+			border-left: $tooltip-arrow-thickness solid transparent;
+			border-right: $tooltip-arrow-thickness solid transparent;
+			border-bottom: 0;
+		}
+	}
+
+	.dijitTooltipLeft {
+		padding-right: $tooltip-arrow-thickness;
+
+		.dijitTooltipConnector {
+			/* the arrow piece for tooltips to the left of an element, bottom borders aligned */
+			right: 0;
+			border-left: $tooltip-arrow-thickness solid $tooltip-arrow-color;
+			border-bottom: $tooltip-arrow-thickness solid transparent;
+			border-top: $tooltip-arrow-thickness solid transparent;
+			border-right: 0;
+		}
+	}
+
+	.dijitTooltipRight {
+		padding-left: $tooltip-arrow-thickness;
+
+		.dijitTooltipConnector {
+			/* the arrow piece for tooltips to the right of an element, bottom borders aligned */
+			left: 0;
+			border-bottom: $tooltip-arrow-thickness solid transparent;
+			border-top: $tooltip-arrow-thickness solid transparent;
+			border-right: $tooltip-arrow-thickness solid $tooltip-arrow-color;
+		}
+	}
+
+	/* ----- TooltipDialog ----- */
+
+	.dijitTooltipDialog {
+		.dijitTooltipContainer {
+			background: $dialog-background-color;
+			border: 1px solid $dialog-border-color;
+			border-radius: $dialog-border-radius;
+			box-shadow: $dialog-box-shadow;
+			opacity:1;
+		}
+		&.dijitTooltipBelow {
+			padding-top: $dialog-arrow-thickness;
+		}
+		&.dijitTooltipAbove {
+			padding-bottom: $dialog-arrow-thickness;
+		}
+		&.dijitTooltipLeft {
+			padding-right: $dialog-arrow-thickness;
+		}
+		&.dijitTooltipRight {
+			padding-left: $dialog-arrow-thickness;
+		}
+
+		/* The tooltip dialog's connector itself serves as the "border" of the arrows,*/
+		/* then using :after to overlay the connector to "fill" the arrows with the same color as the container. */
+		.dijitTooltipConnector {
+			height: 0;
+			width: 0;
+			position: absolute;
+			z-index: 2;
+			opacity: 1;
+
+			&:after {
+				content: "";
+				height: 0;
+				width: 0;
+				position: absolute;
+			}
+		}
+
+		&.dijitTooltipAbove .dijitTooltipConnector {
+			border-color: $dialog-arrow-border-color transparent transparent;
+			border-width: $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px 0; /* one extra pixel is added as the border of the arrows */;
+			border-style: solid;
+
+			&:after {
+				border-color: $dialog-arrow-background-color transparent transparent;
+				border-width: $dialog-arrow-thickness $dialog-arrow-thickness 0;
+				border-style: solid;
+				left: - $dialog-arrow-thickness;
+				top: - $dialog-arrow-thickness - 1px;
+			}
+		}
+		&.dijitTooltipBelow .dijitTooltipConnector {
+			border-color: transparent transparent $dialog-arrow-border-color;
+			border-width: 0 $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px;
+			border-style: solid;
+
+			&:after {
+				border-color: transparent transparent $dialog-arrow-background-color;
+				border-width: 0 $dialog-arrow-thickness $dialog-arrow-thickness;
+				border-style: solid;
+				left: - $dialog-arrow-thickness;
+				bottom: - $dialog-arrow-thickness - 1px;
+			}
+		}
+		&.dijitTooltipLeft .dijitTooltipConnector {
+			border-color: transparent transparent transparent $dialog-arrow-border-color;
+			border-width: $dialog-arrow-thickness + 1px 0 $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px;
+			border-style: solid;
+
+			&:after {
+				border-color: transparent transparent transparent $dialog-arrow-background-color;
+				border-width: $dialog-arrow-thickness 0 $dialog-arrow-thickness $dialog-arrow-thickness;
+				border-style: solid;
+				top: - $dialog-arrow-thickness;
+				left: - $dialog-arrow-thickness - 1px;
+			}
+		}
+		&.dijitTooltipRight .dijitTooltipConnector {
+			border-color: transparent $dialog-arrow-border-color transparent transparent;
+			border-width: $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px 0;
+			border-style: solid;
+
+			&:after {
+				border-color: transparent $dialog-arrow-background-color transparent transparent;
+				border-width: $dialog-arrow-thickness $dialog-arrow-thickness $dialog-arrow-thickness 0;
+				border-style: solid;
+				top: - $dialog-arrow-thickness;
+				right: - $dialog-arrow-thickness - 1px;
+			}
+		}
+	}
+	
+}

lib/flat/dijit/Dialog_rtl.css

@@ -0,0 +1,8 @@
+.flat .dijitDialogRtl .dijitDialogCloseIcon {
+  right: auto;
+  left: 12px;
+}
+.flat .dijitDialogRtl .dijitDialogPaneActionBar,
+.flat .dijitTooltipDialogRtl .dijitDialogPaneActionBar {
+  text-align: left;
+}

lib/flat/dijit/Dialog_rtl.styl

@@ -0,0 +1,17 @@
+@import 'dijit_variables';
+
+.{$theme-name} {
+	
+	.dijitDialogRtl .dijitDialogCloseIcon {
+		right: auto;
+		left: $dialog-padding * 1.5;
+	}
+
+	.dijitDialogRtl,
+	.dijitTooltipDialogRtl {
+		.dijitDialogPaneActionBar {
+			text-align: left;
+		}
+	}
+
+}

lib/flat/dijit/Editor.css

@@ -0,0 +1,53 @@
+/* Editor 
+ * 
+ * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer)
+ * 
+ * 1. Editor iframe container (default styling): 
+ * 		.dijitEditorIFrameContainer - normal state styles: background-color, border, padding
+ *
+ * 2. hovered Editor iframe container (ie, mouse hover on editor)
+ * 		.dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container
+ * 
+ * 3. focused Editor iframe container (ie, mouse focus on the editor pane)
+ * 		.dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused
+ * 
+ * 3. disabled Editor iframe container 
+ * 		.dijitEditorDisabled - editor's inner iframe container disable status styles: background, border
+ */
+.flat .dijitEditor {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+}
+.flat .dijitEditor .dijitEditorIFrameContainer {
+  border: 1px solid transparent;
+  border-top: 1px solid #9e9e9e;
+  padding: 4px 8px;
+  -webkit-transition: border 0.2s linear 0s;
+  -moz-transition: border 0.2s linear 0s;
+  -o-transition: border 0.2s linear 0s;
+  -ms-transition: border 0.2s linear 0s;
+  transition: border 0.2s linear 0s;
+}
+.flat .dijitEditorHover .dijitEditorIFrameContainer,
+.flat .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame {
+  border: 1px solid #2196f3;
+}
+.flat .dijitEditorFocused .dijitEditorIFrameContainer {
+  border: 1px solid #2196f3;
+}
+.flat .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame {
+  border: 1px solid #2196f3;
+}
+.flat .dijitEditorDisabled {
+  border: 1px solid #9e9e9e;
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitEditorDisabled .dijitEditorIFrame,
+.flat .dijitEditorDisabled .dijitEditorIFrameContainer,
+.flat .dijitEditorDisabled .dijitEditorIFrameContainer .dijitEditorIFrame {
+  background-color: #f5f5f5;
+  border: 1px solid transparent;
+}

lib/flat/dijit/Editor.styl

@@ -0,0 +1,69 @@
+/* Editor 
+ * 
+ * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer)
+ * 
+ * 1. Editor iframe container (default styling): 
+ * 		.dijitEditorIFrameContainer - normal state styles: background-color, border, padding
+ *
+ * 2. hovered Editor iframe container (ie, mouse hover on editor)
+ * 		.dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container
+ * 
+ * 3. focused Editor iframe container (ie, mouse focus on the editor pane)
+ * 		.dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused
+ * 
+ * 3. disabled Editor iframe container 
+ * 		.dijitEditorDisabled - editor's inner iframe container disable status styles: background, border
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitEditor {
+		background-color: $editor-background-color;
+		border: 1px solid $editor-border-color;
+		border-radius: $editor-border-radius;
+
+		.dijitEditorIFrameContainer {
+			border: 1px solid $editor-iframe-border-color;
+			border-top: 1px solid $editor-border-color;
+			padding: $editor-iframe-padding;
+			transition: border 0.2s linear 0s;
+		}
+	}
+
+	/* Hover */
+
+	.dijitEditorHover {
+		.dijitEditorIFrameContainer,
+		.dijitEditorIFrameContainer .dijitEditorIFrame {
+			border: 1px solid $editor-iframe-hover-border-color;
+		}
+	}
+
+	/* Focused */
+
+	.dijitEditorFocused {
+		.dijitEditorIFrameContainer {
+			border: 1px solid $editor-iframe-focused-border-color;
+		}
+		.dijitEditorIFrameContainer .dijitEditorIFrame {
+			border: 1px solid $editor-iframe-focused-border-color;
+		}
+	}
+
+	/* Disabled */
+
+	.dijitEditorDisabled {
+		border: 1px solid $editor-disabled-border-color;
+		opacity: $disabled-opacity;
+
+		.dijitEditorIFrame,
+		.dijitEditorIFrameContainer,
+		.dijitEditorIFrameContainer .dijitEditorIFrame {
+			background-color: $editor-iframe-disabled-background-color;
+			border: 1px solid $editor-iframe-disabled-border-color;
+		}
+	}
+	
+}

lib/flat/dijit/Editor_rtl.styl

@@ -0,0 +1,8 @@
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitEditorRtl {
+	}
+
+}

lib/flat/dijit/InlineEditBox.css

@@ -0,0 +1,23 @@
+/* InlineEditBox
+ * 
+ * Styling InlineEditBox mainly includes:
+ * 
+ * 1. Normal state
+ * 		.dijitInlineEditBoxDisplayMode  - for border
+ * 
+ * 2. Hover state
+ * 		.dijitInlineEditBoxDisplayModeHover - for border and background color
+ */
+.flat .dijitInlineEditBoxDisplayMode {
+  border: 1px dashed transparent;
+  padding: 4px 6px;
+}
+.flat .dijitInlineEditBoxDisplayModeHover {
+  background-color: transparent;
+  border: 1px dashed #2196f3;
+}
+.flat .dijitInlineEditBoxDisplayModeDisabled {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}

lib/flat/dijit/InlineEditBox.styl

@@ -0,0 +1,31 @@
+/* InlineEditBox
+ * 
+ * Styling InlineEditBox mainly includes:
+ * 
+ * 1. Normal state
+ * 		.dijitInlineEditBoxDisplayMode  - for border
+ * 
+ * 2. Hover state
+ * 		.dijitInlineEditBoxDisplayModeHover - for border and background color
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+			
+	.dijitInlineEditBoxDisplayMode {
+		border: 1px dashed $inlineeditbox-border-color;
+		padding: $inlineeditbox-padding;
+		border-radius: $inlineeditbox-border-radius;
+	}
+
+	.dijitInlineEditBoxDisplayModeHover {
+		background-color: $inlineeditbox-hover-background-color;
+		border: 1px dashed $inlineeditbox-hover-border-color;
+	}
+
+	.dijitInlineEditBoxDisplayModeDisabled {
+		opacity: $disabled-opacity;
+	}
+
+}

lib/flat/dijit/Menu.css

@@ -0,0 +1,157 @@
+/* Menu 
+
+There are three areas of styling for the Menu:  
+ 
+ 1. The menu 
+ 	There are three types of menus:
+ 	i) Context Menu
+ 	ii) Drop down Menu
+ 	iii) Navigation Menu
+ 	All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
+ 	.dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
+  .dijitMenuTable - for padding - also affects Select widget 	
+  	
+ 2. The menu bar
+ 	.dijitMenuBar - for border, margins, padding, background-color of the menu bar
+ 	.dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) 
+ 	
+ 3. Menu items - items in the menu.  
+ 	.dijitMenuItem - for color
+ 	.dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected	
+ 	.dijitMenuItemActive - for background-color of an active (mousedown) menu item
+	td.dijitMenuItemIconCell - for padding around a  menu item's icon
+	td.dijitMenuItemLabel - for padding around a menu item's label	
+	.dijitMenuSeparatorTop - for border, top border, of the separator
+	.dijitMenuSeparatorBottom - for bottom margin of the separator
+	
+	Styles specific to ComboBox and FilteringSelect widgets: 
+	.dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu
+	.dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu
+
+*/
+.flat .dijitMenu {
+  background: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+  margin: 0;
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+}
+.flat .dijitMenuTable,
+.flat .dijitComboBoxMenu {
+  padding: 8px 0;
+}
+.flat .dijitComboBoxMenu {
+  margin-left: 0;
+  background-image: none;
+}
+.flat .dijitMenuTable {
+/* this prevents jiggling upon hover of a menu item */
+  border-collapse: separate;
+  border-spacing: 0 0;
+}
+.flat .dijitMenuItem,
+.flat .dijitMenuItem td {
+  line-height: 20px;
+  padding: 8px;
+  white-space: nowrap;
+}
+.flat .dijitMenuItemHover td,
+.flat .dijitMenuItemHover {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitMenuItemActive td,
+.flat .dijitMenuItemActive {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitMenuItemSelected td,
+.flat .dijitMenuItemSelected {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitMenuItemDisabled {
+  color: #9e9e9e;
+}
+.flat .dijitMenuItemDisabled.dijitMenuItemSelected td,
+.flat .dijitMenuItemDisabled.dijitMenuItemSelected {
+  color: #f2f2f2;
+  background: #6fbbf7;
+}
+.flat .dijitMenuSeparatorTop {
+  height: auto;
+  margin-top: 1px; /* prevents spacing above/below separator */
+  border-bottom: 1px solid #9e9e9e;
+}
+.flat .dijitMenuSeparatorBottom {
+  height: auto;
+  margin-bottom: 1px;
+  border-top: 1px solid transparent;
+}
+.flat td.dijitMenuItemIconCell {
+  padding: 4px;
+  margin: 0 0 0 4px;
+  text-align: center;
+}
+.flat .dijitMenuExpand {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.flat .dijitMenuExpand:before {
+  content: "\f001";
+}
+.flat .dijitCheckedMenuItemIconChar {
+  display: none;
+}
+.flat .dijitMenuPreviousButton,
+.flat .dijitMenuNextButton {
+  font-style: italic;
+}
+.flat .dijitMenuBar {
+  margin: 0;
+  padding: 0;
+  background-color: #f5f5f5;
+}
+.flat .dijitMenuBar .dijitMenuItem {
+  padding: 8px 12px;
+  margin: 0;
+}
+.flat .dijitMenuBar .dijitMenuItemHover {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitMenuBar .dijitMenuItemActive {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitMenuBar .dijitMenuItemSelected,
+.flat .dijitMenuBar .dijitMenuItemHover.dijitMenuItemSelected,
+.flat .dijitMenuBar .dijitMenuItemActive.dijitMenuItemSelected {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitMenuBar .dijitMenuItemDisabled.dijitMenuItemSelected {
+  color: #f2f2f2;
+  background: #6fbbf7;
+}
+.flat .dijitMenuPopup {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.flat .dijitMenuPopup .dijitMenu {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+.flat .dijitMenuPopup .dijitMenuItem,
+.flat .dijitMenuPopup .dijitMenuItem td {
+  padding: 8px;
+}

lib/flat/dijit/Menu.styl

@@ -0,0 +1,191 @@
+/* Menu 
+
+There are three areas of styling for the Menu:  
+ 
+ 1. The menu 
+ 	There are three types of menus:
+ 	i) Context Menu
+ 	ii) Drop down Menu
+ 	iii) Navigation Menu
+ 	All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border
+ 	.dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect
+  .dijitMenuTable - for padding - also affects Select widget 	
+  	
+ 2. The menu bar
+ 	.dijitMenuBar - for border, margins, padding, background-color of the menu bar
+ 	.dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) 
+ 	
+ 3. Menu items - items in the menu.  
+ 	.dijitMenuItem - for color
+ 	.dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected	
+ 	.dijitMenuItemActive - for background-color of an active (mousedown) menu item
+	td.dijitMenuItemIconCell - for padding around a  menu item's icon
+	td.dijitMenuItemLabel - for padding around a menu item's label	
+	.dijitMenuSeparatorTop - for border, top border, of the separator
+	.dijitMenuSeparatorBottom - for bottom margin of the separator
+	
+	Styles specific to ComboBox and FilteringSelect widgets: 
+	.dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu
+	.dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu
+
+*/
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+	/* ----- Menu (Common) ----- */
+	.dijitMenu {
+		background: $menu-background-color;
+		border: 1px solid $menu-border-color;
+		border-radius: $menu-border-radius;
+		margin: 0;
+		box-shadow: $popup-box-shadow;
+	}
+
+	.dijitMenuTable,
+	.dijitComboBoxMenu {
+		padding: $menu-padding 0;
+	}
+
+	.dijitComboBoxMenu {
+		margin-left:0;
+		background-image: none;
+	}
+
+	.dijitMenuTable {
+		/* this prevents jiggling upon hover of a menu item */
+		border-collapse: separate;
+		border-spacing: 0 0;
+	}
+
+	/* ---- MenuItem ---- */
+	.dijitMenuItem,
+	.dijitMenuItem td {
+		line-height: $line-height;
+		padding: $menu-item-padding;
+		white-space: nowrap;
+	}
+
+	// hover
+	.dijitMenuItemHover td,
+	.dijitMenuItemHover {
+		color: $menu-item-hovered-text-color;
+		background-color: $menu-item-hovered-background-color;
+	}
+
+	// active
+	.dijitMenuItemActive td,
+	.dijitMenuItemActive {
+		color: $menu-item-active-text-color;
+		background-color: $menu-item-active-background-color;
+	}
+
+	// selected
+	.dijitMenuItemSelected td,
+	.dijitMenuItemSelected {
+		color: $menu-item-selected-text-color;
+		background-color: $menu-item-selected-background-color;
+	}
+	
+	// disabled
+	.dijitMenuItemDisabled {
+		color: $menu-item-disabled-text-color;
+	}
+	
+	.dijitMenuItemDisabled.dijitMenuItemSelected td,
+	.dijitMenuItemDisabled.dijitMenuItemSelected {
+		color: $menu-item-disabled-hovered-text-color;
+		background: $menu-item-disabled-hovered-background-color;
+	}
+
+	/* ---- MenuItemSeparator ---- */
+	.dijitMenuSeparatorTop {
+		height: auto
+		margin-top: 1px; /* prevents spacing above/below separator */
+		border-bottom: 1px solid $menu-item-separator-top-color;
+	}
+
+	.dijitMenuSeparatorBottom {
+		height: auto;
+		margin-bottom:1px;
+		border-top: 1px solid $menu-item-separator-bottom-color;
+	}
+
+	/* ---- MenuItem icons ---- */
+	td.dijitMenuItemIconCell {
+		padding: $menu-item-icon-padding;
+		margin: 0 0 0 $menu-item-icon-margin;
+		text-align: center;
+	}
+
+	// popup menu icon
+	.dijitMenuExpand {
+		_icon-core-style();
+		&:before {
+			content: $menu-item-icon;
+		}
+	}
+
+	// checked icon
+	.dijitCheckedMenuItemIconChar {
+		display: none;
+	}
+
+	.dijitMenuPreviousButton, .dijitMenuNextButton {
+		font-style: italic;
+	}
+
+	/* ----- Menu Bar ----- */
+	.dijitMenuBar {
+		margin: 0;
+		padding: 0;
+		background-color: $menubar-background-color;
+
+		.dijitMenuItem {  
+			padding: $menubar-item-padding;
+			margin: 0;	
+		}
+		
+		// hover
+		.dijitMenuItemHover {
+			color: $menubar-item-hover-color;
+			background-color: $menubar-item-hover-background-color;
+		}
+
+		// active
+		.dijitMenuItemActive {
+			color: $menubar-item-active-color;
+			background-color: $menubar-item-active-background-color;
+		}
+		
+		// selected
+		.dijitMenuItemSelected,
+		.dijitMenuItemHover.dijitMenuItemSelected,
+		.dijitMenuItemActive.dijitMenuItemSelected {
+			color: $menubar-item-selected-text-color;
+			background-color: $menubar-item-selected-background-color;
+		}
+		
+		// disabled
+		.dijitMenuItemDisabled.dijitMenuItemSelected,
+		.dijitMenuItemDisabled.dijitMenuItemSelected {
+			color: $menu-item-disabled-hovered-text-color;
+			background: $menu-item-disabled-hovered-background-color;
+		}
+	}
+
+	/* ---- MenuBar Dropdown ---- */
+	.dijitMenuPopup {
+		border-top-left-radius: 0;
+		border-top-right-radius: 0;
+
+		.dijitMenu {
+			border-top-left-radius: 0;
+			border-top-right-radius: 0;
+		}
+		.dijitMenuItem, 
+		.dijitMenuItem td {
+			padding: $menubar-popup-item-padding;
+		}
+	}
+}

lib/flat/dijit/Menu_rtl.css

@@ -0,0 +1,9 @@
+.flat .dijitMenuBarRtl {
+  text-align: right;
+}
+.flat .dijitMenuItemRtl {
+  text-align: right;
+}
+.flat .dijitMenuItemRtl .dijitMenuExpand:before {
+  content: "\f000";
+}

lib/flat/dijit/Menu_rtl.styl

@@ -0,0 +1,20 @@
+@import 'dijit_variables';
+
+
+.{$theme-name} {
+
+	.dijitMenuBarRtl {
+		text-align: right;
+	}
+
+	.dijitMenuItemRtl {
+		text-align: right;
+		
+		.dijitMenuExpand {
+			&:before {
+				content: $menu-item-icon-rtl;
+			}
+		}
+	}
+	
+}

lib/flat/dijit/ProgressBar.css

@@ -0,0 +1,110 @@
+/* ProgressBar
+ * 
+ * Styling of the ProgressBar consists of the following:
+ * 
+ * 1. the base progress bar
+ *		.dijitProgressBar -	sets margins for the progress bar
+ *
+ * 2. the empty bar
+ *		.dijitProgressBarEmpty  - sets background img and color for bar or parts of bar that are not finished yet
+ *		Also sets border color for whole bar
+ *
+ * 3. tile mode
+ * 		.dijitProgressBarTile
+ *		inner container for finished portion when in 'tile' (image) mode 
+ * 	
+ * 4. full bar mode
+ * 		.dijitProgressBarFull
+ *		adds border to right side of the filled portion of bar
+ *
+ * 5. text for label of  bar
+ *		.dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. 
+ * 	
+ * 6. indeterminate mode
+ *		.dijitProgressBarIndeterminate .dijitProgressBarTile 
+ * 		sets animated gif for the progress bar in 'indeterminate' mode
+ */
+.flat .dijitProgressBar {
+  background-color: #e0e0e0;
+  border: 0 none;
+  border-radius: 3px;
+}
+.flat .dijitProgressBarTile {
+  background: url("images/progressBarStrips.png") repeat-x top;
+  -webkit-animation: progress-bar-stripes 2s linear infinite;
+  -moz-animation: progress-bar-stripes 2s linear infinite;
+  -o-animation: progress-bar-stripes 2s linear infinite;
+  -ms-animation: progress-bar-stripes 2s linear infinite;
+  animation: progress-bar-stripes 2s linear infinite;
+}
+.flat .dijitProgressBarFull {
+  background-color: #2196f3;
+  -webkit-transition-property: width;
+  -moz-transition-property: width;
+  -o-transition-property: width;
+  -ms-transition-property: width;
+  transition-property: width;
+  -webkit-transition-duration: 0.25s;
+  -moz-transition-duration: 0.25s;
+  -o-transition-duration: 0.25s;
+  -ms-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+  height: 100%;
+}
+.flat .dijitProgressBar.alt-primary .dijitProgressBarFull {
+  background-color: #1e88e5;
+}
+.flat .dijitProgressBar.alt-success .dijitProgressBarFull {
+  background-color: #43a047;
+}
+.flat .dijitProgressBar.alt-info .dijitProgressBarFull {
+  background-color: #03a9f4;
+}
+.flat .dijitProgressBar.alt-warning .dijitProgressBarFull {
+  background-color: #fb8c00;
+}
+.flat .dijitProgressBar.alt-danger .dijitProgressBarFull {
+  background-color: #e53935;
+}
+.flat .dijitProgressBar.alt-inverse .dijitProgressBarFull {
+  background-color: #616161;
+}
+.flat .dijitProgressBarLabel {
+  margin-top: 0.2em;
+  margin-bottom: 0.2em;
+  color: #fff;
+  font-size: 1em;
+  text-shadow: 0.1em 0.1em 1px #424242;
+}
+@-moz-keyframes progress-bar-stripes {
+  from {
+    background-position: 75px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+@-webkit-keyframes progress-bar-stripes {
+  from {
+    background-position: 75px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+@-o-keyframes progress-bar-stripes {
+  from {
+    background-position: 75px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}
+@keyframes progress-bar-stripes {
+  from {
+    background-position: 75px 0;
+  }
+  to {
+    background-position: 0 0;
+  }
+}

lib/flat/dijit/ProgressBar.styl

@@ -0,0 +1,70 @@
+/* ProgressBar
+ * 
+ * Styling of the ProgressBar consists of the following:
+ * 
+ * 1. the base progress bar
+ *		.dijitProgressBar -	sets margins for the progress bar
+ *
+ * 2. the empty bar
+ *		.dijitProgressBarEmpty  - sets background img and color for bar or parts of bar that are not finished yet
+ *		Also sets border color for whole bar
+ *
+ * 3. tile mode
+ * 		.dijitProgressBarTile
+ *		inner container for finished portion when in 'tile' (image) mode 
+ * 	
+ * 4. full bar mode
+ * 		.dijitProgressBarFull
+ *		adds border to right side of the filled portion of bar
+ *
+ * 5. text for label of  bar
+ *		.dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. 
+ * 	
+ * 6. indeterminate mode
+ *		.dijitProgressBarIndeterminate .dijitProgressBarTile 
+ * 		sets animated gif for the progress bar in 'indeterminate' mode
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+	
+	.dijitProgressBar {
+		background-color: $progress-bar-empty-color;
+		border: 0 none;
+		border-radius: $progress-bar-border-radius; 
+	}
+
+	.dijitProgressBarTile {	
+		background: url($progress-bar-strips-image-url) repeat-x top;
+		animation: progress-bar-stripes 2s linear infinite;
+	} 
+
+	.dijitProgressBarFull {
+		_progress-bar-color-properties($progress-bar-color);
+		transition-property: width;
+		transition-duration: .25s;
+		height: 100%;
+	}
+
+	// alternative colors
+	for class in $progress-bar-alternative-colors {
+		.dijitProgressBar.{class} .dijitProgressBarFull {
+			_progress-bar-color-properties($progress-bar-alternative-colors[class]);
+		}
+	}
+
+	.dijitProgressBarLabel {
+		margin-top: 0.2em;
+		margin-bottom: 0.2em;
+		color: $progress-bar-text-color;
+		font-size: $progress-bar-font-size;
+		text-shadow: $progress-bar-text-shadow;
+	}
+}
+
+// animation
+@keyframes progress-bar-stripes {
+  from { background-position: 75px 0; }
+  to { background-position: 0 0; }
+}

lib/flat/dijit/TimePicker.css

@@ -0,0 +1,60 @@
+/* Time Picker 
+ *
+ * Styling the Time Picker consists of the following: 
+ *
+ * 1. minor time values
+ * 		.dijitTimePickerTick - set text color, size, background color of minor values
+ * 		.dijitTimePickerTickHover - set hover style of minor time values
+ * 		dijitTimePickerTickSelected - set selected style of minor time values
+ *
+ * 2. major time values - 1:00, 2:00, times on the hour 
+ * 		set text color, size, background color, left/right margins for "zoom" affect
+ * 		.dijitTimePickerMarkerHover - to set hover style of major time values
+ * 		.dijitTimePickerMarkerSelected - set selected style of major time values
+ * 
+ * 3. up and down arrow buttons
+ * 		.dijitTimePicker .dijitButtonNode - background-color, border
+ * 		.dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state
+ *
+ *	Other classes provide the fundamental structure of the TimePicker and should not be modified. 
+ */
+.dijitTimePickerPopup {
+  -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2);
+  height: 200px;
+}
+.dijitTimePicker {
+  background-color: #fff;
+  padding: 4px 0;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+}
+.dijitTimePickerItem {
+  margin: 0;
+}
+.dijitTimePickerTick {
+/* minor value */
+  color: #9e9e9e;
+  border: 0 none;
+}
+.dijitTimePickerMarker {
+/* major value - 1:00, 2:00, times on the hour */
+  background-color: transparent;
+  white-space: nowrap;
+  border: 0 none;
+}
+.dijitTimePickerTickHover,
+.dijitTimePickerMarkerHover {
+  background: #f2f2f2;
+  color: #424242;
+}
+.dijitTimePickerMarkerSelected,
+.dijitTimePickerTickSelected {
+  background: #f2f2f2;
+  color: #424242;
+}
+.dijitTimePickerTick .dijitTimePickerItemInner,
+.dijitTimePickerMarker .dijitTimePickerItemInner {
+  padding: 8px;
+  margin: 0;
+}

lib/flat/dijit/TimePicker.styl

@@ -0,0 +1,71 @@
+/* Time Picker 
+ *
+ * Styling the Time Picker consists of the following: 
+ *
+ * 1. minor time values
+ * 		.dijitTimePickerTick - set text color, size, background color of minor values
+ * 		.dijitTimePickerTickHover - set hover style of minor time values
+ * 		dijitTimePickerTickSelected - set selected style of minor time values
+ *
+ * 2. major time values - 1:00, 2:00, times on the hour 
+ * 		set text color, size, background color, left/right margins for "zoom" affect
+ * 		.dijitTimePickerMarkerHover - to set hover style of major time values
+ * 		.dijitTimePickerMarkerSelected - set selected style of major time values
+ * 
+ * 3. up and down arrow buttons
+ * 		.dijitTimePicker .dijitButtonNode - background-color, border
+ * 		.dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state
+ *
+ *	Other classes provide the fundamental structure of the TimePicker and should not be modified. 
+ */
+
+@import 'dijit_variables';
+
+.dijitTimePickerPopup {
+	box-shadow: $timepicker-box-shadow;
+	height: 200px;
+}
+
+.dijitTimePicker {
+	background-color: $timepicker-background-color;
+	padding: $timepicker-padding;
+	border: 1px solid $timepicker-border-color;
+	border-radius: $timepicker-border-radius;
+}
+
+.dijitTimePickerItem {
+	margin:0;
+}
+
+.dijitTimePickerTick {
+	/* minor value */
+	color: $timepicker-tick-text-color;
+	border: 0 none;
+}
+
+.dijitTimePickerMarker {
+	/* major value - 1:00, 2:00, times on the hour */
+	background-color: $timepicker-marker-background-color;
+	white-space: nowrap;
+    border: 0 none;
+}
+
+.dijitTimePickerTickHover,
+.dijitTimePickerMarkerHover {
+	background: $timepicker-item-hovered-background-color;
+	color: $timepicker-item-hovered-text-color;
+}
+
+.dijitTimePickerMarkerSelected,
+.dijitTimePickerTickSelected {
+	background: $timepicker-item-selected-background-color;
+	color: $timepicker-item-selected-text-color;
+}
+
+.dijitTimePickerTick,
+.dijitTimePickerMarker {
+	.dijitTimePickerItemInner {
+		padding: $timepicker-item-padding;
+		margin:0;
+	}
+}

lib/flat/dijit/TitlePane.css

@@ -0,0 +1,118 @@
+/* TitlePane and Fieldset
+ *
+ * Styling TitlePane means styling the TitlePane title and its content container  (dijitTitlePane)
+ *
+ * TitlePane title:
+ * 1. TitlePane title (default styling):
+ * 		.dijitTitlePaneTitle - TitlePane's title div style: background-color, border
+ *
+ * 2. hovered TitlePane title (ie, mouse hover on a title bar)
+ * 		.dijitTitlePaneTitleHover - styles when mouse hover on the title div
+ *
+ * 3. active TitlePane title (ie, mouse down on a title bar)
+ * 		.dijitTitlePaneTitleActive - styles when mouse down on the title div
+ *
+ *
+ * TitlePane Content Container:
+ * 1. outer/inner container:
+ * 		.dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div
+ */
+.flat .dijitTitlePaneTitle {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  border-radius: 3px 3px 0 0;
+}
+.flat .dijitTitlePaneTitleHover,
+.flat .dijitFieldsetTitleHover {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+}
+.flat .dijitTitlePaneTitleActive,
+.flat .dijitFieldsetTitleActive {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitFieldset {
+  border-radius: 3px 3px 0 0;
+}
+.flat .dijitFieldset .dijitArrowNodeInner {
+  display: none;
+}
+.flat .dijitFieldset .dijitFieldsetTitleClosed .dijitArrowNode:before {
+  content: "\f006";
+}
+.flat .dijitTitlePane .dijitArrowNode,
+.flat .dijitFieldset .dijitArrowNode {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 18px;
+  text-align: center;
+}
+.flat .dijitTitlePane .dijitArrowNode:before,
+.flat .dijitFieldset .dijitArrowNode:before {
+  content: "\f007";
+}
+.flat .dijitTitlePane .dijitClosed,
+.flat .dijitFieldset .dijitClosed {
+  border-radius: 3px;
+}
+.flat .dijitTitlePane .dijitClosed .dijitArrowNode:before,
+.flat .dijitFieldset .dijitClosed .dijitArrowNode:before {
+  content: "\f006";
+}
+.flat .dijitTitlePaneContentOuter {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  border-top: none;
+  border-radius: 0 0 3px 3px;
+}
+.flat .dijitFieldset {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+}
+.flat .dijitTitlePaneContentInner,
+.flat .dijitFieldsetContentInner {
+  padding: 8px;
+}
+.flat .dijitTitlePaneTextNode,
+.flat .dijitFieldsetLegendNode {
+  margin-left: 8px;
+  margin-right: 8px;
+  vertical-align: text-top;
+}
+.flat .dijitFieldsetLegendNode {
+  cursor: default;
+}

lib/flat/dijit/TitlePane.styl

@@ -0,0 +1,110 @@
+/* TitlePane and Fieldset
+ *
+ * Styling TitlePane means styling the TitlePane title and its content container  (dijitTitlePane)
+ *
+ * TitlePane title:
+ * 1. TitlePane title (default styling):
+ * 		.dijitTitlePaneTitle - TitlePane's title div style: background-color, border
+ *
+ * 2. hovered TitlePane title (ie, mouse hover on a title bar)
+ * 		.dijitTitlePaneTitleHover - styles when mouse hover on the title div
+ *
+ * 3. active TitlePane title (ie, mouse down on a title bar)
+ * 		.dijitTitlePaneTitleActive - styles when mouse down on the title div
+ *
+ *
+ * TitlePane Content Container:
+ * 1. outer/inner container:
+ * 		.dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitTitlePaneTitle {
+		button-style();
+		if($titlepane-border-radius && $titlepane-border-radius >= 0) {
+			border-radius: $titlepane-border-radius $titlepane-border-radius 0 0;
+		}
+	}
+
+	.dijitTitlePaneTitleHover, .dijitFieldsetTitleHover {
+		button-hover-style();
+	}
+
+	.dijitTitlePaneTitleActive, .dijitFieldsetTitleActive {
+		button-active-style();
+	}
+
+	//.dijitTitlePaneTitleFocus {
+	//}
+
+	.dijitFieldset {
+		if($titlepane-border-radius && $titlepane-border-radius >= 0) {
+			border-radius: $titlepane-border-radius $titlepane-border-radius 0 0;
+		}
+
+		.dijitArrowNodeInner {
+			display: none;
+		}
+
+		.dijitFieldsetTitleClosed .dijitArrowNode:before {
+			content: $icon-expand;
+		}
+	}
+
+	.dijitTitlePane, .dijitFieldset {
+		.dijitArrowNode {
+			_icon-core-style();
+			font-size: $icon-expand-collapse-size;
+			text-align: center;
+			&:before {
+				content: $icon-collapse;
+			}
+		}
+
+		.dijitClosed {
+			if($titlepane-has-border-radius) {
+				border-radius: $titlepane-border-radius;
+			} else {
+				border-radius: 0;
+			}
+			.dijitArrowNode:before {
+				content: $icon-expand;
+			}
+		}
+	}
+
+	.dijitTitlePaneContentOuter {
+		background-color: $titlepane-content-background-color;
+		border: 1px solid $titlepane-content-border-color;
+		border-top: none;
+		if($titlepane-border-radius && $titlepane-border-radius >= 0) {
+			border-radius: 0 0 $titlepane-border-radius $titlepane-border-radius;
+		}
+	}
+
+	.dijitFieldset {
+		background-color: $titlepane-content-background-color;
+		border: 1px solid $titlepane-content-border-color;
+		if($titlepane-border-radius && $titlepane-border-radius >= 0) {
+			border-radius: $titlepane-border-radius;
+		}
+	}
+
+	.dijitTitlePaneContentInner, .dijitFieldsetContentInner {
+		padding: $titlepane-content-padding;
+	}
+
+	.dijitTitlePaneTextNode, .dijitFieldsetLegendNode {
+		margin-left: $padding*2;
+		margin-right: $padding*2;
+		vertical-align:text-top;
+	}
+
+	.dijitFieldsetLegendNode {
+		cursor: default;
+	}
+
+}

lib/flat/dijit/TitlePane_rtl.css

@@ -0,0 +1,7 @@
+/* TitlePane */
+.flat .dijitTitlePaneRtl .dijitTitlePaneTitle {
+  text-align: right;
+}
+.flat .dijitTitlePaneRtl .dijitClosed .dijitArrowNode:before {
+  content: "\f006";
+}

lib/flat/dijit/TitlePane_rtl.styl

@@ -0,0 +1,18 @@
+/* TitlePane */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitTitlePaneRtl {
+		.dijitTitlePaneTitle {
+			text-align: right;
+		}
+		.dijitClosed {
+			.dijitArrowNode:before {
+				content: $icon-expand;
+			}
+		}
+	}
+
+}

lib/flat/dijit/Toolbar.css

@@ -0,0 +1,137 @@
+/* Toolbar 
+ * 
+ * Styling Toolbar means styling the toolbar container and the widget inside toolbar  (dijitToolbar)
+ * 
+ * 1. toolbar (default styling): 
+ * 		.dijitToolbar - styles for outer container
+ *
+ * 2. widget inside toolbar
+ * 		.dijitToolbar .dijitButtonNode   - Button widget
+ * 					  .dijitComboButton  - ComboButton widget
+ * 					  .dijitDropDownButton  - DropDownButton widget
+ * 					  .dijitToggleButton  - ToggleButton widget
+ * 		
+ * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside)
+ * 			.dijitToolbar .dijitButtonNodeHover  - styles for hovered Button widget
+ * 
+ * 4. actived widget inside toolbar (ie, mouse down on the widget inside)
+ * 			.dijitToolbar .dijitButtonNodeActive  - mouse down on Button widget
+ */
+.flat .dijitToolbar {
+  background-color: #f5f5f5;
+  padding: 4px;
+  zoom: 1;
+/* Override default button styles */
+/* Hover */
+/*
+		.dijitComboButtonHover {
+			.dijitButtonNode,
+			.dijitDownArrowButton {
+			}
+
+			.dijitButtonNodeHover,
+			.dijitDownArrowButtonHover {
+			}
+		}
+		*/
+/* Active */
+/* Toggle button checked status */
+}
+.flat .dijitToolbar label {
+  padding: 8px;
+}
+.flat .dijitToolbar .dijitToggleButton,
+.flat .dijitToolbar .dijitButton,
+.flat .dijitToolbar .dijitDropDownButton,
+.flat .dijitToolbar .dijitComboButton {
+  margin-right: 4px;
+}
+.flat .dijitToolbar .dijitButton .dijitButtonNode,
+.flat .dijitToolbar .dijitDropDownButton .dijitButtonNode,
+.flat .dijitToolbar .dijitComboButton .dijitButtonNode,
+.flat .dijitToolbar .dijitToggleButton .dijitButtonNode,
+.flat .dijitToolbar .dijitComboBox .dijitButtonNode {
+  border-color: transparent;
+  padding: 4px;
+  background-color: transparent;
+  border-radius: 3px;
+  -webkit-transition-property: background-color;
+  -moz-transition-property: background-color;
+  -o-transition-property: background-color;
+  -ms-transition-property: background-color;
+  transition-property: background-color;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  -o-transition-duration: 0.3s;
+  -ms-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+.flat .dijitToolbar .dijitComboButton .dijitStretch {
+/* no rounded border on side adjacent to arrow */
+  border-radius: 3px 0 0 3px;
+}
+.flat .dijitToolbar .dijitComboButton .dijitArrowButton {
+/* no rounded border on side adjacent to button */
+  border-radius: 0 3px 3px 0;
+}
+.flat .dijitToolbar .dijitComboBox .dijitButtonNode {
+  padding: 0 8px;
+}
+.flat .dijitToolbar .dijitComboBox .dijitInputInner {
+  padding: 0;
+}
+.flat .dijitToolbar .dijitDropDownButton .dijitArrowButtonInner {
+  margin-left: 4px;
+}
+.flat .dijitToolbar .dijitButtonHover .dijitButtonNode,
+.flat .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode,
+.flat .dijitToolbar .dijitToggleButtonHover .dijitButtonNode,
+.flat .dijitToolbar .dijitComboButtonHover .dijitButtonNode {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+  border: 1px solid #9e9e9e;
+}
+.flat .dijitToolbar .dijitButtonActive .dijitButtonNode,
+.flat .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode,
+.flat .dijitToolbar .dijitToggleButtonActive .dijitButtonNode {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+  border: 1px solid #9e9e9e;
+}
+.flat .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+  border: 1px solid #9e9e9e;
+}
+.flat .dijitToolbarSeparator {
+  width: 1px;
+  height: 20px;
+  background-color: #9e9e9e;
+  padding: 0;
+  margin: 0 4px;
+}
+.flat .dijitDisabled .dijitToolbar {
+  background-color: #f5f5f5;
+  border-bottom: 1px solid #9e9e9e;
+}

lib/flat/dijit/Toolbar.styl

@@ -0,0 +1,145 @@
+/* Toolbar 
+ * 
+ * Styling Toolbar means styling the toolbar container and the widget inside toolbar  (dijitToolbar)
+ * 
+ * 1. toolbar (default styling): 
+ * 		.dijitToolbar - styles for outer container
+ *
+ * 2. widget inside toolbar
+ * 		.dijitToolbar .dijitButtonNode   - Button widget
+ * 					  .dijitComboButton  - ComboButton widget
+ * 					  .dijitDropDownButton  - DropDownButton widget
+ * 					  .dijitToggleButton  - ToggleButton widget
+ * 		
+ * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside)
+ * 			.dijitToolbar .dijitButtonNodeHover  - styles for hovered Button widget
+ * 
+ * 4. actived widget inside toolbar (ie, mouse down on the widget inside)
+ * 			.dijitToolbar .dijitButtonNodeActive  - mouse down on Button widget
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+	
+	.dijitToolbar {
+		background-color: $toolbar-background-color;
+		padding: $toolbar-padding;
+		zoom: 1;
+
+		label {
+			padding: $toolbar-label-padding;
+		}
+
+		.dijitToggleButton, 
+		.dijitButton, 
+		.dijitDropDownButton,
+		.dijitComboButton {
+			margin-right: $toolbar-button-spacing;
+		}
+
+		/* Override default button styles */
+
+		.dijitButton .dijitButtonNode,
+		.dijitDropDownButton .dijitButtonNode,
+		.dijitComboButton .dijitButtonNode,
+		.dijitToggleButton .dijitButtonNode,
+		.dijitComboBox .dijitButtonNode {
+			border-color: $toolbar-button-border-color;
+			padding: $toolbar-button-padding;
+			background-color: $toolbar-button-background-color;
+			border-radius: $toolbar-button-border-radius;
+			transition-property: background-color;
+			transition-duration: .3s;
+		}
+
+		.dijitComboButton {
+			.dijitStretch {
+				/* no rounded border on side adjacent to arrow */
+				border-radius: $toolbar-button-border-radius 0 0 $toolbar-button-border-radius;
+			}
+			.dijitArrowButton {
+				/* no rounded border on side adjacent to button */
+				border-radius: 0 $toolbar-button-border-radius $toolbar-button-border-radius 0;
+			}
+		}
+
+		.dijitComboBox {
+			//width: 10em;
+			.dijitButtonNode {
+				padding: 0 $padding*2;
+			}
+			.dijitInputInner {
+				padding: 0;
+			}
+		}
+
+		.dijitDropDownButton .dijitArrowButtonInner {
+			margin-left: $padding;
+		}
+		
+		/* Hover */
+
+		.dijitButtonHover .dijitButtonNode,
+		.dijitDropDownButtonHover .dijitButtonNode,
+		.dijitToggleButtonHover .dijitButtonNode,
+		.dijitComboButtonHover .dijitButtonNode {
+			button-hover-style();
+			border: 1px solid $toolbar-hover-border-color;
+		}
+
+		/*
+		.dijitComboButtonHover {
+			.dijitButtonNode,
+			.dijitDownArrowButton {
+			}
+
+			.dijitButtonNodeHover,
+			.dijitDownArrowButtonHover {
+			}
+		}
+		*/
+
+		/* Active */
+		
+		.dijitButtonActive .dijitButtonNode,
+		.dijitDropDownButtonActive .dijitButtonNode,
+		.dijitToggleButtonActive .dijitButtonNode {
+			button-active-style();
+			border: 1px solid $toolbar-active-border-color;
+		}
+		// .dijitComboButtonActive {
+		// 	.dijitButtonNode,
+		// 	.dijitDownArrowButton {
+		// 	}
+		// 	.dijitButtonNodeActive {
+		// 	}
+		// 	.dijitDownArrowButtonActive {
+		// 	}
+		// }
+		
+		/* Toggle button checked status */
+		
+		.dijitToggleButtonChecked .dijitButtonNode {
+			button-active-style();
+			border: 1px solid $toolbar-active-border-color;
+		}
+	}
+
+	/* Separator */
+
+	.dijitToolbarSeparator {
+		width: $toolbar-separator-width;
+		height: $toolbar-separator-height;
+		background-color: $toolbar-separator-color;
+		padding: 0;
+		margin: $toolbar-separator-margin;
+	}
+
+	/* Toolbar inside of disabled Editor */
+	.dijitDisabled .dijitToolbar {
+		background-color: $toolbar-disabled-background-color;
+		border-bottom: 1px solid $toolbar-disabled-border-bottom-color;
+	}
+
+}

lib/flat/dijit/Toolbar_rtl.css

@@ -0,0 +1,11 @@
+.flat .dijitToolbar .dijitToggleButtonRtl,
+.flat .dijitToolbar .dijitButtonRtl,
+.flat .dijitToolbar .dijitDropDownButtonRtl,
+.flat .dijitToolbar .dijitComboButtonRtl {
+  margin-left: 4px;
+  margin-right: auto;
+}
+.flat .dijitToolbar .dijitDropDownButtonRtl .dijitArrowButtonInner {
+  margin-left: auto;
+  margin-right: 4px;
+}

lib/flat/dijit/Toolbar_rtl.styl

@@ -0,0 +1,20 @@
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitToolbar {
+		.dijitToggleButtonRtl, 
+		.dijitButtonRtl, 
+		.dijitDropDownButtonRtl,
+		.dijitComboButtonRtl {
+			margin-left: $toolbar-button-spacing;
+			margin-right: auto;
+		}
+
+		.dijitDropDownButtonRtl .dijitArrowButtonInner {
+			margin-left: auto;
+			margin-right: $padding;
+		}
+	}
+
+}

lib/flat/dijit/Tree.css

@@ -0,0 +1,181 @@
+/* Tree
+ *
+ * Styling Tree mostly means styling the TreeRow (dijitTreeRow)
+ * There are 4 basic states to style:
+ *
+ * Tree Row:
+ * 1. tree row (default styling):
+ * 		.dijitTreeRow - styles for each row of the tree
+ *
+ * 2. hovered tree row (mouse hover on a tree row)
+ * 		.dijitTreeRowHover - styles when mouse over on one row
+ *
+ * 3. active tree row (mouse down on a tree row)
+ * 		.dijitTreeRowActive - styles when mouse down on one row
+ *
+ * 4. selected tree row
+ * 		dijitTreeRowSelected - style when the row has been selected
+ *
+ * Tree Expando:
+ * 	    dijitTreeExpando - the expando at the left of the text of each tree row
+ *
+ */
+.flat .dijitTreeIsRoot {
+  background-color: transparent;
+}
+.flat .dijitTreeRow,
+.flat .dijitTreeNode .dojoDndItemBefore,
+.flat .dijitTreeNode .dojoDndItemAfter {
+  padding: 8px 0;
+  border: 0 transparent;
+  line-height: 20px;
+  -webkit-transition-property: background-color;
+  -moz-transition-property: background-color;
+  -o-transition-property: background-color;
+  -ms-transition-property: background-color;
+  transition-property: background-color;
+  -webkit-transition-duration: 0.15s;
+  -moz-transition-duration: 0.15s;
+  -o-transition-duration: 0.15s;
+  -ms-transition-duration: 0.15s;
+  transition-duration: 0.15s;
+  -webkit-transition-timing-function: ease-out;
+  -moz-transition-timing-function: ease-out;
+  -o-transition-timing-function: ease-out;
+  -ms-transition-timing-function: ease-out;
+  transition-timing-function: ease-out;
+}
+.flat .dijitTreeRowHover {
+  background-color: #f2f2f2;
+  border-color: transparent;
+  -webkit-transition-duration: 0.15s;
+  -moz-transition-duration: 0.15s;
+  -o-transition-duration: 0.15s;
+  -ms-transition-duration: 0.15s;
+  transition-duration: 0.15s;
+}
+.flat .dijitTreeRowActive {
+  background-color: #f2f2f2;
+  border-color: transparent;
+}
+.flat .dijitTreeRowSelected,
+.flat .dijitTreeRowHover.dijitTreeRowSelected,
+.flat .dijitTreeRowActive.dijitTreeRowSelected {
+  color: #fff;
+  background-color: #2196f3;
+  border-color: transparent;
+}
+.flat .dijitTreeRowSelected .dijitTreeExpando,
+.flat .dijitTreeRowHover.dijitTreeRowSelected .dijitTreeExpando,
+.flat .dijitTreeRowActive.dijitTreeRowSelected .dijitTreeExpando {
+  color: #fff;
+}
+.flat .dijitTreeExpando {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  width: 16px;
+  height: 16px;
+  line-height: 16px;
+  text-align: center;
+  margin-left: 4px;
+  margin-right: 4px;
+  color: #2196f3;
+  vertical-align: middle;
+}
+.flat .dijitTreeExpandoOpened:before {
+  content: "\f012";
+  cursor: pointer;
+}
+.flat .dijitTreeExpandoClosed:before {
+  content: "\f011";
+}
+.flat .dijitTreeExpandoLoading {
+  -webkit-animation: spinning 2s linear infinite;
+  -moz-animation: spinning 2s linear infinite;
+  -o-animation: spinning 2s linear infinite;
+  -ms-animation: spinning 2s linear infinite;
+  animation: spinning 2s linear infinite;
+}
+.flat .dijitTreeExpandoLoading:before {
+  content: "\f01d";
+}
+.dj_ie8 .dijitTreeExpandoLoading,
+.dj_ie9 .dijitTreeExpandoLoading {
+  background: url("images/loadingAnimation.gif") no-repeat;
+}
+.dj_ie8 .dijitTreeExpandoLoading:before,
+.dj_ie9 .dijitTreeExpandoLoading:before {
+  content: "";
+}
+@-moz-keyframes spinning {
+  from {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    -webkit-transform: rotate(-360deg);
+    -moz-transform: rotate(-360deg);
+    -o-transform: rotate(-360deg);
+    -ms-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+  }
+}
+@-webkit-keyframes spinning {
+  from {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    -webkit-transform: rotate(-360deg);
+    -moz-transform: rotate(-360deg);
+    -o-transform: rotate(-360deg);
+    -ms-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+  }
+}
+@-o-keyframes spinning {
+  from {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    -webkit-transform: rotate(-360deg);
+    -moz-transform: rotate(-360deg);
+    -o-transform: rotate(-360deg);
+    -ms-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+  }
+}
+@keyframes spinning {
+  from {
+    -webkit-transform: rotate(0);
+    -moz-transform: rotate(0);
+    -o-transform: rotate(0);
+    -ms-transform: rotate(0);
+    transform: rotate(0);
+  }
+  to {
+    -webkit-transform: rotate(-360deg);
+    -moz-transform: rotate(-360deg);
+    -o-transform: rotate(-360deg);
+    -ms-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+  }
+}

lib/flat/dijit/Tree.styl

@@ -0,0 +1,122 @@
+/* Tree
+ *
+ * Styling Tree mostly means styling the TreeRow (dijitTreeRow)
+ * There are 4 basic states to style:
+ *
+ * Tree Row:
+ * 1. tree row (default styling):
+ * 		.dijitTreeRow - styles for each row of the tree
+ *
+ * 2. hovered tree row (mouse hover on a tree row)
+ * 		.dijitTreeRowHover - styles when mouse over on one row
+ *
+ * 3. active tree row (mouse down on a tree row)
+ * 		.dijitTreeRowActive - styles when mouse down on one row
+ *
+ * 4. selected tree row
+ * 		dijitTreeRowSelected - style when the row has been selected
+ *
+ * Tree Expando:
+ * 	    dijitTreeExpando - the expando at the left of the text of each tree row
+ *
+ */
+
+@import 'dijit_variables';
+
+.{$theme-name} {
+
+	.dijitTreeIsRoot {
+	    background-color: $tree-background-color;
+	}
+
+	.dijitTreeRow,
+	.dijitTreeNode .dojoDndItemBefore,
+	.dijitTreeNode .dojoDndItemAfter {
+		padding: $tree-row-padding;
+		border: 0 $tree-row-border-color;
+		line-height: $tree-row-line-height;
+		transition-property: background-color;
+		transition-duration: .15s;
+		transition-timing-function: ease-out;
+	}
+
+	/* Hover */
+
+	.dijitTreeRowHover {
+		background-color: $tree-row-hover-background-color;
+		border-color: $tree-row-hover-border-color;
+		transition-duration: .15s;
+	}
+
+	/* Active */
+
+	.dijitTreeRowActive {
+		background-color:$tree-row-active-background-color;
+		border-color: $tree-row-active-border-color;
+	}
+
+	/* Selected */
+
+	.dijitTreeRowSelected,
+	.dijitTreeRowHover.dijitTreeRowSelected,
+	.dijitTreeRowActive.dijitTreeRowSelected {
+		color: $tree-row-selected-text-color;
+		background-color: $tree-row-selected-background-color;
+		border-color: $tree-row-selected-border-color;
+		.dijitTreeExpando {
+			color: $tree-expando-icon-selected-color;
+		}
+	}
+
+	/* Focused */
+
+	/*
+	.dijitTreeRowFocused {
+	}
+	*/
+
+	/* expando (open/closed) icon */
+
+	.dijitTreeExpando {
+		_icon-core-style();
+	    width: $tree-expando-icon-width;
+	    height: $tree-expando-icon-height;
+		line-height: @height;
+		text-align: center;
+		margin-left: $tree-expando-margin;
+		margin-right: $tree-expando-margin;
+		color: $tree-expando-icon-color;
+		vertical-align: middle;
+	}
+
+	.dijitTreeExpandoOpened:before {
+		content: "\f012";
+		cursor: pointer;
+	}
+
+	.dijitTreeExpandoClosed:before {
+		content: "\f011";
+	}
+
+	.dijitTreeExpandoLoading {
+		animation: spinning 2s linear infinite;
+		&:before {
+			content: "\f01d";
+
+		}
+	}
+}
+
+.dj_ie8 .dijitTreeExpandoLoading,
+.dj_ie9 .dijitTreeExpandoLoading {
+	background:url('images/loadingAnimation.gif') no-repeat;
+
+	&:before {
+		content: "";
+	}
+}
+
+@keyframes spinning {
+	from {transform: rotate(0);}
+    to {transform: rotate(-360deg);}
+}

lib/flat/dijit/Tree_rtl.css

@@ -0,0 +1,9 @@
+.flat .dijitTreeRtl {
+  text-align: right;
+}
+.flat .dijitTreeRtl .dijitTreeContainer {
+  float: right;
+}
+.flat .dijitTreeRtl .dijitTreeExpandoClosed:before {
+  content: "\e60b";
+}

lib/flat/dijit/Tree_rtl.styl

@@ -0,0 +1,16 @@
+@import 'dijit_variables';
+
+.{$theme-name} {
+	
+	.dijitTreeRtl  {
+		text-align: right;
+			
+		.dijitTreeContainer {
+			float: right;	
+		}
+		.dijitTreeExpandoClosed:before {
+			content: "\e60b";
+		}
+	}
+
+}

lib/flat/dijit/dijit_variables.styl

@@ -0,0 +1,361 @@
+/* dijit/* variables */
+
+@import '../variables';
+
+/* Common (Common.styl) */
+
+// Popup (Dropdowns and Tooltip Dialogs)
+$popup-border-radius = $border-radius;
+$popup-box-shadow = $shadow-depth2;
+
+/* Dialog, Tooltip, TooltipDialog */
+
+// Dialog
+$dialog-background-color = $theme-base-color;
+$dialog-border-color = $border-color;
+$dialog-padding = $padding * 2;
+$dialog-border-radius = $border-radius;
+$dialog-box-shadow = $shadow-depth2;
+
+// content pane
+$dialog-content-bg-color = $theme-base-color;
+
+// title bar
+$dialog-titlebar-border-color = $grey-light;
+$dialog-titlebar-font-size = 1.1em;
+
+// close icon
+$dialog-close-icon = "\f00e";
+$dialog-close-icon-size = 20px;
+
+// underlay
+$dialog-underlay-color = $black;
+$dialog-underlay-opacity = 0.65;
+
+// Tooltip Dialog connector (arrow)
+$dialog-arrow-thickness = 6px;
+$dialog-arrow-border-color = $border-color;
+$dialog-arrow-background-color = $dialog-background-color;
+
+// Tooltip
+$tooltip-background-color = $grey-dark;
+$tooltip-text-color = $theme-base-color;
+$tooltip-padding = $padding;
+$tooltip-border = 0 none;
+$tooltip-border-radius = $border-radius;
+$tooltip-opacity = 1;
+
+// tooltip connector (arrow)
+$tooltip-arrow-color = $tooltip-background-color;
+$tooltip-arrow-thickness = 4px;
+
+/* Menu */
+
+$menu-background-color = $theme-base-color;
+$menu-border-color = $border-color;
+$menu-padding = $padding * 2;
+$menu-border-radius = $border-radius;
+
+// MenuItem
+$menu-item-padding = $padding * 2;
+
+// hover
+$menu-item-hovered-text-color = $theme-base-color;
+$menu-item-hovered-background-color = $theme-base;
+
+// active
+$menu-item-active-text-color = $theme-base-color;
+$menu-item-active-background-color = $theme-base;
+
+// selected
+$menu-item-selected-text-color = $theme-base-color;
+$menu-item-selected-background-color = $theme-base;
+
+// disabled
+$menu-item-disabled-text-color = $disabled-color;
+
+// disabled hover
+$menu-item-disabled-hovered-text-color = darken($menu-item-hovered-text-color, 5%);
+$menu-item-disabled-hovered-background-color = lighten($menu-item-hovered-background-color, 35%);
+
+// separator
+$menu-item-separator-top-color = $border-color;
+$menu-item-separator-bottom-color = transparent;
+
+// icon
+$menu-item-icon-padding = $padding;
+$menu-item-icon-margin = $margin;
+$menu-item-icon = $icon-drop-right;
+$menu-item-icon-rtl = $icon-drop-left;
+
+// Menubar
+$menubar-background-color = $grey-lighter;
+$menubar-item-padding = $padding * 2 $padding * 3;
+
+// hover
+$menubar-item-hover-color = $theme-base-color;
+$menubar-item-hover-background-color = $theme-base;
+
+// active
+$menubar-item-active-color = $theme-base-color;
+$menubar-item-active-background-color = $theme-base;
+
+// selected
+$menubar-item-selected-text-color = $theme-base-color;
+$menubar-item-selected-background-color = $theme-base;
+
+// Menubar dropdown (Popup)
+$menubar-popup-item-padding = $menu-item-padding;
+
+/* Calendar */
+
+$calendar-background-color = $theme-base-color;
+$calendar-border-color = $border-color;
+$calendar-padding = $padding;
+$calendar-border-radius = $border-radius;
+$calendar-box-shadow = $shadow-depth2;
+
+// day
+// the "S, M, T, W, T, F, S"
+$calendar-day-cell-font-weight = bold;
+$calendar-day-cell-padding = $padding;
+
+// date
+$calendar-date-cell-padding = $padding * 0.5 $padding;
+$calendar-date-font-size = 0.9em;
+$calendar-date-cell-prev-next-month-text-color = lighten($grey-dark, 50);
+$calendar-date-cell-border-radius = 50%;
+$calendar-date-cell-current-border-color = $theme-base;
+
+// hover 
+$calendar-date-cell-hovered-background-color = darken($theme-base-color, 5%);
+
+// active 
+$calendar-date-cell-active-background-color = darken($theme-base-color, 10%);
+
+// selected 
+$calendar-date-cell-selected-background-color = $theme-base;
+$calendar-date-cell-selected-text-color = $theme-base-color;
+
+// year
+$calendar-year-cell-padding = $padding;
+$calendar-year-font-size = 1.15em;
+$calendar-year-prev-next-year-font-size = 0.9em;
+$calendar-year-prev-current-year-text-color = $theme-base;
+$calendar-year-prev-next-year-text-color = $calendar-year-prev-current-year-text-color;
+
+// month dropdown
+$calendar-month-dropdown-menu-padding = $padding * 2;
+$calendar-month-dropdown-menu-item-padding = $padding;
+
+// hover
+$calendar-month-dropdown-menu-item-hovered-text-color = $menu-item-hovered-text-color;
+$calendar-month-dropdown-menu-item-hovered-background-color = $menu-item-hovered-background-color;
+
+// icons (swapped for rtl)
+$calendar-icon-decrease = $icon-drop-left;
+$calendar-icon-increase = $icon-drop-right;
+$calendar-icon-size = 24px;
+
+/* Color Palette */
+
+$colorpalette-background-color = $theme-base-color;
+$colorpalette-padding = $padding;
+$colorpalette-border-color = $border-color;
+$colorpalette-border-radius = $border-radius;
+
+// Swatch
+$colorpalette-swatch-width = 15px;
+$colorpalette-swatch-height = 15px;
+$colorpalette-swatch-border-color = transparent;
+$colorpalette-swatch-radius = 2px;
+
+// Hover
+$colorpalette-swatch-hover-border-color = $border-color;
+$colorpalette-swatch-hover-box-shadow = none;
+
+// Active, Selected
+$colorpalette-swatch-selected-border-color = $theme-base;
+$colorpalette-swatch-selected-box-shadow = $shadow-depth1;
+
+/* Editor */
+
+$editor-background-color = $theme-base-color;
+$editor-border-color = $border-color;
+$editor-border-radius =$border-radius;
+
+// Iframe container
+$editor-iframe-padding = $padding $padding * 2;
+$editor-iframe-border-color = transparent;
+
+// Hover
+$editor-iframe-hover-border-color = $theme-base;
+
+// Focused
+$editor-iframe-focused-border-color = $theme-base;
+
+// Disabled
+$editor-disabled-border-color = $border-color;
+$editor-iframe-disabled-border-color = transparent;
+$editor-iframe-disabled-background-color = $disabled-background-color;
+
+/* Progress Bar */
+
+// Colors
+$progress-bar-color = $theme-base;
+$progress-bar-alternative-colors = {
+	alt-primary: $primary,
+	alt-success: $success,
+	alt-info: $info,
+	alt-warning: $warning,
+	alt-danger: $danger,
+	alt-inverse: $inverse
+};
+
+$progress-bar-empty-color = $grey-light;
+$progress-bar-border-radius = $border-radius;
+$progress-bar-strips-image-url = "images/progressBarStrips.png";
+
+// label
+$progress-bar-text-color = $theme-base-color;
+$progress-bar-font-size = 1em;
+$progress-bar-text-shadow = (1em / 10) (1em / 10) 1px $grey-dark;
+
+/* Toolbar */
+
+$toolbar-background-color = $grey-lighter;
+$toolbar-padding = $padding;
+
+// Button (Override default djitButton styles)
+$toolbar-button-border-color = transparent;
+$toolbar-button-padding = $padding;
+$toolbar-button-background-color = transparent;
+$toolbar-button-border-radius = $border-radius;
+$toolbar-button-spacing = $padding;
+
+// Label
+$toolbar-label-padding = $padding*2;
+
+// Separator
+$toolbar-separator-width = 1px;
+$toolbar-separator-height = 20px;
+$toolbar-separator-color = $border-color;
+$toolbar-separator-margin = 0 $margin;
+
+// Hover
+$toolbar-hover-border-color = $border-color;
+
+// Active
+$toolbar-active-border-color = $border-color;
+
+// Disabled
+$toolbar-disabled-background-color = $toolbar-background-color;
+$toolbar-disabled-border-bottom-color = $border-color;
+
+/* Tree */
+
+$tree-background-color = transparent;
+
+// Tree row
+// normal
+$tree-row-padding = $padding * 2 0;
+$tree-row-border-color = transparent;
+$tree-row-line-height = $line-height;
+
+// hover
+$tree-row-hover-background-color = darken($theme-base-color, 5%);
+$tree-row-hover-border-color = $tree-row-border-color;
+
+// active
+$tree-row-active-padding = $tree-row-padding;
+$tree-row-active-background-color = darken($theme-base-color, 5%);
+$tree-row-active-border-color = $tree-row-border-color;
+
+// selected
+$tree-row-selected-background-color = $theme-base;
+$tree-row-selected-border-color = $tree-row-border-color;
+$tree-row-selected-text-color = $theme-base-color;
+
+// expando
+$tree-expando-icon-width = $icon-size;
+$tree-expando-icon-height = $icon-size;
+$tree-expando-icon-color = $theme-base;
+$tree-expando-margin = $margin;
+
+// expando selected
+$tree-expando-icon-selected-color = $theme-base-color;
+
+/* Time Picker */
+
+// normal
+$timepicker-background-color = $theme-base-color;
+$timepicker-padding = $padding 0;
+$timepicker-border-color = $border-color;
+$timepicker-border-radius = $border-radius;
+$timepicker-box-shadow = $shadow-depth2;
+$timepicker-item-padding = $padding * 2;
+
+// tick (minor values)
+$timepicker-tick-text-color = $grey;
+
+// marker (major values)
+$timepicker-marker-background-color = transparent;
+
+// hover
+$timepicker-item-hovered-text-color = $grey-dark;
+$timepicker-item-hovered-background-color = darken($theme-base-color, 5%);
+
+// selected
+$timepicker-item-selected-text-color = $grey-dark;
+$timepicker-item-selected-background-color = darken($theme-base-color, 5%);
+
+/* Title Pane */
+
+$titlepane-highlight-color = $theme-base;
+$titlepane-has-border-radius = true;
+$titlepane-border-radius = $border-radius;
+
+// Content Pane
+$titlepane-content-background-color = $theme-base-color;
+$titlepane-content-border-color = $border-color;
+$titlepane-content-padding = $padding * 2;
+
+// icons
+// uses common vars directly
+
+/* Inline Edit Box */
+
+$inlineeditbox-border-color = transparent;
+$inlineeditbox-padding = $padding $padding + 2px;
+$inlineeditbox-border-radius =$input-border-radius;
+
+// hover
+$inlineeditbox-hover-background-color = transparent;
+$inlineeditbox-hover-border-color = $theme-base;
+
+/* DND */
+
+$dnd-item-border-color = transparent;
+
+// hover
+$dnd-hover-background-color = $grey-lighter;
+$dnd-hover-border-radius = $border-radius;
+
+// anchor
+$dnd-anchor-background-color = transparent;
+$dnd-anchor-border-color = $theme-base;
+$dnd-anchor-border-radius = $border-radius;
+
+// insert indicator color
+$dnd-avatar-item-insert-indicator-color = $theme-base;
+
+// avatar
+// item
+$dnd-avatar-item-background-color = $theme-base-color;
+$dnd-avatar-item-padding = $padding $padding * 2;
+$dnd-avatar-item-border-radius = $border-radius;
+$dnd-avatar-item-box-shadow = $shadow-depth2;
+
+// icons
+$dnd-icon-drop = "\f008";
+$dnd-icon-no-drop = "\f01c";

lib/flat/dijit/form/Button.css

@@ -0,0 +1,646 @@
+/* Button | DropDownButton | ComboButton | ToggleButton
+ * 
+ * Styling Buttons mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitButton
+ * 		.dijitDropDownButton
+ * 		.dijitComboButton
+ * 		.dijitButtonNode - common button/arrow wrapper shared across all three button types 
+ *
+ * 2. Button text
+ * 		.dijitButtonText
+ * 
+ * 3. Arrows - only for DropDownButton and ComboButton
+ * 	     There are total four directions arrows - down, left, right, up:
+ * 		.dijitArrowButtonInner - down arrow by default
+ *      .dijitLeftArrowButton .dijitArrowButtonInner - left arrow
+ *      .dijitRightArrowButton .dijitArrowButtonInner - right arrow
+ *      .dijitUpArrowButton .dijitArrowButtonInner - up arrow
+ * 
+ * 4. States - Hover, Active, Disabled, e.g.
+ * 		.dijitButtonHover .dijitButtonNode
+ * 		.dijitButtonActive .dijitButtonNode
+ * 		.dijitButtonDisabled .dijitButtonNode
+ *      
+ *      .dijitDisabled .dijitArrowButtonInner  - disabled arrow states 
+ */
+.flat .dijitButtonText {
+  padding: 0 4px;
+  text-align: center;
+}
+.flat .dijitButton .dijitButtonNode,
+.flat .dijitDropDownButton .dijitButtonNode,
+.flat .dijitComboButton .dijitButtonNode,
+.flat .dijitToggleButton .dijitButtonNode {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+}
+.flat .dijitButton.alt-primary .dijitButtonNode,
+.flat .dijitDropDownButton.alt-primary .dijitButtonNode,
+.flat .dijitComboButton.alt-primary .dijitButtonNode,
+.flat .dijitToggleButton.alt-primary .dijitButtonNode,
+.flat .dijitComboBox.alt-primary .dijitButtonNode,
+.flat .dijitSelect.alt-primary .dijitButtonContents,
+.flat .dijitSelect.alt-primary .dijitButtonNode,
+.flat .dijitSpinner.alt-primary .dijitArrowButton {
+  background: #1e88e5;
+  color: #fff;
+  border-color: #166fbd;
+}
+.flat .dijitComboButton.alt-primary .dijitStretch {
+  border-right-color: #166fbd;
+}
+.flat .dijitComboButtonRtl.alt-primary .dijitStretch {
+  border-left-color: #166fbd;
+}
+.flat .dijitButton.alt-success .dijitButtonNode,
+.flat .dijitDropDownButton.alt-success .dijitButtonNode,
+.flat .dijitComboButton.alt-success .dijitButtonNode,
+.flat .dijitToggleButton.alt-success .dijitButtonNode,
+.flat .dijitComboBox.alt-success .dijitButtonNode,
+.flat .dijitSelect.alt-success .dijitButtonContents,
+.flat .dijitSelect.alt-success .dijitButtonNode,
+.flat .dijitSpinner.alt-success .dijitArrowButton {
+  background: #43a047;
+  color: #fff;
+  border-color: #37823a;
+}
+.flat .dijitComboButton.alt-success .dijitStretch {
+  border-right-color: #37823a;
+}
+.flat .dijitComboButtonRtl.alt-success .dijitStretch {
+  border-left-color: #37823a;
+}
+.flat .dijitButton.alt-info .dijitButtonNode,
+.flat .dijitDropDownButton.alt-info .dijitButtonNode,
+.flat .dijitComboButton.alt-info .dijitButtonNode,
+.flat .dijitToggleButton.alt-info .dijitButtonNode,
+.flat .dijitComboBox.alt-info .dijitButtonNode,
+.flat .dijitSelect.alt-info .dijitButtonContents,
+.flat .dijitSelect.alt-info .dijitButtonNode,
+.flat .dijitSpinner.alt-info .dijitArrowButton {
+  background: #03a9f4;
+  color: #fff;
+  border-color: #028ac7;
+}
+.flat .dijitComboButton.alt-info .dijitStretch {
+  border-right-color: #028ac7;
+}
+.flat .dijitComboButtonRtl.alt-info .dijitStretch {
+  border-left-color: #028ac7;
+}
+.flat .dijitButton.alt-warning .dijitButtonNode,
+.flat .dijitDropDownButton.alt-warning .dijitButtonNode,
+.flat .dijitComboButton.alt-warning .dijitButtonNode,
+.flat .dijitToggleButton.alt-warning .dijitButtonNode,
+.flat .dijitComboBox.alt-warning .dijitButtonNode,
+.flat .dijitSelect.alt-warning .dijitButtonContents,
+.flat .dijitSelect.alt-warning .dijitButtonNode,
+.flat .dijitSpinner.alt-warning .dijitArrowButton {
+  background: #fb8c00;
+  color: #fff;
+  border-color: #cd7200;
+}
+.flat .dijitComboButton.alt-warning .dijitStretch {
+  border-right-color: #cd7200;
+}
+.flat .dijitComboButtonRtl.alt-warning .dijitStretch {
+  border-left-color: #cd7200;
+}
+.flat .dijitButton.alt-danger .dijitButtonNode,
+.flat .dijitDropDownButton.alt-danger .dijitButtonNode,
+.flat .dijitComboButton.alt-danger .dijitButtonNode,
+.flat .dijitToggleButton.alt-danger .dijitButtonNode,
+.flat .dijitComboBox.alt-danger .dijitButtonNode,
+.flat .dijitSelect.alt-danger .dijitButtonContents,
+.flat .dijitSelect.alt-danger .dijitButtonNode,
+.flat .dijitSpinner.alt-danger .dijitArrowButton {
+  background: #e53935;
+  color: #fff;
+  border-color: #cc1e1a;
+}
+.flat .dijitComboButton.alt-danger .dijitStretch {
+  border-right-color: #cc1e1a;
+}
+.flat .dijitComboButtonRtl.alt-danger .dijitStretch {
+  border-left-color: #cc1e1a;
+}
+.flat .dijitButton.alt-inverse .dijitButtonNode,
+.flat .dijitDropDownButton.alt-inverse .dijitButtonNode,
+.flat .dijitComboButton.alt-inverse .dijitButtonNode,
+.flat .dijitToggleButton.alt-inverse .dijitButtonNode,
+.flat .dijitComboBox.alt-inverse .dijitButtonNode,
+.flat .dijitSelect.alt-inverse .dijitButtonContents,
+.flat .dijitSelect.alt-inverse .dijitButtonNode,
+.flat .dijitSpinner.alt-inverse .dijitArrowButton {
+  background: #616161;
+  color: #fff;
+  border-color: #4f4f4f;
+}
+.flat .dijitComboButton.alt-inverse .dijitStretch {
+  border-right-color: #4f4f4f;
+}
+.flat .dijitComboButtonRtl.alt-inverse .dijitStretch {
+  border-left-color: #4f4f4f;
+}
+.flat .dijitButtonHover .dijitButtonNode,
+.flat .dijitDropDownButtonHover .dijitButtonNode,
+.flat .dijitToggleButtonHover .dijitButtonNode {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+}
+.flat .dijitComboButton .dijitButtonNodeHover,
+.flat .dijitComboButton .dijitDownArrowButtonHover {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+}
+.flat .dijitButtonHover.alt-primary .dijitButtonNode,
+.flat .dijitDropDownButtonHover.alt-primary .dijitButtonNode,
+.flat .dijitComboButton.alt-primary .dijitButtonNodeHover,
+.flat .dijitComboButton.alt-primary .dijitDownArrowButtonHover,
+.flat .dijitToggleButtonHover.alt-primary .dijitButtonNode,
+.flat .dijitComboBoxHover.alt-primary .dijitButtonNode,
+.flat .dijitSelectHover.alt-primary .dijitButtonContents,
+.flat .dijitSelectHover.alt-primary .dijitButtonNode,
+.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitArrowButton,
+.flat .dijitSpinner.alt-primary .dijitUpArrowButtonHover,
+.flat .dijitSpinner.alt-primary .dijitDownArrowButtonHover {
+  background: #1981dd;
+  border-color: #1774c5;
+}
+.flat .dijitButtonHover.alt-success .dijitButtonNode,
+.flat .dijitDropDownButtonHover.alt-success .dijitButtonNode,
+.flat .dijitComboButton.alt-success .dijitButtonNodeHover,
+.flat .dijitComboButton.alt-success .dijitDownArrowButtonHover,
+.flat .dijitToggleButtonHover.alt-success .dijitButtonNode,
+.flat .dijitComboBoxHover.alt-success .dijitButtonNode,
+.flat .dijitSelectHover.alt-success .dijitButtonContents,
+.flat .dijitSelectHover.alt-success .dijitButtonNode,
+.flat .dijitSelect.dijitSelectOpened.alt-success .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-success .dijitArrowButton,
+.flat .dijitSpinner.alt-success .dijitUpArrowButtonHover,
+.flat .dijitSpinner.alt-success .dijitDownArrowButtonHover {
+  background: #409843;
+  border-color: #39883c;
+}
+.flat .dijitButtonHover.alt-info .dijitButtonNode,
+.flat .dijitDropDownButtonHover.alt-info .dijitButtonNode,
+.flat .dijitComboButton.alt-info .dijitButtonNodeHover,
+.flat .dijitComboButton.alt-info .dijitDownArrowButtonHover,
+.flat .dijitToggleButtonHover.alt-info .dijitButtonNode,
+.flat .dijitComboBoxHover.alt-info .dijitButtonNode,
+.flat .dijitSelectHover.alt-info .dijitButtonContents,
+.flat .dijitSelectHover.alt-info .dijitButtonNode,
+.flat .dijitSelect.dijitSelectOpened.alt-info .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-info .dijitArrowButton,
+.flat .dijitSpinner.alt-info .dijitUpArrowButtonHover,
+.flat .dijitSpinner.alt-info .dijitDownArrowButtonHover {
+  background: #03a1e8;
+  border-color: #0390cf;
+}
+.flat .dijitButtonHover.alt-warning .dijitButtonNode,
+.flat .dijitDropDownButtonHover.alt-warning .dijitButtonNode,
+.flat .dijitComboButton.alt-warning .dijitButtonNodeHover,
+.flat .dijitComboButton.alt-warning .dijitDownArrowButtonHover,
+.flat .dijitToggleButtonHover.alt-warning .dijitButtonNode,
+.flat .dijitComboBoxHover.alt-warning .dijitButtonNode,
+.flat .dijitSelectHover.alt-warning .dijitButtonContents,
+.flat .dijitSelectHover.alt-warning .dijitButtonNode,
+.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitArrowButton,
+.flat .dijitSpinner.alt-warning .dijitUpArrowButtonHover,
+.flat .dijitSpinner.alt-warning .dijitDownArrowButtonHover {
+  background: #ee8500;
+  border-color: #d57700;
+}
+.flat .dijitButtonHover.alt-danger .dijitButtonNode,
+.flat .dijitDropDownButtonHover.alt-danger .dijitButtonNode,
+.flat .dijitComboButton.alt-danger .dijitButtonNodeHover,
+.flat .dijitComboButton.alt-danger .dijitDownArrowButtonHover,
+.flat .dijitToggleButtonHover.alt-danger .dijitButtonNode,
+.flat .dijitComboBoxHover.alt-danger .dijitButtonNode,
+.flat .dijitSelectHover.alt-danger .dijitButtonContents,
+.flat .dijitSelectHover.alt-danger .dijitButtonNode,
+.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitArrowButton,
+.flat .dijitSpinner.alt-danger .dijitUpArrowButtonHover,
+.flat .dijitSpinner.alt-danger .dijitDownArrowButtonHover {
+  background: #e32d29;
+  border-color: #d4201b;
+}
+.flat .dijitButtonHover.alt-inverse .dijitButtonNode,
+.flat .dijitDropDownButtonHover.alt-inverse .dijitButtonNode,
+.flat .dijitComboButton.alt-inverse .dijitButtonNodeHover,
+.flat .dijitComboButton.alt-inverse .dijitDownArrowButtonHover,
+.flat .dijitToggleButtonHover.alt-inverse .dijitButtonNode,
+.flat .dijitComboBoxHover.alt-inverse .dijitButtonNode,
+.flat .dijitSelectHover.alt-inverse .dijitButtonContents,
+.flat .dijitSelectHover.alt-inverse .dijitButtonNode,
+.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitArrowButton,
+.flat .dijitSpinner.alt-inverse .dijitUpArrowButtonHover,
+.flat .dijitSpinner.alt-inverse .dijitDownArrowButtonHover {
+  background: #5c5c5c;
+  border-color: #525252;
+}
+.flat .dijitButtonActive .dijitButtonNode,
+.flat .dijitDropDownButtonActive .dijitButtonNode,
+.flat .dijitToggleButtonActive .dijitButtonNode,
+.flat .dijitToggleButtonChecked .dijitButtonNode {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitComboButton .dijitButtonNodeActive,
+.flat .dijitComboButton .dijitDownArrowButtonActive {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitButtonActive.alt-primary .dijitButtonNode,
+.flat .dijitDropDownButtonActive.alt-primary .dijitButtonNode,
+.flat .dijitComboButton.alt-primary .dijitButtonNodeActive,
+.flat .dijitToggleButtonActive.alt-primary .dijitButtonNode,
+.flat .dijitComboBoxActive.alt-primary .dijitButtonNode,
+.flat .dijitSelectActive.alt-primary .dijitButtonContents,
+.flat .dijitSelectActive.alt-primary .dijitArrowButton,
+.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-primary .dijitArrowButton,
+.flat .dijitComboBox.alt-primary .dijitButtonNode.dijitHasDropDownOpen,
+.flat .dijitSpinner.alt-primary .dijitUpArrowButtonActive,
+.flat .dijitSpinner.alt-primary .dijitDownArrowButtonActive {
+  background: #1878cc;
+  border-color: #135fa3;
+}
+.flat .dijitButtonActive.alt-success .dijitButtonNode,
+.flat .dijitDropDownButtonActive.alt-success .dijitButtonNode,
+.flat .dijitComboButton.alt-success .dijitButtonNodeActive,
+.flat .dijitToggleButtonActive.alt-success .dijitButtonNode,
+.flat .dijitComboBoxActive.alt-success .dijitButtonNode,
+.flat .dijitSelectActive.alt-success .dijitButtonContents,
+.flat .dijitSelectActive.alt-success .dijitArrowButton,
+.flat .dijitSelect.dijitSelectOpened.alt-success .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-success .dijitArrowButton,
+.flat .dijitComboBox.alt-success .dijitButtonNode.dijitHasDropDownOpen,
+.flat .dijitSpinner.alt-success .dijitUpArrowButtonActive,
+.flat .dijitSpinner.alt-success .dijitDownArrowButtonActive {
+  background: #3b8d3e;
+  border-color: #2f7032;
+}
+.flat .dijitButtonActive.alt-info .dijitButtonNode,
+.flat .dijitDropDownButtonActive.alt-info .dijitButtonNode,
+.flat .dijitComboButton.alt-info .dijitButtonNodeActive,
+.flat .dijitToggleButtonActive.alt-info .dijitButtonNode,
+.flat .dijitComboBoxActive.alt-info .dijitButtonNode,
+.flat .dijitSelectActive.alt-info .dijitButtonContents,
+.flat .dijitSelectActive.alt-info .dijitArrowButton,
+.flat .dijitSelect.dijitSelectOpened.alt-info .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-info .dijitArrowButton,
+.flat .dijitComboBox.alt-info .dijitButtonNode.dijitHasDropDownOpen,
+.flat .dijitSpinner.alt-info .dijitUpArrowButtonActive,
+.flat .dijitSpinner.alt-info .dijitDownArrowButtonActive {
+  background: #0395d7;
+  border-color: #0276ab;
+}
+.flat .dijitButtonActive.alt-warning .dijitButtonNode,
+.flat .dijitDropDownButtonActive.alt-warning .dijitButtonNode,
+.flat .dijitComboButton.alt-warning .dijitButtonNodeActive,
+.flat .dijitToggleButtonActive.alt-warning .dijitButtonNode,
+.flat .dijitComboBoxActive.alt-warning .dijitButtonNode,
+.flat .dijitSelectActive.alt-warning .dijitButtonContents,
+.flat .dijitSelectActive.alt-warning .dijitArrowButton,
+.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-warning .dijitArrowButton,
+.flat .dijitComboBox.alt-warning .dijitButtonNode.dijitHasDropDownOpen,
+.flat .dijitSpinner.alt-warning .dijitUpArrowButtonActive,
+.flat .dijitSpinner.alt-warning .dijitDownArrowButtonActive {
+  background: #dd7b00;
+  border-color: #b06200;
+}
+.flat .dijitButtonActive.alt-danger .dijitButtonNode,
+.flat .dijitDropDownButtonActive.alt-danger .dijitButtonNode,
+.flat .dijitComboButton.alt-danger .dijitButtonNodeActive,
+.flat .dijitToggleButtonActive.alt-danger .dijitButtonNode,
+.flat .dijitComboBoxActive.alt-danger .dijitButtonNode,
+.flat .dijitSelectActive.alt-danger .dijitButtonContents,
+.flat .dijitSelectActive.alt-danger .dijitArrowButton,
+.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-danger .dijitArrowButton,
+.flat .dijitComboBox.alt-danger .dijitButtonNode.dijitHasDropDownOpen,
+.flat .dijitSpinner.alt-danger .dijitUpArrowButtonActive,
+.flat .dijitSpinner.alt-danger .dijitDownArrowButtonActive {
+  background: #dc211c;
+  border-color: #af1a17;
+}
+.flat .dijitButtonActive.alt-inverse .dijitButtonNode,
+.flat .dijitDropDownButtonActive.alt-inverse .dijitButtonNode,
+.flat .dijitComboButton.alt-inverse .dijitButtonNodeActive,
+.flat .dijitToggleButtonActive.alt-inverse .dijitButtonNode,
+.flat .dijitComboBoxActive.alt-inverse .dijitButtonNode,
+.flat .dijitSelectActive.alt-inverse .dijitButtonContents,
+.flat .dijitSelectActive.alt-inverse .dijitArrowButton,
+.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitButtonContents,
+.flat .dijitSelect.dijitSelectOpened.alt-inverse .dijitArrowButton,
+.flat .dijitComboBox.alt-inverse .dijitButtonNode.dijitHasDropDownOpen,
+.flat .dijitSpinner.alt-inverse .dijitUpArrowButtonActive,
+.flat .dijitSpinner.alt-inverse .dijitDownArrowButtonActive {
+  background: #555;
+  border-color: #444;
+}
+.flat .dijitButtonDisabled,
+.flat .dijitDropDownButtonDisabled,
+.flat .dijitComboButtonDisabled,
+.flat .dijitToggleButtonDisabled {
+  outline: none;
+}
+.flat .dijitButtonDisabled .dijitButtonNode,
+.flat .dijitDropDownButtonDisabled .dijitButtonNode,
+.flat .dijitComboButtonDisabled .dijitButtonNode,
+.flat .dijitToggleButtonDisabled .dijitButtonNode {
+  cursor: default;
+  color: #9e9e9e;
+  background-color: #f5f5f5;
+  border-color: #e3e3e3;
+}
+.flat .dijitButtonDisabled.alt-primary .dijitButtonNode,
+.flat .dijitDropDownButtonDisabled.alt-primary .dijitButtonNode,
+.flat .dijitComboButtonDisabled.alt-primary .dijitButtonNode,
+.flat .dijitToggleButtonDisabled.alt-primary .dijitButtonNode {
+  background: #6db2ee;
+  border-color: #50a2eb;
+  color: #f2f2f2;
+}
+.flat .dijitComboButtonDisabled.alt-primary .dijitStretch {
+  border-right-color: #50a2eb;
+}
+.flat .dijitComboButtonRtlDisabled.alt-primary .dijitStretch {
+  border-left-color: #50a2eb;
+}
+.flat .dijitComboBoxDisabled.alt-primary .dijitButtonNode {
+  border-left-color: #50a2eb;
+}
+.flat .dijitComboBoxRtlDisabled.alt-primary .dijitButtonNode {
+  border-right-color: #50a2eb;
+}
+.flat .dijitTimeTextBoxDisabled.alt-primary .dijitButtonNode {
+  border-left-color: #50a2eb;
+}
+.flat .dijitTimeTextBoxRtlDisabled.alt-primary .dijitButtonNode {
+  border-right-color: #50a2eb;
+}
+.flat .dijitDateTextBoxDisabled.alt-primary .dijitButtonNode {
+  border-left-color: #50a2eb;
+}
+.flat .dijitDateTextBoxRtlDisabled.alt-primary .dijitButtonNode {
+  border-right-color: #50a2eb;
+}
+.flat .dijitButtonDisabled.alt-success .dijitButtonNode,
+.flat .dijitDropDownButtonDisabled.alt-success .dijitButtonNode,
+.flat .dijitComboButtonDisabled.alt-success .dijitButtonNode,
+.flat .dijitToggleButtonDisabled.alt-success .dijitButtonNode {
+  background: #7dc981;
+  border-color: #63be67;
+  color: #f2f2f2;
+}
+.flat .dijitComboButtonDisabled.alt-success .dijitStretch {
+  border-right-color: #63be67;
+}
+.flat .dijitComboButtonRtlDisabled.alt-success .dijitStretch {
+  border-left-color: #63be67;
+}
+.flat .dijitComboBoxDisabled.alt-success .dijitButtonNode {
+  border-left-color: #63be67;
+}
+.flat .dijitComboBoxRtlDisabled.alt-success .dijitButtonNode {
+  border-right-color: #63be67;
+}
+.flat .dijitTimeTextBoxDisabled.alt-success .dijitButtonNode {
+  border-left-color: #63be67;
+}
+.flat .dijitTimeTextBoxRtlDisabled.alt-success .dijitButtonNode {
+  border-right-color: #63be67;
+}
+.flat .dijitDateTextBoxDisabled.alt-success .dijitButtonNode {
+  border-left-color: #63be67;
+}
+.flat .dijitDateTextBoxRtlDisabled.alt-success .dijitButtonNode {
+  border-right-color: #63be67;
+}
+.flat .dijitButtonDisabled.alt-info .dijitButtonNode,
+.flat .dijitDropDownButtonDisabled.alt-info .dijitButtonNode,
+.flat .dijitComboButtonDisabled.alt-info .dijitButtonNode,
+.flat .dijitToggleButtonDisabled.alt-info .dijitButtonNode {
+  background: #56c9fd;
+  border-color: #34befd;
+  color: #f2f2f2;
+}
+.flat .dijitComboButtonDisabled.alt-info .dijitStretch {
+  border-right-color: #34befd;
+}
+.flat .dijitComboButtonRtlDisabled.alt-info .dijitStretch {
+  border-left-color: #34befd;
+}
+.flat .dijitComboBoxDisabled.alt-info .dijitButtonNode {
+  border-left-color: #34befd;
+}
+.flat .dijitComboBoxRtlDisabled.alt-info .dijitButtonNode {
+  border-right-color: #34befd;
+}
+.flat .dijitTimeTextBoxDisabled.alt-info .dijitButtonNode {
+  border-left-color: #34befd;
+}
+.flat .dijitTimeTextBoxRtlDisabled.alt-info .dijitButtonNode {
+  border-right-color: #34befd;
+}
+.flat .dijitDateTextBoxDisabled.alt-info .dijitButtonNode {
+  border-left-color: #34befd;
+}
+.flat .dijitDateTextBoxRtlDisabled.alt-info .dijitButtonNode {
+  border-right-color: #34befd;
+}
+.flat .dijitButtonDisabled.alt-warning .dijitButtonNode,
+.flat .dijitDropDownButtonDisabled.alt-warning .dijitButtonNode,
+.flat .dijitComboButtonDisabled.alt-warning .dijitButtonNode,
+.flat .dijitToggleButtonDisabled.alt-warning .dijitButtonNode {
+  background: #ffb557;
+  border-color: #ffa635;
+  color: #f2f2f2;
+}
+.flat .dijitComboButtonDisabled.alt-warning .dijitStretch {
+  border-right-color: #ffa635;
+}
+.flat .dijitComboButtonRtlDisabled.alt-warning .dijitStretch {
+  border-left-color: #ffa635;
+}
+.flat .dijitComboBoxDisabled.alt-warning .dijitButtonNode {
+  border-left-color: #ffa635;
+}
+.flat .dijitComboBoxRtlDisabled.alt-warning .dijitButtonNode {
+  border-right-color: #ffa635;
+}
+.flat .dijitTimeTextBoxDisabled.alt-warning .dijitButtonNode {
+  border-left-color: #ffa635;
+}
+.flat .dijitTimeTextBoxRtlDisabled.alt-warning .dijitButtonNode {
+  border-right-color: #ffa635;
+}
+.flat .dijitDateTextBoxDisabled.alt-warning .dijitButtonNode {
+  border-left-color: #ffa635;
+}
+.flat .dijitDateTextBoxRtlDisabled.alt-warning .dijitButtonNode {
+  border-right-color: #ffa635;
+}
+.flat .dijitButtonDisabled.alt-danger .dijitButtonNode,
+.flat .dijitDropDownButtonDisabled.alt-danger .dijitButtonNode,
+.flat .dijitComboButtonDisabled.alt-danger .dijitButtonNode,
+.flat .dijitToggleButtonDisabled.alt-danger .dijitButtonNode {
+  background: #ee7e7c;
+  border-color: #eb6561;
+  color: #f2f2f2;
+}
+.flat .dijitComboButtonDisabled.alt-danger .dijitStretch {
+  border-right-color: #eb6561;
+}
+.flat .dijitComboButtonRtlDisabled.alt-danger .dijitStretch {
+  border-left-color: #eb6561;
+}
+.flat .dijitComboBoxDisabled.alt-danger .dijitButtonNode {
+  border-left-color: #eb6561;
+}
+.flat .dijitComboBoxRtlDisabled.alt-danger .dijitButtonNode {
+  border-right-color: #eb6561;
+}
+.flat .dijitTimeTextBoxDisabled.alt-danger .dijitButtonNode {
+  border-left-color: #eb6561;
+}
+.flat .dijitTimeTextBoxRtlDisabled.alt-danger .dijitButtonNode {
+  border-right-color: #eb6561;
+}
+.flat .dijitDateTextBoxDisabled.alt-danger .dijitButtonNode {
+  border-left-color: #eb6561;
+}
+.flat .dijitDateTextBoxRtlDisabled.alt-danger .dijitButtonNode {
+  border-right-color: #eb6561;
+}
+.flat .dijitButtonDisabled.alt-inverse .dijitButtonNode,
+.flat .dijitDropDownButtonDisabled.alt-inverse .dijitButtonNode,
+.flat .dijitComboButtonDisabled.alt-inverse .dijitButtonNode,
+.flat .dijitToggleButtonDisabled.alt-inverse .dijitButtonNode {
+  background: #989898;
+  border-color: #848484;
+  color: #f2f2f2;
+}
+.flat .dijitComboButtonDisabled.alt-inverse .dijitStretch {
+  border-right-color: #848484;
+}
+.flat .dijitComboButtonRtlDisabled.alt-inverse .dijitStretch {
+  border-left-color: #848484;
+}
+.flat .dijitComboBoxDisabled.alt-inverse .dijitButtonNode {
+  border-left-color: #848484;
+}
+.flat .dijitComboBoxRtlDisabled.alt-inverse .dijitButtonNode {
+  border-right-color: #848484;
+}
+.flat .dijitTimeTextBoxDisabled.alt-inverse .dijitButtonNode {
+  border-left-color: #848484;
+}
+.flat .dijitTimeTextBoxRtlDisabled.alt-inverse .dijitButtonNode {
+  border-right-color: #848484;
+}
+.flat .dijitDateTextBoxDisabled.alt-inverse .dijitButtonNode {
+  border-left-color: #848484;
+}
+.flat .dijitDateTextBoxRtlDisabled.alt-inverse .dijitButtonNode {
+  border-right-color: #848484;
+}
+.flat .dijitComboButtonDisabled .dijitArrowButton {
+  border-left-width: 0;
+}
+.flat .dijitDropDownButton .dijitButtonNode {
+  padding-right: 8px;
+}
+.flat table.dijitComboButton {
+  border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */
+}
+.flat table.dijitComboButton .dijitStretch {
+  border-radius: 3px 0 0 3px;
+}
+.flat table.dijitComboButton .dijitArrowButton {
+  padding: 4px;
+  width: 20px;
+  border-radius: 0 3px 3px 0;
+  border-left-width: 0;
+}
+.flat .dijitToggleButton .dijitCheckBoxIcon {
+  display: none;
+}
+.flat .dijitToggleButtonChecked .dijitIcon {
+  display: inline-block;
+}
+.flat .dijitDropDownButton .dijitArrowButtonInner {
+  margin-left: 3px;
+}
+.flat .dijitDropDownButton .dijitArrowButtonInner,
+.flat .dijitArrowButton {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.flat .dijitDropDownButton .dijitArrowButtonInner:before,
+.flat .dijitArrowButton:before {
+  content: "\f002";
+}
+.flat .dijitLeftArrowButton:before {
+  content: "\f000";
+}
+.flat .dijitRightArrowButton:before {
+  content: "\f001";
+}
+.flat .dijitUpArrowButton:before {
+  content: "\f003";
+}

lib/flat/dijit/form/Button.styl

@@ -0,0 +1,165 @@
+/* Button | DropDownButton | ComboButton | ToggleButton
+ * 
+ * Styling Buttons mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitButton
+ * 		.dijitDropDownButton
+ * 		.dijitComboButton
+ * 		.dijitButtonNode - common button/arrow wrapper shared across all three button types 
+ *
+ * 2. Button text
+ * 		.dijitButtonText
+ * 
+ * 3. Arrows - only for DropDownButton and ComboButton
+ * 	     There are total four directions arrows - down, left, right, up:
+ * 		.dijitArrowButtonInner - down arrow by default
+ *      .dijitLeftArrowButton .dijitArrowButtonInner - left arrow
+ *      .dijitRightArrowButton .dijitArrowButtonInner - right arrow
+ *      .dijitUpArrowButton .dijitArrowButtonInner - up arrow
+ * 
+ * 4. States - Hover, Active, Disabled, e.g.
+ * 		.dijitButtonHover .dijitButtonNode
+ * 		.dijitButtonActive .dijitButtonNode
+ * 		.dijitButtonDisabled .dijitButtonNode
+ *      
+ *      .dijitDisabled .dijitArrowButtonInner  - disabled arrow states 
+ */
+
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+	/* ----- Button ----- */
+	.dijitButtonText {
+		padding: 0 $padding;
+		text-align: center;
+	}
+
+	.dijitButton,
+	.dijitDropDownButton,
+	.dijitComboButton,
+	.dijitToggleButton {
+		.dijitButtonNode {
+			button-style();
+		}
+	}
+
+	create-alternative-buttons($button-alternative-colors);
+
+	// hover
+	.dijitButtonHover,
+	.dijitDropDownButtonHover,
+	.dijitToggleButtonHover {
+		.dijitButtonNode {
+			button-hover-style();
+		}
+	}
+	.dijitComboButton {
+		.dijitButtonNodeHover, 
+		.dijitDownArrowButtonHover {
+			button-hover-style();
+		}
+	}
+
+	create-alternative-buttons-hover($button-alternative-colors);
+
+	// active and checked
+	.dijitButtonActive, 
+	.dijitDropDownButtonActive,
+	.dijitToggleButtonActive,
+	.dijitToggleButtonChecked {
+		.dijitButtonNode {
+			button-active-style();
+		}
+	}
+	.dijitComboButton {
+		.dijitButtonNodeActive, 
+		.dijitDownArrowButtonActive {
+			button-active-style();
+		}
+	}
+
+	create-alternative-buttons-active($button-alternative-colors);
+
+	// disabled
+	.dijitButtonDisabled,
+	.dijitDropDownButtonDisabled,
+	.dijitComboButtonDisabled,
+	.dijitToggleButtonDisabled {
+		outline: none;
+	}
+
+	.dijitButtonDisabled,
+	.dijitDropDownButtonDisabled,
+	.dijitComboButtonDisabled,
+	.dijitToggleButtonDisabled { 
+		.dijitButtonNode {
+			button-disabled-style();
+		}
+	}
+	
+	create-alternative-buttons-disabled($button-alternative-colors);
+
+	.dijitComboButtonDisabled .dijitArrowButton { 
+		border-left-width: 0;
+	}
+
+	/* ----- DropDownButton ----- */
+	.dijitDropDownButton .dijitButtonNode {
+		padding-right: $padding * 2;
+	}
+	
+	/* ----- ComboButton ----- */
+	table.dijitComboButton {
+		border-collapse: separate;	/* override dijit.css so that ComboBox rounded corners work */
+		.dijitStretch {
+			border-radius: $border-radius 0 0 $border-radius;
+		}
+		.dijitArrowButton {
+			padding: $padding;
+			width: $button-arrow-width;
+			border-radius: 0 $border-radius $border-radius 0;
+			border-left-width: 0;
+		}
+	}
+
+	/* ----- ToggleButton ----- */
+	.dijitToggleButton {
+		.dijitCheckBoxIcon {
+			display: none;
+		}
+	}
+
+	.dijitToggleButtonChecked {
+		.dijitIcon {
+			display: inline-block;
+		}
+	}
+
+	// arrow styles for down/up/left/right directions
+	.dijitDropDownButton .dijitArrowButtonInner{
+		margin-left: $padding * 0.75;
+	}
+
+	.dijitDropDownButton .dijitArrowButtonInner,
+	.dijitArrowButton  {
+		_icon-core-style();
+	}
+
+	.dijitDropDownButton .dijitArrowButtonInner:before,
+	.dijitArrowButton:before {
+		content: $icon-drop-down;
+	}
+
+	.dijitLeftArrowButton:before {
+		content: $icon-drop-left;
+	}
+
+	.dijitRightArrowButton:before {
+		content: $icon-drop-right;
+	}
+
+	.dijitUpArrowButton:before {
+		content: $icon-drop-up;
+	}
+}

lib/flat/dijit/form/Button_rtl.css

@@ -0,0 +1,15 @@
+.flat table.dijitComboButtonRtl .dijitStretch {
+  border-radius: 0 3px 3px 0;
+}
+.flat table.dijitComboButtonRtl .dijitArrowButton {
+  border-radius: 3px 0 0 3px;
+  border-left-width: 1px;
+  border-right-width: 0;
+}
+.flat .dijitDropDownButtonRtl .dijitButtonNode {
+  padding-left: 8px;
+}
+.flat .dijitDropDownButtonRtl .dijitArrowButtonInner {
+  margin-left: 0;
+  margin-right: 12px;
+}

lib/flat/dijit/form/Button_rtl.styl

@@ -0,0 +1,27 @@
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+
+	/* ----- ComboButton ----- */
+
+	table.dijitComboButtonRtl .dijitStretch  {
+		border-radius: 0 $button-border-radius $button-border-radius 0;
+	}
+	table.dijitComboButtonRtl .dijitArrowButton {
+		border-radius: $button-border-radius 0 0 $button-border-radius;
+		border-left-width: 1px;
+		border-right-width: 0;
+	}
+
+	/* ----- DropDownButton ----- */
+
+	.dijitDropDownButtonRtl {
+		.dijitButtonNode {
+			padding-left: $padding*2;
+		}
+		.dijitArrowButtonInner {
+			margin-left: 0;
+			margin-right: $padding * 3;
+		}
+	}
+}

lib/flat/dijit/form/Checkbox.css

@@ -0,0 +1,131 @@
+/* CheckBox
+ * 
+ * Styling CheckBox mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitCheckBox
+ * 
+ * 2. CheckBox within ToggleButton
+ * 		.dijitCheckBoxIcon
+ * 
+ * 3. States - Checked, Hover, Disabled.
+ *		.dijitCheckBoxChecked
+ * 		.dijitCheckBoxHover
+ * 		.dijitCheckBoxCheckedHover
+ * 		.dijitCheckBoxDisabled
+ *		.dijitCheckBoxCheckedDisabled
+ */
+.flat .dijitCheckBox {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  width: 16px;
+  height: 16px;
+  line-height: 1;
+  padding: 0;
+  border-radius: 2px;
+  text-align: center;
+  position: relative;
+  overflow: visible;
+  -webkit-transition: all 0.1s linear;
+  -moz-transition: all 0.1s linear;
+  -o-transition: all 0.1s linear;
+  -ms-transition: all 0.1s linear;
+  transition: all 0.1s linear;
+}
+.flat .dijitCheckBox input {
+  position: absolute;
+  top: 0;
+}
+.flat .dijitCheckBoxIcon:before,
+.flat .dijitCheckBoxChecked:before,
+.flat .dijitCheckBoxCheckedDisabled:before {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\f00c";
+  color: #fff;
+}
+.flat .dijitCheckBoxIcon {
+  padding: 0;
+}
+.flat .dijitCheckBoxIcon:before {
+  color: #2196f3;
+}
+.flat .alt-primary .dijitCheckBoxIcon:before {
+  color: #fff;
+}
+.flat .alt-success .dijitCheckBoxIcon:before {
+  color: #fff;
+}
+.flat .alt-info .dijitCheckBoxIcon:before {
+  color: #fff;
+}
+.flat .alt-warning .dijitCheckBoxIcon:before {
+  color: #fff;
+}
+.flat .alt-danger .dijitCheckBoxIcon:before {
+  color: #fff;
+}
+.flat .alt-inverse .dijitCheckBoxIcon:before {
+  color: #fff;
+}
+.flat .dijitCheckBoxChecked {
+  background-color: #2196f3;
+  border-color: #2196f3;
+}
+.flat .dijitCheckBoxHover {
+  background-color: #fff;
+  border: 1px solid #2196f3;
+}
+.flat .dijitCheckBoxCheckedHover {
+  background-color: #42a6f5;
+  border: 1px solid #2196f3;
+}
+.flat .dijitCheckBoxDisabled {
+  color: #9e9e9e;
+  background-color: #f5f5f5;
+  border-color: #e3e3e3;
+}
+.flat .dijitCheckBoxCheckedDisabled {
+  color: #a6a6a6;
+  background-color: #6fbbf7;
+  border-color: #6fbbf7;
+}
+.flat .dijitCheckedMenuItem .dijitCheckedMenuItemIcon {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  width: 16px;
+  height: 16px;
+  line-height: 1;
+  padding: 0;
+  border-radius: 2px;
+  text-align: center;
+  position: relative;
+  overflow: visible;
+  -webkit-transition: all 0.1s linear;
+  -moz-transition: all 0.1s linear;
+  -o-transition: all 0.1s linear;
+  -ms-transition: all 0.1s linear;
+  transition: all 0.1s linear;
+}
+.flat .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon:before {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  content: "\f00c";
+  color: #2196f3;
+}

lib/flat/dijit/form/Checkbox.styl

@@ -0,0 +1,137 @@
+/* CheckBox
+ * 
+ * Styling CheckBox mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitCheckBox
+ * 
+ * 2. CheckBox within ToggleButton
+ * 		.dijitCheckBoxIcon
+ * 
+ * 3. States - Checked, Hover, Disabled.
+ *		.dijitCheckBoxChecked
+ * 		.dijitCheckBoxHover
+ * 		.dijitCheckBoxCheckedHover
+ * 		.dijitCheckBoxDisabled
+ *		.dijitCheckBoxCheckedDisabled
+ */
+
+
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+		
+	.dijitCheckBox {
+		background-color: $checkbox-background-color;
+		border: 1px solid $checkbox-border-color;
+		width: $checkbox-width;
+		height: $checkbox-height;
+		line-height: 1;
+		padding: $checkbox-padding;
+		border-radius: $checkbox-border-radius;
+		text-align: center;
+		position: relative;
+		overflow: visible;
+		transition: all 0.1s linear;
+		input {
+			position: absolute;
+			top: 0;
+		}
+	}
+
+	/* Icon */
+
+	.dijitCheckBoxIcon,
+	.dijitCheckBoxChecked,
+	.dijitCheckBoxCheckedDisabled {
+		&:before {
+			_icon-core-style();
+			content: $checkbox-icon;
+			color: $checkbox-checked-icon-color;
+		}
+	}
+
+	/* This is the checkbox icon within a widget, e.g. toggle button */
+	
+	.dijitCheckBoxIcon {
+		padding: $checkbox-icon-padding;
+
+		&:before {
+			color: $checkbox-icon-checked-icon-color;
+		}
+	}
+	
+	// checkbox icon within alternative buttons
+	if($button-alternative-colors && length($button-alternative-colors) > 0) {
+		for class in $button-alternative-colors {
+			.{class} {
+				.dijitCheckBoxIcon {
+					&:before {
+						color: $checkbox-checked-icon-color;
+					}
+				}
+			}
+		}
+	}
+
+	/* checked */
+
+	.dijitCheckBoxChecked {
+		background-color: $checkbox-checked-background-color;
+		border-color: $checkbox-checked-border-color;
+	}
+
+	/* hovered */
+	/* over unchecked */
+
+	.dijitCheckBoxHover {
+		background-color: $checkbox-hover-unchecked-background-color;
+		border: $checkbox-hover-unchecked-border-color;
+	}
+
+	/* over checked */
+
+	.dijitCheckBoxCheckedHover {
+		background-color: $checkbox-hover-checked-background-color;
+		border: $checkbox-hover-checked-border-color;
+	}
+
+	/* disabled */
+
+	.dijitCheckBoxDisabled {
+		color: $checkbox-disabled-color;
+		background-color: $checkbox-disabled-background-color;
+		border-color: $checkbox-disabled-border-color;
+	}
+	
+	.dijitCheckBoxCheckedDisabled {
+		color: $checkbox-checked-disabled-color;
+		background-color: $checkbox-checked-disabled-background-color;
+		border-color: $checkbox-checked-disabled-border-color;
+	}
+	
+	/* Checkbox within a menu item */
+	
+	.dijitCheckedMenuItem .dijitCheckedMenuItemIcon {
+		background-color: $checkbox-background-color;
+		border: 1px solid $checkbox-border-color;
+		width: $checkbox-width;
+		height: $checkbox-height;
+		line-height: 1;
+		padding: $checkbox-padding;
+		border-radius: $checkbox-border-radius;
+		text-align: center;
+		position: relative;
+		overflow: visible;
+		transition: all 0.1s linear;
+	}
+		
+	.dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon {
+		&:before {
+			_icon-core-style();
+			content: $checkbox-icon;
+			color: $theme-base;
+		}
+	}
+	
+}

lib/flat/dijit/form/NumberSpinner.css

@@ -0,0 +1,125 @@
+/* NumberSpinner - namespace "dijitSpinner"
+ * 
+ * Styling NumberSpinner mainly includes:
+ * 
+ * 1. Arrows
+ * 		Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner  - for border, padding and position
+ * 		Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton
+ * 		Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image
+ * 
+ * 2. Hover state
+ * 		.dijitUpArrowButtonHover|.dijitDownArrowButtonHover .*  - for background color|image
+ * 
+ * 3. Active state
+ * 		.dijitUpArrowButtonActive|.dijitDownArrowButtonActive .*  - for border, padding, margin and background color|image
+ * 
+ * 4. Focused state
+ * 		.dijitSpinnerFocused .* - for background color|image
+ * 
+ * 5. Disabled state
+ * 		.dijitSpinnerDisabled .* - for background color|image
+ */
+.flat .dijitSpinner .dijitSpinnerButtonContainer {
+  overflow: hidden;
+  position: relative;
+  width: auto;
+  padding: 0;
+  border: 1px solid #9e9e9e;
+}
+.flat .dijitSpinner .dijitSpinnerButtonInner {
+  width: 30px;
+  padding: 4px 0 !important;
+  margin: 0;
+}
+.flat .dijitSpinner .dijitArrowButton {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  border-radius: 0;
+  border: 0;
+  width: auto;
+  overflow: hidden;
+  left: 0;
+  right: 0;
+  padding: 0;
+}
+.flat .dijitSpinner .dijitArrowButton:before {
+  content: none;
+}
+.flat .dijitSpinner .dijitUpArrowButton {
+  border-top-right-radius: 2.000000000000001px;
+}
+.flat .dijitSpinner .dijitDownArrowButton {
+  border-bottom-right-radius: 2.000000000000001px;
+}
+.flat .dijitSpinner .dijitUpArrowButtonHover,
+.flat .dijitSpinner .dijitDownArrowButtonHover {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+}
+.flat .dijitSpinner .dijitDownArrowButtonActive,
+.flat .dijitSpinner .dijitUpArrowButtonActive {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitSpinner .dijitArrowButtonInner {
+  line-height: 16px;
+  display: block;
+}
+.flat .dijitSpinner .dijitArrowButtonInner .dijitInputField {
+  padding: 0;
+}
+.flat .dijitSpinner .dijitArrowButtonInner:before {
+  content: "\f003";
+}
+.flat .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner:before {
+  content: "\f002";
+}
+.flat .dijitSpinnerDisabled .dijitDownArrowButton,
+.flat .dijitSpinnerDisabled .dijitUpArrowButton {
+  cursor: default;
+  color: #9e9e9e;
+  background-color: #f5f5f5;
+  border-color: #e3e3e3;
+}
+.flat .alt-primary .dijitSpinnerButtonContainer {
+  border-color: #1e88e5;
+}
+.flat .alt-success .dijitSpinnerButtonContainer {
+  border-color: #43a047;
+}
+.flat .alt-info .dijitSpinnerButtonContainer {
+  border-color: #03a9f4;
+}
+.flat .alt-warning .dijitSpinnerButtonContainer {
+  border-color: #fb8c00;
+}
+.flat .alt-danger .dijitSpinnerButtonContainer {
+  border-color: #e53935;
+}
+.flat .alt-inverse .dijitSpinnerButtonContainer {
+  border-color: #616161;
+}

lib/flat/dijit/form/NumberSpinner.styl

@@ -0,0 +1,124 @@
+/* NumberSpinner - namespace "dijitSpinner"
+ * 
+ * Styling NumberSpinner mainly includes:
+ * 
+ * 1. Arrows
+ * 		Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner  - for border, padding and position
+ * 		Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton
+ * 		Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image
+ * 
+ * 2. Hover state
+ * 		.dijitUpArrowButtonHover|.dijitDownArrowButtonHover .*  - for background color|image
+ * 
+ * 3. Active state
+ * 		.dijitUpArrowButtonActive|.dijitDownArrowButtonActive .*  - for border, padding, margin and background color|image
+ * 
+ * 4. Focused state
+ * 		.dijitSpinnerFocused .* - for background color|image
+ * 
+ * 5. Disabled state
+ * 		.dijitSpinnerDisabled .* - for background color|image
+ */
+
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+	
+	.dijitSpinner {
+
+		.dijitSpinnerButtonContainer {
+			overflow: hidden;
+			position: relative;
+			width: auto;
+			padding: 0;
+			border: $numberspinner-button-border;
+		}
+
+		.dijitSpinnerButtonInner {
+			width: $numberspinner-button-width;
+			padding: $numberspinner-button-inner-padding 0 !important;
+			margin: 0;
+		}
+
+		/* up & down buttons */
+		
+		.dijitArrowButton {
+			button-style();
+			border-radius: 0;
+			border: 0;
+			width: auto;
+			overflow: hidden;
+			left: 0;
+			right: 0;
+			padding: $numberspinner-button-padding;
+			&:before {
+				content: none; // remove arrow icons from dijitArrowButton nodes
+			}
+		}
+
+		/* up button */
+		.dijitUpArrowButton {
+			border-top-right-radius: $numberspinner-button-border-radius
+		}
+
+		/* down button */
+		.dijitDownArrowButton {
+			border-bottom-right-radius: $numberspinner-button-border-radius
+		}
+
+		/* hover */
+
+		.dijitUpArrowButtonHover,
+		.dijitDownArrowButtonHover {
+			button-hover-style();
+		}
+
+		/* active */
+
+		.dijitDownArrowButtonActive,
+		.dijitUpArrowButtonActive {
+			button-active-style();
+		}
+
+		/* up & down arrows */
+
+		.dijitArrowButtonInner {
+			line-height: $icon-size;
+			display: block;
+
+			.dijitInputField {
+				padding: 0;
+			}
+
+			&:before {
+				content: $numberspinner-icon-up;
+			}
+		}
+
+		.dijitDownArrowButton .dijitArrowButtonInner {
+			&:before {
+				content: $numberspinner-icon-down;
+			}
+		}
+	}
+
+	/* disabled */
+
+	.dijitSpinnerDisabled {
+		.dijitDownArrowButton,
+		.dijitUpArrowButton {
+			button-disabled-style();
+		}
+	}
+	
+	// checkbox icon within alternative buttons
+	if($button-alternative-colors && length($button-alternative-colors) > 0) {
+		for class in $button-alternative-colors {
+			.{class} {
+				.dijitSpinnerButtonContainer {
+					border-color: $button-alternative-colors[class];
+				}
+			}
+		}
+	}
+}

lib/flat/dijit/form/NumberSpinner_rtl.css

@@ -0,0 +1,4 @@
+.flat .dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton {
+  right: 0;
+  left: auto;
+}

lib/flat/dijit/form/NumberSpinner_rtl.styl

@@ -0,0 +1,10 @@
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+	
+	.dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton {
+		right: 0;
+		left: auto;
+	}
+	
+}

lib/flat/dijit/form/RadioButton.css

@@ -0,0 +1,157 @@
+/* RadioButton
+ * 
+ * Styling RadioButton mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitRadio|.dijitRadioIcon
+ * 
+ * 2. RadioButton within ToggleButton
+ * 		.dijitToggleButton|.dijitToggleButtonChecked
+ * 
+ * 3. Checked state
+ * 		.dijitRadioChecked
+ * 		.dijitToggleButtonChecked
+ * 
+ * 4. Hover state
+ * 		.dijitRadioHover|.dijitRadioCheckedHover
+ * 
+ * 5. Disabled state
+ * 		.dijitRadioDisabled|.dijitRadioCheckedDisabled
+ */
+.flat .dijitRadio,
+.flat .dijitRadioIcon {
+/* inside a toggle button */
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border: 1px solid #2196f3;
+  border-radius: 50%;
+  position: relative;
+  overflow: visible;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.flat .dijitRadio:after,
+.flat .dijitRadioIcon:after {
+  content: " ";
+  display: block;
+  width: 0;
+  height: 0;
+  background-color: #2196f3;
+  border-radius: 50%;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+  margin: 8px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-transition: all 0.15s ease-in-out;
+  -moz-transition: all 0.15s ease-in-out;
+  -o-transition: all 0.15s ease-in-out;
+  -ms-transition: all 0.15s ease-in-out;
+  transition: all 0.15s ease-in-out;
+}
+.flat .dijitRadioHover {
+  border-color: #59b0f6;
+}
+.flat .dijitRadioChecked:after,
+.flat .dijitChecked .dijitRadioIcon:after {
+  width: 8px;
+  height: 8px;
+  margin: 3px;
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .alt-primary .dijitRadioIcon {
+  border-color: #fff;
+}
+.flat .alt-primary .dijitRadioIcon:after {
+  background-color: #fff;
+}
+.flat .alt-success .dijitRadioIcon {
+  border-color: #fff;
+}
+.flat .alt-success .dijitRadioIcon:after {
+  background-color: #fff;
+}
+.flat .alt-info .dijitRadioIcon {
+  border-color: #fff;
+}
+.flat .alt-info .dijitRadioIcon:after {
+  background-color: #fff;
+}
+.flat .alt-warning .dijitRadioIcon {
+  border-color: #fff;
+}
+.flat .alt-warning .dijitRadioIcon:after {
+  background-color: #fff;
+}
+.flat .alt-danger .dijitRadioIcon {
+  border-color: #fff;
+}
+.flat .alt-danger .dijitRadioIcon:after {
+  background-color: #fff;
+}
+.flat .alt-inverse .dijitRadioIcon {
+  border-color: #fff;
+}
+.flat .alt-inverse .dijitRadioIcon:after {
+  background-color: #fff;
+}
+.flat .dijitRadioDisabled {
+  background-color: #f5f5f5;
+  border-color: #e3e3e3;
+}
+.flat .dijitRadioCheckedDisabled {
+  background-color: #f5f5f5;
+  border-color: #6fbbf7;
+}
+.flat .dijitRadioCheckedDisabled:after {
+  background-color: #6fbbf7;
+}
+.flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon {
+  width: 16px;
+  height: 16px;
+  background: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 50%;
+  position: relative;
+  overflow: visible;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon:after {
+  content: " ";
+  display: block;
+  width: 0;
+  height: 0;
+  background-color: #2196f3;
+  border-radius: 50%;
+  opacity: 0;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)";
+  filter: alpha(opacity=0);
+  margin: 8px;
+  position: absolute;
+  top: 0;
+  left: 0;
+  -webkit-transition: all 0.15s ease-in-out;
+  -moz-transition: all 0.15s ease-in-out;
+  -o-transition: all 0.15s ease-in-out;
+  -ms-transition: all 0.15s ease-in-out;
+  transition: all 0.15s ease-in-out;
+}
+.flat .dijitRadioMenuItemChecked .dijitCheckedMenuItemIcon {
+  border-color: #9e9e9e;
+}
+.flat .dijitRadioMenuItemChecked .dijitCheckedMenuItemIcon:after {
+  width: 8px;
+  height: 8px;
+  margin: 3px;
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}

lib/flat/dijit/form/RadioButton.styl

@@ -0,0 +1,136 @@
+/* RadioButton
+ * 
+ * Styling RadioButton mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitRadio|.dijitRadioIcon
+ * 
+ * 2. RadioButton within ToggleButton
+ * 		.dijitToggleButton|.dijitToggleButtonChecked
+ * 
+ * 3. Checked state
+ * 		.dijitRadioChecked
+ * 		.dijitToggleButtonChecked
+ * 
+ * 4. Hover state
+ * 		.dijitRadioHover|.dijitRadioCheckedHover
+ * 
+ * 5. Disabled state
+ * 		.dijitRadioDisabled|.dijitRadioCheckedDisabled
+ */
+
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+	
+	.dijitRadio,
+	.dijitRadioIcon	{ /* inside a toggle button */
+		width: $radio-width;
+		height: $radio-height;
+		background: $radio-background-color;
+		border: 1px solid $radio-border-color;
+		border-radius: 50%;
+		position: relative;
+		overflow: visible;
+		box-sizing: border-box;
+		&:after {
+			content: " ";
+			display: block;
+			width: 0;
+			height: 0;
+			background-color: $radio-checked-color;
+			border-radius: 50%;
+			opacity: 0;
+			margin: ($radio-width) * .5;
+			position: absolute;
+			top: 0;
+			left: 0;
+			transition: all 0.15s ease-in-out;
+		}
+	}
+
+	// hover
+	.dijitRadioHover {
+		border-color: $radio-hover-border-color;
+	}
+
+	// checked
+	.dijitRadioChecked,
+	.dijitChecked .dijitRadioIcon {
+		&:after {
+			width: $radio-width - 8px;
+			height: @width;
+			margin: 3px;
+			opacity: 1;
+		}
+	}
+
+	// checkbox icon within alternative buttons
+	if($button-alternative-colors && length($button-alternative-colors) > 0) {
+		for class in $button-alternative-colors {
+			.{class} {
+				.dijitRadioIcon {
+					border-color: $white;
+					&:after {
+						background-color: $white;
+					}
+				}
+			}
+		}
+	}
+
+	// disabled
+	.dijitRadioDisabled {
+		background-color: $radio-disabled-background-color;
+		border-color: $radio-disabled-border-color;
+	}
+	
+	.dijitRadioCheckedDisabled {
+		background-color: $radio-disabled-background-color;
+		border-color: $radio-checked-disabled-color;
+		&:after {
+			background-color: $radio-checked-disabled-color;
+		}
+	}
+
+	/* ---- RadioMenuItem ---- */
+	.dijitRadioMenuItem {
+		.dijitCheckedMenuItemIcon {
+			width: $radio-width;
+			height: $radio-height;
+			background: $radio-background-color;
+			border: 1px solid $border-color;
+			border-radius: 50%;
+			position: relative;
+			overflow: visible;
+			box-sizing: border-box;
+			&:after {
+				content: " ";
+				display: block;
+				width: 0;
+				height: 0;
+				background-color: $radio-checked-color;
+				border-radius: 50%;
+				opacity: 0;
+				margin: ($radio-width) * .5;
+				position: absolute;
+				top: 0;
+				left: 0;
+				transition: all 0.15s ease-in-out;
+			}
+		}
+	}
+	
+	.dijitRadioMenuItemChecked {
+		.dijitCheckedMenuItemIcon {
+			border-color: $border-color;
+			&:after {
+				width: $radio-width - 8px;
+				height: @width;
+				margin: 3px;
+				opacity: 1;
+			}
+		}
+	}
+
+}

lib/flat/dijit/form/Select.css

@@ -0,0 +1,167 @@
+/* Select | Combobox
+ * And minor style for DateTextBox | MultiSelect
+ *
+ * Styling Select mainly includes:
+ * 
+ * 1. Containers
+ *	Select:
+ * 		.dijitSelect
+ * 		.dijitButtonContents
+ *	Combobox:
+ *		.dijitComboBox
+ *
+ * 2. Arrow Button
+ * 		.dijitArrowButton
+ * 		.dijitArrowButtonInner
+ *		.dijitComboBox .dijitButtonNode
+ *
+ * 3. Menu
+ * 		.dijitSelectMenu
+ * 
+ * 4. States - Hover, Active, Focused, Disabled, e.g.
+ *
+ *	Select: Hover, Active, Focused, Disabled
+ * 		.dijitSelectHover
+ * 		.dijitSelectFocused
+ * 		.dijitSelectDisabled
+ *
+ *	Combobox: Hover, Focused (Open), Disabled
+ *		.dijitComboBox .dijitDownArrowButtonHover		
+ *		.dijitComboBoxOpenHover .dijitButtonNode
+ *		.dijitComboBoxDisabled .dijitButtonNode
+ *
+ */
+.flat .dijitSelect .dijitArrowButtonInner,
+.flat .dijitComboBox .dijitArrowButtonInner {
+  margin: 0;
+  width: 0;
+  height: 0;
+}
+.flat .dijitSelect {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  table-layout: fixed;
+}
+.flat .dijitSelect .dijitButtonContents,
+.flat .dijitSelect .dijitArrowButton {
+  line-height: 20px;
+  padding: 4px 12px;
+  border: 0;
+  border-radius: 0 2.000000000000001px 2.000000000000001px 0;
+}
+.flat .dijitSelect .dijitButtonContents {
+  padding: 0;
+  overflow: hidden;
+  -o-text-overflow: ellipsis;
+  text-overflow: ellipsis;
+  border-radius: 2.000000000000001px 0 0 2.000000000000001px;
+}
+.flat .dijitSelect .dijitInputField {
+  padding: 0 0 0 12px;
+}
+.flat .dijitSelect .dijitArrowButton {
+  width: 20px;
+  padding: 4px;
+}
+.flat .dijitSelectHover {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+}
+.flat .dijitSelectActive {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitSelectFocused {
+  border: 1px solid #9e9e9e;
+}
+.flat .dijitSelectDisabled {
+  cursor: default;
+  color: #9e9e9e;
+  background-color: #f5f5f5;
+  border-color: #e3e3e3;
+}
+.flat .dijitComboBox .dijitButtonNode {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  border-radius: 0 2.000000000000001px 2.000000000000001px 0;
+}
+.flat .dijitComboBoxOpenHover .dijitButtonNode,
+.flat .dijitComboBox .dijitDownArrowButtonHover {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.flat .dijitComboBoxDisabled .dijitButtonNode {
+  cursor: default;
+  color: #9e9e9e;
+  background-color: #f5f5f5;
+  border-color: #e3e3e3;
+}
+.flat .dijitComboBox .dijitArrowButton {
+  width: 20px;
+  padding: 4px;
+}
+.flat .dijitToolbar .dijitComboBox .dijitArrowButtonInner {
+  border: none;
+}
+.flat .dijitDateTextBox .dijitArrowButton:before {
+  content: "\f01e";
+}
+.flat .dijitTimeTextBox .dijitArrowButton:before {
+  content: "\f01f";
+}
+.flat select {
+  padding: 4px 0;
+  border: 1px solid #9e9e9e;
+  -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
+  box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
+}
+.flat select option {
+  padding: 4px 8px;
+}
+.flat .dijitSelectMenu td.dijitMenuItemIconCell,
+.flat .dijitSelectMenu td.dijitMenuArrowCell {
+/* so that arrow and icon cells from MenuItem are not displayed */
+  display: none;
+}

lib/flat/dijit/form/Select.styl

@@ -0,0 +1,164 @@
+/* Select | Combobox
+ * And minor style for DateTextBox | MultiSelect
+ *
+ * Styling Select mainly includes:
+ * 
+ * 1. Containers
+ *	Select:
+ * 		.dijitSelect
+ * 		.dijitButtonContents
+ *	Combobox:
+ *		.dijitComboBox
+ *
+ * 2. Arrow Button
+ * 		.dijitArrowButton
+ * 		.dijitArrowButtonInner
+ *		.dijitComboBox .dijitButtonNode
+ *
+ * 3. Menu
+ * 		.dijitSelectMenu
+ * 
+ * 4. States - Hover, Active, Focused, Disabled, e.g.
+ *
+ *	Select: Hover, Active, Focused, Disabled
+ * 		.dijitSelectHover
+ * 		.dijitSelectFocused
+ * 		.dijitSelectDisabled
+ *
+ *	Combobox: Hover, Focused (Open), Disabled
+ *		.dijitComboBox .dijitDownArrowButtonHover		
+ *		.dijitComboBoxOpenHover .dijitButtonNode
+ *		.dijitComboBoxDisabled .dijitButtonNode
+ *
+ */
+
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+		
+	/* arrows */
+
+	.dijitSelect,
+	.dijitComboBox {
+		.dijitArrowButtonInner {
+			margin: 0;
+			width:0;
+			height: 0;
+		}
+	}
+
+	/* ----- Select ----- */
+
+	.dijitSelect {
+		button-style();
+		table-layout: fixed;
+
+		.dijitButtonContents,
+		.dijitArrowButton {
+			line-height: 20px;
+			padding: $button-padding;
+			border: 0;
+			border-radius: 0 $select-button-border-radius $select-button-border-radius 0;
+		}
+		.dijitButtonContents {
+			padding:0;
+			overflow: hidden;
+			text-overflow: ellipsis;
+			border-radius: $select-button-border-radius 0 0 $select-button-border-radius;
+		}
+		.dijitInputField {
+			padding: 0 0 0 $input-padding*3;
+		}
+		.dijitArrowButton {
+			width: $button-arrow-width;
+			padding: $button-arrow-padding;
+		}
+	}
+
+	/* hover */
+
+	.dijitSelectHover {
+		button-hover-style();
+	}
+
+	.dijitSelectActive {
+		button-active-style();
+	}
+
+	/* focused */
+
+	.dijitSelectFocused {
+		border: $select-focus-border;
+	}
+
+	/* disabled */
+
+	.dijitSelectDisabled {
+		button-disabled-style();
+	}
+
+	/* ----- Combobox ----- */
+
+	.dijitComboBox .dijitButtonNode {
+		button-style();
+		border-radius: 0 $select-button-border-radius $select-button-border-radius 0;
+	}
+
+	/* hover */
+
+	.dijitComboBoxOpenHover .dijitButtonNode,
+	.dijitComboBox .dijitDownArrowButtonHover {
+		button-hover-style();
+		box-shadow: none;
+	}
+
+	/* disabled */
+
+	.dijitComboBoxDisabled .dijitButtonNode {
+		button-disabled-style();
+	}
+
+	.dijitComboBox .dijitArrowButton {
+		width: $button-arrow-width;
+		padding: $button-arrow-padding;
+	}
+
+	// remove arrow when wrapped in a toolbar dijit
+	.dijitToolbar .dijitComboBox .dijitArrowButtonInner {
+		border: none;
+	}
+
+	/* -----  DateTextBox ----- */
+
+	.dijitDateTextBox .dijitArrowButton:before {
+		content: $select-date-icon;
+	}
+	/* -----  TimeTextBox ----- */
+
+	.dijitTimeTextBox .dijitArrowButton:before {
+		content: $select-time-icon;
+	}
+
+	/* ----- Multiple Select ----- */
+
+	select  {
+		padding: $input-padding 0;
+		border: 1px solid $input-border-color;
+		box-shadow: $shadow-depth1;
+	}
+
+	select option {
+		padding: $input-padding $input-padding * 2;
+	}
+
+	/* Dropdown menu styles for "Select" 
+	 * Most of menu styles are defined in Menu.styl 
+	 */
+
+	.dijitSelectMenu td.dijitMenuItemIconCell,
+	.dijitSelectMenu td.dijitMenuArrowCell { 
+		/* so that arrow and icon cells from MenuItem are not displayed */
+		display: none;
+	}
+	
+}

lib/flat/dijit/form/Select_rtl.css

@@ -0,0 +1,15 @@
+.flat .dijitSelectRtl .dijitButtonText {
+  float: right;
+  padding: 0 12px 0 0;
+}
+.flat .dijitSelectRtl .dijitButtonContents {
+  border-style: none none none solid;
+  text-align: right;
+}
+.flat .dijitComboBoxRtl .dijitButtonNode.dijitArrowButtonContainer {
+  border-radius: 3px 0 0 3px;
+}
+.flat .dijitComboBoxRtl .dijitArrowButtonContainer {
+  border-right-width: 1px !important;
+  border-left-width: 0 !important;
+}

lib/flat/dijit/form/Select_rtl.styl

@@ -0,0 +1,27 @@
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+	
+	.dijitSelectRtl {
+		.dijitButtonText {
+			float: right;
+			padding: 0 $input-padding*3 0 0;
+		}
+		.dijitButtonContents {
+			border-style: none none none solid;
+			text-align: right;
+		}
+	}
+	
+	.dijitComboBoxRtl {
+		.dijitButtonNode.dijitArrowButtonContainer {
+			border-radius: $button-border-radius 0 0 $button-border-radius;
+		}
+	
+		.dijitArrowButtonContainer {
+			border-right-width: 1px !important;
+			border-left-width: 0 !important;
+		}
+	}
+	
+}

lib/flat/dijit/form/Slider.css

@@ -0,0 +1,300 @@
+/* Slider 
+ * 
+ * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar)
+ * 
+ * Slider progress bar:
+ * 1. Slider progress bar (default styling): 
+ * 		.dijitSliderProgressBarH - progress bar at the middle of horizontal slider
+ * 		.dijitSliderLeftBumper - bar at the left of horizontal slider
+ * 		.dijitSliderRightBumper - bar at the right of horizontal slider
+ * 		.dijitSliderProgressBarV - progress bar at the middle of vertical slider
+ * 		.dijitSliderTopBumper - bar at the top of vertical slider
+ * 		.dijitSliderBottomtBumper - bar at the bottom of vertical slider
+ * 
+ * 2. hovered Slider progress bar (ie, mouse hover on progress bar)
+ * 		.dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border
+ * 
+ * 3. focused Slider progress bar (ie, mouse focused on progress bar)
+ * 		.dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border
+ * 
+ * 4. disabled/read-only Slider progress bar 
+ * 		.dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled
+ * 
+ * 
+ * Slider Thumbs:
+ * 1. Slider Thumbs (default styling): 
+ * 		.dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar
+ * 
+ * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs)
+ * 		.dijitSliderHover .dijitSliderImageHandleH - hovered controller style
+ * 
+ * 3. focused Slider progress bar (ie, mouse focused on slider thumbs)
+ * 		.dijitSliderFocused .dijitSliderImageHandleV - focused controller style
+ * 
+ * 
+ * Slider Increment/Decrement Buttons:
+ * 1. Slider Increment/Decrement Buttons (default styling): 
+ * 		.dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider
+ * 		.dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider
+ * 		.dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider
+ * 		.dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider
+ * 
+ * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons)
+ * 		.dijitSliderHover .dijitSliderDecrementIconH - for background, border
+ * 
+ * 3. active Slider Increment/Decrement Buttons (mouse down on the icons)
+ * 		.dijitSliderActive .dijitSliderIncrementIconV - for background, border
+ * 
+ * 4. disabled/read-only Slider Increment/Decrement Buttons
+ * 		.dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider
+ * 		.dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider
+ */
+.flat .dijitSliderBar {
+  border-style: solid;
+  outline: 1px;
+}
+.flat .dijitRuleLabelsContainer {
+  color: #424242;
+  font-size: smaller;
+}
+.flat .dijitSliderDisabled {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitRuleLabelsContainerH {
+  padding: 0;
+}
+.flat .dijitSliderBarH,
+.flat .dijitSliderBumperH {
+  height: 3px;
+}
+.flat .dijitSlider .dijitSliderLeftBumper {
+  border-radius: 1.5px 0 0 1.5px;
+  border: 0 none;
+  margin-left: 4px;
+}
+.flat .dijitSlider .dijitSliderRightBumper {
+  border-radius: 0 1.5px 1.5px 0;
+  border: 0 none;
+  margin-left: -2px;
+  margin-right: 4px;
+}
+.flat .dijitSlider .dijitSliderProgressBarH,
+.flat .dijitSlider .dijitSliderLeftBumper {
+  border: 0 none;
+  background-color: #2196f3;
+  background-image: none;
+}
+.flat .dijitSlider .dijitSliderRemainingBarH,
+.flat .dijitSlider .dijitSliderRightBumper {
+  border: 0 none;
+  background-color: #9e9e9e;
+}
+.flat .dijitSliderHover .dijitSliderProgressBarH,
+.flat .dijitSliderHover .dijitSliderLeftBumper {
+  background-color: #0d8cf1;
+  background-image: none;
+}
+.flat .dijitSliderFocused .dijitSliderProgressBarH,
+.flat .dijitSliderFocused .dijitSliderLeftBumper {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.flat .dijitSliderFocused .dijitSliderRemainingBarH,
+.flat .dijitSliderFocused .dijitSliderRightBumper {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.flat .dijitRuleLabelsContainerV {
+  padding: 0;
+}
+.flat .dijitSliderBarV,
+.flat .dijitSliderBumperV {
+  width: 3px;
+}
+.flat .dijitSlider .dijitSliderTopBumper {
+  border-radius: 1.5px 1.5px 0 0;
+  border: 0 none;
+  margin-top: 4px;
+  margin-bottom: -2px;
+}
+.flat .dijitSlider .dijitSliderBottomBumper {
+  border-radius: 0 0 1.5px 1.5px;
+  border: 0 none;
+  margin-bottom: 4px;
+}
+.flat .dijitSlider .dijitSliderProgressBarV,
+.flat .dijitSlider .dijitSliderBottomBumper {
+  border: 0 none;
+  background-color: #2196f3;
+  background-image: none;
+}
+.flat .dijitSlider .dijitSliderRemainingBarV,
+.flat .dijitSlider .dijitSliderTopBumper {
+  border: 0 none;
+  background-color: #9e9e9e;
+}
+.flat .dijitSliderHover .dijitSliderProgressBarV,
+.flat .dijitSliderHover .dijitSliderBottomBumper {
+  background-color: #0d8cf1;
+  background-image: none;
+}
+.flat .dijitSliderFocused .dijitSliderProgressBarV,
+.flat .dijitSliderFocused .dijitSliderBottomBumper {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.flat .dijitSliderFocused .dijitSliderRemainingBarV,
+.flat .dijitSliderFocused .dijitSliderTopBumper {
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}
+.flat .dijitSliderImageHandle {
+  background: #fff;
+  -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
+  box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2);
+  border-radius: 50%;
+  border: 1px solid #2196f3;
+  width: 16px;
+  height: 16px;
+  margin-top: -2px;
+  position: absolute;
+  -webkit-box-sizing: border-box;
+  -moz-box-sizing: border-box;
+  box-sizing: border-box;
+}
+.flat .dijitSliderImageHandle:after {
+  content: "";
+  display: block;
+  background: #2196f3;
+  border-radius: 50%;
+  height: 10px;
+  width: 10px;
+  left: 2px;
+  top: 2px;
+  position: absolute;
+}
+.flat .dijitSliderImageHandleV {
+  margin-top: 0;
+}
+.flat .dijitSliderHover .dijitSliderImageHandle,
+.flat .dijitSliderFocused .dijitSliderImageHandle {
+  -webkit-box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2);
+  box-shadow: 0 4px 2px -2px rgba(0,0,0,0.3), 0 4px 6px rgba(0,0,0,0.2);
+}
+.flat .dijitSliderDisabled.dijitSliderFocused .dijitSliderImageHandle:after {
+  display: none;
+}
+.flat .dijitSliderDecrementIconH,
+.flat .dijitSliderIncrementIconH,
+.flat .dijitSliderDecrementIconV,
+.flat .dijitSliderIncrementIconV {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  height: 20px;
+  width: 20px;
+  cursor: pointer;
+  color: #2196f3;
+  padding: 0;
+}
+.flat .dijitSliderDecrementIconH:hover,
+.flat .dijitSliderIncrementIconH:hover,
+.flat .dijitSliderDecrementIconV:hover,
+.flat .dijitSliderIncrementIconV:hover {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+}
+.flat .dijitSliderDecrementIconH:active,
+.flat .dijitSliderIncrementIconH:active,
+.flat .dijitSliderDecrementIconV:active,
+.flat .dijitSliderIncrementIconV:active {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitSliderReadOnly .dijitSliderDecrementIconH,
+.flat .dijitSliderDisabled .dijitSliderDecrementIconH,
+.flat .dijitSliderReadOnly .dijitSliderDecrementIconV,
+.flat .dijitSliderDisabled .dijitSliderDecrementIconV,
+.flat .dijitSliderReadOnly .dijitSliderIncrementIconH,
+.flat .dijitSliderDisabled .dijitSliderIncrementIconH,
+.flat .dijitSliderReadOnly .dijitSliderIncrementIconV,
+.flat .dijitSliderDisabled .dijitSliderIncrementIconV {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitSliderIncrementIconH,
+.flat .dijitSliderIncrementIconV,
+.flat .dijitSliderDecrementIconH,
+.flat .dijitSliderDecrementIconV {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+}
+.flat .dijitSliderIncrementIconH:before,
+.flat .dijitSliderIncrementIconV:before,
+.flat .dijitSliderDecrementIconH:before,
+.flat .dijitSliderDecrementIconV:before {
+  content: "\f011";
+  top: 0;
+  line-height: 20px;
+}
+.flat .dijitSliderIncrementIconH .dijitSliderButtonInner,
+.flat .dijitSliderIncrementIconV .dijitSliderButtonInner,
+.flat .dijitSliderDecrementIconH .dijitSliderButtonInner,
+.flat .dijitSliderDecrementIconV .dijitSliderButtonInner {
+  display: none;
+}
+.flat .dijitSliderDecrementIconH:before,
+.flat .dijitSliderDecrementIconV:before {
+  content: "\f012";
+}
+.flat .dijitRuleMark {
+  border: 0 none;
+}
+.flat .dijitRuleMarkH {
+  border-right: 1px solid #e0e0e0;
+}
+.flat .dijitRuleMarkV {
+  border-bottom: 1px solid #e0e0e0;
+}
+.flat .dijitRuleLabelContainerH {
+  margin-top: 2px;
+  margin-bottom: 2px;
+}
+.flat .dijitRuleLabelContainerV {
+  margin-left: 2px;
+  margin-right: 2px;
+}

lib/flat/dijit/form/Slider.styl

@@ -0,0 +1,345 @@
+/* Slider 
+ * 
+ * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar)
+ * 
+ * Slider progress bar:
+ * 1. Slider progress bar (default styling): 
+ * 		.dijitSliderProgressBarH - progress bar at the middle of horizontal slider
+ * 		.dijitSliderLeftBumper - bar at the left of horizontal slider
+ * 		.dijitSliderRightBumper - bar at the right of horizontal slider
+ * 		.dijitSliderProgressBarV - progress bar at the middle of vertical slider
+ * 		.dijitSliderTopBumper - bar at the top of vertical slider
+ * 		.dijitSliderBottomtBumper - bar at the bottom of vertical slider
+ * 
+ * 2. hovered Slider progress bar (ie, mouse hover on progress bar)
+ * 		.dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border
+ * 
+ * 3. focused Slider progress bar (ie, mouse focused on progress bar)
+ * 		.dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border
+ * 
+ * 4. disabled/read-only Slider progress bar 
+ * 		.dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled
+ * 
+ * 
+ * Slider Thumbs:
+ * 1. Slider Thumbs (default styling): 
+ * 		.dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar
+ * 
+ * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs)
+ * 		.dijitSliderHover .dijitSliderImageHandleH - hovered controller style
+ * 
+ * 3. focused Slider progress bar (ie, mouse focused on slider thumbs)
+ * 		.dijitSliderFocused .dijitSliderImageHandleV - focused controller style
+ * 
+ * 
+ * Slider Increment/Decrement Buttons:
+ * 1. Slider Increment/Decrement Buttons (default styling): 
+ * 		.dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider
+ * 		.dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider
+ * 		.dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider
+ * 		.dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider
+ * 
+ * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons)
+ * 		.dijitSliderHover .dijitSliderDecrementIconH - for background, border
+ * 
+ * 3. active Slider Increment/Decrement Buttons (mouse down on the icons)
+ * 		.dijitSliderActive .dijitSliderIncrementIconV - for background, border
+ * 
+ * 4. disabled/read-only Slider Increment/Decrement Buttons
+ * 		.dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider
+ * 		.dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider
+ */
+
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+	
+	.dijitSlider {
+	}
+
+	.dijitSliderBar {
+		border-style: solid;
+		outline: 1px;
+	}
+
+	.dijitRuleLabelsContainer {
+		color: $slider-label-text-color;
+		font-size: smaller;
+	}
+
+	/* disabled */
+
+	.dijitSliderDisabled {
+		opacity: $disabled-opacity;
+	}
+
+	/* ----- Horizontal Slider ----- */
+
+	.dijitRuleLabelsContainerH {
+		padding: 0;
+	}
+
+	/* ----- Bar ----- */
+
+	.dijitSliderBarH,
+	.dijitSliderBumperH {
+		height: $slider-bar-width;
+	}
+
+	.dijitSlider {
+		.dijitSliderLeftBumper {
+			border-radius: $slider-bar-radius 0 0 $slider-bar-radius;
+			border: 0 none;
+			margin-left: $slider-bar-spacing;
+		}
+		.dijitSliderRightBumper {
+			border-radius: 0 $slider-bar-radius $slider-bar-radius 0;
+			border: 0 none;
+			margin-left: -2px;
+			margin-right: $slider-bar-spacing;
+		}
+
+		.dijitSliderProgressBarH, 
+		.dijitSliderLeftBumper {
+			border: 0 none;
+			background-color: $slider-progressbar-background-color;
+			background-image: none;
+		}
+		.dijitSliderRemainingBarH,
+		.dijitSliderRightBumper {
+			border: 0 none;
+			background-color: $slider-remainingbar-background-color;
+		}
+	}
+
+	/* hover */
+
+	.dijitSliderHover {
+		.dijitSliderProgressBarH,
+		.dijitSliderLeftBumper {
+			background-color: darken($slider-progressbar-background-color, 8%);
+			background-image: none;
+		}
+	 	.dijitSliderRemainingBarH,
+		.dijitSliderRightBumper {
+		}
+	}
+
+	/* focus */
+
+	.dijitSliderFocused {
+		.dijitSliderProgressBarH,
+		.dijitSliderLeftBumper {
+			box-shadow: none;
+		}
+		.dijitSliderRemainingBarH,
+		.dijitSliderRightBumper {
+			box-shadow: none;
+		}
+	}
+
+	/* ----- Vertical Slider ----- */
+
+	.dijitRuleLabelsContainerV {
+		padding: 0;
+	}
+
+	.dijitSliderBarV,
+	.dijitSliderBumperV {
+		width: $slider-bar-width;
+	}
+
+	.dijitSlider {
+		.dijitSliderTopBumper {
+			border-radius: $slider-bar-radius $slider-bar-radius 0 0;
+			border: 0 none;
+			margin-top: $slider-bar-spacing;
+			margin-bottom: -2px;
+		}
+		.dijitSliderBottomBumper {
+			border-radius: 0 0 $slider-bar-radius $slider-bar-radius;
+			border: 0 none;
+			margin-bottom: $slider-bar-spacing;
+		}
+
+		.dijitSliderProgressBarV,
+		.dijitSliderBottomBumper {
+			border: 0 none;
+			background-color: $slider-progressbar-verticalr-background-color;
+			background-image: none;
+		}
+		.dijitSliderRemainingBarV,
+		.dijitSliderTopBumper {
+			border: 0 none;
+			background-color: $slider-remainingbar-vertical-background-color;
+		}
+	}
+
+	/* hover */
+
+	.dijitSliderHover {
+		.dijitSliderProgressBarV,
+		.dijitSliderBottomBumper{
+			background-color: darken($slider-progressbar-verticalr-background-color, 8%);
+			background-image: none;
+		}
+		.dijitSliderRemainingBarV,
+		.dijitSliderTopBumper {
+		}
+	}
+
+	/* focused */
+
+	.dijitSliderFocused {
+		.dijitSliderProgressBarV,
+		.dijitSliderBottomBumper{
+			box-shadow: none;
+		}
+		.dijitSliderRemainingBarV,
+		.dijitSliderTopBumper {
+			box-shadow: none;
+		}
+	}
+
+	/* ------- Thumbs ------- */
+
+	.dijitSliderImageHandle {
+		background: $slider-thumb-background-color;
+		box-shadow: $slider-thumb-box-shadow;
+		border-radius: $slider-thumb-border-radius;
+		border: 1px solid $slider-thumb-border-color;
+		width: $slider-thumb-width;
+		height: $slider-thumb-height;
+		margin-top: -2px;
+		position: absolute;
+		box-sizing: border-box;
+		&:after {
+			content: "";
+			display: block;
+			background: $slider-thumb-inner-background-color;
+			border-radius: $slider-thumb-inner-border-radius;
+			height: $slider-thumb-inner-height;
+			width: $slider-thumb-inner-width;
+			left: ($slider-thumb-width - $slider-thumb-inner-width) * 0.5 - 1px;
+			top: ($slider-thumb-height - $slider-thumb-inner-height) * 0.5 - 1px;
+			position: absolute;
+		}
+	}
+	
+	.dijitSliderImageHandleV {
+		margin-top: 0;
+	}
+	
+	/* hover & focused */
+
+	.dijitSliderHover,
+	.dijitSliderFocused {
+		.dijitSliderImageHandle {
+			box-shadow: $shadow-depth1_5;
+		}
+	}
+
+	.dijitSliderDisabled.dijitSliderFocused {
+		.dijitSliderImageHandle {
+			&:after {
+				display: none;
+			}
+		}
+	}
+
+	/* ---- Increment/Decrement Buttons ---- */
+
+	.dijitSliderDecrementIconH,
+	.dijitSliderIncrementIconH,
+	.dijitSliderDecrementIconV,
+	.dijitSliderIncrementIconV {
+		button-style();
+		height: $slider-button-height;
+		width: $slider-button-width;
+		cursor: pointer;
+		color: $slider-button-text-color;
+		padding: 0;
+	}
+
+	.dijitSliderDecrementIconH,
+	.dijitSliderIncrementIconH,
+	.dijitSliderDecrementIconV,
+	.dijitSliderIncrementIconV {
+		
+		/* hover */
+		
+		&:hover{
+			button-hover-style();
+		}
+		
+		/* active */
+		
+		&:active{
+			button-active-style();
+		}
+	}
+
+	/* read only & disabled */
+
+	.dijitSliderReadOnly,
+	.dijitSliderDisabled {
+		.dijitSliderDecrementIconH,
+		.dijitSliderDecrementIconV,
+		.dijitSliderIncrementIconH,
+		.dijitSliderIncrementIconV {
+			opacity: $disabled-opacity;
+		}
+	}
+
+	/* icons */
+
+	.dijitSliderButtonInner {
+	}
+
+	.dijitSliderIncrementIconH,
+	.dijitSliderIncrementIconV,
+	.dijitSliderDecrementIconH,
+	.dijitSliderDecrementIconV {
+		_icon-core-style();
+		&:before {
+			content: $slider-icon-increment;
+			top:0;
+			line-height: $slider-button-height;
+		}
+		.dijitSliderButtonInner {
+			display: none;
+		}
+	}
+
+	.dijitSliderDecrementIconH,
+	.dijitSliderDecrementIconV {
+		&:before {
+			content: $slider-icon-decrement;
+		}
+	}
+
+	/* ---- Rule Mark ---- */
+	
+	.dijitRuleMark {
+		border: 0 none;
+	}
+	
+	.dijitRuleMarkH {
+		border-right: 1px solid $slider-ruler-color;
+	}
+	
+	.dijitRuleMarkV {
+		border-bottom: 1px solid $slider-ruler-color;
+	}
+	
+	.dijitRuleLabelContainerH {
+		margin-top: $slider-ruler-padding;
+		margin-bottom: $slider-ruler-padding;
+	}
+
+	.dijitRuleLabelContainerV {
+		margin-left: $slider-ruler-padding;
+		margin-right: $slider-ruler-padding;
+	}
+
+}

lib/flat/dijit/form/Slider_rtl.css

@@ -0,0 +1,32 @@
+.flat .dijitSliderRtl .dijitSliderProgressBarH {
+  float: right;
+  right: 0;
+  left: auto;
+}
+.flat .dijitSliderRtl .dijitSliderLeftBumper {
+  border-left-width: 0;
+  border-right-width: 1px;
+  margin-left: 0;
+  margin-right: 4px;
+  border-radius: 0 1.5px 1.5px 0;
+}
+.flat .dijitSliderRtl .dijitSliderRightBumper {
+  border-left-width: 1px;
+  border-right-width: 0;
+  margin-left: 4px;
+  margin-right: -2px;
+  border-radius: 1.5px 0 0 1.5px;
+}
+.flat .dijitSliderRtl .dijitSliderMoveableH {
+  right: auto;
+  left: 0;
+}
+.flat .dijitSliderRtl .dijitSliderImageHandleV {
+  left: auto;
+}
+.flat .dijitSliderRtl .dijitSliderImageHandleH {
+  left: -50%;
+}
+.flat .dijitSliderRtl .dijitRuleContainerV {
+  float: right;
+}

lib/flat/dijit/form/Slider_rtl.styl

@@ -0,0 +1,39 @@
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+		
+	.dijitSliderRtl {
+		.dijitSliderProgressBarH {
+			float:right;
+			right:0;
+			left:auto;
+		}
+		.dijitSliderLeftBumper {
+			border-left-width: 0;
+			border-right-width: 1px;
+			margin-left: 0;
+			margin-right: $slider-bar-spacing;
+			border-radius: 0 $slider-bar-radius $slider-bar-radius 0;
+		}
+		.dijitSliderRightBumper {
+			border-left-width: 1px;
+			border-right-width: 0;
+			margin-left: $slider-bar-spacing;
+			margin-right: -2px;
+			border-radius: $slider-bar-radius 0 0 $slider-bar-radius;
+		}
+		.dijitSliderMoveableH {
+			right: auto;
+			left: 0;
+		}
+		.dijitSliderImageHandleV {
+			left:auto;
+		}
+		.dijitSliderImageHandleH {
+			left:-50%;
+		}
+		.dijitRuleContainerV {
+			float:right;
+		}
+	}
+}

lib/flat/dijit/form/TextBox.css

@@ -0,0 +1,275 @@
+/* Text Inputs: [TextBox | DateTextBox | CurrencyTextBox | ValidationTextBox | ...] | TextArea
+ * Mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitTextBox
+ * 		.dijitInputField - container that wraps "dijitInputInner" or "dijitPlaceHolder"
+ *
+ * 2. Textbox input
+ * 		.dijitInputInner
+ * 		.dijitPlaceHolder
+ *
+ * 3. States - Hover, Focused, Disabled, Error, Error while Focused e.g.
+ * 		.dijitTextBoxHover
+ * 		.dijitTextBoxFocused
+ * 		.dijitTextBoxDisabled
+ *      .dijitTextBoxError
+ *      .dijitTextBoxErrorFocused
+ *
+*/
+.flat .dijitTextBox,
+.flat .dijitInputInner {
+  line-height: 20px;
+}
+.flat .dijitTextBox {
+  background: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+  -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+  -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+  -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+  -ms-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+  transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+}
+.flat .dijitTextArea {
+  padding: 4px 6px;
+}
+.flat .dijitTextBox .dijitInputField {
+  padding: 0 4px;
+  margin: 0 2px;
+}
+.flat .dijitSelect.alt-primary,
+.flat .dijitComboBox.alt-primary,
+.flat .dijitSpinner.alt-primary {
+  border-color: #1e88e5;
+}
+.flat .dijitSelect.alt-success,
+.flat .dijitComboBox.alt-success,
+.flat .dijitSpinner.alt-success {
+  border-color: #43a047;
+}
+.flat .dijitSelect.alt-info,
+.flat .dijitComboBox.alt-info,
+.flat .dijitSpinner.alt-info {
+  border-color: #03a9f4;
+}
+.flat .dijitSelect.alt-warning,
+.flat .dijitComboBox.alt-warning,
+.flat .dijitSpinner.alt-warning {
+  border-color: #fb8c00;
+}
+.flat .dijitSelect.alt-danger,
+.flat .dijitComboBox.alt-danger,
+.flat .dijitSpinner.alt-danger {
+  border-color: #e53935;
+}
+.flat .dijitSelect.alt-inverse,
+.flat .dijitComboBox.alt-inverse,
+.flat .dijitSpinner.alt-inverse {
+  border-color: #616161;
+}
+.flat .dijitTextBox .dijitInputInner,
+.flat .dijitValidationTextBox .dijitValidationContainer,
+.flat .dijitTextBox .dijitInputField .dijitPlaceHolder {
+  padding: 4px;
+}
+.flat .dijitTextBoxHover {
+  border-color: #2196f3;
+  -webkit-transition-duration: 0.25s;
+  -moz-transition-duration: 0.25s;
+  -o-transition-duration: 0.25s;
+  -ms-transition-duration: 0.25s;
+  transition-duration: 0.25s;
+}
+.flat .dijitTextBoxFocused {
+  border-color: #2196f3;
+  -webkit-transition-duration: 0.1s;
+  -moz-transition-duration: 0.1s;
+  -o-transition-duration: 0.1s;
+  -ms-transition-duration: 0.1s;
+  transition-duration: 0.1s;
+}
+.flat .dijitTextBoxDisabled {
+  color: #9e9e9e;
+  background-color: #f5f5f5;
+  border-color: #e3e3e3;
+}
+.flat .dijitComboBoxDisabled.alt-primary,
+.flat .dijitSpinnerDisabled.alt-primary {
+  background: #f5f5f5;
+  color: #9e9e9e;
+  border: 1px solid #6db2ee;
+}
+.flat .dijitComboBoxDisabled.alt-primary .dijitButtonNode,
+.flat .dijitSpinnerDisabled.alt-primary .dijitButtonNode {
+  background: #6db2ee;
+  color: #f2f2f2;
+}
+.flat .dijitSpinnerDisabled.alt-primary .dijitSpinnerButtonContainer {
+  border-left-color: #6db2ee;
+}
+.flat .dijitSpinnerRtlDisabled.alt-primary .dijitSpinnerButtonContainer {
+  border-right-color: #6db2ee;
+}
+.flat .dijitSelectDisabled.alt-primary {
+  border-color: #6db2ee;
+}
+.flat .dijitSelectDisabled.alt-primary .dijitStretch,
+.flat .dijitSelectDisabled.alt-primary .dijitButtonNode {
+  background: #6db2ee;
+  color: #f2f2f2;
+}
+.flat .dijitComboBoxDisabled.alt-success,
+.flat .dijitSpinnerDisabled.alt-success {
+  background: #f5f5f5;
+  color: #9e9e9e;
+  border: 1px solid #7dc981;
+}
+.flat .dijitComboBoxDisabled.alt-success .dijitButtonNode,
+.flat .dijitSpinnerDisabled.alt-success .dijitButtonNode {
+  background: #7dc981;
+  color: #f2f2f2;
+}
+.flat .dijitSpinnerDisabled.alt-success .dijitSpinnerButtonContainer {
+  border-left-color: #7dc981;
+}
+.flat .dijitSpinnerRtlDisabled.alt-success .dijitSpinnerButtonContainer {
+  border-right-color: #7dc981;
+}
+.flat .dijitSelectDisabled.alt-success {
+  border-color: #7dc981;
+}
+.flat .dijitSelectDisabled.alt-success .dijitStretch,
+.flat .dijitSelectDisabled.alt-success .dijitButtonNode {
+  background: #7dc981;
+  color: #f2f2f2;
+}
+.flat .dijitComboBoxDisabled.alt-info,
+.flat .dijitSpinnerDisabled.alt-info {
+  background: #f5f5f5;
+  color: #9e9e9e;
+  border: 1px solid #56c9fd;
+}
+.flat .dijitComboBoxDisabled.alt-info .dijitButtonNode,
+.flat .dijitSpinnerDisabled.alt-info .dijitButtonNode {
+  background: #56c9fd;
+  color: #f2f2f2;
+}
+.flat .dijitSpinnerDisabled.alt-info .dijitSpinnerButtonContainer {
+  border-left-color: #56c9fd;
+}
+.flat .dijitSpinnerRtlDisabled.alt-info .dijitSpinnerButtonContainer {
+  border-right-color: #56c9fd;
+}
+.flat .dijitSelectDisabled.alt-info {
+  border-color: #56c9fd;
+}
+.flat .dijitSelectDisabled.alt-info .dijitStretch,
+.flat .dijitSelectDisabled.alt-info .dijitButtonNode {
+  background: #56c9fd;
+  color: #f2f2f2;
+}
+.flat .dijitComboBoxDisabled.alt-warning,
+.flat .dijitSpinnerDisabled.alt-warning {
+  background: #f5f5f5;
+  color: #9e9e9e;
+  border: 1px solid #ffb557;
+}
+.flat .dijitComboBoxDisabled.alt-warning .dijitButtonNode,
+.flat .dijitSpinnerDisabled.alt-warning .dijitButtonNode {
+  background: #ffb557;
+  color: #f2f2f2;
+}
+.flat .dijitSpinnerDisabled.alt-warning .dijitSpinnerButtonContainer {
+  border-left-color: #ffb557;
+}
+.flat .dijitSpinnerRtlDisabled.alt-warning .dijitSpinnerButtonContainer {
+  border-right-color: #ffb557;
+}
+.flat .dijitSelectDisabled.alt-warning {
+  border-color: #ffb557;
+}
+.flat .dijitSelectDisabled.alt-warning .dijitStretch,
+.flat .dijitSelectDisabled.alt-warning .dijitButtonNode {
+  background: #ffb557;
+  color: #f2f2f2;
+}
+.flat .dijitComboBoxDisabled.alt-danger,
+.flat .dijitSpinnerDisabled.alt-danger {
+  background: #f5f5f5;
+  color: #9e9e9e;
+  border: 1px solid #ee7e7c;
+}
+.flat .dijitComboBoxDisabled.alt-danger .dijitButtonNode,
+.flat .dijitSpinnerDisabled.alt-danger .dijitButtonNode {
+  background: #ee7e7c;
+  color: #f2f2f2;
+}
+.flat .dijitSpinnerDisabled.alt-danger .dijitSpinnerButtonContainer {
+  border-left-color: #ee7e7c;
+}
+.flat .dijitSpinnerRtlDisabled.alt-danger .dijitSpinnerButtonContainer {
+  border-right-color: #ee7e7c;
+}
+.flat .dijitSelectDisabled.alt-danger {
+  border-color: #ee7e7c;
+}
+.flat .dijitSelectDisabled.alt-danger .dijitStretch,
+.flat .dijitSelectDisabled.alt-danger .dijitButtonNode {
+  background: #ee7e7c;
+  color: #f2f2f2;
+}
+.flat .dijitComboBoxDisabled.alt-inverse,
+.flat .dijitSpinnerDisabled.alt-inverse {
+  background: #f5f5f5;
+  color: #9e9e9e;
+  border: 1px solid #989898;
+}
+.flat .dijitComboBoxDisabled.alt-inverse .dijitButtonNode,
+.flat .dijitSpinnerDisabled.alt-inverse .dijitButtonNode {
+  background: #989898;
+  color: #f2f2f2;
+}
+.flat .dijitSpinnerDisabled.alt-inverse .dijitSpinnerButtonContainer {
+  border-left-color: #989898;
+}
+.flat .dijitSpinnerRtlDisabled.alt-inverse .dijitSpinnerButtonContainer {
+  border-right-color: #989898;
+}
+.flat .dijitSelectDisabled.alt-inverse {
+  border-color: #989898;
+}
+.flat .dijitSelectDisabled.alt-inverse .dijitStretch,
+.flat .dijitSelectDisabled.alt-inverse .dijitButtonNode {
+  background: #989898;
+  color: #f2f2f2;
+}
+.flat .dijitTextBoxError,
+.flat .dijitTextBoxError .dijitButtonNode {
+  border-color: #dd2c00;
+}
+.flat .dijitTextBoxErrorFocused,
+.flat .dijitTextBoxErrorFocused .dijitButtonNode {
+  border: 1px solid #bc2500;
+}
+.flat .dijitValidationTextBoxError .dijitValidationContainer {
+  color: #dd2c00;
+  width: 18px;
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 18px;
+}
+.flat .dijitValidationTextBoxError .dijitValidationContainer:before {
+  content: "\f017";
+}
+.flat .dijitValidationTextBoxError .dijitValidationIcon {
+  display: none;
+}

lib/flat/dijit/form/TextBox.styl

@@ -0,0 +1,104 @@
+/* Text Inputs: [TextBox | DateTextBox | CurrencyTextBox | ValidationTextBox | ...] | TextArea
+ * Mainly includes:
+ * 
+ * 1. Containers
+ * 		.dijitTextBox
+ * 		.dijitInputField - container that wraps "dijitInputInner" or "dijitPlaceHolder"
+ *
+ * 2. Textbox input
+ * 		.dijitInputInner
+ * 		.dijitPlaceHolder
+ *
+ * 3. States - Hover, Focused, Disabled, Error, Error while Focused e.g.
+ * 		.dijitTextBoxHover
+ * 		.dijitTextBoxFocused
+ * 		.dijitTextBoxDisabled
+ *      .dijitTextBoxError
+ *      .dijitTextBoxErrorFocused
+ *
+*/
+
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+
+	.dijitTextBox,
+	.dijitInputInner {
+		line-height: $line-height;
+	}
+
+	.dijitTextBox {
+		background: $input-background;
+		border: 1px solid $input-border-color;
+		border-radius: $input-border-radius;
+		transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s;
+	}
+
+	.dijitTextArea {
+		padding: $input-padding $input-padding + 2px;
+	}
+
+	.dijitTextBox {
+		.dijitInputField {
+			padding: 0  $input-padding;
+			margin:0 2px;
+		}
+	}
+
+	create-alternative-textboxes($button-alternative-colors);
+
+	.dijitTextBox .dijitInputInner,
+	.dijitValidationTextBox .dijitValidationContainer,
+	.dijitTextBox .dijitInputField .dijitPlaceHolder {
+		padding: $input-padding;
+	}
+
+	// hover
+	.dijitTextBoxHover {
+		border-color: $input-hover-border-color;
+		transition-duration: .25s;
+	}
+
+	// focused
+	.dijitTextBoxFocused {
+		border-color: $input-focused-border-color;
+		transition-duration: .1s;
+	}
+
+	// disabled
+	.dijitTextBoxDisabled {
+		color: $input-disabled-color;
+		background-color: $input-disabled-background-color;
+		border-color: $input-disabled-border-color;
+	}
+	
+	create-alternative-textboxes-disabled($button-alternative-colors);
+
+	// error
+	.dijitTextBoxError,
+	.dijitTextBoxError .dijitButtonNode {
+		border-color: $input-error-border-color;
+	}
+
+	// error: focused
+	.dijitTextBoxErrorFocused,
+	.dijitTextBoxErrorFocused .dijitButtonNode {
+		border: $input-focused-error-border;
+	}
+
+	// error: icon
+	.dijitValidationTextBoxError {
+		.dijitValidationContainer {
+			color: $input-error-icon-background-color;
+			width: $input-error-icon-width;
+			_icon-core-style();
+			font-size: $input-error-icon-width;
+			&:before {
+				content: $icon-error;
+			}
+		}
+		.dijitValidationIcon {
+			display: none;
+		}
+	}
+}

lib/flat/dijit/form/TextBox_rtl.css

@@ -0,0 +1,21 @@
+.flat .dijitTextBoxRtl .dijitValidationContainer,
+.flat .dijitTextBoxRtl .dijitSpinnerButtonContainer {
+  border-right-width: 1px !important;
+  border-left-width: 0 !important;
+}
+.flat .dijitTextBoxRtlError .dijitValidationContainer {
+  border-left-width: 0;
+  border-right-width: 1px;
+}
+.flat .dijitRtl .dijitPlaceHolder {
+  left: auto;
+  right: 0;
+}
+.flat .dijitTextBoxRtl .dijitSpinnerButtonContainer,
+.flat .dijitValidationTextBoxRtl .dijitValidationContainer,
+.flat .dijitTextBoxRtl .dijitArrowButtonContainer {
+  float: left;
+}
+.flat div.dijitNumberTextBoxRtl {
+  text-align: right;
+}

lib/flat/dijit/form/TextBox_rtl.styl

@@ -0,0 +1,30 @@
+@import 'dijit_form_variables';
+
+.{$theme-name} {
+	.dijitTextBoxRtl .dijitValidationContainer,
+	.dijitTextBoxRtl .dijitSpinnerButtonContainer {
+		border-right-width: 1px !important;
+		border-left-width: 0 !important;
+	}
+
+	.dijitTextBoxRtlError .dijitValidationContainer {
+  		border-left-width: 0;
+  		border-right-width: 1px;
+	}
+	
+	.dijitRtl .dijitPlaceHolder {
+		left: auto;
+		right: 0;
+	}
+	
+	.dijitTextBoxRtl .dijitSpinnerButtonContainer,
+	.dijitValidationTextBoxRtl .dijitValidationContainer,
+	.dijitTextBoxRtl .dijitArrowButtonContainer {
+		float: left;
+	}
+	
+	div.dijitNumberTextBoxRtl {
+		text-align: right;
+	}
+
+}

lib/flat/dijit/form/dijit_form_variables.styl

@@ -0,0 +1,212 @@
+/* dijit/form/* variables */
+
+@import '../../variables';
+
+/* Button (default) */
+
+$button-default-color = $theme-base-color;
+$button-default-border-color = $border-color;
+$button-padding = $padding $padding * 3;
+$button-border-radius = $border-radius;
+
+// arrow button
+$button-arrow-width = $line-height; // The arrow button size will be 30px by 30px
+$button-arrow-padding = $padding;
+
+// disabled
+$button-disabled-color = $disabled-color;
+$button-disabled-background-color = $disabled-background-color;
+$button-disabled-border-color = $disabled-border-color;
+
+// alternatice button styles
+
+$button-alternative-text-color = $theme-base-color;
+$button-alternative-colors = {
+	alt-primary: $primary,
+	alt-success: $success,
+	alt-info: $info,
+	alt-warning: $warning,
+	alt-danger: $danger,
+	alt-inverse: $inverse
+};
+
+/* Text Inputs (textbox, textarea, validation textbox, etc.) */
+
+$input-padding = $padding;
+$input-border-radius = $border-radius;
+
+// normal
+$input-border-color = $border-color;
+$input-background = $theme-base-color;
+
+// hover
+$input-hover-border-color = $theme-base;
+
+// focused
+$input-focused-border-color = $theme-base;
+
+// disabled
+$input-disabled-color = $disabled-color;
+$input-disabled-background-color = $disabled-background-color;
+$input-disabled-border-color = $disabled-border-color;
+
+// error
+$input-error-border-color = $error;
+
+// error: focused
+$input-focused-error-border = 1px solid darken($error, 15%);
+
+// error icon
+$input-error-icon-width = 18px; // the width of the error icon container and icon height
+$input-error-icon-background-color = $error;
+
+/* CheckBox (and Checkbox Icon) */
+
+$checkbox-height = 16px;
+$checkbox-width = 16px;
+$checkbox-padding = 0;
+$checkbox-border-radius = 2px;
+$checkbox-icon-size = $icon-size;
+$checkbox-icon = "\f00c";
+
+// normal
+$checkbox-background-color = $theme-base-color;
+$checkbox-border-color = $border-color;
+
+// checked
+$checkbox-checked-icon-color = $theme-base-color;
+$checkbox-checked-background-color = $theme-base;
+$checkbox-checked-border-color = $theme-base;
+
+// hover
+// hover unchecked
+$checkbox-hover-unchecked-background-color = $checkbox-background-color;
+$checkbox-hover-unchecked-border-color = 1px solid $theme-base;
+
+// hover checked
+$checkbox-hover-checked-background-color = lighten($checkbox-checked-background-color, 15%);
+$checkbox-hover-checked-border-color = $checkbox-checked-border-color;
+
+// Checkbox icon (within a widget, e.g. toggle button)
+$checkbox-icon-checked-icon-color = $theme-base;
+$checkbox-icon-padding = 0;
+
+// disabled
+$checkbox-disabled-color = $disabled-color;
+$checkbox-disabled-background-color = $disabled-background-color;
+$checkbox-disabled-border-color = $disabled-border-color;
+$checkbox-checked-disabled-color = darken($checkbox-checked-icon-color, 35%); // may need a &:before for icon in Checkbox.styl
+$checkbox-checked-disabled-background-color = lighten($checkbox-checked-background-color, 35%);
+$checkbox-checked-disabled-border-color = $checkbox-checked-disabled-background-color;
+
+/* Radio (and Radio Icon)the styles are using pure CSS */
+
+$radio-height = 16px;
+$radio-width = 16px;
+$radio-icon-size = 16px;
+
+//  normal
+$radio-background-color = $theme-base-color;
+$radio-border-color = $theme-base;
+$radio-border-radius = 50%;
+
+// checked
+$radio-checked-color = $theme-base;
+
+// hover
+$radio-hover-border-color = lighten($radio-checked-color, 25%);
+
+// disabled
+$radio-disabled-background-color = $disabled-background-color;
+$radio-disabled-border-color = $disabled-border-color;
+$radio-checked-disabled-color = lighten($radio-checked-color, 35%); // both border and check
+
+/* Select (only for the button part, the styles for the "dropdown" are defined in the "Menu" section) */
+
+$select-border = 1px solid $border-color;
+$select-button-border-radius = $border-radius * (2/3);
+
+// Select's normal, hover, active and disabled styles are the same as "form/Button"
+
+// focus 
+$select-focus-border = $select-border;
+
+// icons
+$select-date-icon = "\f01e";
+$select-time-icon = "\f01f";
+
+/* Slider */
+
+// bar 
+$slider-bar-width = 3px;// the height for the horizontal slider and the width for the vertical slider
+$slider-bar-radius = $slider-bar-width * .5;
+$slider-bar-spacing = $padding;// the spacing between the buttons and the bar
+
+// honrizontal slider
+// normal 
+$slider-progressbar-background-color = $theme-base;// Background color for the progress(highlight) part of slider bar
+$slider-remainingbar-background-color = $border-color;// Background color for the remaining part of slider bar
+
+// hover
+$slider-hovered-progressbar-border-color = darken($theme-base, 25%);
+
+// focus
+$slider-focused-progressbar-border-color = $slider-progressbar-border-color;
+
+// vertical slider
+// normal 
+$slider-progressbar-verticalr-background-color = $theme-base; 
+$slider-remainingbar-vertical-background-color = $slider-remainingbar-background-color;
+
+// hover
+$slider-hovered-progressbar-vertical-border-color = $slider-hovered-progressbar-border-color;
+
+// focus
+$slider-focused-progressbar-vertical-border-color = $slider-progressbar-vertical-border-color;
+
+// thumbs
+$slider-thumb-background-color = $theme-base-color;
+$slider-thumb-box-shadow = $shadow-depth1;
+$slider-thumb-border-radius = 50%;
+$slider-thumb-border-color = $theme-base;
+$slider-thumb-height = 16px;
+$slider-thumb-width = 16px;
+
+// The center part of the thumb
+$slider-thumb-inner-border-radius = 50%;
+$slider-thumb-inner-height = 10px;
+$slider-thumb-inner-width = 10px;
+$slider-thumb-inner-background-color = $theme-base;
+
+// hover (& focused)
+$slider-thumb-hover-box-shadow = $shadow-depth2;
+
+// label
+$slider-label-text-color = $grey-dark; // text color for labeling
+
+// ruler
+$slider-ruler-color = $grey-light;
+$slider-ruler-padding = $padding * 0.5;
+
+// increment and decrement buttons
+$slider-button-text-color = $theme-base;
+$slider-button-width = 20px;
+$slider-button-height = $slider-button-width;
+$slider-icon-increment = "\f011";
+$slider-icon-decrement = "\f012";
+
+/* Number Spinner */
+
+$numberspinner-button-border = 1px solid $border-color;
+$numberspinner-button-inner-padding = $padding;
+$numberspinner-button-width = ($line-height + $numberspinner-button-inner-padding * 2) + 2px; // 30px
+$numberspinner-button-padding = 0;
+$numberspinner-arrow-padding = $padding;
+$numberspinner-button-border-radius = $border-radius * (2/3);
+
+// icons
+$numberspinner-icon-up = $icon-drop-up;
+$numberspinner-icon-down = $icon-drop-down;
+
+// number spinner button's normal, active and disabled status styles are the same as "form/Button"
+// and the styles of the text input field are the same as "form/TextBox", which is defined in "form/Common.styl"

lib/flat/dijit/layout/AccordionContainer.css

@@ -0,0 +1,169 @@
+/* Accordion
+ * 
+ * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer)
+ * and the title inside of it (dijitAccordionTitle).   There are 4 basic states to style:
+ * 
+ * 1. closed pane (and default styling): 
+ * 		.dijitAccordionInnerContainer - container for each accordion child
+ * 		.dijitAccordionTitle - title for each accordion child
+ *
+ * 2. active closed pane (ie, mouse down on a title bar)
+ * 		.dijitAccordionInnerContainerActive - for background-color, border
+ * 		.dijitAccordionInnerContainerActive dijitAccordionTitle - for text color
+ * 
+ * 3. open pane (expanded child)
+ *		.dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane)
+ *			setting a margin so that there's blue trim all the way around the child
+ *
+ * 		These rules need to override the closed pane active:
+ *
+ * 		.dijitAccordionInnerContainerSelected - for background-color, border
+ * 		.dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color
+ * 
+ * 4. hovered pane, open or closed
+ * 		The selectors below affect hovering over both a closed pane (ie, hovering a title bar),
+ * 		and hovering over an open pane.   Also, treat mouse down on an open pane as a hover:
+ *
+ * 		.dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border
+ * 		.dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color
+ */
+.flat .dijitAccordionContainer {
+  border: 0 none;
+  border-radius: 3px;
+}
+.flat .dijitAccordionInnerContainer {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  border-radius: 3px;
+  -webkit-transition-property: background-color, border;
+  -moz-transition-property: background-color, border;
+  -o-transition-property: background-color, border;
+  -ms-transition-property: background-color, border;
+  transition-property: background-color, border;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  -o-transition-duration: 0.3s;
+  -ms-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+  -webkit-transition-timing-function: linear;
+  -moz-transition-timing-function: linear;
+  -o-transition-timing-function: linear;
+  -ms-transition-timing-function: linear;
+  transition-timing-function: linear;
+}
+.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer {
+  margin-top: 0;
+  position: relative;
+}
+.flat .dijitAccordionTitle {
+  border-style: solid;
+  border-width: 1px;
+  border-color: #9e9e9e;
+  padding: 4px;
+  border-radius: 3px;
+  line-height: 20px;
+  cursor: pointer;
+  -webkit-transition: all 0.05s linear;
+  -moz-transition: all 0.05s linear;
+  -o-transition: all 0.05s linear;
+  -ms-transition: all 0.05s linear;
+  transition: all 0.05s linear;
+  background: #fff;
+  border: 0 none;
+  border-radius: 3px;
+}
+.flat .dijitAccordionTitle .arrowTextUp,
+.flat .dijitAccordionTitle .arrowTextDown {
+  display: none;
+  float: right;
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  text-align: center;
+  font-size: 0px;
+}
+.flat .dijitAccordionTitle .arrowTextUp:before,
+.flat .dijitAccordionTitle .arrowTextDown:before {
+  content: "\f007";
+  font-size: 18px;
+}
+.flat .dijitAccordionTitle .arrowTextUp {
+  display: block;
+}
+.flat .dijitAccordionTitle .arrowTextUp:before {
+  content: "\f006";
+}
+.flat .dijitAccordionInnerContainerHover .dijitAccordionTitle {
+  -webkit-transition: all 0.1s;
+  -moz-transition: all 0.1s;
+  -o-transition: all 0.1s;
+  -ms-transition: all 0.1s;
+  transition: all 0.1s;
+  background: #f2f2f2;
+  border-color: #d9d9d9;
+}
+.flat .dijitAccordionInnerContainerActive .dijitAccordionTitle {
+  -webkit-transition: none;
+  -moz-transition: none;
+  -o-transition: none;
+  -ms-transition: none;
+  transition: none;
+  outline: none;
+  -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  box-shadow: inset 0 3px 5px rgba(0,0,0,0.05);
+  background: #e0e0e0;
+  border-color: #b3b3b3;
+}
+.flat .dijitAccordionInnerContainerSelected {
+  border: 0 none;
+}
+.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle {
+  color: #fff;
+  background-color: #2196f3;
+  border-radius: 3px 3px 0 0;
+}
+.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextUp {
+  display: none;
+}
+.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextDown {
+  display: block;
+}
+.flat .dijitAccordionContainer .dijitAccordionChildWrapper {
+  background-color: #fff;
+  border: 1px solid #9e9e9e;
+  border-top: 0 none;
+  position: relative;
+  z-index: 1;
+  clear: both;
+  border-radius: 0 0 3px 3px;
+}
+.flat .dijitAccordionInnerContainer {
+  border-radius: 0;
+}
+.flat .dijitAccordionInnerContainer .dijitAccordionTitle {
+  border-radius: 0;
+}
+.flat .dijitAccordionInnerContainer:not(:last-child) .dijitAccordionChildWrapper {
+  border-radius: 0;
+}
+.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer {
+  border-top: 0 none;
+}
+.flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainerSelected:last-child .dijitAccordionTitle {
+  border-radius: 0;
+}
+.flat .dijitAccordionInnerContainer:first-child,
+.flat .dijitAccordionInnerContainer:first-child .dijitAccordionTitle {
+  border-radius: 3px 3px 0 0;
+}
+.flat .dijitAccordionInnerContainer:last-child,
+.flat .dijitAccordionInnerContainer:last-child .dijitAccordionTitle {
+  border-radius: 0 0 3px 3px;
+}

lib/flat/dijit/layout/AccordionContainer.styl

@@ -0,0 +1,160 @@
+/* Accordion
+ * 
+ * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer)
+ * and the title inside of it (dijitAccordionTitle).   There are 4 basic states to style:
+ * 
+ * 1. closed pane (and default styling): 
+ * 		.dijitAccordionInnerContainer - container for each accordion child
+ * 		.dijitAccordionTitle - title for each accordion child
+ *
+ * 2. active closed pane (ie, mouse down on a title bar)
+ * 		.dijitAccordionInnerContainerActive - for background-color, border
+ * 		.dijitAccordionInnerContainerActive dijitAccordionTitle - for text color
+ * 
+ * 3. open pane (expanded child)
+ *		.dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane)
+ *			setting a margin so that there's blue trim all the way around the child
+ *
+ * 		These rules need to override the closed pane active:
+ *
+ * 		.dijitAccordionInnerContainerSelected - for background-color, border
+ * 		.dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color
+ * 
+ * 4. hovered pane, open or closed
+ * 		The selectors below affect hovering over both a closed pane (ie, hovering a title bar),
+ * 		and hovering over an open pane.   Also, treat mouse down on an open pane as a hover:
+ *
+ * 		.dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border
+ * 		.dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color
+ */
+
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	.dijitAccordionContainer {
+		border: 0 none;
+		border-radius: $accordion-border-radius;
+	}
+
+	.dijitAccordionInnerContainer {
+		background-color: $accordion-background-color;
+		border: 1px solid $accordion-border-color;
+		border-radius: $accordion-border-radius;
+		transition-property: background-color, border;
+		transition-duration: .3s;
+		transition-timing-function: linear;
+
+		+.dijitAccordionInnerContainer {
+			margin-top: $accordion-spacing;
+			position: relative;
+		}
+	}
+
+	/* title bar */
+
+	.dijitAccordionTitle {
+		button-style();
+		border: 0 none;
+		border-radius: $accordion-border-radius;
+
+		.arrowTextUp,
+		.arrowTextDown {
+			display: none;
+			float: right;
+			_icon-core-style();
+			text-align: center;
+			font-size: 0px;
+			&:before {
+				content: $icon-collapse;
+				font-size: $icon-expand-collapse-size;
+			}
+		}
+		.arrowTextUp {
+			display: block;
+			&:before {
+				content: $icon-expand;
+			}
+		}
+	}
+
+	/* Hover */
+
+	.dijitAccordionInnerContainerHover .dijitAccordionTitle {
+		button-hover-style();
+	}
+
+	/* Active */
+
+	.dijitAccordionInnerContainerActive .dijitAccordionTitle {
+		button-active-style();
+	}
+
+	/* Selected */
+
+	.dijitAccordionInnerContainerSelected {
+		border: 0 none;
+		.dijitAccordionTitle {
+			color: $accordion-title-bar-checked-text-color;
+			background-color: $accordion-title-bar-checked-background-color;
+			border-radius: $accordion-border-radius $accordion-border-radius 0 0;
+
+			.arrowTextUp {
+				display: none;
+			}
+			.arrowTextDown {
+				display: block;
+			}
+		}
+	}
+
+	/* content wrapper */
+
+	.dijitAccordionContainer .dijitAccordionChildWrapper {
+		background-color: $accordion-content-background-color;
+		border: 1px solid $accordion-content-border-color;
+		border-top: 0 none;
+		position: relative;
+		z-index: 1;
+		clear: both;
+		border-radius: 0 0 $accordion-border-radius $accordion-border-radius;
+	}
+
+
+	/* if the spacing between panes is 0 */
+
+	if($accordion-spacing[0] <= "0") {
+		.dijitAccordionInnerContainer {
+			border-radius: 0;
+			
+			.dijitAccordionTitle {
+				border-radius: 0;
+			}
+
+			&:not(:last-child) {
+				.dijitAccordionChildWrapper {
+					border-radius: 0;
+				}
+			}
+
+			+.dijitAccordionInnerContainer {
+				border-top: 0 none;
+			}
+			+.dijitAccordionInnerContainerSelected:last-child {
+				.dijitAccordionTitle {
+					border-radius: 0;
+				}
+			}
+
+			&:first-child,
+			&:first-child .dijitAccordionTitle {
+				border-radius: $accordion-border-radius $accordion-border-radius 0 0;
+			}
+			&:last-child,
+			&:last-child .dijitAccordionTitle {
+				border-radius: 0 0 $accordion-border-radius $accordion-border-radius;
+			}
+		}	
+	}
+	
+}

lib/flat/dijit/layout/AccordionContainer_rtl.css

@@ -0,0 +1,4 @@
+.flat .dijitAccordionTitle .arrowTextUp,
+.flat .dijitAccordionTitle .arrowTextDown {
+  float: left;
+}

lib/flat/dijit/layout/AccordionContainer_rtl.styl

@@ -0,0 +1,12 @@
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	.dijitAccordionTitle  {
+		.arrowTextUp, 
+		.arrowTextDown {
+			float: left;
+		}
+	}
+
+}

lib/flat/dijit/layout/BorderContainer.css

@@ -0,0 +1,97 @@
+/* BorderContainer 
+
+Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. 
+
+Styling the BorderContainer widget consists of the following: 
+
+.dijitBorderContainer - for border and padding of the entire border container
+
+.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer.  
+
+.dijitBorderContainer-dijitTabContainerTop,
+.dijitBorderContainer-dijitTabContainerBottom,
+.dijitBorderContainer-dijitTabContainerLeft,
+.dijitBorderContainer-dijitTabContainerRight,
+.dijitBorderContainer-dijitAccordionContainer   -for border of the border containers within TabContainer or AccordionContainer widget
+
+.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers
+
+Splitters and gutters:  
+
+.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter 
+.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter
+.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter 
+.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter
+.dijitSplitterHHover - for background-color of a hovered horizontal splitter
+.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter
+.dijitSplitterVHover  - for background-color of a hovered vertical splitter
+.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter
+.dijitSplitterHActive - for background-color of an active horizontal splitter
+.dijitSplitterVActive - for background-color of an active horizontal splitter
+*/
+.flat .dijitBorderContainer {
+/* matches the width of the splitters between panes */
+  padding: 5px;
+}
+.flat .dijitSplitContainer-child,
+.flat .dijitBorderContainer-child {
+  border: 1px solid #9e9e9e;
+}
+.flat .dijitBorderContainer-dijitTabContainerTop,
+.flat .dijitBorderContainer-dijitTabContainerBottom,
+.flat .dijitBorderContainer-dijitTabContainerLeft,
+.flat .dijitBorderContainer-dijitTabContainerRight,
+.flat .dijitBorderContainer-dijitAccordionContainer {
+/* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
+		 * so override rule setting border on domNode
+		 */
+  border: none;
+}
+.flat .dijitBorderContainer-dijitBorderContainer {
+  border: 0;
+  padding: 0;
+}
+.flat .dijitSplitterH,
+.flat .dijitGutterH {
+  background: none;
+  border: 0;
+  height: 5px;
+}
+.flat .dijitSplitterH .dijitSplitterThumb {
+  background: #9e9e9e;
+  height: 1px;
+  top: 2px;
+  width: 19px;
+}
+.flat .dijitSplitterV,
+.flat .dijitGutterV {
+  background: none;
+  border: 0;
+  width: 5px;
+  margin: 0;
+}
+.flat .dijitSplitterV .dijitSplitterThumb {
+  background: #9e9e9e;
+  height: 19px;
+  left: 2px;
+  width: 1px;
+  margin: 0;
+}
+.flat .dijitSplitterHHover,
+.flat .dijitSplitterVHover {
+  font-size: 1px;
+  background: #f2f2f2;
+}
+.flat .dijitSplitterHHover .dijitSplitterThumb,
+.flat .dijitSplitterVHover .dijitSplitterThumb {
+  background: #767676;
+}
+.flat .dijitSplitterHActive,
+.flat .dijitSplitterVActive {
+  font-size: 1px;
+  background: #f2f2f2;
+}
+.flat .dijitSplitterHActive .dijitSplitterThumb,
+.flat .dijitSplitterVActive .dijitSplitterThumb {
+  background: #767676;
+}

lib/flat/dijit/layout/BorderContainer.styl

@@ -0,0 +1,117 @@
+/* BorderContainer 
+
+Splitters and gutters separate panes within a BorderContainer. Splitters can be moved up and down (horizonal splitters) or left and right (vertical splitters), while Gutters are static. A "thumb" is the slit on a Splitter that indicates it is movable. 
+
+Styling the BorderContainer widget consists of the following: 
+
+.dijitBorderContainer - for border and padding of the entire border container
+
+.dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer.  
+
+.dijitBorderContainer-dijitTabContainerTop,
+.dijitBorderContainer-dijitTabContainerBottom,
+.dijitBorderContainer-dijitTabContainerLeft,
+.dijitBorderContainer-dijitTabContainerRight,
+.dijitBorderContainer-dijitAccordionContainer   -for border of the border containers within TabContainer or AccordionContainer widget
+
+.dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers
+
+Splitters and gutters:  
+
+.dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter 
+.dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter
+.dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter 
+.dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter
+.dijitSplitterHHover - for background-color of a hovered horizontal splitter
+.dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter
+.dijitSplitterVHover  - for background-color of a hovered vertical splitter
+.dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter
+.dijitSplitterHActive - for background-color of an active horizontal splitter
+.dijitSplitterVActive - for background-color of an active horizontal splitter
+*/
+
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	.dijitBorderContainer {
+		/* matches the width of the splitters between panes */
+		padding: $splitter-size;
+	}
+
+	.dijitSplitContainer-child,
+	.dijitBorderContainer-child {
+		border: 1px solid $bordercontainer-border-color;
+	}
+
+	.dijitBorderContainer-dijitTabContainerTop,
+	.dijitBorderContainer-dijitTabContainerBottom,
+	.dijitBorderContainer-dijitTabContainerLeft,
+	.dijitBorderContainer-dijitTabContainerRight,
+	.dijitBorderContainer-dijitAccordionContainer {
+		/* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper),
+		 * so override rule setting border on domNode
+		 */
+		 border: none;
+	}
+
+	.dijitBorderContainer-dijitBorderContainer {
+		border: 0;
+		padding: 0;
+	}
+
+	/* Splitters and gutters */
+
+	.dijitSplitterH,
+	.dijitGutterH {
+		background:none;
+		border:0;
+		height: $splitter-size;
+	}
+
+	.dijitSplitterH .dijitSplitterThumb {
+		background: $splitter-color;
+		height: 1px;
+		top: isEven($splitter-size) ? half($splitter-size) : half($splitter-size - 1);
+		width: 19px;
+	}
+
+	.dijitSplitterV,
+	.dijitGutterV {
+		background:	$splitter-background-color;
+		border: 0;
+		width:	$splitter-size;
+		margin: 0;
+	}
+
+	.dijitSplitterV .dijitSplitterThumb {
+		background: $splitter-color;
+		height: 19px;
+		left: isEven($splitter-size) ? half($splitter-size) : half($splitter-size - 1);
+		width: 1px;
+		margin: 0;
+	}
+
+	/* hovered */
+	.dijitSplitterHHover,
+	.dijitSplitterVHover {
+		font-size: 1px;
+		background: $splitter-hovered-background-color;
+
+		.dijitSplitterThumb {
+			background: $splitter-hovered-color;
+		}
+	}
+
+	/* active (dragged) */
+
+	.dijitSplitterHActive,
+	.dijitSplitterVActive {
+		font-size: 1px;
+		background: $splitter-dragged-background-color;
+		.dijitSplitterThumb {
+			background: $splitter-dragged-color;
+		}
+	}
+	
+}

lib/flat/dijit/layout/ContentPane.css

@@ -0,0 +1,36 @@
+/* ContentPane 
+ *	
+ * .dijitContentPane
+ * 	set padding for basic content pane
+ * 	
+ * Nested layouts:
+ * 
+ * .dijitTabContainerTop-dijitContentPane,
+ * .dijitTabContainerLeft-dijitContentPane,
+ * .dijitTabContainerBottom-dijitContentPane,
+ * .dijitTabContainerRight-dijitContentPane
+ * 	set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container
+ *
+ * .dijitAccordionContainer-dijitContentPane
+ * 	set background-color and padding of ContentPane nested within Accordion
+ *
+ * .dijitSplitContainer-dijitContentPane, 
+ *	set background-color and padding of ContentPane nested within a SplitContainer 
+ *
+ * .dijitBorderContainer-dijitContentPane
+ *	set background-color and padding of ContentPane nested within a BorderContainer 
+ */
+.flat .dijitContentPane {
+  background-color: #fff;
+  padding: 8px;
+}
+.flat .dijitTabContainerTop-dijitContentPane,
+.flat .dijitTabContainerLeft-dijitContentPane,
+.flat .dijitTabContainerBottom-dijitContentPane,
+.flat .dijitTabContainerRight-dijitContentPane,
+.flat .dijitAccordionContainer-dijitContentPane {
+  background-color: #fff;
+  padding: 8px;
+  left: 0 !important;
+  top: 0 !important;
+}

lib/flat/dijit/layout/ContentPane.styl

@@ -0,0 +1,45 @@
+/* ContentPane 
+ *	
+ * .dijitContentPane
+ * 	set padding for basic content pane
+ * 	
+ * Nested layouts:
+ * 
+ * .dijitTabContainerTop-dijitContentPane,
+ * .dijitTabContainerLeft-dijitContentPane,
+ * .dijitTabContainerBottom-dijitContentPane,
+ * .dijitTabContainerRight-dijitContentPane
+ * 	set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container
+ *
+ * .dijitAccordionContainer-dijitContentPane
+ * 	set background-color and padding of ContentPane nested within Accordion
+ *
+ * .dijitSplitContainer-dijitContentPane, 
+ *	set background-color and padding of ContentPane nested within a SplitContainer 
+ *
+ * .dijitBorderContainer-dijitContentPane
+ *	set background-color and padding of ContentPane nested within a BorderContainer 
+ */
+
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	.dijitContentPane {
+		background-color: $contentpane-background-color;
+		padding: $contentpane-padding;
+	}		
+
+	/* contentpane in other layouts */
+	.dijitTabContainerTop-dijitContentPane,
+	.dijitTabContainerLeft-dijitContentPane,
+	.dijitTabContainerBottom-dijitContentPane,
+	.dijitTabContainerRight-dijitContentPane,
+	.dijitAccordionContainer-dijitContentPane {
+		background-color: $contentpane-nested-background-color;
+		padding: $contentpane-nested-padding;
+	    left: 0 !important;
+	    top: 0 !important;
+	}
+	
+}

lib/flat/dijit/layout/TabContainer.css

@@ -0,0 +1,359 @@
+/* TabContainer 
+ * 
+ * Styling TabContainer means styling the TabList and Its content container  (dijitTitlePane)
+ * 
+ * Tab List: (including 4 kinds of tab location)
+ * 		.dijitTabContainerTop-tabs     - tablist container at top
+ * 		.dijitTabContainerBottom-tabs  - tablist container at bottom
+ * 		.dijitTabContainerLeft-tabs    - tablist container at left
+ * 		.dijitTabContainerRight-tabs   - tablist container at right
+ * 
+ * Tab Strip Button:
+ * 		.dijitTabStripIcon - tab strip button icon
+ * 		.dijitTabStripMenuIcon - down arrow icon position
+ * 		.dijitTabStripSlideLeftIcon - left arrow icon position
+ * 		.dijitTabStripSlideRightIcon - right arrow icon position
+ * 
+ * 		.tabStripButtonDisabled - styles for disabled tab strip buttons
+ * 
+ * Tab Button:
+ * 		.dijitTabContainerTop-tabs .dijitTab     - styles for top tab button container
+ * 		.dijitTabContainerBottom-tabs .dijitTab  - styles for bottom tab button container
+ * 		.dijitTabContainerLeft-tabs .dijitTab    - styles for left tab button container
+ * 		.dijitTabContainerRight-tabs .dijitTab   - styles for right tab button container
+ * 
+ * 		.dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
+ * 				- styles for selected status of top tab button
+ * 		same to Bottom, Left, Right Tabs
+ * 
+ * 		.dijitTabHover .dijitTab   - styles when mouse hover on tab buttons
+ * 		.dijitTabActive .dijitTab  - styles when mouse down on tab buttons
+ * 		.dijitTabChecked .dijitTab  - styles when on buttons of selected tab
+ * 
+ * 		.dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
+ * 		.dijitTabCloseButtonHover - styles when mouse hover on close action button
+ * 		.dijitTabCloseButtonActive - styles when mouse down on close action button
+ * 
+ * Tab Button: (checked status)
+ * 
+ * Tab Content Container:
+ * 		.dijitTabContainerTop-dijitContentPane
+ * 		.dijitTabContainerBottom-dijitContentPane
+ * 		.dijitTabContainerLeft-dijitContentPane
+ * 		.dijitTabContainerRight-dijitContentPane - for background and padding
+ * 
+ * Nested Tabs:
+ * 		.dijitTabContainerNested - Container for nested tabs
+ * 		.dijitTabContainerTabListNested - tab list container for nested tabs
+ */
+.flat .dijitTabContainer {
+  border-radius: 3px;
+}
+.flat .dijitTabPaneWrapper {
+  background: #fff;
+  border: 1px solid #9e9e9e;
+  margin: 0;
+  padding: 0;
+  border-radius: 0 0 3px 3px;
+}
+.flat .dijitTabContainerTop-tabs,
+.flat .dijitTabContainerBottom-tabs,
+.flat .dijitTabContainerLeft-tabs,
+.flat .dijitTabContainerRight-tabs {
+  border: none;
+}
+.flat .dijitTabSpacer {
+  display: none;
+}
+.flat .dijitTab {
+  border: 1px solid transparent;
+  background-color: #fff;
+  text-align: center;
+  -webkit-transition-property: background, padding, margin;
+  -moz-transition-property: background, padding, margin;
+  -o-transition-property: background, padding, margin;
+  -ms-transition-property: background, padding, margin;
+  transition-property: background, padding, margin;
+  -webkit-transition-duration: 0.2s;
+  -moz-transition-duration: 0.2s;
+  -o-transition-duration: 0.2s;
+  -ms-transition-duration: 0.2s;
+  transition-duration: 0.2s;
+  -webkit-transition-timing-function: ease;
+  -moz-transition-timing-function: ease;
+  -o-transition-timing-function: ease;
+  -ms-transition-timing-function: ease;
+  transition-timing-function: ease;
+  position: relative;
+  z-index: 0;
+}
+.flat .dijitTab:before {
+  content: "";
+  display: block;
+  position: absolute;
+}
+.flat .dijitTabHover {
+  background-color: #f2f2f2;
+}
+.flat .dijitTabActive {
+  background-color: #e6e6e6;
+}
+.flat .dijitTabChecked {
+  border: 1px solid #9e9e9e;
+  z-index: 1;
+}
+.flat .dijitTabChecked.dijitTabHover,
+.flat .dijitTabChecked.dijitTabActive {
+  border: 1px solid #9e9e9e;
+  background-color: #fff;
+  color: #424242;
+}
+.flat .dijitTabDisabled {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .tabStripButton {
+  background-color: transparent;
+  border: none;
+}
+.flat .dijitTabCloseButton {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  line-height: 1;
+  font-size: 1em;
+  vertical-align: middle;
+  margin-left: 4px;
+  opacity: 0.35;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=35)";
+  filter: alpha(opacity=35);
+}
+.flat .dijitTabCloseButton:before {
+  content: "\f00e";
+}
+.flat .dijitTabCloseButtonHover {
+  opacity: 0.75;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=75)";
+  filter: alpha(opacity=75);
+}
+.flat .dijitTabCloseButtonActive {
+  opacity: 1;
+  -ms-filter: none;
+  filter: none;
+}
+.flat .dijitTabContainerTop-tabs .dijitTab {
+  margin-right: 0;
+  padding: 6px 16px;
+  border-bottom-color: #9e9e9e;
+  border-left: none;
+  border-right: none;
+}
+.flat .dijitTabContainerTop-tabs .dijitTabChecked {
+  border-bottom: 1px solid #fff;
+  border-left: 1px solid #9e9e9e;
+  border-right: 1px solid #9e9e9e;
+}
+.flat .dijitTabContainerTop-tabs .dijitTabChecked:before {
+  height: 3px;
+  background: #2196f3;
+  top: -1px;
+  left: -1px;
+  right: -1px;
+}
+.flat .dijitTabListContainer-top {
+  margin-top: 1px;
+}
+.flat .dijitTabListContainer-top .dijitTab {
+  top: 0;
+}
+.flat .dijitTabPaneWrapper.dijitTabContainerBottom-container {
+  border-radius: 3px 3px 0 0;
+}
+.flat .dijitTabContainerBottom-tabs .dijitTab {
+  margin-right: 0;
+  padding: 6px 16px;
+  border-top-color: #9e9e9e;
+  border-left: none;
+  border-right: none;
+}
+.flat .dijitTabContainerBottom-tabs .dijitTabChecked {
+  border-top: 1px solid #fff;
+  border-left: 1px solid #9e9e9e;
+  border-right: 1px solid #9e9e9e;
+}
+.flat .dijitTabContainerBottom-tabs .dijitTabChecked:before {
+  height: 3px;
+  background: #2196f3;
+  bottom: -1px;
+  left: -1px;
+  right: -1px;
+}
+.flat .dijitTabListContainer-bottom {
+  margin-top: -1px;
+}
+.flat .dijitTabListContainer-bottom .dijitTab {
+  top: 0;
+}
+.flat .dijitTabPaneWrapper.dijitTabContainerLeft-container {
+  border-radius: 0 3px 3px 0;
+}
+.flat .dijitTabContainerLeft-tabs .dijitTab {
+  margin-bottom: 0;
+  padding: 8px 12px;
+  border-right-color: #9e9e9e;
+  border-top: none;
+  border-bottom: none;
+}
+.flat .dijitTabContainerLeft-tabs .dijitTabChecked {
+  border-right: 1px solid #fff;
+  border-top: 1px solid #9e9e9e;
+  border-bottom: 1px solid #9e9e9e;
+}
+.flat .dijitTabContainerLeft-tabs .dijitTabChecked:before {
+  width: 3px;
+  background: #2196f3;
+  bottom: -1px;
+  left: -1px;
+  top: -1px;
+}
+.flat .dijitTabPaneWrapper.dijitTabContainerRight-container {
+  border-radius: 3px 0 0 3px;
+}
+.flat .dijitTabContainerRight-tabs .dijitTab {
+  margin-bottom: 0;
+  padding: 8px 12px;
+  border-left-color: #9e9e9e;
+  border-top: none;
+  border-bottom: none;
+}
+.flat .dijitTabContainerRight-tabs .dijitTabChecked {
+  border-left: 1px solid #fff;
+  border-top: 1px solid #9e9e9e;
+  border-bottom: 1px solid #9e9e9e;
+}
+.flat .dijitTabContainerRight-tabs .dijitTabChecked:before {
+  width: 3px;
+  background: #2196f3;
+  bottom: -1px;
+  right: -1px;
+  top: -1px;
+}
+.flat .tabStripButton {
+  background-color: #fff;
+  border: 1px solid transparent;
+  -webkit-transition-property: background-color;
+  -moz-transition-property: background-color;
+  -o-transition-property: background-color;
+  -ms-transition-property: background-color;
+  transition-property: background-color;
+}
+.flat .dijitTabListContainer-top .tabStripButton,
+.flat .dijitTabListContainer-bottom .tabStripButton {
+  padding: 4px 8px;
+  margin-left: 0;
+  margin-right: 0;
+}
+.flat .dijitTabListContainer-top .tabStripButton {
+  margin-bottom: 1px;
+}
+.flat .dijitTabListContainer-bottom .tabStripButton {
+  margin-top: 1px;
+}
+.flat .tabStripButtonHover {
+  background-color: #f2f2f2;
+}
+.flat .tabStripButtonActive {
+  background-color: #e6e6e6;
+}
+.flat .dijitTabStripIcon {
+  font-family: "flat-icon";
+  speak: none;
+  font-style: normal;
+  font-weight: normal;
+  font-variant: normal;
+  text-transform: none;
+  line-height: 1;
+  font-size: 16px;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  color: #2196f3;
+  vertical-align: middle;
+}
+.flat .dijitTabStripIcon:before {
+  content: "\f004";
+}
+.flat .dijitTabStripSlideRightIcon:before {
+  content: "\f005";
+}
+.flat .dijitTabStripMenuIcon:before {
+  content: "\f006";
+}
+.flat .dijitTabListContainer-top .tabStripButtonDisabled,
+.flat .dijitTabListContainer-bottom .tabStripButtonDisabled {
+  opacity: 0.65;
+  -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
+  filter: alpha(opacity=65);
+}
+.flat .dijitTabContainerNested .dijitTabListWrapper {
+  height: auto;
+}
+.flat .dijitTabContainerTabListNested .dijitTab {
+  color: #2196f3;
+  margin: 4px;
+  padding: 4px 8px;
+  border: 1px solid transparent;
+  border-radius: 3px;
+  -webkit-transition-property: background-color, border-color;
+  -moz-transition-property: background-color, border-color;
+  -o-transition-property: background-color, border-color;
+  -ms-transition-property: background-color, border-color;
+  transition-property: background-color, border-color;
+  -webkit-transition-duration: 0.3s;
+  -moz-transition-duration: 0.3s;
+  -o-transition-duration: 0.3s;
+  -ms-transition-duration: 0.3s;
+  transition-duration: 0.3s;
+}
+.flat .dijitTabContainerTabListNested .dijitTabHover {
+  background-color: #f2f2f2;
+}
+.flat .dijitTabContainerTabListNested .dijitTabActive {
+  color: #2196f3;
+  background-color: #e6e6e6;
+}
+.flat .dijitTabContainerTabListNested .dijitTabChecked,
+.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabHover,
+.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabActive {
+  color: #fff;
+  background-color: #2196f3;
+}
+.flat .dijitTabContainerTabListNested .dijitTabChecked:before,
+.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabHover:before,
+.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabActive:before {
+  display: none;
+}
+.flat .dijitTabContainerTabListNested.dijitTabContainerTop-tabs .dijitTab {
+  margin-right: 4px;
+}
+.flat .dijitTabContainerTabListNested.dijitTabContainerBottom-tabs .dijitTab {
+  margin-right: 4px;
+}
+.flat .dijitTabContainerTabListNested.dijitTabContainerLeft-tabs .dijitTab {
+  margin-bottom: 4px;
+}
+.flat .dijitTabContainerTabListNested.dijitTabContainerRight-tabs .dijitTab {
+  margin-bottom: 4px;
+}
+.flat .dijitTabPaneWrapperNested {
+  border: none; /* prevent double border */
+  -webkit-box-shadow: none;
+  box-shadow: none;
+}

lib/flat/dijit/layout/TabContainer.styl

@@ -0,0 +1,446 @@
+/* TabContainer 
+ * 
+ * Styling TabContainer means styling the TabList and Its content container  (dijitTitlePane)
+ * 
+ * Tab List: (including 4 kinds of tab location)
+ * 		.dijitTabContainerTop-tabs     - tablist container at top
+ * 		.dijitTabContainerBottom-tabs  - tablist container at bottom
+ * 		.dijitTabContainerLeft-tabs    - tablist container at left
+ * 		.dijitTabContainerRight-tabs   - tablist container at right
+ * 
+ * Tab Strip Button:
+ * 		.dijitTabStripIcon - tab strip button icon
+ * 		.dijitTabStripMenuIcon - down arrow icon position
+ * 		.dijitTabStripSlideLeftIcon - left arrow icon position
+ * 		.dijitTabStripSlideRightIcon - right arrow icon position
+ * 
+ * 		.tabStripButtonDisabled - styles for disabled tab strip buttons
+ * 
+ * Tab Button:
+ * 		.dijitTabContainerTop-tabs .dijitTab     - styles for top tab button container
+ * 		.dijitTabContainerBottom-tabs .dijitTab  - styles for bottom tab button container
+ * 		.dijitTabContainerLeft-tabs .dijitTab    - styles for left tab button container
+ * 		.dijitTabContainerRight-tabs .dijitTab   - styles for right tab button container
+ * 
+ * 		.dijitTabContainerTop-tabs .dijitTabChecked .dijitTab
+ * 				- styles for selected status of top tab button
+ * 		same to Bottom, Left, Right Tabs
+ * 
+ * 		.dijitTabHover .dijitTab   - styles when mouse hover on tab buttons
+ * 		.dijitTabActive .dijitTab  - styles when mouse down on tab buttons
+ * 		.dijitTabChecked .dijitTab  - styles when on buttons of selected tab
+ * 
+ * 		.dijitTabCloseButton - the close action buttons lie at the right top of each tab button on closable tabs
+ * 		.dijitTabCloseButtonHover - styles when mouse hover on close action button
+ * 		.dijitTabCloseButtonActive - styles when mouse down on close action button
+ * 
+ * Tab Button: (checked status)
+ * 
+ * Tab Content Container:
+ * 		.dijitTabContainerTop-dijitContentPane
+ * 		.dijitTabContainerBottom-dijitContentPane
+ * 		.dijitTabContainerLeft-dijitContentPane
+ * 		.dijitTabContainerRight-dijitContentPane - for background and padding
+ * 
+ * Nested Tabs:
+ * 		.dijitTabContainerNested - Container for nested tabs
+ * 		.dijitTabContainerTabListNested - tab list container for nested tabs
+ */
+
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	/************ common styles *************/
+
+	.dijitTabContainer {
+		border-radius: $tab-wrapper-border-radius;
+	}
+
+	.dijitTabPaneWrapper {
+		background: $tab-wrapper-background-color;
+		border: 1px solid $tab-wrapper-border-color;
+		margin: 0;
+		padding: 0;
+		border-radius: 0 0 $tab-wrapper-border-radius $tab-wrapper-border-radius;
+	}
+
+	.dijitTabContainerTop-tabs,
+	.dijitTabContainerBottom-tabs,
+	.dijitTabContainerLeft-tabs,
+	.dijitTabContainerRight-tabs {
+		border: none;
+	}
+
+	.dijitTabSpacer {
+		// display: none if !$tab-has-gutter;
+		display: none;
+	}
+
+	/* tabs */
+
+	.dijitTab {
+		border: 1px solid $tab-border-color;
+		background-color: $tab-background-color;
+		text-align: center;
+		transition-property: background, padding, margin;
+		transition-duration: .2s;
+		transition-timing-function: ease;
+		position: relative;
+		z-index: 0;
+		if ($tab-checked-has-highlight-border) {
+			&:before {
+				content: "";
+				display: block;
+				position: absolute;
+			}
+		}
+	}
+
+	/* tabs: hover */
+
+	.dijitTabHover {
+		background-color: $tab-hover-background-color;
+	}
+
+	/* tabs: active */
+
+	.dijitTabActive {
+		background-color: $tab-active-background-color;
+	}
+
+	/* tabs: checked */
+
+	.dijitTabChecked {
+		border: 1px solid $tab-checked-border-color;
+		z-index: 1;
+		&.dijitTabHover,
+		&.dijitTabActive {
+			border: 1px solid $tab-checked-border-color;
+			background-color: $tab-checked-background-color;
+			color: $tab-checked-text-color;
+		}
+	}
+
+	/* tabs: disabled */
+
+	.dijitTabDisabled {
+		opacity: $disabled-opacity;
+	}
+
+	/* tabs: strip button */
+
+	.tabStripButton {
+		background-color: transparent;
+		border: none;
+	}
+
+	/* tabs: close button */
+
+	.dijitTabCloseButton {
+		_icon-core-style();
+		line-height: 1;
+		font-size: 1em;
+		vertical-align: middle;
+		margin-left: $tab-padding;
+		opacity: $tab-close-button-opacity;
+		&:before {
+			content: $tab-close-button-icon;
+		}
+	}
+	.dijitTabCloseButtonHover {
+		opacity: $tab-close-button-hover-opacity;
+	}
+	.dijitTabCloseButtonActive {
+		opacity: $tab-close-button-active-opacity;
+	}
+
+	/************* end common **************/
+
+
+	/*************** top tabs ***************/
+
+	.dijitTabContainerTop-tabs {
+		.dijitTab {
+			margin-right: $tab-spacing;
+			padding: $tab-top-padding;
+			border-bottom-color: $tab-wrapper-border-color;
+			border-left: none;
+			border-right: none;
+		}
+		// .dijitTabHover,
+		// .dijitTabActive,
+		// .dijitTabChecked {
+		// }
+		.dijitTabChecked {
+			border-bottom: 1px solid $tab-wrapper-background-color;
+			border-left: 1px solid $tab-wrapper-border-color;
+			border-right: 1px solid $tab-wrapper-border-color;
+			if ($tab-checked-has-highlight-border) {
+				&:before {
+					height: 3px;
+					background: $tab-highlight-color;
+					top: -1px;
+					left: -1px;
+					right: -1px;
+				}
+			}
+		}
+	}
+
+	.dijitTabListContainer-top {
+		margin-top: 1px;
+		.dijitTab {
+			top:0;
+		}
+	}
+
+	/*************** end top tabs **************/
+
+	/*************** bottom tabs ***************/
+
+	.dijitTabPaneWrapper.dijitTabContainerBottom-container {
+		border-radius: $tab-wrapper-border-radius $tab-wrapper-border-radius 0 0;
+	}
+
+	.dijitTabContainerBottom-tabs {
+		.dijitTab {
+			margin-right: $tab-spacing;
+			padding: $tab-bottom-padding;
+			border-top-color: $tab-wrapper-border-color;
+			border-left: none;
+			border-right: none;
+		}
+		// .dijitTabHover,
+		// .dijitTabActive,
+		// .dijitTabChecked {
+		// }
+		.dijitTabChecked {
+			border-top: 1px solid $tab-wrapper-background-color;
+			border-left: 1px solid $tab-wrapper-border-color;
+			border-right: 1px solid $tab-wrapper-border-color;
+			if ($tab-checked-has-highlight-border) {
+				&:before {
+					height: 3px;
+					background: $tab-highlight-color;
+					bottom: -1px;
+					left: -1px;
+					right: -1px;
+				}
+			}
+		}
+	}
+
+	.dijitTabListContainer-bottom {
+		margin-top: -1px;
+		.dijitTab {
+			top: 0;
+		}
+	}
+
+	/************ end bottom tabs ************/
+
+	/*************** left tabs ***************/
+
+	.dijitTabPaneWrapper.dijitTabContainerLeft-container {
+		border-radius: 0 $tab-wrapper-border-radius $tab-wrapper-border-radius 0;
+	}
+
+	.dijitTabContainerLeft-tabs {
+		.dijitTab {
+			margin-bottom: $tab-spacing;
+			padding: $tab-left-padding;
+			border-right-color: $tab-wrapper-border-color;
+			border-top: none;
+			border-bottom: none;
+		}
+		// .dijitTabHover,
+		// .dijitTabActive,
+		// .dijitTabChecked {
+		// }
+		.dijitTabChecked {
+			border-right: 1px solid $tab-wrapper-background-color;
+			border-top: 1px solid $tab-wrapper-border-color;
+			border-bottom: 1px solid $tab-wrapper-border-color;
+			if ($tab-checked-has-highlight-border) {
+				&:before {
+					width: 3px;
+					background: $tab-highlight-color;
+					bottom: -1px;
+					left: -1px;
+					top: -1px;
+				}
+			}
+		}
+	}
+
+	/************** end left tabs *************/
+
+	/*************** right tabs ***************/
+
+	.dijitTabPaneWrapper.dijitTabContainerRight-container{
+		border-radius: $tab-wrapper-border-radius 0 0 $tab-wrapper-border-radius
+	 }
+
+	.dijitTabContainerRight-tabs {
+		 .dijitTab {
+			margin-bottom: $tab-spacing;
+			padding: $tab-right-padding;
+			border-left-color: $tab-wrapper-border-color;
+			border-top: none;
+			border-bottom: none;
+		}
+		// .dijitTabHover,
+		// .dijitTabActive,
+		// .dijitTabChecked {
+		// }
+		.dijitTabChecked {
+			border-left: 1px solid $tab-wrapper-background-color;
+			border-top: 1px solid $tab-wrapper-border-color;
+			border-bottom: 1px solid $tab-wrapper-border-color;
+			if ($tab-checked-has-highlight-border) {
+				&:before {
+					width: 3px;
+					background: $tab-highlight-color;
+					bottom: -1px;
+					right: -1px;
+					top: -1px;
+				}
+			}
+		}
+	}
+
+	/************* end right tabs *************/
+
+	/************ left/right scroll buttons + menu button ***********/
+	.tabStripButton {
+		background-color: $tab-strip-button-background-color;
+		border: 1px solid $tab-strip-button-border-color;
+		transition-property: background-color;
+	}
+
+	.dijitTabListContainer-top ,
+	.dijitTabListContainer-bottom {
+		.tabStripButton {
+			padding: $tab-padding $tab-padding*2;
+			margin-left: $tab-spacing;
+			margin-right $tab-spacing;
+		}
+	}
+
+	.dijitTabListContainer-top {
+		.tabStripButton {
+			margin-bottom: 1px;
+		}
+	}
+
+	.dijitTabListContainer-bottom {
+		.tabStripButton {
+			margin-top: 1px;
+		}
+	}
+
+	.tabStripButtonHover {
+		background-color: $tab-strip-button-hover-background-color;
+	}
+
+	.tabStripButtonActive {
+		background-color: $tab-strip-button-active-background-color;
+	}
+
+	.dijitTabStripIcon {
+		_icon-core-style();
+		color: $tab-strip-button-arrow-color;
+		vertical-align: middle;
+		&:before {
+			content: $tab-left-icon;
+		}
+	}
+
+	.dijitTabStripSlideRightIcon {
+		&:before {
+			content: $tab-right-icon;
+		}
+	}
+
+	.dijitTabStripMenuIcon {
+		&:before {
+			content: $tab-menu-icon;
+		}
+	}
+
+	/* disabled */
+
+	.dijitTabListContainer-top .tabStripButtonDisabled,
+	.dijitTabListContainer-bottom .tabStripButtonDisabled {
+		opacity: $disabled-opacity;
+	}
+
+	/*********** end left/right scroll buttons + menu button *********/
+
+	/*************** nested tabs ***************/
+
+	.dijitTabContainerNested .dijitTabListWrapper {
+		height: auto;
+	}
+
+	.dijitTabContainerTabListNested {
+		.dijitTab {
+			color: $nestedtab-text-color;
+			margin: $tab-padding;
+			padding: $nestedtab-padding;
+			border: 1px solid $nestedtab-border-color;
+			border-radius: $nestedtab-border-radius;
+			transition-property: background-color, border-color;
+	 		transition-duration: .3s;
+		}
+		.dijitTabHover {
+			background-color: $nestedtab-hover-background-color;
+		}
+		.dijitTabActive {
+			color: $nestedtab-active-text-color;
+			background-color:$nestedtab-active-background-color;
+		}
+		.dijitTabChecked,
+		.dijitTabChecked.dijitTabHover,
+		.dijitTabChecked.dijitTabActive {
+			color: $nestedtab-checked-text-color;
+			background-color: $nestedtab-checked-background-color;
+			&:before {
+				display: none;
+			}
+		}
+
+	}
+
+	/************* nested top tabs *************/
+
+	.dijitTabContainerTabListNested.dijitTabContainerTop-tabs .dijitTab {
+		margin-right: $nestedtab-spacing;
+	}
+
+	/************* nested bottom tabs *************/
+
+	.dijitTabContainerTabListNested.dijitTabContainerBottom-tabs .dijitTab {
+		margin-right: $nestedtab-spacing;
+	}
+
+	/************* nested left tabs *************/
+
+	.dijitTabContainerTabListNested.dijitTabContainerLeft-tabs .dijitTab {
+		margin-bottom: $nestedtab-spacing;
+	}
+
+	/************* nested right tabs *************/
+
+	.dijitTabContainerTabListNested.dijitTabContainerRight-tabs .dijitTab {
+		margin-bottom: $nestedtab-spacing;
+	}
+
+
+	.dijitTabPaneWrapperNested {
+		border: none; /* prevent double border */
+		box-shadow: none;
+	}
+
+}

lib/flat/dijit/layout/TabContainer_rtl.css

@@ -0,0 +1,13 @@
+.flat .dijitTabContainerTop-tabs .dijitTabRtl,
+.flat .dijitTabContainerBottom-tabs .dijitTabRtl {
+  margin-right: 0;
+  margin-left: -1px;
+}
+.flat .dijitTabControllerRtl,
+.flat .dijitTabControllerRtl .nowrapTabStrip {
+  text-align: right;
+}
+.flat .dijitTabRtl .dijitTabCloseButton {
+  margin-left: 0;
+  margin-right: 4px;
+}

lib/flat/dijit/layout/TabContainer_rtl.styl

@@ -0,0 +1,23 @@
+@import 'dijit_layout_variables';
+
+.{$theme-name} {
+
+	.dijitTabContainerTop-tabs,
+	.dijitTabContainerBottom-tabs {
+		.dijitTabRtl {
+			margin-right: 0;
+			margin-left: -1px;
+		}
+	}
+
+	.dijitTabControllerRtl,
+	.dijitTabControllerRtl .nowrapTabStrip {
+	    text-align: right;  
+	}
+
+	.dijitTabRtl .dijitTabCloseButton {
+		margin-left: 0;
+		margin-right: $tab-padding;
+	}
+	
+}

lib/flat/dijit/layout/dijit_layout_variables.styl

@@ -0,0 +1,135 @@
+/* dijit/layout/* variables */
+
+@import '../../variables';
+
+/* BorderContainer*/
+
+$bordercontainer-padding = $padding;
+$bordercontainer-border-color = $border-color;
+
+// splitter
+$splitter-size = isEven($bordercontainer-padding) ? $bordercontainer-padding + 1 : $bordercontainer-padding; // the width of the splitter, will always be an odd number since the splitter bar's width is always 1px 
+$splitter-color = $border-color; // color of the splitter thumb (the 1px wide bar)
+$splitter-hovered-color = darken($splitter-color, 25%);
+$splitter-dragged-color = $splitter-hovered-color;
+$splitter-background-color = none;
+$splitter-hovered-background-color = darken(#fff, 5%);
+$splitter-dragged-background-color = darken(#fff, 5%);
+ 
+/* ContentPane */
+
+$contentpane-padding = $padding * 2;
+$contentpane-background-color = $theme-base-color;
+
+// contentpane in other layout widgets (accordion and tab container)
+$contentpane-nested-padding = $padding * 2;
+$contentpane-nested-background-color = $theme-base-color;
+
+/* TabContainer */
+
+$tab-highlight-color = $theme-base;
+$tab-padding = $padding;
+$tab-checked-has-highlight-border = true; // whether to have a highlight bar on the edge of the tab
+
+// TabContainer: wrapper
+// (the outer container)
+$tab-wrapper-background-color = $theme-base-color;
+$tab-wrapper-border-color = $border-color;
+$tab-wrapper-border-radius = $border-radius;
+
+// tabs
+$tab-background-color = $tab-wrapper-background-color;
+$tab-border-color = transparent;
+$tab-spacing = 0; // space between tabs
+
+// hover
+$tab-hover-background-color = darken($theme-base-color, 5%);
+
+// active
+$tab-active-background-color = darken($theme-base-color, 10%);
+
+// checked
+$tab-checked-border-color = $tab-wrapper-border-color;
+$tab-checked-background-color = $tab-wrapper-background-color;
+$tab-checked-text-color = $grey-dark;
+
+// icons
+$tab-left-icon = "\f004";
+$tab-right-icon = "\f005";
+$tab-menu-icon = "\f006";
+
+// close button
+$tab-close-button-icon = "\f00e";
+$tab-close-button-opacity = .35;
+
+// hover
+$tab-close-button-hover-opacity = .75;
+
+// active
+$tab-close-button-active-opacity = 1;
+
+// tab dtrip button
+$tab-strip-button-background-color = $tab-background-color;
+$tab-strip-button-border-color = $tab-border-color;
+
+// hover
+$tab-strip-button-hover-background-color = $tab-hover-background-color;
+
+// active
+$tab-strip-button-active-background-color = $tab-active-background-color;
+
+// arrow
+$tab-strip-button-arrow-color = $theme-base;
+
+// tabs: top
+$tab-top-padding = $tab-padding * 1.5 $tab-padding * 4;
+
+// tabs: bottom
+$tab-bottom-padding = $tab-top-padding;
+
+// tabs: left
+$tab-left-padding = $tab-padding * 2 $tab-padding * 3;
+
+// tabs: right
+$tab-right-padding = $tab-left-padding;
+
+// nested tab container
+$nestedtab-spacing = $padding;
+$nestedtab-padding = $tab-padding $tab-padding * 2;
+$nestedtab-border-color = transparent;
+$nestedtab-border-radius = $border-radius;
+
+// normal
+$nestedtab-text-color = $theme-base;
+
+// hover
+$nestedtab-hover-background-color = $tab-hover-background-color;
+
+// active
+$nestedtab-active-text-color = $theme-base;
+$nestedtab-active-background-color = $tab-active-background-color;
+
+// checked
+$nestedtab-checked-background-color = $theme-base;
+$nestedtab-checked-text-color = $theme-base-color;
+
+/* AccordionContainer */
+
+$accordion-spacing = 0; // space between accordion panes; minimum value is 0
+$accordion-border-color = $border-color;
+$accordion-border-radius = $border-radius;
+$accordion-background-color = $theme-base-color;
+
+// accordion title bar 
+// normal, hover and active status styles are inherited from "form/Button"
+
+// checked
+$accordion-title-bar-checked-background-color = $theme-base;
+$accordion-title-bar-checked-text-color = $theme-base-color;
+
+// content pane
+$accordion-content-border-color = $accordion-border-color;
+$accordion-content-background-color = $theme-base-color;
+
+// icons
+// uses common vars directly