Improve css and add focus styles #5420
Conversation
1c2d8f1 to
47016db
Compare
47016db to
95015ad
Compare
| .clickable { | ||
| cursor: pointer; | ||
|
|
||
| button&:disabled { |
There was a problem hiding this comment.
The output should be button.clickable:disabled, because the <button>is the clickable, not a child of it
| background: @redash-yellow; | ||
| border-radius: @redash-radius; | ||
| } | ||
| .editable { |
| .fa-star { | ||
| color: @yellow-darker; | ||
| .fa-star { | ||
| filter: saturate(75%); |
There was a problem hiding this comment.
Is there a screenshot or link for what this change does?
| @@ -0,0 +1,9 @@ | |||
| .ant-list-item { | |||
There was a problem hiding this comment.
This is unscoped, so it'll interact with all ant-list-item components. Is that intentional?
There was a problem hiding this comment.
Probably it's a behavior we can make use of elsewhere, but I'll scope it for now.
client/app/components/TagsList.less
Outdated
|
|
||
| a { | ||
| a, | ||
| button { |
There was a problem hiding this comment.
This is a pretty broad change -- it might be right, but I want to confirm: in this context, will there ever be button's that we don't want to match this style (e.g. button's that aren't styled like links, such as antd's Button)? If so, just switch button to some classname and we're all good.
There was a problem hiding this comment.
It shouldn't become a problem, but I agree we're safer having a class.
| } | ||
|
|
||
| .tags-control a { | ||
| .tags-control > .label-tag { |
| } | ||
|
|
||
| .ant-table-row { | ||
| height: 1px; |
There was a problem hiding this comment.
That's a surprising one. Why is that? Also, this looks like an unqualified selector -- will these three classnames impact all ant-table-cells, ant-table-rows, etc.?
There was a problem hiding this comment.
Apparently it had unwanted side effects, but this pattern is sort of a workaround to make the item contained by the cell fulfill all the available cell space, regardless of the other cells. This is interesting for links and buttons, and also provides space for future improvements in focus states. Hence, I think all tables could benefit from it. Let's scope it for now, though.
| } | ||
| } | ||
|
|
||
| .delete-visualization-button { |
There was a problem hiding this comment.
All this does is properly centralize the icon, instead of the padding workaround
9c38fc6 to
d9e1c82
Compare
ae18425 to
fe6347c
Compare
* Add plain button * Minor syntax improvements
* Refactor of link component * Applied anchor-is-valid to Link component * Fixed Eslint error * Removed improper anchor uses * Fixed TS errors
* reset failure counter when query completes successfully via adhoc * Use "query_id" in metadata, but still allow "Query ID" for transition/legacy support
* Add setting to identify email block domain ref: #5368 * rename Co-authored-by: Levko Kravets <[email protected]> * rename and add comment Co-authored-by: Levko Kravets <[email protected]> * Update redash/handlers/users.py Co-authored-by: Levko Kravets <[email protected]> * Update redash/handlers/users.py Co-authored-by: Levko Kravets <[email protected]> * Add more comment to settting Co-authored-by: Levko Kravets <[email protected]>
* feat: add trino logo * feat: add trino
b83de3e to
52552f6
Compare
What type of PR is this? (check all applicable)
Description
This PR is a split on #5409
It is the third step to fix issues on standardization, interactivity and improve keyboard accessibility.
Initially, some elements that would not have focus styles had some added and some tag restricted styles (particularly anchor) were replaced by more general approaches. Besides that, some syntax was improved.
Summary of changes
*Other than
:focusand:active