render () {
const iconStyles = StyleSheet.create({
favicon: {
backgroundImage: `url(${this.props.favicon})`,
filter: this.props.tabIconColor === 'white' ? globalStyles.filter.whiteShadow : 'none'
},
loadingIconColor: {
// Don't change icon color unless when it should be white
filter: this.props.tabIconColor === 'white' ? globalStyles.filter.makeWhite : 'none'
}
})
return <TabIcon
data-test-favicon={this.props.favicon}
data-test-id={this.props.isTabLoading ? 'loading' : 'defaultIcon'}
className={css(
tabStyles.icon,
this.props.favicon && iconStyles.favicon,
!this.props.isPinnedTab && this.props.isNarrowestView && styles.faviconNarrowView
)}
symbol={
(this.props.isTabLoading && css(styles.loadingIcon, iconStyles.loadingIconColor)) ||
this.defaultIcon
} />
}
function Footer(_ref, _ref2) {
var caption = _ref.caption;
var countCurrent = _ref.countCurrent;
var countSeparator = _ref.countSeparator;
var countTotal = _ref.countTotal;
var showCount = _ref.showCount;
var props = _objectWithoutProperties(_ref, ['caption', 'countCurrent', 'countSeparator', 'countTotal', 'showCount']);
var theme = _ref2.theme;
if (!caption && !showCount) return null;
var classes = _aphroditeNoImportant.StyleSheet.create((0, _utils.deepMerge)(defaultStyles, theme));
var imageCount = showCount ? _react2['default'].createElement(
'div',
{ className: (0, _aphroditeNoImportant.css)(classes.footerCount) },
countCurrent,
countSeparator,
countTotal
) : _react2['default'].createElement('span', null);
return _react2['default'].createElement(
'div',
_extends({ className: (0, _aphroditeNoImportant.css)(classes.footer) }, props),
caption ? _react2['default'].createElement(
'figcaption',
{ className: (0, _aphroditeNoImportant.css)(classes.footerCaption) },
caption
) : _react2['default'].createElement('span', null),
imageCount
);
};
function Header(_ref, _ref2) {
var theme$$1 = _ref2.theme;
var customControls = _ref.customControls,
onClose = _ref.onClose,
showCloseButton = _ref.showCloseButton,
closeButtonTitle = _ref.closeButtonTitle,
props = objectWithoutProperties(_ref, ['customControls', 'onClose', 'showCloseButton', 'closeButtonTitle']);
var classes = StyleSheet$1.create(deepMerge(defaultStyles$4, theme$$1));
return React.createElement(
'div',
_extends({ className: css$1(classes.header) }, props),
customControls ? customControls : React.createElement('span', null),
!!showCloseButton && React.createElement(
'button',
{
title: closeButtonTitle,
className: css$1(classes.close),
onClick: onClose
},
React.createElement(Icon, { fill: !!theme$$1.close && theme$$1.close.fill || theme.close.fill, type: 'close' })
)
);
}
render () {
const styles = StyleSheet.create({
icon: {
fontSize: this.props.symbolContent ? '8px' : 'inherit',
display: 'flex',
alignSelf: 'center',
width: globalStyles.spacing.iconSize,
height: globalStyles.spacing.iconSize,
alignItems: 'center',
justifyContent: this.props.symbolContent ? 'flex-end' : 'left',
fontWeight: this.props.symbolContent ? 'bold' : 'normal',
color: this.props.symbolContent ? globalStyles.color.black100 : 'inherit'
}
})
return <div
className={this.props.className}
data-test-favicon={this.props['data-test-favicon']}
onClick={this.props.onClick}>
{
this.props.symbol
? <span
className={cx({
[this.props.symbol]: true,
[css(styles.icon)]: true
})}
data-test-id={this.props['data-test-id']}
data-l10n-id={this.props.l10nId}
data-l10n-args={JSON.stringify(this.props.l10nArgs || {})}
>{this.props.symbolContent}</span>
: null
}
</div>
}
function Footer(_ref, _ref2) {
var theme$$1 = _ref2.theme;
var caption = _ref.caption,
countCurrent = _ref.countCurrent,
countSeparator = _ref.countSeparator,
countTotal = _ref.countTotal,
showCount = _ref.showCount,
props = objectWithoutProperties(_ref, ['caption', 'countCurrent', 'countSeparator', 'countTotal', 'showCount']);
if (!caption && !showCount) return null;
var classes = StyleSheet$1.create(deepMerge(defaultStyles$3, theme$$1));
var imageCount = showCount ? React.createElement(
'div',
{ className: css$1(classes.footerCount) },
countCurrent,
countSeparator,
countTotal
) : React.createElement('span', null);
return React.createElement(
'div',
_extends({ className: css$1(classes.footer) }, props),
caption ? React.createElement(
'figcaption',
{ className: css$1(classes.footerCaption) },
caption
) : React.createElement('span', null),
imageCount
);
}
const Spinner = props => {
const classes = StyleSheet.create(styles(props));
return (
<div className={css(classes.spinner)}>
<div className={css(classes.ripple)} />
</div>
);
};
var Spinner = function Spinner(props) {
var classes = StyleSheet$1.create(styles(props));
return React.createElement(
'div',
{ className: css$1(classes.spinner) },
React.createElement('div', { className: css$1(classes.ripple) })
);
};
function Container(_ref, _ref2) {
var theme$$1 = _ref2.theme;
var props = objectWithoutProperties(_ref, []);
var classes = StyleSheet$1.create(deepMerge(defaultStyles$2, theme$$1));
return React.createElement('div', _extends({ id: 'lightboxBackdrop',
className: css$1(classes.container)
}, props));
}
const processStyles = (userStyles, theme) => {
const styles = { ...userStyles, ...flattenThemes(theme) }
const dynamics = pickBy(styles, isFunc)
const statics = pickBy(styles, x => !isFunc(x))
return {
statics: StyleSheet.create(applyNiceStyles(statics)),
dynamics,
theme
}
}
function Thumbnail ({ index, src, thumbnail, active, onClick }, { theme }) {
const url = thumbnail ? thumbnail : src;
const classes = StyleSheet.create(deepMerge(defaultStyles, theme));
return (
<div
className={css(classes.thumbnail, active && classes.thumbnail__active)}
onClick={() => onClick(index)}
style={{ backgroundImage: 'url("' + url + '")' }}
/>
);
}
export const aphroditeNoImportantCase = caseName => {
const useStyles = StyleSheet.create(stylesheet)
const getButtonClassName = i => aphroditeCss(useStyles[buttonClassNames[i]])
const { html, css } = StyleSheetServer.renderStatic(() => {
return renderBody(caseName, aphroditeCss(useStyles.container), getButtonClassName)
})
StyleSheetTestUtils.clearBufferAndResumeStyleInjection()
return renderHtml(css.content, html)
}
render () {
const privateStyles = StyleSheet.create({
icon: {
backgroundColor: this.props.isActive ? globalStyles.color.white100 : globalStyles.color.black100
}
})
return this.props.frame.get('isPrivate') && hasVisibleSecondaryIcon(this.props)
? <TabIcon data-test-id='privateIcon'
className={css(tabStyles.icon, styles.secondaryIcon, privateStyles.icon)}
/>
: null
}
function Thumbnail(_ref, _ref2) {
var index = _ref.index,
src = _ref.src,
thumbnail = _ref.thumbnail,
active = _ref.active,
_onClick = _ref.onClick;
var theme$$1 = _ref2.theme;
var url = thumbnail ? thumbnail : src;
var classes = StyleSheet$1.create(deepMerge(defaultStyles$5, theme$$1));
return React.createElement('div', {
className: css$1(classes.thumbnail, active && classes.thumbnail__active),
onClick: function onClick(e) {
e.preventDefault();
e.stopPropagation();
_onClick(index);
},
style: { backgroundImage: 'url("' + url + '")' }
});
}
function Arrow(_ref, _ref2) {
var theme$$1 = _ref2.theme;
var direction = _ref.direction,
icon = _ref.icon,
onClick = _ref.onClick,
size = _ref.size,
props = objectWithoutProperties(_ref, ['direction', 'icon', 'onClick', 'size']);
var classes = StyleSheet$1.create(deepMerge(defaultStyles$1, theme$$1));
return React.createElement(
'button',
_extends({
type: 'button',
className: css$1(classes.arrow, classes['arrow__direction__' + direction], size && classes['arrow__size__' + size]),
onClick: onClick,
onTouchEnd: onClick
}, props),
React.createElement(Icon, { fill: !!theme$$1.arrow && theme$$1.arrow.fill || theme.arrow.fill, type: icon })
);
}
render () {
if (this.props.isPinned || !this.props.showPrivateIcon) {
return null
}
const privateProps = StyleSheet.create({
icon_private_color: {
backgroundColor: this.props.isActive
? theme.tab.icon.private.background.active
: theme.tab.icon.private.background.notActive
}
})
return <TabIcon
data-test-id='privateIcon'
className={[
styles.icon_private,
privateProps.icon_private_color
]}
ref={this.setRef}
/>
}
function Arrow(_ref, _ref2) {
var direction = _ref.direction;
var icon = _ref.icon;
var onClick = _ref.onClick;
var size = _ref.size;
var props = _objectWithoutProperties(_ref, ['direction', 'icon', 'onClick', 'size']);
var theme = _ref2.theme;
var classes = _aphroditeNoImportant.StyleSheet.create((0, _utils.deepMerge)(defaultStyles, theme));
return _react2['default'].createElement(
'button',
_extends({
type: 'button',
className: (0, _aphroditeNoImportant.css)(classes.arrow, classes['arrow__direction__' + direction], size && classes['arrow__size__' + size]),
onClick: onClick,
onTouchEnd: onClick
}, props),
_react2['default'].createElement(_Icon2['default'], { fill: !!theme.arrow && theme.arrow.fill || _theme2['default'].arrow.fill, type: icon })
);
};
get ContributionStatementHeader () {
const imgStyle = StyleSheet.create({
titleWrapper__braveLogo: {
background: `url(${this.state.braveLogo})`,
backgroundSize: 'contain',
backgroundRepeat: 'no-repeat',
width: '50px',
height: '50px'
}
})
return (
<div className={css(styles.flexJustifyBetween, styles.statement__header)} data-test-id='contributionStatementHeader'>
<div className={css(styles.flexAlignCenter, styles.header__titleWrapper)}>
<div id='braveLogo' className={css(imgStyle.titleWrapper__braveLogo)} />
<span className={css(styles.titleWrapper__sectionTitle, styles.sectionTitle__bravePayments)} data-l10n-id='bravePayments' />
<sup className={css(styles.titleWrapper__sectionSubTitle)} data-l10n-id='beta' />
</div>
<div className={css(styles.header__titleWrapper)}>
<span className={css(styles.titleWrapper__sectionTitle)} data-l10n-id='contributionStatement' />
</div>
</div>
)
}
render () {
if (this.props.isPinned || !this.props.showTabTitle) {
return null
}
const perPageGradient = StyleSheet.create({
tab__title_gradient: {
'::after': {
background: this.props.gradientColor
}
}
})
return <div data-test-id='tabTitle'
className={css(
styles.tab__title,
!this.props.isPinned && perPageGradient.tab__title_gradient,
this.props.addExtraGutter && styles.tab__title_extraGutter,
(this.props.isDarwin && this.props.isTextWhite) && styles.tab__title_isDarwin,
// Windows specific style
this.props.isWindows && styles.tab__title_isWindows
)}>
{this.props.displayTitle}
</div>
}
import PropTypes from 'prop-types';
import React, { Component } from 'react';
import { css, StyleSheet } from 'aphrodite/no-important';
import Thumbnail from './Thumbnail';
import Arrow from './Arrow';
import theme from '../theme';
const classes = StyleSheet.create({
paginatedThumbnails: {
bottom: theme.container.gutter.vertical,
height: theme.thumbnail.size,
padding: '0 50px',
position: 'absolute',
textAlign: 'center',
whiteSpace: 'nowrap',
left: '50%',
transform: 'translateX(-50%)',
},
});
const arrowStyles = {
height: theme.thumbnail.size + (theme.thumbnail.gutter * 2),
width: 40,
};
export default class PaginatedThumbnails extends Component {
constructor (props) {
super(props);
this.state = {
const styles = StyleSheet.create({
bookmarkToolbarButton: {
display: 'flex',
alignItems: 'center',
boxSizing: 'border-box',
borderRadius: '3px',
color: globalStyles.color.mediumGray,
cursor: 'default',
fontSize: globalStyles.spacing.bookmarksItemFontSize,
lineHeight: '1.3',
margin: `auto ${globalStyles.spacing.bookmarksItemMargin}`,
maxWidth: globalStyles.spacing.bookmarksItemMaxWidth,
padding: `2px ${globalStyles.spacing.bookmarksItemPadding}`,
textOverflow: 'ellipsis',
userSelect: 'none',
whiteSpace: 'nowrap',
WebkitAppRegion: 'no-drag',
':hover': {
background: '#fff',
boxShadow: '0 1px 5px 0 rgba(0, 0, 0, 0.1)'
}
},
bookmarkToolbarButton__draggingOverLeft: {
paddingLeft: globalStyles.spacing.bookmarksToolbarButtonDraggingMargin
},
bookmarkToolbarButton__draggingOverRight: {
paddingRight: globalStyles.spacing.bookmarksToolbarButtonDraggingMargin
},
bookmarkToolbarButton__isDragging: {
opacity: '0.2'
},
bookmarkToolbarButton__showOnlyFavicon: {
padding: `2px ${globalStyles.spacing.bookmarksItemPadding}`,
margin: 'auto 0'
},
bookmarkToolbarButton__marginRightZero: {
marginRight: 0
},
bookmarkToolbarButton__bookmarkFavicon: {
backgroundPosition: 'center',
backgroundRepeat: 'no-repeat',
display: 'inline-block',
marginRight: globalStyles.spacing.bookmarksItemMargin
},
bookmarkToolbarButton__bookmarkFolder: {
fontSize: globalStyles.spacing.bookmarksFolderIconSize,
textAlign: 'center',
color: globalStyles.color.darkGray
},
bookmarkToolbarButton__bookmarkFile: {
fontSize: globalStyles.spacing.bookmarksFileIconSize,
textAlign: 'center',
color: globalStyles.color.darkGray
},
bookmarkToolbarButton__bookmarkText: {
textOverflow: 'ellipsis',
overflow: 'hidden'
},
bookmarkToolbarButton__bookmarkFolderChevron: {
color: '#676767',
fontSize: globalStyles.spacing.bookmarksItemChevronFontSize,
marginLeft: globalStyles.spacing.bookmarksItemChevronMargin
}
})
};
GridRow.childContextTypes = {
gutter: PropTypes.number,
xsmall: PropTypes.string,
small: PropTypes.string,
medium: PropTypes.string,
large: PropTypes.string,
};
GridRow.propTypes = {
gutter: PropTypes.number,
large: PropTypes.string,
medium: PropTypes.string,
small: PropTypes.string,
xsmall: PropTypes.string,
};
GridRow.defaultProps = {
xsmall: 'one-whole',
};
const classes = StyleSheet.create({
grid: {
display: 'flex',
flexWrap: 'wrap',
},
});
module.exports = GridRow;
export const styles = StyleSheet.create({
Job: {
border: '1px solid rgba(0,0,0,.1)',
borderRadius: '2px',
fontSize: '14px',
padding: spacing.space3,
boxShadow: 'none',
maxWidth: '630px',
':not(:last-child)': {
marginBottom: spacing.space4
}
},
Description: {
marginBottom: spacing.space3
},
Header: {
display: 'flex',
flexDirection: 'row',
alignItems: 'center',
marginBottom: spacing.space3,
paddingBottom: spacing.space3,
borderBottom: '1px solid rgba(0,0,0,.1)'
},
Titles: {
flexDirection: 'column',
flex: 2
},
List: {
listStylePosition: 'inside',
display: 'inline-block'
}
})
/* This Source Code Form is subject to the terms of the Mozilla Public
* License, v. 2.0. If a copy of the MPL was not distributed with this file,
* You can obtain one at http://mozilla.org/MPL/2.0/. */
const { StyleSheet } = require('aphrodite/no-important')
const globalStyles = require('./global')
const GLOBALS = '__GLOBAL_STYLES__'
const globalExtension = {
selectorHandler: (selector, baseSelector, generateSubtreeStyles) =>
(baseSelector.includes(GLOBALS) ? generateSubtreeStyles(selector) : null)
}
const extended = StyleSheet.extend([globalExtension])
const styles = extended.StyleSheet.create({
[GLOBALS]: {
'*': {
color: globalStyles.color.commonTextColor,
fontFamily: '-apple-system, BlinkMacSystemFont, "Segoe UI", "Helvetica Neue", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", sans-serif',
fontWeight: 400,
margin: 0,
padding: 0
},
'html, body, #appContainer, #appContainer > div': {
height: '100%'
},
body: {
const getDynamicSheets = dynamics => {
const sheet = StyleSheet.create(applyNiceStyles(dynamics))
return Object.keys(dynamics).map(k => sheet[k])
}
const styles = StyleSheet.create({
recoveryContent__h4: {
margin: '15px 0',
fontSize: '17px'
},
recoveryContent__h3: {
marginBottom: globalStyles.spacing.modalPanelHeaderMarginBottom
},
recoveryContent__recoveryKey: {
height: '65px'
},
ledgerRecoveryContent: {
marginBottom: globalStyles.spacing.dialogInsideMargin,
fontSize: '13px',
marginTop: '15px'
},
recoveryOverlay: {
display: 'flex',
flexFlow: 'column',
justifyContent: 'center',
alignItems: 'center',
backgroundColor: globalStyles.color.black75,
border: `1px solid ${globalStyles.color.black75}`,
position: 'absolute',
top: '-1px',
left: '-1px',
width: '100%',
height: '100%',
zIndex: 999,
outline: 'none'
},
recoveryOverlay__textColor: {
color: '#fff'
},
recoveryOverlay__spaceAround: {
margin: '50px auto'
},
footer__wrapper: {
flex: 1,
display: 'flex'
},
footer__wrapper__left: {
flex: 1
}
})
</section>
}
}
const styles = StyleSheet.create({
advancedTabMain: {
paddingBottom: '40px'
},
swipeNavigation: {
display: 'flex',
alignItems: 'center'
},
swipeNavigation__shortLabel: {
marginRight: '5px'
},
swipeNavigation__longLabel: {
marginLeft: '5px'
},
moreInfo: {
display: 'flex',
flex: 1,
alignItems: 'flex-end'
}
})
module.exports = AdvancedTab
const styles = StyleSheet.create({
flexJustifyEnd: {
display: 'flex',
justifyContent: 'flex-end'
},
fontSizeInitial: {
fontSize: 'initial'
},
toc__marginBottom: {
marginBottom: '.25rem'
},
wrapper: common,
container: common,
pre: {
background: '#1d1f21',
color: '#FFFFFF',
fontSize: '14px',
padding: '5px',
borderRadius: globalStyles.radius.borderRadius,
tabSize: '2',
wordBreak: 'normal'
},
code: {
fontFamily: 'monospace',
whiteSpace: 'pre'
},
goTop: {
fontSize: '1rem',
margin: '1rem 0'
},
tab: {
textIndent: tabWidth
},
tab2: {
textIndent: `calc(${tabWidth} * 2)`
},
tab3: {
textIndent: `calc(${tabWidth} * 3)`
},
tab4: {
textIndent: `calc(${tabWidth} * 4)`
}
})
heading: PropTypes.string,
};
BlankState.defaultProps = {
component: 'div',
};
/* eslint quote-props: ["error", "as-needed"] */
const classes = StyleSheet.create({
container: {
backgroundColor: theme.blankstate.background,
borderRadius: theme.blankstate.borderRadius,
color: theme.blankstate.color,
paddingBottom: theme.blankstate.paddingVertical,
paddingLeft: theme.blankstate.paddingHorizontal,
paddingRight: theme.blankstate.paddingHorizontal,
paddingTop: theme.blankstate.paddingVertical,
textAlign: 'center',
},
heading: {
color: 'inherit',
':last-child': {
marginBottom: 0,
},
},
});
module.exports = BlankState;
/>
<Button className='primaryButton'
l10nId='installAndAllow'
testId='installAndAllowButton'
onClick={this.onInstallAndAllow} />
</CommonFormButtonWrapper>
<CommonFormBottomWrapper>
<div className={css(styles.flexJustifyCenter)}>
{/* TODO: refactor switchControl.js to remove commonStyles.noPadding */}
<SwitchControl
className={css(commonStyles.noPadding)}
rightl10nId='rememberThisDecision'
rightl10nArgs={JSON.stringify({origin: this.props.origin})}
onClick={this.onClickRememberForNetflix}
checkedOn={this.props.alsoAddRememberSiteSetting} />
</div>
</CommonFormBottomWrapper>
</CommonFormLarge>
</Dialog>
}
}
module.exports = ReduxComponent.connect(WidevinePanel)
const styles = StyleSheet.create({
flexJustifyCenter: {
display: 'flex',
justifyContent: 'center'
}
})
tab = <SecurityTab settings={settings} siteSettings={siteSettings} braveryDefaults={braveryDefaults} onChangeSetting={this.onChangeSetting} />
break
case preferenceTabs.ADVANCED:
tab = <AdvancedTab settings={settings} onChangeSetting={this.onChangeSetting} />
break
}
return <div>
<PreferenceNavigation preferenceTab={this.state.preferenceTab} hintNumber={this.state.hintNumber}
changeTab={this.changeTab.bind(this)}
refreshHint={this.refreshHint.bind(this)}
getNextHintNumber={this.getNextHintNumber.bind(this)} />
<div className='prefBody'>
<div className='prefTabContainer'>
{tab}
</div>
</div>
</div>
}
}
const styles = StyleSheet.create({
sortableTable_searchTab: {
width: '704px',
marginBottom: globalStyles.spacing.settingsListContainerMargin // See syncTab.js for use cases
}
})
module.exports = {
AboutPreferences: <AboutPreferences />
}