Skip to content

Commit

Permalink
feat: #8781 elements mobile tweaks (#8783)
Browse files Browse the repository at this point in the history
  • Loading branch information
@willmcvay
willmcvay authored Mar 23, 2023
1 parent 80045f6 commit d14b57e
Show file tree
Hide file tree
Showing 15 changed files with 59 additions and 42 deletions.
20 changes: 10 additions & 10 deletions packages/developer-portal/src/components/api/__tests__/__snapshots__/api-page.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1344,7 +1344,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
</section>
Expand Down Expand Up @@ -1488,7 +1488,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
</section>
Expand Down Expand Up @@ -1712,7 +1712,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<div
Expand Down Expand Up @@ -2374,7 +2374,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<div
Expand Down Expand Up @@ -3089,7 +3089,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<div
Expand Down Expand Up @@ -3271,7 +3271,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<div
Expand Down Expand Up @@ -3510,7 +3510,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<div
Expand Down Expand Up @@ -3692,7 +3692,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<div
Expand Down Expand Up @@ -3935,7 +3935,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<form
Expand Down Expand Up @@ -4175,7 +4175,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<form
Expand Down
4 changes: 2 additions & 2 deletions ...ges/developer-portal/src/components/apps/edit/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -110,7 +110,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<form />
Expand Down Expand Up @@ -222,7 +222,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<form />
Expand Down
4 changes: 2 additions & 2 deletions ...tal/src/components/apps/pipeline/__tests__/__snapshots__/pipeline-configure.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<p
Expand Down Expand Up @@ -268,7 +268,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<p
Expand Down
4 changes: 2 additions & 2 deletions ...r-portal/src/components/apps/pipeline/__tests__/__snapshots__/pipeline-info.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<div
Expand Down Expand Up @@ -295,7 +295,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<div
Expand Down
8 changes: 4 additions & 4 deletions ...er-portal/src/components/apps/pipeline/__tests__/__snapshots__/pipeline-new.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<p
Expand Down Expand Up @@ -286,7 +286,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<p
Expand Down Expand Up @@ -573,7 +573,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<p
Expand Down Expand Up @@ -798,7 +798,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<p
Expand Down
8 changes: 4 additions & 4 deletions ...r-portal/src/components/apps/pipeline/__tests__/__snapshots__/pipeline-page.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -77,7 +77,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<div
Expand Down Expand Up @@ -313,7 +313,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<div
Expand Down Expand Up @@ -627,7 +627,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<div
Expand Down Expand Up @@ -879,7 +879,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
<div
Expand Down
4 changes: 2 additions & 2 deletions ...r-portal/src/components/apps/pipeline/__tests__/__snapshots__/pipeline-tabs.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -68,7 +68,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
</div>
Expand Down Expand Up @@ -137,7 +137,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
</div>,
Expand Down
16 changes: 8 additions & 8 deletions ...ages/developer-portal/src/components/webhooks/__tests__/__snapshots__/index.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -94,7 +94,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
</div>
Expand Down Expand Up @@ -189,7 +189,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
</div>,
Expand Down Expand Up @@ -341,7 +341,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
</div>
Expand Down Expand Up @@ -436,7 +436,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
</div>,
Expand Down Expand Up @@ -588,7 +588,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
</div>
Expand Down Expand Up @@ -683,7 +683,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
</div>,
Expand Down Expand Up @@ -835,7 +835,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
</div>
Expand Down Expand Up @@ -930,7 +930,7 @@ Object {
</label>
</div>
<div
class="e1147ynd-el-tabs-footer"
class="e6l6sr3-el-tabs-full-width e1147ynd-el-tabs-footer"
/>
</div>
</div>,
Expand Down
4 changes: 4 additions & 0 deletions packages/elements/src/components/input/__styles__/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -40,6 +40,10 @@ export const ElInput = styled.input`
}
}
&[type='search']::-webkit-search-decoration {
display: none;
}
&[type='checkbox'] {
appearance: none;
border: 1px solid var(--color-grey-medium);
Expand Down
8 changes: 4 additions & 4 deletions packages/elements/src/components/nav/__styles__/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import { styled } from '@linaria/react'
import { colorBlueLight } from '../../../styles/globals'

const chevronRight = (fill: string) =>
`data:image/svg+xml;utf8,<svg width="18" height="40" viewBox="0 0 18 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0L8.8012 0C10.5501 0 13.0962 2.1362 12.6186 2.80527L17.6261 18.8053C17.8695 19.5832 17.8695 20.4168 17.6261 21.1947L12.6186 37.1947C12.0962 38.8638 10.5501 40 8.8012 40H0V0Z" fill="${encodeURIComponent(
`data:image/svg+xml;utf8,<svg width="18" height="25" viewBox="0 0 18 40" fill="none" xmlns="http://www.w3.org/2000/svg"><path d="M0 0L8.8012 0C10.5501 0 13.0962 2.1362 12.6186 2.80527L17.6261 18.8053C17.8695 19.5832 17.8695 20.4168 17.6261 21.1947L12.6186 37.1947C12.0962 38.8638 10.5501 40 8.8012 40H0V0Z" fill="${encodeURIComponent(
fill,
)}"/></svg>`

Expand Down Expand Up @@ -42,7 +42,7 @@ export const ElNavItem = styled.a`
padding: 0 0.75rem;
opacity: 0;
cursor: pointer;
transition: height 0.3s linear, opacity 0.3s linear, padding-top 0.3s linear, padding-bottom 0.3s linear;
transition: height 0.15s linear, opacity 0.15s linear, padding-top 0.15s linear, padding-bottom 0.15s linear;
svg {
margin-right: 0.5rem;
Expand Down Expand Up @@ -166,15 +166,15 @@ export const elNavSubItemActive = css`
background-repeat: no-repeat;
background-image: linear-gradient(to right, var(--color-blue-light), var(--color-blue-light));
outline-color: var(--nav-menu-background-dark);
background-size: calc(100% - 1rem);
background-size: calc(100% - 1rem) 100%;
background-position-x: left;
padding-right: 1.5rem;
position: relative;
&::after {
content: '';
position: absolute;
height: 26px;
height: 25px;
width: 100%;
top: 0;
right: 6px;
Expand Down
2 changes: 1 addition & 1 deletion packages/elements/src/components/nav/nav-responsive.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -123,7 +123,7 @@ export const NavResponsive: FC<NavResponsiveProps> = ({
{isMobile && subItems && (
<Icon
className={cx(elIntentNeutral, elMlAuto)}
icon={navSubMenuIndex === itemIndex ? 'arrowUpSystem' : 'arrowDownSystem'}
icon={navSubMenuIndex === itemIndex ? 'upSystem' : 'downSystem'}
/>
)}
</NavItem>
Expand Down
5 changes: 5 additions & 0 deletions packages/elements/src/components/tabs/__styles__/index.ts
View file
Original file line number Diff line number Diff line change
Expand Up @@ -11,6 +11,7 @@ export const elTabsItem = css`
align-items: center;
margin-right: 0.5rem;
border-bottom: 2px solid var(--color-white);
white-space: nowrap;
`

export const elTabsFullWidth = css`
Expand Down Expand Up @@ -81,4 +82,8 @@ export const ElTabsFooter = styled.div`
height: 1.125rem;
background: linear-gradient(180deg, #f7f7f7 0%, rgba(242, 242, 242, 0) 50%);
border-top: 1px solid var(--color-grey-medium);
&.${elTabsFullWidth} {
width: 100vw;
}
`
4 changes: 2 additions & 2 deletions packages/elements/src/components/tabs/__tests__/__snapshots__/tabs.test.tsx.snap
View file
Original file line number Diff line number Diff line change
Expand Up @@ -65,7 +65,7 @@ Object {
</label>
</div>
<div
class="el-tabs-footer"
class="el-tabs-full-width el-tabs-footer"
/>
</div>
</div>
Expand Down Expand Up @@ -131,7 +131,7 @@ Object {
</label>
</div>
<div
class="el-tabs-footer"
class="el-tabs-full-width el-tabs-footer"
/>
</div>
</div>,
Expand Down
Loading

0 comments on commit d14b57e

Please sign in to comment.