0

I am aware that the initial question is answered several times. Usually I know how to do it, so its more a bug fixing question instead of a general question. The code shows a cross which behaves as a toggle. If clicked another 3 elements appear, where the one on the middle gives me headache. I used a fontAwesome icon and can´t figure out why it will not center in this div element.

I am summon a CSS master which could solve my bug. ;)

  <!-- fontawesome stylesheet https://fontawesome.com/ -->
  <script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>


<style>
html {
    margin: auto;
    width: 50%;
}
.modal-setting-toggle {
    position: relative;
    margin-top: 10px;
    width:40px;
    height: 40px;
    border-radius: 10px;
    background: #ecf0f3;
    cursor: pointer;
    box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
  }

  .modal-setting-toggle::before, .modal-setting-toggle::after {
    content: "";
    background: #c3c2c7;
    border-radius: 5px;
    width: 20px;
    height: 5px;
    position: absolute;
    left: 10px;
    top: 18px;
    transition: 0.2s ease;
    z-index: 1;
  }
  .modal-setting-toggle::before {
    transform: rotate(0deg);
  }
  
  .modal-setting-toggle::after {
    transform: rotate(-90deg);
  }

  .modal-setting-toggle:hover::before {
    transform: rotate(0deg);
    background-color: #3498db;
  }

  .modal-setting-toggle:hover::after {
    transform: rotate(-90deg);
    background-color: #3498db;
  }
  
  .modal-setting-toggle.open::before {
    transform: rotate(45deg);
    background-color: #3498db;
  }
  .modal-setting-toggle.open::after {
    transform: rotate(-45deg);
    background-color: #3498db;
  }
  .modal-setting-toggle.open .modal-setting-button {
    opacity: 1;
    pointer-events: auto;
  }
  .modal-setting-toggle.open .modal-setting-button:first-of-type {
    bottom: -50px;
    background: url("https://bassets.github.io/cam.svg") no-repeat 50%/50% #ecf0f3;
  }
  .modal-setting-toggle.open .modal-setting-button:nth-of-type(2) {
    bottom: -100px;
    background: #ecf0f3;
    justify-content: center;
    align-items: center;
    text-align: center;
    transition-delay: 0.05s;
  }
  .modal-setting-toggle.open .modal-setting-button:last-of-type {
    bottom: -150px;
    background: url("https://bassets.github.io/music.svg") no-repeat 50% 45%/50% 45% #ecf0f3;
    transition-delay: 0.1s;
  }
  
  .modal-setting-button {
    width: 40px;
    height: 40px;
    border-radius: 10px;
    cursor: pointer;
    background: #ecf0f3;
    position: absolute;
    opacity: 0;
    pointer-events: none;
    box-shadow: inherit;
    transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), 0.2s ease opacity, 0.2s cubic-bezier(0.08, 0.82, 0.17, 1) transform;
  }
  .modal-setting-button:hover {
    transform: scale(1.1);
  }

</style>

<section id="modal-setting" class="modal box-shadow">
        <div style="float: right" class="modal-setting-toggle" onclick="this.classList.toggle('open')">
            <div class="modal-setting-button"></div>
            <div class="modal-setting-button"><i class="fas fa-link"></i></div>
            <div class="modal-setting-button"></div>
        </div>
</section>
ICoded
  • 319
  • 3
  • 18

1 Answers1

1

Add display: flex to .modal-setting-toggle.open .modal-setting-button:nth-of-type(2) to make use of the align-items: center property.

html {
  margin: auto;
  width: 50%;
}

.modal-setting-toggle {
  position: relative;
  margin-top: 10px;
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: #ecf0f3;
  cursor: pointer;
  box-shadow: 6px 6px 10px rgba(0, 0, 0, 0.1), -6px -6px 10px white;
}

.modal-setting-toggle::before,
.modal-setting-toggle::after {
  content: "";
  background: #c3c2c7;
  border-radius: 5px;
  width: 20px;
  height: 5px;
  position: absolute;
  left: 10px;
  top: 18px;
  transition: 0.2s ease;
  z-index: 1;
}

.modal-setting-toggle::before {
  transform: rotate(0deg);
}

.modal-setting-toggle::after {
  transform: rotate(-90deg);
}

.modal-setting-toggle:hover::before {
  transform: rotate(0deg);
  background-color: #3498db;
}

.modal-setting-toggle:hover::after {
  transform: rotate(-90deg);
  background-color: #3498db;
}

.modal-setting-toggle.open::before {
  transform: rotate(45deg);
  background-color: #3498db;
}

.modal-setting-toggle.open::after {
  transform: rotate(-45deg);
  background-color: #3498db;
}

.modal-setting-toggle.open .modal-setting-button {
  opacity: 1;
  pointer-events: auto;
}

.modal-setting-toggle.open .modal-setting-button:first-of-type {
  bottom: -50px;
  background: url("https://bassets.github.io/cam.svg") no-repeat 50%/50% #ecf0f3;
}

.modal-setting-toggle.open .modal-setting-button:nth-of-type(2) {
  bottom: -100px;
  background: #ecf0f3;
  justify-content: center;
  align-items: center;
  text-align: center;
  transition-delay: 0.05s;
  display: flex; /* ADD THIS */
}

.modal-setting-toggle.open .modal-setting-button:last-of-type {
  bottom: -150px;
  background: url("https://bassets.github.io/music.svg") no-repeat 50% 45%/50% 45% #ecf0f3;
  transition-delay: 0.1s;
}

.modal-setting-button {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  background: #ecf0f3;
  position: absolute;
  opacity: 0;
  pointer-events: none;
  box-shadow: inherit;
  transition: 0.2s cubic-bezier(0.18, 0.89, 0.32, 1.28), 0.2s ease opacity, 0.2s cubic-bezier(0.08, 0.82, 0.17, 1) transform;
}

.modal-setting-button:hover {
  transform: scale(1.1);
}
<script src="https://kit.fontawesome.com/39094309d6.js" crossorigin="anonymous"></script>


<section id="modal-setting" class="modal box-shadow">
  <div style="float: right" class="modal-setting-toggle" onclick="this.classList.toggle('open')">
    <div class="modal-setting-button"></div>
    <div class="modal-setting-button"><i class="fas fa-link"></i></div>
    <div class="modal-setting-button"></div>
  </div>
</section>
Debsmita Paul
  • 1,442
  • 9
  • 22