Skip to content
Snippets Groups Projects
protected.layout.scss 1.66 KiB
Newer Older
  • Learn to ignore specific revisions
  • Matthias Feyll's avatar
    Matthias Feyll committed
    @import "/src/shared/style/colors.scss";
    
    
    .head-links {
        text-decoration: none;
        color: map-get($theme-colors, dark);
        font-weight: 500;
        margin-right: 20px;
    
        &:hover {
            color: map-get($theme-colors, primary);
            font-weight: 600;
        }
    
        &.active {
            color: map-get($theme-colors, primary);
            font-weight: 600;
        }
    }
    
    
    Matthias Feyll's avatar
    Matthias Feyll committed
    // Add these styles to your protected.layout.scss
    nav {
        border-radius: 0 0 $border-radius $border-radius;
        box-shadow:
            0px 4px 8px mix(map-get($theme-colors, "primary"), map-get($theme-colors, "dark"), 35%),
            0px 2px 4px mix(map-get($theme-colors, "primary"), map-get($theme-colors, "dark"), 20%);
    
        .head-links {
            text-decoration: none;
            color: map-get($theme-colors, "dark");
            padding: 8px 16px;
            margin: 0 4px;
            border-radius: 12px;
            transition: all 0.2s ease;
    
    Matthias Feyll's avatar
    Matthias Feyll committed
            &:hover {
                background-color: map-get($theme-colors, "bg-primary");
            }
    
            &.active {
                color: map-get($theme-colors, "primary");
                background-color: map-get($theme-colors, "primary::hover");
            }
        }
    
        .dropdown-menu {
            border-radius: $border-radius;
            box-shadow:
                0px 4px 8px mix(map-get($theme-colors, "primary"), map-get($theme-colors, "dark"), 35%),
                0px 2px 4px mix(map-get($theme-colors, "primary"), map-get($theme-colors, "dark"), 20%);
            border: none;
            padding: 8px;
    
            .dropdown-item {
                border-radius: 8px;
                padding: 8px 16px;
    
                &:hover {
                    background-color: map-get($theme-colors, "bg-primary");
                }
            }
        }