Skip to content

Commit

Permalink
migrate dbootstrap and esri css overrides to separate file.
Browse files Browse the repository at this point in the history 
add font awesome icons to titlePanes.
  • Loading branch information
@tmcgee
tmcgee committed Sep 10, 2016
1 parent a5d77aa commit 16a348e
Show file tree
Hide file tree
Showing 2 changed files with 261 additions and 103 deletions.
257 changes: 257 additions & 0 deletions viewer/css/cmv-theme-overrides.css
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,257 @@
.cmv .dijitToolbar .dijitButtonContents {
padding: 1px !important;
}

.cmv .dijitTitlePane {
margin-bottom: 2px;
}

.cmv .dijitTitlePaneTitle {
color: #666;
background-color: #F5F5F5;
}

.cmv label {
font-weight: bold;
}

.cmv :focus {
outline: none !important;
}

/* icons for the sidebar */

.cmv .dijitTitlePane .dijitTitlePaneTextNode:before,
.cmv .dijitDialogTitleBar:before {
font-family:'FontAwesome';
margin-right: 8px;
}

.cmv #bookmarks_parent .dijitTitlePaneTextNode:before {
content: '\f02e'
}
.cmv #directions_parent .dijitTitlePaneTextNode:before {
content: '\f277'
}
.cmv #draw_parent .dijitTitlePaneTextNode:before {
content: '\f1fc'
}
.cmv #editor_parent .dijitTitlePaneTextNode:before {
content: '\f040'
}
.cmv #find_parent .dijitTitlePaneTextNode:before {
content: '\f002';
}
.cmv #help_parent .dijitTitlePaneTextNode:before {
content: '\f059'
}
.cmv #identify_parent .dijitTitlePaneTextNode:before {
content: '\f05a'
}
.cmv #layerControl_parent .dijitTitlePaneTextNode:before{
content: '\f00b';
}
.cmv #legend_parent .dijitTitlePaneTextNode:before {
content: '\f03e'
}
.cmv #measurement_parent .dijitTitlePaneTextNode:before {
content: '\f065'
}
.cmv #print_parent .dijitTitlePaneTextNode:before {
content: '\f02f';
}
.cmv #streetview_parent .dijitTitlePaneTextNode:before {
content: '\f21d';
}
/* end custom icons */

/* esri popup window overrides */

.cmv .esriPopup .sizer {
width: 325px;
}

.cmv .esriPopup .esriPopupWrapper {
background-color: #FFFFFF;
}
.cmv .esriPopup .attachmentsSection div {
font-weight: bold;
}
.cmv .esriPopup .contentPane table.attrTable {
width: 100%;
border-collapse: collapse;
}
.cmv .esriPopup .contentPane table.attrTable td {
padding: 2px;
}
.cmv .esriPopup .contentPane table.attrTable td.attrName {
text-align: right;
font-weight: bold;
color: #333333;
width: 40%;
padding-right: 5px;
}
.cmv .esriPopup .contentPane table.attrTable td.attrValue {
width: 60%;
}
.cmv .esriPopup .contentPane table.attrTable tr {
vertical-align: top;
border-bottom: 1px solid rgb(221, 221, 221);
}
.cmv .esriPopup .contentPane table.attrTable tr:nth-child(odd) {
background-color: none;
}
.cmv .esriPopup .contentPane table.attrTable tr:nth-child(even) {
background-color: rgb(238, 238, 238);
}

/* end esri popup window overrides */

/* esri mobile popup overrides */

.cmv .esriPopupMobile {
z-index: 999;
}
.cmv .esriMobileNavigationBar {
background-color: #666666;
background: url("../images/linen.jpg") repeat-x scroll left top transparent;
color: #FFFFFF;
}
.cmv .esriPopupMobile .titlePane {
background-color: #666666;
background: url("../images/linen.jpg") repeat-x scroll left top transparent;
color: #FFFFFF;
}
.cmv .esriPopupMobile .pointer.bottom{
background:url("../images/pointertop.png");
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.cmv .esriPopupMobile .pointer.top {
background:url("../images/pointertop.png");
}

/* end esri mobile popup overrides */

/* esri directions widget overrides */
.cmv .simpleDirections .esriDirectionsButton {
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%);
background-repeat: repeat-x;
border: 1px solid #BBB;
border-bottom: 1px solid #A8A8A8;
padding: 0px 12px;
color: #000;
letter-spacing: 0;
text-transform: none;
}
.cmv .simpleDirections .esriDirectionsButton:before {
font-family:'FontAwesome';
margin-right: 8px;
content: '\f277'
}

.cmv .simpleDirections .esriLinkButton {
color: #000;
letter-spacing: 0;
text-transform: none;
}
/* end esri directions widget overrides */

/* flat theme */
/* makes the flat theme more like dbootstrap */
.flat {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

.flat a,
.flat a:hover {
text-decoration: none;
}

.flat .dijitTitlePane {
border-color: #E0E0E0;
}

.flat .dijitTabContainerTop-tabs .dijitTabChecked:before {
height: 3px;
background-color: #666;
top: -1px;
left: -1px;
right: -1px;
}

.flat .dijitTitlePaneTitle {
border: 1px solid #DDD;
border-bottom: none;
-webkit-border-radius: 4px;
border-radius: 4px;
padding: 8px 15px;
}

.flat .dijitDialogTitleBar {
background-color: #F5F5F5;
color: #666;
}

.flat .dijitTitlePaneContentOuter {
border: 1px solid #DDD;
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%);
background-repeat: repeat-x;
border-color: #BBB;
border-bottom-color: #A8A8A8;
padding: 4px 12px;
}

.flat .success .dijitButtonNode {
background: #409843;
color: #FFF;
border-color: #39883c;
}
.flat .danger .dijitButtonNode {
background: #e32d29;
color: #FFF;
border-color: #d4201b;
}

.flat .dijitTextBoxHover,
.flat .dijitTextBoxFocused,
.flat .dijitCheckBoxChecked,
.flat .dijitCheckBoxHover,
.flat .dijitCheckBoxCheckedHover,
.flat .dijitRadio,
.flat .dijitRadioIcon,
.flat .dijitRadioHover {
border-color: #666;
}
.flat .dijitCheckBoxChecked,
.flat .dijitRadio:after,
.flat .dijitRadioIcon:after {
background-color: #999;
}

/* end flat theme */
107 changes: 4 additions & 103 deletions viewer/css/main.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -4,7 +4,6 @@ body, html {
margin: 0;
padding: 0;
overflow: hidden;
/*font-family: Tahoma;*/
font-size: 14px;
}
.appHeader {
Expand Down Expand Up @@ -59,7 +58,7 @@ body, html {
right: 0;
border: none;
padding: 0;
background-color: #FFFFFF
background-color: #FFFFFF;
}
#sidebarLeft {
width: 334px;
Expand Down Expand Up @@ -170,6 +169,9 @@ body, html {
border-radius: 0 0 5px 5px;
border-bottom: 1px solid #B5BCC7;
}
.sidebarCollapseButton .open:before, .sidebarCollapseButton .close:before {
font-family: FontAwesome;
}
.sidebarCollapseButtonHorz .button {
padding-top: 4px;
padding-left: 2px;
Expand Down Expand Up @@ -209,107 +211,6 @@ body, html {
display: block;
}

/* dbootstrap overrides*/

.dbootstrap .dijitToolbar .dijitButtonContents {
padding: 1px !important;
}
.dbootstrap .dijitTitlePane {
border: 1px solid #DDDDDD;
margin-bottom: 2px;
-webkit-border-radius: 4px;
border-radius: 4px;
background-color: #FFFFFF;
}
.dbootstrap .dijitTitlePaneTitle {
color: #666666 !important;
border-bottom: none;
padding: 8px 15px;
background-color: #F5F5F5;
}
.dijitSliderBarContainerH {
z-index: 0 !important;
}
.dijitBorderContainerNoGutterPane {
z-index: auto;
}
.dbootstrap :focus {
outline: none !important;
}

/* end dbootstrap overrides*/

/* esri popup window overrides */

.esriPopup .sizer {
width: 325px;
}

.esriPopup .esriPopupWrapper {
background-color: #FFFFFF;
}
.esriPopup .attachmentsSection div {
font-weight: bold;
}
.esriPopup .contentPane table.attrTable {
width: 100%;
border-collapse: collapse;
}
.esriPopup .contentPane table.attrTable td {
padding: 2px;
}
.esriPopup .contentPane table.attrTable td.attrName {
text-align: right;
font-weight: bold;
color: #333333;
width: 40%;
padding-right: 5px;
}
.esriPopup .contentPane table.attrTable td.attrValue {
width: 60%;
}
.esriPopup .contentPane table.attrTable tr {
vertical-align: top;
border-bottom: 1px solid rgb(221, 221, 221);
}
.esriPopup .contentPane table.attrTable tr:nth-child(odd) {
background-color: none;
}
.esriPopup .contentPane table.attrTable tr:nth-child(even) {
background-color: rgb(238, 238, 238);
}

/* end esri popup window overrides */

/* esri mobile popup overrides */

.esriPopupMobile {
z-index: 999;
}
.esriMobileNavigationBar {
background-color: #666666;
background: url("../images/linen.jpg") repeat-x scroll left top transparent;
color: #FFFFFF;
}
.esriPopupMobile .titlePane {
background-color: #666666;
background: url("../images/linen.jpg") repeat-x scroll left top transparent;
color: #FFFFFF;
}
.esriPopupMobile .pointer.bottom{
background:url("../images/pointertop.png");
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-o-transform: rotate(180deg);
-ms-transform: rotate(180deg);
transform: rotate(180deg);
}
.esriPopupMobile .pointer.top {
background:url("../images/pointertop.png");
}

/* end esri mobile popup overrides */

/*
media queries bootstrap style
https://getbootstrap.com/css/#grid-media-queries
Expand Down

0 comments on commit 16a348e

Please sign in to comment.