Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
[`.psds-dropdown__field--error.psds-theme--${themeNames.light}`]: {
border: '1px solid transparent'
},
[`.psds-dropdown__field--appearance-${vars.appearances.subtle}`]: {
color: core.colors.gray01,
background: core.colors.gray04,
border: `none`
},
// __field-container
'.psds-dropdown__field-container': {
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
width: '100%',
minWidth: `calc(${iconWidths.medium} + ${core.layout.spacingXSmall})`,
maxWidth: '100%',
},
'.psds-dropdown__field-aligner': {
display: 'inline-flex',
alignItems: 'center',
width: '100%',
maxWidth: '100%',
},
// __icon
'.psds-dropdown__icon': {
position: 'absolute',
left: 'auto',
right: core.layout.spacingXSmall,
display: 'flex',
alignItems: 'center',
}
},
[`.psds-text-input__field--error.psds-theme--${themeNames.light}`]: {
border: '1px solid transparent'
},
[`.psds-text-input__field--appearance-${vars.appearances.subtle}`]: {
color: colors.gray01,
background: colors.gray06,
border: `1px solid ${colors.gray03}`
},
[`.psds-text-input__field--appearance-${vars.appearances.subtle}.psds-theme--${themeNames.light}`]: {
color: colors.gray05
},
[`.psds-text-input__field--icon-align-${vars.iconAligns.left}`]: {
padding: `0 ${layout.spacingMedium} 0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall})`
},
[`.psds-text-input__field--icon-align-${vars.iconAligns.right}`]: {
padding: `0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall}) 0 ${layout.spacingMedium}`
},
[`.psds-text-input__field--icon-align-${vars.iconAligns.left}.psds-text-input--small`]: {
padding: `0 ${layout.spacingXSmall} 0 ${parseInt(
layout.spacingMedium,
10
) + parseInt(iconWidths.medium, 10)}px`
},
[`.psds-text-input__field--icon-align-${vars.iconAligns.right}.psds-text-input--small`]: {
padding: `0 ${parseInt(layout.spacingMedium, 10) +
parseInt(iconWidths.medium, 10)}px 0 ${layout.spacingXSmall}`
},
// __field-container
// __sub-label
'.psds-text-input__sub-label': {
color: colors.gray02,
fontSize: type.fontSizeXSmall,
lineHeight: '16px',
fontWeight: type.fontWeightMedium,
paddingTop: layout.spacingXSmall
},
[`.psds-text-input__sub-label.psds-theme--${themeNames.light}`]: {
color: colors.gray03
},
// __error
'.psds-text-input__error': {
position: 'absolute',
right: `calc(-1 * (${iconWidths.medium} + ${layout.spacingXSmall}))`,
display: 'flex',
alignItems: 'center',
color: colors.red,
marginLeft: layout.spacingXSmall
}
}
// __search
'.psds-error-page__search': {
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
color: colors.gray02
},
[`.psds-error-page__search.psds-theme--${themeNames.light}`]: {
background: colors.white,
color: colors.gray03
},
'.psds-error-page__search__icon': {
position: 'absolute',
left: layout.spacingXSmall,
width: iconWidths.medium,
height: iconWidths.medium,
fill: colors.gray02
},
'.psds-error-page__search__input': {
position: 'relative',
height: '40px',
padding: `0 ${layout.spacingXSmall} 0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall})`,
color: colors.gray02,
fontSize: type.fontSizeSmall,
lineHeight: type.lineHeightStandard,
background: 'none',
border: `1px solid ${colors.gray03}`,
borderRadius: '2px'
},
[`.psds-error-page__search__input.psds-theme--${themeNames.light}`]: {
color: colors.gray03
},
// __search
'.psds-error-page__search': {
position: 'relative',
display: 'inline-flex',
alignItems: 'center',
color: colors.gray02
},
[`.psds-error-page__search.psds-theme--${themeNames.light}`]: {
background: colors.white,
color: colors.gray03
},
'.psds-error-page__search__icon': {
position: 'absolute',
left: layout.spacingXSmall,
width: iconWidths.medium,
height: iconWidths.medium,
fill: colors.gray02
},
'.psds-error-page__search__input': {
position: 'relative',
height: '40px',
padding: `0 ${layout.spacingXSmall} 0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall})`,
color: colors.gray02,
fontSize: type.fontSizeSmall,
lineHeight: type.lineHeightStandard,
background: 'none',
border: `1px solid ${colors.gray03}`,
borderRadius: '2px'
},
[`.psds-error-page__search__input.psds-theme--${themeNames.light}`]: {
color: colors.gray03
border: 'none',
color: colors.gray05
},
[`.psds-date-picker__sub-field-divider--appearance-${vars.appearances.subtle}`]: {
color: colors.gray01
},
// __field-container
'.psds-date-picker__field-container': {
position: 'relative',
display: 'flex',
borderRadius: '2px',
alignItems: 'center',
width: '100%',
height: '40px',
minWidth: `calc(192px + ${iconWidths.medium} + ${layout.spacingXSmall})`,
padding: `0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall}) 0 ${layout.spacingMedium}`,
background: colors.bone
},
[`.psds-date-picker__field-container.psds-theme--${themeNames.light}`]: {
background: colors.white,
border: `1px solid ${colors.gray02}`
},
[`.psds-date-picker__field-container--appearance-${vars.appearances.subtle}`]: {
color: colors.gray01,
background: colors.gray06,
border: `1px solid ${colors.gray03}`
},
// __icon
'.psds-date-picker__icon': {
position: 'absolute',
},
'.psds-text-area__sub-label': {
color: colors.gray02,
fontSize: type.fontSizeXSmall,
lineHeight: '16px',
fontWeight: type.fontWeightMedium,
paddingTop: layout.spacingXSmall
},
[`.psds-text-area__sub-label.psds-theme--${themeNames.light}`]: {
color: colors.gray03
},
'.psds-text-area__error': {
position: 'absolute',
right: `calc(-1 * (${iconWidths.medium} + ${layout.spacingXSmall}))`,
display: 'flex',
alignItems: 'flex-start',
height: '100%',
paddingTop: layout.spacingXSmall,
marginLeft: layout.spacingXSmall,
color: colors.red
}
}
},
[`.psds-error-page__search.psds-theme--${themeNames.light}`]: {
background: colors.white,
color: colors.gray03
},
'.psds-error-page__search__icon': {
position: 'absolute',
left: layout.spacingXSmall,
width: iconWidths.medium,
height: iconWidths.medium,
fill: colors.gray02
},
'.psds-error-page__search__input': {
position: 'relative',
height: '40px',
padding: `0 ${layout.spacingXSmall} 0 calc(${layout.spacingXSmall} + ${iconWidths.medium} + ${layout.spacingXSmall})`,
color: colors.gray02,
fontSize: type.fontSizeSmall,
lineHeight: type.lineHeightStandard,
background: 'none',
border: `1px solid ${colors.gray03}`,
borderRadius: '2px'
},
[`.psds-error-page__search__input.psds-theme--${themeNames.light}`]: {
color: colors.gray03
},
'@media (min-width: 769px)': {
'.psds-error-page': {
paddingTop: '92px'
},