github.com/mithrandie/csvq@v1.18.1/docs/_sass/components/_tapTarget.scss (about)

     1  .tap-target-wrapper {
     2    width: 800px;
     3    height: 800px;
     4    position: fixed;
     5    z-index: 1000;
     6    visibility: hidden;
     7    transition: visibility 0s .3s;
     8  }
     9  
    10  .tap-target-wrapper.open {
    11    visibility: visible;
    12    transition: visibility 0s;
    13  
    14    .tap-target {
    15      transform: scale(1);
    16      opacity: .95;
    17      transition:
    18        transform .3s cubic-bezier(.42,0,.58,1),
    19        opacity .3s cubic-bezier(.42,0,.58,1);
    20    }
    21  
    22    .tap-target-wave::before {
    23      transform: scale(1);
    24    }
    25    .tap-target-wave::after {
    26      visibility: visible;
    27      animation: pulse-animation 1s cubic-bezier(0.24, 0, 0.38, 1) infinite;
    28      transition:
    29        opacity .3s,
    30        transform .3s,
    31        visibility 0s 1s;
    32    }
    33  }
    34  
    35  .tap-target {
    36    position: absolute;
    37    font-size: 1rem;
    38    border-radius: 50%;
    39    background-color: $primary-color;
    40    box-shadow: 0 20px 20px 0 rgba(0,0,0,0.14), 0 10px 50px 0 rgba(0,0,0,0.12), 0 30px 10px -20px rgba(0,0,0,0.2);
    41    width: 100%;
    42    height: 100%;
    43    opacity: 0;
    44    transform: scale(0);
    45    transition:
    46      transform .3s cubic-bezier(.42,0,.58,1),
    47      opacity .3s cubic-bezier(.42,0,.58,1);
    48  }
    49  
    50  .tap-target-content {
    51    position: relative;
    52    display: table-cell;
    53  }
    54  
    55  .tap-target-wave {
    56    &::before,
    57    &::after {
    58      content: '';
    59      display: block;
    60      position: absolute;
    61      width: 100%;
    62      height: 100%;
    63      border-radius: 50%;
    64      background-color: #ffffff;
    65    }
    66    &::before {
    67      transform: scale(0);
    68      transition: transform .3s;
    69    }
    70    &::after {
    71      visibility: hidden;
    72      transition:
    73        opacity .3s,
    74        transform .3s,
    75        visibility 0s;
    76      z-index: -1;
    77    }
    78  
    79    position: absolute;
    80    border-radius: 50%;
    81    z-index: 10001;
    82  }
    83  
    84  .tap-target-origin {
    85    &:not(.btn),
    86    &:not(.btn):hover {
    87      background: none;
    88    }
    89  
    90    top: 50%;
    91    left: 50%;
    92    transform: translate(-50%,-50%);
    93  
    94    z-index: 10002;
    95    position: absolute !important;
    96  }
    97  
    98  @media only screen and (max-width: 600px) {
    99    .tap-target, .tap-target-wrapper {
   100      width: 600px;
   101      height: 600px;
   102    }
   103  }