Files
WebControlCenter/src/components/restricted-text/style.ts
2025-09-04 20:25:15 -04:00

96 lines
1.8 KiB
TypeScript

/**
* Copyright 2024 Phenix Real Time Solutions, Inc. Confidential and Proprietary. All Rights Reserved.
*/
import * as styled from 'styled-components';
import Theme from 'theme';
const {
colors,
typography,
spacing,
} = Theme;
export const RestrictedDiv = styled.default.div`
display: flex;
align-items: center;
justify-content: start;
word-wrap: break-word;
&.full-width {
width: 100%;
}
& div {
display: flex;
align-items: center;
justify-content: center;
align-content: center;
& span {
color: ${Theme.primaryThemeColor};
display: none;
cursor: pointer;
outline: none;
}
.icon-button {
width: 1.5rem;
height: 1.5rem;
}
}
&:hover {
& span {
display: block;
}
}
`;
export const TruncatedBlock = styled.default.p`
overflow: hidden;
padding: ${spacing.small} 0;
text-overflow: ellipsis;
&.truncated {
white-space: nowrap;
}
`;
export const MeasuringBlock = styled.default.p`
position: fixed;
visibility: hidden;
opacity: 0;
white-space: nowrap;
`;
export const RestrictedRowWrapper = styled.default.div`
display: flex;
`;
export const RestrictedRowLabel = styled.default.div`
width: 135px;
display: flex;
align-self: center;
color: ${colors.gray300};
font-size: ${typography.fontSizeS};
padding: ${spacing.small};
a {
margin: 0 0.25rem;
}
span {
margin: 0 2px;
}
`;
export const RestrictedRowText = styled.default.div`
color: ${colors.gray300};
font-size: ${typography.fontSizeS};
border-bottom: 1px solid ${colors.gray700};
padding: ${spacing.small};
width: calc(100% - 135px);
a {
color: ${colors.lightBlue};
overflow-wrap: anywhere;
text-decoration: none;
font-size: ${typography.fontSizeS};
}
`;