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 [email protected] or file a JIRA ticket
with INFRA.
---
