Setting width of super ancestor in SASS

Question

So what I trying to do is set the width of the navbar-vertical class from within the input[type=checkbox] and input[type=checkbox]:checked, but it's just not having any effect. I want to have a width for the normal state and the checked state for navbar-vertical class. Any help please?

.navbar-vertical {
    font-size: 1.2rem;
    .nav-item {
        &.nav-item-hamburger {
            label {
                cursor: pointer;
                input[type=checkbox] {
                    +i:before {
                        content: "\f0c9";
                    }
                    &:checked {
                        +i:before {
                            content: "\f00d";
                        }
                    }
                }
            }
        }
    }
}

Here is the full example in Codepen.

Can you post your full code in JSBin, codepen or something like that so we can see it action. — Zvezdas1989, Jan 12 '18 at 09:51
What if I hoist the checkbox outside the `nav`, I guess then it'll be doable right? — Soham Dasgupta, Jan 12 '18 at 10:15
@SohamDasgupta it might be possible if you made the checkbox and nav a sibling element. But that would not be a Best Practice. The more appropriate solution would be to use jQuery or JavaScript. — K.Shrestha, Jan 12 '18 at 10:18
I was looking for a JavaScript agnostic solution. Hmmm. Thanks anyway. — Soham Dasgupta, Jan 12 '18 at 10:18
I do disagree with @SohamDasgupta here. I think anything that can be achieved by CSS instead of JS should also be done in CSS. So go ahead and restructure your markup and use the `:checked` approach. — connexo, Jan 12 '18 at 11:25
@connexo I already hoisted the checkbox outside of the `nav` and everything works awesome. Thanks! — Soham Dasgupta, Jan 12 '18 at 16:34

Ruslan · Accepted Answer · 2018-01-12T12:29:21.467

Try to change the width of the i element when the input is checked. Something like this:

.navbar-vertical {
  font-size: 1.2rem;
  .nav-item {
    &.nav-item-hamburger {
      label {
        cursor: pointer;
        input[type="checkbox"] {
          + i:before {
            content: "\f0c9";
          }
          &:checked {
            + i {
              margin-left: 5px;
              margin-right: 200px;
              text-align: left;
              &:before {
                content: "\f00d";
              }
            }
          }
        }
      }
    }
  }
}

Codepen

.navbar-vertical {
  font-size: 1.2rem;
}
.navbar-vertical .nav-item.nav-item-hamburger label {
  cursor: pointer;
}
.navbar-vertical .nav-item.nav-item-hamburger label input[type="checkbox"] + i:before {
  content: "\f0c9";
}
.navbar-vertical .nav-item.nav-item-hamburger label input[type="checkbox"]:checked + i {
  margin-left: 5px;
  margin-right: 200px;
  text-align: left;
}
.navbar-vertical .nav-item.nav-item-hamburger label input[type="checkbox"]:checked + i:before {
  content: "\f00d";
}

.user-profile .user-profile-image {
  grid-area: img;
  height: 1rem;
  clip-path: circle(50% at 50% 50%);
  margin-left: 1rem;
  min-height: 3rem;
}

.h-100vh {
  height: 100vh;
}

.w-100vw {
  width: 100vw;
}

.flex-grow-1 {
  flex-grow: 1;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.css" rel="stylesheet"/>
<link href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap.css" rel="stylesheet"/>
<div class="d-flex h-100vh">
  <nav class="navbar navbar-dark bg-primary navbar-vertical h-100vh justify-content-center">
    <ul class="navbar-nav align-self-start">
      <li class="nav-item nav-item-hamburger">
        <label class="nav-link m-0">
                    <input class="d-none" type="checkbox" />
                    <i class="fa fa-fw"></i>
                </label>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <i class="fa fa-dashboard fa-fw"></i>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <i class="fa fa-envelope fa-fw"></i>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <i class="fa fa-bell fa-fw"></i>
        </a>
      </li>
      <li class="nav-item">
        <a href="#" class="nav-link">
          <i class="fa fa-gear fa-fw"></i>
        </a>
      </li>
    </ul>
  </nav>
  <div class="d-flex flex-column flex-grow-1 h-100vh bg-secondary">

  </div>
</div>

Surely now I believe that there is always a way. You just have to know how. — Soham Dasgupta, Jan 12 '18 at 16:32
Well, this is a good example for a workaround. This implicitly changes the (dynamic) width of the parent - and implicit change is change, too! Well done. — connexo, Jan 12 '18 at 16:38

Setting width of super ancestor in SASS

1 Answers1