Appearance

Announcement Styles ​

File Information ​

  • Path: app/assets/scss/layout/_announcement.scss
  • Purpose: Styles for announcement component
  • Type: Layout component

Overview ​

The announcement file contains styles for the announcement card component, including unread indicators, hover states, and responsive design.

Key Components ​

.announcements ​

Main announcement container:

  • Display: Flex column
  • Padding: 24px
  • Border radius: 20px
  • Max-width: 100%
  • Box shadow: Medium shadow
  • Overflow: Hidden

Card Title (.v-card-title) ​

  • Display: Flex, space-between
  • Line height: 1.4
  • Gap: 24px
  • Font size: 14px
  • Color: Gray
  • Span: Blue-500, medium weight, hover underline

Card Text (.v-card-text) ​

  • Margin-right: -24px
  • Padding: 0px
  • Height: 100%
  • Overflow: Hidden

Announcement Items (.announcement-items) ​

  • Border: 1px solid border color
  • Border radius: 8px
  • Overflow: Hidden
  • Padding: 0px 16px
  • Min-height: 72px
  • Transition: Smooth
  • Margin-top: 4px (not first child)

Announcement Content (.announcement-content) ​

  • Flex: 1 1
  • Overflow: Hidden

List Item Title (.v-list-item-title) ​

  • Color: Gray
  • Font size: 14px
  • Line height: 1.4
  • Transition: Smooth

List Item Subtitle (.v-list-item-subtitle) ​

  • Color: Gray-900
  • Font size: 12px
  • Line height: 1.4
  • Transition: Smooth

Announcement Read/Unread (.announcement-read-unread) ​

  • Size: 18px × 18px
  • Padding: 0px
  • Border radius: 50%
  • Box shadow: Inset 2px border
  • Background: Transparent
  • Transition: Smooth

Unread State (.unread) ​

  • Background: Lavender-100
  • Hover: Lavender-200 background and border
  • Read indicator: Red-500 background
  • Title/Subtitle: Semibold weight

Responsive Design ​

Tablet (max-width: 1280.98px) ​

  • Announcement items: Min-height 62px

Mobile (max-width: 960.98px) ​

  • Padding: 16px
  • Border radius: 16px
  • Card text margin: -16px
  • Custom scrollbar: Padding-right 12px
  • Card actions: Padding 8px top

States ​

Hover State ​

  • Border color: Blue-700

Unread State ​

  • Background: Lavender-100
  • Hover: Lavender-200
  • Read indicator: Red-500 (filled)
  • Text: Semibold weight