CODEWITHSUNDEEP
sasstransform
Josef Lundström
Josef Lundström

Reputation: 197

How to scale another div in SCSS by clicking checkbox (without JavaScript)?

Trying to scale a div in SCSS without using Javascript. I know how to do this in CSS, but I can't get the syntax right in SCSS. How do I do?

When the checkbox is toggled, the external div should transform. I am using transform: scale().

Codepen link.

HTML:

<input type="checkbox" id="toggle" class="toggle" />
<div id="container">
    <label for="toggle" class="nav-toggle-label">
        Toggle me
    </label>
</div>
<div class="responsive">
    <ul class="nav-links">
        <li><a href="#">Link 1</a></li>
        <li><a href="#">Link 2</a></li>
    </ul>
</div>

SCSS:

#container {
    background: lightblue;
    width: 10vw;
    height: 10vh;
    &:checked + .responsive {
        transform: scale(1, 1);
    }
}
.responsive {
    background: orange;
    width: 10vw;
    height: 10vh;
    transform: scale(1, 0);
}

Upvotes: 1

Views: 178

Answers (1)

Anton
Anton

Reputation: 8518

In the css or scss/sass doesn't have bubbling behavior. In your case need to get the element in same level and get it with ~ selector. codepen example

#container {
    background: lightblue;
    width: 10vw;
    height: 10vh;
  }
 .responsive {
    background: orange;
    width: 10vw;
    height: 10vh;
    transform: scale(1, 0);
 }

#toggle:checked ~ .responsive {
  transform: scale(1, 1);
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/sass.js/0.11.1/sass.min.js"></script>

    <input type="checkbox" id="toggle" class="toggle">
    <div id="container">
        <label for="toggle" class="nav-toggle-label">
            Toggle me
        </label>
    </div>
    <div class="responsive">
        <ul class="nav-links">
            <li><a href="#">Link 1</a></li>
            <li><a href="#">Link 2</a></li>
        </ul>
    </div>

Upvotes: 1

Related Questions