@chat21/chat21-ionic 3.0.5-9.2 → 3.0.6-2.3

package/src/app/components/project-item/project-item.component.html

@@ -7,140 +7,163 @@
       <!-- *ngIf="!showSpinner" -->
       <div class="left-sidebar-project" style="margin-right: -10px;">
 
-        <!-- *ngFor="let project of projects; let i = index" -->
-        <div style="cursor:pointer">
-          <!-- (click)='goToUnservedRequests(project?.id_project?._id, project?.id_project?.name, project?.id_project?.profile?.name, project?.id_project?.trialExpired, project?.id_project?.trialDaysLeft, project?.id_project?.status)' -->
-          <div class="small-projects-sidebar">
-            <div *ngIf="project?.id_project?.status !== 0" class="flex-container-project-for-panel project-row">
-              <div class="flex-child-left">
-                <!-- padding:6px; background: rgb(31,107,192); -->
-                <div class="unassigned-notifications-icon-wpr">
-                  <!-- <svg viewBox="0 0 28 28" alt="" class="a8c37x1j ms05siws hwsy1cff b7h9ocf4 fzdkajry" height="40"
-                    width="40"
-                    style="vertical-align: middle;border-radius: 50%;">
-                    <style type="text/css">
-                      .notifications-icons {
-                        fill: #050505;
-                      }
-                    </style>
-                    <path class="notifications-icons"
-                      d="M7.847 23.488C9.207 23.488 11.443 23.363 14.467 22.806 13.944 24.228 12.581 25.247 10.98 25.247 9.649 25.247 8.483 24.542 7.825 23.488L7.847 23.488ZM24.923 15.73C25.17 17.002 24.278 18.127 22.27 19.076 21.17 19.595 18.724 20.583 14.684 21.369 11.568 21.974 9.285 22.113 7.848 22.113 7.421 22.113 7.068 22.101 6.79 22.085 4.574 21.958 3.324 21.248 3.077 19.976 2.702 18.049 3.295 17.305 4.278 16.073L4.537 15.748C5.2 14.907 5.459 14.081 5.035 11.902 4.086 7.022 6.284 3.687 11.064 2.753 15.846 1.83 19.134 4.096 20.083 8.977 20.506 11.156 21.056 11.824 21.986 12.355L21.986 12.356 22.348 12.561C23.72 13.335 24.548 13.802 24.923 15.73Z">
-                    </path>
-                  </svg> -->
-
-                  <!-- <svg aria-hidden="true" focusable="false" data-prefix="far" data-icon="bell"
-                    class="svg-inline--fa fa-bell fa-w-14" role="img" xmlns="http://www.w3.org/2000/svg"
-                    viewBox="0 0 448 512" height="auto" width="24px">
-                    <path fill="currentColor"
-                      d="M439.39 362.29c-19.32-20.76-55.47-51.99-55.47-154.29 0-77.7-54.48-139.9-127.94-155.16V32c0-17.67-14.32-32-31.98-32s-31.98 14.33-31.98 32v20.84C118.56 68.1 64.08 130.3 64.08 208c0 102.3-36.15 133.53-55.47 154.29-6 6.45-8.66 14.16-8.61 21.71.11 16.4 12.98 32 32.1 32h383.8c19.12 0 32-15.6 32.1-32 .05-7.55-2.61-15.27-8.61-21.71zM67.53 368c21.22-27.97 44.42-74.33 44.53-159.42 0-.2-.06-.38-.06-.58 0-61.86 50.14-112 112-112s112 50.14 112 112c0 .2-.06.38-.06.58.11 85.1 23.31 131.46 44.53 159.42H67.53zM224 512c35.32 0 63.97-28.65 63.97-64H160.03c0 35.35 28.65 64 63.97 64z">
-                    </path>
-                  </svg> -->
-
-                  <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false"
-                    class="style-scope yt-icon"
-                    style="pointer-events: none; width: 37px; height:auto; fill: rgb(107,107,107);margin-left:4px">
-                    <g class="style-scope yt-icon">
-                      <path
-                        d="M10,20h4c0,1.1-0.9,2-2,2S10,21.1,10,20z M20,17.35V19H4v-1.65l2-1.88v-5.15c0-2.92,1.56-5.22,4-5.98V3.96 c0-1.42,1.49-2.5,2.99-1.76C13.64,2.52,14,3.23,14,3.96l0,0.39c2.44,0.75,4,3.06,4,5.98v5.15L20,17.35z M19,17.77l-2-1.88v-5.47 c0-2.47-1.19-4.36-3.13-5.1c-1.26-0.53-2.64-0.5-3.84,0.03C8.15,6.11,7,7.99,7,10.42v5.47l-2,1.88V18h14V17.77z"
-                        class="style-scope yt-icon"></path>
-                    </g>
-                  </svg>
-
-                </div>
-                <div class="unassigned-notifications-badge">
-                  <!-- || currentUserRequestCount > 0  -->
-                  <!-- <span *ngIf="unservedRequestCount > 0 "> -->
-                  <!-- + currentUserRequestCount -->
-                  <span class="notification-count">{{ unservedRequestCount }}</span>
-                  <!-- </span> -->
-
-                </div>
-
+        <div class="small-projects-sidebar">
+          <!-- <div class="pinned-project">Pinned project </div> margin-left:4px -->
+          <div *ngIf="project?.id_project?.status !== 0" class="flex-container-project-for-panel project-row">
+            <div class="flex-child-left" [tooltip]="conversationsInQueue" [options]="tooltipOptions" placement="top"
+              content-type="template" (click)="openUnservedConvs()">
+              <div class="unassigned-notifications-icon-wpr">
+                <svg viewBox="0 0 24 24" preserveAspectRatio="xMidYMid meet" focusable="false"
+                  class="style-scope yt-icon"
+                  style="pointer-events: none; width: 37px; height:auto; fill: rgb(107,107,107);margin-top: 9px;">
+                  <g class="style-scope yt-icon">
+                    <path
+                      d="M10,20h4c0,1.1-0.9,2-2,2S10,21.1,10,20z M20,17.35V19H4v-1.65l2-1.88v-5.15c0-2.92,1.56-5.22,4-5.98V3.96 c0-1.42,1.49-2.5,2.99-1.76C13.64,2.52,14,3.23,14,3.96l0,0.39c2.44,0.75,4,3.06,4,5.98v5.15L20,17.35z M19,17.77l-2-1.88v-5.47 c0-2.47-1.19-4.36-3.13-5.1c-1.26-0.53-2.64-0.5-3.84,0.03C8.15,6.11,7,7.99,7,10.42v5.47l-2,1.88V18h14V17.77z"
+                      class="style-scope yt-icon"></path>
+                  </g>
+                </svg>
               </div>
+              <div class="unassigned-notifications-badge" *ngIf="unservedRequestCount > 0">
+                <!-- || currentUserRequestCount > 0  -->
+                <!-- <span *ngIf="unservedRequestCount > 0 "> -->
+                <!-- + currentUserRequestCount -->
+                <span class="notification-count">{{ unservedRequestCount }}</span>
+              </div>
+            </div>
 
-
-              <div class="flex-child-right">
-                <div class="project-name-project-for-panel">
-                  {{ project?.id_project?.name }}
+            <ng-template #conversationsInQueue>
+              <span *ngIf="unservedRequestCount > 1">
+                {{ unservedRequestCount }}
+                {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}
+              </span>
+              <span *ngIf="unservedRequestCount === 1">
+                {{ unservedRequestCount }}
+                {{translationMap?.get('CONVERSATION_IN_QUEUE') }}
+              </span>
+              <span *ngIf="unservedRequestCount === 0">
+                {{translationMap?.get('NO_CONVERSATION_IN_QUEUE') }}
+
+              </span>
+            </ng-template>
+
+
+            <div class="flex-child-right">
+              <div class="project-name-project-for-panel" [ngClass]="{'project-name-project-for-panel-on-desktop': IS_ON_MOBILE_DEVICE === false}" [tooltip]="conversationsInQueueOnProjectName"
+                [options]="tooltipOptions" placement="top" content-type="template" (click)="openUnservedConvs()">
+                <div class="project---name"> {{ project?.id_project?.name }} </div>
+              </div>
+              <ng-template #conversationsInQueueOnProjectName>
+                <span *ngIf="unservedRequestCount > 1">
+                  {{ unservedRequestCount }}
+                  {{translationMap?.get('CONVERSATIONS_IN_QUEUE') }}
+                </span>
+                <span *ngIf="unservedRequestCount === 1">
+                  {{ unservedRequestCount }}
+                  {{translationMap?.get('CONVERSATION_IN_QUEUE') }}
+                </span>
+                <span *ngIf="unservedRequestCount === 0">
+                  {{translationMap?.get('NO_CONVERSATION_IN_QUEUE') }}
+                </span>
+              </ng-template>
+
+              <div class="availabily-and-busy-wpr">
+                <div class="availabily---wpr" tooltip="{{avaialble_status_for_tooltip}}" [options]="tooltipOptions">
+                  <div class="onoffswitch"
+                    (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
+                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox"
+                      id="switchavailableunavailablestatus" tabindex="0" [checked]="project?.ws_projct_user_available">
+                    <label class="onoffswitch-label" for="switchavailableunavailablestatus"></label>
+                  </div>
                 </div>
 
-                <!-- <div class="status--text"
-                  (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)"
+
+                <!-- (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" -->
+                <span *ngIf="project?.ws_projct_user_available === true" class="availibility-status-text"
                   [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
-                  <span *ngIf="project?.ws_projct_user_available === true">
-                    Online
-                  </span>
-                  <span *ngIf="project?.ws_projct_user_available === false">
-                    Offline
-                  </span>
-                  <span class="status--icon-project-for-panel"
-                    [ngStyle]="{ 'background-color':(project?.ws_projct_user_available)?'#4caf50':'#f44336' }">
-                  </span>
-                  <span class="status--icon-project-for-panel busy--icon"
-                    *ngIf="project?.ws_projct_user_isBusy === true">
-                  </span>
-                </div> -->
-                <div class="availabily-and-busy-wpr">
-                  <!-- <div class="onoffswitch"
-                    (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
-                    <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
-                      tabindex="0" [checked]="project?.ws_projct_user_available">
-                    <label class="onoffswitch-label" for="myonoffswitch"></label>
-                  </div> -->
-                  <div class="availabily---wpr">
-                    <!-- <div class="i_onoffswitch"
-                      (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
-                      <input type="checkbox" name="i_onoffswitch" class="i_onoffswitch-checkbox"
-                        id="i_switch_availability" tabindex="0" [checked]="project?.ws_projct_user_available">
-                      <label style="margin-bottom: 0px" class="i_onoffswitch-label" for="i_switch_availability"></label>
-                    </div> -->
-
-
-                    <div class="onoffswitch"
-                      (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)">
-                      <input type="checkbox" name="onoffswitch" class="onoffswitch-checkbox" id="myonoffswitch"
-                        tabindex="0" [checked]="project?.ws_projct_user_available">
-                      <label class="onoffswitch-label" for="myonoffswitch"></label>
-                    </div>
-                  </div>
+                  {{translationMap?.get('Available') }}
+                </span>
+                <!-- (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" -->
+                <span *ngIf="project?.ws_projct_user_available === false" class="availibility-status-text"
+                  [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
+                  {{translationMap?.get('Unavailable')}}
+                </span>
 
-                  <!-- (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" -->
-                  <span *ngIf="project?.ws_projct_user_available === true" class="availibility-status-text"
-                    [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
-                    {{translationMap?.get('Available') }}
-                  </span>
-                  <!-- (click)="$event.stopPropagation();changeAvailabilityState(project?.id_project?._id, project?.ws_projct_user_available)" -->
-                  <span *ngIf="project?.ws_projct_user_available === false" class="availibility-status-text"
-                    [ngClass]="{'online-text-color' : project?.ws_projct_user_available === true, 'offline-text-color' : project?.ws_projct_user_available === false}">
-                    {{translationMap?.get('Unavailable')}}
-                  </span>
-                  <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true">
-                    <!-- <span class="material-icons project-item--isBusy-icon">
+                <div class="project-item--isBusy-icon-wpr" *ngIf="project?.ws_projct_user_isBusy === true" tooltip="{{translationMap?.get('Busy')}}"
+                [options]="tooltipOptions" placement="top" >
+                  <!-- <span class="material-icons project-item--isBusy-icon">
                       access_time
                     </span> -->
-                    <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="16px"
-                      viewBox="0 0 24 24" width="16px" fill="#FEB92C">
-                      <g>
-                        <path d="M0,0h24v24H0V0z" fill="none" />
-                      </g>
-                      <g>
-                        <path
-                          d="M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M15.29,16.71L11,12.41V7h2v4.59 l3.71,3.71L15.29,16.71z" />
-                      </g>
+                  <svg xmlns="http://www.w3.org/2000/svg" enable-background="new 0 0 24 24" height="16px"
+                    viewBox="0 0 24 24" width="16px" fill="#FEB92C">
+                    <g>
+                      <path d="M0,0h24v24H0V0z" fill="none" />
+                    </g>
+                    <g>
+                      <path
+                        d="M11.99,2C6.47,2,2,6.48,2,12s4.47,10,9.99,10C17.52,22,22,17.52,22,12S17.52,2,11.99,2z M15.29,16.71L11,12.41V7h2v4.59 l3.71,3.71L15.29,16.71z" />
+                    </g>
+                  </svg>
+                </div>
+                <!-- <span *ngIf="project?.ws_projct_user_isBusy === true"
+                  class="project-item--isBusy-busy-text text-pulse-animation">
+                  {{translationMap?.get('Busy')}}
+                </span> -->
+              </div>
+            </div>
+
+            <div *ngIf="IS_ON_MOBILE_DEVICE === true" class="flex-child-view-all-convs">
+              <div class="view-all-convs-icon-wpr" style="cursor: pointer;" [tooltip]="viewAllConvs"
+                [options]="tooltipOptions" placement="top" content-type="template">
+
+                <ion-button ion-button fill="clear" class="open-unserved-convs-btn"
+                  (click)="openUnservedConvsAndGoToProjectList()">
+
+                  <span class="push-icon-and-list-wpr">
+                    <!--   <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
+                      style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 20px;">
+                      <style type="text/css">
+                        .st0 {
+                          fill: #3880ff;
+                        }
+                      </style>
+                      <path class="st0"
+                        d="M22.8,15v-2c-1.7,0-3-1.3-3-3V5h1c0.5,0,1-0.5,1-1s-0.5-1-1-1h-10c-0.5,0-1,0.5-1,1s0.5,1,1,1h1v5
+                 c0,1.7-1.3,3-3,3v2h6v5c0.6,0,1.4,0,2,0v-5H22.8z M12.8,13c0.7-0.9,1-1.9,1-3V5h4v5c0,1.1,0.4,2.2,1,3H12.8z" />
+                      <rect x="1.2" y="13" class="st0" width="6.3" height="2" />
+                      <rect x="1.2" y="18" class="st0" width="12.1" height="2" />
+                      <rect x="1.2" y="7.6" class="st0" width="9.2" height="2" />
+                    </svg> -->
+
+                    <svg version="1.1" id="Livello_1" xmlns="http://www.w3.org/2000/svg"
+                      xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" viewBox="0 0 24 24"
+                      style="enable-background:new 0 0 24 24;" xml:space="preserve" style="width: 16px;">
+                      <style type="text/css">
+                        .st0 {
+                          fill: #165CEE;
+                        }
+                      </style>
+                      <path class="st0" d="M20.6,16.3v-2.4c-2.1,0-3.7-1.6-3.7-3.7V4h1.2c0.6,0,1.2-0.6,1.2-1.2s-0.6-1.2-1.2-1.2H5.9
+	c-0.6,0-1.2,0.6-1.2,1.2S5.3,4,5.9,4h1.2v6.1c0,2.1-1.6,3.7-3.7,3.7v2.4h7.3v6.1c0.7,0,1.7,0,2.4,0v-6.1H20.6z M8.3,13.8
+	c0.9-1.1,1.2-2.3,1.2-3.7V4h4.9v6.1c0,1.3,0.5,2.7,1.2,3.7H8.3z" />
                     </svg>
-                  </div>
-                  <span *ngIf="project?.ws_projct_user_isBusy === true" class="project-item--isBusy-busy-text text-pulse-animation">
-                    {{translationMap?.get('Busy')}}
                   </span>
-                </div>
 
-              </div>
 
+
+                </ion-button>
+              </div>
+              <ng-template #viewAllConvs>
+                <span>
+                  {{translationMap?.get('CHANGE_PINNED_PROJECT') }}</span>
+              </ng-template>
             </div>
-          </div>
 
+          </div>
         </div>
 
+        <!-- </div> -->
+
       </div>
     </div>
   </div>

package/src/app/components/project-item/project-item.component.scss

@@ -9,19 +9,18 @@
     width: 100%;
     // min-height: 70px;
     // height: 70px;
-    min-height: 55px;
-    height: 55px;
+    min-height: 64px;
+    height: 64px;
     position: relative;
-    top: -5px;
+    // top: -5px; //nk x AS
 }
 
+
+
 // .main-content-project-for-panel:hover {
 //     background-color: rgb(244, 243, 244);
 // }
-.container-project-for-panel {
-    padding: 0px !important;
-    width: 296px;
-}
+
 
 /* Hide scrollbar for Chrome, Safari and Opera */
 .main-content-projects-for-panel::-webkit-scrollbar {
@@ -216,38 +215,68 @@
     }
 }
 
+.container-project-for-panel {
+    padding: 0px !important;
+    width: 296px;
+}
+
 .flex-container-project-for-panel {
     display: flex;
     width: 100%;
     justify-content: center;
     align-items: center;
-    position: relative;
-    cursor: pointer;
+    // position: relative;
+    // cursor: pointer;
     -moz-transition: all 0.2s ease-in;
     -o-transition: all 0.2s ease-in;
     -webkit-transition: all 0.2s ease-in;
     transition: all 0.2s ease-in;
-    height: 70px;
+    height: 64px;
 }
 
 .flex-container:hover {
     background-color: rgba(200, 200, 200, 0.2);
 }
 
+.flex-child-right {
+    flex: 1;
+    padding: 18px 0px;
+    // width: 227px;
+    // width: 207px;
+    height: 100%;
+}
+
+
 .flex-child-left {
     // flex: 0 0 20%;
     width: 60px;
     text-align: center;
-    padding: 8px 0px;
+    padding: 18px 0px;
+    height: 100%;
 }
 // border: 2px solid yellow;
 
-.flex-child-right {
-    flex: 1;
-    padding: 8px 0px;
-    width: 227px;
+.flex-child-view-all-convs {
+    width: 40px;
+    text-align: center;
+    padding: 18px 0px;
+    height: 100%;
+    margin-top: 5px;
+    margin-right: 10px;
 }
 
+@media (max-width: 768px) {
+    .container-project-for-panel {
+        width: 100%;
+    }
+    .flex-child-view-all-convs {
+        margin-right: 20px;
+    }
+}
+
+
+
+
 .status--icon-project-for-panel {
     width: 13px;
     height: 13px;
@@ -282,7 +311,8 @@
     color: #1e2129;
     font-weight: 400;
     margin-left: 10px;
-    width: 220px !important;
+    width: 185px ;
+    // width: 220px !important;
     white-space: nowrap !important;
     overflow: hidden !important;
     text-overflow: ellipsis !important;
@@ -290,6 +320,30 @@
     font-size: 14px;
     position: relative;
     top: -1px;
+    cursor: pointer;
+}
+
+
+.project-name-project-for-panel-on-desktop {
+    width: 217px
+}
+
+// .project-name-project-for-panel:hover span {
+//     color: rgba(0, 0, 0, 0.35);
+//     // display: none;
+//     width: fit-content;
+//     display: block;
+// }
+.project---name {
+    width: fit-content;
+    
+}
+.project---name:hover {
+    color: rgba(0, 0, 0, 0.35);
+}
+
+.view-all-convs-icon:hover {
+    color: rgba(0, 0, 0, 0.35);
 }
 
 // .im-available-project-for-panel {
@@ -336,7 +390,7 @@
 
 .project-item--isBusy-icon {
     border-radius: 50%;
-    background-color:#FEB92C;
+    background-color: #feb92c;
     font-size: 14px;
     color: #fff;
     position: relative;
@@ -363,7 +417,7 @@
         color: #999999;
     }
     50% {
-        color: #FEB92C;
+        color: #feb92c;
     }
     100% {
         color: #999999;
@@ -375,7 +429,7 @@
         color: #999999;
     }
     50% {
-        color: #FEB92C;
+        color: #feb92c;
     }
     100% {
         color: #999999;
@@ -387,7 +441,7 @@
         color: #999999;
     }
     50% {
-        color: #FEB92C;
+        color: #feb92c;
     }
     100% {
         color: #999999;
@@ -395,9 +449,21 @@
 }
 
 .unassigned-notifications-icon-wpr {
-    padding-left: 3px;
+    // padding-left: 3px;
+    // position: relative;
+    // top: 3px;
+
     position: relative;
-    top: 3px;
+    top: -8px;
+    background: transparent;
+    border-radius: 50%;
+    width: 50px;
+    left: 10px;
+    height: 50px;
+    cursor: pointer;
+}
+.unassigned-notifications-icon-wpr:hover {
+    background-color: rgba(0, 0, 0, 0.05);
 }
 
 .unassigned-notifications-badge {
@@ -411,8 +477,8 @@
     width: 22px;
     height: 22px;
     color: #fff;
-    // left: 28px;
-    left: 32px;
+   
+    left: 34px;
     border: 1px solid #fff;
 }
 .notification-count {
@@ -433,79 +499,95 @@
     width: 22px;
 }
 
+
+.open-unserved-convs-btn {
+    padding: 5px;
+    margin: 0;
+    height: 31px;
+    width: 31px;
+    font-size: 24px;
+    --padding-start: 0px;
+    --padding-end: 0px;
+    color: #165cee;
+    background-color: transparent;
+    border-radius: 50%; // nk
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.05);
+    }
+}
 // --------------------------------------------------
 // ANIMATED ARROW https://codepen.io/cbrst/pen/ebxwLJ
 // --------------------------------------------------
-.arrow-wrapper {
-    display: flex;
-    align-items: center;
-}
-
-#arrow_1 .arrow {
-    $size: 16px;
-    $width: 2px;
-
-    cursor: pointer;
-    display: block;
-    width: $size / 1.414;
-    height: $size / 1.414 * 2;
-    position: relative;
-
-    & span,
-    &:before,
-    &:after {
-        // background: #fff;
-        background: #b1b4b8;
-        content: "";
-        display: block;
-        width: $size;
-        height: $width;
-        position: absolute;
-        top: calc(50% - (#{$width} / 2));
-    }
-
-    &:before {
-        transform: rotate(-45deg);
-    }
-    &:after {
-        transform: rotate(45deg);
-    }
-
-    & span {
-        width: 0;
-    }
-    &:hover span {
-        width: $size * 1.414;
-    }
-
-    @each $direction in "left" "right" {
-        &.arrow--#{$direction} {
-            & span,
-            &:before,
-            &:after {
-                #{$direction}: 0;
-                transform-origin: #{$direction} 50%;
-            }
+// .arrow-wrapper {
+//     display: flex;
+//     align-items: center;
+// }
 
-            &:before,
-            &:after {
-                transition: #{$direction} 0.3s 0.05s;
-            }
+// #arrow_1 .arrow {
+//     $size: 16px;
+//     $width: 2px;
 
-            & span {
-                transition: width 0.3s, #{$direction} 0.3s 0.05s;
-            }
+//     cursor: pointer;
+//     display: block;
+//     width: $size / 1.414;
+//     height: $size / 1.414 * 2;
+//     position: relative;
 
-            // &:hover {
-            //   & span,
-            //   &:before,
-            //   &:after {
-            //     #{$direction}: $size / 1.414 * -1;
-            //   }
-            // }
-        }
-    }
-}
+//     & span,
+//     &:before,
+//     &:after {
+//         // background: #fff;
+//         background: #b1b4b8;
+//         content: "";
+//         display: block;
+//         width: $size;
+//         height: $width;
+//         position: absolute;
+//         top: calc(50% - (#{$width} / 2));
+//     }
+
+//     &:before {
+//         transform: rotate(-45deg);
+//     }
+//     &:after {
+//         transform: rotate(45deg);
+//     }
+
+//     & span {
+//         width: 0;
+//     }
+//     &:hover span {
+//         width: $size * 1.414;
+//     }
+
+//     @each $direction in "left" "right" {
+//         &.arrow--#{$direction} {
+//             & span,
+//             &:before,
+//             &:after {
+//                 #{$direction}: 0;
+//                 transform-origin: #{$direction} 50%;
+//             }
+
+//             &:before,
+//             &:after {
+//                 transition: #{$direction} 0.3s 0.05s;
+//             }
+
+//             & span {
+//                 transition: width 0.3s, #{$direction} 0.3s 0.05s;
+//             }
+
+//             // &:hover {
+//             //   & span,
+//             //   &:before,
+//             //   &:after {
+//             //     #{$direction}: $size / 1.414 * -1;
+//             //   }
+//             // }
+//         }
+//     }
+// }
 
 // ------------------------------------------------------------------
 // on-off availability switch btn // https://proto.io/freebies/onoff/