diff --git a/src/components/ButtonLink/ButtonLink.js b/src/components/ButtonLink/ButtonLink.js index 9367fe2b3..4bc8bd042 100644 --- a/src/components/ButtonLink/ButtonLink.js +++ b/src/components/ButtonLink/ButtonLink.js @@ -39,7 +39,9 @@ const ButtonLink = ({children, type, ...rest}) => { return ( {children} - {type === 'secondary' && } + {type === 'secondary' && ( + + )} ); }; diff --git a/src/components/CodeEditor/CodeEditor.js b/src/components/CodeEditor/CodeEditor.js index 6e42fff7e..c98bf56c6 100644 --- a/src/components/CodeEditor/CodeEditor.js +++ b/src/components/CodeEditor/CodeEditor.js @@ -71,6 +71,7 @@ class CodeEditor extends Component { return (
{ display: 'flex', flexDirection: 'column', minHeight: 'calc(100vh - 40px)', - }}> + }} + dir="rtl">
( cssProps={{ verticalAlign: -2, display: 'inline-block', - marginLeft: 5, + marginRight: 5, color: colors.subtle, }} /> diff --git a/src/components/LayoutFooter/Footer.js b/src/components/LayoutFooter/Footer.js index 5d91a93a3..37973a463 100644 --- a/src/components/LayoutFooter/Footer.js +++ b/src/components/LayoutFooter/Footer.js @@ -18,6 +18,7 @@ import ossLogoPng from 'images/oss_logo.png'; const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
( flexWrap: 'wrap', [media.between('small', 'medium')]: { - paddingRight: layoutHasSidebar ? 240 : null, + paddingLeft: layoutHasSidebar ? 240 : null, }, [media.between('large', 'largerSidebar')]: { - paddingRight: layoutHasSidebar ? 280 : null, + paddingLeft: layoutHasSidebar ? 280 : null, }, [media.between('largerSidebar', 'sidebarFixed', true)]: { - paddingRight: layoutHasSidebar ? 380 : null, + paddingLeft: layoutHasSidebar ? 380 : null, }, }}>
( }, [media.greaterThan('xlarge')]: { width: 'calc(100% / 3 * 2)', - paddingLeft: 40, + paddingRight: 40, }, }}> @@ -143,9 +144,11 @@ const Footer = ({layoutHasSidebar = false}: {layoutHasSidebar: boolean}) => (
specifics + paddingLeft: 40, [media.greaterThan('xlarge')]: { width: 'calc(100% / 3)', diff --git a/src/components/LayoutHeader/DocSearch.js b/src/components/LayoutHeader/DocSearch.js index b31505917..a192410fe 100644 --- a/src/components/LayoutHeader/DocSearch.js +++ b/src/components/LayoutHeader/DocSearch.js @@ -49,7 +49,7 @@ class DocSearch extends Component<{}, State> { justifyContent: 'flex-end', }, [media.lessThan('large')]: { - marginRight: 10, + marginLeft: 10, }, [media.between('small', 'medium')]: { width: 'calc(100% / 3)', @@ -62,6 +62,7 @@ class DocSearch extends Component<{}, State> { }, }}> { fontWeight: 300, fontFamily: 'inherit', position: 'relative', - padding: '5px 5px 5px 29px', + padding: '5px 29px 5px 5px', backgroundImage: 'url(/search.svg)', backgroundSize: '16px 16px', backgroundRepeat: 'no-repeat', backgroundPositionY: 'center', - backgroundPositionX: '5px', + backgroundPositionX: '98%', ':focus': { outline: 0, @@ -93,10 +94,10 @@ class DocSearch extends Component<{}, State> { [media.lessThan('small')]: { width: '16px', transition: 'width 0.2s ease, padding 0.2s ease', - paddingLeft: '16px', + paddingRight: '16px', ':focus': { - paddingLeft: '29px', + paddingRight: '29px', width: '8rem', outline: 'none', }, diff --git a/src/components/LayoutHeader/Header.js b/src/components/LayoutHeader/Header.js index 55743a7c1..00b92772d 100644 --- a/src/components/LayoutHeader/Header.js +++ b/src/components/LayoutHeader/Header.js @@ -18,6 +18,7 @@ import logoSvg from 'icons/logo.svg'; const Header = ({location}: {location: Location}) => (
( }, }} to="/"> - ( }}> React +
diff --git a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js index fc5d074d8..5d675fea1 100644 --- a/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js +++ b/src/components/StickyResponsiveSidebar/StickyResponsiveSidebar.js @@ -76,8 +76,8 @@ class StickyResponsiveSidebar extends Component { [media.lessThan('small')]: smallScreenSidebarStyles, [media.greaterThan('medium')]: { - marginRight: -999, - paddingRight: 999, + marginLeft: -999, + paddingLeft: 999, backgroundColor: '#f7f7f7', }, @@ -93,8 +93,8 @@ class StickyResponsiveSidebar extends Component { height: 'calc(100vh - 60px)', overflowY: 'auto', WebkitOverflowScrolling: 'touch', - marginRight: -999, - paddingRight: 999, + marginLeft: -999, + paddingLeft: 999, backgroundColor: '#f7f7f7', opacity: '1 !important', }, @@ -108,7 +108,7 @@ class StickyResponsiveSidebar extends Component { }, [media.greaterThan('sidebarFixed')]: { - borderLeft: '1px solid #ececec', + borderRight: '1px solid #ececec', }, }}>
{ display: 'none', // gets overriden at small screen sizes cursor: 'pointer', position: 'fixed', - right: 20, + left: 20, zIndex: 3, borderRadius: '50%', border: '1px solid rgba(255, 255, 255, 0.1)', @@ -184,14 +184,14 @@ class StickyResponsiveSidebar extends Component { diff --git a/src/pages/index.js b/src/pages/index.js index bc2d732fd..ab63419c4 100644 --- a/src/pages/index.js +++ b/src/pages/index.js @@ -54,7 +54,7 @@ class Home extends Component { title="React – A JavaScript library for building user interfaces" ogUrl={createOgUrl('index.html')} /> -
+
( }, [media.greaterThan('xlarge')]: { - paddingLeft: 40, + paddingRight: 40, }, '&:first-child': { - textAlign: 'right', - paddingRight: 15, + textAlign: 'left', + paddingLeft: 15, }, '&:nth-child(2)': { [media.greaterThan('small')]: { - paddingLeft: 15, + paddingRight: 15, }, }, }}> diff --git a/src/templates/components/NavigationFooter/NavigationFooter.js b/src/templates/components/NavigationFooter/NavigationFooter.js index 9ee0e9519..ac40705b0 100644 --- a/src/templates/components/NavigationFooter/NavigationFooter.js +++ b/src/templates/components/NavigationFooter/NavigationFooter.js @@ -26,15 +26,15 @@ const NavigationFooter = ({next, prev, location}) => { halign="space-between" css={{ [media.between('small', 'medium')]: { - paddingRight: 240, + paddingLeft: 240, }, [media.between('large', 'largerSidebar')]: { - paddingRight: 280, + paddingLeft: 280, }, [media.between('largerSidebar', 'sidebarFixed', true)]: { - paddingRight: 380, + paddingLeft: 380, }, }}> diff --git a/src/templates/components/Sidebar/Section.js b/src/templates/components/Sidebar/Section.js index 94ad877f6..bd55f6726 100644 --- a/src/templates/components/Sidebar/Section.js +++ b/src/templates/components/Sidebar/Section.js @@ -46,7 +46,6 @@ class Section extends React.Component { }, }, }}> - {section.title} + {section.title}
    +
      {item.subitems.map(subitem => (
    • {createLink({ diff --git a/src/templates/components/Sidebar/Sidebar.js b/src/templates/components/Sidebar/Sidebar.js index b4199931a..1e9408d4c 100644 --- a/src/templates/components/Sidebar/Sidebar.js +++ b/src/templates/components/Sidebar/Sidebar.js @@ -38,11 +38,11 @@ class Sidebar extends Component { halign="stretch" css={{ width: '100%', - paddingLeft: 20, + paddingRight: 20, position: 'relative', [media.greaterThan('largerSidebar')]: { - paddingLeft: 40, + paddingRight: 40, }, [media.lessThan('small')]: { diff --git a/src/theme.js b/src/theme.js index 2e1ad7405..a4187699f 100644 --- a/src/theme.js +++ b/src/theme.js @@ -138,17 +138,17 @@ const sharedStyles = { flexDirection: 'column', [media.between('small', 'sidebarFixed')]: { - borderLeft: '1px solid #ececec', - marginLeft: 80, + borderRight: '1px solid #ececec', + marginRight: 80, }, [media.between('small', 'largerSidebar')]: { flex: '0 0 200px', - marginLeft: 80, + marginRight: 80, }, [media.between('small', 'medium')]: { - marginLeft: 40, + marginRight: 40, }, [media.greaterThan('largerSidebar')]: { @@ -157,7 +157,7 @@ const sharedStyles = { [media.greaterThan('sidebarFixed')]: { position: 'fixed', - right: 0, + left: 0, width: 300, zIndex: 2, }, @@ -189,6 +189,7 @@ const sharedStyles = { marginBottom: 25, paddingLeft: 15, paddingRight: 15, + direction: 'ltr', [media.lessThan('small')]: { marginLeft: -20, @@ -240,6 +241,8 @@ const sharedStyles = { '& p > code, & li > code': { background: hex2rgba(colors.note, 0.2), color: colors.text, + direction: 'ltr', + display: 'inline-block', }, '& p > code, & li > code, & p > a > code, & li > a > code': { @@ -335,7 +338,7 @@ const sharedStyles = { marginTop: 20, fontSize: 16, color: colors.text, - paddingLeft: 20, + paddingRight: 20, '& p, & p:first-of-type': { fontSize: 16, @@ -352,7 +355,7 @@ const sharedStyles = { }, '& ol, & ul': { - marginLeft: 20, + marginRight: 20, marginTop: 10, }, }, @@ -371,10 +374,10 @@ const sharedStyles = { '& blockquote': { backgroundColor: hex2rgba('#ffe564', 0.3), - borderLeftColor: colors.note, - borderLeftWidth: 9, - borderLeftStyle: 'solid', - padding: '20px 45px 20px 26px', + borderRightColor: colors.note, + borderRightWidth: 9, + borderRightStyle: 'solid', + padding: '20px 26px 20px 45px', marginBottom: 30, marginTop: 20, marginLeft: -30, diff --git a/src/utils/createLink.js b/src/utils/createLink.js index eee6db08e..0602d671f 100644 --- a/src/utils/createLink.js +++ b/src/utils/createLink.js @@ -102,14 +102,14 @@ const activeLinkCss = { const activeLinkBefore = { width: 4, height: 25, - borderLeft: `4px solid ${colors.brand}`, - paddingLeft: 16, + borderRight: `4px solid ${colors.brand}`, + paddingRight: 16, position: 'absolute', - left: 0, + right: 0, marginTop: -3, [media.greaterThan('largerSidebar')]: { - left: 15, + right: 15, }, };