Skip to content

Commit

Permalink
fix: drop usage of :has selector (#64)
Browse files Browse the repository at this point in the history
  • Loading branch information
@kevinperaza
kevinperaza authored Feb 10, 2023
1 parent d0b576f commit 8bc8788
Show file tree
Hide file tree
Showing 7 changed files with 54 additions and 53 deletions.
6 changes: 2 additions & 4 deletions src/components/docs/BlueprintCard.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2,13 +2,11 @@
padding: 0 !important;
}

.card > div:has(img),
.card > div:has(svg) {
.card > div:first-child {
margin: 0;
display: contents;
}
.card > div:not(:has(img)),
.card > div:not(:has(svg)) {
.card > div:nth-child(2) {
padding: 24px;
}

Expand Down
2 changes: 1 addition & 1 deletion src/components/shared/Alert.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,7 @@
margin: 15px 0;
}

.container > div:has(.svg) {
.container > div:first-child {
padding-right: 14px;
}

Expand Down
2 changes: 1 addition & 1 deletion src/css/footer.scss
View file
Original file line number Diff line number Diff line change
Expand Up @@ -24,7 +24,7 @@
}

@media only screen and (max-width: 1024px) {
div:has(> .theme-last-updated) {
.theme-doc-footer-edit-meta-row div {
display: flex;
justify-content: center;
}
Expand Down
2 changes: 1 addition & 1 deletion src/css/tabs.scss
View file
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
/* tabs */

div:has(> .bt-tabs) {
.tabs-container {
border-radius: var(--ifm-global-radius);
background-color: var(--bt-sidebar-background-color);
}
Expand Down
41 changes: 21 additions & 20 deletions src/pages/index.module.css
View file
Original file line number Diff line number Diff line change
Expand Up @@ -204,7 +204,7 @@
color: var(--ifm-font-color-base);
}

.quickstarts {
.sdks {
display: flex;
flex-direction: column;
font-weight: 600;
Expand All @@ -213,48 +213,49 @@
color: var(--bt-card-text-color);
}

.quickstarts-container {
.sdks-container {
display: flex;
flex-direction: row;
gap: 24px;
}
.quickstarts-container > div {
.sdks-container > div {
display: flex;
gap: 16px;
flex-flow: column wrap;
flex: 0 0 33.333333%;
}

.quickstart-column {
.sdk-column {
display: flex;
gap: 8px;
flex-flow: row wrap;
flex: 0 0 33.333333%;
}

.quickstart-column > div {
.sdk-column > div {
flex: 0 1;
}

.quickstart {
.sdk {
border-radius: 8px;
height: 44px;
padding: 6px 12px 6px 12px;
}

.quickstart * {
.sdk * {
font-weight: 600;
font-size: 16px;
line-height: 150%;
}

.quickstart div:has(svg),
.quickstart div:has(img) {
.sdk div:first-child {
margin-right: 8px;
}

.quickstart div:has(img) {
.sdk .logo-container {
width: 32px;
height: 32px;
margin: 0px !important;
}

.explore-cards-container {
Expand All @@ -273,7 +274,7 @@
}

@media only screen and (max-width: 600px) {
.quickstart {
.sdk {
width: 100% !important;
}
}
Expand Down Expand Up @@ -313,26 +314,26 @@
}

@media only screen and (max-width: 800px) {
.quickstarts-container {
.sdks-container {
flex-direction: column;
}

.quickstart-column {
.sdk-column {
gap: 16px;
}

.quickstart-column > div {
.sdk-column > div {
flex: 0 0;
flex-flow: row nowrap;
}
.quickstart div:has(svg),
.quickstart div:has(img) {
.sdk div:has(svg),
.sdk div:has(img) {
margin: 0px;
margin-right: 8px;
}

.quickstart svg,
.quickstart img {
.sdk svg,
.sdk img {
height: 42px;
width: 42px;
}
Expand All @@ -343,8 +344,8 @@
}

@media only screen and (min-width: 600px) {
.quickstart div:has(svg),
.quickstart div:has(img) {
.sdk div:has(svg),
.sdk div:has(img) {
margin-right: 8px;
}
}
Expand Down
50 changes: 26 additions & 24 deletions src/pages/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -170,98 +170,100 @@ export default function Home(): JSX.Element {
</div>
</div>

<div className={styles["quickstarts"]}>
<div className={styles["sdks"]}>
<h2>SDKs</h2>
<div className={styles["quickstarts-container"]}>
<div className={styles["sdks-container"]}>
<div>
Server-side SDKs
<div className={styles["quickstart-column"]}>
<div className={styles["sdk-column"]}>
<Card
href="/docs/sdks/server-side/dotnet"
img={<DotNet />}
className={styles.quickstart}
className={styles.sdk}
>
.NET
</Card>
<Card
href="/docs/sdks/server-side/java"
img={<Java />}
className={styles.quickstart}
className={styles.sdk}
>
Java
</Card>
<Card
href="/docs/sdks/server-side/go"
img={<Go />}
className={styles.quickstart}
className={styles.sdk}
>
Go
</Card>
<Card
href="/docs/sdks/server-side/node"
img={<Node />}
className={styles.quickstart}
className={styles.sdk}
>
NodeJS
</Card>
<Card
href="/docs/sdks/server-side/python"
img={<Python />}
className={styles.quickstart}
className={styles.sdk}
>
Python
</Card>
<Card
href="/docs/sdks/server-side/terraform"
img={<Terraform />}
className={styles.quickstart}
className={styles.sdk}
>
Terraform
</Card>
</div>
</div>
<div>
Web SDKs
<div className={styles["quickstart-column"]}>
<div className={styles["sdk-column"]}>
<Card
href="/docs/sdks/web/javascript/"
img={<JavaScript />}
className={styles.quickstart}
className={styles.sdk}
>
Javascript
</Card>
<Card
href="/docs/sdks/web/react/"
img={<ReactSvg />}
className={styles.quickstart}
className={styles.sdk}
>
React
</Card>
</div>
</div>
<div className={styles["quickstart-column"]}>
<div className={styles["sdk-column"]}>
Mobile SDKs
<div className={styles["quickstart-column"]}>
<div className={styles["sdk-column"]}>
<Card
href="/docs/sdks/mobile/ios/"
img={
<ThemedImage
width="100%"
height="100%"
sources={{
light: useBaseUrl("/img/sdk/logos/apple.svg"),
dark: useBaseUrl("/img/sdk/logos/apple-dark.svg"),
}}
/>
<div className={styles["logo-container"]}>
<ThemedImage
width="100%"
height="100%"
sources={{
light: useBaseUrl("/img/sdk/logos/apple.svg"),
dark: useBaseUrl("/img/sdk/logos/apple-dark.svg"),
}}
/>
</div>
}
className={styles.quickstart}
className={styles.sdk}
>
iOS
</Card>
<Card
href="/docs/sdks/mobile/android/"
img={<Android />}
className={styles.quickstart}
className={styles.sdk}
>
Android
</Card>
Expand Down
4 changes: 2 additions & 2 deletions src/theme/Icon/Edit/styles.module.css
View file
Original file line number Diff line number Diff line change
@@ -1,4 +1,4 @@
a:has(.icon-edit) {
.theme-edit-this-page svg {
display: flex;
align-items: center;
font-weight: 600;
Expand All @@ -15,7 +15,7 @@ a:has(.icon-edit) {
}

@media screen and (max-width: 996px) {
a:has(.icon-edit) {
.theme-edit-this-page svg {
place-content: center;
}
}

1 comment on commit 8bc8788

@vercel
Copy link

@vercel vercel bot commented on 8bc8788 Feb 10, 2023

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Successfully deployed to the following URLs:

developers-basistheory-com – ./

developers-basistheory-com-basis-theory.vercel.app
developers-basistheory-com-git-master-basis-theory.vercel.app
developers.basistheory.com

Please sign in to comment.