boardsUnfurl.scss
TLDR
This file defines the styling for the FocalboardUnfurl component.
Methods
No methods found.
Classes
.FocalboardUnfurl
This class defines the styling for the FocalboardUnfurl component. It sets the display to table, sets the width to 100% with a maximum width of 425px, and applies padding and borders. It also sets the background color and box shadow. The class includes styling for the header, body, limited text, and footer sections.
.header
This class is a child class of .FocalboardUnfurl and defines the styling for the header section of the FocalboardUnfurl component. It sets the display to flex and aligns items vertically. The class includes styling for the icon and information sections of the header.
.icon
This class is a child class of .header and defines the styling for the icon section of the FocalboardUnfurl component. It sets the font size and height of the icon.
.information
This class is a child class of .header and defines the styling for the information section of the FocalboardUnfurl component. It sets the display to flex and the direction to column. The class includes styling for the card title and board title sections of the information.
.card_title
This class is a child class of .information and defines the styling for the card title section of the FocalboardUnfurl component. It sets the color, font weight, font size, and maximum width of the card title.
.board_title
This class is a child class of .information and defines the styling for the board title section of the FocalboardUnfurl component. It sets the color, font size, and line height of the board title.
.body
This class is a child class of .FocalboardUnfurl and defines the styling for the body section of the FocalboardUnfurl component. It sets the border, border radius, margin top, height, overflow, and padding of the body section. It also sets the white space to nowrap.
.limited
This class is a child class of .FocalboardUnfurl and defines the styling for the limited text section of the FocalboardUnfurl component. It sets the font size, color, and margin top of the limited text.
.footer
This class is a child class of .FocalboardUnfurl and defines the styling for the footer section of the FocalboardUnfurl component. It sets the display to flex and aligns items vertically. The class includes styling for the timestamp_properties section of the footer.
.timestamp_properties
This class is a child class of .footer and defines the styling for the timestamp_properties section of the FocalboardUnfurl component. It sets the margin left and maximum width of the timestamp_properties section. The class includes styling for the properties section of the timestamp_properties.
.properties
This class is a child class of .timestamp_properties and defines the styling for the properties section of the FocalboardUnfurl component. It sets the display to flex and aligns items vertically. The class includes styling for the remainder, post-preview__time, and property sections of the properties.
.remainder
This class is a child class of .properties and defines the styling for the remainder section of the FocalboardUnfurl component. It sets the color, font weight, and font size of the remainder.
.post-preview__time
This class is a child class of .properties and defines the styling for the post-preview__time section of the FocalboardUnfurl component. It sets the font size of the post-preview__time.
.property
This class is a child class of .properties and defines the styling for the property section of the FocalboardUnfurl component. It sets the display to flex and aligns items vertically. The class sets the border radius, padding, margin right, overflow, text-overflow, overflow-wrap, height, font weight, and font size of the property. It also includes styling for different background colors based on the propColor classes.
.propColorDefault, .propColorGray, .propColorBrown, .propColorOrange, .propColorYellow, .propColorGreen, .propColorBlue, .propColorPurple, .propColorPink, .propColorRed
These classes are child classes of .property and define the background color for different property colors.
.FocalboardUnfurl {
display: table;
width: 100%;
max-width: 425px;
margin: 0;
table-layout: fixed;
padding: 16px;
border: 1px solid rgba(var(--center-channel-color-rgb), 0.24) !important;
border-radius: 4px;
box-sizing: border-box;
text-decoration: none !important;
color: inherit !important;
background: rgb(var(--center-channel-bg-rgb));
box-shadow: var(--elevation-1);
margin-top: 8px;
&:hover {
cursor: pointer;
}
.header {
display: flex;
align-items: center;
.icon {
font-size: 36px;
height: 36px;
}
.information {
display: flex;
flex-direction: column;
margin-left: 12px;
overflow: hidden;
.card_title {
color: var(--center-channel-color);
font-weight: 600;
font-size: 14px;
max-width: 100%;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
.board_title {
color: rgba(var(--center-channel-color-rgb), 0.56);
font-size: 12px;
line-height: 16px;
}
}
}
.body {
border: 1px solid rgba(var(--center-channel-color-rgb), 0.16);
border-radius: 4px;
margin-top: 16px;
height: 145px;
overflow: hidden;
padding: 16px;
white-space: nowrap;
h1,
h2,
h3,
h4,
h5 {
&:first-child {
margin-top: 0;
}
}
}
.limited {
font-size: 14px;
color: rgba(var(--center-channel-color-rgb), 0.6);
margin-top: 12px;
}
.footer {
display: flex;
align-items: center;
height: 40px;
margin-top: 16px;
.timestamp_properties {
margin-left: 12px;
max-width: 90%;
.properties {
display: flex;
align-items: center;
white-space: nowrap;
.remainder {
color: rgba(var(--center-channel-color-rgb), 0.48);
font-weight: bold;
font-size: 12px;
}
.post-preview__time {
font-size: 12px;
}
.property {
display: flex;
align-items: center;
border-radius: 4px;
padding: 0 4px;
margin-right: 8px;
overflow: hidden;
text-overflow: ellipsis;
overflow-wrap: normal;
height: 20px;
font-weight: 600;
font-size: 12px;
&.propColorDefault {
background-color: var(--prop-default);
}
&.propColorGray {
background-color: var(--prop-gray);
}
&.propColorBrown {
background-color: var(--prop-brown);
}
&.propColorOrange {
background-color: var(--prop-orange);
}
&.propColorYellow {
background-color: var(--prop-yellow);
}
&.propColorGreen {
background-color: var(--prop-green);
}
&.propColorBlue {
background-color: var(--prop-blue);
}
&.propColorPurple {
background-color: var(--prop-purple);
}
&.propColorPink {
background-color: var(--prop-pink);
}
&.propColorRed {
background-color: var(--prop-red);
}
}
}
}
}
}