mirror of
https://github.com/getredash/redash.git
synced 2025-12-25 01:03:20 -05:00
6cc69ec2c1
* Fixed jsx-a11y problems
* Changed tabIndex to type number
* Initial improvements to DesktopNavbar accessibility
* Added accessibility to favorites list
* Improved accessibility in Desktop Navbar
* Improvements in Desktop navbar semantics
* Added aria roles to tags list
* Fixed tabindex type
* Improved aria labels in query control dropdown
* Added tab for help trigger close button
* Fixed typo
* Improved accessibility in query selector
* Changed resizable role to separator
* Added label to empty state close button
* Removed redundant and mistaken roles
* Used semantic components
* Removed tabIndex from anchor tags
* Removed mistakenly set menuitem role from anchors
* Removed tabIndex from Link components
* Removed improper hidden aria label from icon
* Reverted button and link roles in anchors for minimal merge conflicts
* Replaced alt attr with aria-label for icons
* Removed redundant menu role
* Improved accessibility of CodeBlock
* Removed improper role from schema browser
* Reverted favorites list to div
* Removed improper presentation role in query snippets
* Tracked changes for further PR
* Revert "Improved accessibility of CodeBlock"
* Add aria-labelledby to the associated code labels
This reverts commit 00a1685b1b.
* Wrapped close icon into button
173 lines
2.9 KiB
Plaintext
173 lines
2.9 KiB
Plaintext
@backgroundColor: #001529;
|
|
@dividerColor: rgba(255, 255, 255, 0.5);
|
|
@textColor: rgba(255, 255, 255, 0.75);
|
|
@brandColor: #ff7964; // Redash logo color
|
|
@activeItemColor: @brandColor;
|
|
@iconSize: 26px;
|
|
|
|
.desktop-navbar {
|
|
background: @backgroundColor;
|
|
display: flex;
|
|
flex-direction: column;
|
|
height: 100%;
|
|
width: 80px;
|
|
overflow: hidden;
|
|
|
|
&-spacer {
|
|
flex: 1 1 auto;
|
|
}
|
|
|
|
&-logo.ant-menu {
|
|
padding-top: 20px;
|
|
padding-bottom: 20px;
|
|
text-align: center;
|
|
|
|
img {
|
|
height: 40px;
|
|
transition: all 270ms;
|
|
}
|
|
}
|
|
|
|
.help-trigger {
|
|
font: inherit;
|
|
}
|
|
|
|
.ant-menu {
|
|
.ant-menu-item,
|
|
.ant-menu-submenu {
|
|
font-weight: 500;
|
|
color: @textColor;
|
|
|
|
&.navbar-active-item {
|
|
box-shadow: inset 3px 0 0 @activeItemColor;
|
|
|
|
.anticon {
|
|
color: @activeItemColor;
|
|
}
|
|
}
|
|
|
|
&.ant-menu-submenu-open,
|
|
&.ant-menu-submenu-active,
|
|
&:hover,
|
|
&:active,
|
|
&:focus,
|
|
&:focus-within {
|
|
color: #fff;
|
|
}
|
|
|
|
.anticon {
|
|
font-size: @iconSize;
|
|
margin: 0;
|
|
}
|
|
|
|
.desktop-navbar-label {
|
|
margin-top: 4px;
|
|
font-size: 11px;
|
|
}
|
|
|
|
a,
|
|
span,
|
|
.anticon {
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.ant-menu-submenu-arrow {
|
|
display: none;
|
|
}
|
|
|
|
.ant-menu-item,
|
|
.ant-menu-submenu {
|
|
padding: 0;
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
flex-direction: column;
|
|
justify-content: center;
|
|
}
|
|
|
|
.ant-menu-submenu-title {
|
|
width: 100%;
|
|
padding: 0;
|
|
}
|
|
|
|
a,
|
|
&.ant-menu-vertical > .ant-menu-submenu > .ant-menu-submenu-title,
|
|
.ant-menu-submenu-title {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
line-height: normal;
|
|
height: auto;
|
|
background: none;
|
|
color: inherit;
|
|
}
|
|
}
|
|
|
|
.desktop-navbar-profile-menu {
|
|
.desktop-navbar-profile-menu-title {
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
overflow: hidden;
|
|
|
|
.profile__image_thumb {
|
|
margin: 0;
|
|
vertical-align: middle;
|
|
width: @iconSize;
|
|
height: @iconSize;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
.desktop-navbar-submenu {
|
|
.ant-menu {
|
|
.ant-menu-item-divider {
|
|
background: @dividerColor;
|
|
}
|
|
|
|
.ant-menu-item {
|
|
font-weight: 500;
|
|
color: @textColor;
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus,
|
|
&:focus-within {
|
|
color: #fff;
|
|
}
|
|
|
|
a,
|
|
span,
|
|
.anticon {
|
|
color: inherit;
|
|
}
|
|
|
|
.zmdi,
|
|
.fa {
|
|
margin-right: 5px;
|
|
}
|
|
|
|
&.version-info {
|
|
height: auto;
|
|
line-height: normal;
|
|
padding-top: 12px;
|
|
padding-bottom: 12px;
|
|
|
|
a {
|
|
color: rgba(255, 255, 255, 0.8);
|
|
|
|
&:hover,
|
|
&:active,
|
|
&:focus,
|
|
&:focus-within {
|
|
color: rgba(255, 255, 255, 1);
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|