Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

bug(help): Fix style issues with tables in help #1730

Merged
merged 4 commits into from
Nov 2, 2023
Merged
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
93 changes: 83 additions & 10 deletions accessibility-checker-engine/help-v4/common/help.css
Original file line number Diff line number Diff line change
Expand Up @@ -29,7 +29,7 @@ bx-list-item>code, p>code, td>code {
position: relative;
}

.toolhelp a {
.toolHelp a {
color: var(--cds-link-primary)
}

Expand All @@ -38,23 +38,23 @@ bx-list-item>code, p>code, td>code {
}

.toolHelp .toolHead h3 {
font-family: 'IBM Plex Sans';
font-family: 'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
font-style: normal;
font-weight: 600;
font-size: 16px;
line-height: 24px;
}

.toolHelp .toolHead .issueLevel {
font-family: 'IBM Plex Sans';
font-family: 'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
line-height: 16px;
}

.toolHelp .toolHead #ruleMessage {
font-family: 'IBM Plex Sans';
font-family: 'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
font-style: normal;
font-weight: 600;
font-size: 16px;
Expand All @@ -64,7 +64,7 @@ bx-list-item>code, p>code, td>code {
}

.toolHelp .toolHead #groupLabel {
font-family: 'IBM Plex Sans';
font-family: 'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
font-style: normal;
font-weight: 400;
font-size: 12px;
Expand All @@ -73,7 +73,7 @@ bx-list-item>code, p>code, td>code {

/* productive-heading-03 */
.toolHelp .toolMain h3 {
font-family: 'IBM Plex Sans';
font-family: 'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
font-style: normal;
font-weight: 600;
font-size: 16px;
Expand All @@ -88,7 +88,7 @@ bx-list-item>code, p>code, td>code {

/* productive-heading-03 */
.toolHelp .toolSide h3 {
font-family: 'IBM Plex Sans';
font-family: 'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
font-style: normal;
font-weight: 600;
font-size: 16px;
Expand All @@ -101,7 +101,7 @@ bx-list-item>code, p>code, td>code {
}
}
body {
font-family: 'IBM Plex Sans', sans-serif;
font-family: 'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
color: var(--cds-text-primary);
background-color: var(--cds-ui-background);
}
Expand All @@ -114,7 +114,7 @@ body {
}

.toolHelp p {
font-family: 'IBM Plex Sans';
font-family: 'IBM Plex Sans','Helvetica Neue',Arial,sans-serif;
font-style: normal;
font-weight: 400;
font-size: 14px;
Expand Down Expand Up @@ -156,7 +156,7 @@ letter-spacing: 0.16px;

.toolHelp .toolSide {
padding: 16px 16px 16px 32px;
background-color: var(--cds-ui-background);;
background-color: var(--cds-ui-background);
color: var(--cds-text-primary);
border-top: solid var(--cds-text-primary) 1px;
}
Expand Down Expand Up @@ -193,3 +193,76 @@ bx-code-snippet[type="multi"]::after {
#ruleInfo p {
font-size: 14px;
}

mark-down table tbody tr:hover {
background: var(--cds-layer-hover);
}
mark-down table tbody tr:hover td, mark-down table tbody tr:hover th {
background: var(--cds-layer-hover);
-webkit-border-after: 1px solid var(--cds-layer-hover);
border-block-end: 1px solid var(--cds-layer-hover);
-webkit-border-before: 1px solid var(--cds-layer-hover);
border-block-start: 1px solid var(--cds-layer-hover);
color: var(--cds-text-primary,#161616);
}

mark-down table {
margin-top: 1rem;
width: 100%;
}

@media (min-width: 66rem) {
mark-down table {
max-width: 66.66%;
}
}

mark-down table thead {
font-size: var(--cds-heading-compact-01-font-size,0.875rem);
font-weight: var(--cds-heading-compact-01-font-weight,600);
line-height: var(--cds-heading-compact-01-line-height,1.28572);
letter-spacing: var(--cds-heading-compact-01-letter-spacing,0.16px);
background-color: var(--cds-layer-accent);
}

mark-down table tr {
border: none;
block-size: 3rem;
inline-size: 100%;
}

mark-down table th {
background-color: var(--cds-layer-accent);
color: var(--cds-text-primary,#161616);
-webkit-padding-end: 1rem;
padding-inline-end: 1rem;
-webkit-padding-start: 1rem;
padding-inline-start: 1rem;
}

mark-down table td, mark-down table th {
text-align: start;
vertical-align: middle;
}

mark-down table tbody {
font-size: var(--cds-body-compact-01-font-size,0.875rem);
font-weight: var(--cds-body-compact-01-font-weight,400);
line-height: var(--cds-body-compact-01-line-height,1.28572);
letter-spacing: var(--cds-body-compact-01-letter-spacing,0.16px);
background-color: var(--cds-layer);
inline-size: 100%;
}

mark-down table td, mark-down table tbody th {
background: var(--cds-layer);
-webkit-border-after: 1px solid var(--cds-border-subtle);
border-block-end: 1px solid var(--cds-border-subtle);
-webkit-border-before: 1px solid var(--cds-layer);
border-block-start: 1px solid var(--cds-layer);
color: var(--cds-text-secondary,#525252);
-webkit-padding-end: 1rem;
padding-inline-end: 1rem;
-webkit-padding-start: 1rem;
padding-inline-start: 1rem;
}
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Original file line number Diff line number Diff line change
@@ -1,3 +1,4 @@
<!DOCTYPE html>
<html lang="en-US">
<head>
<!--
Expand Down
Loading