borbad.s5l.ru/vue/app/shared/AppLink/index.styl

// Стили для компонента AppLink

.app-link
  // Базовые стили ссылки
  color: #3B82F6
  text-decoration: none
  cursor: pointer
  transition: all 0.2s ease-in-out
  
  // Состояния hover
  &:hover
    color: #2563EB
    text-decoration: underline
  
  // Состояния focus для доступности
  &:focus
    outline: 2px solid #3B82F6
    outline-offset: 2px
    border-radius: 4px
  
  // Активное состояние для router-link
  &.app-link--active
    color: #1D4ED8
    font-weight: 600
    
    &:hover
      color: #1E40AF
  
  // Варианты для разных типов ссылок
  &--external
    &::after
      content: " ↗"
      font-size: 0.8em
      opacity: 0.7
  
  &--internal
    // Специфичные стили для внутренних ссылок
  
  // Размеры
  &--sm
    font-size: 0.875rem
    padding: 0.25rem 0.5rem
  
  &--md
    font-size: 1rem
    padding: 0.5rem 1rem
  
  &--lg
    font-size: 1.125rem
    padding: 0.75rem 1.5rem
  
  // Варианты
  &--primary
    background-color: #3B82F6
    color: white
    border-radius: 6px
    
    &:hover
      background-color: #2563EB
      text-decoration: none
      color: white
    
    &.app-link--active
      background-color: #1D4ED8
  
  &--secondary
    background-color: transparent
    color: #3B82F6
    border: 1px solid #3B82F6
    border-radius: 6px
    
    &:hover
      background-color: #3B82F6
      color: white
      text-decoration: none
  
  &--text
    background-color: transparent
    color: #3B82F6
    
    &:hover
      background-color: transparent
      text-decoration: underline
  
  // Темная тема
  @media (prefers-color-scheme: dark)
    .dark &
      color: #60A5FA
      
      &:hover
        color: #93C5FD
      
      &.app-link--active
        color: #93C5FD
      
      &--primary
        background-color: #1E40AF
        color: white
        
        &:hover
          background-color: #1E3A8A
      
      &--secondary
        color: #60A5FA
        border-color: #60A5FA
        
        &:hover
          background-color: #60A5FA
          color: #1F2937

// Утилитарные классы для использования с AppLink
.no-underline
  text-decoration: none !important
  
  &:hover
    text-decoration: none !important

.underline-on-hover
  text-decoration: none !important
  
  &:hover
    text-decoration: underline !important