0

I have the following SASS style definition:

@import "bulma/sass/utilities/initial-variables.sass";

@mixin show-sidebar-responsive($size) {
    display: flex;
    flex-direction: column;
    height: 100%;
    width: $size;
    background-color: #24344b;
}

.sidebar-container {
    transition: width 1s;
    display: none;
}

@media (min-width: $desktop) and (max-width: $widescreen) {
    .sidebar-container {
        @include show-sidebar-responsive(250px);
    }
}

@media (min-width: $widescreen) {
    .sidebar-container {
        @include show-sidebar-responsive(280px);
    }
}

As you can see on the code above, I am using the transition on width on the different screen size. The transition from $desktop to $widescreen works fine but below $desktop does not work, why?

I took the breakpoints from bulma.

What do I forget to define?

softshipper
  • 32,463
  • 51
  • 192
  • 400
  • 1
    `@media (max-width: $desktop)` ? or include for eg. `@include show-sidebar-responsive(100px);` on the default css styles ( not in media q ) – Mihai T Jul 16 '18 at 09:09

1 Answers1

1

When you change display from none to flex transition doesn't apply. On screen sizes below $desktop you can set width to 0 or some other size or use some tricks to hide element, but dont't set display to none.

3rdthemagical
  • 5,271
  • 18
  • 36