Merge branch 'material-icons' into weblate-integration
Andrew Dolgov
6 years ago
commit
f905c2a943
File diff suppressed because one or more lines are too long
@ -1,37 +0,0 @@
|
||||
### Flat Theme
|
||||
|
||||
A flat theme for Dojo Dijit.
|
||||
|
||||
|
||||
|
||||
**To Do:**
|
||||
|
||||
1. Fix any outlying dijits using opacity for disabled.
|
||||
2. TitlePane and Accordion headers should have a separate mixin function from buttons.
|
||||
3. Alternate color classes TitlePane headers.
|
||||
4. Alternate color classes for AccordionContainer (active pane header).
|
||||
5. Alternate color classes for Sliders; and remove transparency for disabled.
|
||||
|
||||
**Icons:**
|
||||
|
||||
All icons are Material Design icons by Google ([LICENSE](https://github.com/google/material-design-icons/blob/master/LICENSE)), and were generated using the [IcoMoon App](https://icomoon.io/app).
|
||||
|
||||
Icons, along with class names, `.dijitIcon*` aliases and hex codes, can be viewed in Flat Theme Test app.
|
||||
|
||||
This theme includes the `selection.json` file, which can be loaded into the IcoMoon App for editing. This icon font includes all the icons needed for icons used in dijits (close in Dialog, etc) and all aliased `.dijitIcon*` and `.dijitEditorIcon*` classes. The hex codes should be maintained as is.
|
||||
|
||||
The test app uses the `selection.json` to create the icons tests. The test app includes a globally exposed method `createIconClasses()`, which will create and download a text file containing the icon classes and dijit aliases, which can then be added to `flat-icons.sty` when changes are made to the icon set.
|
||||
|
||||
NOTE: This icon set is incomplete. Many of the `.dijitIcon*` and `.dijitEditorIcon*` icons do not have suitable icons in the Google icon set. These icons have a placeholder and have been assigned hex codes. Instead of using icons which do not quite fit the use, or from different icon sets, SVGs for these icons need to be created and added to the font. The SVGs need to be created on a 24 x 24 grid and generally be of the same design as the other icons.
|
||||
|
||||
**Issues:**
|
||||
|
||||
1. Toggle button doesn't maintain width when unchecked.
|
||||
2. For input dijits with alternate color and required/validate, the border should also change via `.dijitTextBoxError` and equivalents. Alternate color styles are overriding.
|
||||
3. Hover and selected calendar days with background 50% border radius looks a bit off on some days.
|
||||
4. `.dijitIcon` class can cause issues when using certain icon fonts.
|
||||
|
||||
**Improvements:**
|
||||
|
||||
1. Consider typography, complimentary styling for native elements, helper classes, etc; and some components like Bootstrap.
|
||||
2. Alternate colors for text input dijits, checkboxes, radio buttons, sliders, title pane, tooltips.
|
||||
@ -1,216 +0,0 @@
|
||||
/* 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 #ccc;
|
||||
border-collapse: separate;
|
||||
border-radius: 4px;
|
||||
-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: 14px;
|
||||
-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: #ccc;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
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: #ccc;
|
||||
}
|
||||
.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: #257aa7;
|
||||
}
|
||||
.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: #257aa7;
|
||||
}
|
||||
.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: #257aa7;
|
||||
}
|
||||
.flat .dijitCalendarNextYear,
|
||||
.flat .dijitCalendarPreviousYear {
|
||||
color: #257aa7;
|
||||
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: #257aa7;
|
||||
}
|
||||
@ -1,247 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,6 +0,0 @@
|
||||
.flat .dijitCalendarRtl .dijitCalendarDecrease:before {
|
||||
content: "\f001";
|
||||
}
|
||||
.flat .dijitCalendarRtl .dijitCalendarIncrease:before {
|
||||
content: "\f000";
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
@import 'dijit_variables';
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
.dijitCalendarRtl .dijitCalendarDecrease {
|
||||
&:before {
|
||||
content: $calendar-icon-increase;
|
||||
}
|
||||
}
|
||||
|
||||
.dijitCalendarRtl .dijitCalendarIncrease {
|
||||
&:before {
|
||||
content: $calendar-icon-decrease;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,66 +0,0 @@
|
||||
/* 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 #ccc;
|
||||
background-color: #fff;
|
||||
border-radius: 4px;
|
||||
/* 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: #ccc;
|
||||
-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 #257aa7;
|
||||
-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);
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
/* 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);
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
.flat .dijitColorPaletteRtl .dijitColorPaletteUnder {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
@import 'dijit_variables';
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
.dijitColorPaletteRtl .dijitColorPaletteUnder {
|
||||
left: auto;
|
||||
right: 0;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,87 +0,0 @@
|
||||
.dijitPopup {
|
||||
border-radius: 4px;
|
||||
}
|
||||
/* ----- 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: 4px;
|
||||
}
|
||||
.dojoDndItemAnchor {
|
||||
background-color: transparent;
|
||||
border: 1px dashed #257aa7;
|
||||
border-radius: 4px;
|
||||
}
|
||||
/* selected */
|
||||
.dojoDndItemBefore {
|
||||
background: transparent;
|
||||
padding-top: 2px;
|
||||
border-top: 1px solid #257aa7;
|
||||
}
|
||||
.dojoDndItemAfter {
|
||||
background: transparent;
|
||||
padding-bottom: 2px;
|
||||
border-bottom: 1px solid #257aa7;
|
||||
}
|
||||
/* 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: 14px;
|
||||
-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: 4px;
|
||||
}
|
||||
.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);
|
||||
}
|
||||
@ -1,104 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,274 +0,0 @@
|
||||
/* 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 #ccc;
|
||||
border-radius: 4px;
|
||||
-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 4px 4px;
|
||||
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 4px 4px;
|
||||
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: 4px 4px 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: 14px;
|
||||
-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: 4px;
|
||||
}
|
||||
.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 #ccc;
|
||||
border-radius: 4px;
|
||||
-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: #ccc 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 #ccc;
|
||||
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 #ccc;
|
||||
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 #ccc 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;
|
||||
}
|
||||
@ -1,308 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
.flat .dijitDialogRtl .dijitDialogCloseIcon {
|
||||
right: auto;
|
||||
left: 12px;
|
||||
}
|
||||
.flat .dijitDialogRtl .dijitDialogPaneActionBar,
|
||||
.flat .dijitTooltipDialogRtl .dijitDialogPaneActionBar {
|
||||
text-align: left;
|
||||
}
|
||||
@ -1,17 +0,0 @@
|
||||
@import 'dijit_variables';
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
.dijitDialogRtl .dijitDialogCloseIcon {
|
||||
right: auto;
|
||||
left: $dialog-padding * 1.5;
|
||||
}
|
||||
|
||||
.dijitDialogRtl,
|
||||
.dijitTooltipDialogRtl {
|
||||
.dijitDialogPaneActionBar {
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,53 +0,0 @@
|
||||
/* 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 #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.flat .dijitEditor .dijitEditorIFrameContainer {
|
||||
border: 1px solid transparent;
|
||||
border-top: 1px solid #ccc;
|
||||
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 #257aa7;
|
||||
}
|
||||
.flat .dijitEditorFocused .dijitEditorIFrameContainer {
|
||||
border: 1px solid #257aa7;
|
||||
}
|
||||
.flat .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame {
|
||||
border: 1px solid #257aa7;
|
||||
}
|
||||
.flat .dijitEditorDisabled {
|
||||
border: 1px solid #ccc;
|
||||
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;
|
||||
}
|
||||
@ -1,69 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,8 +0,0 @@
|
||||
@import 'dijit_variables';
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
.dijitEditorRtl {
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
/* 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 #257aa7;
|
||||
}
|
||||
.flat .dijitInlineEditBoxDisplayModeDisabled {
|
||||
opacity: 0.65;
|
||||
-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)";
|
||||
filter: alpha(opacity=65);
|
||||
}
|
||||
@ -1,31 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,157 +0,0 @@
|
||||
/* 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 #ccc;
|
||||
border-radius: 4px;
|
||||
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: #257aa7;
|
||||
}
|
||||
.flat .dijitMenuItemActive td,
|
||||
.flat .dijitMenuItemActive {
|
||||
color: #fff;
|
||||
background-color: #257aa7;
|
||||
}
|
||||
.flat .dijitMenuItemSelected td,
|
||||
.flat .dijitMenuItemSelected {
|
||||
color: #fff;
|
||||
background-color: #257aa7;
|
||||
}
|
||||
.flat .dijitMenuItemDisabled {
|
||||
color: #9e9e9e;
|
||||
}
|
||||
.flat .dijitMenuItemDisabled.dijitMenuItemSelected td,
|
||||
.flat .dijitMenuItemDisabled.dijitMenuItemSelected {
|
||||
color: #f2f2f2;
|
||||
background: #5cafdb;
|
||||
}
|
||||
.flat .dijitMenuSeparatorTop {
|
||||
height: auto;
|
||||
margin-top: 1px; /* prevents spacing above/below separator */
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.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: 14px;
|
||||
-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: #257aa7;
|
||||
}
|
||||
.flat .dijitMenuBar .dijitMenuItemActive {
|
||||
color: #fff;
|
||||
background-color: #257aa7;
|
||||
}
|
||||
.flat .dijitMenuBar .dijitMenuItemSelected,
|
||||
.flat .dijitMenuBar .dijitMenuItemHover.dijitMenuItemSelected,
|
||||
.flat .dijitMenuBar .dijitMenuItemActive.dijitMenuItemSelected {
|
||||
color: #fff;
|
||||
background-color: #257aa7;
|
||||
}
|
||||
.flat .dijitMenuBar .dijitMenuItemDisabled.dijitMenuItemSelected {
|
||||
color: #f2f2f2;
|
||||
background: #5cafdb;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
@ -1,191 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
.flat .dijitMenuBarRtl {
|
||||
text-align: right;
|
||||
}
|
||||
.flat .dijitMenuItemRtl {
|
||||
text-align: right;
|
||||
}
|
||||
.flat .dijitMenuItemRtl .dijitMenuExpand:before {
|
||||
content: "\f000";
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
@import 'dijit_variables';
|
||||
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
.dijitMenuBarRtl {
|
||||
text-align: right;
|
||||
}
|
||||
|
||||
.dijitMenuItemRtl {
|
||||
text-align: right;
|
||||
|
||||
.dijitMenuExpand {
|
||||
&:before {
|
||||
content: $menu-item-icon-rtl;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,110 +0,0 @@
|
||||
/* 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: 4px;
|
||||
}
|
||||
.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: #257aa7;
|
||||
-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;
|
||||
}
|
||||
}
|
||||
@ -1,70 +0,0 @@
|
||||
/* 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; }
|
||||
}
|
||||
@ -1,60 +0,0 @@
|
||||
/* 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 #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
@ -1,71 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@ -1,118 +0,0 @@
|
||||
/* 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: #ccc;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
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: 4px 4px 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: 4px 4px 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: 14px;
|
||||
-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: 4px;
|
||||
}
|
||||
.flat .dijitTitlePane .dijitClosed .dijitArrowNode:before,
|
||||
.flat .dijitFieldset .dijitClosed .dijitArrowNode:before {
|
||||
content: "\f006";
|
||||
}
|
||||
.flat .dijitTitlePaneContentOuter {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-top: none;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.flat .dijitFieldset {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
}
|
||||
.flat .dijitTitlePaneContentInner,
|
||||
.flat .dijitFieldsetContentInner {
|
||||
padding: 8px;
|
||||
}
|
||||
.flat .dijitTitlePaneTextNode,
|
||||
.flat .dijitFieldsetLegendNode {
|
||||
margin-left: 8px;
|
||||
margin-right: 8px;
|
||||
vertical-align: text-top;
|
||||
}
|
||||
.flat .dijitFieldsetLegendNode {
|
||||
cursor: default;
|
||||
}
|
||||
@ -1,110 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,7 +0,0 @@
|
||||
/* TitlePane */
|
||||
.flat .dijitTitlePaneRtl .dijitTitlePaneTitle {
|
||||
text-align: right;
|
||||
}
|
||||
.flat .dijitTitlePaneRtl .dijitClosed .dijitArrowNode:before {
|
||||
content: "\f006";
|
||||
}
|
||||
@ -1,18 +0,0 @@
|
||||
/* TitlePane */
|
||||
|
||||
@import 'dijit_variables';
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
.dijitTitlePaneRtl {
|
||||
.dijitTitlePaneTitle {
|
||||
text-align: right;
|
||||
}
|
||||
.dijitClosed {
|
||||
.dijitArrowNode:before {
|
||||
content: $icon-expand;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,137 +0,0 @@
|
||||
/* 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: 4px;
|
||||
-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: 4px 0 0 4px;
|
||||
}
|
||||
.flat .dijitToolbar .dijitComboButton .dijitArrowButton {
|
||||
/* no rounded border on side adjacent to button */
|
||||
border-radius: 0 4px 4px 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 #ccc;
|
||||
}
|
||||
.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 #ccc;
|
||||
}
|
||||
.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 #ccc;
|
||||
}
|
||||
.flat .dijitToolbarSeparator {
|
||||
width: 1px;
|
||||
height: 20px;
|
||||
background-color: #ccc;
|
||||
padding: 0;
|
||||
margin: 0 4px;
|
||||
}
|
||||
.flat .dijitDisabled .dijitToolbar {
|
||||
background-color: #f5f5f5;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
@ -1,145 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,11 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@ -1,20 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,181 +0,0 @@
|
||||
/* 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: #257aa7;
|
||||
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: 14px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
width: 14px;
|
||||
height: 14px;
|
||||
line-height: 14px;
|
||||
text-align: center;
|
||||
margin-left: 4px;
|
||||
margin-right: 4px;
|
||||
color: #257aa7;
|
||||
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);
|
||||
}
|
||||
}
|
||||
@ -1,122 +0,0 @@
|
||||
/* 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);}
|
||||
}
|
||||
@ -1,9 +0,0 @@
|
||||
.flat .dijitTreeRtl {
|
||||
text-align: right;
|
||||
}
|
||||
.flat .dijitTreeRtl .dijitTreeContainer {
|
||||
float: right;
|
||||
}
|
||||
.flat .dijitTreeRtl .dijitTreeExpandoClosed:before {
|
||||
content: "\e60b";
|
||||
}
|
||||
@ -1,16 +0,0 @@
|
||||
@import 'dijit_variables';
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
.dijitTreeRtl {
|
||||
text-align: right;
|
||||
|
||||
.dijitTreeContainer {
|
||||
float: right;
|
||||
}
|
||||
.dijitTreeExpandoClosed:before {
|
||||
content: "\e60b";
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,361 +0,0 @@
|
||||
/* 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";
|
||||
@ -1,646 +0,0 @@
|
||||
/* 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: #ccc;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
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: 4px 0 0 4px;
|
||||
}
|
||||
.flat table.dijitComboButton .dijitArrowButton {
|
||||
padding: 4px;
|
||||
width: 20px;
|
||||
border-radius: 0 4px 4px 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: 14px;
|
||||
-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";
|
||||
}
|
||||
@ -1,165 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
.flat table.dijitComboButtonRtl .dijitStretch {
|
||||
border-radius: 0 4px 4px 0;
|
||||
}
|
||||
.flat table.dijitComboButtonRtl .dijitArrowButton {
|
||||
border-radius: 4px 0 0 4px;
|
||||
border-left-width: 1px;
|
||||
border-right-width: 0;
|
||||
}
|
||||
.flat .dijitDropDownButtonRtl .dijitButtonNode {
|
||||
padding-left: 8px;
|
||||
}
|
||||
.flat .dijitDropDownButtonRtl .dijitArrowButtonInner {
|
||||
margin-left: 0;
|
||||
margin-right: 12px;
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,131 +0,0 @@
|
||||
/* 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 #ccc;
|
||||
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: 14px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: "\f00c";
|
||||
color: #fff;
|
||||
}
|
||||
.flat .dijitCheckBoxIcon {
|
||||
padding: 0;
|
||||
}
|
||||
.flat .dijitCheckBoxIcon:before {
|
||||
color: #257aa7;
|
||||
}
|
||||
.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: #257aa7;
|
||||
border-color: #257aa7;
|
||||
}
|
||||
.flat .dijitCheckBoxHover {
|
||||
background-color: #fff;
|
||||
border: 1px solid #257aa7;
|
||||
}
|
||||
.flat .dijitCheckBoxCheckedHover {
|
||||
background-color: #2d95cd;
|
||||
border: 1px solid #257aa7;
|
||||
}
|
||||
.flat .dijitCheckBoxDisabled {
|
||||
color: #9e9e9e;
|
||||
background-color: #f5f5f5;
|
||||
border-color: #e3e3e3;
|
||||
}
|
||||
.flat .dijitCheckBoxCheckedDisabled {
|
||||
color: #a6a6a6;
|
||||
background-color: #5cafdb;
|
||||
border-color: #5cafdb;
|
||||
}
|
||||
.flat .dijitCheckedMenuItem .dijitCheckedMenuItemIcon {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
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: 14px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
content: "\f00c";
|
||||
color: #257aa7;
|
||||
}
|
||||
@ -1,137 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,125 +0,0 @@
|
||||
/* 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 #ccc;
|
||||
}
|
||||
.flat .dijitSpinner .dijitSpinnerButtonInner {
|
||||
width: 30px;
|
||||
padding: 4px 0 !important;
|
||||
margin: 0;
|
||||
}
|
||||
.flat .dijitSpinner .dijitArrowButton {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: #ccc;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
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.666666666666668px;
|
||||
}
|
||||
.flat .dijitSpinner .dijitDownArrowButton {
|
||||
border-bottom-right-radius: 2.666666666666668px;
|
||||
}
|
||||
.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: 14px;
|
||||
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;
|
||||
}
|
||||
@ -1,124 +0,0 @@
|
||||
/* 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];
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
.flat .dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
@ -1,10 +0,0 @@
|
||||
@import 'dijit_form_variables';
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
.dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton {
|
||||
right: 0;
|
||||
left: auto;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,157 +0,0 @@
|
||||
/* 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 #257aa7;
|
||||
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: #257aa7;
|
||||
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: #43a3d5;
|
||||
}
|
||||
.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: #5cafdb;
|
||||
}
|
||||
.flat .dijitRadioCheckedDisabled:after {
|
||||
background-color: #5cafdb;
|
||||
}
|
||||
.flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon {
|
||||
width: 16px;
|
||||
height: 16px;
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
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: #257aa7;
|
||||
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: #ccc;
|
||||
}
|
||||
.flat .dijitRadioMenuItemChecked .dijitCheckedMenuItemIcon:after {
|
||||
width: 8px;
|
||||
height: 8px;
|
||||
margin: 3px;
|
||||
opacity: 1;
|
||||
-ms-filter: none;
|
||||
filter: none;
|
||||
}
|
||||
@ -1,167 +0,0 @@
|
||||
/* 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: #ccc;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
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.666666666666668px 2.666666666666668px 0;
|
||||
}
|
||||
.flat .dijitSelect .dijitButtonContents {
|
||||
padding: 0;
|
||||
overflow: hidden;
|
||||
-o-text-overflow: ellipsis;
|
||||
text-overflow: ellipsis;
|
||||
border-radius: 2.666666666666668px 0 0 2.666666666666668px;
|
||||
}
|
||||
.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 #ccc;
|
||||
}
|
||||
.flat .dijitSelectDisabled {
|
||||
cursor: default;
|
||||
color: #9e9e9e;
|
||||
background-color: #f5f5f5;
|
||||
border-color: #e3e3e3;
|
||||
}
|
||||
.flat .dijitComboBox .dijitButtonNode {
|
||||
border-style: solid;
|
||||
border-width: 1px;
|
||||
border-color: #ccc;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
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.666666666666668px 2.666666666666668px 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 #ccc;
|
||||
-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;
|
||||
}
|
||||
@ -1,164 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,15 +0,0 @@
|
||||
.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: 4px 0 0 4px;
|
||||
}
|
||||
.flat .dijitComboBoxRtl .dijitArrowButtonContainer {
|
||||
border-right-width: 1px !important;
|
||||
border-left-width: 0 !important;
|
||||
}
|
||||
@ -1,27 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,300 +0,0 @@
|
||||
/* 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: #257aa7;
|
||||
background-image: none;
|
||||
}
|
||||
.flat .dijitSlider .dijitSliderRemainingBarH,
|
||||
.flat .dijitSlider .dijitSliderRightBumper {
|
||||
border: 0 none;
|
||||
background-color: #ccc;
|
||||
}
|
||||
.flat .dijitSliderHover .dijitSliderProgressBarH,
|
||||
.flat .dijitSliderHover .dijitSliderLeftBumper {
|
||||
background-color: #22709a;
|
||||
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: #257aa7;
|
||||
background-image: none;
|
||||
}
|
||||
.flat .dijitSlider .dijitSliderRemainingBarV,
|
||||
.flat .dijitSlider .dijitSliderTopBumper {
|
||||
border: 0 none;
|
||||
background-color: #ccc;
|
||||
}
|
||||
.flat .dijitSliderHover .dijitSliderProgressBarV,
|
||||
.flat .dijitSliderHover .dijitSliderBottomBumper {
|
||||
background-color: #22709a;
|
||||
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 #257aa7;
|
||||
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: #257aa7;
|
||||
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: #ccc;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
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: #257aa7;
|
||||
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: 14px;
|
||||
-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;
|
||||
}
|
||||
@ -1,345 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,32 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@ -1,39 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,275 +0,0 @@
|
||||
/* 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 #ccc;
|
||||
border-radius: 4px;
|
||||
-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: #257aa7;
|
||||
-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: #257aa7;
|
||||
-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: 14px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
font-size: 18px;
|
||||
}
|
||||
.flat .dijitValidationTextBoxError .dijitValidationContainer:before {
|
||||
content: "\f017";
|
||||
}
|
||||
.flat .dijitValidationTextBoxError .dijitValidationIcon {
|
||||
display: none;
|
||||
}
|
||||
@ -1,104 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
@ -1,21 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@ -1,30 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,212 +0,0 @@
|
||||
/* 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"
|
||||
@ -1,169 +0,0 @@
|
||||
/* 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: 4px;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainer {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
-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: #ccc;
|
||||
padding: 4px;
|
||||
border-radius: 4px;
|
||||
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: 4px;
|
||||
}
|
||||
.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: 14px;
|
||||
-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: #257aa7;
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextUp {
|
||||
display: none;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextDown {
|
||||
display: block;
|
||||
}
|
||||
.flat .dijitAccordionContainer .dijitAccordionChildWrapper {
|
||||
background-color: #fff;
|
||||
border: 1px solid #ccc;
|
||||
border-top: 0 none;
|
||||
position: relative;
|
||||
z-index: 1;
|
||||
clear: both;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.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: 4px 4px 0 0;
|
||||
}
|
||||
.flat .dijitAccordionInnerContainer:last-child,
|
||||
.flat .dijitAccordionInnerContainer:last-child .dijitAccordionTitle {
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
@ -1,160 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,4 +0,0 @@
|
||||
.flat .dijitAccordionTitle .arrowTextUp,
|
||||
.flat .dijitAccordionTitle .arrowTextDown {
|
||||
float: left;
|
||||
}
|
||||
@ -1,12 +0,0 @@
|
||||
@import 'dijit_layout_variables';
|
||||
|
||||
.{$theme-name} {
|
||||
|
||||
.dijitAccordionTitle {
|
||||
.arrowTextUp,
|
||||
.arrowTextDown {
|
||||
float: left;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,97 +0,0 @@
|
||||
/* 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 #ccc;
|
||||
}
|
||||
.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: #ccc;
|
||||
height: 1px;
|
||||
top: 2px;
|
||||
width: 19px;
|
||||
}
|
||||
.flat .dijitSplitterV,
|
||||
.flat .dijitGutterV {
|
||||
background: none;
|
||||
border: 0;
|
||||
width: 5px;
|
||||
margin: 0;
|
||||
}
|
||||
.flat .dijitSplitterV .dijitSplitterThumb {
|
||||
background: #ccc;
|
||||
height: 19px;
|
||||
left: 2px;
|
||||
width: 1px;
|
||||
margin: 0;
|
||||
}
|
||||
.flat .dijitSplitterHHover,
|
||||
.flat .dijitSplitterVHover {
|
||||
font-size: 1px;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
.flat .dijitSplitterHHover .dijitSplitterThumb,
|
||||
.flat .dijitSplitterVHover .dijitSplitterThumb {
|
||||
background: #999;
|
||||
}
|
||||
.flat .dijitSplitterHActive,
|
||||
.flat .dijitSplitterVActive {
|
||||
font-size: 1px;
|
||||
background: #f2f2f2;
|
||||
}
|
||||
.flat .dijitSplitterHActive .dijitSplitterThumb,
|
||||
.flat .dijitSplitterVActive .dijitSplitterThumb {
|
||||
background: #999;
|
||||
}
|
||||
@ -1,117 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,36 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
@ -1,45 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,359 +0,0 @@
|
||||
/* 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: 4px;
|
||||
}
|
||||
.flat .dijitTabPaneWrapper {
|
||||
background: #fff;
|
||||
border: 1px solid #ccc;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
border-radius: 0 0 4px 4px;
|
||||
}
|
||||
.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 #ccc;
|
||||
z-index: 1;
|
||||
}
|
||||
.flat .dijitTabChecked.dijitTabHover,
|
||||
.flat .dijitTabChecked.dijitTabActive {
|
||||
border: 1px solid #ccc;
|
||||
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: 14px;
|
||||
-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: #ccc;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
.flat .dijitTabContainerTop-tabs .dijitTabChecked {
|
||||
border-bottom: 1px solid #fff;
|
||||
border-left: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
.flat .dijitTabContainerTop-tabs .dijitTabChecked:before {
|
||||
height: 3px;
|
||||
background: #257aa7;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
right: -1px;
|
||||
}
|
||||
.flat .dijitTabListContainer-top {
|
||||
margin-top: 1px;
|
||||
}
|
||||
.flat .dijitTabListContainer-top .dijitTab {
|
||||
top: 0;
|
||||
}
|
||||
.flat .dijitTabPaneWrapper.dijitTabContainerBottom-container {
|
||||
border-radius: 4px 4px 0 0;
|
||||
}
|
||||
.flat .dijitTabContainerBottom-tabs .dijitTab {
|
||||
margin-right: 0;
|
||||
padding: 6px 16px;
|
||||
border-top-color: #ccc;
|
||||
border-left: none;
|
||||
border-right: none;
|
||||
}
|
||||
.flat .dijitTabContainerBottom-tabs .dijitTabChecked {
|
||||
border-top: 1px solid #fff;
|
||||
border-left: 1px solid #ccc;
|
||||
border-right: 1px solid #ccc;
|
||||
}
|
||||
.flat .dijitTabContainerBottom-tabs .dijitTabChecked:before {
|
||||
height: 3px;
|
||||
background: #257aa7;
|
||||
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 4px 4px 0;
|
||||
}
|
||||
.flat .dijitTabContainerLeft-tabs .dijitTab {
|
||||
margin-bottom: 0;
|
||||
padding: 8px 12px;
|
||||
border-right-color: #ccc;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
.flat .dijitTabContainerLeft-tabs .dijitTabChecked {
|
||||
border-right: 1px solid #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.flat .dijitTabContainerLeft-tabs .dijitTabChecked:before {
|
||||
width: 3px;
|
||||
background: #257aa7;
|
||||
bottom: -1px;
|
||||
left: -1px;
|
||||
top: -1px;
|
||||
}
|
||||
.flat .dijitTabPaneWrapper.dijitTabContainerRight-container {
|
||||
border-radius: 4px 0 0 4px;
|
||||
}
|
||||
.flat .dijitTabContainerRight-tabs .dijitTab {
|
||||
margin-bottom: 0;
|
||||
padding: 8px 12px;
|
||||
border-left-color: #ccc;
|
||||
border-top: none;
|
||||
border-bottom: none;
|
||||
}
|
||||
.flat .dijitTabContainerRight-tabs .dijitTabChecked {
|
||||
border-left: 1px solid #fff;
|
||||
border-top: 1px solid #ccc;
|
||||
border-bottom: 1px solid #ccc;
|
||||
}
|
||||
.flat .dijitTabContainerRight-tabs .dijitTabChecked:before {
|
||||
width: 3px;
|
||||
background: #257aa7;
|
||||
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: 14px;
|
||||
-webkit-font-smoothing: antialiased;
|
||||
-moz-osx-font-smoothing: grayscale;
|
||||
color: #257aa7;
|
||||
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: #257aa7;
|
||||
margin: 4px;
|
||||
padding: 4px 8px;
|
||||
border: 1px solid transparent;
|
||||
border-radius: 4px;
|
||||
-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: #257aa7;
|
||||
background-color: #e6e6e6;
|
||||
}
|
||||
.flat .dijitTabContainerTabListNested .dijitTabChecked,
|
||||
.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabHover,
|
||||
.flat .dijitTabContainerTabListNested .dijitTabChecked.dijitTabActive {
|
||||
color: #fff;
|
||||
background-color: #257aa7;
|
||||
}
|
||||
.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;
|
||||
}
|
||||
@ -1,446 +0,0 @@
|
||||
/* 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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,13 +0,0 @@
|
||||
.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;
|
||||
}
|
||||
@ -1,23 +0,0 @@
|
||||
@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;
|
||||
}
|
||||
|
||||
}
|
||||
@ -1,135 +0,0 @@
|
||||
/* 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
|
||||
Some files were not shown because too many files have changed in this diff Show More
Loading…
Reference in New Issue