Problem saving Sass - unexpectedly rolling back to an early version

Hi,

I’ve had a gap from Pinegrow for 6 months. Was working on our company theme yesterday and created a lot of Sass… go back to it today and it’s rolled back to an earlier version from the start of the work.

I’ve experienced this many times before in the past (see earlier bug reports from me). But it seems that Pinegrow has regressed to an earlier bug with the saving of Sass.

Please let me know what I need to do in order to help you fix this bug. I’m happy to share my repo.

In the screenshot attached - you’ll see what is appearing in the preview pane is clearly not what is in the sass. The preview represents the work completed at the end of yesterday… the Sass about 5 mins into the development of it.

Fortunately in VS Code I undid the changes to bootstrap.min.css and so at least have the CSS but not the Sass. None of the below got saved in the Sass.

.pd-admin-page-menu-3 {
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
position: relative;
}
.pd-admin-page-menu-3 .pd-admin-page-menu-3-nav-outer {
background-color: red;
width: 0px;
height: 100vh;
-webkit-transition: width 0.4s;
-o-transition: width 0.4s;
transition: width 0.4s;
z-index: 3;
}
@media (max-width: 991px) {
.pd-admin-page-menu-3 .pd-admin-page-menu-3-nav-outer {
position: fixed;
top: 0px;
left: 0px;
width: 0px;
}
}
@media (min-width: 992px) {
.pd-admin-page-menu-3 .pd-admin-page-menu-3-nav-outer {
position: relative;
width: 240px;
}
}
.pd-admin-page-menu-3 .pd-admin-page-menu-3-nav-outer .pd-admin-page-menu-3-nav-inner {
background-color: yellow;
width: 240px;
height: 100vh;
padding: 10px;
-webkit-transition: -webkit-transform 0.4s;
transition: -webkit-transform 0.4s;
-o-transition: transform 0.4s;
transition: transform 0.4s;
transition: transform 0.4s, -webkit-transform 0.4s;
-webkit-transform: translate(-100%);
-ms-transform: translate(-100%);
transform: translate(-100%);
}
@media (max-width: 991px) {
.pd-admin-page-menu-3 .pd-admin-page-menu-3-nav-outer .pd-admin-page-menu-3-nav-inner {
-webkit-transform: translate(-100%);
-ms-transform: translate(-100%);
transform: translate(-100%);
}
}
@media (min-width: 992px) {
.pd-admin-page-menu-3 .pd-admin-page-menu-3-nav-outer .pd-admin-page-menu-3-nav-inner {
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
}
}
.pd-admin-page-menu-3 .pd-admin-page-menu-3-content {
position: relative;
z-index: 1;
-webkit-box-flex: 1;
-ms-flex: 1;
flex: 1;
width: 100%;
background-color: blue;
min-height: 100vh;
}
.pd-admin-page-menu-3 .pd-admin-page-menu-3-content .pd-admin-page-menu-3-header {
height: 60px;
background-color: white;
display: -webkit-box;
display: -ms-flexbox;
display: flex;
-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-ms-flex-direction: row;
flex-direction: row;
-webkit-box-pack: justify;
-ms-flex-pack: justify;
justify-content: space-between;
padding: 10px;
}
.pd-admin-page-menu-3 .pd-admin-page-menu-3-content-overlay {
position: fixed;
width: 100vw;
height: 100vh;
pointer-events: none;
background-color: rgba(0, 0, 0, 0);
-webkit-transition: background-color 0.4s;
-o-transition: background-color 0.4s;
transition: background-color 0.4s;
z-index: 2;
}
.pd-admin-page-menu-3 .pd-admin-page-menu-3-content-overlay .pd-admin-page-menu-3-btn a {
display: inline-block;
cursor: pointer;
}
.pd-admin-page-menu-3.pd-open .pd-admin-page-menu-3-nav-outer {
width: 240px;
}
.pd-admin-page-menu-3.pd-open .pd-admin-page-menu-3-nav-outer .pd-admin-page-menu-3-nav-inner {
-webkit-transform: translate(0);
-ms-transform: translate(0);
transform: translate(0);
}
.pd-admin-page-menu-3.pd-open .pd-admin-page-menu-3-content-overlay {
pointer-events: auto;
background-color: rgba(0, 0, 0, 0.4);
cursor: pointer;
}
.pd-admin-page-menu-3.pd-close .pd-admin-page-menu-3-nav-outer {
width: 0px;
}
.pd-admin-page-menu-3.pd-close .pd-admin-page-menu-3-nav-outer .pd-admin-page-menu-3-nav-inner {
-webkit-transform: translate(-100%);
-ms-transform: translate(-100%);
transform: translate(-100%);
}

I’m on Pinegrow Version 7.92 (7.92).

With best regards,

Tim

This is what was removed… I’ve just pieced it back together from the CSS:

.pd-admin-page-menu-3 {
display: flex;
flex-direction: row;
position: relative;

.pd-admin-page-menu-3-nav-outer {
    background-color: red;
    width: 0px;
    height: 100vh;
    transition: width 0.4s;
    z-index: 3;

    @media (max-width: 991px) {
        position: fixed;
        top: 0px;
        left: 0px;
        width: 0px;
    }

    @media (min-width: 992px) {
        position: relative;
        width: 240px;
    }

    .pd-admin-page-menu-3-nav-inner {
        background-color: yellow;
        width: 240px;
        height: 100vh;
        padding: 10px;
        transition: transform 0.4s;
        transform: translate(-100%);

        @media (max-width: 991px) {
            transform: translate(-100%);
        }

        @media (min-width: 992px) {
            transform: translate(0);
        }

    }
}

.pd-admin-page-menu-3-content {

    position: relative;
    z-index: 1;
    -webkit-box-flex: 1;
    -ms-flex: 1;
    flex: 1;
    width: 100%;
    background-color: blue;
    min-height: 100vh;

    .pd-admin-page-menu-3-header {
        height: 60px;
        background-color: white;
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        padding: 10px;
    }
}

.pd-admin-page-menu-3-content-overlay {

    position: fixed;
    width: 100vw;
    height: 100vh;
    pointer-events: none;
    background-color: rgba(0, 0, 0, 0);
    transition: background-color 0.4s;
    z-index: 2;

}

.pd-admin-page-menu-3-btn {
    a {
        display: inline-block;
        cursor: pointer;
    }
}

}

.pd-admin-page-menu-3.pd-open {

.pd-admin-page-menu-3-nav-outer {
    width: 240px;

    .pd-admin-page-menu-3-nav-inner {
        transform: translate(0);
    }
}

.pd-admin-page-menu-3-content-overlay {
    pointer-events: auto;
    background-color: rgba(0, 0, 0, 0.4);
    cursor: pointer;
}

}

.pd-admin-page-menu-3.pd-close {
.pd-admin-page-menu-3-nav-outer {
width: 0px;

    .pd-admin-page-menu-3-nav-inner {
        transform: translate(-100%);
    }
}

}

And can I also ask, when coding inside Sass the code editor doesn’t show any of the helper guides… i.e. when a class opens and closes if you select the opening bracket.

It used to… it’s really useful to have.

Thanks, Tim