CODEWITHSUNDEEP
phpcsslaravellaravel-blade
Jalen
Jalen

Reputation: 97

Correct blade syntax within css rules

I'm trying to set a linear gradient to a color that comes from the database. I'm doing this by using the blade syntax. For some reason the code below is working but it's messing up code highlighting in VS Code and it seems like I'm not using the correct syntax. (even though it does work)

This is the code:


<head>
    <link rel="stylesheet" href="{{ URL::asset('css/style.css') }} " />
    <style>
    .bg-home{
        /* messes up vscode highlighting but code is valid!! */
    background: linear-gradient(-45deg, {{Auth::user()->company_color ?? "#0000ff"}}, #00000080);
    background-size: 400% 400%;
    -webkit-animation: Gradient 15s ease infinite;
    -moz-animation: Gradient 15s ease infinite;
    animation: Gradient 15s ease infinite;
  }
    </style>
</head>

<div class="container-fluid h-100 bg-home d-flex flex-column align-items-center justify-content-center">
    @if (session()->has('message'))
    <div class="alert alert-success">
        {{ session()->get('message') }}
    </div>
@endif

    <x-application-logo class="mb-5" style="max-height: 150px; max-width: 450px"/>
    <a href="{{ route('checkin') }}" class="btn-home" style="background: {{Auth::user()->company_color ?? "#0000ff"}}">
        <span class="ml-3">Visitor in</span></a>
    <a href="{{ route('activity') }}" class="btn-home" style="background: {{Auth::user()->company_color ?? "#0000ff"}}">
        Employee in</a>
    <a href="{{ route('attendees') }}" class="btn-home" style="background: {{Auth::user()->company_color ?? "#0000ff"}}">On site</a>

</div>

Maybe someone can spot the mistake I made here.

This is how vs code reacts: enter image description here

I expected visual studio code to continue code highlighting after entering the code. Instead vs code does not recognize the syntax.

Upvotes: 1

Views: 128

Answers (1)

N69S
N69S

Reputation: 17216

You can try another syntax to avoid putting blade inside a css function

<head>
    <link rel="stylesheet" href="{{ URL::asset('css/style.css') }} " />
    <style>
        :root {
            --main-bg-color: {{Auth::user()->company_color ?? "#0000ff"}};
        }
        .bg-home{
            background: linear-gradient(-45deg, var(--main-bg-color), #00000080);
            background-size: 400% 400%;
            -webkit-animation: Gradient 15s ease infinite;
            -moz-animation: Gradient 15s ease infinite;
            animation: Gradient 15s ease infinite;
        }
        .bg-link{
            background: var(--main-bg-color);
        }
    </style>
</head>

<div class="container-fluid h-100 bg-home d-flex flex-column align-items-center justify-content-center">
    @if (session()->has('message'))
        <div class="alert alert-success">
            {{ session()->get('message') }}
        </div>
    @endif

    <x-application-logo class="mb-5" style="max-height: 150px; max-width: 450px"/>
    <a href="{{ route('checkin') }}" class="btn-home bg-link">
        <span class="ml-3">Visitor in</span>
    </a>
    <a href="{{ route('activity') }}" class="btn-home bg-link">Employee in</a>
    <a href="{{ route('attendees') }}" class="btn-home bg-link">On site</a>

</div>

Upvotes: 1

Related Questions