Support for Drupal 7 is ending on 5 January 2025—it’s time to migrate to Drupal 10! Learn about the many benefits of Drupal 10 and find migration tools in our resource center.
Problem/Motivation
We currently use many different ways to hover/focus on items. Many of these styles were introduced in the last few months. Sadly this was not in alignment with the style guide.
For the style guide we propose for all text elements to have the "underline" as focused style. This means fieldsets, vertical tabs, toolbar links, etc.
This issue focuses on removing these unnecessary effects from Seven.
Proposed resolution
- Use underline as focused style (were appropriate as hover too)
Remaining tasks
User interface changes
API changes
Comment | File | Size | Author |
---|---|---|---|
#27 | remove_unnecessary-2489450-27.patch | 2.23 KB | jcnventura |
#27 | interdiff_22_27.txt | 387 bytes | jcnventura |
#22 | Screenshot 2015-10-07 17.01.38.jpg | 22.61 KB | LewisNyman |
#22 | Screenshot 2015-10-07 17.01.20.jpg | 77.84 KB | LewisNyman |
#17 | remove underline css .png | 52.28 KB | manauwarsheikh |
Comments
Comment #1
jibla CreditAttribution: jibla commentedI am in LA DrupalCon and going to fix this issue.
Comment #2
Bojhan CreditAttribution: Bojhan as a volunteer commentedSee #2487704: Use underline as the focused state (not border left/bottom). We are fixing toolbar atm. So this really contains to fixing the hover/focused styles of fieldsets/vertical tabs.
Comment #3
jibla CreditAttribution: jibla commentedDoes this issue mean that we should remove all styles but text-decoration: underline for ALL :focused/:hover styles?
I mean for example we have in admin-list.css:
.button:hover,
.button:focus {
background-color: #f9f8f6;
background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
color: #1a1a1a;
text-decoration: none;
outline: none;
}
should I change it like this?
.button:hover,
.button:focus {
text-decoration: underline;
}
?
or should I change only text-decoration, like this?
.button:hover,
.button:focus {
background-color: #f9f8f6;
background-image: -webkit-linear-gradient(top, #fcfcfa, #e9e9dd);
background-image: linear-gradient(to bottom, #fcfcfa, #e9e9dd);
color: #1a1a1a;
text-decoration: underline;
outline: none;
}
Comment #4
Bojhan CreditAttribution: Bojhan as a volunteer commentedWhat we want to do is evaluate the places were we add a border as hover effect. This is on elements such as fieldsets, vertical tabs. What we want to do instead of adding a border-top or border-left. Is to add "underline" on the main label. This underline is only triggered by hover or focused.
Comment #5
jibla CreditAttribution: jibla commentedComment #6
jibla CreditAttribution: jibla commentedComment #7
matthodgson CreditAttribution: matthodgson commentedI'll begin reviewing this patch.
Comment #8
matthodgson CreditAttribution: matthodgson commentedI was able to review the changes to tables.css.
This needs to be removed:
I believe this needs to be removed from the original file as well:
I will try to review more of the patch after leaving drupalcon la.
Comment #9
cmanalansan CreditAttribution: cmanalansan commentedSprinting at DrupalCon LA, I'll start looking at this!
Comment #10
LewisNyman CreditAttribution: LewisNyman as a volunteer commentedComment #11
cmanalansan CreditAttribution: cmanalansan commentedGoing to dinner.
I was going to upload a patch.
I swear I was.
Comment #12
kfitz CreditAttribution: kfitz at Acro Commerce commentedMade the changes to the patch according to the comments above
Comment #13
kfitz CreditAttribution: kfitz commentedComment #14
maartendeblock CreditAttribution: maartendeblock at EntityOne commentedLooking good!
Comment #15
LewisNyman CreditAttribution: LewisNyman as a volunteer commentedI'm not sure about the styling for the admin panels. Does anyone else think the styling for the admin panel and the buttons look quite bad? I don't think these are part of the original scope of the issue.
Comment #16
Bojhan CreditAttribution: Bojhan as a volunteer commentedIt should only be on text links, not buttons or anything else. There is no reason the underline should ever be triggered on descriptions.
Also is this making titles in tables not blue? This patch could probably use some handholding (e.g. developer next to designer).
Comment #17
manauwarsheikh CreditAttribution: manauwarsheikh commentedThe underlined appearance should not be applicable for "buttoned links", It should be applicable for links in the description text.Also there is extra hover on desription when "webmaster" hover on any links on the configuration page(attached screenshot).
Next Steps: commenting/removing extra "underline" css.
Comment #18
marieke_h CreditAttribution: marieke_h at XIO commentedI'll look into this.
Comment #19
marieke_h CreditAttribution: marieke_h at XIO commentedI updated the theming for admin-list hover, to only underline the label.
And also fixed the buttons.
Comment #20
pjbaertadded tag.
Comment #21
LewisNyman CreditAttribution: LewisNyman as a volunteer commentedI don't understand why this patch is adding a load of
text-decoration: underline
effects.Going back to comment #4, all we want to do is remove the border focus effects from the details and verticals and replace it with text underline.
Comment #22
LewisNyman CreditAttribution: LewisNyman as a volunteer commentedHere's a new patch that only changes styling for the details elements and vertical tabs.
Screenshots:
Comment #23
Bojhan CreditAttribution: Bojhan as a volunteer commented@Lewis There are many other places (e.g. toolbar) is that also part of this issue or should we open a separate for that?
Comment #24
Manjit.Singh@Bojhan If that is the case then we should create sub-tasks or child issues of this. Otherwise it would be bit difficult to check regression issues on many other pages.
Comment #25
LewisNyman CreditAttribution: LewisNyman as a volunteer commentedThe toolbar doesn't have these border effects on focus any more
Comment #26
Bojhan CreditAttribution: Bojhan as a volunteer commentedComment #27
jcnventura CreditAttribution: jcnventura at Wunder commentedOne very small change, as I felt the underline on details summary to have inconsistent behaviour.
I understand it needs to be kept underlined for focused, but it felt weird to not have it on hover. This patch corrects that, bringing it inline with the normal behaviour in the rest of the admin interface.
Sorry for setting it back, but other this minor annoyance, I'd have +1 the RTBC.
Comment #28
LewisNyman CreditAttribution: LewisNyman as a volunteer commentedMakes sense, we do this in some areas, like under admin/config and the toolbar. This feels consistent. Thanks.
Comment #30
jcnventura CreditAttribution: jcnventura at Wunder commentedStupid bot
Comment #31
alexpottGiven that this in not fixing a bug this can be committed to 8.1.x. Committed cbca117 and pushed to 8.1.x. Thanks!