//Definir previamente las variables que serán usadas en el @import de bootstrap
// Grid breakpoints
//
// Define the minimum dimensions at which your layout will change,
// adapting to different screen sizes, for use in media queries.
 $grid-breakpoints: (
   xxs: 0px,
   xs: 321px,
   sm: 576px,
   md: 768px,
   lg: 992px,
   xl: 1200px,
   xxl: 1440px
 ); //Tener en cuenta que NO LLEVA la palabra reservada !default porque es una variable que predominará sobre la que se defina en "bootstrap" (https://robots.thoughtbot.com/sass-default)

 // Grid containers
 //
 // Define the maximum width of .container for different screen sizes.
$container-max-widths: (
xs: 321px,
sm: 540px,
md: 720px,
lg: 960px,
xl: 1140px,
xxl: 1390px
); //Tener en cuenta que NO LLEVA la palabra reservada !default porque es una variable que predominará sobre la que se defina en "bootstrap" (https://robots.thoughtbot.com/sass-default)
//Importar bootstrap
@import "node_modules/bootstrap/scss/bootstrap";

//Mi código personalizado - overrides
body
{
.....
}

/**
 * Mediaqueries para BS4: https://github.com/JacobLett/IfBreakpoint/blob/master/if-b4-breakpoint.js
 */

// Create global variables that can be used elsewhere

// set variables  
var bs4xxs;
var bs4xs;
var bs4sm;
var bs4md;
var bs4lg;
var bs4xl;
var bs4xxl;
var bs4breakpoint;

// Checks if the span is set to display lock via CSS
function bs4checkIfBlock (target) {
	var target = $(target).css('display') == 'block';
	return target;
}

// function to check the sizes
function bs4checkSize (){
  // Set some variables to use with the if checks below
  bs4xxs = bs4checkIfBlock('.breakpoint-check .xxs');
  bs4xs = bs4checkIfBlock('.breakpoint-check .xs');
  bs4sm = bs4checkIfBlock('.breakpoint-check .sm');
  bs4md = bs4checkIfBlock('.breakpoint-check .md');
  bs4lg = bs4checkIfBlock('.breakpoint-check .lg');
  bs4xl = bs4checkIfBlock('.breakpoint-check .xl');
  bs4xxl = bs4checkIfBlock('.breakpoint-check .xxl');

  var todasClases = 'xxs xs sm md lg xl xxl';

	// add the breakpoint to the console
	if( bs4xxs == true) {
		bs4breakpoint = "xxs";
	} 

	if( bs4xs == true) {
		bs4breakpoint = "xs";
	} 

	if( bs4sm == true) {
		bs4breakpoint = "sm";
	} 

	if( bs4md == true) {
		bs4breakpoint = "md";
	} 

	if( bs4lg == true) {
		bs4breakpoint = "lg";
	} 

	if( bs4xl == true) {
		bs4breakpoint = "xl";
	} 

	if( bs4xxl == true) {
		bs4breakpoint = "xxl";
	} 
	console.log("bs4breakpoint",bs4breakpoint);
	$("body").removeClass(todasClases).addClass( bs4breakpoint );

} 
// end check size

$(document).ready(function(){
 	// Add some invisible elements with Bootstrap CSS visibile utility classes
 	$( "body" ).append( 
 		"<div style='none;' class='breakpoint-check'>"
 		+"<span class='xxs d-block d-xs-inline'>XXS&nbsp</span>"
 		+"<span class='xs d-xs-block d-sm-inline'>XS&nbsp</span>"
 		+"<span class='sm d-sm-block d-md-inline'>SM&nbsp</span>"
 		+"<span class='md d-md-block d-lg-inline'>MD&nbsp</span>"
 		+"<span class='lg d-lg-block d-xl-inline'>LG&nbsp</span>"
 		+"<span class='xl d-xl-block d-xxl-inline'>XL&nbsp</span>"
 		+"<span class='xxl d-xxl-block'>XXL</span>"
 		+"</div>"
 		);

 	bs4checkSize();

 });

// Reload demo on  window resize
$( window ).resize( function(){
	bs4checkSize();
});