From 0abb870b0fe126c1751a3a5f51b87c9392938b68 Mon Sep 17 00:00:00 2001 From: Tim McGee Date: Thu, 9 Feb 2017 20:53:19 -0800 Subject: [PATCH] Refined css for Esri Directions widget and Flat theme --- viewer/css/cmv-theme-overrides.css | 89 ++++++++++++++++++++++++------ 1 file changed, 71 insertions(+), 18 deletions(-) diff --git a/viewer/css/cmv-theme-overrides.css b/viewer/css/cmv-theme-overrides.css index 3f118cb1e..55219bc4a 100644 --- a/viewer/css/cmv-theme-overrides.css +++ b/viewer/css/cmv-theme-overrides.css @@ -104,7 +104,9 @@ /* end esri mobile popup overrides */ /* esri directions widget overrides */ -.cmv .simpleDirections .esriDirectionsButton { +.cmv .simpleDirections .esriStopsGetDirections, +.cmv .simpleDirections .esriResultsPrint, +.simpleDirections .esriActivateButton { background-color: #E6E6E6; background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #e6e6e6)); background-image: -webkit-linear-gradient(top, #fff 0%, #e6e6e6 100%); @@ -136,6 +138,30 @@ font-size: 14px; } +.cmv .simpleDirections .esriActivateButton { + padding: 8px; +} + +.cmv .simpleDirections .esriActivateButton:before { + content: '\f041'; + font-family: 'FontAwesome'; + font-size: 14px; +} + +.cmv .esriDirectionsPressedButton { + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(1, #e6e6e6)); + background-image: -webkit-linear-gradient(bottom, #fff 0%, #e6e6e6 100%); + background-image: -moz-linear-gradient(bottom, #fff 0%, #e6e6e6 100%); + background-image: -o-linear-gradient(bottom, #fff 0%, #e6e6e6 100%); + background-image: -ms-linear-gradient(bottom, #fff 0%, #e6e6e6 100%); + background-image: linear-gradient(bottom, #fff 0%, #e6e6e6 100%); + background-repeat: repeat-x; + box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2); + border-top-color: #444; + border-color: #666; + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2); +} + .cmv .simpleDirections .esriLinkButton { color: #000; letter-spacing: 0; @@ -183,24 +209,51 @@ border-top: none; } -.flat .dijitButton .dijitButtonNode, -.flat .dijitDropDownButton .dijitButtonNode, -.flat .dijitComboButton .dijitButtonNode, -.flat .dijitToggleButton .dijitButtonNode, -.flat .dijitComboBox .dijitButtonNode, -.flat .dijitSpinnerButtonContainer.dijitButtonNode, -.flat .dijitSelect .dijitButtonNode { - background-color: #E6E6E6; - background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0, #fff), color-stop(1, #e6e6e6)); - background-image: -webkit-linear-gradient(top, #fff 0%, #e6e6e6 100%); - background-image: -moz-linear-gradient(top, #fff 0%, #e6e6e6 100%); - background-image: -o-linear-gradient(top, #fff 0%, #e6e6e6 100%); - background-image: -ms-linear-gradient(top, #fff 0%, #e6e6e6 100%); - background-image: linear-gradient(top, #fff 0%, #e6e6e6 100%); +.flat .dijitButtonHover .dijitButtonNode, +.flat .dijitDropDownButtonHover .dijitButtonNode, +.flat .dijitComboButton .dijitButtonNodeHover, +.flat .dijitComboButton .dijitDownArrowButtonHover, +.flat .dijitToggleButtonHover .dijitButtonNode, +.flat .dijitDropDownButtonActive .dijitButtonNode { + background-position: 0 -15px; + text-decoration: none; + transition: background-position 0.1s linear; + -moz-transition: background-position 0.1s linear; + -ms-transition: background-position 0.1s linear; + -o-transition: background-position 0.1s linear; + -webkit-transition: background-position 0.1s linear; +} +.flat .dijitButtonActive .dijitButtonNode, +.flat .dijitComboButton .dijitButtonNodeActive, +.flat .dijitToggleButtonActive .dijitButtonNode, +.flat .dijitToggleButtonChecked .dijitButtonNode, +.flat .dijitComboButton .dijitArrowButton.dijitHasDropDownOpen { + background-image: -webkit-gradient(linear, left bottom, left top, color-stop(0, #fff), color-stop(1, #e6e6e6)); + background-image: -webkit-linear-gradient(bottom, #fff 0%, #e6e6e6 100%); + background-image: -moz-linear-gradient(bottom, #fff 0%, #e6e6e6 100%); + background-image: -o-linear-gradient(bottom, #fff 0%, #e6e6e6 100%); + background-image: -ms-linear-gradient(bottom, #fff 0%, #e6e6e6 100%); + background-image: linear-gradient(bottom, #fff 0%, #e6e6e6 100%); background-repeat: repeat-x; - border-color: #BBB; - border-bottom-color: #A8A8A8; - padding: 4px 12px; + box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2); + border-top-color: #444; + border-color: #666; + -webkit-box-shadow: inset 0 2px 4px rgba(0,0,0,0.4), 0 1px 1px rgba(0,0,0,0.2); +} +.flat .dijitButtonDisabled .dijitButtonNode, +.flat .dijitDropDownButtonDisabled .dijitButtonNode, +.flat .dijitComboButtonDisabled .dijitButtonNode, +.flat .dijitToggleButtonDisabled .dijitButtonNode, +.flat .dijitComboBoxDisabled .dijitButtonNode, +.flat .dijitSpinnerDisabled .dijitButtonNode, +.flat .dijitSelectDisabled .dijitButtonNode { + background-image: none; + box-shadow: none; + cursor: not-allowed; + filter: alpha(opacity=65); + opacity: 0.65; + -ms-filter: progid:DXImageTransform.Microsoft.Alpha(Opacity=65); + -webkit-box-shadow: none; } .flat .success .dijitButtonNode {