Stefan Hacker
227 lines
8.3 KiB
JavaScript
227 lines
8.3 KiB
JavaScript
"use strict";
|
|
Object.defineProperty(exports, "__esModule", { value: true });
|
|
exports.getStyles = getStyles;
|
|
var Styling_1 = require("../../Styling");
|
|
var Utilities_1 = require("../../Utilities");
|
|
var GlobalClassNames = {
|
|
root: 'ms-SearchBox',
|
|
iconContainer: 'ms-SearchBox-iconContainer',
|
|
icon: 'ms-SearchBox-icon',
|
|
clearButton: 'ms-SearchBox-clearButton',
|
|
field: 'ms-SearchBox-field',
|
|
};
|
|
function getStyles(props) {
|
|
var _a, _b, _c, _d, _e;
|
|
var theme = props.theme, underlined = props.underlined, disabled = props.disabled, hasFocus = props.hasFocus, className = props.className, hasInput = props.hasInput, disableAnimation = props.disableAnimation, showIcon = props.showIcon;
|
|
var palette = theme.palette, fonts = theme.fonts, semanticColors = theme.semanticColors, effects = theme.effects;
|
|
var classNames = (0, Styling_1.getGlobalClassNames)(GlobalClassNames, theme);
|
|
// placeholder style constants
|
|
var placeholderStyles = {
|
|
color: semanticColors.inputPlaceholderText,
|
|
opacity: 1,
|
|
};
|
|
var inputIconAlt = palette.neutralSecondary;
|
|
var inputIconAltHovered = palette.neutralPrimary;
|
|
var inputBorderDisabled = palette.neutralLighter;
|
|
var inputBackgroundHovered = palette.neutralLighter;
|
|
var inputBackgroundDisabled = palette.neutralLighter;
|
|
return {
|
|
root: [
|
|
classNames.root,
|
|
fonts.medium,
|
|
Styling_1.normalize,
|
|
{
|
|
color: semanticColors.inputText,
|
|
backgroundColor: semanticColors.inputBackground,
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
flexWrap: 'nowrap',
|
|
alignItems: 'stretch',
|
|
// The 1px top and bottom padding ensure the input field does not overlap the border
|
|
padding: '1px 0 1px 4px',
|
|
borderRadius: effects.roundedCorner2,
|
|
border: "1px solid ".concat(semanticColors.inputBorder),
|
|
height: 32,
|
|
selectors: (_a = {},
|
|
_a[Styling_1.HighContrastSelector] = {
|
|
borderColor: 'WindowText',
|
|
},
|
|
_a[':hover'] = {
|
|
borderColor: semanticColors.inputBorderHovered,
|
|
selectors: (_b = {},
|
|
_b[Styling_1.HighContrastSelector] = {
|
|
borderColor: 'Highlight',
|
|
},
|
|
_b),
|
|
},
|
|
_a[":hover .".concat(classNames.iconContainer)] = {
|
|
color: semanticColors.inputIconHovered,
|
|
},
|
|
_a),
|
|
},
|
|
!hasFocus &&
|
|
hasInput && {
|
|
selectors: (_c = {},
|
|
_c[":hover .".concat(classNames.iconContainer)] = {
|
|
width: 4,
|
|
},
|
|
_c[":hover .".concat(classNames.icon)] = {
|
|
opacity: 0,
|
|
pointerEvents: 'none',
|
|
},
|
|
_c),
|
|
},
|
|
hasFocus && [
|
|
'is-active',
|
|
{
|
|
position: 'relative',
|
|
},
|
|
(0, Styling_1.getInputFocusStyle)(semanticColors.inputFocusBorderAlt, underlined ? 0 : effects.roundedCorner2, underlined ? 'borderBottom' : 'border'),
|
|
],
|
|
showIcon && [
|
|
{
|
|
selectors: (_d = {},
|
|
_d[":hover .".concat(classNames.iconContainer)] = {
|
|
width: 32,
|
|
},
|
|
_d[":hover .".concat(classNames.icon)] = {
|
|
opacity: 1,
|
|
},
|
|
_d),
|
|
},
|
|
],
|
|
disabled && [
|
|
'is-disabled',
|
|
{
|
|
borderColor: inputBorderDisabled,
|
|
backgroundColor: inputBackgroundDisabled,
|
|
pointerEvents: 'none',
|
|
cursor: 'default',
|
|
selectors: (_e = {},
|
|
_e[Styling_1.HighContrastSelector] = {
|
|
borderColor: 'GrayText',
|
|
},
|
|
_e),
|
|
},
|
|
],
|
|
underlined && [
|
|
'is-underlined',
|
|
{
|
|
borderWidth: '0 0 1px 0',
|
|
borderRadius: 0,
|
|
// Underlined SearchBox has a larger padding left to vertically align with the waffle in product
|
|
padding: '1px 0 1px 8px',
|
|
},
|
|
],
|
|
underlined &&
|
|
disabled && {
|
|
backgroundColor: 'transparent',
|
|
},
|
|
hasInput && 'can-clear',
|
|
className,
|
|
],
|
|
iconContainer: [
|
|
classNames.iconContainer,
|
|
{
|
|
display: 'flex',
|
|
flexDirection: 'column',
|
|
justifyContent: 'center',
|
|
flexShrink: 0,
|
|
fontSize: 16,
|
|
width: 32,
|
|
textAlign: 'center',
|
|
color: semanticColors.inputIcon,
|
|
cursor: 'text',
|
|
},
|
|
hasFocus && {
|
|
width: 4,
|
|
},
|
|
disabled && {
|
|
color: semanticColors.inputIconDisabled,
|
|
},
|
|
!disableAnimation && {
|
|
transition: "width ".concat(Styling_1.AnimationVariables.durationValue1),
|
|
},
|
|
showIcon &&
|
|
hasFocus && {
|
|
width: 32,
|
|
},
|
|
],
|
|
icon: [
|
|
classNames.icon,
|
|
{
|
|
opacity: 1,
|
|
},
|
|
hasFocus && {
|
|
opacity: 0,
|
|
pointerEvents: 'none',
|
|
},
|
|
!disableAnimation && {
|
|
transition: "opacity ".concat(Styling_1.AnimationVariables.durationValue1, " 0s"),
|
|
},
|
|
showIcon &&
|
|
hasFocus && {
|
|
opacity: 1,
|
|
},
|
|
],
|
|
clearButton: [
|
|
classNames.clearButton,
|
|
{
|
|
display: 'flex',
|
|
flexDirection: 'row',
|
|
alignItems: 'stretch',
|
|
cursor: 'pointer',
|
|
flexBasis: '32px',
|
|
flexShrink: 0,
|
|
padding: 0,
|
|
margin: '-1px 0px',
|
|
selectors: {
|
|
'&:hover .ms-Button': {
|
|
backgroundColor: inputBackgroundHovered,
|
|
},
|
|
'&:hover .ms-Button-icon': {
|
|
color: inputIconAltHovered,
|
|
},
|
|
'.ms-Button': {
|
|
borderRadius: (0, Utilities_1.getRTL)(theme) ? '1px 0 0 1px' : '0 1px 1px 0',
|
|
},
|
|
'.ms-Button-icon': {
|
|
color: inputIconAlt,
|
|
},
|
|
},
|
|
},
|
|
],
|
|
field: [
|
|
classNames.field,
|
|
Styling_1.normalize,
|
|
(0, Styling_1.getPlaceholderStyles)(placeholderStyles),
|
|
{
|
|
backgroundColor: 'transparent',
|
|
border: 'none',
|
|
outline: 'none',
|
|
fontWeight: 'inherit',
|
|
fontFamily: 'inherit',
|
|
fontSize: 'inherit',
|
|
color: semanticColors.inputText,
|
|
flex: '1 1 0px',
|
|
// The default implicit value of 'auto' prevents the input from shrinking. Setting min-width to
|
|
// 0px allows the input element to shrink to fit the container.
|
|
minWidth: '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 implemented our own
|
|
selectors: {
|
|
'::-ms-clear': {
|
|
display: 'none',
|
|
},
|
|
},
|
|
},
|
|
disabled && {
|
|
color: semanticColors.disabledText,
|
|
},
|
|
],
|
|
};
|
|
}
|
|
//# sourceMappingURL=SearchBox.styles.js.map
|