@mui/material#alpha TypeScript Examples
The following examples show how to use
@mui/material#alpha.
You can vote up the ones you like or vote down the ones you don't like,
and go to the original project or source file by following the links above each example. You may check out the related API usage on the sidebar.
Example #1
| Source File: Table.tsx From firecms with MIT License | 6 votes |
|
useTableStyles = makeStyles<Theme>(theme => createStyles({
tableContainer: {
width: "100%",
height: "100%",
flexGrow: 1
},
header: {
width: "calc(100% + 24px)",
margin: "0px -12px",
padding: "0px 12px",
color: theme.palette.text.secondary,
backgroundColor: theme.palette.background.default,
transition: "color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
height: "100%",
fontSize: "0.750rem",
textTransform: "uppercase",
fontWeight: 600
},
tableRow: {
cursor: "pointer",
display: "flex",
alignItems: "center",
fontSize: "0.875rem"
},
tableRowClickable: {
"&:hover": {
backgroundColor: theme.palette.mode === "dark" ? alpha(theme.palette.background.default, 0.6) : alpha(theme.palette.background.default, 0.5)
}
},
column: {
padding: "0px !important"
}
}))
Example #2
| Source File: DesktopSearch.tsx From GTAV-NativeDB with MIT License | 6 votes |
|
Search = styled('div')(({ theme }) => ({
position: 'relative',
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.white, 0.15),
'&:hover': {
backgroundColor: alpha(theme.palette.common.white, 0.25)
},
margin: theme.spacing(0, 2),
flex: 1,
display: 'flex'
}))
Example #3
| Source File: MobileSearch.tsx From GTAV-NativeDB with MIT License | 6 votes |
|
Search = styled('div')(({ theme }) => ({
position: 'relative',
backgroundColor: theme.palette.background.paper,
...(theme.palette.mode === 'dark' && {
backgroundImage: `linear-gradient(${alpha(
'#fff',
getOverlayAlpha(4),
)}, ${alpha('#fff', getOverlayAlpha(4))})`,
}),
flex: 1,
display: 'flex',
height: '100%',
alignItems: 'center',
zIndex: 1,
padding: theme.spacing(0, 1)
}))
Example #4
| Source File: CopyableText.tsx From GTAV-NativeDB with MIT License | 6 votes |
|
StyledButtonBase = styled(ButtonBase)(({ theme }) => {
const background = alpha(theme.palette.getContrastText(theme.palette.background.paper), .08)
return {
transition: 'all ease-in-out .1s',
borderRadius: theme.shape.borderRadius,
outline: `0px solid ${background}`,
'&:hover': {
background: background,
outlineWidth: theme.spacing(.5)
}
}
})
Example #5
| Source File: NativeHeader.tsx From GTAV-NativeDB with MIT License | 6 votes |
|
StyledBox = styled(Box)(({ theme }) => ({
display: 'flex',
alignItems: 'center',
gap: theme.spacing(1),
padding: theme.spacing(2),
backdropFilter: 'blur(20px)',
backgroundColor: alpha(theme.palette.background.default, 0.6),
...(theme.palette.mode === 'dark' && {
backgroundImage: `linear-gradient(${alpha(
'#fff',
getOverlayAlpha(4),
)}, ${alpha('#fff', getOverlayAlpha(4))})`,
})
}))
Example #6
| Source File: date-section.tsx From tams-club-cal with MIT License | 6 votes |
|
DateSection = (props: DateSectionProps) => {
return (
<Typography
variant="h6"
component="h2"
sx={{
color: (theme) =>
darkSwitch(theme, theme.palette.primary.dark, alpha(theme.palette.primary.light, 0.9)),
}}
>
{formatTime(props.time, 'dddd M/D/YYYY')}
</Typography>
);
}
Example #7
| Source File: reservation-entry.tsx From tams-club-cal with MIT License | 6 votes |
|
ReservationEntry = (props: ReservationEntryProps) => {
return (
<TableCell colSpan={props.span || 1} sx={props.sx}>
<Link
href={`/events/${props.reservation.id}?view=reservations`}
sx={{
display: 'block',
fontSize: '0.75rem',
whiteSpace: 'nowrap',
overflow: 'hidden',
textAlign: 'center',
textDecoration: 'none',
color: 'inherit',
backgroundColor: (theme) =>
alpha(darkSwitch(theme, theme.palette.primary.light, theme.palette.primary.dark), 0.5),
'&:hover': {
textDecoration: 'underline',
},
}}
>
{props.reservation.name}
</Link>
</TableCell>
);
}
Example #8
| Source File: Search.tsx From abrechnung with GNU Affero General Public License v3.0 | 6 votes |
|
Search = styled("div")(({ theme }: { theme: Theme }) => ({
position: "relative",
borderRadius: theme.shape.borderRadius,
backgroundColor: alpha(theme.palette.common.white, 0.15),
"&:hover": {
backgroundColor: alpha(theme.palette.common.white, 0.25),
},
marginRight: theme.spacing(2),
marginLeft: 0,
width: "100%",
[theme.breakpoints.up("sm")]: {
marginLeft: theme.spacing(3),
width: "auto",
},
}))
Example #9
| Source File: DetailCreate.tsx From airmessage-web with Apache License 2.0 | 6 votes |
|
function DirectSendButton(props: {address: string, onClick: () => void}) {
const theme = useTheme();
return (
<ButtonBase
onClick={props.onClick}
sx={{
width: "100%",
padding: "8px 0",
transition: theme.transitions.create(["background-color", "box-shadow", "border"], {
duration: theme.transitions.duration.short,
}),
borderRadius: theme.shape.borderRadius,
display: "flex",
flexDirection: "row",
justifyContent: "flex-start",
"&:hover": {
backgroundColor: alpha(theme.palette.text.primary, theme.palette.action.hoverOpacity),
}
}}>
<Avatar sx={{
backgroundColor: theme.palette.primary.main,
marginRight: "16px !important"
}} />
<Typography>Send to <b>{props.address}</b></Typography>
</ButtonBase>
);
}
Example #10
| Source File: index.tsx From Search-Next with GNU General Public License v3.0 | 6 votes |
|
StyledMenuItem = styled((props: MenuItemProps) => (
<MMenuItem {...props} />
))(({ theme }) => ({
borderRadius: 4,
padding: '4px 8px',
fontSize: 14,
'& .MuiSvgIcon-root': {
fontSize: 14,
color: theme.palette.text.secondary,
marginRight: theme.spacing(1.5),
},
'&:active': {
backgroundColor: alpha(
theme.palette.primary.main,
theme.palette.action.selectedOpacity,
),
},
}))
Example #11
| Source File: CollectionRowActions.tsx From firecms with MIT License | 5 votes |
|
useTableStyles = makeStyles<Theme>(theme => createStyles({
tableContainer: {
width: "100%",
height: "100%",
flexGrow: 1
},
headerTypography: {
fontSize: "0.750rem",
fontWeight: 600,
textTransform: "uppercase"
},
header: {
width: "calc(100% + 24px)",
margin: "0px -12px",
padding: "0px 12px",
color: theme.palette.text.secondary,
backgroundColor: theme.palette.background.default,
transition: "color 250ms cubic-bezier(0.4, 0, 0.2, 1) 0ms",
height: "100%",
fontSize: "0.750rem",
textTransform: "uppercase",
fontWeight: 600
},
tableRow: {
cursor: "pointer",
display: "flex",
alignItems: "center",
fontSize: "0.875rem"
},
tableRowClickable: {
"&:hover": {
backgroundColor: theme.palette.mode === "dark" ? alpha(theme.palette.background.default, 0.6) : alpha(theme.palette.background.default, 0.5)
}
},
column: {
padding: "0px !important"
},
cellButtonsWrap: {
width: "100%",
height: "100%",
display: "flex",
alignItems: "center",
justifyContent: "center",
flexDirection: "column",
backgroundColor: theme.palette.mode === "dark" ? alpha(theme.palette.background.default, 0.8) : alpha(theme.palette.background.default, 0.8)
},
cellButtons: {
minWidth: 138
},
cellButtonsId: {
width: 138,
textAlign: "center",
textOverflow: "ellipsis",
overflow: "hidden"
}
}))
Example #12
| Source File: CollectionTableToolbar.tsx From firecms with MIT License | 5 votes |
|
useStyles = makeStyles((theme: Theme) =>
createStyles({
toolbar: {
minHeight: 56,
[theme.breakpoints.down("xl")]: {
paddingLeft: theme.spacing(0.5),
paddingRight: theme.spacing(0.5)
},
paddingLeft: theme.spacing(1),
paddingRight: theme.spacing(1),
backgroundColor: theme.palette.mode === "light" ? theme.palette.common.white : theme.palette.background.default,
borderBottom: `1px solid ${theme.palette.divider}`,
display: "flex",
flexDirection: "row",
justifyContent: "space-between",
alignItems: "center",
width: "100%"
},
actions: {
display: "flex",
alignItems: "center",
"& > *": {
[theme.breakpoints.down("md")]: {
marginRight: theme.spacing(0.5)
},
marginRight: theme.spacing(1)
}
},
selectRoot: {
"label + &": {
marginTop: theme.spacing(3)
}
},
input: {
borderRadius: 4,
position: "relative",
backgroundColor: theme.palette.mode === "light" ? alpha(theme.palette.common.black, 0.05) : darken(theme.palette.background.default, 0.2),
fontSize: 14,
fontWeight: theme.typography.fontWeightMedium,
padding: "10px 26px 10px 12px",
transition: theme.transitions.create(["border-color", "box-shadow"]),
"&:focus": {
borderRadius: 4
}
},
item: {
backgroundColor: theme.palette.background.default,
fontSize: 14,
fontWeight: theme.typography.fontWeightMedium,
paddingTop: theme.spacing(1),
paddingBottom: theme.spacing(1),
"&:hover": {
backgroundColor: darken(theme.palette.background.default, 0.1)
},
"&:focus": {
backgroundColor: darken(theme.palette.background.default, 0.2),
"& .MuiListItemIcon-root, & .MuiListItemText-primary": {
color: theme.palette.text.primary
}
}
}
})
)
Example #13
| Source File: NativesPage.tsx From GTAV-NativeDB with MIT License | 5 votes |
|
function NativeInfoDrawer() {
const { native: nativeHash } = useParams<{ native?: string }>()
const history = useHistory()
const theme = useTheme()
const handleClose = useCallback(() => {
history.replace(`/natives${history.location.search}`)
}, [history])
return (
<SwipeableDrawer
anchor="bottom"
open={!!nativeHash}
onOpen={() => { }}
onClose={handleClose}
PaperProps={{
sx: {
height: `calc(100vh - 5px)`,
borderRadius: `${theme.shape.borderRadius}px ${theme.shape.borderRadius}px 0px 0px`
}
}}
components={{
Root: 'section'
}}
>
<Paper
sx={{
display: 'flex',
alignItems: 'center',
justifyContent: 'center',
borderRadius: '0px',
position: 'sticky',
top: 0,
p: 1,
backdropFilter: 'blur(20px)',
backgroundColor: alpha(theme.palette.background.default, 0.6),
...(theme.palette.mode === 'dark' && {
backgroundImage: `linear-gradient(${alpha(
'#fff',
getOverlayAlpha(4),
)}, ${alpha('#fff', getOverlayAlpha(4))})`,
}),
zIndex: 1
}}
>
<Box sx={{ flexGrow: 1 }} />
<Typography component="h1" variant="h6" align="center">
Native Details
</Typography>
<Box sx={{ flexGrow: 1 }} />
<IconButton onClick={handleClose}>
<CloseIcon />
</IconButton>
</Paper>
<NativeInfo />
</SwipeableDrawer>
)
}
Example #14
| Source File: ArtifactCardNano.tsx From genshin-optimizer with MIT License | 5 votes |
|
export default function ArtifactCardNano({ artifactId, slotKey: pSlotKey, mainStatAssumptionLevel = 0, showLocation = false, onClick, BGComponent = CardDark }: Data) {
const art = useArtifact(artifactId)
const sheet = usePromise(ArtifactSheet.get(art?.setKey), [art])
const actionWrapperFunc = useCallback(children => <CardActionArea onClick={onClick} sx={{ height: "100%" }}>{children}</CardActionArea>, [onClick],)
const theme = useTheme()
if (!art) return <BGComponent sx={{ display: "flex", height: "100%", alignItems: "center", justifyContent: "center" }}>
<Box component="img" src={Assets.slot[pSlotKey]} sx={{ width: "25%", height: "auto", opacity: 0.7 }} />
</BGComponent>
const { slotKey, rarity, level, mainStatKey, substats, location } = art
const mainStatLevel = Math.max(Math.min(mainStatAssumptionLevel, rarity * 4), level)
const mainStatUnit = KeyMap.unit(mainStatKey)
const levelVariant = "roll" + (Math.floor(Math.max(level, 0) / 4) + 1)
const element = allElementsWithPhy.find(ele => art.mainStatKey.includes(ele))
const color = element ? alpha(theme.palette[element].main, 0.6) : alpha(theme.palette.secondary.main, 0.6)
return <BGComponent sx={{ height: "100%" }}><ConditionalWrapper condition={!!onClick} wrapper={actionWrapperFunc} >
<Box display="flex" height="100%">
<Box className={`grad-${rarity}star`} sx={{ position: "relative", flexGrow: 1, display: "flex", flexDirection: "column", alignItems: "center", justifyContent: "center" }} >
<ArtifactSetSlotTooltip slotKey={slotKey} sheet={sheet}>
<Box
component="img"
src={sheet?.slotIcons[slotKey] ?? ""}
sx={{ m: -1, maxHeight: "110%", maxWidth: "110%" }}
/>
</ArtifactSetSlotTooltip>
<Box sx={{ position: "absolute", width: "100%", height: "100%", p: 0.5, opacity: 0.85, display: "flex", justifyContent: "space-between", pointerEvents: "none" }} >
<Chip size="small" label={<strong>{` +${level}`}</strong>} color={levelVariant as any} />
{showLocation && <Chip size="small" label={<LocationIcon location={location} />} color={"secondary"} sx={{
overflow: "visible", ".MuiChip-label": {
overflow: "visible"
}
}} />}
</Box>
{/* mainstats */}
<Chip size="small" sx={{ position: "absolute", bottom: 0, mb: 1, backgroundColor: color }}
label={<Typography variant="h6" sx={{ display: "flex", gap: 1, px: 1, zIndex: 1 }}>
<BootstrapTooltip placement="top" title={<Typography>{KeyMap.getArtStr(mainStatKey)}</Typography>} disableInteractive>
<span>{element ? uncoloredEleIcons[element] : StatIcon[mainStatKey]}</span>
</BootstrapTooltip>
<ColorText color={mainStatLevel !== level ? "warning" : undefined}>{cacheValueString(Artifact.mainStatValue(mainStatKey, rarity, mainStatLevel) ?? 0, KeyMap.unit(mainStatKey))}{mainStatUnit}</ColorText>
</Typography>} />
</Box>
{/* substats */}
<Box display="flex" flexDirection="column" justifyContent="space-between" sx={{ p: 1, }}>
{substats.map((stat: ICachedSubstat, i: number) => <SubstatDisplay key={i + stat.key} stat={stat} />)}
</Box>
</Box>
</ConditionalWrapper></BGComponent >
}
Example #15
| Source File: select.tsx From Search-Next with GNU General Public License v3.0 | 4 votes |
|
Select: React.FC<SelectProps> = ({
label,
size = 'small',
options,
optionsConfig,
helperText,
error,
inputRef,
...props
}) => {
const theme = createTheme();
return (
<Box sx={{ minWidth: 120 }}>
<FormControl fullWidth>
<InputLabel
id={`mui-select-label-${label}`}
className={css`
&.MuiFormLabel-root {
transform: translate(14px, 9px) scale(1);
}
&.Mui-focused,
&.MuiFormLabel-filled {
transform: translate(14px, -9px) scale(0.75);
}
`}
>
{label}
</InputLabel>
<StyledSelect
{...props}
labelId={`mui-select-label-${label}`}
id={`mui-select-${label}`}
inputRef={inputRef}
label={label}
size={size}
error={error}
onClose={(e) => e.stopPropagation()}
MenuProps={{
sx: {
'& .MuiPaper-root': {
backgroundColor: 'rgba(253, 253, 253, 0.8)',
backdropFilter: 'blur(8px)',
borderRadius: '4px',
marginTop: theme.spacing(1),
minWidth: 140,
color:
theme.palette.mode === 'light'
? 'rgb(55, 65, 81)'
: theme.palette.grey[300],
boxShadow:
'rgb(255, 255, 255) 0px 0px 0px 0px, rgba(0, 0, 0, 0.05) 0px 0px 0px 1px, rgba(0, 0, 0, 0.1) 0px 10px 15px -3px, rgba(0, 0, 0, 0.05) 0px 4px 6px -2px',
'& .MuiMenu-list': {
padding: '0 4px',
},
'& .MuiMenuItem-root': {
borderRadius: '4px',
padding: '4px 8px',
margin: '4px 0',
fontSize: '14px',
transition: 'all 0.3s',
'& .MuiSvgIcon-root': {
fontSize: '14px',
},
'&:active': {
backgroundColor: alpha(
theme.palette.primary.main,
theme.palette.action.selectedOpacity,
),
},
},
},
},
}}
>
{options.map((i) => {
const label =
optionsConfig && optionsConfig.label
? i[optionsConfig.label]
: i.label;
const value =
optionsConfig && optionsConfig.value
? i[optionsConfig.value]
: i.value;
return (
<MenuItem key={value} value={value}>
{label}
</MenuItem>
);
})}
</StyledSelect>
<FormHelperText error={error}>{helperText}</FormHelperText>
</FormControl>
</Box>
);
}
