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.

Sign up for GitHub

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

ui fixes #292

Merged
merged 7 commits into from
Mar 4, 2024
Merged

ui fixes #292

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
7 commits
Select commit Hold shift + click to select a range
7398243
ui fixes
surendran82 Mar 4, 2024
d86af79
kitchen sink page images update
surendran82 Mar 4, 2024
cf64e77
table ui fixes
surendran82 Mar 4, 2024
43efdab
table ui fixes
surendran82 Mar 4, 2024
9536954
image border radius fix
surendran82 Mar 4, 2024
2a20454
ui fixes
surendran82 Mar 4, 2024
91c44f3
removed unused images
surendran82 Mar 4, 2024
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
1 change: 1 addition & 0 deletions src/components/OverviewIconCard/styles.module.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -6,6 +6,7 @@
width: 250px;
height: 250px;
opacity: .4;
margin-top: -40px;
}

[data-theme='dark'] .overviewIconCard svg {
Expand Down
77 changes: 63 additions & 14 deletions src/css/custom.css
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -36,9 +36,10 @@
--main-bg-color: #FFFFFF;
--sidebar-bg-color: #F3F4F6;
--next-prev-bg-color: #FFFFFF;
--next-prev-border-color: #D2D6DB;
--next-prev-border-color: #E5E7EB;
--search-dark-bg-color: #28334F;
--ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15,12.5L10,7.5L5 12.5" stroke="gray" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>')
--ifm-color-info-dark: #C6D6FF;
--ifm-menu-link-sublist-icon: url('data:image/svg+xml;utf8,<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M15,12.5,L10,7.5L5,12.5" stroke="gray" stroke-width="1" stroke-linecap="round" stroke-linejoin="round"/></svg>')
}

/* For readability concerns, you should choose a lighter palette in dark mode. */
Expand All @@ -58,6 +59,7 @@
--next-prev-bg-color: #18222F;
--next-prev-border-color: #293441;
--header-border-bottom: #1F2A37;
--ifm-color-info-dark: #5370B6;
}

h1 {
Expand All @@ -71,7 +73,9 @@ h2 {
@apply font-bold;
font-size: 1.5rem;
}

.markdown>h2 {
font-size: 1.5rem !important;
}
h3 {
@apply font-bold;
font-size: 1.25rem;
Expand Down Expand Up @@ -118,6 +122,27 @@ textarea {
font-size: 0.9375rem;
line-height: 1.625rem;
}

.kitchen-image-container {
height: 400px;
width: 100%;
max-width: 910px;
border: 1px solid #D2D6DB;
display: flex;
align-items: center;
justify-content: center;
border-radius: 12px;
}
.heightAuto {
height: auto;
}
[data-theme='dark'] .kitchen-image-container {
border: 1px solid #2D3956;
background-color: #1E2538;
}
.kitchen-image-container p {
text-align: center;
}
pre {
background-color: transparent !important;
}
Expand All @@ -131,14 +156,20 @@ p code {
.thumbnail img, img {
border-radius: 12px;
}

h1, h2, h3, h4, h5, h6, p, img {
max-width: 910px;
width: 100%;
}
.alert {
@apply !mb-5;
}

.alert div:first-child {
@apply mb-3;
}
.boderRadius0 {
border-radius: 0px !important;
}
.theme-admonition, .alert {
border-radius: 12px;
box-shadow: none;
Expand Down Expand Up @@ -275,13 +306,15 @@ ul li, ol li {

.navbar__logo img {
width: 107px;
border-radius: 0;
}

.navbar__item.dropdown.dropdown--hoverable {
@apply rounded-full;
background-color: var(--base-neutral-0);
padding: 4px 8px 4px 16px;
box-shadow: 0px 1px 2px 0px rgba(28, 38, 63, 0.06), 0px 1px 3px 0px rgba(28, 38, 63, 0.10);
width: 120px;
}

.navbar__item.dropdown.dropdown--hoverable:hover .navbar__link {
Expand All @@ -301,13 +334,17 @@ ul li, ol li {
height: 20px;
border: 0;
transform: none;
right: -5px;
}

.dropdown__menu {
border-radius: 1rem;
padding: 0;
margin-bottom: 0;
top: calc(100% - var(--ifm-navbar-item-padding-vertical) + 0.35rem);
top: calc(100% - var(--ifm-navbar-item-padding-vertical) + 0.6rem);
width: 120px;
min-width: 120px;
box-shadow: 0px 1px 2px 0px rgba(28, 38, 63, 0.06), 0px 1px 3px 0px rgba(28, 38, 63, 0.10);
}

.dropdown__menu li .dropdown__link {
Expand All @@ -320,7 +357,7 @@ ul li, ol li {
}

.dropdown__menu li:last-child .dropdown__link {
border-bottom: 0;
border-bottom: 0 !important;
}

.dropdown__menu li .dropdown__link--active {
Expand Down Expand Up @@ -419,8 +456,12 @@ div:has(>.DocSearch.DocSearch-Button) {

.theme-doc-version-badge.badge.badge--secondary {
@apply mb-8 sm:mb-8 md:mb-10 lg:mb-12;
display: none;
}

.CodeMirror-vscrollbar {
background-color: transparent;
}
.breadcrumbs__item:not(:last-child):after {
@apply h-3 w-3 bg-no-repeat;
}
Expand Down Expand Up @@ -473,11 +514,13 @@ div:has(>.DocSearch.DocSearch-Button) {
padding-left: 0 !important;
padding-top: 0 !important;
padding-bottom: 0 !important;
padding-right: 0 !important;
}

.menu__link {
color: var(--primary-neutral-800);
@apply text-xs uppercase font-bold;
@apply uppercase font-bold;
font-size: .7rem;
}

.menu__link--sublist-caret:after {
Expand All @@ -493,6 +536,7 @@ div:has(>.DocSearch.DocSearch-Button) {
background-position: center; */
width: .875rem;
height: .875rem;
background: var(--ifm-menu-link-sublist-icon) 50% / 1.2rem 1.2rem;
}

.menu__link:hover,
Expand Down Expand Up @@ -540,7 +584,7 @@ div:has(>.DocSearch.DocSearch-Button) {

.theme-doc-sidebar-menu .theme-doc-sidebar-item-link,
.theme-doc-sidebar-menu .theme-doc-sidebar-item-category {
@apply px-5 py-4;
@apply px-4 py-4;
}

.theme-doc-sidebar-menu .theme-doc-sidebar-item-link .menu__link,
Expand All @@ -558,7 +602,7 @@ div:has(>.DocSearch.DocSearch-Button) {

.theme-doc-sidebar-menu .theme-doc-sidebar-item-link:hover,
.theme-doc-sidebar-menu .theme-doc-sidebar-item-category:hover {
background-color: var(--main-bg-color);
background-color: #ECEDF0;
}

.theme-doc-sidebar-menu .theme-doc-sidebar-item-link:has(.menu__link--active) {
Expand All @@ -574,6 +618,7 @@ div:has(>.DocSearch.DocSearch-Button) {
/* Main Container */
main {
background-color: var(--main-bg-color);
filter: drop-shadow(0px 1px 2px rgba(28, 38, 63, 0.06)) drop-shadow(0px 1px 3px rgba(28, 38, 63, 0.10));
}
.container,
.hero {
Expand All @@ -584,7 +629,6 @@ main {
@apply p-0;
padding-top: 0 !important;
padding-bottom: 0 !important;
filter: drop-shadow(0px 1px 2px rgba(28, 38, 63, 0.06)) drop-shadow(0px 1px 3px rgba(28, 38, 63, 0.10));
}

.container>div {
Expand Down Expand Up @@ -675,10 +719,10 @@ table thead tr th, table tbody tr td {
border-bottom: 1px solid #E5E7EB;
}
table thead tr th:last-child, table tbody tr td:last-child {
border-right: 0;
border-right: 0 !important;
}
table tbody tr:last-child td {
border-bottom: 0;
border-bottom: 0 !important;
}

table thead tr th {
Expand All @@ -692,7 +736,7 @@ table th, table td {
}
.graphiql-container .graphiql-sessions {
background-color: #132249 !important;
border-radius: 12px;
border-radius: 12px !important;
border: 1px solid #2D3956;
}
.graphiql-container .graphiql-session {
Expand Down Expand Up @@ -865,6 +909,7 @@ table th, table td {
cursor: default;
box-shadow: none;
width: 100%;
border-radius: 16px 16px 0 0;
}

.card .card-content {
Expand Down Expand Up @@ -923,7 +968,7 @@ table th, table td {
[data-theme='dark'] .navbar {
border-bottom: 1px solid #2D3956;
}
[data-theme='dark'] .container {
[data-theme='dark'] .main {
filter: drop-shadow(0px 1px 2px rgba(28, 38, 63, 0.06)) drop-shadow(0px 1px 3px rgba(28, 38, 63, 0.10));
}
[data-theme='dark'] hr {
Expand Down Expand Up @@ -991,6 +1036,10 @@ table th, table td {
box-shadow: none;
}

[data-theme='dark'] .theme-doc-sidebar-menu .theme-doc-sidebar-item-link:hover, [data-theme='dark'] .theme-doc-sidebar-menu .theme-doc-sidebar-item-category:hover {
background-color: #111927;
}

[data-theme='dark'] .navbar__item.dropdown.dropdown--hoverable .navbar__link {
color: var(--primary-neutral-200);
}
Expand Down
12 changes: 6 additions & 6 deletions wiki/kitchen-sink.mdx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -214,11 +214,9 @@ Deep child content
Some text in a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris.

</div>
<OverviewIconCard
iconName={
<Introduction />
}
/>
<div className="kitchen-image-container heightAuto">
<p>Img or video container</p>
</div>
</div>

<hr/>
Expand All @@ -227,7 +225,9 @@ Deep child content

Some text in a paragraph. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a diam lectus. Sed sit amet ipsum mauris. Maecenas congue ligula ac quam viverra nec consectetur ante hendrerit. Donec et mollis dolor. Praesent et diam eget libero egestas mattis sit amet vitae augue.

<Thumbnail src="/img/get-started/0.0.1_vscode-track-table.png" alt="VSCode data connector" width="1000px" />
<div className="kitchen-image-container">
<p>Img or video container</p>
</div>

<hr/>

Expand Down
Loading