office-ui-fabric-react
Version:
Reusable React components for building experiences for Office 365.
152 lines • 5.46 kB
JavaScript
;
Object.defineProperty(exports, "__esModule", { value: true });
var Styling_1 = require("../../Styling");
function getStyles(props) {
var theme = props.theme, underlined = props.underlined, disabled = props.disabled, hasFocus = props.hasFocus, className = props.className, hasInput = props.hasInput;
var palette = theme.palette, fonts = theme.fonts, semanticColors = theme.semanticColors;
return {
root: [
'ms-SearchBox',
fonts.medium,
Styling_1.normalize,
{
color: palette.neutralPrimary,
display: 'flex',
flexDirection: 'row',
flexWrap: 'nowrap',
alignItems: 'stretch',
padding: '0 0 0 8px',
border: "1px solid " + palette.neutralTertiary,
height: 32,
selectors: (_a = {},
_a[Styling_1.HighContrastSelector] = {
border: '1px solid WindowText'
},
_a[':hover'] = {
borderColor: palette.neutralDark,
},
_a[':hover $iconContainer'] = {
color: palette.themeDark
},
_a)
},
hasFocus && [
'is-active',
{
borderColor: palette.themePrimary,
selectors: (_b = {
':hover': {
borderColor: palette.themePrimary,
}
},
_b[Styling_1.HighContrastSelector] = {
borderColor: 'Highlight'
},
_b)
}
],
disabled && [
'is-disabled',
{
borderColor: palette.neutralLighter,
backgroundColor: palette.neutralLighter,
pointerEvents: 'none',
cursor: 'default',
}
],
underlined && [
'is-underlined',
{
borderWidth: '0 0 1px 0'
}
],
underlined && disabled && {
backgroundColor: 'transparent'
},
hasInput && 'can-clear',
className
],
iconContainer: [
'ms-SearchBox-iconContainer',
{
display: 'flex',
flexDirection: 'column',
justifyContent: 'center',
flexShrink: 0,
fontSize: 16,
width: 32,
textAlign: 'center',
transition: "width " + Styling_1.AnimationVariables.durationValue1,
color: palette.themePrimary
},
hasFocus && {
width: 4,
transition: "width " + Styling_1.AnimationVariables.durationValue1
},
disabled && {
color: palette.neutralTertiary
}
],
icon: [
'ms-SearchBox-icon',
{
opacity: 1,
transition: "opacity " + Styling_1.AnimationVariables.durationValue1 + " 0s"
},
hasFocus && {
opacity: 0,
transition: "opacity 0 " + Styling_1.AnimationVariables.durationValue1
}
],
clearButton: [
'ms-SearchBox-clearButton',
{
display: 'flex',
flexDirection: 'row',
alignItems: 'stretch',
cursor: 'pointer',
flexBasis: '32px',
flexShrink: 0,
padding: 1,
color: palette.themePrimary,
}
],
field: [
'ms-SearchBox-field',
Styling_1.normalize,
{
border: 'none',
outline: 'none',
fontWeight: 'inherit',
fontFamily: 'inherit',
fontSize: 'inherit',
color: palette.neutralPrimary,
backgroundColor: 'transparent',
flex: '1 1 0px',
overflow: 'hidden',
textOverflow: 'ellipsis',
// This padding forces the text placement to round up.
paddingBottom: 0.5,
// This removes the IE specific clear button in the input since we implimented our own
selectors: {
'::-ms-clear': {
display: 'none'
},
'::placeholder': {
color: semanticColors.inputPlaceholderText,
opacity: 1
},
':-ms-input-placeholder': {
color: semanticColors.inputPlaceholderText
}
}
},
disabled && {
color: palette.neutralTertiary
}
]
};
var _a, _b;
}
exports.getStyles = getStyles;
//# sourceMappingURL=SearchBox.styles.js.map