Fauxton: Clean up css for new sidebar
Project: http://git-wip-us.apache.org/repos/asf/couchdb/repo Commit: http://git-wip-us.apache.org/repos/asf/couchdb/commit/61ff7a4b Tree: http://git-wip-us.apache.org/repos/asf/couchdb/tree/61ff7a4b Diff: http://git-wip-us.apache.org/repos/asf/couchdb/diff/61ff7a4b Branch: refs/heads/Update-Sidebar-Ui Commit: 61ff7a4b3fc77a99ada418f5d65dc65c1873d042 Parents: 4909cb0 Author: sean barclay <[email protected]> Authored: Wed May 28 21:08:21 2014 -0700 Committer: Garren Smith <[email protected]> Committed: Wed Jun 18 16:56:45 2014 +0200 ---------------------------------------------------------------------- .../addons/documents/assets/less/documents.less | 101 ++++++++++++++++--- .../documents/templates/design_doc_menu.html | 14 ++- .../app/addons/documents/templates/sidebar.html | 6 +- src/fauxton/assets/less/fauxton.less | 19 ++-- src/fauxton/assets/less/variables.less | 3 +- 5 files changed, 110 insertions(+), 33 deletions(-) ---------------------------------------------------------------------- http://git-wip-us.apache.org/repos/asf/couchdb/blob/61ff7a4b/src/fauxton/app/addons/documents/assets/less/documents.less ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/documents/assets/less/documents.less b/src/fauxton/app/addons/documents/assets/less/documents.less index 4e87dd6..cdcb3ed 100644 --- a/src/fauxton/app/addons/documents/assets/less/documents.less +++ b/src/fauxton/app/addons/documents/assets/less/documents.less @@ -10,6 +10,10 @@ // License for the specific language governing permissions and limitations under // the License. /*ALL DOCS TABLE*/ + +@import "../../../style/assets/less/mixins.less"; +@import "../../../../../assets/less/variables.less"; + tr.all-docs-item { border: none; background: transparent; @@ -20,7 +24,7 @@ tr.all-docs-item { } } button.beautify { - margin-top: 20px; + margin-top: 20px; } .toggle-btns { @@ -159,6 +163,26 @@ button.beautify { .sidenav{ margin-bottom: 40px; + .nav-list > .active > a{ + text-shadow: none; + background-color: rgba(0, 0, 0, 0.05); + } + .nav-list > .active > a:hover, + .nav-list > .active > a:focus{ + color: white; + } + .nav-list > li > a:hover + div.add-dropdown .dropdown-toggle{ + color: white; + } + .dropdown-toggle:hover { + color: @linkRed + } + li{ + position: relative; + a{ + text-shadow: none; + } + } li.nav-header { position: relative; .accordion-body{ @@ -167,34 +191,83 @@ button.beautify { } color: #eee; margin-left: 0; + li.active > a{ + background-color: rgba(0, 0, 0, 0.05); + } li a{ padding-left: 55px; font-size: 14px; &:hover { - background-color: #af2d24; color: #fff; text-decoration: none; + background-color: @darkRed; } } } - > span{ + .fonticon-play{ + color: @subListGray; + position: absolute; + display: block; + vertical-align: bottom; + } + > .js-collapse-toggle{ + position: relative; display: block; - padding: 10px 13px 10px 30px; - color: #333333; border-bottom: 1px solid #d3d7db; - &:before{ - vertical-align: bottom; + .accordion-list-item:hover { + p, .fonticon-play{ + color: white; + } + p{ + background-color: @darkRed; + } + } + .accordion-list-item:hover + div.add-dropdown .dropdown-toggle{ + color: white; + } + .accordion-list-item p, .fonticon-play{ + .transition(all 0.25s linear); + } + .accordion-list-item p{ + margin: 0; + padding: 10px 13px 10px 36px; + color: @linkRed; + } + .fonticon-play{ font-size: 12px; - padding-right: 10px; - margin-bottom: 2px; + top: 12px; + left: 12px; + } + &.down .fonticon-play { + .rotate(90deg); + } + .add-dropdown{ + right: 15px; } - &.down:before { - margin-bottom: -2px; - transform:rotate(90deg); - -ms-transform:rotate(90deg); /* IE 9 */ - -webkit-transform:rotate(90deg); /* Opera, Chrome, and Safari */ + .dropdown-toggle:hover{ + color: @linkRed + } + } + > ul.accordion-body{ + > li { + a{ + padding-left: 36px; + } + .fonticon-play{ + font-size: 8px; + top: 11px; + left: 15px; + } + .fonticon:before{ + margin-right: 6px; + font-size: 20px; + } } } } + } + + + http://git-wip-us.apache.org/repos/asf/couchdb/blob/61ff7a4b/src/fauxton/app/addons/documents/templates/design_doc_menu.html ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/documents/templates/design_doc_menu.html b/src/fauxton/app/addons/documents/templates/design_doc_menu.html index 63d6016..beb0c85 100644 --- a/src/fauxton/app/addons/documents/templates/design_doc_menu.html +++ b/src/fauxton/app/addons/documents/templates/design_doc_menu.html @@ -12,13 +12,19 @@ License for the specific language governing permissions and limitations under the License. --> <li class="nav-header"> - <div class="new-button add-dropdown"></div> - <span class="fonticon-play js-collapse-toggle" data-toggle="collapse" data-target="#<%= ddoc_clean %>"> - <%= designDoc%> - </span> + + <div class="js-collapse-toggle" data-toggle="collapse" data-target="#<%= ddoc_clean %>"> + <div class="accordion-list-item"> + <div class="fonticon-play"></div> + <p><%= designDoc%></p> + </div> + <div class="new-button add-dropdown"></div> + </div> <ul class="accordion-body collapse" id="<%= ddoc_clean %>"> <li> <a id="<%= ddoc_clean %>_metadata" href="#/database/<%- database_encoded %>/_design/<%- ddoc_encoded %>/metadata" class="toggle-view"> + <div class="fonticon-play"></div> + <span class="cloudant-sidenav-info fonticon"></span> Design Doc Metadata </a> </li> http://git-wip-us.apache.org/repos/asf/couchdb/blob/61ff7a4b/src/fauxton/app/addons/documents/templates/sidebar.html ---------------------------------------------------------------------- diff --git a/src/fauxton/app/addons/documents/templates/sidebar.html b/src/fauxton/app/addons/documents/templates/sidebar.html index b90a7b6..8d2ea4c 100644 --- a/src/fauxton/app/addons/documents/templates/sidebar.html +++ b/src/fauxton/app/addons/documents/templates/sidebar.html @@ -18,13 +18,13 @@ the License. <% _.each(docLinks, function (link) { %> <li><a href="<%= database_url + '/' + link.url %>"><%= link.title %></a></li> <% }); %> - <li class="active"> - <div id="new-all-docs-button" class="add-dropdown"> </div> + <li class="active"> <a id="all-docs" href="#<%= database.url('index') %>" class="toggle-view"> All Documents</a> + <div id="new-all-docs-button" class="add-dropdown"> </div> </li> <li> - <div id="new-design-docs-button" class="add-dropdown"> </div> <a id="design-docs" href='#<%= database.url("index") %>?startkey="_design"&endkey="_e"' class="toggle-view"> All Design Docs</a> + <div id="new-design-docs-button" class="add-dropdown"> </div> </li> </ul> http://git-wip-us.apache.org/repos/asf/couchdb/blob/61ff7a4b/src/fauxton/assets/less/fauxton.less ---------------------------------------------------------------------- diff --git a/src/fauxton/assets/less/fauxton.less b/src/fauxton/assets/less/fauxton.less index a8ddbac..cc652a7 100644 --- a/src/fauxton/assets/less/fauxton.less +++ b/src/fauxton/assets/less/fauxton.less @@ -699,12 +699,12 @@ table.databases { background-color: @darkRed; color: #fff; } - li.active > a { color: @darkRed; } > li > a{ - padding: 10px 13px 10px 30px; + color: @linkRed; + padding: 10px 13px 10px 36px; border-bottom: 1px solid #d3d7db; } .dropdown-menu { @@ -715,8 +715,7 @@ table.databases { a{ display: block; padding: 10px 5px 10px 15px; - color: #333333; - + color: @subListGray; .divider { background: none; color: #ccc; @@ -727,8 +726,6 @@ table.databases { padding: 0px; text-shadow: none; color: #333333; - margin-bottom: -4px; - & > span:hover { color: @red; } @@ -930,12 +927,12 @@ div.spinner { } } -div.add-dropdown { - - position: absolute; - right: 15px; +div.add-dropdown { + position: absolute; + top: 0px; + right: 0px; .dropdown-menu{ - left: -82px; + left: -90px; padding-bottom: 0; width: auto; min-width: 0; http://git-wip-us.apache.org/repos/asf/couchdb/blob/61ff7a4b/src/fauxton/assets/less/variables.less ---------------------------------------------------------------------- diff --git a/src/fauxton/assets/less/variables.less b/src/fauxton/assets/less/variables.less index 2377e6b..d3ea957 100644 --- a/src/fauxton/assets/less/variables.less +++ b/src/fauxton/assets/less/variables.less @@ -20,7 +20,8 @@ @greyBrown: #554D4C; @greyBrownLighter: #A59D9D; @fontGrey: #808080; -@secondarySidebar: #E4DFDC; +@secondarySidebar: white; +@subListGray: #767F89; @orange: #F3622D;
