Skip to content

Commit

Permalink
Merge pull request #594 from cmv/feature/flat-theme
Browse files Browse the repository at this point in the history 
Add the dojo flat theme
  • Loading branch information
@DavidSpriggs
DavidSpriggs authored Sep 20, 2016
2 parents 52973b1 + 1fb42bd commit 1bc6562
Show file tree
Hide file tree
Showing 12 changed files with 395 additions and 112 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
1 change: 1 addition & 0 deletions viewer/css/theme/flat/flat.css
View file

Large diffs are not rendered by default.

Binary file added viewer/css/theme/flat/fonts/flat-icon.eot
View file
Binary file not shown.
Loading

0 comments on commit 1bc6562

Please sign in to comment.