/* 
    Library Name  : Display Virtual Grid Bootstrap 
    Version       : 2.2.3
    By            : Rémi Gasnier
    Creation Date : 2023-02-08
    Last Changes  : 2023-02-18
*/

/******************************************************************

/******************************************************************
FR : id facultatif.
A appliquer uniquement sur la classe row lorsqu'il n'y a pas encore 
de balise à l'intérieur pour visualiser les 12 colonnes seules.

EN : id optional.
To be applied only on the row class when there is not yet
tag inside to view the 12 columns alone.
******************************************************************/
#height-row{
    height:300px;
}

#dvgb:checked ~ * #height-row{
    height:initial;
}



/******************************************************************
CLASSES CONTAINER, CONTAINER-FLUID, CONTAINER-* MODIFIEES
******************************************************************/
[class^="container"]{
    background-color: rgba(68, 76, 247, 0.4);
    border: 3px solid #444cf7;
    padding-left: 24px;
    padding-right: 24px;
    position: relative;
}



/******************************************************************
CLASS ROW MODIFIEE
******************************************************************/
.row{
    background:repeating-linear-gradient(90deg, #ffd5d6 0%, #ffd5d6 8.33333333%, #dea0a1 8.33333333%, #dea0a1 16.66666666%);
    border-bottom: 4px solid green;
    border-top: 4px solid green;
    margin-top:  15px;
    margin-bottom:  15px;
    padding-top: 12px;
    padding-bottom: 12px;
    position: relative;
}

.row > *{
    position: relative;
}




/******************************************************************
CLASSES COL, COL-*, COL-*-* MODIFIEES
******************************************************************/
[class^="col"]:not(
.collapse, .collapsing, 
.col-form-label, 
.col-form-label-lg, 
.col-form-label-sm){
    background-color: rgba(255,0,0,0.5);
    border: 1px solid red;
    border-radius: 5px;
    padding-top: 12px ; 
    padding-bottom: 12px ; 
}

[class^="col"]:not(
.collapse, .collapsing, 
.col-form-label, 
.col-form-label-lg, 
.col-form-label-sm) > *{
    background-color: #e5e5f7;
    background-size: 10px 10px;
    background-image: repeating-linear-gradient(45deg, #444cf7 0, #444cf7 1px, #e5e5f7 0, #e5e5f7 50%);
    opacity: 0.8;
    padding: 15px 0;
    position: relative;
}



/******************************************************************
::BEFORE ET ::AFTER
******************************************************************/
[class^="container"]::before{
    content :attr(class);
    background-color: #444cf7;
    top: 0;
    left: 0;
}

.row::after{
    content :attr(class);
    background-color: green;
    top: 0;
    right: 0;
}

.row > *::before{
    content :attr(class);
    background-color: red;
    top: 0;
    left: 0;
}

[class^="col"]:not(
.collapse, .collapsing, 
.col-form-label, 
.col-form-label-lg, 
.col-form-label-sm) > *::after{
    content :attr(class);
    background-color: #888;
    top: 0;
    right: 0;
}

/* common */
[class^="container"]::before,
.row::after, 
.row > *::before, 
[class^="col"]:not(
.collapse, .collapsing, 
.col-form-label, 
.col-form-label-lg, 
.col-form-label-sm) > *::after{
    color: white;
    display: inline-block;
    font-family: Arial, Helvetica, sans-serif;
    font-size: 10px;
    padding: 0px 2px 2px;
    position: absolute;
    z-index: 100;
}



/******************************************************************
BOUTON ON/OFF
******************************************************************/
#dvgb{
    appearance: none;
    background-color: green;
    border-radius: 50px;
    box-shadow: 3px 3px 10px 0 rgba(0,0,0,0.3);
    padding: 8px 20px;
    position: fixed;
    top: 20px;
    left: 20px;
    z-index: 1000;
}

#dvgb:hover{
    cursor: pointer;
}

#dvgb:checked{
    background-color: crimson;
}

#dvgb::before{
    content: "grid on";
    color: white;
    text-transform: uppercase;
}

#dvgb:checked::before{
    content: "grid off";
}



/******************************************************************
SI BOUTON ON/OFF EST CHECKED (OFF) / IF BUTTON ON/OFF IS CHECKED
******************************************************************/
/* container */
#dvgb:checked ~ * [class^="container"]{
    background-color: transparent;
    border: 0;
    padding-left: calc(var(--bs-gutter-x) * .5);
    padding-right: calc(var(--bs-gutter-x) * .5);
    position: static;
}

/* row */
#dvgb:checked ~ * .row{
    background-image: none;
    background-size: auto;
    border-bottom: 0;
    border-top: 0;
    margin-top:  0;
    margin-bottom:  0;
    padding-top: 0;
    padding-bottom: 0;
    position: static;
}

/* col */
#dvgb:checked ~ * [class^="col"]:not(
.collapse, .collapsing, 
.col-form-label, 
.col-form-label-lg, 
.col-form-label-sm){
    background-color: transparent;
    border: 0;
    border-radius: 0;
    padding-top: 0 ; 
    padding-bottom: 0; 
}

#dvgb:checked ~ * [class^="col"]:not(
.collapse, .collapsing, 
.col-form-label, 
.col-form-label-lg, 
.col-form-label-sm) > *{
    background-color: inherit;
    background-size: 0;
    background-image: none;
    opacity: 1;
    padding: 0;
    position: static;
}

/* ::before, ::after */
#dvgb:checked ~ * [class^="container"]::before,
#dvgb:checked ~ * .row::after,
#dvgb:checked ~ * .row > *::before,
#dvgb:checked ~ * [class^="col"]:not(
.collapse, .collapsing, 
.col-form-label, 
.col-form-label-lg, 
.col-form-label-sm) > *::after{
    content :"";
    background-color: transparent;
}