Bug 11326 - Button style issues
Summary: Button style issues
Status: CLOSED WONTFIX
Alias: None
Product: Infrastructure
Classification: Unclassified
Component: Web Site (show other bugs)
Version: unspecified
Hardware: unspecified Unspecified
: - Unknown - - Unknown -
Assignee: Assigned to nobody - feel free to grab it and work on it
QA Contact: Michael Tremer
URL:
Keywords:
Depends on:
Blocks: 11314
  Show dependency tree / graph
 
Reported: 2017-05-01 23:22 UTC by Maurice Gesswein
Modified: 2018-11-05 18:55 UTC (History)
1 user (show)

See Also:

Attachments
Add an attachment (proposed patch, testcase, etc.)

Note You need to log in before you can comment on or make changes to this bug.
Description Maurice Gesswein 2017-05-01 23:22:40 UTC 
I see a couple of issues at the buttons I would like to fix. I'll simply list them down.

* Touch targets (48px) at 36px buttons are missing. Thats important for e.g. Smartphone to provide a comfortable touch zone for an element/button. Let me know if you want to learn more about that.
* The border on filled buttons falsified the left/right paddings. Please remove the border if the button don't need it
* Please recheck the left/right paddings of ALL buttons and compare carefully with the Pattern Lib sheet at Zeplin. Paddings are different if an icon is included.
* Please remove the shadow at the outline buttons. For the hover effect please use the hover effect of the 36px buttons. That was not clear provided in Zeplin. Sorry for that. Will fix that soon.
* The "OnClick" state was wrongly used as the hover state. Please fix.
* It looks like that "Ubuntu-Medium (600)" is not imported:
@import url("https://fonts.googleapis.com/css?family=Ubuntu:300,400,700");
Can you replace 700 with 600 for now please? I guess I'll not use bold (700) in the designs.
Comment 1 Sven Hoehn 2017-05-02 07:25:17 UTC 
* Touch targets (48px) at 36px buttons are missing. Thats important for e.g. Smartphone to provide a comfortable touch zone for an element/button. Let me know if you want to learn more about that.
* The border on filled buttons falsified the left/right paddings. Please remove the border if the button don't need it
* Please recheck the left/right paddings of ALL buttons and compare carefully with the Pattern Lib sheet at Zeplin. Paddings are different if an icon is included.

Maybe it is easier to rewrite the buttons completely and don’t use the bootstrap buttons at all. But I will check.

* It looks like that "Ubuntu-Medium (600)" is not imported:
@import url("
https://fonts.googleapis.com/css?family=Ubuntu:300,400,700
");
Can you replace 700 with 600 for now please? I guess I'll not use bold (700) in the designs.

There is no Ubuntu font from Google with a width of 600.
Google offers only 300 (light), 400 (regular), 500 (medium) and 700 (bold).
Comment 2 Maurice Gesswein 2017-05-02 09:04:30 UTC 
I mixed it up with semi-bold. Please use Ubuntu 500 instead. Thanks :)