diff options
Diffstat (limited to 'lib/flat/dijit')
81 files changed, 8584 insertions, 0 deletions
diff --git a/lib/flat/dijit/Calendar.css b/lib/flat/dijit/Calendar.css new file mode 100755 index 000000000..1201591e0 --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/Calendar.styl b/lib/flat/dijit/Calendar.styl new file mode 100755 index 000000000..9c7032f25 --- /dev/null +++ b/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; + } + } + +} diff --git a/lib/flat/dijit/Calendar_rtl.css b/lib/flat/dijit/Calendar_rtl.css new file mode 100755 index 000000000..d0b88bf59 --- /dev/null +++ b/lib/flat/dijit/Calendar_rtl.css @@ -0,0 +1,6 @@ +.flat .dijitCalendarRtl .dijitCalendarDecrease:before { + content: "\f001"; +} +.flat .dijitCalendarRtl .dijitCalendarIncrease:before { + content: "\f000"; +} diff --git a/lib/flat/dijit/Calendar_rtl.styl b/lib/flat/dijit/Calendar_rtl.styl new file mode 100755 index 000000000..dc93e4bd5 --- /dev/null +++ b/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; + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/ColorPalette.css b/lib/flat/dijit/ColorPalette.css new file mode 100755 index 000000000..530df5a31 --- /dev/null +++ b/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); +} diff --git a/lib/flat/dijit/ColorPalette.styl b/lib/flat/dijit/ColorPalette.styl new file mode 100755 index 000000000..87f2806c5 --- /dev/null +++ b/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); + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/ColorPalette_rtl.css b/lib/flat/dijit/ColorPalette_rtl.css new file mode 100644 index 000000000..25953cc11 --- /dev/null +++ b/lib/flat/dijit/ColorPalette_rtl.css @@ -0,0 +1,4 @@ +.flat .dijitColorPaletteRtl .dijitColorPaletteUnder { + left: auto; + right: 0; +} diff --git a/lib/flat/dijit/ColorPalette_rtl.styl b/lib/flat/dijit/ColorPalette_rtl.styl new file mode 100644 index 000000000..62fe06ab6 --- /dev/null +++ b/lib/flat/dijit/ColorPalette_rtl.styl @@ -0,0 +1,10 @@ +@import 'dijit_variables'; + +.{$theme-name} { + + .dijitColorPaletteRtl .dijitColorPaletteUnder { + left: auto; + right: 0; + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/Common.css b/lib/flat/dijit/Common.css new file mode 100644 index 000000000..c6613d0ec --- /dev/null +++ b/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); +} diff --git a/lib/flat/dijit/Common.styl b/lib/flat/dijit/Common.styl new file mode 100755 index 000000000..8b2119a03 --- /dev/null +++ b/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; + } + } +}
\ No newline at end of file diff --git a/lib/flat/dijit/Dialog.css b/lib/flat/dijit/Dialog.css new file mode 100755 index 000000000..557a7cf21 --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/Dialog.styl b/lib/flat/dijit/Dialog.styl new file mode 100755 index 000000000..2c869bda4 --- /dev/null +++ b/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; + } + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/Dialog_rtl.css b/lib/flat/dijit/Dialog_rtl.css new file mode 100755 index 000000000..5f7d17d71 --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/Dialog_rtl.styl b/lib/flat/dijit/Dialog_rtl.styl new file mode 100755 index 000000000..7be49deaa --- /dev/null +++ b/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; + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/Editor.css b/lib/flat/dijit/Editor.css new file mode 100755 index 000000000..b6a6bb86f --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/Editor.styl b/lib/flat/dijit/Editor.styl new file mode 100755 index 000000000..1be19acb2 --- /dev/null +++ b/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; + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/Editor_rtl.css b/lib/flat/dijit/Editor_rtl.css new file mode 100755 index 000000000..e69de29bb --- /dev/null +++ b/lib/flat/dijit/Editor_rtl.css diff --git a/lib/flat/dijit/Editor_rtl.styl b/lib/flat/dijit/Editor_rtl.styl new file mode 100755 index 000000000..2567a43d1 --- /dev/null +++ b/lib/flat/dijit/Editor_rtl.styl @@ -0,0 +1,8 @@ +@import 'dijit_variables'; + +.{$theme-name} { + + .dijitEditorRtl { + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/InlineEditBox.css b/lib/flat/dijit/InlineEditBox.css new file mode 100755 index 000000000..eb9f5a75a --- /dev/null +++ b/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); +} diff --git a/lib/flat/dijit/InlineEditBox.styl b/lib/flat/dijit/InlineEditBox.styl new file mode 100755 index 000000000..b91f441fc --- /dev/null +++ b/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; + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/Menu.css b/lib/flat/dijit/Menu.css new file mode 100755 index 000000000..c7a354ce6 --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/Menu.styl b/lib/flat/dijit/Menu.styl new file mode 100755 index 000000000..f6caa412b --- /dev/null +++ b/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; + } + } +}
\ No newline at end of file diff --git a/lib/flat/dijit/Menu_rtl.css b/lib/flat/dijit/Menu_rtl.css new file mode 100755 index 000000000..c2ec906cc --- /dev/null +++ b/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"; +} diff --git a/lib/flat/dijit/Menu_rtl.styl b/lib/flat/dijit/Menu_rtl.styl new file mode 100755 index 000000000..d5d3d3d41 --- /dev/null +++ b/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; + } + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/ProgressBar.css b/lib/flat/dijit/ProgressBar.css new file mode 100755 index 000000000..0e96e7d41 --- /dev/null +++ b/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; + } +} diff --git a/lib/flat/dijit/ProgressBar.styl b/lib/flat/dijit/ProgressBar.styl new file mode 100755 index 000000000..c7af6b499 --- /dev/null +++ b/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; } +}
\ No newline at end of file diff --git a/lib/flat/dijit/TimePicker.css b/lib/flat/dijit/TimePicker.css new file mode 100755 index 000000000..2305e6f67 --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/TimePicker.styl b/lib/flat/dijit/TimePicker.styl new file mode 100755 index 000000000..6d16c0c30 --- /dev/null +++ b/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; + } +}
\ No newline at end of file diff --git a/lib/flat/dijit/TitlePane.css b/lib/flat/dijit/TitlePane.css new file mode 100755 index 000000000..f3950bce7 --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/TitlePane.styl b/lib/flat/dijit/TitlePane.styl new file mode 100755 index 000000000..78d9dab68 --- /dev/null +++ b/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; + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/TitlePane_rtl.css b/lib/flat/dijit/TitlePane_rtl.css new file mode 100755 index 000000000..96a035f12 --- /dev/null +++ b/lib/flat/dijit/TitlePane_rtl.css @@ -0,0 +1,7 @@ +/* TitlePane */ +.flat .dijitTitlePaneRtl .dijitTitlePaneTitle { + text-align: right; +} +.flat .dijitTitlePaneRtl .dijitClosed .dijitArrowNode:before { + content: "\f006"; +} diff --git a/lib/flat/dijit/TitlePane_rtl.styl b/lib/flat/dijit/TitlePane_rtl.styl new file mode 100755 index 000000000..370179d86 --- /dev/null +++ b/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; + } + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/Toolbar.css b/lib/flat/dijit/Toolbar.css new file mode 100755 index 000000000..4d8c73961 --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/Toolbar.styl b/lib/flat/dijit/Toolbar.styl new file mode 100755 index 000000000..80710d313 --- /dev/null +++ b/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; + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/Toolbar_rtl.css b/lib/flat/dijit/Toolbar_rtl.css new file mode 100755 index 000000000..c9e6eb20a --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/Toolbar_rtl.styl b/lib/flat/dijit/Toolbar_rtl.styl new file mode 100755 index 000000000..19e0ec8fe --- /dev/null +++ b/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; + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/Tree.css b/lib/flat/dijit/Tree.css new file mode 100755 index 000000000..7b3b16540 --- /dev/null +++ b/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); + } +} diff --git a/lib/flat/dijit/Tree.styl b/lib/flat/dijit/Tree.styl new file mode 100755 index 000000000..d5507da87 --- /dev/null +++ b/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);} +}
\ No newline at end of file diff --git a/lib/flat/dijit/Tree_rtl.css b/lib/flat/dijit/Tree_rtl.css new file mode 100644 index 000000000..88f882988 --- /dev/null +++ b/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"; +} diff --git a/lib/flat/dijit/Tree_rtl.styl b/lib/flat/dijit/Tree_rtl.styl new file mode 100644 index 000000000..adc066402 --- /dev/null +++ b/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"; + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/dijit_variables.styl b/lib/flat/dijit/dijit_variables.styl new file mode 100644 index 000000000..fc9e60b6d --- /dev/null +++ b/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"; diff --git a/lib/flat/dijit/form/Button.css b/lib/flat/dijit/form/Button.css new file mode 100644 index 000000000..f88271f84 --- /dev/null +++ b/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"; +} diff --git a/lib/flat/dijit/form/Button.styl b/lib/flat/dijit/form/Button.styl new file mode 100755 index 000000000..dfeb602b4 --- /dev/null +++ b/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; + } +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/Button_rtl.css b/lib/flat/dijit/form/Button_rtl.css new file mode 100644 index 000000000..2653de756 --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/form/Button_rtl.styl b/lib/flat/dijit/form/Button_rtl.styl new file mode 100755 index 000000000..8dab1cd23 --- /dev/null +++ b/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; + } + } +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/Checkbox.css b/lib/flat/dijit/form/Checkbox.css new file mode 100644 index 000000000..236eb40e8 --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/form/Checkbox.styl b/lib/flat/dijit/form/Checkbox.styl new file mode 100755 index 000000000..556afaf68 --- /dev/null +++ b/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; + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/NumberSpinner.css b/lib/flat/dijit/form/NumberSpinner.css new file mode 100644 index 000000000..6c6ea6b8c --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/form/NumberSpinner.styl b/lib/flat/dijit/form/NumberSpinner.styl new file mode 100755 index 000000000..fa80c36bb --- /dev/null +++ b/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]; + } + } + } + } +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/NumberSpinner_rtl.css b/lib/flat/dijit/form/NumberSpinner_rtl.css new file mode 100644 index 000000000..462d66195 --- /dev/null +++ b/lib/flat/dijit/form/NumberSpinner_rtl.css @@ -0,0 +1,4 @@ +.flat .dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton { + right: 0; + left: auto; +} diff --git a/lib/flat/dijit/form/NumberSpinner_rtl.styl b/lib/flat/dijit/form/NumberSpinner_rtl.styl new file mode 100644 index 000000000..1fe335c3f --- /dev/null +++ b/lib/flat/dijit/form/NumberSpinner_rtl.styl @@ -0,0 +1,10 @@ +@import 'dijit_form_variables'; + +.{$theme-name} { + + .dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton { + right: 0; + left: auto; + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/RadioButton.css b/lib/flat/dijit/form/RadioButton.css new file mode 100644 index 000000000..34503fb4e --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/form/RadioButton.styl b/lib/flat/dijit/form/RadioButton.styl new file mode 100755 index 000000000..b93eff66e --- /dev/null +++ b/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; + } + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/Select.css b/lib/flat/dijit/form/Select.css new file mode 100644 index 000000000..148f4a59a --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/form/Select.styl b/lib/flat/dijit/form/Select.styl new file mode 100755 index 000000000..28559995b --- /dev/null +++ b/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; + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/Select_rtl.css b/lib/flat/dijit/form/Select_rtl.css new file mode 100644 index 000000000..d42ef90ef --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/form/Select_rtl.styl b/lib/flat/dijit/form/Select_rtl.styl new file mode 100644 index 000000000..c04aa1722 --- /dev/null +++ b/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; + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/Slider.css b/lib/flat/dijit/form/Slider.css new file mode 100644 index 000000000..5e966882b --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/form/Slider.styl b/lib/flat/dijit/form/Slider.styl new file mode 100755 index 000000000..76fe95949 --- /dev/null +++ b/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; + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/Slider_rtl.css b/lib/flat/dijit/form/Slider_rtl.css new file mode 100644 index 000000000..131dd19ae --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/form/Slider_rtl.styl b/lib/flat/dijit/form/Slider_rtl.styl new file mode 100755 index 000000000..f8c53d85b --- /dev/null +++ b/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; + } + } +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/TextBox.css b/lib/flat/dijit/form/TextBox.css new file mode 100644 index 000000000..568fb9e93 --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/form/TextBox.styl b/lib/flat/dijit/form/TextBox.styl new file mode 100755 index 000000000..b8a1da2e6 --- /dev/null +++ b/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; + } + } +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/TextBox_rtl.css b/lib/flat/dijit/form/TextBox_rtl.css new file mode 100644 index 000000000..9117b674d --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/form/TextBox_rtl.styl b/lib/flat/dijit/form/TextBox_rtl.styl new file mode 100755 index 000000000..b7ec2bd08 --- /dev/null +++ b/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; + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/form/dijit_form_variables.styl b/lib/flat/dijit/form/dijit_form_variables.styl new file mode 100644 index 000000000..ad1163a61 --- /dev/null +++ b/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" diff --git a/lib/flat/dijit/images/loadingAnimation.gif b/lib/flat/dijit/images/loadingAnimation.gif Binary files differnew file mode 100755 index 000000000..d76e4cd7f --- /dev/null +++ b/lib/flat/dijit/images/loadingAnimation.gif diff --git a/lib/flat/dijit/images/progressBarStrips.png b/lib/flat/dijit/images/progressBarStrips.png Binary files differnew file mode 100755 index 000000000..50644f98c --- /dev/null +++ b/lib/flat/dijit/images/progressBarStrips.png diff --git a/lib/flat/dijit/layout/AccordionContainer.css b/lib/flat/dijit/layout/AccordionContainer.css new file mode 100644 index 000000000..a5241a770 --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/layout/AccordionContainer.styl b/lib/flat/dijit/layout/AccordionContainer.styl new file mode 100755 index 000000000..ebfcd538b --- /dev/null +++ b/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; + } + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/layout/AccordionContainer_rtl.css b/lib/flat/dijit/layout/AccordionContainer_rtl.css new file mode 100644 index 000000000..578a93728 --- /dev/null +++ b/lib/flat/dijit/layout/AccordionContainer_rtl.css @@ -0,0 +1,4 @@ +.flat .dijitAccordionTitle .arrowTextUp, +.flat .dijitAccordionTitle .arrowTextDown { + float: left; +} diff --git a/lib/flat/dijit/layout/AccordionContainer_rtl.styl b/lib/flat/dijit/layout/AccordionContainer_rtl.styl new file mode 100644 index 000000000..76ab2d37c --- /dev/null +++ b/lib/flat/dijit/layout/AccordionContainer_rtl.styl @@ -0,0 +1,12 @@ +@import 'dijit_layout_variables'; + +.{$theme-name} { + + .dijitAccordionTitle { + .arrowTextUp, + .arrowTextDown { + float: left; + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/layout/BorderContainer.css b/lib/flat/dijit/layout/BorderContainer.css new file mode 100644 index 000000000..464ebf5a5 --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/layout/BorderContainer.styl b/lib/flat/dijit/layout/BorderContainer.styl new file mode 100755 index 000000000..c8c4de295 --- /dev/null +++ b/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; + } + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/layout/ContentPane.css b/lib/flat/dijit/layout/ContentPane.css new file mode 100644 index 000000000..d912ba4ee --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/layout/ContentPane.styl b/lib/flat/dijit/layout/ContentPane.styl new file mode 100755 index 000000000..eadc8ea7f --- /dev/null +++ b/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; + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/layout/TabContainer.css b/lib/flat/dijit/layout/TabContainer.css new file mode 100644 index 000000000..21fa58920 --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/layout/TabContainer.styl b/lib/flat/dijit/layout/TabContainer.styl new file mode 100755 index 000000000..a341ed064 --- /dev/null +++ b/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; + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/layout/TabContainer_rtl.css b/lib/flat/dijit/layout/TabContainer_rtl.css new file mode 100644 index 000000000..b60a895fa --- /dev/null +++ b/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; +} diff --git a/lib/flat/dijit/layout/TabContainer_rtl.styl b/lib/flat/dijit/layout/TabContainer_rtl.styl new file mode 100755 index 000000000..ea4892d02 --- /dev/null +++ b/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; + } + +}
\ No newline at end of file diff --git a/lib/flat/dijit/layout/dijit_layout_variables.styl b/lib/flat/dijit/layout/dijit_layout_variables.styl new file mode 100644 index 000000000..fdda4b59e --- /dev/null +++ b/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 |
