bar.css

TLDR

This CSS file provides styles for a notification bar that can be displayed at the top of a web page. It includes styles for the notification bar container, its content, links, and closing button.

Classes

.notification-bar

This class represents the container for the notification bar. It has the following styles applied:

• text-align: center - centers the content horizontally
• display: flex - sets the container as a flex container
• width: 100% - sets the width of the container to 100% of its parent element
• align-items: center - aligns the content vertically at the center
• justify-content: center - aligns the content horizontally at the center
• height: 64px - sets the height of the container to 64 pixels
• white-space: nowrap - prevents wrapping of text within the container
• background-image - sets a linear gradient background image from top-left (#f0f6ff) to top-right (#d7e7ff)
• position: fixed - fixes the position of the container in the viewport
• z-index: 6 - sets the z-index of the container

.notification-bar.closed

This class represents a closed notification bar. It has the display: none style applied, effectively hiding it.

.notification-bar__content

This class represents the content of the notification bar. It has the following styles applied:

• padding: 2rem 2.4rem - sets the top and bottom padding to 2 rem and the left and right padding to 2.4 rem
• width: 1080px - sets the width of the content to 1080 pixels
• font-size: 16px - sets the font size to 16 pixels
• font-weight: bold - sets the font weight to bold
• line-height: 1.4 - sets the line height to 1.4

.notification-bar a

This selector targets the links within the notification bar. It has the following style applied:

• color: #0058cc - sets the color of the links to a blue shade (#0058cc)

.notification-bar__close

This class represents the close button of the notification bar. It has the following styles applied:

• font-size: 36px - sets the font size to 36 pixels
• font-weight: 300 - sets the font weight to 300
• position: absolute - positions the element relative to its nearest positioned ancestor
• cursor: pointer - changes the cursor to a pointer when hovering over the element
• right: 0px - positions the element at the right edge of its containing element
• opacity: .3 - sets the opacity to 0.3
• top: 0 - positions the element at the top edge of its containing element
• width: 64px - sets the width of the element to 64 pixels
• line-height: 64px - sets the line height of the element to 64 pixels

.notification-bar-hide:hover

This selector targets the notification bar when hovered over. It has the following style applied:

• opacity: .5 - sets the opacity to 0.5 when the notification bar is hovered over

.notification-bar {
    text-align: center;
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: center;
    height: 64px;
    white-space: nowrap;
    background-image: -webkit-gradient(linear,left top,right top,from(#f0f6ff),to(#d7e7ff));
    background-image: linear-gradient(90deg,#f0f6ff 0,#d7e7ff 100%);
    position: fixed;
    z-index: 6;
}

.notification-bar.closed {
    display: none;
}

.notification-bar__content {
    padding: 2rem 2.4rem;
    width: 1080px;
    font-size: 16px;
    font-weight: bold;
    line-height: 1.4;
}

.notification-bar a {
    color: #0058cc;
}

.notification-bar__close {
    font-size: 36px;
    font-weight: 300;
    position: absolute;
    cursor: pointer;
    right: 0px;
    opacity: .3;
    top: 0;
    width: 64px;
    line-height: 64px;
}

.notification-bar-hide:hover {
    opacity: .5;
}