Portafolio | TJWeb

CSS en Blade

Publicado

19 MAY, 2025

Categoría

Laravel

Objetivo

Como incluir CSS a una vista blade. CSS en vista blade, lo voy a usar para des-habilitar los a tag de social login que no voy a usar.

Ejemplo

En /home/enrique/Sites/tjwebStartKit/resources/views/auth/login.blade.php

Código:

<!DOCTYPE html>
<html lang="en">

<head>

    ...

    {{-- CSS en vista blade, lo voy a usar para deshabilitar los a tag de social login que no voy a usar --}}
    <style type="text/css">
        a.disabled {
            /* Make the disabled links grayish*/
            color: gray;
            /* And disable the pointer events */
            pointer-events: none;
        } 
    </style>

</head>

<body class="authentication-bg authentication-bg-pattern">
	...
	{{-- Inicia sesión con Redes Sociales --}}
	<div class="text-center">
		<h5 class="mt-3 text-muted">{{ __('Sign in with') }}</h5>
		<ul class="social-list list-inline mt-3 mb-0">

			{{-- Facebook --}}
			<li class="list-inline-item">
				{{-- <a href="#" class="social-list-item border-primary text-primary">
					<i class="mdi mdi-facebook"></i>
				</a> --}}
				<a href="#" class="social-list-item border-muted text-muted disabled">
					<i class="mdi mdi-facebook"></i>
				</a>
			</li>

			{{-- Google --}}
			<li class="list-inline-item">
				<a href="javascript: void(0);" class="social-list-item border-danger text-danger">
					<i class="mdi mdi-google"></i>
				</a>
				{{-- <a href="javascript: void(0);" class="social-list-item border-muted text-muted disabled">
					<i class="mdi mdi-google"></i>
				</a> --}}
			</li>

			{{-- Twitter --}}
			<li class="list-inline-item">
				{{-- <a href="javascript: void(0);" class="social-list-item border-info text-info">
					<i class="mdi mdi-twitter"></i>
				</a> --}}
				<a href="javascript: void(0);" class="social-list-item border-muted text-muted disabled">
					<i class="mdi mdi-twitter"></i>
				</a>
			</li>

			{{-- GitHub --}}
			<li class="list-inline-item">
				{{-- <a href="javascript: void(0);" class="social-list-item border-secondary text-secondary">
					<i class="mdi mdi-github"></i>
				</a> --}}
				<a href="javascript: void(0);" class="social-list-item border-muted text-muted disabled">
					<i class="mdi mdi-github"></i>
				</a>
			</li>

		</ul>
	</div>
	...    
</body>

</html>