app/template/default/Block/FLOATING_BANNER.twig line 1

Open in your IDE?
  1. <div class="floating__banner">
  2.   <label for="sns_modal" class="jp">商品に関するお問合せはこちら</label>
  3.   <label for="sns_modal" class="en">CONTACT US</label>
  4.   <ul class="">
  5.     <input type="checkbox" id="sns_modal">
  6.     <li>
  7.         <a href="https://lin.ee/nScYUPv">
  8.             <img src="/html/user_data/assets/img/common/line.png" alt="" />
  9.         </a>
  10.     </li>
  11.     <li>
  12.         <a href="https://wa.me/message/B43VTRL37ZNAL1">
  13.             <img src="/html/user_data/assets/img/common/whatsapp.png" alt="" />
  14.         </a>
  15.     </li>
  16.   </ul>
  17. </div>
  19. <style>
  20. .floating__banner {
  21.   position: fixed;
  22.   right: 0;
  23.   bottom: 15vh;
  24.   font-size: 1.25rem;
  25.   z-index: 999;
  26. }
  27. .floating__banner label {
  28.   font-size: 2em;
  29.   text-align: right;
  30.   font-weight: bold;
  31.   writing-mode: vertical-rl;
  32.   background: #1a1a1a;
  33.   padding: 1em 0.65em;
  34.   border-top: 1px solid #999;
  35.   border-left: 1px solid #999;
  36.   border-bottom: 1px solid #999;
  37.   border-radius: 1em 0 0 1em;
  38.   color: #fff;
  39. }
  40. .floating__banner label.jp {
  41.   font-size: 1em;
  42.   padding: 1em 2em;
  43. }
  44. .floating__banner ul {
  45.   display: flex;
  46.   flex-direction: column;
  47.   justify-content: center;
  48.   align-items: center;
  49.   transform: translateX(101%);
  50. }
  51. .floating__banner ul input{
  52.   display: none;
  53. }
  54. .floating__banner ul li {
  55.   width: 5em;
  56.   margin-top: 1em;
  57. }
  58. .floating__banner ul li a {
  59.   display: block;
  60. }
  61. .floating__banner ul li a img {
  62.   width: 100%;
  63. }
  64. .floating__banner ul:has(:checked) {
  65.   transform: translateX(0);
  66.   transition: all 0.3s ease-in-out;
  67. }
  69. @media screen and (max-width: 767px) {
  70.   .floating__banner {
  71.     bottom: 5vh;
  72.     font-size: 1rem;
  73.   }
  74. }
  77. .floating__banner label{
  78.     transform: translateY(-5px);
  79.     box-shadow: 0px 0px 0px rgba(0,0,0,0.4);
  80.   position:relative;
  81.   -webkit-touch-callout: none;
  82.     -webkit-user-select: none;
  83.      -khtml-user-select: none;
  84.        -moz-user-select: none;
  85.         -ms-user-select: none;
  86.             user-select: none;
  87.         -webkit-tap-highlight-color: transparent;
  88. }
  90. .floating__banner label.show:after {
  91.     content: '';
  92.     position: absolute;
  93.   top:50%;
  94.     transform: translateX(-5em) translateY(-5em);
  95.     width: 1.5em;
  96.     height: 1.5em;
  97.     border-radius: 50%;
  98.     box-shadow: 0px 0px 20px #ffc421, 0px 0px 30px #ffc421, inset 0px 0px 10px #ffc421;
  99.     animation: spin 1.75s infinite linear;
  100. }
  102. .floating__banner label:has(:checked) {
  103.     transform: translateY(0);
  104.     box-shadow: 0px 10px 10px rgba(0,0,0,0.4);
  105.     transition: 500ms;
  106. }
  108. .floating__banner label.show:has(:checked):after {
  109.     background: transparent;
  110.     box-shadow: 0px 0px 50px transparent;
  111.     transition: 500ms;
  112.   animation:unset;
  113. }
  115. @keyframes spin{
  116.     25%{transform: translateX(-5.5em) translateY(5em);
  117.             width: 1em;
  118.             height: 1em;}
  119.     50% {transform: translateX(-5em) translateY(0);
  120.             width: 0.3em;
  121.             height: 0.3em;}
  122.     75% {transform: translateX(-4.5em) translateY(-5em);
  123.             width: 1em;
  124.             height: 1em;}
  125. }
  127. </style>