├── README.md ├── css ├── flat │ ├── dgrid │ │ ├── README.md │ │ ├── flat.css │ │ └── flat.styl │ ├── dijit │ │ ├── Calendar.css │ │ ├── Calendar.styl │ │ ├── Calendar_rtl.css │ │ ├── Calendar_rtl.styl │ │ ├── ColorPalette.css │ │ ├── ColorPalette.styl │ │ ├── ColorPalette_rtl.css │ │ ├── ColorPalette_rtl.styl │ │ ├── Common.css │ │ ├── Common.styl │ │ ├── Dialog.css │ │ ├── Dialog.styl │ │ ├── Dialog_rtl.css │ │ ├── Dialog_rtl.styl │ │ ├── Editor.css │ │ ├── Editor.styl │ │ ├── Editor_rtl.styl │ │ ├── InlineEditBox.css │ │ ├── InlineEditBox.styl │ │ ├── Menu.css │ │ ├── Menu.styl │ │ ├── Menu_rtl.css │ │ ├── Menu_rtl.styl │ │ ├── ProgressBar.css │ │ ├── ProgressBar.styl │ │ ├── TimePicker.css │ │ ├── TimePicker.styl │ │ ├── TitlePane.css │ │ ├── TitlePane.styl │ │ ├── TitlePane_rtl.css │ │ ├── TitlePane_rtl.styl │ │ ├── Toolbar.css │ │ ├── Toolbar.styl │ │ ├── Toolbar_rtl.css │ │ ├── Toolbar_rtl.styl │ │ ├── Tree.css │ │ ├── Tree.styl │ │ ├── Tree_rtl.css │ │ ├── Tree_rtl.styl │ │ ├── dijit_variables.styl │ │ ├── form │ │ │ ├── Button.css │ │ │ ├── Button.styl │ │ │ ├── Button_rtl.css │ │ │ ├── Button_rtl.styl │ │ │ ├── Checkbox.css │ │ │ ├── Checkbox.styl │ │ │ ├── NumberSpinner.css │ │ │ ├── NumberSpinner.styl │ │ │ ├── NumberSpinner_rtl.css │ │ │ ├── NumberSpinner_rtl.styl │ │ │ ├── RadioButton.css │ │ │ ├── RadioButton.styl │ │ │ ├── Select.css │ │ │ ├── Select.styl │ │ │ ├── Select_rtl.css │ │ │ ├── Select_rtl.styl │ │ │ ├── Slider.css │ │ │ ├── Slider.styl │ │ │ ├── Slider_rtl.css │ │ │ ├── Slider_rtl.styl │ │ │ ├── TextBox.css │ │ │ ├── TextBox.styl │ │ │ ├── TextBox_rtl.css │ │ │ ├── TextBox_rtl.styl │ │ │ └── dijit_form_variables.styl │ │ ├── images │ │ │ ├── loadingAnimation.gif │ │ │ └── progressBarStrips.png │ │ └── layout │ │ │ ├── AccordionContainer.css │ │ │ ├── AccordionContainer.styl │ │ │ ├── AccordionContainer_rtl.css │ │ │ ├── AccordionContainer_rtl.styl │ │ │ ├── BorderContainer.css │ │ │ ├── BorderContainer.styl │ │ │ ├── ContentPane.css │ │ │ ├── ContentPane.styl │ │ │ ├── TabContainer.css │ │ │ ├── TabContainer.styl │ │ │ ├── TabContainer_rtl.css │ │ │ ├── TabContainer_rtl.styl │ │ │ └── dijit_layout_variables.styl │ ├── dojox │ │ ├── dijit │ │ │ └── README.md │ │ └── layout │ │ │ └── README.md │ ├── flat.css │ ├── flat_dijit.css │ ├── flat_dijit_rtl.css │ ├── flat_rtl.css │ └── icons │ │ ├── flat-icons.css │ │ ├── flat-icons.styl │ │ ├── fonts │ │ ├── flat-icon.eot │ │ ├── flat-icon.svg │ │ ├── flat-icon.ttf │ │ └── flat-icon.woff │ │ ├── images │ │ └── loadingAnimation.gif │ │ └── selection.json └── style.css ├── img ├── 1_RedStyle.png ├── 2_OrangeStyle.png ├── 3_GreenStyle.png ├── 4_BlueStyle.png ├── 5_PinkStyle.png ├── 6_WhiteStyle.png └── TimeZoneLegend.png ├── index.html ├── js ├── color.all.min.js └── vectorTileDemo.js └── vectorStyle.json /README.md: -------------------------------------------------------------------------------- 1 | # vector-tile-demo-js 2 | Demo Application for switching vector tile styles on the fly 3 | 4 | ### Try it live [here](https://gbochenek.github.io/vector-tile-demo-js/) 5 | -------------------------------------------------------------------------------- /css/flat/dgrid/README.md: -------------------------------------------------------------------------------- 1 | The dgrid flat theme builds on the Stylus-based CSS refactor found in dgrid 1.0. 2 | This portion of the theme requires the [dgrid](http://dgrid.io/) package. 3 | 4 | To build your own flat dgrid theme, you may want to adjust the path to dgrid. By 5 | default, we assume that dgrid is a sibling directory to themes. If this is not 6 | the case within your application directory structure, simply specify a different 7 | value for `$flat_path_to_dgrid` in your stylus file for your theme, before 8 | importing themes/flat/dgrid/flat.styl. 9 | -------------------------------------------------------------------------------- /css/flat/dgrid/flat.css: -------------------------------------------------------------------------------- 1 | .flat { 2 | import: '../../dgrid/css/skins/skin'; 3 | } 4 | .flat .dgrid-cell-padding { 5 | padding: 5px 10px; 6 | } 7 | .flat .dgrid-header .dgrid-cell { 8 | border-bottom-width: 2px; 9 | } 10 | .flat .dgrid-selected { 11 | border: 1px solid #007ac2; 12 | } 13 | -------------------------------------------------------------------------------- /css/flat/dgrid/flat.styl: -------------------------------------------------------------------------------- 1 | @require 'nib/gradients'; 2 | @require 'nib/vendor'; 3 | 4 | $flat_path_to_dgrid ?= '../../dgrid'; 5 | 6 | $dgrid-background ?= #fff; 7 | $dgrid-border-color ?= #d0d0d0; 8 | $dgrid-cell-padding ?= 5px 10px; 9 | 10 | $dgrid-cell-has-vertical-border ?= false; 11 | 12 | $dgrid-header-background ?= #fff; 13 | $dgrid-header-cell-border-color ?= #d0d0d0; 14 | $dgrid-header-cell-border-bottom-width ?= 2px; 15 | $dgrid-header-cell-font-weight ?= bold; 16 | $dgrid-header-cell-hover-background ?= #f2f2f2; 17 | $dgrid-header-text-transform ?= uppercase; 18 | 19 | $dgrid-body-cell-border-color ?= #d0d0d0; 20 | $dgrid-body-row-transition-duration ?= 0.1s; 21 | $dgrid-body-row-transition-property ?= unquote('background-color'); 22 | $dgrid-body-row-background ?= transparent; 23 | 24 | $dgrid-body-row-hover-background-color ?= #f2f2f2; 25 | 26 | $dgrid-selected-background-color ?= #fff; 27 | $dgrid-selected-border ?= 1px solid #007ac2; 28 | $dgrid-selected-hover-background-color ?= #f2f2f2; 29 | 30 | .flat { 31 | import $flat_path_to_dgrid + '/css/skins/skin'; 32 | 33 | .dgrid-cell-padding { 34 | padding: $dgrid-cell-padding; 35 | } 36 | .dgrid-header .dgrid-cell { 37 | border-bottom-width: $dgrid-header-cell-border-bottom-width; 38 | } 39 | $dgrid-header-cell-border-bottom-width .dgrid-cell { 40 | if (!$dgrid-cell-has-vertical-border) { 41 | border-left: 0; 42 | border-right: 0; 43 | } 44 | } 45 | .dgrid-selected { 46 | border: $dgrid-selected-border; 47 | } 48 | } 49 | -------------------------------------------------------------------------------- /css/flat/dijit/Calendar.css: -------------------------------------------------------------------------------- 1 | /* Calendar 2 | * 3 | * Styling Calendar mainly includes: 4 | * 5 | * 1. Calendar container 6 | * .dijitCalendar - main container 7 | * .dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active 8 | * 9 | * 2. Month 10 | * .dijitCalendarMonthContainer 11 | * .dijitCalendarMonthLabel 12 | * .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month 13 | * .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active 14 | * 15 | * 3. Date 16 | * .dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S 17 | * .dijitCalendarDateTemplate - date label wrapper 18 | * .dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month 19 | * .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date 20 | * .dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date 21 | * .dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active 22 | * 23 | * 4. Year 24 | * .dijitCalendarYearContainer 25 | * .dijitCalendarYearLabel 26 | * .dijitCalendarPreviousYear /.dijitCalendarNextYear 27 | * .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active 28 | * 29 | * 5. Dropdown Month Menu 30 | * .dijitCalendarMonthMenu - menu container 31 | * .dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item 32 | * .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state 33 | */ 34 | .flat .dijitCalendar { 35 | background-color: #fff; 36 | text-align: center; 37 | padding: 4px; 38 | border: 1px solid #9e9e9e; 39 | border-collapse: separate; 40 | border-radius: 3px; 41 | -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); 42 | box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); 43 | } 44 | .flat .dijitCalendarMonthContainer th { 45 | text-align: center; 46 | line-height: 20px; 47 | vertical-align: middle; 48 | margin: 4px 0; 49 | } 50 | .flat .dijitCalendarIncrementControl { 51 | font-family: "flat-icon"; 52 | speak: none; 53 | font-style: normal; 54 | font-weight: normal; 55 | font-variant: normal; 56 | text-transform: none; 57 | line-height: 1; 58 | font-size: 16px; 59 | -webkit-font-smoothing: antialiased; 60 | -moz-osx-font-smoothing: grayscale; 61 | font-size: 24px; 62 | border: 1px solid transparent; 63 | padding: 4px; 64 | } 65 | .flat .dijitCalendarDecrease:before { 66 | content: "\f000"; 67 | } 68 | .flat .dijitCalendarIncrease:before { 69 | content: "\f001"; 70 | } 71 | .flat .dijitCalendarArrowHover .dijitCalendarIncrementControl, 72 | .flat .dijitCalendarArrow:hover .dijitCalendarIncrementControl, 73 | .flat .dijitCalendarNextYearHover, 74 | .flat .dijitCalendarNextYear:hover, 75 | .flat .dijitCalendarPreviousYearHover, 76 | .flat .dijitCalendarPreviousYear:hover { 77 | border-style: solid; 78 | border-width: 1px; 79 | border-color: #9e9e9e; 80 | padding: 4px; 81 | border-radius: 3px; 82 | line-height: 20px; 83 | cursor: pointer; 84 | -webkit-transition: all 0.05s linear; 85 | -moz-transition: all 0.05s linear; 86 | -o-transition: all 0.05s linear; 87 | -ms-transition: all 0.05s linear; 88 | transition: all 0.05s linear; 89 | background: #fff; 90 | padding: 4px; 91 | } 92 | .flat .dijitCalendarArrowActive .dijitCalendarIncrementControl, 93 | .flat .dijitCalendarArrow:active .dijitCalendarIncrementControl, 94 | .flat .dijitCalendarNextYearActive, 95 | .flat .dijitCalendarNextYear:active, 96 | .flat .dijitCalendarPreviousYearActive, 97 | .flat .dijitCalendarPreviousYear:active { 98 | -webkit-transition: none; 99 | -moz-transition: none; 100 | -o-transition: none; 101 | -ms-transition: none; 102 | transition: none; 103 | outline: none; 104 | -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); 105 | box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); 106 | background: #e0e0e0; 107 | border-color: #b3b3b3; 108 | } 109 | .flat .dijitA11ySideArrow { 110 | /* text +/- labels instead of arrow icons, for high contrast mode */ 111 | display: none; 112 | } 113 | .flat .dijitCalendarContainer th, 114 | .flat .dijitCalendarContainer td { 115 | padding: 4px; 116 | } 117 | .flat .dijitCalendarDayLabelTemplate { 118 | text-align: center; 119 | border-bottom: #9e9e9e; 120 | } 121 | .flat .dijitCalendarDayLabel { 122 | font-weight: bold; 123 | text-align: center; 124 | } 125 | .flat .dijitCalendarDateTemplate { 126 | font-size: 0.9em; 127 | letter-spacing: 0.05em; 128 | text-align: center; 129 | } 130 | .flat .dijitCalendarDateTemplate .dijitCalendarDateLabel { 131 | text-decoration: none; 132 | display: block; 133 | padding: 2px 4px; 134 | border: 0 none; 135 | border-radius: 50%; 136 | } 137 | .flat .dijitCalendarPreviousMonth .dijitCalendarDateLabel, 138 | .flat .dijitCalendarNextMonth .dijitCalendarDateLabel { 139 | color: #c2c2c2; 140 | } 141 | .flat .dijitCalendarCurrentDate .dijitCalendarDateLabel { 142 | border-color: #2196f3; 143 | } 144 | .flat .dijitCalendarHoveredDate .dijitCalendarDateLabel, 145 | .flat .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel { 146 | background-color: #f2f2f2; 147 | } 148 | .flat .dijitCalendarActiveDate .dijitCalendarDateLabel, 149 | .flat .dijitCalendarEnabledDate:active .dijitCalendarDateLabel { 150 | background-color: #e6e6e6; 151 | } 152 | .flat .dijitCalendarSelectedDate .dijitCalendarDateLabel, 153 | .flat .dijitCalendarSelectedDate.dijitCalendarHoveredDate .dijitCalendarDateLabel { 154 | color: #fff; 155 | background-color: #2196f3; 156 | } 157 | .flat .dijitCalendarDisabledDate .dijitCalendarDateLabel { 158 | opacity: 0.65; 159 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; 160 | filter: alpha(opacity=65); 161 | } 162 | .flat .dijitCalendarYearContainer { 163 | vertical-align: middle; 164 | } 165 | .flat .dijitCalendarYearLabel { 166 | padding: 4px 0 0 0; 167 | margin: 0; 168 | font-size: 1.15em; 169 | } 170 | .flat .dijitCalendarYearLabel span { 171 | vertical-align: middle; 172 | } 173 | .flat .dijitCalendarSelectedYear, 174 | .flat .dijitCalendarNextYear, 175 | .flat .dijitCalendarPreviousYear { 176 | padding: 4px; 177 | } 178 | .flat .dijitCalendarSelectedYear { 179 | color: #2196f3; 180 | } 181 | .flat .dijitCalendarNextYear, 182 | .flat .dijitCalendarPreviousYear { 183 | color: #2196f3; 184 | font-size: 0.9em; 185 | line-height: 20px; 186 | border: 1px solid transparent; 187 | } 188 | .flat .dijitCalendarSelectedYear { 189 | padding: 0 4px; 190 | } 191 | .flat .dijitCalendar .dijitDropDownButton { 192 | margin: 0; 193 | } 194 | .flat .dijitCalendarMonthMenu { 195 | padding: 8px 0; 196 | } 197 | .flat .dijitCalendarMonthMenu .dijitCalendarMonthLabel { 198 | padding: 4px; 199 | } 200 | .flat .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover { 201 | color: #fff; 202 | background-color: #2196f3; 203 | } 204 | -------------------------------------------------------------------------------- /css/flat/dijit/Calendar.styl: -------------------------------------------------------------------------------- 1 | /* Calendar 2 | * 3 | * Styling Calendar mainly includes: 4 | * 5 | * 1. Calendar container 6 | * .dijitCalendar - main container 7 | * .dijitCalendarHover / .dijitCalendarActive - states e.g. hover,active 8 | * 9 | * 2. Month 10 | * .dijitCalendarMonthContainer 11 | * .dijitCalendarMonthLabel 12 | * .dijitCalendarDecrease / .dijitCalendarDecrease - icons for switching to previous/next month 13 | * .dijitCalendarArrowActive .dijitCalendarDecrease - states e.g. hover,active 14 | * 15 | * 3. Date 16 | * .dijitCalendarDayLabelTemplate - week day column header e.g. S M T W T F S 17 | * .dijitCalendarDateTemplate - date label wrapper 18 | * .dijitCalendarPreviousMonth .dijitCalendarDateLabel - special labels for previous or next month 19 | * .dijitCalendarSelectedDate .dijitCalendarDateLabel - styles for selected date 20 | * .dijitCalendarDisabledDate .dijitCalendarDateLabel - styles for disabled date 21 | * .dijitCalendarActiveDate .dijitCalendarDateLabel - states e.g. hover,active 22 | * 23 | * 4. Year 24 | * .dijitCalendarYearContainer 25 | * .dijitCalendarYearLabel 26 | * .dijitCalendarPreviousYear /.dijitCalendarNextYear 27 | * .dijitCalendarNextYearHover / .dijitCalendarPreviousYearHover - states e.g. hover,active 28 | * 29 | * 5. Dropdown Month Menu 30 | * .dijitCalendarMonthMenu - menu container 31 | * .dijitCalendarMonthMenu .dijitCalendarMonthLabel - month label in menu item 32 | * .dijitCalendarMonthMenu .dijitCalendarMonthLabelHover - menu item hover state 33 | */ 34 | 35 | @import 'dijit_variables'; 36 | 37 | .{$theme-name} { 38 | 39 | .dijitCalendar { 40 | background-color: $calendar-background-color; 41 | text-align:center; 42 | padding: $calendar-padding; 43 | border: 1px solid $calendar-border-color; 44 | border-collapse: separate; // in case user CSS has set border-collapse: collapse for tables 45 | border-radius: $calendar-border-radius; 46 | box-shadow: $calendar-box-shadow; 47 | } 48 | 49 | .dijitCalendarMonthContainer th { 50 | text-align:center; 51 | line-height: $line-height; 52 | vertical-align:middle; 53 | margin: $calendar-padding 0; 54 | } 55 | 56 | /* next/previous month arrows */ 57 | 58 | .dijitCalendarIncrementControl { 59 | _icon-core-style(); 60 | font-size: $calendar-icon-size; 61 | border: 1px solid transparent; 62 | padding: $padding; 63 | } 64 | 65 | .dijitCalendarDecrease { 66 | &:before { 67 | content: $calendar-icon-decrease; 68 | } 69 | } 70 | 71 | .dijitCalendarIncrease { 72 | &:before { 73 | content: $calendar-icon-increase; 74 | } 75 | } 76 | 77 | .dijitCalendarArrowHover .dijitCalendarIncrementControl, 78 | .dijitCalendarArrow:hover .dijitCalendarIncrementControl, 79 | .dijitCalendarNextYearHover, .dijitCalendarNextYear:hover, 80 | .dijitCalendarPreviousYearHover, .dijitCalendarPreviousYear:hover { 81 | button-style(); 82 | padding: $padding; 83 | } 84 | 85 | .dijitCalendarArrowActive .dijitCalendarIncrementControl, 86 | .dijitCalendarArrow:active .dijitCalendarIncrementControl, 87 | .dijitCalendarNextYearActive, .dijitCalendarNextYear:active 88 | .dijitCalendarPreviousYearActive, .dijitCalendarPreviousYear:active { 89 | button-active-style(); 90 | } 91 | 92 | .dijitA11ySideArrow { 93 | /* text +/- labels instead of arrow icons, for high contrast mode */ 94 | display: none; 95 | } 96 | 97 | .dijitCalendarContainer { 98 | th, td { 99 | padding: $calendar-day-cell-padding; 100 | } 101 | } 102 | 103 | /* day */ 104 | 105 | .dijitCalendarDayLabelTemplate { 106 | text-align: center; 107 | border-bottom: $border-color; 108 | } 109 | 110 | .dijitCalendarDayLabel { 111 | font-weight: $calendar-day-cell-font-weight; 112 | text-align: center; 113 | } 114 | 115 | /* date */ 116 | 117 | .dijitCalendarDateTemplate { 118 | font-size: $calendar-date-font-size; 119 | letter-spacing: .05em; 120 | text-align:center; 121 | 122 | .dijitCalendarDateLabel { 123 | text-decoration: none; 124 | display: block; 125 | padding: $calendar-date-cell-padding; 126 | border: 0 none; 127 | border-radius: $calendar-date-cell-border-radius; 128 | } 129 | } 130 | 131 | .dijitCalendarPreviousMonth, 132 | .dijitCalendarNextMonth { 133 | .dijitCalendarDateLabel { 134 | color: $calendar-date-cell-prev-next-month-text-color; 135 | } 136 | } 137 | 138 | .dijitCalendarCurrentDate { 139 | .dijitCalendarDateLabel { 140 | border-color: $calendar-date-cell-current-border-color; 141 | } 142 | } 143 | 144 | /* hover */ 145 | 146 | .dijitCalendarHoveredDate .dijitCalendarDateLabel, 147 | .dijitCalendarEnabledDate:hover .dijitCalendarDateLabel { 148 | background-color: $calendar-date-cell-hovered-background-color; 149 | } 150 | 151 | /* active */ 152 | 153 | .dijitCalendarActiveDate .dijitCalendarDateLabel, 154 | .dijitCalendarEnabledDate:active .dijitCalendarDateLabel { 155 | background-color: $calendar-date-cell-active-background-color; 156 | } 157 | 158 | /* selected */ 159 | 160 | .dijitCalendarSelectedDate, 161 | .dijitCalendarSelectedDate.dijitCalendarHoveredDate { 162 | .dijitCalendarDateLabel { 163 | color:$calendar-date-cell-selected-text-color; 164 | background-color: $calendar-date-cell-selected-background-color; 165 | } 166 | } 167 | 168 | /* disabled */ 169 | 170 | .dijitCalendarDisabledDate .dijitCalendarDateLabel { 171 | opacity: $disabled-opacity; 172 | } 173 | 174 | /* year */ 175 | 176 | .dijitCalendarYearContainer { 177 | vertical-align:middle; 178 | } 179 | 180 | .dijitCalendarYearLabel { 181 | padding: $calendar-year-cell-padding 0 0 0; 182 | margin: 0; 183 | font-size: $calendar-year-font-size; 184 | 185 | span { 186 | vertical-align:middle; 187 | } 188 | } 189 | 190 | .dijitCalendarSelectedYear, 191 | .dijitCalendarNextYear, 192 | .dijitCalendarPreviousYear { 193 | padding: $padding; 194 | } 195 | 196 | .dijitCalendarSelectedYear { 197 | color: $calendar-year-prev-current-year-text-color; 198 | } 199 | 200 | .dijitCalendarNextYear, 201 | .dijitCalendarPreviousYear { 202 | color: $calendar-year-prev-next-year-text-color; 203 | font-size: $calendar-year-prev-next-year-font-size; 204 | line-height: $line-height; 205 | border: 1px solid transparent; 206 | } 207 | 208 | .dijitCalendarSelectedYear { 209 | padding: 0 $calendar-year-cell-padding; 210 | } 211 | 212 | /* month dropdown */ 213 | 214 | .dijitCalendar .dijitDropDownButton { 215 | margin: 0; 216 | 217 | .dijitButtonNode { 218 | } 219 | } 220 | 221 | .dijitCalendarMonthMenu { 222 | padding: $calendar-month-dropdown-menu-padding 0; 223 | 224 | .dijitCalendarMonthLabel { 225 | padding: $calendar-month-dropdown-menu-item-padding; 226 | } 227 | 228 | .dijitCalendarMonthLabelHover { 229 | color: $calendar-month-dropdown-menu-item-hovered-text-color; 230 | background-color: $calendar-month-dropdown-menu-item-hovered-background-color; 231 | } 232 | } 233 | 234 | } -------------------------------------------------------------------------------- /css/flat/dijit/Calendar_rtl.css: -------------------------------------------------------------------------------- 1 | .flat .dijitCalendarRtl .dijitCalendarDecrease:before { 2 | content: "\f001"; 3 | } 4 | .flat .dijitCalendarRtl .dijitCalendarIncrease:before { 5 | content: "\f000"; 6 | } 7 | -------------------------------------------------------------------------------- /css/flat/dijit/Calendar_rtl.styl: -------------------------------------------------------------------------------- 1 | @import 'dijit_variables'; 2 | 3 | .{$theme-name} { 4 | 5 | .dijitCalendarRtl .dijitCalendarDecrease { 6 | &:before { 7 | content: $calendar-icon-increase; 8 | } 9 | } 10 | 11 | .dijitCalendarRtl .dijitCalendarIncrease { 12 | &:before { 13 | content: $calendar-icon-decrease; 14 | } 15 | } 16 | 17 | } -------------------------------------------------------------------------------- /css/flat/dijit/ColorPalette.css: -------------------------------------------------------------------------------- 1 | /* ColorPalette 2 | * 3 | * Styling of the ColorPalette consists of the following: 4 | * 5 | * 1. the whole color palette 6 | * .dijitColorPalette - for outline, border, and background color of the whole color palette 7 | * Note: outline does not work for IE 8 | * 9 | * 2. the color swatch 10 | * .dijitColorPalette .dijitPaletteImg 11 | * transparent (but clickable) node inside of each , overlaying the color swatch. 12 | * displays border around a color swatch 13 | * 14 | * 3. hovered swatch 15 | * .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg 16 | * the hovered state of the color swatch - adds border 17 | * 18 | * 4. active and selected swatch 19 | * .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg 20 | * .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg 21 | * adds border for active or selected state 22 | */ 23 | .flat .dijitColorPalette { 24 | border: 1px solid #9e9e9e; 25 | background-color: #fff; 26 | border-radius: 3px; 27 | /* swatch */ 28 | } 29 | .flat .dijitColorPalette .dijitPaletteTable { 30 | padding: 4px; 31 | } 32 | .flat .dijitColorPalette .dijitColorPaletteSwatch { 33 | height: 15px; 34 | width: 15px; 35 | border-radius: 2px; 36 | } 37 | .flat .dijitColorPalette .dijitPaletteImg { 38 | /* transparent (but clickable) node inside of each , overlaying the color swatch. 39 | * displays border around a color swatch 40 | * overrides border color in dijit.css */ 41 | border: 1px solid transparent; 42 | line-height: normal; 43 | } 44 | .flat .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg { 45 | border-color: #9e9e9e; 46 | -webkit-box-shadow: none; 47 | box-shadow: none; 48 | border-radius: 2px; 49 | -webkit-transform: scale(1.2); 50 | -moz-transform: scale(1.2); 51 | -o-transform: scale(1.2); 52 | -ms-transform: scale(1.2); 53 | transform: scale(1.2); 54 | } 55 | .flat .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg, 56 | .flat .dijitColorPalette .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg { 57 | border: 1px solid #2196f3; 58 | -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); 59 | box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); 60 | border-radius: 2px; 61 | -webkit-transform: scale(1.2); 62 | -moz-transform: scale(1.2); 63 | -o-transform: scale(1.2); 64 | -ms-transform: scale(1.2); 65 | transform: scale(1.2); 66 | } 67 | -------------------------------------------------------------------------------- /css/flat/dijit/ColorPalette.styl: -------------------------------------------------------------------------------- 1 | /* ColorPalette 2 | * 3 | * Styling of the ColorPalette consists of the following: 4 | * 5 | * 1. the whole color palette 6 | * .dijitColorPalette - for outline, border, and background color of the whole color palette 7 | * Note: outline does not work for IE 8 | * 9 | * 2. the color swatch 10 | * .dijitColorPalette .dijitPaletteImg 11 | * transparent (but clickable) node inside of each , overlaying the color swatch. 12 | * displays border around a color swatch 13 | * 14 | * 3. hovered swatch 15 | * .dijitColorPalette .dijitPaletteCell:hover .dijitPaletteImg 16 | * the hovered state of the color swatch - adds border 17 | * 18 | * 4. active and selected swatch 19 | * .dijitColorPalette .dijitPaletteCell:active .dijitPaletteImg 20 | * .dijitColorPalette .dijitPaletteCellSelected .dijitPaletteImg 21 | * adds border for active or selected state 22 | */ 23 | 24 | @import 'dijit_variables'; 25 | 26 | .{$theme-name} { 27 | 28 | .dijitColorPalette { 29 | border: 1px solid $colorpalette-border-color; 30 | background-color: $colorpalette-background-color; 31 | border-radius: $colorpalette-border-radius; 32 | 33 | .dijitPaletteTable { 34 | padding: $colorpalette-padding; 35 | } 36 | 37 | /* swatch */ 38 | 39 | .dijitColorPaletteSwatch { 40 | height: $colorpalette-swatch-height; 41 | width: $colorpalette-swatch-width; 42 | border-radius:$colorpalette-swatch-radius; 43 | } 44 | 45 | .dijitPaletteImg { 46 | /* transparent (but clickable) node inside of each , overlaying the color swatch. 47 | * displays border around a color swatch 48 | * overrides border color in dijit.css */ 49 | border: 1px solid $colorpalette-swatch-border-color; 50 | line-height: normal; 51 | } 52 | 53 | .dijitPaletteCell:hover .dijitPaletteImg { 54 | border-color: $colorpalette-swatch-hover-border-color; 55 | box-shadow: $colorpalette-swatch-hover-box-shadow; 56 | border-radius: $colorpalette-swatch-radius; 57 | transform: scale(1.2); 58 | } 59 | 60 | .dijitPaletteCell:active .dijitPaletteImg, 61 | .dijitPaletteTable .dijitPaletteCellSelected .dijitPaletteImg { 62 | border: 1px solid $colorpalette-swatch-selected-border-color; 63 | box-shadow: $colorpalette-swatch-selected-box-shadow; 64 | border-radius: $colorpalette-swatch-radius; 65 | transform: scale(1.2); 66 | } 67 | } 68 | 69 | } -------------------------------------------------------------------------------- /css/flat/dijit/ColorPalette_rtl.css: -------------------------------------------------------------------------------- 1 | .flat .dijitColorPaletteRtl .dijitColorPaletteUnder { 2 | left: auto; 3 | right: 0; 4 | } 5 | -------------------------------------------------------------------------------- /css/flat/dijit/ColorPalette_rtl.styl: -------------------------------------------------------------------------------- 1 | @import 'dijit_variables'; 2 | 3 | .{$theme-name} { 4 | 5 | .dijitColorPaletteRtl .dijitColorPaletteUnder { 6 | left: auto; 7 | right: 0; 8 | } 9 | 10 | } -------------------------------------------------------------------------------- /css/flat/dijit/Common.css: -------------------------------------------------------------------------------- 1 | .dijitPopup { 2 | border-radius: 3px; 3 | } 4 | /* ----- Drag and Drop ----- */ 5 | .dojoDndItem { 6 | border: 1px solid transparent; 7 | cursor: pointer; 8 | -webkit-transition-duration: 0.25s; 9 | -moz-transition-duration: 0.25s; 10 | -o-transition-duration: 0.25s; 11 | -ms-transition-duration: 0.25s; 12 | transition-duration: 0.25s; 13 | -webkit-transition-property: background-color, border-color, opacity; 14 | -moz-transition-property: background-color, border-color, opacity; 15 | -o-transition-property: background-color, border-color, opacity; 16 | -ms-transition-property: background-color, border-color, opacity; 17 | transition-property: background-color, border-color, opacity; 18 | } 19 | /* hover */ 20 | .dojoDndItemOver { 21 | background-color: #f5f5f5; 22 | border-radius: 3px; 23 | } 24 | .dojoDndItemAnchor { 25 | background-color: transparent; 26 | border: 1px dashed #2196f3; 27 | border-radius: 3px; 28 | } 29 | /* selected */ 30 | .dojoDndItemBefore { 31 | background: transparent; 32 | padding-top: 2px; 33 | border-top: 1px solid #2196f3; 34 | } 35 | .dojoDndItemAfter { 36 | background: transparent; 37 | padding-bottom: 2px; 38 | border-bottom: 1px solid #2196f3; 39 | } 40 | /* Avatar */ 41 | table.dojoDndAvatar { 42 | display: block; 43 | } 44 | .dojoDndAvatarHeader td { 45 | display: none; 46 | } 47 | .dojoDndAvatarHeader:before { 48 | font-family: "flat-icon"; 49 | speak: none; 50 | font-style: normal; 51 | font-weight: normal; 52 | font-variant: normal; 53 | text-transform: none; 54 | line-height: 1; 55 | font-size: 16px; 56 | -webkit-font-smoothing: antialiased; 57 | -moz-osx-font-smoothing: grayscale; 58 | display: table-cell; 59 | } 60 | /* cannot drop */ 61 | .dojoDndMove .dojoDndAvatarHeader:before { 62 | color: #dd2c00; 63 | content: "\f01c"; 64 | } 65 | .dojoDndCopy .dojoDndAvatarHeader:before { 66 | color: #dd2c00; 67 | content: "\f01c"; 68 | } 69 | /* can drop */ 70 | .dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader:before { 71 | color: #43a047; 72 | content: "\f008"; 73 | } 74 | .dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader:before { 75 | color: #43a047; 76 | content: "\f008"; 77 | } 78 | .dojoDndAvatarItem { 79 | border-radius: 3px; 80 | } 81 | .dojoDndAvatarItem td > * { 82 | padding: 4px 8px; 83 | list-style-type: none; 84 | background-color: #fff; 85 | -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); 86 | box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); 87 | } 88 | -------------------------------------------------------------------------------- /css/flat/dijit/Common.styl: -------------------------------------------------------------------------------- 1 | @import 'dijit_variables'; 2 | 3 | .dijitPopup { 4 | border-radius: $popup-border-radius; 5 | } 6 | 7 | /* ----- Drag and Drop ----- */ 8 | 9 | .dojoDndItem { 10 | border: 1px solid $dnd-item-border-color; 11 | cursor: pointer; 12 | transition-duration: .25s; 13 | transition-property: background-color, border-color, opacity; 14 | } 15 | 16 | /* hover */ 17 | 18 | .dojoDndItemOver { 19 | background-color: $dnd-hover-background-color; 20 | border-radius: $dnd-hover-border-radius; 21 | } 22 | 23 | .dojoDndItemAnchor { 24 | background-color: $dnd-anchor-background-color; 25 | border: 1px dashed $dnd-anchor-border-color; 26 | border-radius: $dnd-anchor-border-radius; 27 | } 28 | 29 | /* selected */ 30 | 31 | .dojoDndItemSelected { 32 | } 33 | 34 | .dojoDndItemBefore { 35 | background: transparent; 36 | padding-top: 2px; 37 | border-top: 1px solid $dnd-avatar-item-insert-indicator-color; 38 | } 39 | 40 | .dojoDndItemAfter { 41 | background: transparent; 42 | padding-bottom: 2px; 43 | border-bottom: 1px solid $dnd-avatar-item-insert-indicator-color; 44 | } 45 | 46 | /* Avatar */ 47 | 48 | table.dojoDndAvatar { 49 | display: block; 50 | } 51 | 52 | .dojoDndAvatarHeader { 53 | td { 54 | display: none; 55 | } 56 | &:before { 57 | _icon-core-style(); 58 | display: table-cell; 59 | } 60 | } 61 | 62 | /* cannot drop */ 63 | 64 | .dojoDndMove .dojoDndAvatarHeader { 65 | &:before { 66 | color: $error; 67 | content: $dnd-icon-no-drop; 68 | } 69 | } 70 | 71 | .dojoDndCopy .dojoDndAvatarHeader { 72 | &:before { 73 | color: $error; 74 | content: $dnd-icon-no-drop; 75 | } 76 | } 77 | 78 | /* can drop */ 79 | 80 | .dojoDndMove .dojoDndAvatarCanDrop .dojoDndAvatarHeader { 81 | &:before { 82 | color: $success; 83 | content: $dnd-icon-drop; 84 | } 85 | } 86 | 87 | .dojoDndCopy .dojoDndAvatarCanDrop .dojoDndAvatarHeader { 88 | &:before { 89 | color: $success; 90 | content: $dnd-icon-drop; 91 | } 92 | } 93 | 94 | .dojoDndAvatarItem { 95 | border-radius: $dnd-avatar-item-border-radius; 96 | td { 97 | > * { 98 | padding: $dnd-avatar-item-padding; 99 | list-style-type: none; 100 | background-color: $dnd-avatar-item-background-color; 101 | box-shadow: $dnd-avatar-item-box-shadow; 102 | } 103 | } 104 | } -------------------------------------------------------------------------------- /css/flat/dijit/Dialog.css: -------------------------------------------------------------------------------- 1 | /* Dialog 2 | * 3 | * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog 4 | * 5 | * Dialog: 6 | * 1. Dialog (default styling): 7 | * .dijitDialog - styles for dialog's bounding box 8 | * 9 | * 2. Dialog title 10 | * .dijitDialogTitleBar - styles for the title container at the top of dialog 11 | * .dijitDialogTitle - the text container in dialog title 12 | * 13 | * 3. Dialog content 14 | * .dijitDialogPaneContent - main container for content area and action bar 15 | * .dijitDialogPaneContentArea - styles for content container 16 | * 17 | * 4. Dialog action bar 18 | * .dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content 19 | * 20 | * 5. Dialog underlay 21 | * .dijitDialogUnderlay - div under the dialog which used for separate dialog and page content 22 | * 23 | * 24 | * Tooltip & TooltipDialog: 25 | * 1. tooltip content container: 26 | * .dijitTooltipContainer - tooltip content container 27 | * 28 | * 2. tooltip connector: 29 | * .dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right) 30 | */ 31 | .flat .dijitDialog { 32 | background-color: #fff; 33 | border: 1px solid #9e9e9e; 34 | border-radius: 3px; 35 | -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); 36 | box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); 37 | } 38 | .flat .dijitDialogPaneContent { 39 | background-color: #fff; 40 | border-radius: 0 0 3px 3px; 41 | padding: 8px; 42 | position: relative; 43 | } 44 | .flat .dijitDialogPaneActionBar { 45 | /* the bar at bottom with OK/Cancel buttons */ 46 | padding-top: 8px; 47 | text-align: right; 48 | position: relative; 49 | } 50 | .flat .dijitDialogPaneActionBar .dijitButton { 51 | float: none; 52 | } 53 | .flat .dijitTooltipDialog .dijitDialogPaneActionBar { 54 | border-radius: 0 0 3px 3px; 55 | margin: 8px 0 0; 56 | } 57 | .flat .dijitDialogTitleBar { 58 | /* outer container for the titlebar of the dialog */ 59 | line-height: 20px; 60 | border-bottom: 1px solid #e0e0e0; 61 | padding: 8px 12px; 62 | border-radius: 3px 3px 0 0; 63 | } 64 | .flat .dijitDialogTitle { 65 | /* typography and styling of the dialog title */ 66 | font-size: 1.1em; 67 | font-weight: bold; 68 | } 69 | .flat .dijitDialogCloseIcon { 70 | /* the default close icon for the dialog */ 71 | width: 20px; 72 | height: 20px; 73 | line-height: 20px; 74 | text-align: center; 75 | position: absolute; 76 | top: 8px; 77 | right: 12px; 78 | font-family: "flat-icon"; 79 | speak: none; 80 | font-style: normal; 81 | font-weight: normal; 82 | font-variant: normal; 83 | text-transform: none; 84 | line-height: 1; 85 | font-size: 16px; 86 | -webkit-font-smoothing: antialiased; 87 | -moz-osx-font-smoothing: grayscale; 88 | opacity: 0.65; 89 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; 90 | filter: alpha(opacity=65); 91 | } 92 | .flat .dijitDialogCloseIcon:before { 93 | content: "\f00e"; 94 | font-size: 20px; 95 | } 96 | .flat .dijitDialogCloseIcon .closeText { 97 | display: none; 98 | } 99 | .flat .dijitDialogCloseIconHover, 100 | .flat .dijitDialogCloseIconActive { 101 | opacity: 1; 102 | -ms-filter: none; 103 | filter: none; 104 | } 105 | .flat .dijitDialogUnderlay { 106 | background: #000; 107 | opacity: 0.65; 108 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; 109 | filter: alpha(opacity=65); 110 | } 111 | .flat .dijitTooltip, 112 | .flat .dijitTooltipDialog { 113 | /* the outermost dom node, holding the connector and container */ 114 | background: transparent; /* make the area on the sides of the arrow transparent */ 115 | } 116 | .flat .dijitTooltipContainer { 117 | background-color: #424242; 118 | opacity: 1; 119 | -ms-filter: none; 120 | filter: none; 121 | padding: 4px 8px; 122 | border-radius: 3px; 123 | } 124 | .flat .dijitTooltip .dijitTooltipContainer { 125 | color: #fff; 126 | border: 0 none; 127 | } 128 | .flat .dijitTooltipConnector { 129 | /* the arrow */ 130 | z-index: 2; 131 | width: auto; 132 | height: auto; 133 | opacity: 1; 134 | -ms-filter: none; 135 | filter: none; 136 | } 137 | .flat .dijitTooltipABRight .dijitTooltipConnector { 138 | /* above or below tooltip, but the arrow appears on the right, 139 | and the right edges of target and tooltip are aligned rather than the left */ 140 | left: auto !important; 141 | right: 8px; 142 | } 143 | .flat .dijitTooltipBelow { 144 | /* leave room for arrow above content */ 145 | padding-top: 4px; 146 | } 147 | .flat .dijitTooltipBelow .dijitTooltipConnector { 148 | /* the arrow piece for tooltips below an element */ 149 | top: 0; 150 | left: 8px; 151 | border-bottom: 4px solid #424242; 152 | border-left: 4px solid transparent; 153 | border-right: 4px solid transparent; 154 | border-top: 0; 155 | } 156 | .flat .dijitTooltipAbove { 157 | /* leave room for arrow below content */ 158 | padding-bottom: 4px; 159 | } 160 | .flat .dijitTooltipAbove .dijitTooltipConnector { 161 | /* the arrow piece for tooltips above an element */ 162 | bottom: 0; 163 | left: 8px; 164 | border-top: 4px solid #424242; 165 | border-left: 4px solid transparent; 166 | border-right: 4px solid transparent; 167 | border-bottom: 0; 168 | } 169 | .flat .dijitTooltipLeft { 170 | padding-right: 4px; 171 | } 172 | .flat .dijitTooltipLeft .dijitTooltipConnector { 173 | /* the arrow piece for tooltips to the left of an element, bottom borders aligned */ 174 | right: 0; 175 | border-left: 4px solid #424242; 176 | border-bottom: 4px solid transparent; 177 | border-top: 4px solid transparent; 178 | border-right: 0; 179 | } 180 | .flat .dijitTooltipRight { 181 | padding-left: 4px; 182 | } 183 | .flat .dijitTooltipRight .dijitTooltipConnector { 184 | /* the arrow piece for tooltips to the right of an element, bottom borders aligned */ 185 | left: 0; 186 | border-bottom: 4px solid transparent; 187 | border-top: 4px solid transparent; 188 | border-right: 4px solid #424242; 189 | } 190 | .flat .dijitTooltipDialog .dijitTooltipContainer { 191 | background: #fff; 192 | border: 1px solid #9e9e9e; 193 | border-radius: 3px; 194 | -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); 195 | box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); 196 | opacity: 1; 197 | -ms-filter: none; 198 | filter: none; 199 | } 200 | .flat .dijitTooltipDialog.dijitTooltipBelow { 201 | padding-top: 6px; 202 | } 203 | .flat .dijitTooltipDialog.dijitTooltipAbove { 204 | padding-bottom: 6px; 205 | } 206 | .flat .dijitTooltipDialog.dijitTooltipLeft { 207 | padding-right: 6px; 208 | } 209 | .flat .dijitTooltipDialog.dijitTooltipRight { 210 | padding-left: 6px; 211 | } 212 | .flat .dijitTooltipDialog .dijitTooltipConnector { 213 | height: 0; 214 | width: 0; 215 | position: absolute; 216 | z-index: 2; 217 | opacity: 1; 218 | -ms-filter: none; 219 | filter: none; 220 | } 221 | .flat .dijitTooltipDialog .dijitTooltipConnector:after { 222 | content: ""; 223 | height: 0; 224 | width: 0; 225 | position: absolute; 226 | } 227 | .flat .dijitTooltipDialog.dijitTooltipAbove .dijitTooltipConnector { 228 | border-color: #9e9e9e transparent transparent; 229 | border-width: 7px 7px 0; /* one extra pixel is added as the border of the arrows */ 230 | border-style: solid; 231 | } 232 | .flat .dijitTooltipDialog.dijitTooltipAbove .dijitTooltipConnector:after { 233 | border-color: #fff transparent transparent; 234 | border-width: 6px 6px 0; 235 | border-style: solid; 236 | left: -6px; 237 | top: -7px; 238 | } 239 | .flat .dijitTooltipDialog.dijitTooltipBelow .dijitTooltipConnector { 240 | border-color: transparent transparent #9e9e9e; 241 | border-width: 0 7px 7px; 242 | border-style: solid; 243 | } 244 | .flat .dijitTooltipDialog.dijitTooltipBelow .dijitTooltipConnector:after { 245 | border-color: transparent transparent #fff; 246 | border-width: 0 6px 6px; 247 | border-style: solid; 248 | left: -6px; 249 | bottom: -7px; 250 | } 251 | .flat .dijitTooltipDialog.dijitTooltipLeft .dijitTooltipConnector { 252 | border-color: transparent transparent transparent #9e9e9e; 253 | border-width: 7px 0 7px 7px; 254 | border-style: solid; 255 | } 256 | .flat .dijitTooltipDialog.dijitTooltipLeft .dijitTooltipConnector:after { 257 | border-color: transparent transparent transparent #fff; 258 | border-width: 6px 0 6px 6px; 259 | border-style: solid; 260 | top: -6px; 261 | left: -7px; 262 | } 263 | .flat .dijitTooltipDialog.dijitTooltipRight .dijitTooltipConnector { 264 | border-color: transparent #9e9e9e transparent transparent; 265 | border-width: 7px 7px 7px 0; 266 | border-style: solid; 267 | } 268 | .flat .dijitTooltipDialog.dijitTooltipRight .dijitTooltipConnector:after { 269 | border-color: transparent #fff transparent transparent; 270 | border-width: 6px 6px 6px 0; 271 | border-style: solid; 272 | top: -6px; 273 | right: -7px; 274 | } 275 | -------------------------------------------------------------------------------- /css/flat/dijit/Dialog.styl: -------------------------------------------------------------------------------- 1 | /* Dialog 2 | * 3 | * Styling Dialog includes two sections: Dialog and Tooltip & TooltipDialog 4 | * 5 | * Dialog: 6 | * 1. Dialog (default styling): 7 | * .dijitDialog - styles for dialog's bounding box 8 | * 9 | * 2. Dialog title 10 | * .dijitDialogTitleBar - styles for the title container at the top of dialog 11 | * .dijitDialogTitle - the text container in dialog title 12 | * 13 | * 3. Dialog content 14 | * .dijitDialogPaneContent - main container for content area and action bar 15 | * .dijitDialogPaneContentArea - styles for content container 16 | * 17 | * 4. Dialog action bar 18 | * .dijitDialogPaneActionBar - styles for action buttons lie at the bottom of dialog pane content 19 | * 20 | * 5. Dialog underlay 21 | * .dijitDialogUnderlay - div under the dialog which used for separate dialog and page content 22 | * 23 | * 24 | * Tooltip & TooltipDialog: 25 | * 1. tooltip content container: 26 | * .dijitTooltipContainer - tooltip content container 27 | * 28 | * 2. tooltip connector: 29 | * .dijitTooltipConnector - tooltip anchor includes 4 direction(up, down, left, right) 30 | */ 31 | 32 | @import 'dijit_variables'; 33 | 34 | .{$theme-name} { 35 | 36 | /* ----- Dialog ----- */ 37 | 38 | .dijitDialog { 39 | background-color: $dialog-background-color; 40 | border: 1px solid $dialog-border-color; 41 | border-radius: $dialog-border-radius; 42 | box-shadow: $dialog-box-shadow; 43 | } 44 | 45 | /* content pane */ 46 | 47 | .dijitDialogPaneContent { 48 | background-color: $dialog-content-bg-color; 49 | border-radius: 0 0 $dialog-border-radius $dialog-border-radius; 50 | padding: $dialog-padding; 51 | position: relative; 52 | } 53 | 54 | /* action bar */ 55 | 56 | .dijitDialogPaneActionBar { 57 | /* the bar at bottom with OK/Cancel buttons */ 58 | padding-top: $dialog-padding; 59 | text-align: right; 60 | position: relative; 61 | .dijitButton { 62 | float: none; 63 | } 64 | } 65 | 66 | /* action bar within a TooltipDialog */ 67 | .dijitTooltipDialog .dijitDialogPaneActionBar { 68 | border-radius: 0 0 $dialog-border-radius $dialog-border-radius 69 | margin: $dialog-padding 0 0; 70 | } 71 | 72 | /* title bar */ 73 | 74 | .dijitDialogTitleBar { 75 | /* outer container for the titlebar of the dialog */ 76 | line-height: $line-height; 77 | border-bottom: 1px solid $dialog-titlebar-border-color; 78 | padding: $dialog-padding $dialog-padding * 1.5; 79 | border-radius: $dialog-border-radius $dialog-border-radius 0 0; 80 | } 81 | 82 | .dijitDialogTitle { 83 | /* typography and styling of the dialog title */ 84 | font-size: $dialog-titlebar-font-size; 85 | font-weight: bold; 86 | } 87 | 88 | /* close button */ 89 | 90 | .dijitDialogCloseIcon { 91 | /* the default close icon for the dialog */ 92 | width: $dialog-close-icon-size; 93 | height: @width; 94 | line-height: @height; 95 | text-align: center; 96 | position: absolute; 97 | top: ($line-height + $dialog-padding * 2 - 20px ) * 0.5; 98 | right: $dialog-padding * 1.5; 99 | _icon-core-style(); 100 | opacity: 0.65; 101 | 102 | &:before { 103 | content: $dialog-close-icon; 104 | font-size: $dialog-close-icon-size; 105 | } 106 | 107 | .closeText { 108 | display: none; 109 | } 110 | } 111 | 112 | .dijitDialogCloseIconHover, 113 | .dijitDialogCloseIconActive { 114 | opacity: 1; 115 | } 116 | 117 | /* underlay */ 118 | 119 | .dijitDialogUnderlay { 120 | background: $dialog-underlay-color; 121 | opacity: $dialog-underlay-opacity; 122 | } 123 | 124 | /* ----- Tooltip and TooltipDialog ----- */ 125 | 126 | .dijitTooltip, 127 | .dijitTooltipDialog { 128 | /* the outermost dom node, holding the connector and container */ 129 | background: transparent; /* make the area on the sides of the arrow transparent */ 130 | } 131 | 132 | .dijitTooltipContainer { 133 | background-color: $tooltip-background-color; 134 | opacity: $tooltip-opacity; 135 | padding: $tooltip-padding $tooltip-padding * 2; 136 | border-radius: $tooltip-border-radius; 137 | } 138 | 139 | .dijitTooltip .dijitTooltipContainer { 140 | color: $tooltip-text-color; 141 | border: $tooltip-border; 142 | } 143 | 144 | .dijitTooltipConnector { 145 | /* the arrow */ 146 | z-index: 2; 147 | width:auto; 148 | height:auto; 149 | opacity: $tooltip-opacity; 150 | } 151 | 152 | .dijitTooltipABRight .dijitTooltipConnector { 153 | /* above or below tooltip, but the arrow appears on the right, 154 | and the right edges of target and tooltip are aligned rather than the left */ 155 | left: auto !important; 156 | right: $tooltip-padding * 2; 157 | } 158 | 159 | .dijitTooltipBelow { 160 | /* leave room for arrow above content */ 161 | padding-top: $tooltip-arrow-thickness; 162 | 163 | .dijitTooltipConnector { 164 | /* the arrow piece for tooltips below an element */ 165 | top: 0; 166 | left: $tooltip-padding * 2; 167 | border-bottom: $tooltip-arrow-thickness solid $tooltip-arrow-color; 168 | border-left: $tooltip-arrow-thickness solid transparent; 169 | border-right: $tooltip-arrow-thickness solid transparent; 170 | border-top: 0; 171 | } 172 | } 173 | 174 | .dijitTooltipAbove { 175 | /* leave room for arrow below content */ 176 | padding-bottom: $tooltip-arrow-thickness; 177 | 178 | .dijitTooltipConnector { 179 | /* the arrow piece for tooltips above an element */ 180 | bottom: 0; 181 | left: $tooltip-padding * 2; 182 | border-top: $tooltip-arrow-thickness solid $tooltip-arrow-color; 183 | border-left: $tooltip-arrow-thickness solid transparent; 184 | border-right: $tooltip-arrow-thickness solid transparent; 185 | border-bottom: 0; 186 | } 187 | } 188 | 189 | .dijitTooltipLeft { 190 | padding-right: $tooltip-arrow-thickness; 191 | 192 | .dijitTooltipConnector { 193 | /* the arrow piece for tooltips to the left of an element, bottom borders aligned */ 194 | right: 0; 195 | border-left: $tooltip-arrow-thickness solid $tooltip-arrow-color; 196 | border-bottom: $tooltip-arrow-thickness solid transparent; 197 | border-top: $tooltip-arrow-thickness solid transparent; 198 | border-right: 0; 199 | } 200 | } 201 | 202 | .dijitTooltipRight { 203 | padding-left: $tooltip-arrow-thickness; 204 | 205 | .dijitTooltipConnector { 206 | /* the arrow piece for tooltips to the right of an element, bottom borders aligned */ 207 | left: 0; 208 | border-bottom: $tooltip-arrow-thickness solid transparent; 209 | border-top: $tooltip-arrow-thickness solid transparent; 210 | border-right: $tooltip-arrow-thickness solid $tooltip-arrow-color; 211 | } 212 | } 213 | 214 | /* ----- TooltipDialog ----- */ 215 | 216 | .dijitTooltipDialog { 217 | .dijitTooltipContainer { 218 | background: $dialog-background-color; 219 | border: 1px solid $dialog-border-color; 220 | border-radius: $dialog-border-radius; 221 | box-shadow: $dialog-box-shadow; 222 | opacity:1; 223 | } 224 | &.dijitTooltipBelow { 225 | padding-top: $dialog-arrow-thickness; 226 | } 227 | &.dijitTooltipAbove { 228 | padding-bottom: $dialog-arrow-thickness; 229 | } 230 | &.dijitTooltipLeft { 231 | padding-right: $dialog-arrow-thickness; 232 | } 233 | &.dijitTooltipRight { 234 | padding-left: $dialog-arrow-thickness; 235 | } 236 | 237 | /* The tooltip dialog's connector itself serves as the "border" of the arrows,*/ 238 | /* then using :after to overlay the connector to "fill" the arrows with the same color as the container. */ 239 | .dijitTooltipConnector { 240 | height: 0; 241 | width: 0; 242 | position: absolute; 243 | z-index: 2; 244 | opacity: 1; 245 | 246 | &:after { 247 | content: ""; 248 | height: 0; 249 | width: 0; 250 | position: absolute; 251 | } 252 | } 253 | 254 | &.dijitTooltipAbove .dijitTooltipConnector { 255 | border-color: $dialog-arrow-border-color transparent transparent; 256 | border-width: $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px 0; /* one extra pixel is added as the border of the arrows */; 257 | border-style: solid; 258 | 259 | &:after { 260 | border-color: $dialog-arrow-background-color transparent transparent; 261 | border-width: $dialog-arrow-thickness $dialog-arrow-thickness 0; 262 | border-style: solid; 263 | left: - $dialog-arrow-thickness; 264 | top: - $dialog-arrow-thickness - 1px; 265 | } 266 | } 267 | &.dijitTooltipBelow .dijitTooltipConnector { 268 | border-color: transparent transparent $dialog-arrow-border-color; 269 | border-width: 0 $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px; 270 | border-style: solid; 271 | 272 | &:after { 273 | border-color: transparent transparent $dialog-arrow-background-color; 274 | border-width: 0 $dialog-arrow-thickness $dialog-arrow-thickness; 275 | border-style: solid; 276 | left: - $dialog-arrow-thickness; 277 | bottom: - $dialog-arrow-thickness - 1px; 278 | } 279 | } 280 | &.dijitTooltipLeft .dijitTooltipConnector { 281 | border-color: transparent transparent transparent $dialog-arrow-border-color; 282 | border-width: $dialog-arrow-thickness + 1px 0 $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px; 283 | border-style: solid; 284 | 285 | &:after { 286 | border-color: transparent transparent transparent $dialog-arrow-background-color; 287 | border-width: $dialog-arrow-thickness 0 $dialog-arrow-thickness $dialog-arrow-thickness; 288 | border-style: solid; 289 | top: - $dialog-arrow-thickness; 290 | left: - $dialog-arrow-thickness - 1px; 291 | } 292 | } 293 | &.dijitTooltipRight .dijitTooltipConnector { 294 | border-color: transparent $dialog-arrow-border-color transparent transparent; 295 | border-width: $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px $dialog-arrow-thickness + 1px 0; 296 | border-style: solid; 297 | 298 | &:after { 299 | border-color: transparent $dialog-arrow-background-color transparent transparent; 300 | border-width: $dialog-arrow-thickness $dialog-arrow-thickness $dialog-arrow-thickness 0; 301 | border-style: solid; 302 | top: - $dialog-arrow-thickness; 303 | right: - $dialog-arrow-thickness - 1px; 304 | } 305 | } 306 | } 307 | 308 | } -------------------------------------------------------------------------------- /css/flat/dijit/Dialog_rtl.css: -------------------------------------------------------------------------------- 1 | .flat .dijitDialogRtl .dijitDialogCloseIcon { 2 | right: auto; 3 | left: 12px; 4 | } 5 | .flat .dijitDialogRtl .dijitDialogPaneActionBar, 6 | .flat .dijitTooltipDialogRtl .dijitDialogPaneActionBar { 7 | text-align: left; 8 | } 9 | -------------------------------------------------------------------------------- /css/flat/dijit/Dialog_rtl.styl: -------------------------------------------------------------------------------- 1 | @import 'dijit_variables'; 2 | 3 | .{$theme-name} { 4 | 5 | .dijitDialogRtl .dijitDialogCloseIcon { 6 | right: auto; 7 | left: $dialog-padding * 1.5; 8 | } 9 | 10 | .dijitDialogRtl, 11 | .dijitTooltipDialogRtl { 12 | .dijitDialogPaneActionBar { 13 | text-align: left; 14 | } 15 | } 16 | 17 | } -------------------------------------------------------------------------------- /css/flat/dijit/Editor.css: -------------------------------------------------------------------------------- 1 | /* Editor 2 | * 3 | * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer) 4 | * 5 | * 1. Editor iframe container (default styling): 6 | * .dijitEditorIFrameContainer - normal state styles: background-color, border, padding 7 | * 8 | * 2. hovered Editor iframe container (ie, mouse hover on editor) 9 | * .dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container 10 | * 11 | * 3. focused Editor iframe container (ie, mouse focus on the editor pane) 12 | * .dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused 13 | * 14 | * 3. disabled Editor iframe container 15 | * .dijitEditorDisabled - editor's inner iframe container disable status styles: background, border 16 | */ 17 | .flat .dijitEditor { 18 | background-color: #fff; 19 | border: 1px solid #9e9e9e; 20 | border-radius: 3px; 21 | } 22 | .flat .dijitEditor .dijitEditorIFrameContainer { 23 | border: 1px solid transparent; 24 | border-top: 1px solid #9e9e9e; 25 | padding: 4px 8px; 26 | -webkit-transition: border 0.2s linear 0s; 27 | -moz-transition: border 0.2s linear 0s; 28 | -o-transition: border 0.2s linear 0s; 29 | -ms-transition: border 0.2s linear 0s; 30 | transition: border 0.2s linear 0s; 31 | } 32 | .flat .dijitEditorHover .dijitEditorIFrameContainer, 33 | .flat .dijitEditorHover .dijitEditorIFrameContainer .dijitEditorIFrame { 34 | border: 1px solid #2196f3; 35 | } 36 | .flat .dijitEditorFocused .dijitEditorIFrameContainer { 37 | border: 1px solid #2196f3; 38 | } 39 | .flat .dijitEditorFocused .dijitEditorIFrameContainer .dijitEditorIFrame { 40 | border: 1px solid #2196f3; 41 | } 42 | .flat .dijitEditorDisabled { 43 | border: 1px solid #9e9e9e; 44 | opacity: 0.65; 45 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; 46 | filter: alpha(opacity=65); 47 | } 48 | .flat .dijitEditorDisabled .dijitEditorIFrame, 49 | .flat .dijitEditorDisabled .dijitEditorIFrameContainer, 50 | .flat .dijitEditorDisabled .dijitEditorIFrameContainer .dijitEditorIFrame { 51 | background-color: #f5f5f5; 52 | border: 1px solid transparent; 53 | } 54 | -------------------------------------------------------------------------------- /css/flat/dijit/Editor.styl: -------------------------------------------------------------------------------- 1 | /* Editor 2 | * 3 | * Styling Editor means styling the Editor inside iframe container (dijitEditorIFrameContainer) 4 | * 5 | * 1. Editor iframe container (default styling): 6 | * .dijitEditorIFrameContainer - normal state styles: background-color, border, padding 7 | * 8 | * 2. hovered Editor iframe container (ie, mouse hover on editor) 9 | * .dijitEditorHover .dijitEditorIFrameContainer/dijitEditorIFrame - styles when mouse hover on the container 10 | * 11 | * 3. focused Editor iframe container (ie, mouse focus on the editor pane) 12 | * .dijitEditorFocused .dijitEditorIFrameContainer/dijitEditorIFrame - styles when container focused 13 | * 14 | * 3. disabled Editor iframe container 15 | * .dijitEditorDisabled - editor's inner iframe container disable status styles: background, border 16 | */ 17 | 18 | @import 'dijit_variables'; 19 | 20 | .{$theme-name} { 21 | 22 | .dijitEditor { 23 | background-color: $editor-background-color; 24 | border: 1px solid $editor-border-color; 25 | border-radius: $editor-border-radius; 26 | 27 | .dijitEditorIFrameContainer { 28 | border: 1px solid $editor-iframe-border-color; 29 | border-top: 1px solid $editor-border-color; 30 | padding: $editor-iframe-padding; 31 | transition: border 0.2s linear 0s; 32 | } 33 | } 34 | 35 | /* Hover */ 36 | 37 | .dijitEditorHover { 38 | .dijitEditorIFrameContainer, 39 | .dijitEditorIFrameContainer .dijitEditorIFrame { 40 | border: 1px solid $editor-iframe-hover-border-color; 41 | } 42 | } 43 | 44 | /* Focused */ 45 | 46 | .dijitEditorFocused { 47 | .dijitEditorIFrameContainer { 48 | border: 1px solid $editor-iframe-focused-border-color; 49 | } 50 | .dijitEditorIFrameContainer .dijitEditorIFrame { 51 | border: 1px solid $editor-iframe-focused-border-color; 52 | } 53 | } 54 | 55 | /* Disabled */ 56 | 57 | .dijitEditorDisabled { 58 | border: 1px solid $editor-disabled-border-color; 59 | opacity: $disabled-opacity; 60 | 61 | .dijitEditorIFrame, 62 | .dijitEditorIFrameContainer, 63 | .dijitEditorIFrameContainer .dijitEditorIFrame { 64 | background-color: $editor-iframe-disabled-background-color; 65 | border: 1px solid $editor-iframe-disabled-border-color; 66 | } 67 | } 68 | 69 | } -------------------------------------------------------------------------------- /css/flat/dijit/Editor_rtl.styl: -------------------------------------------------------------------------------- 1 | @import 'dijit_variables'; 2 | 3 | .{$theme-name} { 4 | 5 | .dijitEditorRtl { 6 | } 7 | 8 | } -------------------------------------------------------------------------------- /css/flat/dijit/InlineEditBox.css: -------------------------------------------------------------------------------- 1 | /* InlineEditBox 2 | * 3 | * Styling InlineEditBox mainly includes: 4 | * 5 | * 1. Normal state 6 | * .dijitInlineEditBoxDisplayMode - for border 7 | * 8 | * 2. Hover state 9 | * .dijitInlineEditBoxDisplayModeHover - for border and background color 10 | */ 11 | .flat .dijitInlineEditBoxDisplayMode { 12 | border: 1px dashed transparent; 13 | padding: 4px 6px; 14 | } 15 | .flat .dijitInlineEditBoxDisplayModeHover { 16 | background-color: transparent; 17 | border: 1px dashed #2196f3; 18 | } 19 | .flat .dijitInlineEditBoxDisplayModeDisabled { 20 | opacity: 0.65; 21 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=65)"; 22 | filter: alpha(opacity=65); 23 | } 24 | -------------------------------------------------------------------------------- /css/flat/dijit/InlineEditBox.styl: -------------------------------------------------------------------------------- 1 | /* InlineEditBox 2 | * 3 | * Styling InlineEditBox mainly includes: 4 | * 5 | * 1. Normal state 6 | * .dijitInlineEditBoxDisplayMode - for border 7 | * 8 | * 2. Hover state 9 | * .dijitInlineEditBoxDisplayModeHover - for border and background color 10 | */ 11 | 12 | @import 'dijit_variables'; 13 | 14 | .{$theme-name} { 15 | 16 | .dijitInlineEditBoxDisplayMode { 17 | border: 1px dashed $inlineeditbox-border-color; 18 | padding: $inlineeditbox-padding; 19 | border-radius: $inlineeditbox-border-radius; 20 | } 21 | 22 | .dijitInlineEditBoxDisplayModeHover { 23 | background-color: $inlineeditbox-hover-background-color; 24 | border: 1px dashed $inlineeditbox-hover-border-color; 25 | } 26 | 27 | .dijitInlineEditBoxDisplayModeDisabled { 28 | opacity: $disabled-opacity; 29 | } 30 | 31 | } -------------------------------------------------------------------------------- /css/flat/dijit/Menu.css: -------------------------------------------------------------------------------- 1 | /* Menu 2 | 3 | There are three areas of styling for the Menu: 4 | 5 | 1. The menu 6 | There are three types of menus: 7 | i) Context Menu 8 | ii) Drop down Menu 9 | iii) Navigation Menu 10 | All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border 11 | .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect 12 | .dijitMenuTable - for padding - also affects Select widget 13 | 14 | 2. The menu bar 15 | .dijitMenuBar - for border, margins, padding, background-color of the menu bar 16 | .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) 17 | 18 | 3. Menu items - items in the menu. 19 | .dijitMenuItem - for color 20 | .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected 21 | .dijitMenuItemActive - for background-color of an active (mousedown) menu item 22 | td.dijitMenuItemIconCell - for padding around a menu item's icon 23 | td.dijitMenuItemLabel - for padding around a menu item's label 24 | .dijitMenuSeparatorTop - for border, top border, of the separator 25 | .dijitMenuSeparatorBottom - for bottom margin of the separator 26 | 27 | Styles specific to ComboBox and FilteringSelect widgets: 28 | .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu 29 | .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu 30 | 31 | */ 32 | .flat .dijitMenu { 33 | background: #fff; 34 | border: 1px solid #9e9e9e; 35 | border-radius: 3px; 36 | margin: 0; 37 | -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); 38 | box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); 39 | } 40 | .flat .dijitMenuTable, 41 | .flat .dijitComboBoxMenu { 42 | padding: 8px 0; 43 | } 44 | .flat .dijitComboBoxMenu { 45 | margin-left: 0; 46 | background-image: none; 47 | } 48 | .flat .dijitMenuTable { 49 | /* this prevents jiggling upon hover of a menu item */ 50 | border-collapse: separate; 51 | border-spacing: 0 0; 52 | } 53 | .flat .dijitMenuItem, 54 | .flat .dijitMenuItem td { 55 | line-height: 20px; 56 | padding: 8px; 57 | white-space: nowrap; 58 | } 59 | .flat .dijitMenuItemHover td, 60 | .flat .dijitMenuItemHover { 61 | color: #fff; 62 | background-color: #2196f3; 63 | } 64 | .flat .dijitMenuItemActive td, 65 | .flat .dijitMenuItemActive { 66 | color: #fff; 67 | background-color: #2196f3; 68 | } 69 | .flat .dijitMenuItemSelected td, 70 | .flat .dijitMenuItemSelected { 71 | color: #fff; 72 | background-color: #2196f3; 73 | } 74 | .flat .dijitMenuItemDisabled { 75 | color: #9e9e9e; 76 | } 77 | .flat .dijitMenuItemDisabled.dijitMenuItemSelected td, 78 | .flat .dijitMenuItemDisabled.dijitMenuItemSelected { 79 | color: #f2f2f2; 80 | background: #6fbbf7; 81 | } 82 | .flat .dijitMenuSeparatorTop { 83 | height: auto; 84 | margin-top: 1px; /* prevents spacing above/below separator */ 85 | border-bottom: 1px solid #9e9e9e; 86 | } 87 | .flat .dijitMenuSeparatorBottom { 88 | height: auto; 89 | margin-bottom: 1px; 90 | border-top: 1px solid transparent; 91 | } 92 | .flat td.dijitMenuItemIconCell { 93 | padding: 4px; 94 | margin: 0 0 0 4px; 95 | text-align: center; 96 | } 97 | .flat .dijitMenuExpand { 98 | font-family: "flat-icon"; 99 | speak: none; 100 | font-style: normal; 101 | font-weight: normal; 102 | font-variant: normal; 103 | text-transform: none; 104 | line-height: 1; 105 | font-size: 16px; 106 | -webkit-font-smoothing: antialiased; 107 | -moz-osx-font-smoothing: grayscale; 108 | } 109 | .flat .dijitMenuExpand:before { 110 | content: "\f001"; 111 | } 112 | .flat .dijitCheckedMenuItemIconChar { 113 | display: none; 114 | } 115 | .flat .dijitMenuPreviousButton, 116 | .flat .dijitMenuNextButton { 117 | font-style: italic; 118 | } 119 | .flat .dijitMenuBar { 120 | margin: 0; 121 | padding: 0; 122 | background-color: #f5f5f5; 123 | } 124 | .flat .dijitMenuBar .dijitMenuItem { 125 | padding: 8px 12px; 126 | margin: 0; 127 | } 128 | .flat .dijitMenuBar .dijitMenuItemHover { 129 | color: #fff; 130 | background-color: #2196f3; 131 | } 132 | .flat .dijitMenuBar .dijitMenuItemActive { 133 | color: #fff; 134 | background-color: #2196f3; 135 | } 136 | .flat .dijitMenuBar .dijitMenuItemSelected, 137 | .flat .dijitMenuBar .dijitMenuItemHover.dijitMenuItemSelected, 138 | .flat .dijitMenuBar .dijitMenuItemActive.dijitMenuItemSelected { 139 | color: #fff; 140 | background-color: #2196f3; 141 | } 142 | .flat .dijitMenuBar .dijitMenuItemDisabled.dijitMenuItemSelected { 143 | color: #f2f2f2; 144 | background: #6fbbf7; 145 | } 146 | .flat .dijitMenuPopup { 147 | border-top-left-radius: 0; 148 | border-top-right-radius: 0; 149 | } 150 | .flat .dijitMenuPopup .dijitMenu { 151 | border-top-left-radius: 0; 152 | border-top-right-radius: 0; 153 | } 154 | .flat .dijitMenuPopup .dijitMenuItem, 155 | .flat .dijitMenuPopup .dijitMenuItem td { 156 | padding: 8px; 157 | } 158 | -------------------------------------------------------------------------------- /css/flat/dijit/Menu.styl: -------------------------------------------------------------------------------- 1 | /* Menu 2 | 3 | There are three areas of styling for the Menu: 4 | 5 | 1. The menu 6 | There are three types of menus: 7 | i) Context Menu 8 | ii) Drop down Menu 9 | iii) Navigation Menu 10 | All three types of menus are affected by the .dijitMenu class in which you can set the background-color, padding and border 11 | .dijitMenu affects the drop down menu in TimeTextBox, Calendar, ComboBox and FilteringSelect 12 | .dijitMenuTable - for padding - also affects Select widget 13 | 14 | 2. The menu bar 15 | .dijitMenuBar - for border, margins, padding, background-color of the menu bar 16 | .dijitMenuBar .dijitMenuItem - for padding, text color of menu items in the menu bar (overrides .dijitMenuItem) 17 | 18 | 3. Menu items - items in the menu. 19 | .dijitMenuItem - for color 20 | .dijitMenuItemHover, .dijitMenuItemSelected - for background-color, border, text color, padding of a menu item or menubar item that has been hovered over or selected 21 | .dijitMenuItemActive - for background-color of an active (mousedown) menu item 22 | td.dijitMenuItemIconCell - for padding around a menu item's icon 23 | td.dijitMenuItemLabel - for padding around a menu item's label 24 | .dijitMenuSeparatorTop - for border, top border, of the separator 25 | .dijitMenuSeparatorBottom - for bottom margin of the separator 26 | 27 | Styles specific to ComboBox and FilteringSelect widgets: 28 | .dijitComboBoxMenu .dijitMenuItem - for padding and border of a menu item in a ComboBox or FilteringSelect widget's menu 29 | .dijitComboBoxMenu .dijitMenuItemSelected- for text color, background-color and border of a menu item in a ComboBox or FilteringSelect widget's menu 30 | 31 | */ 32 | 33 | @import 'dijit_variables'; 34 | 35 | .{$theme-name} { 36 | /* ----- Menu (Common) ----- */ 37 | .dijitMenu { 38 | background: $menu-background-color; 39 | border: 1px solid $menu-border-color; 40 | border-radius: $menu-border-radius; 41 | margin: 0; 42 | box-shadow: $popup-box-shadow; 43 | } 44 | 45 | .dijitMenuTable, 46 | .dijitComboBoxMenu { 47 | padding: $menu-padding 0; 48 | } 49 | 50 | .dijitComboBoxMenu { 51 | margin-left:0; 52 | background-image: none; 53 | } 54 | 55 | .dijitMenuTable { 56 | /* this prevents jiggling upon hover of a menu item */ 57 | border-collapse: separate; 58 | border-spacing: 0 0; 59 | } 60 | 61 | /* ---- MenuItem ---- */ 62 | .dijitMenuItem, 63 | .dijitMenuItem td { 64 | line-height: $line-height; 65 | padding: $menu-item-padding; 66 | white-space: nowrap; 67 | } 68 | 69 | // hover 70 | .dijitMenuItemHover td, 71 | .dijitMenuItemHover { 72 | color: $menu-item-hovered-text-color; 73 | background-color: $menu-item-hovered-background-color; 74 | } 75 | 76 | // active 77 | .dijitMenuItemActive td, 78 | .dijitMenuItemActive { 79 | color: $menu-item-active-text-color; 80 | background-color: $menu-item-active-background-color; 81 | } 82 | 83 | // selected 84 | .dijitMenuItemSelected td, 85 | .dijitMenuItemSelected { 86 | color: $menu-item-selected-text-color; 87 | background-color: $menu-item-selected-background-color; 88 | } 89 | 90 | // disabled 91 | .dijitMenuItemDisabled { 92 | color: $menu-item-disabled-text-color; 93 | } 94 | 95 | .dijitMenuItemDisabled.dijitMenuItemSelected td, 96 | .dijitMenuItemDisabled.dijitMenuItemSelected { 97 | color: $menu-item-disabled-hovered-text-color; 98 | background: $menu-item-disabled-hovered-background-color; 99 | } 100 | 101 | /* ---- MenuItemSeparator ---- */ 102 | .dijitMenuSeparatorTop { 103 | height: auto 104 | margin-top: 1px; /* prevents spacing above/below separator */ 105 | border-bottom: 1px solid $menu-item-separator-top-color; 106 | } 107 | 108 | .dijitMenuSeparatorBottom { 109 | height: auto; 110 | margin-bottom:1px; 111 | border-top: 1px solid $menu-item-separator-bottom-color; 112 | } 113 | 114 | /* ---- MenuItem icons ---- */ 115 | td.dijitMenuItemIconCell { 116 | padding: $menu-item-icon-padding; 117 | margin: 0 0 0 $menu-item-icon-margin; 118 | text-align: center; 119 | } 120 | 121 | // popup menu icon 122 | .dijitMenuExpand { 123 | _icon-core-style(); 124 | &:before { 125 | content: $menu-item-icon; 126 | } 127 | } 128 | 129 | // checked icon 130 | .dijitCheckedMenuItemIconChar { 131 | display: none; 132 | } 133 | 134 | .dijitMenuPreviousButton, .dijitMenuNextButton { 135 | font-style: italic; 136 | } 137 | 138 | /* ----- Menu Bar ----- */ 139 | .dijitMenuBar { 140 | margin: 0; 141 | padding: 0; 142 | background-color: $menubar-background-color; 143 | 144 | .dijitMenuItem { 145 | padding: $menubar-item-padding; 146 | margin: 0; 147 | } 148 | 149 | // hover 150 | .dijitMenuItemHover { 151 | color: $menubar-item-hover-color; 152 | background-color: $menubar-item-hover-background-color; 153 | } 154 | 155 | // active 156 | .dijitMenuItemActive { 157 | color: $menubar-item-active-color; 158 | background-color: $menubar-item-active-background-color; 159 | } 160 | 161 | // selected 162 | .dijitMenuItemSelected, 163 | .dijitMenuItemHover.dijitMenuItemSelected, 164 | .dijitMenuItemActive.dijitMenuItemSelected { 165 | color: $menubar-item-selected-text-color; 166 | background-color: $menubar-item-selected-background-color; 167 | } 168 | 169 | // disabled 170 | .dijitMenuItemDisabled.dijitMenuItemSelected, 171 | .dijitMenuItemDisabled.dijitMenuItemSelected { 172 | color: $menu-item-disabled-hovered-text-color; 173 | background: $menu-item-disabled-hovered-background-color; 174 | } 175 | } 176 | 177 | /* ---- MenuBar Dropdown ---- */ 178 | .dijitMenuPopup { 179 | border-top-left-radius: 0; 180 | border-top-right-radius: 0; 181 | 182 | .dijitMenu { 183 | border-top-left-radius: 0; 184 | border-top-right-radius: 0; 185 | } 186 | .dijitMenuItem, 187 | .dijitMenuItem td { 188 | padding: $menubar-popup-item-padding; 189 | } 190 | } 191 | } -------------------------------------------------------------------------------- /css/flat/dijit/Menu_rtl.css: -------------------------------------------------------------------------------- 1 | .flat .dijitMenuBarRtl { 2 | text-align: right; 3 | } 4 | .flat .dijitMenuItemRtl { 5 | text-align: right; 6 | } 7 | .flat .dijitMenuItemRtl .dijitMenuExpand:before { 8 | content: "\f000"; 9 | } 10 | -------------------------------------------------------------------------------- /css/flat/dijit/Menu_rtl.styl: -------------------------------------------------------------------------------- 1 | @import 'dijit_variables'; 2 | 3 | 4 | .{$theme-name} { 5 | 6 | .dijitMenuBarRtl { 7 | text-align: right; 8 | } 9 | 10 | .dijitMenuItemRtl { 11 | text-align: right; 12 | 13 | .dijitMenuExpand { 14 | &:before { 15 | content: $menu-item-icon-rtl; 16 | } 17 | } 18 | } 19 | 20 | } -------------------------------------------------------------------------------- /css/flat/dijit/ProgressBar.css: -------------------------------------------------------------------------------- 1 | /* ProgressBar 2 | * 3 | * Styling of the ProgressBar consists of the following: 4 | * 5 | * 1. the base progress bar 6 | * .dijitProgressBar - sets margins for the progress bar 7 | * 8 | * 2. the empty bar 9 | * .dijitProgressBarEmpty - sets background img and color for bar or parts of bar that are not finished yet 10 | * Also sets border color for whole bar 11 | * 12 | * 3. tile mode 13 | * .dijitProgressBarTile 14 | * inner container for finished portion when in 'tile' (image) mode 15 | * 16 | * 4. full bar mode 17 | * .dijitProgressBarFull 18 | * adds border to right side of the filled portion of bar 19 | * 20 | * 5. text for label of bar 21 | * .dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. 22 | * 23 | * 6. indeterminate mode 24 | * .dijitProgressBarIndeterminate .dijitProgressBarTile 25 | * sets animated gif for the progress bar in 'indeterminate' mode 26 | */ 27 | .flat .dijitProgressBar { 28 | background-color: #e0e0e0; 29 | border: 0 none; 30 | border-radius: 3px; 31 | } 32 | .flat .dijitProgressBarTile { 33 | background: url("images/progressBarStrips.png") repeat-x top; 34 | -webkit-animation: progress-bar-stripes 2s linear infinite; 35 | -moz-animation: progress-bar-stripes 2s linear infinite; 36 | -o-animation: progress-bar-stripes 2s linear infinite; 37 | -ms-animation: progress-bar-stripes 2s linear infinite; 38 | animation: progress-bar-stripes 2s linear infinite; 39 | } 40 | .flat .dijitProgressBarFull { 41 | background-color: #2196f3; 42 | -webkit-transition-property: width; 43 | -moz-transition-property: width; 44 | -o-transition-property: width; 45 | -ms-transition-property: width; 46 | transition-property: width; 47 | -webkit-transition-duration: 0.25s; 48 | -moz-transition-duration: 0.25s; 49 | -o-transition-duration: 0.25s; 50 | -ms-transition-duration: 0.25s; 51 | transition-duration: 0.25s; 52 | height: 100%; 53 | } 54 | .flat .dijitProgressBar.alt-primary .dijitProgressBarFull { 55 | background-color: #1e88e5; 56 | } 57 | .flat .dijitProgressBar.alt-success .dijitProgressBarFull { 58 | background-color: #43a047; 59 | } 60 | .flat .dijitProgressBar.alt-info .dijitProgressBarFull { 61 | background-color: #03a9f4; 62 | } 63 | .flat .dijitProgressBar.alt-warning .dijitProgressBarFull { 64 | background-color: #fb8c00; 65 | } 66 | .flat .dijitProgressBar.alt-danger .dijitProgressBarFull { 67 | background-color: #e53935; 68 | } 69 | .flat .dijitProgressBar.alt-inverse .dijitProgressBarFull { 70 | background-color: #616161; 71 | } 72 | .flat .dijitProgressBarLabel { 73 | margin-top: 0.2em; 74 | margin-bottom: 0.2em; 75 | color: #fff; 76 | font-size: 1em; 77 | text-shadow: 0.1em 0.1em 1px #424242; 78 | } 79 | @-moz-keyframes progress-bar-stripes { 80 | from { 81 | background-position: 75px 0; 82 | } 83 | to { 84 | background-position: 0 0; 85 | } 86 | } 87 | @-webkit-keyframes progress-bar-stripes { 88 | from { 89 | background-position: 75px 0; 90 | } 91 | to { 92 | background-position: 0 0; 93 | } 94 | } 95 | @-o-keyframes progress-bar-stripes { 96 | from { 97 | background-position: 75px 0; 98 | } 99 | to { 100 | background-position: 0 0; 101 | } 102 | } 103 | @keyframes progress-bar-stripes { 104 | from { 105 | background-position: 75px 0; 106 | } 107 | to { 108 | background-position: 0 0; 109 | } 110 | } 111 | -------------------------------------------------------------------------------- /css/flat/dijit/ProgressBar.styl: -------------------------------------------------------------------------------- 1 | /* ProgressBar 2 | * 3 | * Styling of the ProgressBar consists of the following: 4 | * 5 | * 1. the base progress bar 6 | * .dijitProgressBar - sets margins for the progress bar 7 | * 8 | * 2. the empty bar 9 | * .dijitProgressBarEmpty - sets background img and color for bar or parts of bar that are not finished yet 10 | * Also sets border color for whole bar 11 | * 12 | * 3. tile mode 13 | * .dijitProgressBarTile 14 | * inner container for finished portion when in 'tile' (image) mode 15 | * 16 | * 4. full bar mode 17 | * .dijitProgressBarFull 18 | * adds border to right side of the filled portion of bar 19 | * 20 | * 5. text for label of bar 21 | * .dijitProgressBarLabel - sets text color, which must contrast with both the "Empty" and "Full" parts. 22 | * 23 | * 6. indeterminate mode 24 | * .dijitProgressBarIndeterminate .dijitProgressBarTile 25 | * sets animated gif for the progress bar in 'indeterminate' mode 26 | */ 27 | 28 | @import 'dijit_variables'; 29 | 30 | .{$theme-name} { 31 | 32 | .dijitProgressBar { 33 | background-color: $progress-bar-empty-color; 34 | border: 0 none; 35 | border-radius: $progress-bar-border-radius; 36 | } 37 | 38 | .dijitProgressBarTile { 39 | background: url($progress-bar-strips-image-url) repeat-x top; 40 | animation: progress-bar-stripes 2s linear infinite; 41 | } 42 | 43 | .dijitProgressBarFull { 44 | _progress-bar-color-properties($progress-bar-color); 45 | transition-property: width; 46 | transition-duration: .25s; 47 | height: 100%; 48 | } 49 | 50 | // alternative colors 51 | for class in $progress-bar-alternative-colors { 52 | .dijitProgressBar.{class} .dijitProgressBarFull { 53 | _progress-bar-color-properties($progress-bar-alternative-colors[class]); 54 | } 55 | } 56 | 57 | .dijitProgressBarLabel { 58 | margin-top: 0.2em; 59 | margin-bottom: 0.2em; 60 | color: $progress-bar-text-color; 61 | font-size: $progress-bar-font-size; 62 | text-shadow: $progress-bar-text-shadow; 63 | } 64 | } 65 | 66 | // animation 67 | @keyframes progress-bar-stripes { 68 | from { background-position: 75px 0; } 69 | to { background-position: 0 0; } 70 | } -------------------------------------------------------------------------------- /css/flat/dijit/TimePicker.css: -------------------------------------------------------------------------------- 1 | /* Time Picker 2 | * 3 | * Styling the Time Picker consists of the following: 4 | * 5 | * 1. minor time values 6 | * .dijitTimePickerTick - set text color, size, background color of minor values 7 | * .dijitTimePickerTickHover - set hover style of minor time values 8 | * dijitTimePickerTickSelected - set selected style of minor time values 9 | * 10 | * 2. major time values - 1:00, 2:00, times on the hour 11 | * set text color, size, background color, left/right margins for "zoom" affect 12 | * .dijitTimePickerMarkerHover - to set hover style of major time values 13 | * .dijitTimePickerMarkerSelected - set selected style of major time values 14 | * 15 | * 3. up and down arrow buttons 16 | * .dijitTimePicker .dijitButtonNode - background-color, border 17 | * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state 18 | * 19 | * Other classes provide the fundamental structure of the TimePicker and should not be modified. 20 | */ 21 | .dijitTimePickerPopup { 22 | -webkit-box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); 23 | box-shadow: 0 7px 3px -4px rgba(0,0,0,0.3), 0 8px 8px rgba(0,0,0,0.2); 24 | height: 200px; 25 | } 26 | .dijitTimePicker { 27 | background-color: #fff; 28 | padding: 4px 0; 29 | border: 1px solid #9e9e9e; 30 | border-radius: 3px; 31 | } 32 | .dijitTimePickerItem { 33 | margin: 0; 34 | } 35 | .dijitTimePickerTick { 36 | /* minor value */ 37 | color: #9e9e9e; 38 | border: 0 none; 39 | } 40 | .dijitTimePickerMarker { 41 | /* major value - 1:00, 2:00, times on the hour */ 42 | background-color: transparent; 43 | white-space: nowrap; 44 | border: 0 none; 45 | } 46 | .dijitTimePickerTickHover, 47 | .dijitTimePickerMarkerHover { 48 | background: #f2f2f2; 49 | color: #424242; 50 | } 51 | .dijitTimePickerMarkerSelected, 52 | .dijitTimePickerTickSelected { 53 | background: #f2f2f2; 54 | color: #424242; 55 | } 56 | .dijitTimePickerTick .dijitTimePickerItemInner, 57 | .dijitTimePickerMarker .dijitTimePickerItemInner { 58 | padding: 8px; 59 | margin: 0; 60 | } 61 | -------------------------------------------------------------------------------- /css/flat/dijit/TimePicker.styl: -------------------------------------------------------------------------------- 1 | /* Time Picker 2 | * 3 | * Styling the Time Picker consists of the following: 4 | * 5 | * 1. minor time values 6 | * .dijitTimePickerTick - set text color, size, background color of minor values 7 | * .dijitTimePickerTickHover - set hover style of minor time values 8 | * dijitTimePickerTickSelected - set selected style of minor time values 9 | * 10 | * 2. major time values - 1:00, 2:00, times on the hour 11 | * set text color, size, background color, left/right margins for "zoom" affect 12 | * .dijitTimePickerMarkerHover - to set hover style of major time values 13 | * .dijitTimePickerMarkerSelected - set selected style of major time values 14 | * 15 | * 3. up and down arrow buttons 16 | * .dijitTimePicker .dijitButtonNode - background-color, border 17 | * .dijitTimePicker .dijitUpArrowHover, .dijitTimePicker .dijitDownArrowHover - set background-color for hover state 18 | * 19 | * Other classes provide the fundamental structure of the TimePicker and should not be modified. 20 | */ 21 | 22 | @import 'dijit_variables'; 23 | 24 | .dijitTimePickerPopup { 25 | box-shadow: $timepicker-box-shadow; 26 | height: 200px; 27 | } 28 | 29 | .dijitTimePicker { 30 | background-color: $timepicker-background-color; 31 | padding: $timepicker-padding; 32 | border: 1px solid $timepicker-border-color; 33 | border-radius: $timepicker-border-radius; 34 | } 35 | 36 | .dijitTimePickerItem { 37 | margin:0; 38 | } 39 | 40 | .dijitTimePickerTick { 41 | /* minor value */ 42 | color: $timepicker-tick-text-color; 43 | border: 0 none; 44 | } 45 | 46 | .dijitTimePickerMarker { 47 | /* major value - 1:00, 2:00, times on the hour */ 48 | background-color: $timepicker-marker-background-color; 49 | white-space: nowrap; 50 | border: 0 none; 51 | } 52 | 53 | .dijitTimePickerTickHover, 54 | .dijitTimePickerMarkerHover { 55 | background: $timepicker-item-hovered-background-color; 56 | color: $timepicker-item-hovered-text-color; 57 | } 58 | 59 | .dijitTimePickerMarkerSelected, 60 | .dijitTimePickerTickSelected { 61 | background: $timepicker-item-selected-background-color; 62 | color: $timepicker-item-selected-text-color; 63 | } 64 | 65 | .dijitTimePickerTick, 66 | .dijitTimePickerMarker { 67 | .dijitTimePickerItemInner { 68 | padding: $timepicker-item-padding; 69 | margin:0; 70 | } 71 | } -------------------------------------------------------------------------------- /css/flat/dijit/TitlePane.css: -------------------------------------------------------------------------------- 1 | /* TitlePane 2 | * 3 | * Styling TitlePane means styling the TitlePane title and its content container (dijitTitlePane) 4 | * 5 | * TitlePane title: 6 | * 1. TitlePane title (default styling): 7 | * .dijitTitlePaneTitle - TitlePane's title div style: background-color, border 8 | * 9 | * 2. hovered TitlePane title (ie, mouse hover on a title bar) 10 | * .dijitTitlePaneTitleHover - styles when mouse hover on the title div 11 | * 12 | * 3. active TitlePane title (ie, mouse down on a title bar) 13 | * .dijitTitlePaneTitleActive - styles when mouse down on the title div 14 | * 15 | * 16 | * TitlePane Content Container: 17 | * 1. outer/inner container: 18 | * .dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div 19 | */ 20 | .flat .dijitTitlePaneTitle { 21 | border-style: solid; 22 | border-width: 1px; 23 | border-color: #9e9e9e; 24 | padding: 4px; 25 | border-radius: 3px; 26 | line-height: 20px; 27 | cursor: pointer; 28 | -webkit-transition: all 0.05s linear; 29 | -moz-transition: all 0.05s linear; 30 | -o-transition: all 0.05s linear; 31 | -ms-transition: all 0.05s linear; 32 | transition: all 0.05s linear; 33 | background: #fff; 34 | border-radius: 3px 3px 0 0; 35 | } 36 | .flat .dijitTitlePaneTitleHover { 37 | -webkit-transition: all 0.1s; 38 | -moz-transition: all 0.1s; 39 | -o-transition: all 0.1s; 40 | -ms-transition: all 0.1s; 41 | transition: all 0.1s; 42 | background: #f2f2f2; 43 | border-color: #d9d9d9; 44 | } 45 | .flat .dijitTitlePaneTitleActive { 46 | -webkit-transition: none; 47 | -moz-transition: none; 48 | -o-transition: none; 49 | -ms-transition: none; 50 | transition: none; 51 | outline: none; 52 | -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); 53 | box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); 54 | background: #e0e0e0; 55 | border-color: #b3b3b3; 56 | } 57 | .flat .dijitTitlePane .dijitArrowNode { 58 | font-family: "flat-icon"; 59 | speak: none; 60 | font-style: normal; 61 | font-weight: normal; 62 | font-variant: normal; 63 | text-transform: none; 64 | line-height: 1; 65 | font-size: 16px; 66 | -webkit-font-smoothing: antialiased; 67 | -moz-osx-font-smoothing: grayscale; 68 | font-size: 18px; 69 | text-align: center; 70 | } 71 | .flat .dijitTitlePane .dijitArrowNode:before { 72 | content: "\f007"; 73 | } 74 | .flat .dijitTitlePane .dijitClosed { 75 | border-radius: 3px; 76 | } 77 | .flat .dijitTitlePane .dijitClosed .dijitArrowNode:before { 78 | content: "\f006"; 79 | } 80 | .flat .dijitTitlePaneContentOuter { 81 | background-color: #fff; 82 | border: 1px solid #9e9e9e; 83 | border-top: none; 84 | border-radius: 0 0 3px 3px; 85 | } 86 | .flat .dijitTitlePaneContentInner { 87 | padding: 8px; 88 | } 89 | .flat .dijitTitlePaneTextNode { 90 | margin-left: 8px; 91 | margin-right: 8px; 92 | vertical-align: text-top; 93 | } 94 | -------------------------------------------------------------------------------- /css/flat/dijit/TitlePane.styl: -------------------------------------------------------------------------------- 1 | /* TitlePane 2 | * 3 | * Styling TitlePane means styling the TitlePane title and its content container (dijitTitlePane) 4 | * 5 | * TitlePane title: 6 | * 1. TitlePane title (default styling): 7 | * .dijitTitlePaneTitle - TitlePane's title div style: background-color, border 8 | * 9 | * 2. hovered TitlePane title (ie, mouse hover on a title bar) 10 | * .dijitTitlePaneTitleHover - styles when mouse hover on the title div 11 | * 12 | * 3. active TitlePane title (ie, mouse down on a title bar) 13 | * .dijitTitlePaneTitleActive - styles when mouse down on the title div 14 | * 15 | * 16 | * TitlePane Content Container: 17 | * 1. outer/inner container: 18 | * .dijitTitlePaneContentOuter / dijitTitlePaneContentInner - styles for the content outer div 19 | */ 20 | 21 | @import 'dijit_variables'; 22 | 23 | .{$theme-name} { 24 | 25 | .dijitTitlePaneTitle { 26 | button-style(); 27 | if($titlepane-border-radius && $titlepane-border-radius >= 0) { 28 | border-radius: $titlepane-border-radius $titlepane-border-radius 0 0; 29 | } 30 | } 31 | 32 | .dijitTitlePaneTitleHover { 33 | button-hover-style(); 34 | } 35 | 36 | .dijitTitlePaneTitleActive { 37 | button-active-style(); 38 | } 39 | 40 | //.dijitTitlePaneTitleFocus { 41 | //} 42 | 43 | .dijitTitlePane { 44 | .dijitArrowNode { 45 | _icon-core-style(); 46 | font-size: $icon-expand-collapse-size; 47 | text-align: center; 48 | &:before { 49 | content: $icon-collapse; 50 | } 51 | } 52 | 53 | .dijitClosed { 54 | if($titlepane-has-border-radius) { 55 | border-radius: $titlepane-border-radius; 56 | } else { 57 | border-radius: 0; 58 | } 59 | .dijitArrowNode:before { 60 | content: $icon-expand; 61 | } 62 | } 63 | } 64 | 65 | .dijitTitlePaneContentOuter { 66 | background-color: $titlepane-content-background-color; 67 | border: 1px solid $titlepane-content-border-color; 68 | border-top: none; 69 | if($titlepane-border-radius && $titlepane-border-radius >= 0) { 70 | border-radius: 0 0 $titlepane-border-radius $titlepane-border-radius; 71 | } 72 | } 73 | 74 | .dijitTitlePaneContentInner { 75 | padding: $titlepane-content-padding; 76 | } 77 | 78 | .dijitTitlePaneTextNode { 79 | margin-left: $padding*2; 80 | margin-right: $padding*2; 81 | vertical-align:text-top; 82 | } 83 | 84 | } -------------------------------------------------------------------------------- /css/flat/dijit/TitlePane_rtl.css: -------------------------------------------------------------------------------- 1 | /* TitlePane */ 2 | .flat .dijitTitlePaneRtl .dijitTitlePaneTitle { 3 | text-align: right; 4 | } 5 | .flat .dijitTitlePaneRtl .dijitClosed .dijitArrowNode:before { 6 | content: "\f006"; 7 | } 8 | -------------------------------------------------------------------------------- /css/flat/dijit/TitlePane_rtl.styl: -------------------------------------------------------------------------------- 1 | /* TitlePane */ 2 | 3 | @import 'dijit_variables'; 4 | 5 | .{$theme-name} { 6 | 7 | .dijitTitlePaneRtl { 8 | .dijitTitlePaneTitle { 9 | text-align: right; 10 | } 11 | .dijitClosed { 12 | .dijitArrowNode:before { 13 | content: $icon-expand; 14 | } 15 | } 16 | } 17 | 18 | } -------------------------------------------------------------------------------- /css/flat/dijit/Toolbar.css: -------------------------------------------------------------------------------- 1 | /* Toolbar 2 | * 3 | * Styling Toolbar means styling the toolbar container and the widget inside toolbar (dijitToolbar) 4 | * 5 | * 1. toolbar (default styling): 6 | * .dijitToolbar - styles for outer container 7 | * 8 | * 2. widget inside toolbar 9 | * .dijitToolbar .dijitButtonNode - Button widget 10 | * .dijitComboButton - ComboButton widget 11 | * .dijitDropDownButton - DropDownButton widget 12 | * .dijitToggleButton - ToggleButton widget 13 | * 14 | * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside) 15 | * .dijitToolbar .dijitButtonNodeHover - styles for hovered Button widget 16 | * 17 | * 4. actived widget inside toolbar (ie, mouse down on the widget inside) 18 | * .dijitToolbar .dijitButtonNodeActive - mouse down on Button widget 19 | */ 20 | .flat .dijitToolbar { 21 | background-color: #f5f5f5; 22 | padding: 4px; 23 | zoom: 1; 24 | /* Override default button styles */ 25 | /* Hover */ 26 | /* 27 | .dijitComboButtonHover { 28 | .dijitButtonNode, 29 | .dijitDownArrowButton { 30 | } 31 | 32 | .dijitButtonNodeHover, 33 | .dijitDownArrowButtonHover { 34 | } 35 | } 36 | */ 37 | /* Active */ 38 | /* Toggle button checked status */ 39 | } 40 | .flat .dijitToolbar label { 41 | padding: 8px; 42 | } 43 | .flat .dijitToolbar .dijitToggleButton, 44 | .flat .dijitToolbar .dijitButton, 45 | .flat .dijitToolbar .dijitDropDownButton, 46 | .flat .dijitToolbar .dijitComboButton { 47 | margin-right: 4px; 48 | } 49 | .flat .dijitToolbar .dijitButton .dijitButtonNode, 50 | .flat .dijitToolbar .dijitDropDownButton .dijitButtonNode, 51 | .flat .dijitToolbar .dijitComboButton .dijitButtonNode, 52 | .flat .dijitToolbar .dijitToggleButton .dijitButtonNode, 53 | .flat .dijitToolbar .dijitComboBox .dijitButtonNode { 54 | border-color: transparent; 55 | padding: 4px; 56 | background-color: transparent; 57 | border-radius: 3px; 58 | -webkit-transition-property: background-color; 59 | -moz-transition-property: background-color; 60 | -o-transition-property: background-color; 61 | -ms-transition-property: background-color; 62 | transition-property: background-color; 63 | -webkit-transition-duration: 0.3s; 64 | -moz-transition-duration: 0.3s; 65 | -o-transition-duration: 0.3s; 66 | -ms-transition-duration: 0.3s; 67 | transition-duration: 0.3s; 68 | } 69 | .flat .dijitToolbar .dijitComboButton .dijitStretch { 70 | /* no rounded border on side adjacent to arrow */ 71 | border-radius: 3px 0 0 3px; 72 | } 73 | .flat .dijitToolbar .dijitComboButton .dijitArrowButton { 74 | /* no rounded border on side adjacent to button */ 75 | border-radius: 0 3px 3px 0; 76 | } 77 | .flat .dijitToolbar .dijitComboBox .dijitButtonNode { 78 | padding: 0 8px; 79 | } 80 | .flat .dijitToolbar .dijitComboBox .dijitInputInner { 81 | padding: 0; 82 | } 83 | .flat .dijitToolbar .dijitDropDownButton .dijitArrowButtonInner { 84 | margin-left: 4px; 85 | } 86 | .flat .dijitToolbar .dijitButtonHover .dijitButtonNode, 87 | .flat .dijitToolbar .dijitDropDownButtonHover .dijitButtonNode, 88 | .flat .dijitToolbar .dijitToggleButtonHover .dijitButtonNode, 89 | .flat .dijitToolbar .dijitComboButtonHover .dijitButtonNode { 90 | -webkit-transition: all 0.1s; 91 | -moz-transition: all 0.1s; 92 | -o-transition: all 0.1s; 93 | -ms-transition: all 0.1s; 94 | transition: all 0.1s; 95 | background: #f2f2f2; 96 | border-color: #d9d9d9; 97 | border: 1px solid #9e9e9e; 98 | } 99 | .flat .dijitToolbar .dijitButtonActive .dijitButtonNode, 100 | .flat .dijitToolbar .dijitDropDownButtonActive .dijitButtonNode, 101 | .flat .dijitToolbar .dijitToggleButtonActive .dijitButtonNode { 102 | -webkit-transition: none; 103 | -moz-transition: none; 104 | -o-transition: none; 105 | -ms-transition: none; 106 | transition: none; 107 | outline: none; 108 | -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); 109 | box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); 110 | background: #e0e0e0; 111 | border-color: #b3b3b3; 112 | border: 1px solid #9e9e9e; 113 | } 114 | .flat .dijitToolbar .dijitToggleButtonChecked .dijitButtonNode { 115 | -webkit-transition: none; 116 | -moz-transition: none; 117 | -o-transition: none; 118 | -ms-transition: none; 119 | transition: none; 120 | outline: none; 121 | -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); 122 | box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); 123 | background: #e0e0e0; 124 | border-color: #b3b3b3; 125 | border: 1px solid #9e9e9e; 126 | } 127 | .flat .dijitToolbarSeparator { 128 | width: 1px; 129 | height: 20px; 130 | background-color: #9e9e9e; 131 | padding: 0; 132 | margin: 0 4px; 133 | } 134 | .flat .dijitDisabled .dijitToolbar { 135 | background-color: #f5f5f5; 136 | border-bottom: 1px solid #9e9e9e; 137 | } 138 | -------------------------------------------------------------------------------- /css/flat/dijit/Toolbar.styl: -------------------------------------------------------------------------------- 1 | /* Toolbar 2 | * 3 | * Styling Toolbar means styling the toolbar container and the widget inside toolbar (dijitToolbar) 4 | * 5 | * 1. toolbar (default styling): 6 | * .dijitToolbar - styles for outer container 7 | * 8 | * 2. widget inside toolbar 9 | * .dijitToolbar .dijitButtonNode - Button widget 10 | * .dijitComboButton - ComboButton widget 11 | * .dijitDropDownButton - DropDownButton widget 12 | * .dijitToggleButton - ToggleButton widget 13 | * 14 | * 3. hovered widget inside toolbar (ie, mouse hover on the widget inside) 15 | * .dijitToolbar .dijitButtonNodeHover - styles for hovered Button widget 16 | * 17 | * 4. actived widget inside toolbar (ie, mouse down on the widget inside) 18 | * .dijitToolbar .dijitButtonNodeActive - mouse down on Button widget 19 | */ 20 | 21 | @import 'dijit_variables'; 22 | 23 | .{$theme-name} { 24 | 25 | .dijitToolbar { 26 | background-color: $toolbar-background-color; 27 | padding: $toolbar-padding; 28 | zoom: 1; 29 | 30 | label { 31 | padding: $toolbar-label-padding; 32 | } 33 | 34 | .dijitToggleButton, 35 | .dijitButton, 36 | .dijitDropDownButton, 37 | .dijitComboButton { 38 | margin-right: $toolbar-button-spacing; 39 | } 40 | 41 | /* Override default button styles */ 42 | 43 | .dijitButton .dijitButtonNode, 44 | .dijitDropDownButton .dijitButtonNode, 45 | .dijitComboButton .dijitButtonNode, 46 | .dijitToggleButton .dijitButtonNode, 47 | .dijitComboBox .dijitButtonNode { 48 | border-color: $toolbar-button-border-color; 49 | padding: $toolbar-button-padding; 50 | background-color: $toolbar-button-background-color; 51 | border-radius: $toolbar-button-border-radius; 52 | transition-property: background-color; 53 | transition-duration: .3s; 54 | } 55 | 56 | .dijitComboButton { 57 | .dijitStretch { 58 | /* no rounded border on side adjacent to arrow */ 59 | border-radius: $toolbar-button-border-radius 0 0 $toolbar-button-border-radius; 60 | } 61 | .dijitArrowButton { 62 | /* no rounded border on side adjacent to button */ 63 | border-radius: 0 $toolbar-button-border-radius $toolbar-button-border-radius 0; 64 | } 65 | } 66 | 67 | .dijitComboBox { 68 | //width: 10em; 69 | .dijitButtonNode { 70 | padding: 0 $padding*2; 71 | } 72 | .dijitInputInner { 73 | padding: 0; 74 | } 75 | } 76 | 77 | .dijitDropDownButton .dijitArrowButtonInner { 78 | margin-left: $padding; 79 | } 80 | 81 | /* Hover */ 82 | 83 | .dijitButtonHover .dijitButtonNode, 84 | .dijitDropDownButtonHover .dijitButtonNode, 85 | .dijitToggleButtonHover .dijitButtonNode, 86 | .dijitComboButtonHover .dijitButtonNode { 87 | button-hover-style(); 88 | border: 1px solid $toolbar-hover-border-color; 89 | } 90 | 91 | /* 92 | .dijitComboButtonHover { 93 | .dijitButtonNode, 94 | .dijitDownArrowButton { 95 | } 96 | 97 | .dijitButtonNodeHover, 98 | .dijitDownArrowButtonHover { 99 | } 100 | } 101 | */ 102 | 103 | /* Active */ 104 | 105 | .dijitButtonActive .dijitButtonNode, 106 | .dijitDropDownButtonActive .dijitButtonNode, 107 | .dijitToggleButtonActive .dijitButtonNode { 108 | button-active-style(); 109 | border: 1px solid $toolbar-active-border-color; 110 | } 111 | // .dijitComboButtonActive { 112 | // .dijitButtonNode, 113 | // .dijitDownArrowButton { 114 | // } 115 | // .dijitButtonNodeActive { 116 | // } 117 | // .dijitDownArrowButtonActive { 118 | // } 119 | // } 120 | 121 | /* Toggle button checked status */ 122 | 123 | .dijitToggleButtonChecked .dijitButtonNode { 124 | button-active-style(); 125 | border: 1px solid $toolbar-active-border-color; 126 | } 127 | } 128 | 129 | /* Separator */ 130 | 131 | .dijitToolbarSeparator { 132 | width: $toolbar-separator-width; 133 | height: $toolbar-separator-height; 134 | background-color: $toolbar-separator-color; 135 | padding: 0; 136 | margin: $toolbar-separator-margin; 137 | } 138 | 139 | /* Toolbar inside of disabled Editor */ 140 | .dijitDisabled .dijitToolbar { 141 | background-color: $toolbar-disabled-background-color; 142 | border-bottom: 1px solid $toolbar-disabled-border-bottom-color; 143 | } 144 | 145 | } -------------------------------------------------------------------------------- /css/flat/dijit/Toolbar_rtl.css: -------------------------------------------------------------------------------- 1 | .flat .dijitToolbar .dijitToggleButtonRtl, 2 | .flat .dijitToolbar .dijitButtonRtl, 3 | .flat .dijitToolbar .dijitDropDownButtonRtl, 4 | .flat .dijitToolbar .dijitComboButtonRtl { 5 | margin-left: 4px; 6 | margin-right: auto; 7 | } 8 | .flat .dijitToolbar .dijitDropDownButtonRtl .dijitArrowButtonInner { 9 | margin-left: auto; 10 | margin-right: 4px; 11 | } 12 | -------------------------------------------------------------------------------- /css/flat/dijit/Toolbar_rtl.styl: -------------------------------------------------------------------------------- 1 | @import 'dijit_variables'; 2 | 3 | .{$theme-name} { 4 | 5 | .dijitToolbar { 6 | .dijitToggleButtonRtl, 7 | .dijitButtonRtl, 8 | .dijitDropDownButtonRtl, 9 | .dijitComboButtonRtl { 10 | margin-left: $toolbar-button-spacing; 11 | margin-right: auto; 12 | } 13 | 14 | .dijitDropDownButtonRtl .dijitArrowButtonInner { 15 | margin-left: auto; 16 | margin-right: $padding; 17 | } 18 | } 19 | 20 | } -------------------------------------------------------------------------------- /css/flat/dijit/Tree.css: -------------------------------------------------------------------------------- 1 | /* Tree 2 | * 3 | * Styling Tree mostly means styling the TreeRow (dijitTreeRow) 4 | * There are 4 basic states to style: 5 | * 6 | * Tree Row: 7 | * 1. tree row (default styling): 8 | * .dijitTreeRow - styles for each row of the tree 9 | * 10 | * 2. hovered tree row (mouse hover on a tree row) 11 | * .dijitTreeRowHover - styles when mouse over on one row 12 | * 13 | * 3. active tree row (mouse down on a tree row) 14 | * .dijitTreeRowActive - styles when mouse down on one row 15 | * 16 | * 4. selected tree row 17 | * dijitTreeRowSelected - style when the row has been selected 18 | * 19 | * Tree Expando: 20 | * dijitTreeExpando - the expando at the left of the text of each tree row 21 | * 22 | */ 23 | .flat .dijitTreeIsRoot { 24 | background-color: transparent; 25 | } 26 | .flat .dijitTreeRow, 27 | .flat .dijitTreeNode .dojoDndItemBefore, 28 | .flat .dijitTreeNode .dojoDndItemAfter { 29 | padding: 8px 0; 30 | border: 0 transparent; 31 | line-height: 20px; 32 | -webkit-transition-property: background-color; 33 | -moz-transition-property: background-color; 34 | -o-transition-property: background-color; 35 | -ms-transition-property: background-color; 36 | transition-property: background-color; 37 | -webkit-transition-duration: 0.15s; 38 | -moz-transition-duration: 0.15s; 39 | -o-transition-duration: 0.15s; 40 | -ms-transition-duration: 0.15s; 41 | transition-duration: 0.15s; 42 | -webkit-transition-timing-function: ease-out; 43 | -moz-transition-timing-function: ease-out; 44 | -o-transition-timing-function: ease-out; 45 | -ms-transition-timing-function: ease-out; 46 | transition-timing-function: ease-out; 47 | } 48 | .flat .dijitTreeRowHover { 49 | background-color: #f2f2f2; 50 | border-color: transparent; 51 | -webkit-transition-duration: 0.15s; 52 | -moz-transition-duration: 0.15s; 53 | -o-transition-duration: 0.15s; 54 | -ms-transition-duration: 0.15s; 55 | transition-duration: 0.15s; 56 | } 57 | .flat .dijitTreeRowActive { 58 | background-color: #f2f2f2; 59 | border-color: transparent; 60 | } 61 | .flat .dijitTreeRowSelected, 62 | .flat .dijitTreeRowHover.dijitTreeRowSelected, 63 | .flat .dijitTreeRowActive.dijitTreeRowSelected { 64 | color: #fff; 65 | background-color: #2196f3; 66 | border-color: transparent; 67 | } 68 | .flat .dijitTreeRowSelected .dijitTreeExpando, 69 | .flat .dijitTreeRowHover.dijitTreeRowSelected .dijitTreeExpando, 70 | .flat .dijitTreeRowActive.dijitTreeRowSelected .dijitTreeExpando { 71 | color: #fff; 72 | } 73 | .flat .dijitTreeExpando { 74 | font-family: "flat-icon"; 75 | speak: none; 76 | font-style: normal; 77 | font-weight: normal; 78 | font-variant: normal; 79 | text-transform: none; 80 | line-height: 1; 81 | font-size: 16px; 82 | -webkit-font-smoothing: antialiased; 83 | -moz-osx-font-smoothing: grayscale; 84 | width: 16px; 85 | height: 16px; 86 | line-height: 16px; 87 | text-align: center; 88 | margin-left: 4px; 89 | margin-right: 4px; 90 | color: #2196f3; 91 | vertical-align: middle; 92 | } 93 | .flat .dijitTreeExpandoOpened:before { 94 | content: "\f012"; 95 | cursor: pointer; 96 | } 97 | .flat .dijitTreeExpandoClosed:before { 98 | content: "\f011"; 99 | } 100 | .flat .dijitTreeExpandoLoading { 101 | -webkit-animation: spinning 2s linear infinite; 102 | -moz-animation: spinning 2s linear infinite; 103 | -o-animation: spinning 2s linear infinite; 104 | -ms-animation: spinning 2s linear infinite; 105 | animation: spinning 2s linear infinite; 106 | } 107 | .flat .dijitTreeExpandoLoading:before { 108 | content: "\f01d"; 109 | } 110 | .dj_ie8 .dijitTreeExpandoLoading, 111 | .dj_ie9 .dijitTreeExpandoLoading { 112 | background: url("images/loadingAnimation.gif") no-repeat; 113 | } 114 | .dj_ie8 .dijitTreeExpandoLoading:before, 115 | .dj_ie9 .dijitTreeExpandoLoading:before { 116 | content: ""; 117 | } 118 | @-moz-keyframes spinning { 119 | from { 120 | -webkit-transform: rotate(0); 121 | -moz-transform: rotate(0); 122 | -o-transform: rotate(0); 123 | -ms-transform: rotate(0); 124 | transform: rotate(0); 125 | } 126 | to { 127 | -webkit-transform: rotate(-360deg); 128 | -moz-transform: rotate(-360deg); 129 | -o-transform: rotate(-360deg); 130 | -ms-transform: rotate(-360deg); 131 | transform: rotate(-360deg); 132 | } 133 | } 134 | @-webkit-keyframes spinning { 135 | from { 136 | -webkit-transform: rotate(0); 137 | -moz-transform: rotate(0); 138 | -o-transform: rotate(0); 139 | -ms-transform: rotate(0); 140 | transform: rotate(0); 141 | } 142 | to { 143 | -webkit-transform: rotate(-360deg); 144 | -moz-transform: rotate(-360deg); 145 | -o-transform: rotate(-360deg); 146 | -ms-transform: rotate(-360deg); 147 | transform: rotate(-360deg); 148 | } 149 | } 150 | @-o-keyframes spinning { 151 | from { 152 | -webkit-transform: rotate(0); 153 | -moz-transform: rotate(0); 154 | -o-transform: rotate(0); 155 | -ms-transform: rotate(0); 156 | transform: rotate(0); 157 | } 158 | to { 159 | -webkit-transform: rotate(-360deg); 160 | -moz-transform: rotate(-360deg); 161 | -o-transform: rotate(-360deg); 162 | -ms-transform: rotate(-360deg); 163 | transform: rotate(-360deg); 164 | } 165 | } 166 | @keyframes spinning { 167 | from { 168 | -webkit-transform: rotate(0); 169 | -moz-transform: rotate(0); 170 | -o-transform: rotate(0); 171 | -ms-transform: rotate(0); 172 | transform: rotate(0); 173 | } 174 | to { 175 | -webkit-transform: rotate(-360deg); 176 | -moz-transform: rotate(-360deg); 177 | -o-transform: rotate(-360deg); 178 | -ms-transform: rotate(-360deg); 179 | transform: rotate(-360deg); 180 | } 181 | } 182 | -------------------------------------------------------------------------------- /css/flat/dijit/Tree.styl: -------------------------------------------------------------------------------- 1 | /* Tree 2 | * 3 | * Styling Tree mostly means styling the TreeRow (dijitTreeRow) 4 | * There are 4 basic states to style: 5 | * 6 | * Tree Row: 7 | * 1. tree row (default styling): 8 | * .dijitTreeRow - styles for each row of the tree 9 | * 10 | * 2. hovered tree row (mouse hover on a tree row) 11 | * .dijitTreeRowHover - styles when mouse over on one row 12 | * 13 | * 3. active tree row (mouse down on a tree row) 14 | * .dijitTreeRowActive - styles when mouse down on one row 15 | * 16 | * 4. selected tree row 17 | * dijitTreeRowSelected - style when the row has been selected 18 | * 19 | * Tree Expando: 20 | * dijitTreeExpando - the expando at the left of the text of each tree row 21 | * 22 | */ 23 | 24 | @import 'dijit_variables'; 25 | 26 | .{$theme-name} { 27 | 28 | .dijitTreeIsRoot { 29 | background-color: $tree-background-color; 30 | } 31 | 32 | .dijitTreeRow, 33 | .dijitTreeNode .dojoDndItemBefore, 34 | .dijitTreeNode .dojoDndItemAfter { 35 | padding: $tree-row-padding; 36 | border: 0 $tree-row-border-color; 37 | line-height: $tree-row-line-height; 38 | transition-property: background-color; 39 | transition-duration: .15s; 40 | transition-timing-function: ease-out; 41 | } 42 | 43 | /* Hover */ 44 | 45 | .dijitTreeRowHover { 46 | background-color: $tree-row-hover-background-color; 47 | border-color: $tree-row-hover-border-color; 48 | transition-duration: .15s; 49 | } 50 | 51 | /* Active */ 52 | 53 | .dijitTreeRowActive { 54 | background-color:$tree-row-active-background-color; 55 | border-color: $tree-row-active-border-color; 56 | } 57 | 58 | /* Selected */ 59 | 60 | .dijitTreeRowSelected, 61 | .dijitTreeRowHover.dijitTreeRowSelected, 62 | .dijitTreeRowActive.dijitTreeRowSelected { 63 | color: $tree-row-selected-text-color; 64 | background-color: $tree-row-selected-background-color; 65 | border-color: $tree-row-selected-border-color; 66 | .dijitTreeExpando { 67 | color: $tree-expando-icon-selected-color; 68 | } 69 | } 70 | 71 | /* Focused */ 72 | 73 | /* 74 | .dijitTreeRowFocused { 75 | } 76 | */ 77 | 78 | /* expando (open/closed) icon */ 79 | 80 | .dijitTreeExpando { 81 | _icon-core-style(); 82 | width: $tree-expando-icon-width; 83 | height: $tree-expando-icon-height; 84 | line-height: @height; 85 | text-align: center; 86 | margin-left: $tree-expando-margin; 87 | margin-right: $tree-expando-margin; 88 | color: $tree-expando-icon-color; 89 | vertical-align: middle; 90 | } 91 | 92 | .dijitTreeExpandoOpened:before { 93 | content: "\f012"; 94 | cursor: pointer; 95 | } 96 | 97 | .dijitTreeExpandoClosed:before { 98 | content: "\f011"; 99 | } 100 | 101 | .dijitTreeExpandoLoading { 102 | animation: spinning 2s linear infinite; 103 | &:before { 104 | content: "\f01d"; 105 | 106 | } 107 | } 108 | } 109 | 110 | .dj_ie8 .dijitTreeExpandoLoading, 111 | .dj_ie9 .dijitTreeExpandoLoading { 112 | background:url('images/loadingAnimation.gif') no-repeat; 113 | 114 | &:before { 115 | content: ""; 116 | } 117 | } 118 | 119 | @keyframes spinning { 120 | from {transform: rotate(0);} 121 | to {transform: rotate(-360deg);} 122 | } -------------------------------------------------------------------------------- /css/flat/dijit/Tree_rtl.css: -------------------------------------------------------------------------------- 1 | .flat .dijitTreeRtl { 2 | text-align: right; 3 | } 4 | .flat .dijitTreeRtl .dijitTreeContainer { 5 | float: right; 6 | } 7 | .flat .dijitTreeRtl .dijitTreeExpandoClosed:before { 8 | content: "\e60b"; 9 | } 10 | -------------------------------------------------------------------------------- /css/flat/dijit/Tree_rtl.styl: -------------------------------------------------------------------------------- 1 | @import 'dijit_variables'; 2 | 3 | .{$theme-name} { 4 | 5 | .dijitTreeRtl { 6 | text-align: right; 7 | 8 | .dijitTreeContainer { 9 | float: right; 10 | } 11 | .dijitTreeExpandoClosed:before { 12 | content: "\e60b"; 13 | } 14 | } 15 | 16 | } -------------------------------------------------------------------------------- /css/flat/dijit/form/Button.styl: -------------------------------------------------------------------------------- 1 | /* Button | DropDownButton | ComboButton | ToggleButton 2 | * 3 | * Styling Buttons mainly includes: 4 | * 5 | * 1. Containers 6 | * .dijitButton 7 | * .dijitDropDownButton 8 | * .dijitComboButton 9 | * .dijitButtonNode - common button/arrow wrapper shared across all three button types 10 | * 11 | * 2. Button text 12 | * .dijitButtonText 13 | * 14 | * 3. Arrows - only for DropDownButton and ComboButton 15 | * There are total four directions arrows - down, left, right, up: 16 | * .dijitArrowButtonInner - down arrow by default 17 | * .dijitLeftArrowButton .dijitArrowButtonInner - left arrow 18 | * .dijitRightArrowButton .dijitArrowButtonInner - right arrow 19 | * .dijitUpArrowButton .dijitArrowButtonInner - up arrow 20 | * 21 | * 4. States - Hover, Active, Disabled, e.g. 22 | * .dijitButtonHover .dijitButtonNode 23 | * .dijitButtonActive .dijitButtonNode 24 | * .dijitButtonDisabled .dijitButtonNode 25 | * 26 | * .dijitDisabled .dijitArrowButtonInner - disabled arrow states 27 | */ 28 | 29 | @import 'dijit_form_variables'; 30 | 31 | .{$theme-name} { 32 | /* ----- Button ----- */ 33 | .dijitButtonText { 34 | padding: 0 $padding; 35 | text-align: center; 36 | } 37 | 38 | .dijitButton, 39 | .dijitDropDownButton, 40 | .dijitComboButton, 41 | .dijitToggleButton { 42 | .dijitButtonNode { 43 | button-style(); 44 | } 45 | } 46 | 47 | create-alternative-buttons($button-alternative-colors); 48 | 49 | // hover 50 | .dijitButtonHover, 51 | .dijitDropDownButtonHover, 52 | .dijitToggleButtonHover { 53 | .dijitButtonNode { 54 | button-hover-style(); 55 | } 56 | } 57 | .dijitComboButton { 58 | .dijitButtonNodeHover, 59 | .dijitDownArrowButtonHover { 60 | button-hover-style(); 61 | } 62 | } 63 | 64 | create-alternative-buttons-hover($button-alternative-colors); 65 | 66 | // active and checked 67 | .dijitButtonActive, 68 | .dijitDropDownButtonActive, 69 | .dijitToggleButtonActive, 70 | .dijitToggleButtonChecked { 71 | .dijitButtonNode { 72 | button-active-style(); 73 | } 74 | } 75 | .dijitComboButton { 76 | .dijitButtonNodeActive, 77 | .dijitDownArrowButtonActive { 78 | button-active-style(); 79 | } 80 | } 81 | 82 | create-alternative-buttons-active($button-alternative-colors); 83 | 84 | // disabled 85 | .dijitButtonDisabled, 86 | .dijitDropDownButtonDisabled, 87 | .dijitComboButtonDisabled, 88 | .dijitToggleButtonDisabled { 89 | outline: none; 90 | } 91 | 92 | .dijitButtonDisabled, 93 | .dijitDropDownButtonDisabled, 94 | .dijitComboButtonDisabled, 95 | .dijitToggleButtonDisabled { 96 | .dijitButtonNode { 97 | button-disabled-style(); 98 | } 99 | } 100 | 101 | create-alternative-buttons-disabled($button-alternative-colors); 102 | 103 | .dijitComboButtonDisabled .dijitArrowButton { 104 | border-left-width: 0; 105 | } 106 | 107 | /* ----- DropDownButton ----- */ 108 | .dijitDropDownButton .dijitButtonNode { 109 | padding-right: $padding * 2; 110 | } 111 | 112 | /* ----- ComboButton ----- */ 113 | table.dijitComboButton { 114 | border-collapse: separate; /* override dijit.css so that ComboBox rounded corners work */ 115 | .dijitStretch { 116 | border-radius: $border-radius 0 0 $border-radius; 117 | } 118 | .dijitArrowButton { 119 | padding: $padding; 120 | width: $button-arrow-width; 121 | border-radius: 0 $border-radius $border-radius 0; 122 | border-left-width: 0; 123 | } 124 | } 125 | 126 | /* ----- ToggleButton ----- */ 127 | .dijitToggleButton { 128 | .dijitCheckBoxIcon { 129 | display: none; 130 | } 131 | } 132 | 133 | .dijitToggleButtonChecked { 134 | .dijitIcon { 135 | display: inline-block; 136 | } 137 | } 138 | 139 | // arrow styles for down/up/left/right directions 140 | .dijitDropDownButton .dijitArrowButtonInner{ 141 | margin-left: $padding * 0.75; 142 | } 143 | 144 | .dijitDropDownButton .dijitArrowButtonInner, 145 | .dijitArrowButton { 146 | _icon-core-style(); 147 | } 148 | 149 | .dijitDropDownButton .dijitArrowButtonInner:before, 150 | .dijitArrowButton:before { 151 | content: $icon-drop-down; 152 | } 153 | 154 | .dijitLeftArrowButton:before { 155 | content: $icon-drop-left; 156 | } 157 | 158 | .dijitRightArrowButton:before { 159 | content: $icon-drop-right; 160 | } 161 | 162 | .dijitUpArrowButton:before { 163 | content: $icon-drop-up; 164 | } 165 | } -------------------------------------------------------------------------------- /css/flat/dijit/form/Button_rtl.css: -------------------------------------------------------------------------------- 1 | .flat table.dijitComboButtonRtl .dijitStretch { 2 | border-radius: 0 3px 3px 0; 3 | } 4 | .flat table.dijitComboButtonRtl .dijitArrowButton { 5 | border-radius: 3px 0 0 3px; 6 | border-left-width: 1px; 7 | border-right-width: 0; 8 | } 9 | .flat .dijitDropDownButtonRtl .dijitButtonNode { 10 | padding-left: 8px; 11 | } 12 | .flat .dijitDropDownButtonRtl .dijitArrowButtonInner { 13 | margin-left: 0; 14 | margin-right: 12px; 15 | } 16 | -------------------------------------------------------------------------------- /css/flat/dijit/form/Button_rtl.styl: -------------------------------------------------------------------------------- 1 | @import 'dijit_form_variables'; 2 | 3 | .{$theme-name} { 4 | 5 | /* ----- ComboButton ----- */ 6 | 7 | table.dijitComboButtonRtl .dijitStretch { 8 | border-radius: 0 $button-border-radius $button-border-radius 0; 9 | } 10 | table.dijitComboButtonRtl .dijitArrowButton { 11 | border-radius: $button-border-radius 0 0 $button-border-radius; 12 | border-left-width: 1px; 13 | border-right-width: 0; 14 | } 15 | 16 | /* ----- DropDownButton ----- */ 17 | 18 | .dijitDropDownButtonRtl { 19 | .dijitButtonNode { 20 | padding-left: $padding*2; 21 | } 22 | .dijitArrowButtonInner { 23 | margin-left: 0; 24 | margin-right: $padding * 3; 25 | } 26 | } 27 | } -------------------------------------------------------------------------------- /css/flat/dijit/form/Checkbox.css: -------------------------------------------------------------------------------- 1 | /* CheckBox 2 | * 3 | * Styling CheckBox mainly includes: 4 | * 5 | * 1. Containers 6 | * .dijitCheckBox 7 | * 8 | * 2. CheckBox within ToggleButton 9 | * .dijitCheckBoxIcon 10 | * 11 | * 3. States - Checked, Hover, Disabled. 12 | * .dijitCheckBoxChecked 13 | * .dijitCheckBoxHover 14 | * .dijitCheckBoxCheckedHover 15 | * .dijitCheckBoxDisabled 16 | * .dijitCheckBoxCheckedDisabled 17 | */ 18 | .flat .dijitCheckBox { 19 | background-color: #fff; 20 | border: 1px solid #9e9e9e; 21 | width: 16px; 22 | height: 16px; 23 | line-height: 1; 24 | padding: 0; 25 | border-radius: 2px; 26 | text-align: center; 27 | position: relative; 28 | overflow: visible; 29 | -webkit-transition: all 0.1s linear; 30 | -moz-transition: all 0.1s linear; 31 | -o-transition: all 0.1s linear; 32 | -ms-transition: all 0.1s linear; 33 | transition: all 0.1s linear; 34 | } 35 | .flat .dijitCheckBox input { 36 | position: absolute; 37 | top: 0; 38 | } 39 | .flat .dijitCheckBoxIcon:before, 40 | .flat .dijitCheckBoxChecked:before, 41 | .flat .dijitCheckBoxCheckedDisabled:before { 42 | font-family: "flat-icon"; 43 | speak: none; 44 | font-style: normal; 45 | font-weight: normal; 46 | font-variant: normal; 47 | text-transform: none; 48 | line-height: 1; 49 | font-size: 16px; 50 | -webkit-font-smoothing: antialiased; 51 | -moz-osx-font-smoothing: grayscale; 52 | content: "\f00c"; 53 | color: #fff; 54 | } 55 | .flat .dijitCheckBoxIcon { 56 | padding: 0; 57 | } 58 | .flat .dijitCheckBoxIcon:before { 59 | color: #2196f3; 60 | } 61 | .flat .alt-primary .dijitCheckBoxIcon:before { 62 | color: #fff; 63 | } 64 | .flat .alt-success .dijitCheckBoxIcon:before { 65 | color: #fff; 66 | } 67 | .flat .alt-info .dijitCheckBoxIcon:before { 68 | color: #fff; 69 | } 70 | .flat .alt-warning .dijitCheckBoxIcon:before { 71 | color: #fff; 72 | } 73 | .flat .alt-danger .dijitCheckBoxIcon:before { 74 | color: #fff; 75 | } 76 | .flat .alt-inverse .dijitCheckBoxIcon:before { 77 | color: #fff; 78 | } 79 | .flat .dijitCheckBoxChecked { 80 | background-color: #2196f3; 81 | border-color: #2196f3; 82 | } 83 | .flat .dijitCheckBoxHover { 84 | background-color: #fff; 85 | border: 1px solid #2196f3; 86 | } 87 | .flat .dijitCheckBoxCheckedHover { 88 | background-color: #42a6f5; 89 | border: 1px solid #2196f3; 90 | } 91 | .flat .dijitCheckBoxDisabled { 92 | color: #9e9e9e; 93 | background-color: #f5f5f5; 94 | border-color: #e3e3e3; 95 | } 96 | .flat .dijitCheckBoxCheckedDisabled { 97 | color: #a6a6a6; 98 | background-color: #6fbbf7; 99 | border-color: #6fbbf7; 100 | } 101 | .flat .dijitCheckedMenuItem .dijitCheckedMenuItemIcon { 102 | background-color: #fff; 103 | border: 1px solid #9e9e9e; 104 | width: 16px; 105 | height: 16px; 106 | line-height: 1; 107 | padding: 0; 108 | border-radius: 2px; 109 | text-align: center; 110 | position: relative; 111 | overflow: visible; 112 | -webkit-transition: all 0.1s linear; 113 | -moz-transition: all 0.1s linear; 114 | -o-transition: all 0.1s linear; 115 | -ms-transition: all 0.1s linear; 116 | transition: all 0.1s linear; 117 | } 118 | .flat .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon:before { 119 | font-family: "flat-icon"; 120 | speak: none; 121 | font-style: normal; 122 | font-weight: normal; 123 | font-variant: normal; 124 | text-transform: none; 125 | line-height: 1; 126 | font-size: 16px; 127 | -webkit-font-smoothing: antialiased; 128 | -moz-osx-font-smoothing: grayscale; 129 | content: "\f00c"; 130 | color: #2196f3; 131 | } 132 | -------------------------------------------------------------------------------- /css/flat/dijit/form/Checkbox.styl: -------------------------------------------------------------------------------- 1 | /* CheckBox 2 | * 3 | * Styling CheckBox mainly includes: 4 | * 5 | * 1. Containers 6 | * .dijitCheckBox 7 | * 8 | * 2. CheckBox within ToggleButton 9 | * .dijitCheckBoxIcon 10 | * 11 | * 3. States - Checked, Hover, Disabled. 12 | * .dijitCheckBoxChecked 13 | * .dijitCheckBoxHover 14 | * .dijitCheckBoxCheckedHover 15 | * .dijitCheckBoxDisabled 16 | * .dijitCheckBoxCheckedDisabled 17 | */ 18 | 19 | 20 | @import 'dijit_form_variables'; 21 | 22 | .{$theme-name} { 23 | 24 | .dijitCheckBox { 25 | background-color: $checkbox-background-color; 26 | border: 1px solid $checkbox-border-color; 27 | width: $checkbox-width; 28 | height: $checkbox-height; 29 | line-height: 1; 30 | padding: $checkbox-padding; 31 | border-radius: $checkbox-border-radius; 32 | text-align: center; 33 | position: relative; 34 | overflow: visible; 35 | transition: all 0.1s linear; 36 | input { 37 | position: absolute; 38 | top: 0; 39 | } 40 | } 41 | 42 | /* Icon */ 43 | 44 | .dijitCheckBoxIcon, 45 | .dijitCheckBoxChecked, 46 | .dijitCheckBoxCheckedDisabled { 47 | &:before { 48 | _icon-core-style(); 49 | content: $checkbox-icon; 50 | color: $checkbox-checked-icon-color; 51 | } 52 | } 53 | 54 | /* This is the checkbox icon within a widget, e.g. toggle button */ 55 | 56 | .dijitCheckBoxIcon { 57 | padding: $checkbox-icon-padding; 58 | 59 | &:before { 60 | color: $checkbox-icon-checked-icon-color; 61 | } 62 | } 63 | 64 | // checkbox icon within alternative buttons 65 | if($button-alternative-colors && length($button-alternative-colors) > 0) { 66 | for class in $button-alternative-colors { 67 | .{class} { 68 | .dijitCheckBoxIcon { 69 | &:before { 70 | color: $checkbox-checked-icon-color; 71 | } 72 | } 73 | } 74 | } 75 | } 76 | 77 | /* checked */ 78 | 79 | .dijitCheckBoxChecked { 80 | background-color: $checkbox-checked-background-color; 81 | border-color: $checkbox-checked-border-color; 82 | } 83 | 84 | /* hovered */ 85 | /* over unchecked */ 86 | 87 | .dijitCheckBoxHover { 88 | background-color: $checkbox-hover-unchecked-background-color; 89 | border: $checkbox-hover-unchecked-border-color; 90 | } 91 | 92 | /* over checked */ 93 | 94 | .dijitCheckBoxCheckedHover { 95 | background-color: $checkbox-hover-checked-background-color; 96 | border: $checkbox-hover-checked-border-color; 97 | } 98 | 99 | /* disabled */ 100 | 101 | .dijitCheckBoxDisabled { 102 | color: $checkbox-disabled-color; 103 | background-color: $checkbox-disabled-background-color; 104 | border-color: $checkbox-disabled-border-color; 105 | } 106 | 107 | .dijitCheckBoxCheckedDisabled { 108 | color: $checkbox-checked-disabled-color; 109 | background-color: $checkbox-checked-disabled-background-color; 110 | border-color: $checkbox-checked-disabled-border-color; 111 | } 112 | 113 | /* Checkbox within a menu item */ 114 | 115 | .dijitCheckedMenuItem .dijitCheckedMenuItemIcon { 116 | background-color: $checkbox-background-color; 117 | border: 1px solid $checkbox-border-color; 118 | width: $checkbox-width; 119 | height: $checkbox-height; 120 | line-height: 1; 121 | padding: $checkbox-padding; 122 | border-radius: $checkbox-border-radius; 123 | text-align: center; 124 | position: relative; 125 | overflow: visible; 126 | transition: all 0.1s linear; 127 | } 128 | 129 | .dijitCheckedMenuItemChecked .dijitCheckedMenuItemIcon { 130 | &:before { 131 | _icon-core-style(); 132 | content: $checkbox-icon; 133 | color: $theme-base; 134 | } 135 | } 136 | 137 | } -------------------------------------------------------------------------------- /css/flat/dijit/form/NumberSpinner.css: -------------------------------------------------------------------------------- 1 | /* NumberSpinner - namespace "dijitSpinner" 2 | * 3 | * Styling NumberSpinner mainly includes: 4 | * 5 | * 1. Arrows 6 | * Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner - for border, padding and position 7 | * Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton 8 | * Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image 9 | * 10 | * 2. Hover state 11 | * .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image 12 | * 13 | * 3. Active state 14 | * .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image 15 | * 16 | * 4. Focused state 17 | * .dijitSpinnerFocused .* - for background color|image 18 | * 19 | * 5. Disabled state 20 | * .dijitSpinnerDisabled .* - for background color|image 21 | */ 22 | .flat .dijitSpinner .dijitSpinnerButtonContainer { 23 | overflow: hidden; 24 | position: relative; 25 | width: auto; 26 | padding: 0; 27 | border: 1px solid #9e9e9e; 28 | } 29 | .flat .dijitSpinner .dijitSpinnerButtonInner { 30 | width: 30px; 31 | padding: 4px 0 !important; 32 | margin: 0; 33 | } 34 | .flat .dijitSpinner .dijitArrowButton { 35 | border-style: solid; 36 | border-width: 1px; 37 | border-color: #9e9e9e; 38 | padding: 4px; 39 | border-radius: 3px; 40 | line-height: 20px; 41 | cursor: pointer; 42 | -webkit-transition: all 0.05s linear; 43 | -moz-transition: all 0.05s linear; 44 | -o-transition: all 0.05s linear; 45 | -ms-transition: all 0.05s linear; 46 | transition: all 0.05s linear; 47 | background: #fff; 48 | border-radius: 0; 49 | border: 0; 50 | width: auto; 51 | overflow: hidden; 52 | left: 0; 53 | right: 0; 54 | padding: 0; 55 | } 56 | .flat .dijitSpinner .dijitArrowButton:before { 57 | content: none; 58 | } 59 | .flat .dijitSpinner .dijitUpArrowButton { 60 | border-top-right-radius: 2.000000000000001px; 61 | } 62 | .flat .dijitSpinner .dijitDownArrowButton { 63 | border-bottom-right-radius: 2.000000000000001px; 64 | } 65 | .flat .dijitSpinner .dijitUpArrowButtonHover, 66 | .flat .dijitSpinner .dijitDownArrowButtonHover { 67 | -webkit-transition: all 0.1s; 68 | -moz-transition: all 0.1s; 69 | -o-transition: all 0.1s; 70 | -ms-transition: all 0.1s; 71 | transition: all 0.1s; 72 | background: #f2f2f2; 73 | border-color: #d9d9d9; 74 | } 75 | .flat .dijitSpinner .dijitDownArrowButtonActive, 76 | .flat .dijitSpinner .dijitUpArrowButtonActive { 77 | -webkit-transition: none; 78 | -moz-transition: none; 79 | -o-transition: none; 80 | -ms-transition: none; 81 | transition: none; 82 | outline: none; 83 | -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); 84 | box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); 85 | background: #e0e0e0; 86 | border-color: #b3b3b3; 87 | } 88 | .flat .dijitSpinner .dijitArrowButtonInner { 89 | line-height: 16px; 90 | display: block; 91 | } 92 | .flat .dijitSpinner .dijitArrowButtonInner .dijitInputField { 93 | padding: 0; 94 | } 95 | .flat .dijitSpinner .dijitArrowButtonInner:before { 96 | content: "\f003"; 97 | } 98 | .flat .dijitSpinner .dijitDownArrowButton .dijitArrowButtonInner:before { 99 | content: "\f002"; 100 | } 101 | .flat .dijitSpinnerDisabled .dijitDownArrowButton, 102 | .flat .dijitSpinnerDisabled .dijitUpArrowButton { 103 | cursor: default; 104 | color: #9e9e9e; 105 | background-color: #f5f5f5; 106 | border-color: #e3e3e3; 107 | } 108 | .flat .alt-primary .dijitSpinnerButtonContainer { 109 | border-color: #1e88e5; 110 | } 111 | .flat .alt-success .dijitSpinnerButtonContainer { 112 | border-color: #43a047; 113 | } 114 | .flat .alt-info .dijitSpinnerButtonContainer { 115 | border-color: #03a9f4; 116 | } 117 | .flat .alt-warning .dijitSpinnerButtonContainer { 118 | border-color: #fb8c00; 119 | } 120 | .flat .alt-danger .dijitSpinnerButtonContainer { 121 | border-color: #e53935; 122 | } 123 | .flat .alt-inverse .dijitSpinnerButtonContainer { 124 | border-color: #616161; 125 | } 126 | -------------------------------------------------------------------------------- /css/flat/dijit/form/NumberSpinner.styl: -------------------------------------------------------------------------------- 1 | /* NumberSpinner - namespace "dijitSpinner" 2 | * 3 | * Styling NumberSpinner mainly includes: 4 | * 5 | * 1. Arrows 6 | * Outer containers: .dijitSpinnerButtonContainer|.dijitSpinnerButtonInner - for border, padding and position 7 | * Arrows: .dijitArrowButton|.dijitUpArrowButton.|dijitDownArrowButton 8 | * Inner container: .dijitArrowButtonInner - for border, padding, width|height and background image 9 | * 10 | * 2. Hover state 11 | * .dijitUpArrowButtonHover|.dijitDownArrowButtonHover .* - for background color|image 12 | * 13 | * 3. Active state 14 | * .dijitUpArrowButtonActive|.dijitDownArrowButtonActive .* - for border, padding, margin and background color|image 15 | * 16 | * 4. Focused state 17 | * .dijitSpinnerFocused .* - for background color|image 18 | * 19 | * 5. Disabled state 20 | * .dijitSpinnerDisabled .* - for background color|image 21 | */ 22 | 23 | @import 'dijit_form_variables'; 24 | 25 | .{$theme-name} { 26 | 27 | .dijitSpinner { 28 | 29 | .dijitSpinnerButtonContainer { 30 | overflow: hidden; 31 | position: relative; 32 | width: auto; 33 | padding: 0; 34 | border: $numberspinner-button-border; 35 | } 36 | 37 | .dijitSpinnerButtonInner { 38 | width: $numberspinner-button-width; 39 | padding: $numberspinner-button-inner-padding 0 !important; 40 | margin: 0; 41 | } 42 | 43 | /* up & down buttons */ 44 | 45 | .dijitArrowButton { 46 | button-style(); 47 | border-radius: 0; 48 | border: 0; 49 | width: auto; 50 | overflow: hidden; 51 | left: 0; 52 | right: 0; 53 | padding: $numberspinner-button-padding; 54 | &:before { 55 | content: none; // remove arrow icons from dijitArrowButton nodes 56 | } 57 | } 58 | 59 | /* up button */ 60 | .dijitUpArrowButton { 61 | border-top-right-radius: $numberspinner-button-border-radius 62 | } 63 | 64 | /* down button */ 65 | .dijitDownArrowButton { 66 | border-bottom-right-radius: $numberspinner-button-border-radius 67 | } 68 | 69 | /* hover */ 70 | 71 | .dijitUpArrowButtonHover, 72 | .dijitDownArrowButtonHover { 73 | button-hover-style(); 74 | } 75 | 76 | /* active */ 77 | 78 | .dijitDownArrowButtonActive, 79 | .dijitUpArrowButtonActive { 80 | button-active-style(); 81 | } 82 | 83 | /* up & down arrows */ 84 | 85 | .dijitArrowButtonInner { 86 | line-height: $icon-size; 87 | display: block; 88 | 89 | .dijitInputField { 90 | padding: 0; 91 | } 92 | 93 | &:before { 94 | content: $numberspinner-icon-up; 95 | } 96 | } 97 | 98 | .dijitDownArrowButton .dijitArrowButtonInner { 99 | &:before { 100 | content: $numberspinner-icon-down; 101 | } 102 | } 103 | } 104 | 105 | /* disabled */ 106 | 107 | .dijitSpinnerDisabled { 108 | .dijitDownArrowButton, 109 | .dijitUpArrowButton { 110 | button-disabled-style(); 111 | } 112 | } 113 | 114 | // checkbox icon within alternative buttons 115 | if($button-alternative-colors && length($button-alternative-colors) > 0) { 116 | for class in $button-alternative-colors { 117 | .{class} { 118 | .dijitSpinnerButtonContainer { 119 | border-color: $button-alternative-colors[class]; 120 | } 121 | } 122 | } 123 | } 124 | } -------------------------------------------------------------------------------- /css/flat/dijit/form/NumberSpinner_rtl.css: -------------------------------------------------------------------------------- 1 | .flat .dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton { 2 | right: 0; 3 | left: auto; 4 | } 5 | -------------------------------------------------------------------------------- /css/flat/dijit/form/NumberSpinner_rtl.styl: -------------------------------------------------------------------------------- 1 | @import 'dijit_form_variables'; 2 | 3 | .{$theme-name} { 4 | 5 | .dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton { 6 | right: 0; 7 | left: auto; 8 | } 9 | 10 | } -------------------------------------------------------------------------------- /css/flat/dijit/form/RadioButton.css: -------------------------------------------------------------------------------- 1 | /* RadioButton 2 | * 3 | * Styling RadioButton mainly includes: 4 | * 5 | * 1. Containers 6 | * .dijitRadio|.dijitRadioIcon 7 | * 8 | * 2. RadioButton within ToggleButton 9 | * .dijitToggleButton|.dijitToggleButtonChecked 10 | * 11 | * 3. Checked state 12 | * .dijitRadioChecked 13 | * .dijitToggleButtonChecked 14 | * 15 | * 4. Hover state 16 | * .dijitRadioHover|.dijitRadioCheckedHover 17 | * 18 | * 5. Disabled state 19 | * .dijitRadioDisabled|.dijitRadioCheckedDisabled 20 | */ 21 | .flat .dijitRadio, 22 | .flat .dijitRadioIcon { 23 | /* inside a toggle button */ 24 | width: 16px; 25 | height: 16px; 26 | background: #fff; 27 | border: 1px solid #2196f3; 28 | border-radius: 50%; 29 | position: relative; 30 | overflow: visible; 31 | -webkit-box-sizing: border-box; 32 | -moz-box-sizing: border-box; 33 | box-sizing: border-box; 34 | } 35 | .flat .dijitRadio:after, 36 | .flat .dijitRadioIcon:after { 37 | content: " "; 38 | display: block; 39 | width: 0; 40 | height: 0; 41 | background-color: #2196f3; 42 | border-radius: 50%; 43 | opacity: 0; 44 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 45 | filter: alpha(opacity=0); 46 | margin: 8px; 47 | position: absolute; 48 | top: 0; 49 | left: 0; 50 | -webkit-transition: all 0.15s ease-in-out; 51 | -moz-transition: all 0.15s ease-in-out; 52 | -o-transition: all 0.15s ease-in-out; 53 | -ms-transition: all 0.15s ease-in-out; 54 | transition: all 0.15s ease-in-out; 55 | } 56 | .flat .dijitRadioHover { 57 | border-color: #59b0f6; 58 | } 59 | .flat .dijitRadioChecked:after, 60 | .flat .dijitChecked .dijitRadioIcon:after { 61 | width: 8px; 62 | height: 8px; 63 | margin: 3px; 64 | opacity: 1; 65 | -ms-filter: none; 66 | filter: none; 67 | } 68 | .flat .alt-primary .dijitRadioIcon { 69 | border-color: #fff; 70 | } 71 | .flat .alt-primary .dijitRadioIcon:after { 72 | background-color: #fff; 73 | } 74 | .flat .alt-success .dijitRadioIcon { 75 | border-color: #fff; 76 | } 77 | .flat .alt-success .dijitRadioIcon:after { 78 | background-color: #fff; 79 | } 80 | .flat .alt-info .dijitRadioIcon { 81 | border-color: #fff; 82 | } 83 | .flat .alt-info .dijitRadioIcon:after { 84 | background-color: #fff; 85 | } 86 | .flat .alt-warning .dijitRadioIcon { 87 | border-color: #fff; 88 | } 89 | .flat .alt-warning .dijitRadioIcon:after { 90 | background-color: #fff; 91 | } 92 | .flat .alt-danger .dijitRadioIcon { 93 | border-color: #fff; 94 | } 95 | .flat .alt-danger .dijitRadioIcon:after { 96 | background-color: #fff; 97 | } 98 | .flat .alt-inverse .dijitRadioIcon { 99 | border-color: #fff; 100 | } 101 | .flat .alt-inverse .dijitRadioIcon:after { 102 | background-color: #fff; 103 | } 104 | .flat .dijitRadioDisabled { 105 | background-color: #f5f5f5; 106 | border-color: #e3e3e3; 107 | } 108 | .flat .dijitRadioCheckedDisabled { 109 | background-color: #f5f5f5; 110 | border-color: #6fbbf7; 111 | } 112 | .flat .dijitRadioCheckedDisabled:after { 113 | background-color: #6fbbf7; 114 | } 115 | .flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon { 116 | width: 16px; 117 | height: 16px; 118 | background: #fff; 119 | border: 1px solid #9e9e9e; 120 | border-radius: 50%; 121 | position: relative; 122 | overflow: visible; 123 | -webkit-box-sizing: border-box; 124 | -moz-box-sizing: border-box; 125 | box-sizing: border-box; 126 | } 127 | .flat .dijitRadioMenuItem .dijitCheckedMenuItemIcon:after { 128 | content: " "; 129 | display: block; 130 | width: 0; 131 | height: 0; 132 | background-color: #2196f3; 133 | border-radius: 50%; 134 | opacity: 0; 135 | -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 136 | filter: alpha(opacity=0); 137 | margin: 8px; 138 | position: absolute; 139 | top: 0; 140 | left: 0; 141 | -webkit-transition: all 0.15s ease-in-out; 142 | -moz-transition: all 0.15s ease-in-out; 143 | -o-transition: all 0.15s ease-in-out; 144 | -ms-transition: all 0.15s ease-in-out; 145 | transition: all 0.15s ease-in-out; 146 | } 147 | .flat .dijitRadioMenuItemChecked .dijitCheckedMenuItemIcon { 148 | border-color: #9e9e9e; 149 | } 150 | .flat .dijitRadioMenuItemChecked .dijitCheckedMenuItemIcon:after { 151 | width: 8px; 152 | height: 8px; 153 | margin: 3px; 154 | opacity: 1; 155 | -ms-filter: none; 156 | filter: none; 157 | } 158 | -------------------------------------------------------------------------------- /css/flat/dijit/form/RadioButton.styl: -------------------------------------------------------------------------------- 1 | /* RadioButton 2 | * 3 | * Styling RadioButton mainly includes: 4 | * 5 | * 1. Containers 6 | * .dijitRadio|.dijitRadioIcon 7 | * 8 | * 2. RadioButton within ToggleButton 9 | * .dijitToggleButton|.dijitToggleButtonChecked 10 | * 11 | * 3. Checked state 12 | * .dijitRadioChecked 13 | * .dijitToggleButtonChecked 14 | * 15 | * 4. Hover state 16 | * .dijitRadioHover|.dijitRadioCheckedHover 17 | * 18 | * 5. Disabled state 19 | * .dijitRadioDisabled|.dijitRadioCheckedDisabled 20 | */ 21 | 22 | @import 'dijit_form_variables'; 23 | 24 | .{$theme-name} { 25 | 26 | .dijitRadio, 27 | .dijitRadioIcon { /* inside a toggle button */ 28 | width: $radio-width; 29 | height: $radio-height; 30 | background: $radio-background-color; 31 | border: 1px solid $radio-border-color; 32 | border-radius: 50%; 33 | position: relative; 34 | overflow: visible; 35 | box-sizing: border-box; 36 | &:after { 37 | content: " "; 38 | display: block; 39 | width: 0; 40 | height: 0; 41 | background-color: $radio-checked-color; 42 | border-radius: 50%; 43 | opacity: 0; 44 | margin: ($radio-width) * .5; 45 | position: absolute; 46 | top: 0; 47 | left: 0; 48 | transition: all 0.15s ease-in-out; 49 | } 50 | } 51 | 52 | // hover 53 | .dijitRadioHover { 54 | border-color: $radio-hover-border-color; 55 | } 56 | 57 | // checked 58 | .dijitRadioChecked, 59 | .dijitChecked .dijitRadioIcon { 60 | &:after { 61 | width: $radio-width - 8px; 62 | height: @width; 63 | margin: 3px; 64 | opacity: 1; 65 | } 66 | } 67 | 68 | // checkbox icon within alternative buttons 69 | if($button-alternative-colors && length($button-alternative-colors) > 0) { 70 | for class in $button-alternative-colors { 71 | .{class} { 72 | .dijitRadioIcon { 73 | border-color: $white; 74 | &:after { 75 | background-color: $white; 76 | } 77 | } 78 | } 79 | } 80 | } 81 | 82 | // disabled 83 | .dijitRadioDisabled { 84 | background-color: $radio-disabled-background-color; 85 | border-color: $radio-disabled-border-color; 86 | } 87 | 88 | .dijitRadioCheckedDisabled { 89 | background-color: $radio-disabled-background-color; 90 | border-color: $radio-checked-disabled-color; 91 | &:after { 92 | background-color: $radio-checked-disabled-color; 93 | } 94 | } 95 | 96 | /* ---- RadioMenuItem ---- */ 97 | .dijitRadioMenuItem { 98 | .dijitCheckedMenuItemIcon { 99 | width: $radio-width; 100 | height: $radio-height; 101 | background: $radio-background-color; 102 | border: 1px solid $border-color; 103 | border-radius: 50%; 104 | position: relative; 105 | overflow: visible; 106 | box-sizing: border-box; 107 | &:after { 108 | content: " "; 109 | display: block; 110 | width: 0; 111 | height: 0; 112 | background-color: $radio-checked-color; 113 | border-radius: 50%; 114 | opacity: 0; 115 | margin: ($radio-width) * .5; 116 | position: absolute; 117 | top: 0; 118 | left: 0; 119 | transition: all 0.15s ease-in-out; 120 | } 121 | } 122 | } 123 | 124 | .dijitRadioMenuItemChecked { 125 | .dijitCheckedMenuItemIcon { 126 | border-color: $border-color; 127 | &:after { 128 | width: $radio-width - 8px; 129 | height: @width; 130 | margin: 3px; 131 | opacity: 1; 132 | } 133 | } 134 | } 135 | 136 | } -------------------------------------------------------------------------------- /css/flat/dijit/form/Select.css: -------------------------------------------------------------------------------- 1 | /* Select | Combobox 2 | * And minor style for DateTextBox | MultiSelect 3 | * 4 | * Styling Select mainly includes: 5 | * 6 | * 1. Containers 7 | * Select: 8 | * .dijitSelect 9 | * .dijitButtonContents 10 | * Combobox: 11 | * .dijitComboBox 12 | * 13 | * 2. Arrow Button 14 | * .dijitArrowButton 15 | * .dijitArrowButtonInner 16 | * .dijitComboBox .dijitButtonNode 17 | * 18 | * 3. Menu 19 | * .dijitSelectMenu 20 | * 21 | * 4. States - Hover, Active, Focused, Disabled, e.g. 22 | * 23 | * Select: Hover, Active, Focused, Disabled 24 | * .dijitSelectHover 25 | * .dijitSelectFocused 26 | * .dijitSelectDisabled 27 | * 28 | * Combobox: Hover, Focused (Open), Disabled 29 | * .dijitComboBox .dijitDownArrowButtonHover 30 | * .dijitComboBoxOpenHover .dijitButtonNode 31 | * .dijitComboBoxDisabled .dijitButtonNode 32 | * 33 | */ 34 | .flat .dijitSelect .dijitArrowButtonInner, 35 | .flat .dijitComboBox .dijitArrowButtonInner { 36 | margin: 0; 37 | width: 0; 38 | height: 0; 39 | } 40 | .flat .dijitSelect { 41 | border-style: solid; 42 | border-width: 1px; 43 | border-color: #9e9e9e; 44 | padding: 4px; 45 | border-radius: 3px; 46 | line-height: 20px; 47 | cursor: pointer; 48 | -webkit-transition: all 0.05s linear; 49 | -moz-transition: all 0.05s linear; 50 | -o-transition: all 0.05s linear; 51 | -ms-transition: all 0.05s linear; 52 | transition: all 0.05s linear; 53 | background: #fff; 54 | table-layout: fixed; 55 | } 56 | .flat .dijitSelect .dijitButtonContents, 57 | .flat .dijitSelect .dijitArrowButton { 58 | line-height: 20px; 59 | padding: 4px 12px; 60 | border: 0; 61 | border-radius: 0 2.000000000000001px 2.000000000000001px 0; 62 | } 63 | .flat .dijitSelect .dijitButtonContents { 64 | padding: 0; 65 | overflow: hidden; 66 | -o-text-overflow: ellipsis; 67 | text-overflow: ellipsis; 68 | border-radius: 2.000000000000001px 0 0 2.000000000000001px; 69 | } 70 | .flat .dijitSelect .dijitInputField { 71 | padding: 0 0 0 12px; 72 | } 73 | .flat .dijitSelect .dijitArrowButton { 74 | width: 20px; 75 | padding: 4px; 76 | } 77 | .flat .dijitSelectHover { 78 | -webkit-transition: all 0.1s; 79 | -moz-transition: all 0.1s; 80 | -o-transition: all 0.1s; 81 | -ms-transition: all 0.1s; 82 | transition: all 0.1s; 83 | background: #f2f2f2; 84 | border-color: #d9d9d9; 85 | } 86 | .flat .dijitSelectActive { 87 | -webkit-transition: none; 88 | -moz-transition: none; 89 | -o-transition: none; 90 | -ms-transition: none; 91 | transition: none; 92 | outline: none; 93 | -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); 94 | box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); 95 | background: #e0e0e0; 96 | border-color: #b3b3b3; 97 | } 98 | .flat .dijitSelectFocused { 99 | border: 1px solid #9e9e9e; 100 | } 101 | .flat .dijitSelectDisabled { 102 | cursor: default; 103 | color: #9e9e9e; 104 | background-color: #f5f5f5; 105 | border-color: #e3e3e3; 106 | } 107 | .flat .dijitComboBox .dijitButtonNode { 108 | border-style: solid; 109 | border-width: 1px; 110 | border-color: #9e9e9e; 111 | padding: 4px; 112 | border-radius: 3px; 113 | line-height: 20px; 114 | cursor: pointer; 115 | -webkit-transition: all 0.05s linear; 116 | -moz-transition: all 0.05s linear; 117 | -o-transition: all 0.05s linear; 118 | -ms-transition: all 0.05s linear; 119 | transition: all 0.05s linear; 120 | background: #fff; 121 | border-radius: 0 2.000000000000001px 2.000000000000001px 0; 122 | } 123 | .flat .dijitComboBoxOpenHover .dijitButtonNode, 124 | .flat .dijitComboBox .dijitDownArrowButtonHover { 125 | -webkit-transition: all 0.1s; 126 | -moz-transition: all 0.1s; 127 | -o-transition: all 0.1s; 128 | -ms-transition: all 0.1s; 129 | transition: all 0.1s; 130 | background: #f2f2f2; 131 | border-color: #d9d9d9; 132 | -webkit-box-shadow: none; 133 | box-shadow: none; 134 | } 135 | .flat .dijitComboBoxDisabled .dijitButtonNode { 136 | cursor: default; 137 | color: #9e9e9e; 138 | background-color: #f5f5f5; 139 | border-color: #e3e3e3; 140 | } 141 | .flat .dijitComboBox .dijitArrowButton { 142 | width: 20px; 143 | padding: 4px; 144 | } 145 | .flat .dijitToolbar .dijitComboBox .dijitArrowButtonInner { 146 | border: none; 147 | } 148 | .flat .dijitDateTextBox .dijitArrowButton:before { 149 | content: "\f01e"; 150 | } 151 | .flat .dijitTimeTextBox .dijitArrowButton:before { 152 | content: "\f01f"; 153 | } 154 | .flat select { 155 | padding: 4px 0; 156 | border: 1px solid #9e9e9e; 157 | -webkit-box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); 158 | box-shadow: 0 1px 0.5px rgba(0,0,0,0.3), 0 2px 2px rgba(0,0,0,0.2); 159 | } 160 | .flat select option { 161 | padding: 4px 8px; 162 | } 163 | .flat .dijitSelectMenu td.dijitMenuItemIconCell, 164 | .flat .dijitSelectMenu td.dijitMenuArrowCell { 165 | /* so that arrow and icon cells from MenuItem are not displayed */ 166 | display: none; 167 | } 168 | -------------------------------------------------------------------------------- /css/flat/dijit/form/Select.styl: -------------------------------------------------------------------------------- 1 | /* Select | Combobox 2 | * And minor style for DateTextBox | MultiSelect 3 | * 4 | * Styling Select mainly includes: 5 | * 6 | * 1. Containers 7 | * Select: 8 | * .dijitSelect 9 | * .dijitButtonContents 10 | * Combobox: 11 | * .dijitComboBox 12 | * 13 | * 2. Arrow Button 14 | * .dijitArrowButton 15 | * .dijitArrowButtonInner 16 | * .dijitComboBox .dijitButtonNode 17 | * 18 | * 3. Menu 19 | * .dijitSelectMenu 20 | * 21 | * 4. States - Hover, Active, Focused, Disabled, e.g. 22 | * 23 | * Select: Hover, Active, Focused, Disabled 24 | * .dijitSelectHover 25 | * .dijitSelectFocused 26 | * .dijitSelectDisabled 27 | * 28 | * Combobox: Hover, Focused (Open), Disabled 29 | * .dijitComboBox .dijitDownArrowButtonHover 30 | * .dijitComboBoxOpenHover .dijitButtonNode 31 | * .dijitComboBoxDisabled .dijitButtonNode 32 | * 33 | */ 34 | 35 | @import 'dijit_form_variables'; 36 | 37 | .{$theme-name} { 38 | 39 | /* arrows */ 40 | 41 | .dijitSelect, 42 | .dijitComboBox { 43 | .dijitArrowButtonInner { 44 | margin: 0; 45 | width:0; 46 | height: 0; 47 | } 48 | } 49 | 50 | /* ----- Select ----- */ 51 | 52 | .dijitSelect { 53 | button-style(); 54 | table-layout: fixed; 55 | 56 | .dijitButtonContents, 57 | .dijitArrowButton { 58 | line-height: 20px; 59 | padding: $button-padding; 60 | border: 0; 61 | border-radius: 0 $select-button-border-radius $select-button-border-radius 0; 62 | } 63 | .dijitButtonContents { 64 | padding:0; 65 | overflow: hidden; 66 | text-overflow: ellipsis; 67 | border-radius: $select-button-border-radius 0 0 $select-button-border-radius; 68 | } 69 | .dijitInputField { 70 | padding: 0 0 0 $input-padding*3; 71 | } 72 | .dijitArrowButton { 73 | width: $button-arrow-width; 74 | padding: $button-arrow-padding; 75 | } 76 | } 77 | 78 | /* hover */ 79 | 80 | .dijitSelectHover { 81 | button-hover-style(); 82 | } 83 | 84 | .dijitSelectActive { 85 | button-active-style(); 86 | } 87 | 88 | /* focused */ 89 | 90 | .dijitSelectFocused { 91 | border: $select-focus-border; 92 | } 93 | 94 | /* disabled */ 95 | 96 | .dijitSelectDisabled { 97 | button-disabled-style(); 98 | } 99 | 100 | /* ----- Combobox ----- */ 101 | 102 | .dijitComboBox .dijitButtonNode { 103 | button-style(); 104 | border-radius: 0 $select-button-border-radius $select-button-border-radius 0; 105 | } 106 | 107 | /* hover */ 108 | 109 | .dijitComboBoxOpenHover .dijitButtonNode, 110 | .dijitComboBox .dijitDownArrowButtonHover { 111 | button-hover-style(); 112 | box-shadow: none; 113 | } 114 | 115 | /* disabled */ 116 | 117 | .dijitComboBoxDisabled .dijitButtonNode { 118 | button-disabled-style(); 119 | } 120 | 121 | .dijitComboBox .dijitArrowButton { 122 | width: $button-arrow-width; 123 | padding: $button-arrow-padding; 124 | } 125 | 126 | // remove arrow when wrapped in a toolbar dijit 127 | .dijitToolbar .dijitComboBox .dijitArrowButtonInner { 128 | border: none; 129 | } 130 | 131 | /* ----- DateTextBox ----- */ 132 | 133 | .dijitDateTextBox .dijitArrowButton:before { 134 | content: $select-date-icon; 135 | } 136 | /* ----- TimeTextBox ----- */ 137 | 138 | .dijitTimeTextBox .dijitArrowButton:before { 139 | content: $select-time-icon; 140 | } 141 | 142 | /* ----- Multiple Select ----- */ 143 | 144 | select { 145 | padding: $input-padding 0; 146 | border: 1px solid $input-border-color; 147 | box-shadow: $shadow-depth1; 148 | } 149 | 150 | select option { 151 | padding: $input-padding $input-padding * 2; 152 | } 153 | 154 | /* Dropdown menu styles for "Select" 155 | * Most of menu styles are defined in Menu.styl 156 | */ 157 | 158 | .dijitSelectMenu td.dijitMenuItemIconCell, 159 | .dijitSelectMenu td.dijitMenuArrowCell { 160 | /* so that arrow and icon cells from MenuItem are not displayed */ 161 | display: none; 162 | } 163 | 164 | } -------------------------------------------------------------------------------- /css/flat/dijit/form/Select_rtl.css: -------------------------------------------------------------------------------- 1 | .flat .dijitSelectRtl .dijitButtonText { 2 | float: right; 3 | padding: 0 12px 0 0; 4 | } 5 | .flat .dijitSelectRtl .dijitButtonContents { 6 | border-style: none none none solid; 7 | text-align: right; 8 | } 9 | .flat .dijitComboBoxRtl .dijitButtonNode.dijitArrowButtonContainer { 10 | border-radius: 3px 0 0 3px; 11 | } 12 | .flat .dijitComboBoxRtl .dijitArrowButtonContainer { 13 | border-right-width: 1px !important; 14 | border-left-width: 0 !important; 15 | } 16 | -------------------------------------------------------------------------------- /css/flat/dijit/form/Select_rtl.styl: -------------------------------------------------------------------------------- 1 | @import 'dijit_form_variables'; 2 | 3 | .{$theme-name} { 4 | 5 | .dijitSelectRtl { 6 | .dijitButtonText { 7 | float: right; 8 | padding: 0 $input-padding*3 0 0; 9 | } 10 | .dijitButtonContents { 11 | border-style: none none none solid; 12 | text-align: right; 13 | } 14 | } 15 | 16 | .dijitComboBoxRtl { 17 | .dijitButtonNode.dijitArrowButtonContainer { 18 | border-radius: $button-border-radius 0 0 $button-border-radius; 19 | } 20 | 21 | .dijitArrowButtonContainer { 22 | border-right-width: 1px !important; 23 | border-left-width: 0 !important; 24 | } 25 | } 26 | 27 | } -------------------------------------------------------------------------------- /css/flat/dijit/form/Slider.styl: -------------------------------------------------------------------------------- 1 | /* Slider 2 | * 3 | * Styling Slider mainly includes styling the Slider progress bar (dijitSliderProgressBar) 4 | * 5 | * Slider progress bar: 6 | * 1. Slider progress bar (default styling): 7 | * .dijitSliderProgressBarH - progress bar at the middle of horizontal slider 8 | * .dijitSliderLeftBumper - bar at the left of horizontal slider 9 | * .dijitSliderRightBumper - bar at the right of horizontal slider 10 | * .dijitSliderProgressBarV - progress bar at the middle of vertical slider 11 | * .dijitSliderTopBumper - bar at the top of vertical slider 12 | * .dijitSliderBottomtBumper - bar at the bottom of vertical slider 13 | * 14 | * 2. hovered Slider progress bar (ie, mouse hover on progress bar) 15 | * .dijitSliderHover .dijitSliderProgressBarH(horizontal) - hovered bar style: background, border 16 | * 17 | * 3. focused Slider progress bar (ie, mouse focused on progress bar) 18 | * .dijitSliderFocused .dijitSliderProgressBarH(horizontal) - focus bar style: background, border 19 | * 20 | * 4. disabled/read-only Slider progress bar 21 | * .dijitSliderDisabled .dijitSliderProgressBarH(horizontal) - bar styles when slider is disabled 22 | * 23 | * 24 | * Slider Thumbs: 25 | * 1. Slider Thumbs (default styling): 26 | * .dijitSliderImageHandleH / .dijitSliderImageHandleV - styles for the controller on the progress bar 27 | * 28 | * 2. hovered Slider Thumbs (ie, mouse hover on slider thumbs) 29 | * .dijitSliderHover .dijitSliderImageHandleH - hovered controller style 30 | * 31 | * 3. focused Slider progress bar (ie, mouse focused on slider thumbs) 32 | * .dijitSliderFocused .dijitSliderImageHandleV - focused controller style 33 | * 34 | * 35 | * Slider Increment/Decrement Buttons: 36 | * 1. Slider Increment/Decrement Buttons (default styling): 37 | * .dijitSliderDecrementIconH - decrement icon which lies at the left of horizontal slider 38 | * .dijitSliderIncrementIconH - increment icon which lies at the right of horizontal slider 39 | * .dijitSliderDecrementIconV - decrement icon which lies at the bottom of vertical slider 40 | * .dijitSliderIncrementIconV - increment icon which lies at the top of vertical slider 41 | * 42 | * 2. hovered Slider Increment/Decrement Buttons (mouse hover on the icons) 43 | * .dijitSliderHover .dijitSliderDecrementIconH - for background, border 44 | * 45 | * 3. active Slider Increment/Decrement Buttons (mouse down on the icons) 46 | * .dijitSliderActive .dijitSliderIncrementIconV - for background, border 47 | * 48 | * 4. disabled/read-only Slider Increment/Decrement Buttons 49 | * .dijitSliderDisabled .dijitSliderDecrementIconH - styles for the icons in disabled slider 50 | * .dijitSliderReadOnly .dijitSliderIncrementIconV - styles for the icons in read-only slider 51 | */ 52 | 53 | @import 'dijit_form_variables'; 54 | 55 | .{$theme-name} { 56 | 57 | .dijitSlider { 58 | } 59 | 60 | .dijitSliderBar { 61 | border-style: solid; 62 | outline: 1px; 63 | } 64 | 65 | .dijitRuleLabelsContainer { 66 | color: $slider-label-text-color; 67 | font-size: smaller; 68 | } 69 | 70 | /* disabled */ 71 | 72 | .dijitSliderDisabled { 73 | opacity: $disabled-opacity; 74 | } 75 | 76 | /* ----- Horizontal Slider ----- */ 77 | 78 | .dijitRuleLabelsContainerH { 79 | padding: 0; 80 | } 81 | 82 | /* ----- Bar ----- */ 83 | 84 | .dijitSliderBarH, 85 | .dijitSliderBumperH { 86 | height: $slider-bar-width; 87 | } 88 | 89 | .dijitSlider { 90 | .dijitSliderLeftBumper { 91 | border-radius: $slider-bar-radius 0 0 $slider-bar-radius; 92 | border: 0 none; 93 | margin-left: $slider-bar-spacing; 94 | } 95 | .dijitSliderRightBumper { 96 | border-radius: 0 $slider-bar-radius $slider-bar-radius 0; 97 | border: 0 none; 98 | margin-left: -2px; 99 | margin-right: $slider-bar-spacing; 100 | } 101 | 102 | .dijitSliderProgressBarH, 103 | .dijitSliderLeftBumper { 104 | border: 0 none; 105 | background-color: $slider-progressbar-background-color; 106 | background-image: none; 107 | } 108 | .dijitSliderRemainingBarH, 109 | .dijitSliderRightBumper { 110 | border: 0 none; 111 | background-color: $slider-remainingbar-background-color; 112 | } 113 | } 114 | 115 | /* hover */ 116 | 117 | .dijitSliderHover { 118 | .dijitSliderProgressBarH, 119 | .dijitSliderLeftBumper { 120 | background-color: darken($slider-progressbar-background-color, 8%); 121 | background-image: none; 122 | } 123 | .dijitSliderRemainingBarH, 124 | .dijitSliderRightBumper { 125 | } 126 | } 127 | 128 | /* focus */ 129 | 130 | .dijitSliderFocused { 131 | .dijitSliderProgressBarH, 132 | .dijitSliderLeftBumper { 133 | box-shadow: none; 134 | } 135 | .dijitSliderRemainingBarH, 136 | .dijitSliderRightBumper { 137 | box-shadow: none; 138 | } 139 | } 140 | 141 | /* ----- Vertical Slider ----- */ 142 | 143 | .dijitRuleLabelsContainerV { 144 | padding: 0; 145 | } 146 | 147 | .dijitSliderBarV, 148 | .dijitSliderBumperV { 149 | width: $slider-bar-width; 150 | } 151 | 152 | .dijitSlider { 153 | .dijitSliderTopBumper { 154 | border-radius: $slider-bar-radius $slider-bar-radius 0 0; 155 | border: 0 none; 156 | margin-top: $slider-bar-spacing; 157 | margin-bottom: -2px; 158 | } 159 | .dijitSliderBottomBumper { 160 | border-radius: 0 0 $slider-bar-radius $slider-bar-radius; 161 | border: 0 none; 162 | margin-bottom: $slider-bar-spacing; 163 | } 164 | 165 | .dijitSliderProgressBarV, 166 | .dijitSliderBottomBumper { 167 | border: 0 none; 168 | background-color: $slider-progressbar-verticalr-background-color; 169 | background-image: none; 170 | } 171 | .dijitSliderRemainingBarV, 172 | .dijitSliderTopBumper { 173 | border: 0 none; 174 | background-color: $slider-remainingbar-vertical-background-color; 175 | } 176 | } 177 | 178 | /* hover */ 179 | 180 | .dijitSliderHover { 181 | .dijitSliderProgressBarV, 182 | .dijitSliderBottomBumper{ 183 | background-color: darken($slider-progressbar-verticalr-background-color, 8%); 184 | background-image: none; 185 | } 186 | .dijitSliderRemainingBarV, 187 | .dijitSliderTopBumper { 188 | } 189 | } 190 | 191 | /* focused */ 192 | 193 | .dijitSliderFocused { 194 | .dijitSliderProgressBarV, 195 | .dijitSliderBottomBumper{ 196 | box-shadow: none; 197 | } 198 | .dijitSliderRemainingBarV, 199 | .dijitSliderTopBumper { 200 | box-shadow: none; 201 | } 202 | } 203 | 204 | /* ------- Thumbs ------- */ 205 | 206 | .dijitSliderImageHandle { 207 | background: $slider-thumb-background-color; 208 | box-shadow: $slider-thumb-box-shadow; 209 | border-radius: $slider-thumb-border-radius; 210 | border: 1px solid $slider-thumb-border-color; 211 | width: $slider-thumb-width; 212 | height: $slider-thumb-height; 213 | margin-top: -2px; 214 | position: absolute; 215 | box-sizing: border-box; 216 | &:after { 217 | content: ""; 218 | display: block; 219 | background: $slider-thumb-inner-background-color; 220 | border-radius: $slider-thumb-inner-border-radius; 221 | height: $slider-thumb-inner-height; 222 | width: $slider-thumb-inner-width; 223 | left: ($slider-thumb-width - $slider-thumb-inner-width) * 0.5 - 1px; 224 | top: ($slider-thumb-height - $slider-thumb-inner-height) * 0.5 - 1px; 225 | position: absolute; 226 | } 227 | } 228 | 229 | .dijitSliderImageHandleV { 230 | margin-top: 0; 231 | } 232 | 233 | /* hover & focused */ 234 | 235 | .dijitSliderHover, 236 | .dijitSliderFocused { 237 | .dijitSliderImageHandle { 238 | box-shadow: $shadow-depth1_5; 239 | } 240 | } 241 | 242 | .dijitSliderDisabled.dijitSliderFocused { 243 | .dijitSliderImageHandle { 244 | &:after { 245 | display: none; 246 | } 247 | } 248 | } 249 | 250 | /* ---- Increment/Decrement Buttons ---- */ 251 | 252 | .dijitSliderDecrementIconH, 253 | .dijitSliderIncrementIconH, 254 | .dijitSliderDecrementIconV, 255 | .dijitSliderIncrementIconV { 256 | button-style(); 257 | height: $slider-button-height; 258 | width: $slider-button-width; 259 | cursor: pointer; 260 | color: $slider-button-text-color; 261 | padding: 0; 262 | } 263 | 264 | .dijitSliderDecrementIconH, 265 | .dijitSliderIncrementIconH, 266 | .dijitSliderDecrementIconV, 267 | .dijitSliderIncrementIconV { 268 | 269 | /* hover */ 270 | 271 | &:hover{ 272 | button-hover-style(); 273 | } 274 | 275 | /* active */ 276 | 277 | &:active{ 278 | button-active-style(); 279 | } 280 | } 281 | 282 | /* read only & disabled */ 283 | 284 | .dijitSliderReadOnly, 285 | .dijitSliderDisabled { 286 | .dijitSliderDecrementIconH, 287 | .dijitSliderDecrementIconV, 288 | .dijitSliderIncrementIconH, 289 | .dijitSliderIncrementIconV { 290 | opacity: $disabled-opacity; 291 | } 292 | } 293 | 294 | /* icons */ 295 | 296 | .dijitSliderButtonInner { 297 | } 298 | 299 | .dijitSliderIncrementIconH, 300 | .dijitSliderIncrementIconV, 301 | .dijitSliderDecrementIconH, 302 | .dijitSliderDecrementIconV { 303 | _icon-core-style(); 304 | &:before { 305 | content: $slider-icon-increment; 306 | top:0; 307 | line-height: $slider-button-height; 308 | } 309 | .dijitSliderButtonInner { 310 | display: none; 311 | } 312 | } 313 | 314 | .dijitSliderDecrementIconH, 315 | .dijitSliderDecrementIconV { 316 | &:before { 317 | content: $slider-icon-decrement; 318 | } 319 | } 320 | 321 | /* ---- Rule Mark ---- */ 322 | 323 | .dijitRuleMark { 324 | border: 0 none; 325 | } 326 | 327 | .dijitRuleMarkH { 328 | border-right: 1px solid $slider-ruler-color; 329 | } 330 | 331 | .dijitRuleMarkV { 332 | border-bottom: 1px solid $slider-ruler-color; 333 | } 334 | 335 | .dijitRuleLabelContainerH { 336 | margin-top: $slider-ruler-padding; 337 | margin-bottom: $slider-ruler-padding; 338 | } 339 | 340 | .dijitRuleLabelContainerV { 341 | margin-left: $slider-ruler-padding; 342 | margin-right: $slider-ruler-padding; 343 | } 344 | 345 | } -------------------------------------------------------------------------------- /css/flat/dijit/form/Slider_rtl.css: -------------------------------------------------------------------------------- 1 | .flat .dijitSliderRtl .dijitSliderProgressBarH { 2 | float: right; 3 | right: 0; 4 | left: auto; 5 | } 6 | .flat .dijitSliderRtl .dijitSliderLeftBumper { 7 | border-left-width: 0; 8 | border-right-width: 1px; 9 | margin-left: 0; 10 | margin-right: 4px; 11 | border-radius: 0 1.5px 1.5px 0; 12 | } 13 | .flat .dijitSliderRtl .dijitSliderRightBumper { 14 | border-left-width: 1px; 15 | border-right-width: 0; 16 | margin-left: 4px; 17 | margin-right: -2px; 18 | border-radius: 1.5px 0 0 1.5px; 19 | } 20 | .flat .dijitSliderRtl .dijitSliderMoveableH { 21 | right: auto; 22 | left: 0; 23 | } 24 | .flat .dijitSliderRtl .dijitSliderImageHandleV { 25 | left: auto; 26 | } 27 | .flat .dijitSliderRtl .dijitSliderImageHandleH { 28 | left: -50%; 29 | } 30 | .flat .dijitSliderRtl .dijitRuleContainerV { 31 | float: right; 32 | } 33 | -------------------------------------------------------------------------------- /css/flat/dijit/form/Slider_rtl.styl: -------------------------------------------------------------------------------- 1 | @import 'dijit_form_variables'; 2 | 3 | .{$theme-name} { 4 | 5 | .dijitSliderRtl { 6 | .dijitSliderProgressBarH { 7 | float:right; 8 | right:0; 9 | left:auto; 10 | } 11 | .dijitSliderLeftBumper { 12 | border-left-width: 0; 13 | border-right-width: 1px; 14 | margin-left: 0; 15 | margin-right: $slider-bar-spacing; 16 | border-radius: 0 $slider-bar-radius $slider-bar-radius 0; 17 | } 18 | .dijitSliderRightBumper { 19 | border-left-width: 1px; 20 | border-right-width: 0; 21 | margin-left: $slider-bar-spacing; 22 | margin-right: -2px; 23 | border-radius: $slider-bar-radius 0 0 $slider-bar-radius; 24 | } 25 | .dijitSliderMoveableH { 26 | right: auto; 27 | left: 0; 28 | } 29 | .dijitSliderImageHandleV { 30 | left:auto; 31 | } 32 | .dijitSliderImageHandleH { 33 | left:-50%; 34 | } 35 | .dijitRuleContainerV { 36 | float:right; 37 | } 38 | } 39 | } -------------------------------------------------------------------------------- /css/flat/dijit/form/TextBox.css: -------------------------------------------------------------------------------- 1 | /* Text Inputs: [TextBox | DateTextBox | CurrencyTextBox | ValidationTextBox | ...] | TextArea 2 | * Mainly includes: 3 | * 4 | * 1. Containers 5 | * .dijitTextBox 6 | * .dijitInputField - container that wraps "dijitInputInner" or "dijitPlaceHolder" 7 | * 8 | * 2. Textbox input 9 | * .dijitInputInner 10 | * .dijitPlaceHolder 11 | * 12 | * 3. States - Hover, Focused, Disabled, Error, Error while Focused e.g. 13 | * .dijitTextBoxHover 14 | * .dijitTextBoxFocused 15 | * .dijitTextBoxDisabled 16 | * .dijitTextBoxError 17 | * .dijitTextBoxErrorFocused 18 | * 19 | */ 20 | .flat .dijitTextBox, 21 | .flat .dijitInputInner { 22 | line-height: 20px; 23 | } 24 | .flat .dijitTextBox { 25 | background: #fff; 26 | border: 1px solid #9e9e9e; 27 | border-radius: 3px; 28 | -webkit-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; 29 | -moz-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; 30 | -o-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; 31 | -ms-transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; 32 | transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; 33 | } 34 | .flat .dijitTextArea { 35 | padding: 4px 6px; 36 | } 37 | .flat .dijitTextBox .dijitInputField { 38 | padding: 0 4px; 39 | margin: 0 2px; 40 | } 41 | .flat .dijitSelect.alt-primary, 42 | .flat .dijitComboBox.alt-primary, 43 | .flat .dijitSpinner.alt-primary { 44 | border-color: #1e88e5; 45 | } 46 | .flat .dijitSelect.alt-success, 47 | .flat .dijitComboBox.alt-success, 48 | .flat .dijitSpinner.alt-success { 49 | border-color: #43a047; 50 | } 51 | .flat .dijitSelect.alt-info, 52 | .flat .dijitComboBox.alt-info, 53 | .flat .dijitSpinner.alt-info { 54 | border-color: #03a9f4; 55 | } 56 | .flat .dijitSelect.alt-warning, 57 | .flat .dijitComboBox.alt-warning, 58 | .flat .dijitSpinner.alt-warning { 59 | border-color: #fb8c00; 60 | } 61 | .flat .dijitSelect.alt-danger, 62 | .flat .dijitComboBox.alt-danger, 63 | .flat .dijitSpinner.alt-danger { 64 | border-color: #e53935; 65 | } 66 | .flat .dijitSelect.alt-inverse, 67 | .flat .dijitComboBox.alt-inverse, 68 | .flat .dijitSpinner.alt-inverse { 69 | border-color: #616161; 70 | } 71 | .flat .dijitTextBox .dijitInputInner, 72 | .flat .dijitValidationTextBox .dijitValidationContainer, 73 | .flat .dijitTextBox .dijitInputField .dijitPlaceHolder { 74 | padding: 4px; 75 | } 76 | .flat .dijitTextBoxHover { 77 | border-color: #2196f3; 78 | -webkit-transition-duration: 0.25s; 79 | -moz-transition-duration: 0.25s; 80 | -o-transition-duration: 0.25s; 81 | -ms-transition-duration: 0.25s; 82 | transition-duration: 0.25s; 83 | } 84 | .flat .dijitTextBoxFocused { 85 | border-color: #2196f3; 86 | -webkit-transition-duration: 0.1s; 87 | -moz-transition-duration: 0.1s; 88 | -o-transition-duration: 0.1s; 89 | -ms-transition-duration: 0.1s; 90 | transition-duration: 0.1s; 91 | } 92 | .flat .dijitTextBoxDisabled { 93 | color: #9e9e9e; 94 | background-color: #f5f5f5; 95 | border-color: #e3e3e3; 96 | } 97 | .flat .dijitComboBoxDisabled.alt-primary, 98 | .flat .dijitSpinnerDisabled.alt-primary { 99 | background: #f5f5f5; 100 | color: #9e9e9e; 101 | border: 1px solid #6db2ee; 102 | } 103 | .flat .dijitComboBoxDisabled.alt-primary .dijitButtonNode, 104 | .flat .dijitSpinnerDisabled.alt-primary .dijitButtonNode { 105 | background: #6db2ee; 106 | color: #f2f2f2; 107 | } 108 | .flat .dijitSpinnerDisabled.alt-primary .dijitSpinnerButtonContainer { 109 | border-left-color: #6db2ee; 110 | } 111 | .flat .dijitSpinnerRtlDisabled.alt-primary .dijitSpinnerButtonContainer { 112 | border-right-color: #6db2ee; 113 | } 114 | .flat .dijitSelectDisabled.alt-primary { 115 | border-color: #6db2ee; 116 | } 117 | .flat .dijitSelectDisabled.alt-primary .dijitStretch, 118 | .flat .dijitSelectDisabled.alt-primary .dijitButtonNode { 119 | background: #6db2ee; 120 | color: #f2f2f2; 121 | } 122 | .flat .dijitComboBoxDisabled.alt-success, 123 | .flat .dijitSpinnerDisabled.alt-success { 124 | background: #f5f5f5; 125 | color: #9e9e9e; 126 | border: 1px solid #7dc981; 127 | } 128 | .flat .dijitComboBoxDisabled.alt-success .dijitButtonNode, 129 | .flat .dijitSpinnerDisabled.alt-success .dijitButtonNode { 130 | background: #7dc981; 131 | color: #f2f2f2; 132 | } 133 | .flat .dijitSpinnerDisabled.alt-success .dijitSpinnerButtonContainer { 134 | border-left-color: #7dc981; 135 | } 136 | .flat .dijitSpinnerRtlDisabled.alt-success .dijitSpinnerButtonContainer { 137 | border-right-color: #7dc981; 138 | } 139 | .flat .dijitSelectDisabled.alt-success { 140 | border-color: #7dc981; 141 | } 142 | .flat .dijitSelectDisabled.alt-success .dijitStretch, 143 | .flat .dijitSelectDisabled.alt-success .dijitButtonNode { 144 | background: #7dc981; 145 | color: #f2f2f2; 146 | } 147 | .flat .dijitComboBoxDisabled.alt-info, 148 | .flat .dijitSpinnerDisabled.alt-info { 149 | background: #f5f5f5; 150 | color: #9e9e9e; 151 | border: 1px solid #56c9fd; 152 | } 153 | .flat .dijitComboBoxDisabled.alt-info .dijitButtonNode, 154 | .flat .dijitSpinnerDisabled.alt-info .dijitButtonNode { 155 | background: #56c9fd; 156 | color: #f2f2f2; 157 | } 158 | .flat .dijitSpinnerDisabled.alt-info .dijitSpinnerButtonContainer { 159 | border-left-color: #56c9fd; 160 | } 161 | .flat .dijitSpinnerRtlDisabled.alt-info .dijitSpinnerButtonContainer { 162 | border-right-color: #56c9fd; 163 | } 164 | .flat .dijitSelectDisabled.alt-info { 165 | border-color: #56c9fd; 166 | } 167 | .flat .dijitSelectDisabled.alt-info .dijitStretch, 168 | .flat .dijitSelectDisabled.alt-info .dijitButtonNode { 169 | background: #56c9fd; 170 | color: #f2f2f2; 171 | } 172 | .flat .dijitComboBoxDisabled.alt-warning, 173 | .flat .dijitSpinnerDisabled.alt-warning { 174 | background: #f5f5f5; 175 | color: #9e9e9e; 176 | border: 1px solid #ffb557; 177 | } 178 | .flat .dijitComboBoxDisabled.alt-warning .dijitButtonNode, 179 | .flat .dijitSpinnerDisabled.alt-warning .dijitButtonNode { 180 | background: #ffb557; 181 | color: #f2f2f2; 182 | } 183 | .flat .dijitSpinnerDisabled.alt-warning .dijitSpinnerButtonContainer { 184 | border-left-color: #ffb557; 185 | } 186 | .flat .dijitSpinnerRtlDisabled.alt-warning .dijitSpinnerButtonContainer { 187 | border-right-color: #ffb557; 188 | } 189 | .flat .dijitSelectDisabled.alt-warning { 190 | border-color: #ffb557; 191 | } 192 | .flat .dijitSelectDisabled.alt-warning .dijitStretch, 193 | .flat .dijitSelectDisabled.alt-warning .dijitButtonNode { 194 | background: #ffb557; 195 | color: #f2f2f2; 196 | } 197 | .flat .dijitComboBoxDisabled.alt-danger, 198 | .flat .dijitSpinnerDisabled.alt-danger { 199 | background: #f5f5f5; 200 | color: #9e9e9e; 201 | border: 1px solid #ee7e7c; 202 | } 203 | .flat .dijitComboBoxDisabled.alt-danger .dijitButtonNode, 204 | .flat .dijitSpinnerDisabled.alt-danger .dijitButtonNode { 205 | background: #ee7e7c; 206 | color: #f2f2f2; 207 | } 208 | .flat .dijitSpinnerDisabled.alt-danger .dijitSpinnerButtonContainer { 209 | border-left-color: #ee7e7c; 210 | } 211 | .flat .dijitSpinnerRtlDisabled.alt-danger .dijitSpinnerButtonContainer { 212 | border-right-color: #ee7e7c; 213 | } 214 | .flat .dijitSelectDisabled.alt-danger { 215 | border-color: #ee7e7c; 216 | } 217 | .flat .dijitSelectDisabled.alt-danger .dijitStretch, 218 | .flat .dijitSelectDisabled.alt-danger .dijitButtonNode { 219 | background: #ee7e7c; 220 | color: #f2f2f2; 221 | } 222 | .flat .dijitComboBoxDisabled.alt-inverse, 223 | .flat .dijitSpinnerDisabled.alt-inverse { 224 | background: #f5f5f5; 225 | color: #9e9e9e; 226 | border: 1px solid #989898; 227 | } 228 | .flat .dijitComboBoxDisabled.alt-inverse .dijitButtonNode, 229 | .flat .dijitSpinnerDisabled.alt-inverse .dijitButtonNode { 230 | background: #989898; 231 | color: #f2f2f2; 232 | } 233 | .flat .dijitSpinnerDisabled.alt-inverse .dijitSpinnerButtonContainer { 234 | border-left-color: #989898; 235 | } 236 | .flat .dijitSpinnerRtlDisabled.alt-inverse .dijitSpinnerButtonContainer { 237 | border-right-color: #989898; 238 | } 239 | .flat .dijitSelectDisabled.alt-inverse { 240 | border-color: #989898; 241 | } 242 | .flat .dijitSelectDisabled.alt-inverse .dijitStretch, 243 | .flat .dijitSelectDisabled.alt-inverse .dijitButtonNode { 244 | background: #989898; 245 | color: #f2f2f2; 246 | } 247 | .flat .dijitTextBoxError, 248 | .flat .dijitTextBoxError .dijitButtonNode { 249 | border-color: #dd2c00; 250 | } 251 | .flat .dijitTextBoxErrorFocused, 252 | .flat .dijitTextBoxErrorFocused .dijitButtonNode { 253 | border: 1px solid #bc2500; 254 | } 255 | .flat .dijitValidationTextBoxError .dijitValidationContainer { 256 | color: #dd2c00; 257 | width: 18px; 258 | font-family: "flat-icon"; 259 | speak: none; 260 | font-style: normal; 261 | font-weight: normal; 262 | font-variant: normal; 263 | text-transform: none; 264 | line-height: 1; 265 | font-size: 16px; 266 | -webkit-font-smoothing: antialiased; 267 | -moz-osx-font-smoothing: grayscale; 268 | font-size: 18px; 269 | } 270 | .flat .dijitValidationTextBoxError .dijitValidationContainer:before { 271 | content: "\f017"; 272 | } 273 | .flat .dijitValidationTextBoxError .dijitValidationIcon { 274 | display: none; 275 | } 276 | -------------------------------------------------------------------------------- /css/flat/dijit/form/TextBox.styl: -------------------------------------------------------------------------------- 1 | /* Text Inputs: [TextBox | DateTextBox | CurrencyTextBox | ValidationTextBox | ...] | TextArea 2 | * Mainly includes: 3 | * 4 | * 1. Containers 5 | * .dijitTextBox 6 | * .dijitInputField - container that wraps "dijitInputInner" or "dijitPlaceHolder" 7 | * 8 | * 2. Textbox input 9 | * .dijitInputInner 10 | * .dijitPlaceHolder 11 | * 12 | * 3. States - Hover, Focused, Disabled, Error, Error while Focused e.g. 13 | * .dijitTextBoxHover 14 | * .dijitTextBoxFocused 15 | * .dijitTextBoxDisabled 16 | * .dijitTextBoxError 17 | * .dijitTextBoxErrorFocused 18 | * 19 | */ 20 | 21 | @import 'dijit_form_variables'; 22 | 23 | .{$theme-name} { 24 | 25 | .dijitTextBox, 26 | .dijitInputInner { 27 | line-height: $line-height; 28 | } 29 | 30 | .dijitTextBox { 31 | background: $input-background; 32 | border: 1px solid $input-border-color; 33 | border-radius: $input-border-radius; 34 | transition: border 0.2s linear 0s, box-shadow 0.2s linear 0s; 35 | } 36 | 37 | .dijitTextArea { 38 | padding: $input-padding $input-padding + 2px; 39 | } 40 | 41 | .dijitTextBox { 42 | .dijitInputField { 43 | padding: 0 $input-padding; 44 | margin:0 2px; 45 | } 46 | } 47 | 48 | create-alternative-textboxes($button-alternative-colors); 49 | 50 | .dijitTextBox .dijitInputInner, 51 | .dijitValidationTextBox .dijitValidationContainer, 52 | .dijitTextBox .dijitInputField .dijitPlaceHolder { 53 | padding: $input-padding; 54 | } 55 | 56 | // hover 57 | .dijitTextBoxHover { 58 | border-color: $input-hover-border-color; 59 | transition-duration: .25s; 60 | } 61 | 62 | // focused 63 | .dijitTextBoxFocused { 64 | border-color: $input-focused-border-color; 65 | transition-duration: .1s; 66 | } 67 | 68 | // disabled 69 | .dijitTextBoxDisabled { 70 | color: $input-disabled-color; 71 | background-color: $input-disabled-background-color; 72 | border-color: $input-disabled-border-color; 73 | } 74 | 75 | create-alternative-textboxes-disabled($button-alternative-colors); 76 | 77 | // error 78 | .dijitTextBoxError, 79 | .dijitTextBoxError .dijitButtonNode { 80 | border-color: $input-error-border-color; 81 | } 82 | 83 | // error: focused 84 | .dijitTextBoxErrorFocused, 85 | .dijitTextBoxErrorFocused .dijitButtonNode { 86 | border: $input-focused-error-border; 87 | } 88 | 89 | // error: icon 90 | .dijitValidationTextBoxError { 91 | .dijitValidationContainer { 92 | color: $input-error-icon-background-color; 93 | width: $input-error-icon-width; 94 | _icon-core-style(); 95 | font-size: $input-error-icon-width; 96 | &:before { 97 | content: $icon-error; 98 | } 99 | } 100 | .dijitValidationIcon { 101 | display: none; 102 | } 103 | } 104 | } -------------------------------------------------------------------------------- /css/flat/dijit/form/TextBox_rtl.css: -------------------------------------------------------------------------------- 1 | .flat .dijitTextBoxRtl .dijitValidationContainer, 2 | .flat .dijitTextBoxRtl .dijitSpinnerButtonContainer { 3 | border-right-width: 1px !important; 4 | border-left-width: 0 !important; 5 | } 6 | .flat .dijitTextBoxRtlError .dijitValidationContainer { 7 | border-left-width: 0; 8 | border-right-width: 1px; 9 | } 10 | .flat .dijitRtl .dijitPlaceHolder { 11 | left: auto; 12 | right: 0; 13 | } 14 | .flat .dijitTextBoxRtl .dijitSpinnerButtonContainer, 15 | .flat .dijitValidationTextBoxRtl .dijitValidationContainer, 16 | .flat .dijitTextBoxRtl .dijitArrowButtonContainer { 17 | float: left; 18 | } 19 | .flat div.dijitNumberTextBoxRtl { 20 | text-align: right; 21 | } 22 | -------------------------------------------------------------------------------- /css/flat/dijit/form/TextBox_rtl.styl: -------------------------------------------------------------------------------- 1 | @import 'dijit_form_variables'; 2 | 3 | .{$theme-name} { 4 | .dijitTextBoxRtl .dijitValidationContainer, 5 | .dijitTextBoxRtl .dijitSpinnerButtonContainer { 6 | border-right-width: 1px !important; 7 | border-left-width: 0 !important; 8 | } 9 | 10 | .dijitTextBoxRtlError .dijitValidationContainer { 11 | border-left-width: 0; 12 | border-right-width: 1px; 13 | } 14 | 15 | .dijitRtl .dijitPlaceHolder { 16 | left: auto; 17 | right: 0; 18 | } 19 | 20 | .dijitTextBoxRtl .dijitSpinnerButtonContainer, 21 | .dijitValidationTextBoxRtl .dijitValidationContainer, 22 | .dijitTextBoxRtl .dijitArrowButtonContainer { 23 | float: left; 24 | } 25 | 26 | div.dijitNumberTextBoxRtl { 27 | text-align: right; 28 | } 29 | 30 | } -------------------------------------------------------------------------------- /css/flat/dijit/form/dijit_form_variables.styl: -------------------------------------------------------------------------------- 1 | /* dijit/form/* variables */ 2 | 3 | @import '../../variables'; 4 | 5 | /* Button (default) */ 6 | 7 | $button-default-color = $theme-base-color; 8 | $button-default-border-color = $border-color; 9 | $button-padding = $padding $padding * 3; 10 | $button-border-radius = $border-radius; 11 | 12 | // arrow button 13 | $button-arrow-width = $line-height; // The arrow button size will be 30px by 30px 14 | $button-arrow-padding = $padding; 15 | 16 | // disabled 17 | $button-disabled-color = $disabled-color; 18 | $button-disabled-background-color = $disabled-background-color; 19 | $button-disabled-border-color = $disabled-border-color; 20 | 21 | // alternatice button styles 22 | 23 | $button-alternative-text-color = $theme-base-color; 24 | $button-alternative-colors = { 25 | alt-primary: $primary, 26 | alt-success: $success, 27 | alt-info: $info, 28 | alt-warning: $warning, 29 | alt-danger: $danger, 30 | alt-inverse: $inverse 31 | }; 32 | 33 | /* Text Inputs (textbox, textarea, validation textbox, etc.) */ 34 | 35 | $input-padding = $padding; 36 | $input-border-radius = $border-radius; 37 | 38 | // normal 39 | $input-border-color = $border-color; 40 | $input-background = $theme-base-color; 41 | 42 | // hover 43 | $input-hover-border-color = $theme-base; 44 | 45 | // focused 46 | $input-focused-border-color = $theme-base; 47 | 48 | // disabled 49 | $input-disabled-color = $disabled-color; 50 | $input-disabled-background-color = $disabled-background-color; 51 | $input-disabled-border-color = $disabled-border-color; 52 | 53 | // error 54 | $input-error-border-color = $error; 55 | 56 | // error: focused 57 | $input-focused-error-border = 1px solid darken($error, 15%); 58 | 59 | // error icon 60 | $input-error-icon-width = 18px; // the width of the error icon container and icon height 61 | $input-error-icon-background-color = $error; 62 | 63 | /* CheckBox (and Checkbox Icon) */ 64 | 65 | $checkbox-height = 16px; 66 | $checkbox-width = 16px; 67 | $checkbox-padding = 0; 68 | $checkbox-border-radius = 2px; 69 | $checkbox-icon-size = $icon-size; 70 | $checkbox-icon = "\f00c"; 71 | 72 | // normal 73 | $checkbox-background-color = $theme-base-color; 74 | $checkbox-border-color = $border-color; 75 | 76 | // checked 77 | $checkbox-checked-icon-color = $theme-base-color; 78 | $checkbox-checked-background-color = $theme-base; 79 | $checkbox-checked-border-color = $theme-base; 80 | 81 | // hover 82 | // hover unchecked 83 | $checkbox-hover-unchecked-background-color = $checkbox-background-color; 84 | $checkbox-hover-unchecked-border-color = 1px solid $theme-base; 85 | 86 | // hover checked 87 | $checkbox-hover-checked-background-color = lighten($checkbox-checked-background-color, 15%); 88 | $checkbox-hover-checked-border-color = $checkbox-checked-border-color; 89 | 90 | // Checkbox icon (within a widget, e.g. toggle button) 91 | $checkbox-icon-checked-icon-color = $theme-base; 92 | $checkbox-icon-padding = 0; 93 | 94 | // disabled 95 | $checkbox-disabled-color = $disabled-color; 96 | $checkbox-disabled-background-color = $disabled-background-color; 97 | $checkbox-disabled-border-color = $disabled-border-color; 98 | $checkbox-checked-disabled-color = darken($checkbox-checked-icon-color, 35%); // may need a &:before for icon in Checkbox.styl 99 | $checkbox-checked-disabled-background-color = lighten($checkbox-checked-background-color, 35%); 100 | $checkbox-checked-disabled-border-color = $checkbox-checked-disabled-background-color; 101 | 102 | /* Radio (and Radio Icon)the styles are using pure CSS */ 103 | 104 | $radio-height = 16px; 105 | $radio-width = 16px; 106 | $radio-icon-size = 16px; 107 | 108 | // normal 109 | $radio-background-color = $theme-base-color; 110 | $radio-border-color = $theme-base; 111 | $radio-border-radius = 50%; 112 | 113 | // checked 114 | $radio-checked-color = $theme-base; 115 | 116 | // hover 117 | $radio-hover-border-color = lighten($radio-checked-color, 25%); 118 | 119 | // disabled 120 | $radio-disabled-background-color = $disabled-background-color; 121 | $radio-disabled-border-color = $disabled-border-color; 122 | $radio-checked-disabled-color = lighten($radio-checked-color, 35%); // both border and check 123 | 124 | /* Select (only for the button part, the styles for the "dropdown" are defined in the "Menu" section) */ 125 | 126 | $select-border = 1px solid $border-color; 127 | $select-button-border-radius = $border-radius * (2/3); 128 | 129 | // Select's normal, hover, active and disabled styles are the same as "form/Button" 130 | 131 | // focus 132 | $select-focus-border = $select-border; 133 | 134 | // icons 135 | $select-date-icon = "\f01e"; 136 | $select-time-icon = "\f01f"; 137 | 138 | /* Slider */ 139 | 140 | // bar 141 | $slider-bar-width = 3px;// the height for the horizontal slider and the width for the vertical slider 142 | $slider-bar-radius = $slider-bar-width * .5; 143 | $slider-bar-spacing = $padding;// the spacing between the buttons and the bar 144 | 145 | // honrizontal slider 146 | // normal 147 | $slider-progressbar-background-color = $theme-base;// Background color for the progress(highlight) part of slider bar 148 | $slider-remainingbar-background-color = $border-color;// Background color for the remaining part of slider bar 149 | 150 | // hover 151 | $slider-hovered-progressbar-border-color = darken($theme-base, 25%); 152 | 153 | // focus 154 | $slider-focused-progressbar-border-color = $slider-progressbar-border-color; 155 | 156 | // vertical slider 157 | // normal 158 | $slider-progressbar-verticalr-background-color = $theme-base; 159 | $slider-remainingbar-vertical-background-color = $slider-remainingbar-background-color; 160 | 161 | // hover 162 | $slider-hovered-progressbar-vertical-border-color = $slider-hovered-progressbar-border-color; 163 | 164 | // focus 165 | $slider-focused-progressbar-vertical-border-color = $slider-progressbar-vertical-border-color; 166 | 167 | // thumbs 168 | $slider-thumb-background-color = $theme-base-color; 169 | $slider-thumb-box-shadow = $shadow-depth1; 170 | $slider-thumb-border-radius = 50%; 171 | $slider-thumb-border-color = $theme-base; 172 | $slider-thumb-height = 16px; 173 | $slider-thumb-width = 16px; 174 | 175 | // The center part of the thumb 176 | $slider-thumb-inner-border-radius = 50%; 177 | $slider-thumb-inner-height = 10px; 178 | $slider-thumb-inner-width = 10px; 179 | $slider-thumb-inner-background-color = $theme-base; 180 | 181 | // hover (& focused) 182 | $slider-thumb-hover-box-shadow = $shadow-depth2; 183 | 184 | // label 185 | $slider-label-text-color = $grey-dark; // text color for labeling 186 | 187 | // ruler 188 | $slider-ruler-color = $grey-light; 189 | $slider-ruler-padding = $padding * 0.5; 190 | 191 | // increment and decrement buttons 192 | $slider-button-text-color = $theme-base; 193 | $slider-button-width = 20px; 194 | $slider-button-height = $slider-button-width; 195 | $slider-icon-increment = "\f011"; 196 | $slider-icon-decrement = "\f012"; 197 | 198 | /* Number Spinner */ 199 | 200 | $numberspinner-button-border = 1px solid $border-color; 201 | $numberspinner-button-inner-padding = $padding; 202 | $numberspinner-button-width = ($line-height + $numberspinner-button-inner-padding * 2) + 2px; // 30px 203 | $numberspinner-button-padding = 0; 204 | $numberspinner-arrow-padding = $padding; 205 | $numberspinner-button-border-radius = $border-radius * (2/3); 206 | 207 | // icons 208 | $numberspinner-icon-up = $icon-drop-up; 209 | $numberspinner-icon-down = $icon-drop-down; 210 | 211 | // number spinner button's normal, active and disabled status styles are the same as "form/Button" 212 | // and the styles of the text input field are the same as "form/TextBox", which is defined in "form/Common.styl" 213 | -------------------------------------------------------------------------------- /css/flat/dijit/images/loadingAnimation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gbochenek/vector-tile-demo-js/4efb32c4583dd72898533309a79d171e6995e443/css/flat/dijit/images/loadingAnimation.gif -------------------------------------------------------------------------------- /css/flat/dijit/images/progressBarStrips.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gbochenek/vector-tile-demo-js/4efb32c4583dd72898533309a79d171e6995e443/css/flat/dijit/images/progressBarStrips.png -------------------------------------------------------------------------------- /css/flat/dijit/layout/AccordionContainer.css: -------------------------------------------------------------------------------- 1 | /* Accordion 2 | * 3 | * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer) 4 | * and the title inside of it (dijitAccordionTitle). There are 4 basic states to style: 5 | * 6 | * 1. closed pane (and default styling): 7 | * .dijitAccordionInnerContainer - container for each accordion child 8 | * .dijitAccordionTitle - title for each accordion child 9 | * 10 | * 2. active closed pane (ie, mouse down on a title bar) 11 | * .dijitAccordionInnerContainerActive - for background-color, border 12 | * .dijitAccordionInnerContainerActive dijitAccordionTitle - for text color 13 | * 14 | * 3. open pane (expanded child) 15 | * .dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane) 16 | * setting a margin so that there's blue trim all the way around the child 17 | * 18 | * These rules need to override the closed pane active: 19 | * 20 | * .dijitAccordionInnerContainerSelected - for background-color, border 21 | * .dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color 22 | * 23 | * 4. hovered pane, open or closed 24 | * The selectors below affect hovering over both a closed pane (ie, hovering a title bar), 25 | * and hovering over an open pane. Also, treat mouse down on an open pane as a hover: 26 | * 27 | * .dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border 28 | * .dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color 29 | */ 30 | .flat .dijitAccordionContainer { 31 | border: 0 none; 32 | border-radius: 3px; 33 | } 34 | .flat .dijitAccordionInnerContainer { 35 | background-color: #fff; 36 | border: 1px solid #9e9e9e; 37 | border-radius: 3px; 38 | -webkit-transition-property: background-color, border; 39 | -moz-transition-property: background-color, border; 40 | -o-transition-property: background-color, border; 41 | -ms-transition-property: background-color, border; 42 | transition-property: background-color, border; 43 | -webkit-transition-duration: 0.3s; 44 | -moz-transition-duration: 0.3s; 45 | -o-transition-duration: 0.3s; 46 | -ms-transition-duration: 0.3s; 47 | transition-duration: 0.3s; 48 | -webkit-transition-timing-function: linear; 49 | -moz-transition-timing-function: linear; 50 | -o-transition-timing-function: linear; 51 | -ms-transition-timing-function: linear; 52 | transition-timing-function: linear; 53 | } 54 | .flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer { 55 | margin-top: 0; 56 | position: relative; 57 | } 58 | .flat .dijitAccordionTitle { 59 | border-style: solid; 60 | border-width: 1px; 61 | border-color: #9e9e9e; 62 | padding: 4px; 63 | border-radius: 3px; 64 | line-height: 20px; 65 | cursor: pointer; 66 | -webkit-transition: all 0.05s linear; 67 | -moz-transition: all 0.05s linear; 68 | -o-transition: all 0.05s linear; 69 | -ms-transition: all 0.05s linear; 70 | transition: all 0.05s linear; 71 | background: #fff; 72 | border: 0 none; 73 | border-radius: 3px; 74 | } 75 | .flat .dijitAccordionTitle .arrowTextUp, 76 | .flat .dijitAccordionTitle .arrowTextDown { 77 | display: none; 78 | float: right; 79 | font-family: "flat-icon"; 80 | speak: none; 81 | font-style: normal; 82 | font-weight: normal; 83 | font-variant: normal; 84 | text-transform: none; 85 | line-height: 1; 86 | font-size: 16px; 87 | -webkit-font-smoothing: antialiased; 88 | -moz-osx-font-smoothing: grayscale; 89 | text-align: center; 90 | font-size: 0px; 91 | } 92 | .flat .dijitAccordionTitle .arrowTextUp:before, 93 | .flat .dijitAccordionTitle .arrowTextDown:before { 94 | content: "\f007"; 95 | font-size: 18px; 96 | } 97 | .flat .dijitAccordionTitle .arrowTextUp { 98 | display: block; 99 | } 100 | .flat .dijitAccordionTitle .arrowTextUp:before { 101 | content: "\f006"; 102 | } 103 | .flat .dijitAccordionInnerContainerHover .dijitAccordionTitle { 104 | -webkit-transition: all 0.1s; 105 | -moz-transition: all 0.1s; 106 | -o-transition: all 0.1s; 107 | -ms-transition: all 0.1s; 108 | transition: all 0.1s; 109 | background: #f2f2f2; 110 | border-color: #d9d9d9; 111 | } 112 | .flat .dijitAccordionInnerContainerActive .dijitAccordionTitle { 113 | -webkit-transition: none; 114 | -moz-transition: none; 115 | -o-transition: none; 116 | -ms-transition: none; 117 | transition: none; 118 | outline: none; 119 | -webkit-box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); 120 | box-shadow: inset 0 3px 5px rgba(0,0,0,0.05); 121 | background: #e0e0e0; 122 | border-color: #b3b3b3; 123 | } 124 | .flat .dijitAccordionInnerContainerSelected { 125 | border: 0 none; 126 | } 127 | .flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle { 128 | color: #fff; 129 | background-color: #2196f3; 130 | border-radius: 3px 3px 0 0; 131 | } 132 | .flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextUp { 133 | display: none; 134 | } 135 | .flat .dijitAccordionInnerContainerSelected .dijitAccordionTitle .arrowTextDown { 136 | display: block; 137 | } 138 | .flat .dijitAccordionContainer .dijitAccordionChildWrapper { 139 | background-color: #fff; 140 | border: 1px solid #9e9e9e; 141 | border-top: 0 none; 142 | position: relative; 143 | z-index: 1; 144 | clear: both; 145 | border-radius: 0 0 3px 3px; 146 | } 147 | .flat .dijitAccordionInnerContainer { 148 | border-radius: 0; 149 | } 150 | .flat .dijitAccordionInnerContainer .dijitAccordionTitle { 151 | border-radius: 0; 152 | } 153 | .flat .dijitAccordionInnerContainer:not(:last-child) .dijitAccordionChildWrapper { 154 | border-radius: 0; 155 | } 156 | .flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainer { 157 | border-top: 0 none; 158 | } 159 | .flat .dijitAccordionInnerContainer +.dijitAccordionInnerContainerSelected:last-child .dijitAccordionTitle { 160 | border-radius: 0; 161 | } 162 | .flat .dijitAccordionInnerContainer:first-child, 163 | .flat .dijitAccordionInnerContainer:first-child .dijitAccordionTitle { 164 | border-radius: 3px 3px 0 0; 165 | } 166 | .flat .dijitAccordionInnerContainer:last-child, 167 | .flat .dijitAccordionInnerContainer:last-child .dijitAccordionTitle { 168 | border-radius: 0 0 3px 3px; 169 | } 170 | -------------------------------------------------------------------------------- /css/flat/dijit/layout/AccordionContainer.styl: -------------------------------------------------------------------------------- 1 | /* Accordion 2 | * 3 | * Styling AccordionContainer basically means styling the accordion pane (dijitAccordionInnerContainer) 4 | * and the title inside of it (dijitAccordionTitle). There are 4 basic states to style: 5 | * 6 | * 1. closed pane (and default styling): 7 | * .dijitAccordionInnerContainer - container for each accordion child 8 | * .dijitAccordionTitle - title for each accordion child 9 | * 10 | * 2. active closed pane (ie, mouse down on a title bar) 11 | * .dijitAccordionInnerContainerActive - for background-color, border 12 | * .dijitAccordionInnerContainerActive dijitAccordionTitle - for text color 13 | * 14 | * 3. open pane (expanded child) 15 | * .dijitAccordionChildWrapper - wraps around the child widget (typically ContentPane) 16 | * setting a margin so that there's blue trim all the way around the child 17 | * 18 | * These rules need to override the closed pane active: 19 | * 20 | * .dijitAccordionInnerContainerSelected - for background-color, border 21 | * .dijitAccordionInnerContainerSelected .dijitAccordionTitle - for text color 22 | * 23 | * 4. hovered pane, open or closed 24 | * The selectors below affect hovering over both a closed pane (ie, hovering a title bar), 25 | * and hovering over an open pane. Also, treat mouse down on an open pane as a hover: 26 | * 27 | * .dijitAccordionInnerContainerHover, .dijitAccordionInnerContainerSelectedActive - for background-color, border 28 | * .dijitAccordionInnerContainerHover .dijitAccordionTitle - for text color 29 | */ 30 | 31 | @import 'dijit_layout_variables'; 32 | 33 | .{$theme-name} { 34 | 35 | .dijitAccordionContainer { 36 | border: 0 none; 37 | border-radius: $accordion-border-radius; 38 | } 39 | 40 | .dijitAccordionInnerContainer { 41 | background-color: $accordion-background-color; 42 | border: 1px solid $accordion-border-color; 43 | border-radius: $accordion-border-radius; 44 | transition-property: background-color, border; 45 | transition-duration: .3s; 46 | transition-timing-function: linear; 47 | 48 | +.dijitAccordionInnerContainer { 49 | margin-top: $accordion-spacing; 50 | position: relative; 51 | } 52 | } 53 | 54 | /* title bar */ 55 | 56 | .dijitAccordionTitle { 57 | button-style(); 58 | border: 0 none; 59 | border-radius: $accordion-border-radius; 60 | 61 | .arrowTextUp, 62 | .arrowTextDown { 63 | display: none; 64 | float: right; 65 | _icon-core-style(); 66 | text-align: center; 67 | font-size: 0px; 68 | &:before { 69 | content: $icon-collapse; 70 | font-size: $icon-expand-collapse-size; 71 | } 72 | } 73 | .arrowTextUp { 74 | display: block; 75 | &:before { 76 | content: $icon-expand; 77 | } 78 | } 79 | } 80 | 81 | /* Hover */ 82 | 83 | .dijitAccordionInnerContainerHover .dijitAccordionTitle { 84 | button-hover-style(); 85 | } 86 | 87 | /* Active */ 88 | 89 | .dijitAccordionInnerContainerActive .dijitAccordionTitle { 90 | button-active-style(); 91 | } 92 | 93 | /* Selected */ 94 | 95 | .dijitAccordionInnerContainerSelected { 96 | border: 0 none; 97 | .dijitAccordionTitle { 98 | color: $accordion-title-bar-checked-text-color; 99 | background-color: $accordion-title-bar-checked-background-color; 100 | border-radius: $accordion-border-radius $accordion-border-radius 0 0; 101 | 102 | .arrowTextUp { 103 | display: none; 104 | } 105 | .arrowTextDown { 106 | display: block; 107 | } 108 | } 109 | } 110 | 111 | /* content wrapper */ 112 | 113 | .dijitAccordionContainer .dijitAccordionChildWrapper { 114 | background-color: $accordion-content-background-color; 115 | border: 1px solid $accordion-content-border-color; 116 | border-top: 0 none; 117 | position: relative; 118 | z-index: 1; 119 | clear: both; 120 | border-radius: 0 0 $accordion-border-radius $accordion-border-radius; 121 | } 122 | 123 | 124 | /* if the spacing between panes is 0 */ 125 | 126 | if($accordion-spacing[0] <= "0") { 127 | .dijitAccordionInnerContainer { 128 | border-radius: 0; 129 | 130 | .dijitAccordionTitle { 131 | border-radius: 0; 132 | } 133 | 134 | &:not(:last-child) { 135 | .dijitAccordionChildWrapper { 136 | border-radius: 0; 137 | } 138 | } 139 | 140 | +.dijitAccordionInnerContainer { 141 | border-top: 0 none; 142 | } 143 | +.dijitAccordionInnerContainerSelected:last-child { 144 | .dijitAccordionTitle { 145 | border-radius: 0; 146 | } 147 | } 148 | 149 | &:first-child, 150 | &:first-child .dijitAccordionTitle { 151 | border-radius: $accordion-border-radius $accordion-border-radius 0 0; 152 | } 153 | &:last-child, 154 | &:last-child .dijitAccordionTitle { 155 | border-radius: 0 0 $accordion-border-radius $accordion-border-radius; 156 | } 157 | } 158 | } 159 | 160 | } -------------------------------------------------------------------------------- /css/flat/dijit/layout/AccordionContainer_rtl.css: -------------------------------------------------------------------------------- 1 | .flat .dijitAccordionTitle .arrowTextUp, 2 | .flat .dijitAccordionTitle .arrowTextDown { 3 | float: left; 4 | } 5 | -------------------------------------------------------------------------------- /css/flat/dijit/layout/AccordionContainer_rtl.styl: -------------------------------------------------------------------------------- 1 | @import 'dijit_layout_variables'; 2 | 3 | .{$theme-name} { 4 | 5 | .dijitAccordionTitle { 6 | .arrowTextUp, 7 | .arrowTextDown { 8 | float: left; 9 | } 10 | } 11 | 12 | } -------------------------------------------------------------------------------- /css/flat/dijit/layout/BorderContainer.css: -------------------------------------------------------------------------------- 1 | /* BorderContainer 2 | 3 | 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. 4 | 5 | Styling the BorderContainer widget consists of the following: 6 | 7 | .dijitBorderContainer - for border and padding of the entire border container 8 | 9 | .dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer. 10 | 11 | .dijitBorderContainer-dijitTabContainerTop, 12 | .dijitBorderContainer-dijitTabContainerBottom, 13 | .dijitBorderContainer-dijitTabContainerLeft, 14 | .dijitBorderContainer-dijitTabContainerRight, 15 | .dijitBorderContainer-dijitAccordionContainer -for border of the border containers within TabContainer or AccordionContainer widget 16 | 17 | .dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers 18 | 19 | Splitters and gutters: 20 | 21 | .dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter 22 | .dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter 23 | .dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter 24 | .dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter 25 | .dijitSplitterHHover - for background-color of a hovered horizontal splitter 26 | .dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter 27 | .dijitSplitterVHover - for background-color of a hovered vertical splitter 28 | .dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter 29 | .dijitSplitterHActive - for background-color of an active horizontal splitter 30 | .dijitSplitterVActive - for background-color of an active horizontal splitter 31 | */ 32 | .flat .dijitBorderContainer { 33 | /* matches the width of the splitters between panes */ 34 | padding: 5px; 35 | } 36 | .flat .dijitSplitContainer-child, 37 | .flat .dijitBorderContainer-child { 38 | border: 1px solid #9e9e9e; 39 | } 40 | .flat .dijitBorderContainer-dijitTabContainerTop, 41 | .flat .dijitBorderContainer-dijitTabContainerBottom, 42 | .flat .dijitBorderContainer-dijitTabContainerLeft, 43 | .flat .dijitBorderContainer-dijitTabContainerRight, 44 | .flat .dijitBorderContainer-dijitAccordionContainer { 45 | /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper), 46 | * so override rule setting border on domNode 47 | */ 48 | border: none; 49 | } 50 | .flat .dijitBorderContainer-dijitBorderContainer { 51 | border: 0; 52 | padding: 0; 53 | } 54 | .flat .dijitSplitterH, 55 | .flat .dijitGutterH { 56 | background: none; 57 | border: 0; 58 | height: 5px; 59 | } 60 | .flat .dijitSplitterH .dijitSplitterThumb { 61 | background: #9e9e9e; 62 | height: 1px; 63 | top: 2px; 64 | width: 19px; 65 | } 66 | .flat .dijitSplitterV, 67 | .flat .dijitGutterV { 68 | background: none; 69 | border: 0; 70 | width: 5px; 71 | margin: 0; 72 | } 73 | .flat .dijitSplitterV .dijitSplitterThumb { 74 | background: #9e9e9e; 75 | height: 19px; 76 | left: 2px; 77 | width: 1px; 78 | margin: 0; 79 | } 80 | .flat .dijitSplitterHHover, 81 | .flat .dijitSplitterVHover { 82 | font-size: 1px; 83 | background: #f2f2f2; 84 | } 85 | .flat .dijitSplitterHHover .dijitSplitterThumb, 86 | .flat .dijitSplitterVHover .dijitSplitterThumb { 87 | background: #767676; 88 | } 89 | .flat .dijitSplitterHActive, 90 | .flat .dijitSplitterVActive { 91 | font-size: 1px; 92 | background: #f2f2f2; 93 | } 94 | .flat .dijitSplitterHActive .dijitSplitterThumb, 95 | .flat .dijitSplitterVActive .dijitSplitterThumb { 96 | background: #767676; 97 | } 98 | -------------------------------------------------------------------------------- /css/flat/dijit/layout/BorderContainer.styl: -------------------------------------------------------------------------------- 1 | /* BorderContainer 2 | 3 | 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. 4 | 5 | Styling the BorderContainer widget consists of the following: 6 | 7 | .dijitBorderContainer - for border and padding of the entire border container 8 | 9 | .dijitSplitContainer-child, .dijitBorderContainer-child - for border or child panes of the border container. By default borders are put on all children of BorderContainer. 10 | 11 | .dijitBorderContainer-dijitTabContainerTop, 12 | .dijitBorderContainer-dijitTabContainerBottom, 13 | .dijitBorderContainer-dijitTabContainerLeft, 14 | .dijitBorderContainer-dijitTabContainerRight, 15 | .dijitBorderContainer-dijitAccordionContainer -for border of the border containers within TabContainer or AccordionContainer widget 16 | 17 | .dijitBorderContainer-dijitBorderContainer - for border and padding of nested BorderContainers 18 | 19 | Splitters and gutters: 20 | 21 | .dijitSplitterH, .dijitGutterH - for height, background, and border of a horizontal splitter and gutter 22 | .dijitSplitterH .dijitSplitterThumb - for color, height/width of the thumb on a horizontal splitter 23 | .dijitSplitterV, .dijitGutterV - - for height, background, and border of a vertical splitter and gutter 24 | .dijitSplitterV .dijitSplitterThumb - for color, height/width of the thumb on a vertical splitter 25 | .dijitSplitterHHover - for background-color of a hovered horizontal splitter 26 | .dijitSplitterHHover .dijitSplitterThumb - for background-color of a hovered thumb on a horizontal splitter 27 | .dijitSplitterVHover - for background-color of a hovered vertical splitter 28 | .dijitSplitterVHover .dijitSplitterThumb - for background-color of a hovered thumb on a vertical splitter 29 | .dijitSplitterHActive - for background-color of an active horizontal splitter 30 | .dijitSplitterVActive - for background-color of an active horizontal splitter 31 | */ 32 | 33 | @import 'dijit_layout_variables'; 34 | 35 | .{$theme-name} { 36 | 37 | .dijitBorderContainer { 38 | /* matches the width of the splitters between panes */ 39 | padding: $splitter-size; 40 | } 41 | 42 | .dijitSplitContainer-child, 43 | .dijitBorderContainer-child { 44 | border: 1px solid $bordercontainer-border-color; 45 | } 46 | 47 | .dijitBorderContainer-dijitTabContainerTop, 48 | .dijitBorderContainer-dijitTabContainerBottom, 49 | .dijitBorderContainer-dijitTabContainerLeft, 50 | .dijitBorderContainer-dijitTabContainerRight, 51 | .dijitBorderContainer-dijitAccordionContainer { 52 | /* except that TabContainer defines borders on it's sub-nodes (tablist and dijitTabPaneWrapper), 53 | * so override rule setting border on domNode 54 | */ 55 | border: none; 56 | } 57 | 58 | .dijitBorderContainer-dijitBorderContainer { 59 | border: 0; 60 | padding: 0; 61 | } 62 | 63 | /* Splitters and gutters */ 64 | 65 | .dijitSplitterH, 66 | .dijitGutterH { 67 | background:none; 68 | border:0; 69 | height: $splitter-size; 70 | } 71 | 72 | .dijitSplitterH .dijitSplitterThumb { 73 | background: $splitter-color; 74 | height: 1px; 75 | top: isEven($splitter-size) ? half($splitter-size) : half($splitter-size - 1); 76 | width: 19px; 77 | } 78 | 79 | .dijitSplitterV, 80 | .dijitGutterV { 81 | background: $splitter-background-color; 82 | border: 0; 83 | width: $splitter-size; 84 | margin: 0; 85 | } 86 | 87 | .dijitSplitterV .dijitSplitterThumb { 88 | background: $splitter-color; 89 | height: 19px; 90 | left: isEven($splitter-size) ? half($splitter-size) : half($splitter-size - 1); 91 | width: 1px; 92 | margin: 0; 93 | } 94 | 95 | /* hovered */ 96 | .dijitSplitterHHover, 97 | .dijitSplitterVHover { 98 | font-size: 1px; 99 | background: $splitter-hovered-background-color; 100 | 101 | .dijitSplitterThumb { 102 | background: $splitter-hovered-color; 103 | } 104 | } 105 | 106 | /* active (dragged) */ 107 | 108 | .dijitSplitterHActive, 109 | .dijitSplitterVActive { 110 | font-size: 1px; 111 | background: $splitter-dragged-background-color; 112 | .dijitSplitterThumb { 113 | background: $splitter-dragged-color; 114 | } 115 | } 116 | 117 | } -------------------------------------------------------------------------------- /css/flat/dijit/layout/ContentPane.css: -------------------------------------------------------------------------------- 1 | /* ContentPane 2 | * 3 | * .dijitContentPane 4 | * set padding for basic content pane 5 | * 6 | * Nested layouts: 7 | * 8 | * .dijitTabContainerTop-dijitContentPane, 9 | * .dijitTabContainerLeft-dijitContentPane, 10 | * .dijitTabContainerBottom-dijitContentPane, 11 | * .dijitTabContainerRight-dijitContentPane 12 | * set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container 13 | * 14 | * .dijitAccordionContainer-dijitContentPane 15 | * set background-color and padding of ContentPane nested within Accordion 16 | * 17 | * .dijitSplitContainer-dijitContentPane, 18 | * set background-color and padding of ContentPane nested within a SplitContainer 19 | * 20 | * .dijitBorderContainer-dijitContentPane 21 | * set background-color and padding of ContentPane nested within a BorderContainer 22 | */ 23 | .flat .dijitContentPane { 24 | background-color: #fff; 25 | padding: 8px; 26 | } 27 | .flat .dijitTabContainerTop-dijitContentPane, 28 | .flat .dijitTabContainerLeft-dijitContentPane, 29 | .flat .dijitTabContainerBottom-dijitContentPane, 30 | .flat .dijitTabContainerRight-dijitContentPane, 31 | .flat .dijitAccordionContainer-dijitContentPane { 32 | background-color: #fff; 33 | padding: 8px; 34 | left: 0 !important; 35 | top: 0 !important; 36 | } 37 | -------------------------------------------------------------------------------- /css/flat/dijit/layout/ContentPane.styl: -------------------------------------------------------------------------------- 1 | /* ContentPane 2 | * 3 | * .dijitContentPane 4 | * set padding for basic content pane 5 | * 6 | * Nested layouts: 7 | * 8 | * .dijitTabContainerTop-dijitContentPane, 9 | * .dijitTabContainerLeft-dijitContentPane, 10 | * .dijitTabContainerBottom-dijitContentPane, 11 | * .dijitTabContainerRight-dijitContentPane 12 | * set background-color and padding of ContentPanes nested within TabContainer (can do top, left, bottom, or right) or Accordion Container 13 | * 14 | * .dijitAccordionContainer-dijitContentPane 15 | * set background-color and padding of ContentPane nested within Accordion 16 | * 17 | * .dijitSplitContainer-dijitContentPane, 18 | * set background-color and padding of ContentPane nested within a SplitContainer 19 | * 20 | * .dijitBorderContainer-dijitContentPane 21 | * set background-color and padding of ContentPane nested within a BorderContainer 22 | */ 23 | 24 | @import 'dijit_layout_variables'; 25 | 26 | .{$theme-name} { 27 | 28 | .dijitContentPane { 29 | background-color: $contentpane-background-color; 30 | padding: $contentpane-padding; 31 | } 32 | 33 | /* contentpane in other layouts */ 34 | .dijitTabContainerTop-dijitContentPane, 35 | .dijitTabContainerLeft-dijitContentPane, 36 | .dijitTabContainerBottom-dijitContentPane, 37 | .dijitTabContainerRight-dijitContentPane, 38 | .dijitAccordionContainer-dijitContentPane { 39 | background-color: $contentpane-nested-background-color; 40 | padding: $contentpane-nested-padding; 41 | left: 0 !important; 42 | top: 0 !important; 43 | } 44 | 45 | } -------------------------------------------------------------------------------- /css/flat/dijit/layout/TabContainer_rtl.css: -------------------------------------------------------------------------------- 1 | .flat .dijitTabContainerTop-tabs .dijitTabRtl, 2 | .flat .dijitTabContainerBottom-tabs .dijitTabRtl { 3 | margin-right: 0; 4 | margin-left: -1px; 5 | } 6 | .flat .dijitTabControllerRtl, 7 | .flat .dijitTabControllerRtl .nowrapTabStrip { 8 | text-align: right; 9 | } 10 | .flat .dijitTabRtl .dijitTabCloseButton { 11 | margin-left: 0; 12 | margin-right: 4px; 13 | } 14 | -------------------------------------------------------------------------------- /css/flat/dijit/layout/TabContainer_rtl.styl: -------------------------------------------------------------------------------- 1 | @import 'dijit_layout_variables'; 2 | 3 | .{$theme-name} { 4 | 5 | .dijitTabContainerTop-tabs, 6 | .dijitTabContainerBottom-tabs { 7 | .dijitTabRtl { 8 | margin-right: 0; 9 | margin-left: -1px; 10 | } 11 | } 12 | 13 | .dijitTabControllerRtl, 14 | .dijitTabControllerRtl .nowrapTabStrip { 15 | text-align: right; 16 | } 17 | 18 | .dijitTabRtl .dijitTabCloseButton { 19 | margin-left: 0; 20 | margin-right: $tab-padding; 21 | } 22 | 23 | } -------------------------------------------------------------------------------- /css/flat/dijit/layout/dijit_layout_variables.styl: -------------------------------------------------------------------------------- 1 | /* dijit/layout/* variables */ 2 | 3 | @import '../../variables'; 4 | 5 | /* BorderContainer*/ 6 | 7 | $bordercontainer-padding = $padding; 8 | $bordercontainer-border-color = $border-color; 9 | 10 | // splitter 11 | $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 12 | $splitter-color = $border-color; // color of the splitter thumb (the 1px wide bar) 13 | $splitter-hovered-color = darken($splitter-color, 25%); 14 | $splitter-dragged-color = $splitter-hovered-color; 15 | $splitter-background-color = none; 16 | $splitter-hovered-background-color = darken(#fff, 5%); 17 | $splitter-dragged-background-color = darken(#fff, 5%); 18 | 19 | /* ContentPane */ 20 | 21 | $contentpane-padding = $padding * 2; 22 | $contentpane-background-color = $theme-base-color; 23 | 24 | // contentpane in other layout widgets (accordion and tab container) 25 | $contentpane-nested-padding = $padding * 2; 26 | $contentpane-nested-background-color = $theme-base-color; 27 | 28 | /* TabContainer */ 29 | 30 | $tab-highlight-color = $theme-base; 31 | $tab-padding = $padding; 32 | $tab-checked-has-highlight-border = true; // whether to have a highlight bar on the edge of the tab 33 | 34 | // TabContainer: wrapper 35 | // (the outer container) 36 | $tab-wrapper-background-color = $theme-base-color; 37 | $tab-wrapper-border-color = $border-color; 38 | $tab-wrapper-border-radius = $border-radius; 39 | 40 | // tabs 41 | $tab-background-color = $tab-wrapper-background-color; 42 | $tab-border-color = transparent; 43 | $tab-spacing = 0; // space between tabs 44 | 45 | // hover 46 | $tab-hover-background-color = darken($theme-base-color, 5%); 47 | 48 | // active 49 | $tab-active-background-color = darken($theme-base-color, 10%); 50 | 51 | // checked 52 | $tab-checked-border-color = $tab-wrapper-border-color; 53 | $tab-checked-background-color = $tab-wrapper-background-color; 54 | $tab-checked-text-color = $grey-dark; 55 | 56 | // icons 57 | $tab-left-icon = "\f004"; 58 | $tab-right-icon = "\f005"; 59 | $tab-menu-icon = "\f006"; 60 | 61 | // close button 62 | $tab-close-button-icon = "\f00e"; 63 | $tab-close-button-opacity = .35; 64 | 65 | // hover 66 | $tab-close-button-hover-opacity = .75; 67 | 68 | // active 69 | $tab-close-button-active-opacity = 1; 70 | 71 | // tab dtrip button 72 | $tab-strip-button-background-color = $tab-background-color; 73 | $tab-strip-button-border-color = $tab-border-color; 74 | 75 | // hover 76 | $tab-strip-button-hover-background-color = $tab-hover-background-color; 77 | 78 | // active 79 | $tab-strip-button-active-background-color = $tab-active-background-color; 80 | 81 | // arrow 82 | $tab-strip-button-arrow-color = $theme-base; 83 | 84 | // tabs: top 85 | $tab-top-padding = $tab-padding * 1.5 $tab-padding * 4; 86 | 87 | // tabs: bottom 88 | $tab-bottom-padding = $tab-top-padding; 89 | 90 | // tabs: left 91 | $tab-left-padding = $tab-padding * 2 $tab-padding * 3; 92 | 93 | // tabs: right 94 | $tab-right-padding = $tab-left-padding; 95 | 96 | // nested tab container 97 | $nestedtab-spacing = $padding; 98 | $nestedtab-padding = $tab-padding $tab-padding * 2; 99 | $nestedtab-border-color = transparent; 100 | $nestedtab-border-radius = $border-radius; 101 | 102 | // normal 103 | $nestedtab-text-color = $theme-base; 104 | 105 | // hover 106 | $nestedtab-hover-background-color = $tab-hover-background-color; 107 | 108 | // active 109 | $nestedtab-active-text-color = $theme-base; 110 | $nestedtab-active-background-color = $tab-active-background-color; 111 | 112 | // checked 113 | $nestedtab-checked-background-color = $theme-base; 114 | $nestedtab-checked-text-color = $theme-base-color; 115 | 116 | /* AccordionContainer */ 117 | 118 | $accordion-spacing = 0; // space between accordion panes; minimum value is 0 119 | $accordion-border-color = $border-color; 120 | $accordion-border-radius = $border-radius; 121 | $accordion-background-color = $theme-base-color; 122 | 123 | // accordion title bar 124 | // normal, hover and active status styles are inherited from "form/Button" 125 | 126 | // checked 127 | $accordion-title-bar-checked-background-color = $theme-base; 128 | $accordion-title-bar-checked-text-color = $theme-base-color; 129 | 130 | // content pane 131 | $accordion-content-border-color = $accordion-border-color; 132 | $accordion-content-background-color = $theme-base-color; 133 | 134 | // icons 135 | // uses common vars directly 136 | -------------------------------------------------------------------------------- /css/flat/dojox/dijit/README.md: -------------------------------------------------------------------------------- 1 | dojox/dijit 2 | -------------------------------------------------------------------------------- /css/flat/dojox/layout/README.md: -------------------------------------------------------------------------------- 1 | dojox/layout -------------------------------------------------------------------------------- /css/flat/flat.css: -------------------------------------------------------------------------------- 1 | /* dijit base */ 2 | @import url("flat_dijit.css"); 3 | 4 | /* dijit */ 5 | @import url("dijit/Calendar.css"); 6 | @import url("dijit/ColorPalette.css"); 7 | @import url("dijit/Common.css"); 8 | @import url("dijit/Dialog.css"); 9 | @import url("dijit/Editor.css"); 10 | @import url("dijit/InlineEditBox.css"); 11 | @import url("dijit/Menu.css"); 12 | @import url("dijit/ProgressBar.css"); 13 | @import url("dijit/TimePicker.css"); 14 | @import url("dijit/TitlePane.css"); 15 | @import url("dijit/Toolbar.css"); 16 | @import url("dijit/Tree.css"); 17 | 18 | /* layout */ 19 | @import url("dijit/layout/AccordionContainer.css"); 20 | @import url("dijit/layout/BorderContainer.css"); 21 | @import url("dijit/layout/ContentPane.css"); 22 | @import url("dijit/layout/TabContainer.css"); 23 | 24 | /* form */ 25 | @import url("dijit/form/Button.css"); 26 | @import url("dijit/form/Checkbox.css"); 27 | @import url("dijit/form/NumberSpinner.css"); 28 | @import url("dijit/form/RadioButton.css"); 29 | @import url("dijit/form/Select.css"); 30 | @import url("dijit/form/Slider.css"); 31 | @import url("dijit/form/TextBox.css"); 32 | 33 | /* icons */ 34 | @import url("icons/flat-icons.css"); 35 | 36 | /* rtl */ 37 | @import url("flat_rtl.css"); 38 | -------------------------------------------------------------------------------- /css/flat/flat_dijit_rtl.css: -------------------------------------------------------------------------------- 1 | .dijitRtl .dijitOffScreen { 2 | /* align on the right side rather than the left so no horizontal scroll bar shown */ 3 | left: auto !important; 4 | right: -10000px !important; 5 | } 6 | 7 | .dijitRtl .dijitPlaceHolder { 8 | left: auto; 9 | right: 0; 10 | } 11 | 12 | /* Menu */ 13 | 14 | .dijitMenuItemRtl { 15 | text-align: right; 16 | } 17 | 18 | /* Button */ 19 | 20 | .dj_iequirks .dijitComboButtonRtl button { 21 | /* workaround bug where label invisible (themeTesterQuirk.html?dir=rtl) */ 22 | float:left; 23 | } 24 | .dj_ie .dijitTextBoxRtl .dijitInputContainer { 25 | clear: right; 26 | } 27 | 28 | /* TextBox, ComboBox, Spinner */ 29 | 30 | .dijitTextBoxRtl .dijitValidationContainer, 31 | .dijitTextBoxRtl .dijitSpinnerButtonContainer, 32 | .dijitComboBoxRtl .dijitArrowButtonContainer { 33 | /* combobox and spinner: line between the input area and the drop down button */ 34 | border-right-width: 1px !important; 35 | border-left-width: 0 !important; 36 | } 37 | 38 | .dijitSpinnerRtl .dijitSpinnerButtonContainer .dijitArrowButton { 39 | right: 0; 40 | left: auto; 41 | } 42 | 43 | .dijitSelectRtl .dijitButtonText { 44 | float: right; 45 | } 46 | 47 | .dijitTextBoxRtl .dijitSpinnerButtonContainer, 48 | .dijitValidationTextBoxRtl .dijitValidationContainer, 49 | .dijitTextBoxRtl .dijitArrowButtonContainer { 50 | float: left; 51 | } 52 | 53 | div.dijitNumberTextBoxRtl { 54 | text-align: right; 55 | } 56 | 57 | /* Calendar */ 58 | 59 | .dijitCalendarRtl .dijitCalendarNextYear { 60 | margin:0 0.55em 0 0; 61 | } 62 | 63 | .dijitCalendarRtl .dijitCalendarPreviousYear { 64 | margin:0 0 0 0.55em; 65 | } 66 | 67 | 68 | /* Slider */ 69 | 70 | .dijitSliderRtl .dijitSliderImageHandleV { 71 | left:auto; 72 | } 73 | 74 | .dijitSliderRtl .dijitSliderImageHandleH { 75 | left:-50%; 76 | } 77 | 78 | .dijitSliderRtl .dijitSliderMoveableH { 79 | right:auto; 80 | left:0; 81 | } 82 | 83 | .dijitSliderRtl .dijitRuleContainerV { 84 | float:right; 85 | } 86 | 87 | .dj_ie .dijitSliderRtl .dijitRuleContainerV { 88 | text-align:right; 89 | } 90 | 91 | .dj_ie .dijitSliderRtl .dijitRuleLabelV { 92 | text-align:left; 93 | } 94 | 95 | .dj_ie .dijitSliderRtl .dijitRuleLabelH { 96 | zoom:1; 97 | } 98 | 99 | .dijitSliderRtl .dijitSliderProgressBarH { 100 | /* workarounds for IE and FF */ 101 | float:right; 102 | right:0; 103 | left:auto; 104 | } 105 | 106 | /* ContentPane*/ 107 | 108 | .dijitRtl .dijitContentPaneLoading .dijitIconLoading, 109 | .dijitRtl .dijitContentPaneError .dijitIconError { 110 | margin-right: 0; 111 | margin-left: 9px; 112 | } 113 | 114 | /* TabContainer */ 115 | 116 | .dijitTabControllerRtl .nowrapTabStrip { 117 | text-align: right; /* just in case ancestor has non-standard setting */ 118 | } 119 | .dijitTabRtl .dijitTabCloseButton { 120 | margin-left: 0; 121 | margin-right: 1em; 122 | } 123 | .dj_ie6 .dijitTabRtl .tabLabel, 124 | .dj_ie6 .dijitTabContainerRight-tabs .dijitTabRtl, 125 | .dj_ie6 .dijitTabContainerLeft-tabs .dijitTabRtl, 126 | .dj_ie7 .dijitTabContainerRight-tabs .dijitTabRtl, 127 | .dj_ie7 .dijitTabContainerLeft-tabs .dijitTabRtl { 128 | zoom: 1; 129 | } 130 | .dj_ie6 .dijitTabContainerRight-tabs .dijitTabRtl, 131 | .dj_ie7 .dijitTabContainerRight-tabs .dijitTabRtl { 132 | left: 0; 133 | } 134 | 135 | .dj_ie6 .dijitTabContainerRightRtl .dijitTabContainerRight-tabs, 136 | .dj_ie6 .dijitTabContainerLeftRtl .dijitTabContainerLeft-tabs { 137 | /* otherwise tab labels invisible */ 138 | width: 1%; 139 | } 140 | 141 | /* TimePicker */ 142 | .dj_ie .dijitTimePickerRtl .dijitTimePickerItem { 143 | width:100%; 144 | } 145 | 146 | 147 | /* ColorPalette */ 148 | .dijitColorPaletteRtl .dijitColorPaletteUnder { 149 | /* needed in RTL mode when DropDownButton expands the ColorPalette beyond it's natural width */ 150 | left: auto; 151 | right: 0; 152 | } 153 | 154 | /* Select */ 155 | .dijitSelectRtl .dijitButtonContents { 156 | border-style: none none none solid; 157 | text-align: right; 158 | } 159 | 160 | /* Tree */ 161 | 162 | .dijitTreeRtl .dijitTreeContainer { 163 | float: right; /* for correct highlighting during horizontal scroll, see #16132 */ 164 | } 165 | 166 | /* DnD 167 | * These rules should apply for containers that are dir=rtl (either set directly, or inherited) 168 | * but seems the best we can do is look for .dijitRtl on an ancestor node. 169 | */ 170 | .dijitRtl .dojoDndHorizontal .dojoDndItemBefore { 171 | border-width: 0 2px 0 0; 172 | padding: 2px 0 2px 2px; 173 | } 174 | .dijitRtl .dojoDndHorizontal .dojoDndItemAfter { 175 | border-width: 0 0 0 2px; 176 | padding: 2px 2px 2px 0; 177 | } 178 | -------------------------------------------------------------------------------- /css/flat/flat_rtl.css: -------------------------------------------------------------------------------- 1 | /* RTL files */ 2 | @import url("flat_dijit_rtl.css"); 3 | 4 | /* dijit */ 5 | @import url("dijit/Calendar_rtl.css"); 6 | @import url("dijit/ColorPalette_rtl.css"); 7 | @import url("dijit/Dialog_rtl.css"); 8 | @import url("dijit/Editor_rtl.css"); 9 | @import url("dijit/Menu_rtl.css"); 10 | @import url("dijit/TitlePane_rtl.css"); 11 | @import url("dijit/Toolbar_rtl.css"); 12 | @import url("dijit/Tree_rtl.css"); 13 | 14 | /* layout */ 15 | @import url("dijit/layout/AccordionContainer_rtl.css"); 16 | @import url("dijit/layout/TabContainer_rtl.css"); 17 | 18 | /* dijit */ 19 | @import url("dijit/form/Button_rtl.css"); 20 | @import url("dijit/form/NumberSpinner_rtl.css"); 21 | @import url("dijit/form/Select_rtl.css"); 22 | @import url("dijit/form/Slider_rtl.css"); 23 | @import url("dijit/form/TextBox_rtl.css"); 24 | 25 | /* not in flat theme */ 26 | /*@import url("dijit/ProgressBar_rtl.css");*/ 27 | -------------------------------------------------------------------------------- /css/flat/icons/fonts/flat-icon.eot: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gbochenek/vector-tile-demo-js/4efb32c4583dd72898533309a79d171e6995e443/css/flat/icons/fonts/flat-icon.eot -------------------------------------------------------------------------------- /css/flat/icons/fonts/flat-icon.ttf: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gbochenek/vector-tile-demo-js/4efb32c4583dd72898533309a79d171e6995e443/css/flat/icons/fonts/flat-icon.ttf -------------------------------------------------------------------------------- /css/flat/icons/fonts/flat-icon.woff: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gbochenek/vector-tile-demo-js/4efb32c4583dd72898533309a79d171e6995e443/css/flat/icons/fonts/flat-icon.woff -------------------------------------------------------------------------------- /css/flat/icons/images/loadingAnimation.gif: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gbochenek/vector-tile-demo-js/4efb32c4583dd72898533309a79d171e6995e443/css/flat/icons/images/loadingAnimation.gif -------------------------------------------------------------------------------- /css/style.css: -------------------------------------------------------------------------------- 1 | body { 2 | font-family: Arial; 3 | } 4 | 5 | .flight-style-btn-grp { 6 | position: absolute; 7 | top: 20px; 8 | right: 20px; 9 | } 10 | 11 | .mobile .flight-style-btn-grp { 12 | width:100%; 13 | height: 18%; 14 | top: auto; 15 | right: auto; 16 | bottom: 89px; 17 | text-align: center; 18 | } 19 | 20 | .flight-style-btn { 21 | height: 146px; 22 | width: 68px; 23 | display: inline-block; 24 | cursor: pointer; 25 | border-width: 1px; 26 | border-style: solid; 27 | border-color: white; 28 | } 29 | 30 | .mobile .flight-style-btn { 31 | height: 100%; 32 | width: 14.7999%; 33 | background-size: 100% 100%; 34 | } 35 | 36 | .flight-style-btn.red { 37 | background-image: url('../img/1_RedStyle.png'); 38 | } 39 | 40 | .flight-style-btn.orange { 41 | background-image: url('../img/2_OrangeStyle.png'); 42 | } 43 | 44 | .flight-style-btn.green { 45 | background-image: url('../img/3_GreenStyle.png'); 46 | } 47 | 48 | .flight-style-btn.blue { 49 | background-image: url('../img/4_BlueStyle.png'); 50 | } 51 | 52 | .flight-style-btn.pink { 53 | background-image: url('../img/5_PinkStyle.png'); 54 | } 55 | 56 | .flight-style-btn.white { 57 | background-image: url('../img/6_WhiteStyle.png'); 58 | } 59 | 60 | .airportSelector { 61 | position: absolute; 62 | top: 200px; 63 | right: 20px; 64 | width: 245px; 65 | background: white; 66 | padding: 10px; 67 | border-radius: 10px; 68 | border-color: black; 69 | border-width: 2px; 70 | border-style: solid; 71 | } 72 | 73 | .legend { 74 | background-image: url(../img/TimeZoneLegend.png); 75 | width: 244px; 76 | height: 30px; 77 | background-size: contain; 78 | background-repeat: no-repeat; 79 | margin-top: 10px; 80 | border-top: black 1px solid; 81 | padding-top: 10px; 82 | background-position-y: 11px; 83 | transition: height 1s ease-out; 84 | height: 0; 85 | } 86 | 87 | .mobile .airportSelector { 88 | top: auto; 89 | right: auto; 90 | width: 100%; 91 | border-radius: 0; 92 | border-width: 0; 93 | border-bottom-width: 1px; 94 | border-top-width: 1px; 95 | bottom: 17px; 96 | padding-left: 0; 97 | padding-right: 0; 98 | text-align: center; 99 | } 100 | 101 | 102 | .color-selector { 103 | position:absolute; 104 | bottom:20px; 105 | right:20px; 106 | } 107 | 108 | .mobile .color-selector { 109 | display: none; 110 | } 111 | 112 | .flat .dijitComboBoxMenu { 113 | height:300px; 114 | } 115 | -------------------------------------------------------------------------------- /img/1_RedStyle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gbochenek/vector-tile-demo-js/4efb32c4583dd72898533309a79d171e6995e443/img/1_RedStyle.png -------------------------------------------------------------------------------- /img/2_OrangeStyle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gbochenek/vector-tile-demo-js/4efb32c4583dd72898533309a79d171e6995e443/img/2_OrangeStyle.png -------------------------------------------------------------------------------- /img/3_GreenStyle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gbochenek/vector-tile-demo-js/4efb32c4583dd72898533309a79d171e6995e443/img/3_GreenStyle.png -------------------------------------------------------------------------------- /img/4_BlueStyle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gbochenek/vector-tile-demo-js/4efb32c4583dd72898533309a79d171e6995e443/img/4_BlueStyle.png -------------------------------------------------------------------------------- /img/5_PinkStyle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gbochenek/vector-tile-demo-js/4efb32c4583dd72898533309a79d171e6995e443/img/5_PinkStyle.png -------------------------------------------------------------------------------- /img/6_WhiteStyle.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gbochenek/vector-tile-demo-js/4efb32c4583dd72898533309a79d171e6995e443/img/6_WhiteStyle.png -------------------------------------------------------------------------------- /img/TimeZoneLegend.png: -------------------------------------------------------------------------------- https://raw.githubusercontent.com/gbochenek/vector-tile-demo-js/4efb32c4583dd72898533309a79d171e6995e443/img/TimeZoneLegend.png -------------------------------------------------------------------------------- /index.html: -------------------------------------------------------------------------------- 1 | 2 | 3 | 4 | 5 | 6 | 8 | Vector tiles - 4.6 9 | 19 | 20 | 21 | 22 | 23 | 24 | 25 | 35 | 36 | 37 | 38 | 39 | 40 | 41 | 42 | 43 | Fork me on GitHub 44 | 45 |
46 |
47 | 48 | 49 | 50 | 51 | 52 | 53 |
54 |
55 |
56 | Show Traffic From:
57 |
58 |
59 |
60 |
61 |
62 |
63 | 64 | 65 | -------------------------------------------------------------------------------- /js/vectorTileDemo.js: -------------------------------------------------------------------------------- 1 | require([ 2 | "dojo/_base/lang", 3 | "dojo/query", 4 | "dojo/window", 5 | "dojo/dom-class", 6 | "dojo/store/Memory", 7 | "dojo/data/ObjectStore", 8 | "dijit/form/Select", 9 | "esri/Map", 10 | "esri/views/MapView", 11 | "esri/geometry/Extent", 12 | "esri/layers/VectorTileLayer", 13 | ], function(lang, query, win, domClass, Memory, ObjectStore, FilteringSelect, Map, MapView, Extent, VectorTileLayer) { 14 | 15 | var singleColorStyle = null; 16 | var timeZoneStyle = { 17 | "line-color": { 18 | "property": "TZ_Delta", 19 | "default": "#000000", 20 | "stops": [[-13.7584, "rgba(45,0,75,0.8)"], [-10.9992, "rgba(84,39,136,0.8)"], [-8.23989, "rgba(128,115,172,0.8)"], [-5.48062, "rgba(178,171,210,0.8)"], [-2.72135, "rgba(216,218,235,0.8)"], [0.0379213, "rgba(247,247,247,0.8)"], [2.79719, "rgba(254,224,182,0.8)"], [5.55646, "rgba(253,184,99,0.8)"], [8.31573, "rgba(224,130,20,0.8)"], [11.075, "rgba(179,88,6,0.8)"], [13.8343, "rgba(127,59,8,0.8)"]] 21 | }, 22 | "line-width": 1.33333 23 | }; 24 | 25 | var checkViewPort = function(){ 26 | var vs = win.getBox(); 27 | if (vs.w < 600 || vs.h < 630 || (vs.h < 750 && vs.w < 1000)){ 28 | domClass.add(document.body,"mobile"); 29 | } else { 30 | domClass.remove(document.body,"mobile"); 31 | } 32 | } 33 | window.onresize = checkViewPort; 34 | checkViewPort(); 35 | 36 | var fromButton = true; 37 | 38 | var colorMap = { 39 | "red": "rgba(175,18,18,0.05)", 40 | "orange": "rgba(243,174,24,0.05)", 41 | "green": "rgba(108,236,62,0.05)", 42 | "blue": "rgba(96,205,255,0.05)", 43 | "pink": "rgba(255,127,255,0.05)", 44 | "white": "rgba(240,240,240,0.05)" 45 | }; 46 | 47 | var airportStore = new Memory({data:[ 48 | {name:"All Airports",id:"ALL_AIRPORTS"}, 49 | {name:"ATLANTA GA, US (ATL)",id:"ATL"}, 50 | {name:"BEIJING, CN (PEK)",id:"PEK"}, 51 | {name:"DUBAI, AE (DXB)",id:"DXB"}, 52 | {name:"CHICAGO IL, US (ORD)",id:"ORD"}, 53 | {name:"TOKYO, JP (HND)",id:"HND"}, 54 | {name:"WASHINGTON D.C. (DCA)",id:"DCA"}, 55 | {name:"LOS ANGELES CA, US (LAX)",id:"LAX"}, 56 | {name:"HONG KONG, HK (HKG)",id:"HKG"}, 57 | {name:"PARIS, FR (CDG)",id:"CDG"}, 58 | {name:"DALLAS/FORT WORTH TX, US (DFW)",id:"DFW"}, 59 | {name:"ISTANBUL, TR (IST)",id:"IST"}, 60 | {name:"FRANKFURT, DE (FRA)",id:"FRA"}, 61 | {name:"SHANGHAI, CN (PVG)",id:"PVG"}, 62 | {name:"AMSTERDAM, NL (AMS)",id:"AMS"}, 63 | {name:"NEW YORK NY, US (JFK)",id:"JFK"}, 64 | {name:"LONDON, GB (LHR)",id:"LHR"}, 65 | {name:"SINGAPORE, SG (SIN)",id:"SIN"}, 66 | {name:"GUANGZHOU, CN (CAN)",id:"CAN"}, 67 | {name:"JAKARTA, ID (CGK)",id:"CGK"}, 68 | {name:"DENVER CO, US (DEN)",id:"DEN"}, 69 | {name:"BANGKOK, TH (BKK)",id:"BKK"}, 70 | {name:"SAN FRANCISCO CA, US (SFO)",id:"SFO"}, 71 | {name:"INCHEON, KR (ICN)",id:"ICN"}, 72 | {name:"KUALA LUMPUR, MY (KUL)",id:"KUL"}, 73 | {name:"MADRID, ES (MAD)",id:"MAD"}, 74 | {name:"NEW DELHI, IN (DEL)",id:"DEL"}, 75 | {name:"LAS VEGAS NV, US (LAS)",id:"LAS"}, 76 | {name:"CHARLOTTE NC, US (CLT)",id:"CLT"}, 77 | {name:"MIAMI FL, US (MIA)",id:"MIA"}, 78 | {name:"PHOENIX AZ, US (PHX)",id:"PHX"}, 79 | {name:"DETROIT MI, US (DTW)",id:"DTW"} 80 | ]}); 81 | 82 | // Create a Map 83 | var map = new Map({ 84 | basemap: 'dark-gray-vector' 85 | }); 86 | 87 | // Make map view and bind it to the map 88 | var view = new MapView({ 89 | container: "viewDiv", 90 | map: map, 91 | ui: { 92 | components: ["attribution"] 93 | }, 94 | extent: new Extent({xmin: -13047304.484756596, ymin: 736470.7675274275, xmax: -9016321.361110613, ymax: 7898314.569733398,"spatialReference": 102100}) 95 | }); 96 | 97 | /******************************************************************** 98 | * Add a tile layer to the map 99 | * 100 | * The url property must either point to the style or to the URL of a Vector Tile service 101 | *********************************************************************/ 102 | var tileLayer = new VectorTileLayer({ 103 | url: "./vectorStyle.json", 104 | opacity: 0.7 105 | }); 106 | map.add(tileLayer); 107 | 108 | window.tileLayer = tileLayer; 109 | window.map = map; 110 | window.view = view; 111 | 112 | var airportSelector = new FilteringSelect({ 113 | store: new ObjectStore({objectStore: airportStore}), 114 | labelAttr: "name", 115 | value: "ALL_AIRPORTS" 116 | },"airportSelector"); 117 | 118 | airportSelector.startup(); 119 | 120 | airportSelector.on("change",function(value){ 121 | setFilter(tileLayer,value); 122 | }); 123 | 124 | var colorSelector = new ColorPicker({ 125 | appendTo: document.getElementById("colorSelector"), 126 | color: colorMap.red, 127 | renderCallback: function(color,action){ 128 | 129 | var rgb = color.rgb; 130 | 131 | var colorStr = "rgba(" + (rgb.r * 255) + "," + (rgb.g * 255) + "," + (rgb.b * 255) + "," + color.alpha + ")"; 132 | 133 | if (setVectorColor){ 134 | setVectorColor(tileLayer,colorStr); 135 | } 136 | } 137 | }); 138 | 139 | query(".flight-style-btn").on("click",function(evt){ 140 | 141 | var node = evt.target; 142 | 143 | if (domClass.contains(node,"active")){ 144 | return; 145 | } 146 | 147 | query(".flight-style-btn").removeClass("active"); 148 | for (var color in colorMap){ 149 | if (domClass.contains(node,color)){ 150 | colorSelector.color.setColor(colorMap[color],undefined,undefined,true); 151 | query(".cp-bres")[0].click(); 152 | domClass.add(node,"active"); 153 | break; 154 | } 155 | } 156 | 157 | }); 158 | 159 | var setVectorColor = function(tileLayer,colorStr){ 160 | 161 | var tileStyle = lang.clone(tileLayer.get("currentStyleInfo.style")); 162 | if (tileStyle !== undefined){ 163 | var tileLayerStyle = tileStyle.layers[0]; 164 | 165 | tileLayerStyle.paint["line-color"] = colorStr; 166 | 167 | singleColorStyle = tileLayerStyle.paint; 168 | 169 | tileStyle.layers[0] = tileLayerStyle; 170 | 171 | tileLayer.loadStyle(tileStyle); 172 | } 173 | }; 174 | 175 | var setFilter = function(tileLayer,airport){ 176 | 177 | 178 | if (airport && airport.length > 0){ 179 | var tileStyle = lang.clone(tileLayer.get("currentStyleInfo.style")); 180 | var tileLayerStyle = tileStyle.layers[0]; 181 | 182 | if (airport === "ALL_AIRPORTS"){ 183 | query(".legend")[0].style.height = "0"; 184 | 185 | if (singleColorStyle){ 186 | tileLayerStyle.paint = singleColorStyle; 187 | } else { 188 | tileLayer.loadStyle("./vectorStyle.json") 189 | return; 190 | } 191 | 192 | delete tileLayerStyle.filter; 193 | } else { 194 | query(".legend")[0].style.height = "30px"; 195 | tileLayerStyle.filter = ["==", "Origin", airport]; 196 | tileLayerStyle.paint = timeZoneStyle; 197 | } 198 | 199 | tileStyle.layers[0] = tileLayerStyle; 200 | 201 | tileLayer.loadStyle(tileStyle); 202 | } 203 | } 204 | 205 | 206 | }); 207 | -------------------------------------------------------------------------------- /vectorStyle.json: -------------------------------------------------------------------------------- 1 | { 2 | "version": 8, 3 | "sprite": "https://tiles.arcgis.com/tiles/HDgMIJDCbHtnomY9/arcgis/rest/services/Global_Flight_Routes/VectorTileServer/resources/sprites/sprite", 4 | "glyphs": "https://tiles.arcgis.com/tiles/HDgMIJDCbHtnomY9/arcgis/rest/services/Global_Flight_Routes/VectorTileServer/resources/fonts/{fontstack}/{range}.pbf", 5 | "sources": { 6 | "esri": { 7 | "type": "vector", 8 | "url": "https://tiles.arcgis.com/tiles/HDgMIJDCbHtnomY9/arcgis/rest/services/Global_Flight_Routes/VectorTileServer" 9 | } 10 | }, 11 | "layers": [{ 12 | "id": "Flight Routes", 13 | "type": "line", 14 | "source": "esri", 15 | "source-layer": "Flight Routes", 16 | "layout": { 17 | "line-cap": "round", 18 | "line-join": "round" 19 | }, 20 | "paint": { 21 | "line-color": "rgba(96,205,255,0.05)", 22 | "line-width": 1 23 | } 24 | } 25 | ] 26 | } 27 | 28 | --------------------------------------------------------------------------------