Adding tab borders #6593
There are no files selected for viewing
| Original file line number | Diff line number | Diff line change |
|---|---|---|
|
|
@@ -2143,4 +2143,66 @@ table th { | |
| [data-theme='dark'] table th { | ||
| color: #000000; /* Black text on darker background */ | ||
| font-weight: bold; | ||
| } | ||
|
|
||
| .tabs { | ||
| background-color: transparent; | ||
| padding: 10px; | ||
| } | ||
|
|
||
| /* Default color and border for tabs */ | ||
| .tabs__item { | ||
|
There was a problem hiding this comment. In an effort to reduce the amount of custom colors used, would we be able to swap this with the |
||
| background-color: #f9fbfc; /* Sets the tab color the same as the file borders */ | ||
|
There was a problem hiding this comment. Same note about using available color variables here, can we swap all uses of |
||
| border: 2px solid #ccc; | ||
| padding: 5px 10px; | ||
| margin-right: 5px; | ||
| border-radius: 4px; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s; | ||
| } | ||
|
|
||
| /* Default color and border for tabs in dark mode */ | ||
| [data-theme='dark'] .tabs__item { | ||
|
There was a problem hiding this comment. To avoid using black (not a brand color), can we swap this and anywhere #000 is used with |
||
| background-color: #000000; | ||
| border: 1px solid #ccc; | ||
| padding: 5px 10px; | ||
| margin-right: 5px; | ||
| border-radius: 4px; | ||
| cursor: pointer; | ||
| transition: background-color 0.3s; | ||
| } | ||
|
|
||
| /*Color when hovering over tabs */ | ||
| .tabs__item:hover { | ||
|
There was a problem hiding this comment.
There was a problem hiding this comment. Also, on hover, the lighter text is still set on the tab while the orange background is applied. This doesn't pass the WCAG accessibility check for contrast link here. The text color may need to be updated on hover to match the color when the tab is active. There was a problem hiding this comment. And on hover, can we have the border color update to match the background color as well? Similar to how the border updates for the active tab. |
||
| background-color: #D95B3B; | ||
| } | ||
|
|
||
| /* Color when the tab is clicked*/ | ||
| .tabs__item--active { | ||
| background-color: #D95B3B; | ||
| color: rgb(0, 0, 0); | ||
| border-color: #D95B3B; | ||
| } | ||
|
|
||
| [data-theme='dark'] .tabs__item--active { | ||
| background-color: #D95B3B; | ||
| color: white; | ||
| border-color: #D95B3B; | ||
| } | ||
|
|
||
| /* Sets the tab content border and background color */ | ||
| [data-theme='dark'] .tabs-container{ | ||
| border: 1px solid #ccc; | ||
| padding: 15px; | ||
| border-radius: 10px; | ||
| margin-top: 10px; | ||
| background-color: transparent; | ||
| } | ||
|
|
||
| [data-theme='light'] .tabs-container{ | ||
|
There was a problem hiding this comment. In light mode, can we use a lighter color for the border? The |
||
| border: 1px solid #000000; | ||
| padding: 15px; | ||
| border-radius: 10px; | ||
| margin-top: 10px; | ||
| background-color: transparent; | ||
| } | ||
There was a problem hiding this comment.
Choose a reason for hiding this comment
The reason will be displayed to describe this comment to others. Learn more.
Rather than using hard-coded hex values, can we choose from the existing variables available at the top of this
custom.cssfile? That will help us stay within our brand colors, while also making it easier to update colors across the board if needed down the road.