Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
import { names as themeNames } from '@pluralsight/ps-design-system-theme'
import * as vars from '../vars/index.js'
export default {
'.psds-text-input': {
display: 'inline-block'
},
'.psds-text-input--disabled': {
opacity: 0.5
},
// __field
'.psds-text-input__field': {
alignItems: 'center',
background: colors.bone,
borderRadius: '2px',
color: colors.gray03,
display: 'flex',
fontWeight: type.fontWeightBook,
height: '40px',
minWidth: '192px',
padding: `${layout.spacingXSmall} ${layout.spacingMedium}`,
position: 'relative',
width: '100%'
},
'.psds-text-input__field.psds-text-input--small': {
height: '32px',
padding: `6px ${layout.spacingXSmall}`
},
'.psds-text-input__field--w-after': {
paddingRight: 0
color: colors.gray03
},
[`.psds-text-input__icon.psds-theme--${themeNames.light}`]: {
color: colors.gray02
},
[`.psds-text-input__icon--icon-align-${vars.iconAligns.right}`]: {
left: 'auto',
right: layout.spacingXSmall
},
[`.psds-text-input__icon--appearance-${vars.appearances.subtle}`]: {
color: colors.gray02
},
// __label
'.psds-text-input__label': {
color: colors.bone,
fontSize: type.fontSizeSmall,
lineHeight: '16px',
fontWeight: type.fontWeightMedium,
paddingBottom: layout.spacingXSmall
},
[`.psds-text-input__label.psds-theme--${themeNames.light}`]: {
color: colors.gray05
},
// __sub-label
'.psds-text-input__sub-label': {
color: colors.gray02,
fontSize: type.fontSizeXSmall,
lineHeight: '16px',
fontWeight: type.fontWeightMedium,
paddingTop: layout.spacingXSmall
},
[`.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',
top: '0',
left: 'auto',
height: '100%',
color: colors.gray03,
cursor: 'pointer',
background: 'none',
border: 'none'
},
[`.psds-date-picker__icon.psds-theme--${themeNames.light}`]: {
color: colors.gray02
},
[`.psds-date-picker__icon--appearance-${vars.appearances.subtle}`]: {
color: colors.gray02
},
// __label
'.psds-date-picker__label': {
color: colors.bone,
fontSize: type.fontSizeSmall,
lineHeight: '16px',
fontWeight: type.fontWeightMedium,
paddingBottom: layout.spacingXSmall
},
[`.psds-date-picker__label.psds-theme--${themeNames.light}`]: {
color: colors.gray05
},
// __sub-label
'.psds-date-picker__sub-label': {
color: colors.gray02,
fontSize: type.fontSizeXSmall,
lineHeight: '16px',
fontWeight: type.fontWeightMedium,
paddingTop: layout.spacingXSmall
export default {
'.psds-text-area': {
display: 'inline-block',
width: '100%',
maxWidth: '496px'
},
'.psds-text-area--disabled': {
opacity: 0.5
},
'.psds-text-area__field': {
position: 'relative',
minHeight: '104px',
width: '100%',
borderRadius: '2px',
background: colors.bone,
fontSize: type.fontSizeSmall,
lineHeight: type.lineHeightStandard,
fontWeight: type.fontWeightBook,
color: colors.gray03,
padding: `${layout.spacingXSmall} ${layout.spacingMedium}`,
border: 'none'
},
'.psds-text-area__field:focus': {
outline: 'none'
},
[`.psds-text-area__field.psds-theme--${themeNames.light}:focus`]: {
border: '1px solid transparent'
},
[`.psds-text-area__field--error.psds-theme--${themeNames.light}`]: {
border: '1px solid transparent'
},
border: '1px solid transparent'
},
[`.psds-text-area__field.psds-theme--${themeNames.light}`]: {
background: colors.white,
border: `1px solid ${colors.gray02}`
},
'.psds-text-area__field-container': {
position: 'relative',
display: 'flex',
alignItems: 'center'
},
'.psds-text-area__label': {
width: '100%',
color: colors.bone,
fontSize: type.fontSizeSmall,
lineHeight: '16px',
fontWeight: type.fontWeightMedium,
paddingBottom: layout.spacingXSmall
},
[`.psds-text-area__label.psds-theme--${themeNames.light}`]: {
color: colors.gray05
},
'.psds-text-area__sub-label': {
color: colors.gray02,
fontSize: type.fontSizeXSmall,
lineHeight: '16px',
fontWeight: type.fontWeightMedium,
paddingTop: layout.spacingXSmall
},