Skip to content

Commit

Permalink
Merge pull request #788 from supertokens/fix/code-snippet-tabs-css
Browse files Browse the repository at this point in the history 
fix: Tabs taking full width in docs
  • Loading branch information
@rishabhpoddar
rishabhpoddar authored Apr 3, 2024
2 parents 4146175 + 8e25cdf commit 7889e84
Show file tree
Hide file tree
Showing 2 changed files with 23 additions and 23 deletions.
44 changes: 22 additions & 22 deletions v2/src/css/custom.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -136,7 +136,7 @@ html[data-theme="dark"] .markdown p {
margin: 0 0 20px;
}

html[data-theme="dark"] .tabs-container p {
html[data-theme="dark"] .docs-tabs-container p {
margin: 16px 0px 20px;
}

Expand Down Expand Up @@ -451,71 +451,71 @@ html[data-theme='dark'] main>.container>.row .table-of-contents .table-of-conten
}

/* tabs */
html[data-theme='dark'] .tabs-container:not(.sub-tab) {
html[data-theme='dark'] .docs-tabs-container:not(.sub-tab) {
border-radius: 6px;
margin-bottom: 20px;
}

html[data-theme="dark"] .tabs-container div[role="tabpanel"]>div[class^="codeBlockContainer"]:last-child,
html[data-theme="dark"] .tabs-container div[role="tabpanel"]>.app-info-form-container:last-child,
html[data-theme="dark"] .tabs-container div[role="tabpanel"]>.app-info-form-question-container:last-child {
html[data-theme="dark"] .docs-tabs-container div[role="tabpanel"]>div[class^="codeBlockContainer"]:last-child,
html[data-theme="dark"] .docs-tabs-container div[role="tabpanel"]>.app-info-form-container:last-child,
html[data-theme="dark"] .docs-tabs-container div[role="tabpanel"]>.app-info-form-question-container:last-child {
margin-bottom: 20px;
}

html[data-theme="dark"] .tabs-container div[role="tabpanel"]>img:first-child {
html[data-theme="dark"] .docs-tabs-container div[role="tabpanel"]>img:first-child {
margin-top: 0px;
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}

html[data-theme="dark"] .tabs-container div[role="tabpanel"]>*:last-child {
html[data-theme="dark"] .docs-tabs-container div[role="tabpanel"]>*:last-child {
margin-bottom: 0px;
}

html[data-theme='dark'] .tabs-container:not(.sub-tab)>ul[role="tablist"] {
html[data-theme='dark'] .docs-tabs-container:not(.sub-tab)>ul[role="tablist"] {
border: 1px solid rgb(51, 51, 51);
box-shadow: var(--container-box-shadow);
}

html[data-theme='dark'] .tabs-container p {
html[data-theme='dark'] .docs-tabs-container p {
margin: 16px 0px 20px;
}

html[data-theme='dark'] .tabs-container:not(.sub-tab)>.tabs>.tabs__item {
html[data-theme='dark'] .docs-tabs-container:not(.sub-tab)>.tabs>.tabs__item {
font-size: 16px;
padding: 16px;
font-weight: bold;
white-space: nowrap;
border-radius: 0px;
}

html[data-theme='dark'] .tabs-container.sub-tab>.tabs>.tabs__item {
html[data-theme='dark'] .docs-tabs-container.sub-tab>.tabs>.tabs__item {
font-size: 13px;
padding: 16px 10px;
white-space: nowrap;
border-radius: 0px;
}

html[data-theme='dark'] .tabs-container.sub-tab>.tabs {
html[data-theme='dark'] .docs-tabs-container.sub-tab>.tabs {
background-color: rgb(21, 21, 21);
border: 1px solid rgb(51, 51, 51);
border-top: 0px;
box-shadow: var(--container-box-shadow);
}

html[data-theme='dark'] .tabs-container.sub-tab:not(:first-child)>.tabs {
html[data-theme='dark'] .docs-tabs-container.sub-tab:not(:first-child)>.tabs {
border-top: 1px solid rgb(51, 51, 51);
border-radius: 6px;
}

html[data-theme='dark'] .tabs-container ol:not(.tabs),
html[data-theme='dark'] .tabs-container ul:not(.tabs) {
html[data-theme='dark'] .docs-tabs-container ol:not(.tabs),
html[data-theme='dark'] .docs-tabs-container ul:not(.tabs) {
margin-bottom: 0px;
padding-bottom: 16px;
}

html[data-theme="dark"] .tabs-container div[role="tabpanel"]>ol:not(.tabs):first-child,
html[data-theme="dark"] .tabs-container div[role="tabpanel"]>ul:not(.tabs):first-child {
html[data-theme="dark"] .docs-tabs-container div[role="tabpanel"]>ol:not(.tabs):first-child,
html[data-theme="dark"] .docs-tabs-container div[role="tabpanel"]>ul:not(.tabs):first-child {
margin-top: 20px;
margin-bottom: 20px;
padding-bottom: 0px;
Expand All @@ -527,23 +527,23 @@ html[data-theme="dark"] .app-info-form-container {
box-shadow: var(--container-box-shadow);
}

html[data-theme='dark'] .tabs-container .app-info-form-question-container {
html[data-theme='dark'] .docs-tabs-container .app-info-form-question-container {
border: 1px solid #404040;
}

html[data-theme='dark'] .tabs-container .app-info-form-container {
html[data-theme='dark'] .docs-tabs-container .app-info-form-container {
border: 0px;
}

html[data-theme='dark'] .tabs-container .app-info-form-question-container:first-child,
html[data-theme='dark'] .tabs-container .app-info-form-container:first-child {
html[data-theme='dark'] .docs-tabs-container .app-info-form-question-container:first-child,
html[data-theme='dark'] .docs-tabs-container .app-info-form-container:first-child {
border: 1px solid #404040;
border-top: 0px;
border-top-left-radius: 0px !important;
border-top-right-radius: 0px;
}

html[data-theme="dark"] .tabs-container div[role="tabpanel"] div[class^="codeBlockContainer"]:first-child .prism-code {
html[data-theme="dark"] .docs-tabs-container div[role="tabpanel"] div[class^="codeBlockContainer"]:first-child .prism-code {
border-top-left-radius: 0px;
border-top-right-radius: 0px;
}
Expand Down
2 changes: 1 addition & 1 deletion v2/src/theme/Tabs/index.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -95,7 +95,7 @@ function Tabs(props) {
return (
<div
className={clsx(
'tabs-container',
'docs-tabs-container',
{
'sub-tab': isSubTab
}
Expand Down

0 comments on commit 7889e84

Please sign in to comment.