You are viewing a plain text version of this content. The canonical link for it is here.
Posted to notifications@couchdb.apache.org by benkeen <gi...@git.apache.org> on 2016/02/09 22:31:52 UTC
[GitHub] couchdb-fauxton pull request: Misc database sidebar updates
GitHub user benkeen opened a pull request:
https://github.com/apache/couchdb-fauxton/pull/644
Misc database sidebar updates
This contains various updates to the database sidebar, as per
Justin's feedback.
- Order and labels of buttons are changed.
- a few unclear icons (map reduce, Views) have been removed
- properly highlights what page you're on.
- Now allows us to select any nav item in the sidebar
regardless of nesting to highlight the nav item. This also
now works on full page refreshes.
Note this feature paves the way for the next thing I'll work
on: updating Views so that they retain the sidebar. Once
that's changed, it will need to clearly highlight what
View you're on in the sidebar.
You can merge this pull request into a Git repository by running:
$ git pull https://github.com/benkeen/couchdb-fauxton sidebar-update
Alternatively you can review and apply these changes as the patch at:
https://github.com/apache/couchdb-fauxton/pull/644.patch
To close this pull request, make a commit to your master/trunk branch
with (at least) the following in the commit message:
This closes #644
----
commit 5f5e4723892d52e1dd9f655a220949df6f06b375
Author: Ben Keen <be...@gmail.com>
Date: 2016-02-05T16:40:19Z
Misc database sidebar updates
This contains various updates to the database sidebar, as per
Justin's feedback.
- Order and labels of buttons are changed.
- a few unclear icons (map reduce, Views) have been removed
- properly highlights what page you're on.
- Now allows us to select any nav item in the sidebar
regardless of nesting to highlight the nav item. This also
now works on full page refreshes.
Note this feature paves the way for the next thing I'll work
on: updating Views so that they retain the sidebar. Once
that's changed, it will need to clearly highlight what
View you're on in the sidebar.
----
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Misc database sidebar updates
Posted by benkeen <gi...@git.apache.org>.
Github user benkeen commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/644#discussion_r52937141
--- Diff: app/addons/documents/assets/less/sidenav.less ---
@@ -16,176 +16,142 @@
}
}
-.sidenav{
- .sidebar-toggler {
- top: 5px;
- position: absolute;
- right: 7px;
- z-index: 100;
- width: 60px;
- height: 35px;
- text-align: center;
- line-height: 35px;
+.sidenav {
+ a {
text-decoration: none;
- .icon {
- padding-right: 3px;
- }
-
- &.sidebar-hidden {
- &:hover {
- background-color: rgba(153, 153, 153, 0.1);
- }
- width: 120px;
- right: 210px;
- }
- }
- .nav li + .nav-header {
- margin-top: 0px;
}
- .nav-list > .active > a{
+
+ // selected nav item row styles
+ .nav-list .active > a {
text-shadow: none;
- background-color: rgba(0, 0, 0, 0.05);
- }
- .nav-list > .active > a:hover {
- color: white;
- }
- .nav-list > li > a:hover + div.add-dropdown .dropdown-toggle{
- color: white;
+ background-color: rgba(200, 0, 0, 0.1);
+ &:hover {
+ color: white;
+ }
}
+
.dropdown-toggle:hover {
color: @linkColor;
}
- li{
- position: relative;
- a{
- text-shadow: none;
+
+ // ugly! This styles the (+) icon to make it white when a user hovers over a row. Better solution would be to move the
+ // active class to the <li> instead of the child <a>
+ .accordion-list-item:hover, .nav-list > li a:hover {
+ & + div.add-dropdown .dropdown-toggle {
+ color: white;
}
}
- li.nav-header {
+
+ li {
position: relative;
- > .accordion-body{
- &.in {
- border-bottom: 1px solid #d3d7db;
- }
+ a {
+ text-shadow: none;
}
- .accordion-body{
- color: #eee;
- margin-left: 0;
- li.active > a{
- background-color: rgba(0, 0, 0, 0.055);
+ }
+
+ .design-doc-section {
+ border-bottom: 1px solid #d3d7db;
+ .accordion-list-item:hover {
+ p, .fonticon-play {
+ color: white;
}
- li a{
- font-size: 14px;
- background-color: rgba(0, 0, 0, 0.02);
- &:hover {
- color: #fff;
- text-decoration: none;
- background-color: @darkRed;
- }
+ p {
+ background-color: @darkRed;
}
}
- .fonticon-play{
- color: @subListGray;
- position: absolute;
- display: block;
- vertical-align: bottom;
- }
- .accordion-header:hover .fonticon-play {
- color: white;
- }
- .fonticon-play{
+ .accordion-list-item p {
.transition(all 0.25s linear);
}
- > .accordion-header{
- position: relative;
- display: block;
+ .fonticon-play {
+ font-size: 12px;
+ top: 12px;
+ left: 12px;
+ }
+ &.down .fonticon-play {
+ .rotate(90deg);
+ }
+ .add-dropdown {
+ right: 15px;
+ }
+ }
+
+ li.nav-header {
+ margin-top: 0;
+ position: relative;
+
+ .design-doc-body.in {
border-bottom: 1px solid #d3d7db;
- .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{
- .transition(all 0.25s linear);
- }
- .design-doc-name {
- cursor: pointer;
- margin: 0;
- color: @linkColor;
- span {
- width: @sidebarWidth - 30px;
- display: block;
- padding: 10px 13px 10px 36px;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- }
- .fonticon-play{
- font-size: 12px;
- top: 12px;
- left: 12px;
- }
- &.down .fonticon-play {
- .rotate(90deg);
- }
- .add-dropdown{
- right: 15px;
- }
- .dropdown-toggle:hover{
- color: @linkColor;
- }
}
- > ul.accordion-body{
- > li {
- cursor: pointer;
- a{
- border-top: none;
- &.accordion-header{
- padding: 8px 5px 8px 36px;
- }
- }
- .toggle-view{
- padding: 4px 5px 4px 36px;
- }
- .fonticon-play{
- font-size: 8px;
- top: 11px;
- left: 15px;
- }
- .fonticon:before{
- margin-right: 6px;
- font-size: 20px;
- top: 3px;
- position: relative;
- }
- }
- li {
- > a.down .fonticon-play {
- .rotate(90deg);
- }
- }
+ .accordion-body {
+ color: #eee;
+ margin-left: 0;
li {
+ cursor: pointer;
+ &.active > a {
+ background-color: rgba(255, 0, 0, 0.1);
+ }
> a.down .fonticon-play {
.rotate(90deg);
}
-
- &:hover {
- .fonticon-play {
- color: white;
-
+ &:hover .fonticon-play {
+ color: #dddddd;
+ }
+ a {
+ font-size: 14px;
+ background-color: rgba(0, 0, 0, 0.02);
+ &:hover {
+ color: #fff;
+ text-decoration: none;
+ background-color: @darkRed;
+ }
+ border-top: none;
+ &.accordion-header{
+ padding: 8px 5px 8px 36px;
}
}
-
}
+ }
+
+ .toggle-view {
+ padding: 4px 5px 4px 36px;
+ }
+ .fonticon-play {
+ font-size: 8px;
+ top: 11px;
+ left: 15px;
+ color: @subListGray;
+ position: absolute;
+ display: block;
+ vertical-align: bottom;
+ .transition(all 0.25s linear);
+ }
+ .fonticon:before {
+ margin-right: 6px;
+ font-size: 20px;
+ top: 3px;
+ position: relative;
+ }
+ .accordion-header:hover .fonticon-play {
+ color: white;
+ }
+ }
+ .design-doc-name {
+ cursor: pointer;
+ margin: 0;
+ color: #222222;
+ span {
+ width: @sidebarWidth - 30px;
+ display: block;
+ padding: 10px 13px 10px 36px;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
}
}
+
+.index-group-header {
--- End diff --
EDIT: I've namespaced this in .sidenav, just to get this ticket merged.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Misc database sidebar updates
Posted by benkeen <gi...@git.apache.org>.
Github user benkeen commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/644#issuecomment-183416389
Yeah, let me run the colour by Justin one more time. I tweaked the pink a little to make it less awful but it could still use some love.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Misc database sidebar updates
Posted by benkeen <gi...@git.apache.org>.
Github user benkeen commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/644#issuecomment-184328592
Thanks @robertkowalski. Justin had a number of other small changes which I'll add shortly.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Misc database sidebar updates
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on the pull request:
https://github.com/apache/couchdb-fauxton/pull/644#issuecomment-183281558
<3 the CSS refactor & also the new design.
the pink feels a bit strange, maybe Justin can give us a hint, he usually has really good ideas for colors
apart from the namespacing thing, +1
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Misc database sidebar updates
Posted by benkeen <gi...@git.apache.org>.
Github user benkeen commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/644#discussion_r52769015
--- Diff: app/addons/documents/assets/less/sidenav.less ---
@@ -16,176 +16,142 @@
}
}
-.sidenav{
- .sidebar-toggler {
- top: 5px;
- position: absolute;
- right: 7px;
- z-index: 100;
- width: 60px;
- height: 35px;
- text-align: center;
- line-height: 35px;
+.sidenav {
+ a {
text-decoration: none;
- .icon {
- padding-right: 3px;
- }
-
- &.sidebar-hidden {
- &:hover {
- background-color: rgba(153, 153, 153, 0.1);
- }
- width: 120px;
- right: 210px;
- }
- }
- .nav li + .nav-header {
- margin-top: 0px;
}
- .nav-list > .active > a{
+
+ // selected nav item row styles
+ .nav-list .active > a {
text-shadow: none;
- background-color: rgba(0, 0, 0, 0.05);
- }
- .nav-list > .active > a:hover {
- color: white;
- }
- .nav-list > li > a:hover + div.add-dropdown .dropdown-toggle{
- color: white;
+ background-color: rgba(200, 0, 0, 0.1);
+ &:hover {
+ color: white;
+ }
}
+
.dropdown-toggle:hover {
color: @linkColor;
}
- li{
- position: relative;
- a{
- text-shadow: none;
+
+ // ugly! This styles the (+) icon to make it white when a user hovers over a row. Better solution would be to move the
+ // active class to the <li> instead of the child <a>
+ .accordion-list-item:hover, .nav-list > li a:hover {
+ & + div.add-dropdown .dropdown-toggle {
+ color: white;
}
}
- li.nav-header {
+
+ li {
position: relative;
- > .accordion-body{
- &.in {
- border-bottom: 1px solid #d3d7db;
- }
+ a {
+ text-shadow: none;
}
- .accordion-body{
- color: #eee;
- margin-left: 0;
- li.active > a{
- background-color: rgba(0, 0, 0, 0.055);
+ }
+
+ .design-doc-section {
+ border-bottom: 1px solid #d3d7db;
+ .accordion-list-item:hover {
+ p, .fonticon-play {
+ color: white;
}
- li a{
- font-size: 14px;
- background-color: rgba(0, 0, 0, 0.02);
- &:hover {
- color: #fff;
- text-decoration: none;
- background-color: @darkRed;
- }
+ p {
+ background-color: @darkRed;
}
}
- .fonticon-play{
- color: @subListGray;
- position: absolute;
- display: block;
- vertical-align: bottom;
- }
- .accordion-header:hover .fonticon-play {
- color: white;
- }
- .fonticon-play{
+ .accordion-list-item p {
.transition(all 0.25s linear);
}
- > .accordion-header{
- position: relative;
- display: block;
+ .fonticon-play {
+ font-size: 12px;
+ top: 12px;
+ left: 12px;
+ }
+ &.down .fonticon-play {
+ .rotate(90deg);
+ }
+ .add-dropdown {
+ right: 15px;
+ }
+ }
+
+ li.nav-header {
+ margin-top: 0;
+ position: relative;
+
+ .design-doc-body.in {
border-bottom: 1px solid #d3d7db;
- .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{
- .transition(all 0.25s linear);
- }
- .design-doc-name {
- cursor: pointer;
- margin: 0;
- color: @linkColor;
- span {
- width: @sidebarWidth - 30px;
- display: block;
- padding: 10px 13px 10px 36px;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- }
- .fonticon-play{
- font-size: 12px;
- top: 12px;
- left: 12px;
- }
- &.down .fonticon-play {
- .rotate(90deg);
- }
- .add-dropdown{
- right: 15px;
- }
- .dropdown-toggle:hover{
- color: @linkColor;
- }
}
- > ul.accordion-body{
- > li {
- cursor: pointer;
- a{
- border-top: none;
- &.accordion-header{
- padding: 8px 5px 8px 36px;
- }
- }
- .toggle-view{
- padding: 4px 5px 4px 36px;
- }
- .fonticon-play{
- font-size: 8px;
- top: 11px;
- left: 15px;
- }
- .fonticon:before{
- margin-right: 6px;
- font-size: 20px;
- top: 3px;
- position: relative;
- }
- }
- li {
- > a.down .fonticon-play {
- .rotate(90deg);
- }
- }
+ .accordion-body {
+ color: #eee;
+ margin-left: 0;
li {
+ cursor: pointer;
+ &.active > a {
+ background-color: rgba(255, 0, 0, 0.1);
+ }
> a.down .fonticon-play {
.rotate(90deg);
}
-
- &:hover {
- .fonticon-play {
- color: white;
-
+ &:hover .fonticon-play {
+ color: #dddddd;
+ }
+ a {
+ font-size: 14px;
+ background-color: rgba(0, 0, 0, 0.02);
+ &:hover {
+ color: #fff;
+ text-decoration: none;
+ background-color: @darkRed;
+ }
+ border-top: none;
+ &.accordion-header{
+ padding: 8px 5px 8px 36px;
}
}
-
}
+ }
+
+ .toggle-view {
+ padding: 4px 5px 4px 36px;
+ }
+ .fonticon-play {
+ font-size: 8px;
+ top: 11px;
+ left: 15px;
+ color: @subListGray;
+ position: absolute;
+ display: block;
+ vertical-align: bottom;
+ .transition(all 0.25s linear);
+ }
+ .fonticon:before {
+ margin-right: 6px;
+ font-size: 20px;
+ top: 3px;
+ position: relative;
+ }
+ .accordion-header:hover .fonticon-play {
+ color: white;
+ }
+ }
+ .design-doc-name {
+ cursor: pointer;
+ margin: 0;
+ color: #222222;
+ span {
+ width: @sidebarWidth - 30px;
+ display: block;
+ padding: 10px 13px 10px 36px;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
}
}
+
+.index-group-header {
--- End diff --
Fair point! But I'd argue it's okay, actually. It's a pretty descriptive (specific) class name and it's the namespacing that ends up getting us in trouble with deep selectors + difficulty overriding them later. I did a search over the code base to ensure uniqueness (I always do when adding new selectors).
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Misc database sidebar updates
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/644#discussion_r52728899
--- Diff: app/addons/documents/sidebar/stores.js ---
@@ -42,62 +54,89 @@ function (app, FauxtonAPI, ActionTypes) {
},
getDatabase: function () {
- if (this.isLoading()) {return {};}
-
+ if (this.isLoading()) {
+ return {};
+ }
return this._database;
},
- toggleContent: function (designDoc, index) {
+ // used to toggle both design docs, and any index groups within them
+ toggleContent: function (designDoc, indexGroup) {
if (!this._toggledSections[designDoc]) {
this._toggledSections[designDoc] = {
visible: true,
- indexes: {}
+ indexGroups: {}
};
return;
}
- if (index) {
- return this.toggleIndex(designDoc, index);
+ if (indexGroup) {
+ return this.toggleIndexGroup(designDoc, indexGroup);
}
this._toggledSections[designDoc].visible = !this._toggledSections[designDoc].visible;
},
- toggleIndex: function (designDoc, indexName) {
- var index = this._toggledSections[designDoc].indexes[indexName];
+ toggleIndexGroup: function (designDoc, indexGroup) {
+ var expanded = this._toggledSections[designDoc].indexGroups[indexGroup];
- if (_.isUndefined(index)) {
- this._toggledSections[designDoc].indexes[indexName] = true;
+ if (_.isUndefined(expanded)) {
+ this._toggledSections[designDoc].indexGroups[indexGroup] = true;
return;
}
- this._toggledSections[designDoc].indexes[indexName] = !index;
+ this._toggledSections[designDoc].indexGroups[indexGroup] = !expanded;
},
- isVisible: function (designDoc, index) {
+ isVisible: function (designDoc, indexGroup) {
if (!this._toggledSections[designDoc]) {
return false;
}
-
- if (index) {
- return this._toggledSections[designDoc].indexes[index];
+ if (indexGroup) {
+ return this._toggledSections[designDoc].indexGroups[indexGroup];
}
-
return this._toggledSections[designDoc].visible;
},
- setSelectedTab: function (tab) {
- this._selectedTab = tab;
+ getSelected: function () {
+ return this._selected;
},
- getDatabaseName: function () {
- if (this.isLoading()) { return '';}
+ setSelected: function (params) {
+ this._selected = {
+ navItem: params.navItem,
+ designDocName: params.designDocName,
+ designDocSection: params.designDocSection,
+ indexName: params.indexName
+ };
+
+ if (params.designDocName) {
+ if (!_.has(this._toggledSections, params.designDocName)) {
+ this._toggledSections[params.designDocName] = { visible: true, indexGroups: {} };
+ }
+ this._toggledSections[params.designDocName].visible = true;
+
+ if (params.designDocSection) {
+ this._toggledSections[params.designDocName].indexGroups[params.designDocSection] = true;
+ }
+ }
+ },
+
+ getToggledSections: function () {
+ return this._toggledSections;
+ },
+ getDatabaseName: function () {
+ if (this.isLoading()) {
+ return '';
+ }
return this._database.safeID();
},
--- End diff --
maybe make the model have an property called
`this._database.safeId` which is a string, and until it is populated an empty string
or a variation:
`this._database.name`
don't like the fact that we pass the model to the view and the view calls getter on the model, if the view thinks it has finished loading.
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Misc database sidebar updates
Posted by asfgit <gi...@git.apache.org>.
Github user asfgit closed the pull request at:
https://github.com/apache/couchdb-fauxton/pull/644
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Misc database sidebar updates
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/644#discussion_r52728551
--- Diff: app/addons/documents/sidebar/sidebar.react.jsx ---
@@ -380,24 +403,28 @@ function (app, FauxtonAPI, React, ReactDOM, Stores, Actions, Components, Documen
},
onChange: function () {
- this.setState(this.getStoreState());
+ if (this.isMounted()) {
--- End diff --
cool, we should add those conditionals more often
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---
[GitHub] couchdb-fauxton pull request: Misc database sidebar updates
Posted by robertkowalski <gi...@git.apache.org>.
Github user robertkowalski commented on a diff in the pull request:
https://github.com/apache/couchdb-fauxton/pull/644#discussion_r52728252
--- Diff: app/addons/documents/assets/less/sidenav.less ---
@@ -16,176 +16,142 @@
}
}
-.sidenav{
- .sidebar-toggler {
- top: 5px;
- position: absolute;
- right: 7px;
- z-index: 100;
- width: 60px;
- height: 35px;
- text-align: center;
- line-height: 35px;
+.sidenav {
+ a {
text-decoration: none;
- .icon {
- padding-right: 3px;
- }
-
- &.sidebar-hidden {
- &:hover {
- background-color: rgba(153, 153, 153, 0.1);
- }
- width: 120px;
- right: 210px;
- }
- }
- .nav li + .nav-header {
- margin-top: 0px;
}
- .nav-list > .active > a{
+
+ // selected nav item row styles
+ .nav-list .active > a {
text-shadow: none;
- background-color: rgba(0, 0, 0, 0.05);
- }
- .nav-list > .active > a:hover {
- color: white;
- }
- .nav-list > li > a:hover + div.add-dropdown .dropdown-toggle{
- color: white;
+ background-color: rgba(200, 0, 0, 0.1);
+ &:hover {
+ color: white;
+ }
}
+
.dropdown-toggle:hover {
color: @linkColor;
}
- li{
- position: relative;
- a{
- text-shadow: none;
+
+ // ugly! This styles the (+) icon to make it white when a user hovers over a row. Better solution would be to move the
+ // active class to the <li> instead of the child <a>
+ .accordion-list-item:hover, .nav-list > li a:hover {
+ & + div.add-dropdown .dropdown-toggle {
+ color: white;
}
}
- li.nav-header {
+
+ li {
position: relative;
- > .accordion-body{
- &.in {
- border-bottom: 1px solid #d3d7db;
- }
+ a {
+ text-shadow: none;
}
- .accordion-body{
- color: #eee;
- margin-left: 0;
- li.active > a{
- background-color: rgba(0, 0, 0, 0.055);
+ }
+
+ .design-doc-section {
+ border-bottom: 1px solid #d3d7db;
+ .accordion-list-item:hover {
+ p, .fonticon-play {
+ color: white;
}
- li a{
- font-size: 14px;
- background-color: rgba(0, 0, 0, 0.02);
- &:hover {
- color: #fff;
- text-decoration: none;
- background-color: @darkRed;
- }
+ p {
+ background-color: @darkRed;
}
}
- .fonticon-play{
- color: @subListGray;
- position: absolute;
- display: block;
- vertical-align: bottom;
- }
- .accordion-header:hover .fonticon-play {
- color: white;
- }
- .fonticon-play{
+ .accordion-list-item p {
.transition(all 0.25s linear);
}
- > .accordion-header{
- position: relative;
- display: block;
+ .fonticon-play {
+ font-size: 12px;
+ top: 12px;
+ left: 12px;
+ }
+ &.down .fonticon-play {
+ .rotate(90deg);
+ }
+ .add-dropdown {
+ right: 15px;
+ }
+ }
+
+ li.nav-header {
+ margin-top: 0;
+ position: relative;
+
+ .design-doc-body.in {
border-bottom: 1px solid #d3d7db;
- .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{
- .transition(all 0.25s linear);
- }
- .design-doc-name {
- cursor: pointer;
- margin: 0;
- color: @linkColor;
- span {
- width: @sidebarWidth - 30px;
- display: block;
- padding: 10px 13px 10px 36px;
- text-overflow: ellipsis;
- overflow: hidden;
- }
- }
- .fonticon-play{
- font-size: 12px;
- top: 12px;
- left: 12px;
- }
- &.down .fonticon-play {
- .rotate(90deg);
- }
- .add-dropdown{
- right: 15px;
- }
- .dropdown-toggle:hover{
- color: @linkColor;
- }
}
- > ul.accordion-body{
- > li {
- cursor: pointer;
- a{
- border-top: none;
- &.accordion-header{
- padding: 8px 5px 8px 36px;
- }
- }
- .toggle-view{
- padding: 4px 5px 4px 36px;
- }
- .fonticon-play{
- font-size: 8px;
- top: 11px;
- left: 15px;
- }
- .fonticon:before{
- margin-right: 6px;
- font-size: 20px;
- top: 3px;
- position: relative;
- }
- }
- li {
- > a.down .fonticon-play {
- .rotate(90deg);
- }
- }
+ .accordion-body {
+ color: #eee;
+ margin-left: 0;
li {
+ cursor: pointer;
+ &.active > a {
+ background-color: rgba(255, 0, 0, 0.1);
+ }
> a.down .fonticon-play {
.rotate(90deg);
}
-
- &:hover {
- .fonticon-play {
- color: white;
-
+ &:hover .fonticon-play {
+ color: #dddddd;
+ }
+ a {
+ font-size: 14px;
+ background-color: rgba(0, 0, 0, 0.02);
+ &:hover {
+ color: #fff;
+ text-decoration: none;
+ background-color: @darkRed;
+ }
+ border-top: none;
+ &.accordion-header{
+ padding: 8px 5px 8px 36px;
}
}
-
}
+ }
+
+ .toggle-view {
+ padding: 4px 5px 4px 36px;
+ }
+ .fonticon-play {
+ font-size: 8px;
+ top: 11px;
+ left: 15px;
+ color: @subListGray;
+ position: absolute;
+ display: block;
+ vertical-align: bottom;
+ .transition(all 0.25s linear);
+ }
+ .fonticon:before {
+ margin-right: 6px;
+ font-size: 20px;
+ top: 3px;
+ position: relative;
+ }
+ .accordion-header:hover .fonticon-play {
+ color: white;
+ }
+ }
+ .design-doc-name {
+ cursor: pointer;
+ margin: 0;
+ color: #222222;
+ span {
+ width: @sidebarWidth - 30px;
+ display: block;
+ padding: 10px 13px 10px 36px;
+ text-overflow: ellipsis;
+ overflow: hidden;
}
}
}
+
+.index-group-header {
--- End diff --
maybe namespace it somehow, e.g by nesting and/or naming?
---
If your project is set up for it, you can reply to this email and have your
reply appear on GitHub as well. If your project does not have this feature
enabled and wishes so, or if the feature is enabled but not working, please
contact infrastructure at infrastructure@apache.org or file a JIRA ticket
with INFRA.
---