Merge branch 'master' of https://git.loafle.net/ucap-web/next-ucap-messenger

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss

@@ -16,7 +16,6 @@
 .left-side-tabs-body {
   position: relative;
   height: 100%;
-  width: calc(100% - 60px);
   div[id^='tabs'] {
     height: 100%;
     width: 100%;
@@ -31,7 +30,6 @@
 
 .mat-tab-group {
   display: flex;
-  width: 60px;
   flex-direction: row;
 }
 

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html

@@ -10,7 +10,7 @@
       </button> -->
     </div>
   </div>
-  <div class="list-search">
+  <div class="list-search-frame">
     <div class="searchbox">
       <form [formGroup]="fgSearch" class="w-100-p">
         <mat-form-field floatLabel="never">

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss

@@ -13,63 +13,13 @@
   }
 }
 
-.list-search {
-  position: relative;
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0;
-  font-size: 14px;
-  background-color: #f9f9f9;
-  border-bottom: 1px solid #dddddd;
-  .searchbox {
-    width: 100%;
-    height: 100%;
-  }
-}
-::ng-deep .searchbox {
-  .mat-form-field {
-    display: block;
-    .mat-form-field-wrapper {
-      padding: 0;
-      padding-bottom: 0 !important;
-      height: 100%;
-      .mat-form-field-flex {
-        height: 59px;
-        padding: 0 10px 0 20px;
-        align-items: center;
-        .mat-form-field-infix {
-          width: 100%;
-          font-size: 14px;
-          border: none;
-          min-height: 20px;
-        }
-        .mat-form-field-suffix {
-          .mat-icon {
-            line-height: 24px;
-          }
-        }
-      }
-    }
-  }
-  .mat-form-field-appearance-legacy {
-    .mat-form-field-wrapper {
-      padding: 0;
-    }
-    .mat-form-field-underline {
-      bottom: 0;
-      background-color: unset !important;
-    }
-  }
-}
-
 .app-layout-chat-left-sidenav-chat-header {
   width: 100%;
   height: 50px;
 }
 
 .app-layout-chat-left-sidenav-chat-list {
-  height: calc(100% - 120px);
+  //height: calc(100% - 120px);
   position: relative;
 }
 

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss

@@ -18,7 +18,7 @@
 }
 
 .search-result {
-  height: calc(100% - 130px);
+  //height: calc(100% - 130px);
   overflow: auto;
   .result-num {
     padding: 10px;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html

@@ -10,7 +10,7 @@
       </button> -->
     </div>
   </div>
-  <div class="list-search">
+  <div class="list-search-frame">
     <div class="searchbox">
       <form [formGroup]="fgSearch" class="w-100-p">
         <mat-form-field floatLabel="never">

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss

@@ -16,55 +16,6 @@
     align-items: center;
   }
 }
-
-.list-search {
-  display: flex;
-  flex-direction: row;
-  align-items: center;
-  padding: 0;
-  font-size: 14px;
-  background-color: #f9f9f9;
-  border-bottom: 1px solid #dddddd;
-  .searchbox {
-    width: 100%;
-    height: 100%;
-  }
-}
-::ng-deep .searchbox {
-  .mat-form-field {
-    display: block;
-    .mat-form-field-wrapper {
-      padding: 0;
-      padding-bottom: 0 !important;
-      height: 100%;
-      .mat-form-field-flex {
-        height: 59px;
-        padding: 0 10px 0 20px;
-        align-items: center;
-        .mat-form-field-infix {
-          width: 90%;
-          font-size: 14px;
-          border: none;
-        }
-        .mat-form-field-suffix {
-          .mat-icon {
-            line-height: 24px;
-          }
-        }
-      }
-    }
-  }
-  .mat-form-field-appearance-legacy {
-    .mat-form-field-wrapper {
-      padding: 0;
-    }
-    .mat-form-field-underline {
-      bottom: 0;
-      background-color: unset !important;
-    }
-  }
-}
-
 .mat-tab-label-active {
   opacity: 1;
 }
@@ -74,7 +25,7 @@
 ::ng-deep .message-box {
   .message-section {
     position: relative;
-    height: calc(100% - 120px);
+    //height: calc(100% - 120px);
     .message-tab {
       position: relative;
       height: 100%;

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss

@@ -16,15 +16,6 @@
 }
 
 .current-head {
-  /*display: flex;
-  justify-content: center;
-  padding: 0 10px;
-  height: 70px;
-  background-color: #eeeeee;
-  background: #f15f79;
-  background: -webkit-linear-gradient(to right, #352a37, #f15f79);
-  background: linear-gradient(to right, #352a37, #ef4c73);
-  color: #ffffff;*/
   h3 {
     display: inline-flex;
     padding-left: 10px;
@@ -52,7 +43,7 @@
 }
 
 .oraganization-tab {
-  height: calc(100% - 120px);
+  // height: calc(100% - 120px);
   flex-direction: inherit;
   display: flex;
   .oraganization-tab-tree {

projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss

@@ -2,17 +2,13 @@
   .app-layout-native-title-bar {
     -webkit-user-select: none;
     -webkit-app-region: drag;
-
     position: fixed;
     right: 0;
     top: 0;
     display: flex;
     padding: 0 10px;
     cursor: pointer;
-    height: 60px;
     color: #ffffff;
-    //background: rgba(37, 27, 30, 0.9);
-    //border-bottom: 1px solid #d5dadb;
 
     .app-layout-native-title-bar-logo {
       width: 32px;

projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss

@@ -2,7 +2,6 @@
   height: 100%;
   display: flex;
   flex-flow: row;
-  padding-top: 57px;
   border-top: none;
   .split-area {
     overflow: hidden;

projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss

@@ -16,7 +16,7 @@ body {
   color: #333;
   font-family: '나눔고딕', Malgun Gothic, '맑은고딕', Arial, Dotum, '돋움',
     Gulim, '굴림';
-  font-size: 13px;
+  font-size: 14px;
   line-height: 18px !important;
   -webkit-box-sizing: border-box;
   -moz-box-sizing: border-box;
@@ -259,7 +259,7 @@ $daesang-grey: (
     background-color: mat-color($accent, B100);
   }
   .main-container {
-    border: 3px solid mat-color($accent, B100);
+    border-color: mat-color($accent, B100);
   }
   .global-menu {
     background-color: mat-color($accent, B100);
@@ -337,7 +337,6 @@ $daesang-grey: (
     display: flex;
     justify-content: center;
     padding: 0 10px;
-    height: 60px;
     background-color: #eeeeee;
     background: $gradient-light;
     background: -webkit-linear-gradient(
@@ -349,10 +348,6 @@ $daesang-grey: (
     color: #ffffff;
   }
 
-  .list-search{
-    height:60px;
-  }
-
   mat-tab-group[vertical] {
     display: flex;
     flex-direction: row;

projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss

@@ -13,8 +13,6 @@
 
 .tree-node-frame {
   border-bottom: 1px solid #dddddd;
-  height: 64px;
-
   .tree-node-header {
     position: relative;
     width: 100%;

projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html

@@ -57,7 +57,7 @@
         *ngIf="!!message.resType && message.resType === ContentType.AttachFile"
         >attach_file</mat-icon
       >
-      {{ message.title }}
+      <span class="final-message">{{ message.title }}</span>
     </dd>
   </dl>
   <div class="date">

projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss

@@ -1,13 +1,13 @@
 .message-list {
   &.list-item {
     dl {
+      position: relative;
       display: flex;
       flex-flow: column;
       flex: 1 1 auto;
-      width: calc(100% - 80px);
+      width: calc(100% - 90px);
       dt {
         .name {
-          font-size: 1.1em;
           overflow: hidden;
           text-overflow: ellipsis;
           display: block;
@@ -22,21 +22,21 @@
       }
 
       dd {
-        color: #777777;
+        display: flex;
-        white-space: nowrap;
-        word-wrap: normal;
-        text-overflow: ellipsis;
-        display: block;
         width: 100%;
         position: relative;
-        overflow: hidden;
+        justify-items: center;
-        font-size: 0.9em;
+        .final-message {
+          white-space: nowrap;
+          word-wrap: normal;
+          text-overflow: ellipsis;
+          overflow: hidden;
+        }
       }
     }
     .date {
       display: flex;
       flex-flow: column;
-      font-size: 0.9em;
       height: 40px;
       .noti-new {
         border-radius: 50%;

projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html

@@ -1,4 +1,4 @@
-<div class="list-search">
+<div class="list-search-frame">
   <div class="selectbox">
     <!--<mat-label>회사선택</mat-label>-->
     <mat-select [(value)]="companyCode">
@@ -30,16 +30,3 @@
     </mat-form-field>
   </div>
 </div>
-<!--검색창만 있는 경우--------------------------------------------------------------------------
-<div class="list-search">
-  <div class="searchbox">
-    <input
-      matInput
-      #searchWordInput
-      placeholder="name"
-      (keydown.enter)="onKeyDownEnter(searchWordInput.value)"
-    />
-    <div class="btn-search"><i class="material-icons">search</i></div>
-  </div>
-</div>
--->

projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss

@@ -11,55 +11,3 @@
     display: none;
   }
 }
-
-.list-search {
-  display: flex;
-  flex-direction: row;
-  position: relative;
-  height: 60px;
-  align-items: center;
-  padding: 0 10px 0 20px;
-  font-size: 14px;
-  background-color: #f9f9f9;
-  border-bottom: 1px solid #dddddd;
-  .selectbox {
-    display: inline-flex;
-    width: 38%;
-    margin-right: 2%;
-  }
-  .searchbox {
-    width: 60%;
-    display: flex;
-    input {
-      display: inline-flex;
-      width: 100%;
-      font-size: 14px;
-      padding-left: 0;
-      &:focus {
-        & + .mat-form-field-label-wrapper {
-          .mat-form-field-appearance-legacy {
-            .mat-form-field-label {
-              color: red;
-            }
-          }
-        }
-      }
-    }
-    .btn-search {
-      color: #777777;
-      font-size: 12px;
-      display: inline-flex;
-      margin-left: auto;
-      flex: none;
-    }
-  }
-}
-.selectbox {
-  display: inline-flex;
-  width: 45%;
-  margin-right: 1%;
-}
-+ .searchbox {
-  width: 54%;
-  display: inline-flex;
-}

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html

@@ -16,22 +16,22 @@
       </div>
       <span
         *ngIf="getPresence(PresenceType.MOBILE) === 'mobileOn'"
-        class="text-accent-color badge-mobile-state"
+        class="text-accent-color marker-mobile-state"
       >
         <mat-icon>phone_android</mat-icon>
       </span>
     </dt>
     <dd class="info">
-      <div class="detail">
+      <div class="user-info">
-        <div class="user-info">
+        <div class="user">
           <span
             *ngIf="getWorkstatusInfo('text').length > 0"
             class="work-status"
             [ngClass]="getWorkstatusInfo('style')"
             >{{ getWorkstatusInfo('text') }}</span
           >
-          <span class="name">
+          <span class="detail">
-            <b>{{ userInfo | ucapTranslate: 'name' }}</b>
+            <b class="name">{{ userInfo | ucapTranslate: 'name' }}</b>
             <span class="grade">{{ userInfo | ucapTranslate: 'grade' }}</span>
           </span>
         </div>

projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.scss

@@ -48,16 +48,6 @@ $thumbnail-msize: 40px;
   border-radius: 4px;
 }
 
-/*.list-item {
-  @extend %list-item;
-  &:hover {
-    background-color: $bg-list-hover;
-  }
-  .mat-checkbox {
-    padding-left: 10px;
-  }
-}*/
-
 .item-default {
   display: flex;
   width: 100%;
@@ -77,36 +67,29 @@ $thumbnail-msize: 40px;
     padding: 0;
     width: calc(100% - 50px);
     transform: translateY(2px);
-    .detail {
+    .user-info {
-      .user-info {
+      .user {
         display: flex;
         flex-flow: row;
         margin-bottom: 2px;
         .work-status {
-          margin-right: 4px;
+          display: inline-flex;
-          border-radius: 4px;
+          justify-content: center;
-          padding: 0 6px;
-          color: #ffffff;
-          font-size: 0.9em;
-          width: 40px;
           justify-items: center;
+          color: #ffffff;
           height: 100%;
+          min-width: 32px;
+          margin-right: 4px;
+          border-radius: 24px;
+          flex: 0 0 auto;
         }
-        .name {
+        .detail {
-          margin-bottom: 2px;
           color: $font-dark;
           width: calc(100% - 40px);
           @include ellipsis(1);
-          b {
-            font-weight: 600;
-          }
-          .grade {
-            font-size: 0.9em;
-          }
         }
       }
       .dept {
-        font-size: 0.9em;
         color: $font-mid;
         @include ellipsis(1);
       }

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.html

@@ -10,7 +10,7 @@
           [default]="defaultPath"
         />
       </div>
-      <span *ngIf="roomInfo.isTimeRoom" class="text-warn-color badge-timer">
+      <span *ngIf="roomInfo.isTimeRoom" class="text-warn-color marker-timer">
         <mat-icon>timer</mat-icon>
       </span>
       <!-- <div style="position: relative;">
@@ -24,8 +24,8 @@
       </div> -->
     </dt>
     <dd class="info">
-      <div class="detail">
+      <div class="room-info">
-        <div class="room-name">
+        <div class="detail">
           <div class="name">
             <ng-container [ngSwitch]="roomInfo.roomType">
               <ng-container *ngSwitchCase="RoomType.Mytalk">
@@ -57,7 +57,7 @@
             </ng-container>
           </div>
           <div
-            class="num bg-accent-light"
+            class="member bg-accent-light"
             *ngIf="roomInfo.roomType === RoomType.Multi"
           >
             {{ roomInfo.joinUserCount }}{{ 'common.units.persons' | translate }}
@@ -66,7 +66,7 @@
             <mat-icon>notifications_off</mat-icon>
           </div>
         </div>
-        <div class="room-msg">
+        <div class="final-message">
           {{ finalEventMessage }}
         </div>
       </div>
@@ -86,13 +86,13 @@
     </dd>
   </dl>
 
-  <div
+  <span
-    class="noti-num"
+    class="noti-sum"
     *ngIf="roomInfo.noReadCnt > 0"
     [matBadgeHidden]="roomInfo.noReadCnt === 0"
     [matBadge]="roomInfo.noReadCnt"
     matBadgeOverlap="true"
     matBadgeColor="accent"
     matBadgePosition="below after"
-  ></div>
+  ></span>
 </div>

projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss

@@ -78,20 +78,19 @@ $thumbnail-msize: 40px;
   .info {
     position: relative;
     display: flex;
+    flex: 0 0 auto;
     margin: 0;
     padding: 0;
 
-    .detail {
+    .room-info {
       flex-direction: column;
       width: calc(100% - 80px);
-      .room-name {
+      .detail {
         display: inline-flex;
         color: $font-dark;
         width: 100%;
         align-items: center;
         .name {
-          font-size: 1.1em;
-          @include ellipsis(1);
           font-weight: 600;
         }
         .mat-icon {
@@ -105,8 +104,7 @@ $thumbnail-msize: 40px;
           margin-left: 4px;
           line-height: unset;
         }
-        .num {
+        .member {
-          font-size: 0.9em;
           flex: none;
           margin-left: 6px;
           border-radius: 3px;
@@ -114,10 +112,8 @@ $thumbnail-msize: 40px;
           color: #ffffff;
         }
       }
-      .room-msg {
+      .final-message {
-        font-size: 12px;
         color: $font-mid;
-        @include ellipsis(1);
       }
     }
     .date {
@@ -127,7 +123,6 @@ $thumbnail-msize: 40px;
       text-align: right;
       margin-left: 10px;
       color: $font-mid;
-      @include ellipsis(1);
       align-items: flex-start;
       margin-top: -2px;
     }
@@ -147,34 +142,3 @@ $thumbnail-msize: 40px;
     background-color: $bg-list-hover;
   }
 }
-
-.noti {
-  position: absolute;
-  right: 22px;
-  bottom: 22px;
-  max-width: 60px;
-  padding: 0 6px;
-  font-size: 11px;
-  color: #ffffff;
-  @include ellipsis(1);
-  border-radius: 50%;
-}
-
-.noti-num {
-  &.mat-badge {
-    position: absolute !important;
-    right: 40px !important;
-    bottom: 22px !important;
-    font-size: 11px;
-    padding: 0 6px;
-    color: #ffffff;
-    max-width: 60px;
-    @include ellipsis(1);
-    overflow: visible;
-    border-radius: 50%;
-    width: 22px;
-    height: 22px;
-    line-height: 22px;
-    display: inline-flex;
-  }
-}

projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss

@@ -6,6 +6,7 @@
 
 // Partials
 @import 'partials/breakpoints';
+@import 'partials/main-frame';
 @import 'partials/forms';
 @import 'partials/general';
 @import 'partials/helpers';
@@ -14,6 +15,7 @@
 @import 'partials/scrollbars';
 @import 'partials/paginator';
 @import 'partials/presence';
+@import 'partials/search-frame';
 @import 'partials/list-item';
 @import 'partials/dialogs';
 

projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss

@@ -1,32 +1,40 @@
 @charset 'utf-8';
 
-.ellipsis {
+@mixin ellipsis($row) {
   overflow: hidden;
   text-overflow: ellipsis;
-  display: block;
+  @if $row == 1 {
-  white-space: nowrap;
+    white-space: nowrap;
-  word-wrap: normal;
+    word-wrap: normal;
-}
+  } @else if $row >= 2 {
-.ellipsis2 {
+    display: -webkit-box;
-  overflow: hidden;
+    -webkit-line-clamp: $row;
-  text-overflow: ellipsis;
+    -webkit-box-orient: vertical;
-  -webkit-line-clamp: 2;
+    word-wrap: break-word;
-  -webkit-box-orient: vertical;
+  }
-  word-wrap: break-word;
 }
 
-$listH-row2: 64px;
+$listH-row2: 60px;
 $line-basic: 1px solid #dddddd;
 %list-item {
   position: relative;
   display: flex;
   align-items: center;
-  font-size: 14px;
   width: 100%;
   height: $listH-row2;
   border-bottom: $line-basic;
   padding: 0 20px;
 }
+
+//expansion-panel 높이
+.group-tree {
+  .tree-node-frame {
+    height: $listH-row2;
+    .group-name {
+      font-size: 0.96em;
+    }
+  }
+}
 .mat-card-header .mat-card-title {
   margin: 0 -16px;
   padding-bottom: 10px;
@@ -56,7 +64,12 @@ $line-basic: 1px solid #dddddd;
       }
     }
   }
-  span[class*='badge'] {
+  &.checkbox {
+    .mat-checkbox {
+      margin-left: auto;
+    }
+  }
+  span[class*='marker'] {
     position: absolute;
     background-color: #ffffff;
     width: 20px;
@@ -77,4 +90,37 @@ $line-basic: 1px solid #dddddd;
       min-height: 18px;
     }
   }
+  .noti-sum.mat-badge {
+    position: absolute;
+    right: 30px;
+    bottom: 20px;
+    font-size: 0.9em;
+  }
+}
+
+//list-item 폰트 사이즈
+.list-item {
+  font-size: 1em;
+  .name {
+    font-weight: 600;
+    @include ellipsis(1);
+  }
+  .grade {
+    font-size: 0.8em;
+    margin-left: 4px;
+    color: #777777;
+  }
+  .work-status,
+  .member {
+    font-size: 0.8em;
+  }
+  .final-message,
+  .dept {
+    font-size: 0.86em;
+    @include ellipsis(1);
+  }
+  .date {
+    font-size: 0.7em;
+    @include ellipsis(1);
+  }
 }

projects/ucap-webmessenger-ui/src/assets/scss/partials/_main-frame.scss

@@ -0,0 +1,50 @@
+$frame-border: 3px;
+$frame-outside: 50px;
+$current-head: 50px;
+$search-frame: 50px;
+
+@mixin div-box-shadow {
+  width: calc(100% - #{$frame-outside});
+}
+
+.mat-toolbar {
+  &.mat-toolbar-single-row {
+    height: $frame-outside;
+  }
+}
+
+.main-container {
+  padding-top: $frame-outside;
+  border-width: $frame-border;
+  border-style: solid;
+  .mat-tab-group {
+    &.global-menu {
+      width: $frame-outside;
+    }
+  }
+  .left-side-tabs-body {
+    @include div-box-shadow;
+  }
+}
+
+.current-head {
+  height: $frame-outside;
+}
+
+// 글로벌 메뉴 별 리스트 높이 값
+.left-side-tabs-contents {
+  .left-group-side {
+    .search-result {
+      height: calc(100% - #{$current-head + $search-frame});
+    }
+  }
+  .app-layout-chat-left-sidenav-chat-list {
+    height: calc(100% - #{$current-head + $search-frame});
+  }
+  .oraganization-tab {
+    height: calc(100% - #{$current-head + $search-frame});
+  }
+  .message-section {
+    height: calc(100% - #{$current-head + $search-frame});
+  }
+}

projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss

@@ -0,0 +1,112 @@
+$search-font-size: 14px;
+
+@mixin list-search {
+  display: flex;
+  flex-direction: row;
+  position: relative;
+  height: $search-frame;
+  align-items: center;
+  // padding: 0 10px 0 20px;
+  font-size: $search-font-size;
+  background-color: #f9f9f9;
+  border-bottom: 1px solid #dddddd;
+}
+
+.list-search-frame {
+  @include list-search;
+  .searchbox {
+    display: flex;
+    width: 100%;
+    height: 100%;
+    align-items: center;
+    input {
+      display: inline-flex;
+      width: 100%;
+      font-size: 1em;
+      padding-left: 0;
+    }
+    .btn-search {
+      color: #777777;
+      font-size: 12px;
+      display: inline-flex;
+      margin-left: auto;
+      flex: none;
+    }
+  }
+}
+
+/*.list-search-frame {
+  .selectbox {
+    display: inline-flex;
+    width: 40%;
+    padding: 0 20px;
+  }
+  & + .searchbox {
+    width: 60%;
+    padding-right: 20px;
+  }
+}
+*/
+.list-search-frame {
+  .searchbox {
+    height: 100%;
+    .mat-form-field {
+      width: 100%;
+      height: $search-frame;
+      .mat-form-field-wrapper {
+        padding: 0;
+        padding-bottom: 0 !important;
+        height: 100%;
+        .mat-form-field-flex {
+          height: 100%;
+          align-items: center;
+          flex: 1 1 auto;
+          padding: 0 20px;
+          .mat-form-field-infix {
+            font-size: 14px;
+            border: none;
+          }
+          .mat-form-field-suffix {
+            margin-left: auto;
+            .mat-icon {
+              line-height: 24px;
+            }
+          }
+        }
+      }
+    }
+    .mat-form-field-appearance-legacy {
+      .mat-form-field-wrapper {
+        padding: 0;
+      }
+      .mat-form-field-underline {
+        bottom: 0;
+        background-color: unset !important;
+      }
+    }
+  }
+}
+
+.selectbox {
+  display: inline-flex;
+  width: 46%;
+  padding-left: 20px;
+
+  & + .searchbox {
+    width: 54%;
+    display: inline-flex;
+    input {
+      display: inline-flex;
+      width: 100%;
+      font-size: 1em;
+      padding-left: 0;
+    }
+    .btn-search {
+      color: #777777;
+      font-size: 12px;
+      display: inline-flex;
+      margin-left: auto;
+      flex: none;
+    }
+  }
+}