{{!-- <div class="icon-container dp-n vis-md-visible">
  <div class="scroll-icon">
    <div class="scroll-icon-wheel">
    </div>
  </div>
</div> --}}
/* No context defined for this component. */
  • Content:
    $mouse_color: $white;
    $mouse_width: 27px;
    $mouse_height: 41px;
    $border_width: 2px;
    $wheel_size: $border_width * 2.5;
    
    @mixin keyframes($animationName) {
      @-webkit-keyframes #{$animationName} {
        @content;
      }
    
      @-moz-keyframes #{$animationName} {
        @content;
      }
    
      @-o-keyframes #{$animationName} {
        @content;
      }
    
      @keyframes #{$animationName} {
        @content;
      }
    }
    
    @mixin animation($animations) {
      -webkit-animation: $animations;
      -moz-animation: $animations;
      -o-animation: $animations;
      animation: $animations;
    }
    
    @include keyframes(mouse-scroll) {
      0% {
        top: 70%;
        opacity: 1;
      }
    
      80% {
        opacity: 1;
      }
    
      100% {
        top: 30%;
        opacity: 0;
      }
    }
    
    .icon-container {
    
      position: absolute;
      bottom: 50px;
    
      .scroll-icon {
        position: relative;
        display: flex;
        justify-content: center;
        width: $mouse_width;
        height: $mouse_height;
        border-radius: 26.5px;
        border: $border_width solid $mouse_color;
    
        .scroll-icon-wheel {
          position: absolute;
          width: $wheel_size;
          height: $wheel_size;
          border-radius: 50%;
          background-color: $mouse_color;
          @include animation(mouse-scroll 1s infinite);
        }
      }
    }
  • URL: /components/raw/scroll-icon/scroll-icon.scss
  • Filesystem Path: structures/02-molecules/scroll-icon/scroll-icon.scss
  • Size: 1.2 KB

There are no notes for this item.