diff --git a/docs/components-and-apis.md b/docs/components-and-apis.md index 9c54a48d7a1..616ead503e0 100644 --- a/docs/components-and-apis.md +++ b/docs/components-and-apis.md @@ -43,6 +43,12 @@ Most apps will end up using one or more of these basic components.

A component for inputting text into the app via a keyboard.

+
+ +

Pressable

+

A wrapper component that can detect various stages of press interactions on any of its children.

+
+

ScrollView

diff --git a/website/src/css/customTheme.scss b/website/src/css/customTheme.scss index b4f0fdc6ac4..05ff442595c 100644 --- a/website/src/css/customTheme.scss +++ b/website/src/css/customTheme.scss @@ -1770,8 +1770,9 @@ td .label { /* Components grid */ article .component-grid { - max-width: 800px; margin-bottom: 22px; + display: grid; + grid-column-gap: 22px; .component { border: 1px solid var(--ifm-color-emphasis-500); @@ -1783,13 +1784,14 @@ article .component-grid { overflow: hidden; &:hover { - transform: scale(1.05); + transform: scale(1.033); } > a { display: block; height: 100%; border-bottom: none; + background: none !important; } h3 { @@ -1797,7 +1799,7 @@ article .component-grid { font-weight: 600; margin: 0; padding: 0 10px; - background-color: var(--home-button-primary); + background-color: var(--ifm-color-info-darkest); color: var(--home-button-primary-text); line-height: 36px; @@ -1807,7 +1809,7 @@ article .component-grid { } p { - padding: 10px; + padding: 6px 10px 8px; font-size: 15px; margin: 2px; color: var(--ifm-font-color-base); @@ -1815,6 +1817,7 @@ article .component-grid { code { font-size: 15px; padding: 0 1px; + top: 0; } } } @@ -1824,13 +1827,6 @@ html[data-theme="dark"] .component { border: 1px solid var(--ifm-color-emphasis-200); } -@supports (display: grid) { - article .component-grid { - display: grid; - grid-column-gap: 22px; - } -} - @media only screen and (min-width: 768px) { article .component-grid.component-grid-border { border-bottom: 1px solid var(--ifm-table-border-color); @@ -1843,22 +1839,20 @@ html[data-theme="dark"] .component { vertical-align: top; } - @supports (display: grid) { - article .component-grid { - grid-template-columns: repeat(2, 1fr); - } + article .component-grid { + grid-template-columns: repeat(2, 1fr); + } - @media only screen and (min-width: 1440px) { - article .component-grid { - grid-template-columns: repeat(3, 1fr); - } + @media only screen and (min-width: 1440px) { + article .component-grid { + grid-template-columns: repeat(3, 1fr); } + } - article .component { - width: auto; - height: auto; - margin: 0; - } + article .component { + width: auto; + height: auto; + margin: 0; } } diff --git a/website/versioned_docs/version-0.77/components-and-apis.md b/website/versioned_docs/version-0.77/components-and-apis.md index 9c54a48d7a1..616ead503e0 100644 --- a/website/versioned_docs/version-0.77/components-and-apis.md +++ b/website/versioned_docs/version-0.77/components-and-apis.md @@ -43,6 +43,12 @@ Most apps will end up using one or more of these basic components.

A component for inputting text into the app via a keyboard.

+
+ +

Pressable

+

A wrapper component that can detect various stages of press interactions on any of its children.

+
+

ScrollView

diff --git a/website/versioned_docs/version-0.78/components-and-apis.md b/website/versioned_docs/version-0.78/components-and-apis.md index 9c54a48d7a1..616ead503e0 100644 --- a/website/versioned_docs/version-0.78/components-and-apis.md +++ b/website/versioned_docs/version-0.78/components-and-apis.md @@ -43,6 +43,12 @@ Most apps will end up using one or more of these basic components.

A component for inputting text into the app via a keyboard.

+
+ +

Pressable

+

A wrapper component that can detect various stages of press interactions on any of its children.

+
+

ScrollView

diff --git a/website/versioned_docs/version-0.79/components-and-apis.md b/website/versioned_docs/version-0.79/components-and-apis.md index 9c54a48d7a1..616ead503e0 100644 --- a/website/versioned_docs/version-0.79/components-and-apis.md +++ b/website/versioned_docs/version-0.79/components-and-apis.md @@ -43,6 +43,12 @@ Most apps will end up using one or more of these basic components.

A component for inputting text into the app via a keyboard.

+
+ +

Pressable

+

A wrapper component that can detect various stages of press interactions on any of its children.

+
+

ScrollView

diff --git a/website/versioned_docs/version-0.80/components-and-apis.md b/website/versioned_docs/version-0.80/components-and-apis.md index 9c54a48d7a1..616ead503e0 100644 --- a/website/versioned_docs/version-0.80/components-and-apis.md +++ b/website/versioned_docs/version-0.80/components-and-apis.md @@ -43,6 +43,12 @@ Most apps will end up using one or more of these basic components.

A component for inputting text into the app via a keyboard.

+
+ +

Pressable

+

A wrapper component that can detect various stages of press interactions on any of its children.

+
+

ScrollView

diff --git a/website/versioned_docs/version-0.81/components-and-apis.md b/website/versioned_docs/version-0.81/components-and-apis.md index 9c54a48d7a1..616ead503e0 100644 --- a/website/versioned_docs/version-0.81/components-and-apis.md +++ b/website/versioned_docs/version-0.81/components-and-apis.md @@ -43,6 +43,12 @@ Most apps will end up using one or more of these basic components.

A component for inputting text into the app via a keyboard.

+
+ +

Pressable

+

A wrapper component that can detect various stages of press interactions on any of its children.

+
+

ScrollView