url.scss

TLDR

The url.scss file contains styles for a URL property, including its link and associated icon button.

Classes

URLProperty

This class defines the styles for a URL property. It includes the following properties:

• display: flex;: Makes the element a flex container.
• align-items: center;: Aligns the children of the container vertically.
• overflow: hidden;: Hides any content that exceeds the element's boundaries.
• width: 100%;: Sets the width of the element to 100%.

Additionally, the .URLProperty class contains nested selectors:

• .link: Styles the link within the URL property. It has the following properties:

  • flex: 1 1 auto;: Allows the link to grow and shrink as needed.
  • padding-left: 1px;: Adds left padding to the link.
  • margin-right: 4px;: Adds right margin to the link.
  • white-space: nowrap;: Prevents line breaks within the link.
  • overflow: hidden;: Hides any content within the link that exceeds its boundaries.
  • color: rgb(var(--center-channel-color-rgb));: Sets the color of the link.
  • text-overflow: ellipsis;: Truncates the link text with an ellipsis.
  • text-decoration: underline rgb(var(--center-channel-color-rgb), 0.5);: Adds an underline to the link with a transparent color.

• .link:hover: Styles the link when hovered over. It has the following properties:

  • background-color: rgb(var(--center-channel-color-rgb), 0.1);: Sets a background color with a slight transparency.

• .IconButton: Styles the icon button within the URL property. It has the following properties:

  • display: none;: Hides the icon button by default.
  • margin: 0 0 0 4px;: Adds margin around the icon button.
  • flex: 0 0 24px;: Sets a fixed width for the icon button.

• .IconButton:hover: Styles the icon button when hovered over. It has the following properties:

  • background-color: rgb(var(--center-channel-color-rgb), 0.1);: Sets a background color with a slight transparency.

• &:hover: Styles the URL property when hovered over. It contains the following properties:

  • .IconButton: Makes the icon button visible when the URL property is being hovered over.

Additional Selector

#focalboard-app .URLProperty .link:visited

This selector specifically targets visited links within the .URLProperty class when used within the #focalboard-app element. It sets the color of visited links to the same color as the center channel.

.URLProperty {
    display: flex;
    align-items: center;
    overflow: hidden;
    width: 100%;

    .link {
        flex: 1 1 auto;
        padding-left: 1px;
        margin-right: 4px;
        white-space: nowrap;
        overflow: hidden;
        color: rgb(var(--center-channel-color-rgb));
        text-overflow: ellipsis;
        text-decoration: underline rgb(var(--center-channel-color-rgb), 0.5);
    }

    .link:hover {
        background-color: rgb(var(--center-channel-color-rgb), 0.1);
    }

    .IconButton {
        display: none;
        margin: 0 0 0 4px;
        flex: 0 0 24px;

        &:hover {
            background-color: rgb(var(--center-channel-color-rgb), 0.1);
        }
    }

    &:hover {
        .IconButton {
            display: flex;
        }
    }
}

#focalboard-app .URLProperty .link:visited {
    color: rgb(var(--center-channel-color-rgb));
}