ng-deep 정리중(4차)

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer.component.scss

@@ -22,8 +22,5 @@ $tablet-s-width: 768px;
       width: 50%;
       min-width: 50%;
     }
-    .mat-tab-header-pagination {
-      display: none;
-    }
   }
 }

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.html

@@ -100,6 +100,7 @@
   </div>
   <div class="search-list">
     <perfect-scrollbar class="album-scrollbar">
+      <div class="albumlist-content">
       <div
         *ngFor="let fileInfo of filteredList"
         class="img-item"
@@ -160,6 +161,7 @@
           </dd>
         </dl>
       </div>
+      </div>
     </perfect-scrollbar>
   </div>
   <div

projects/ucap-webmessenger-app/src/app/layouts/messenger/components/right-drawer/album-box.component.scss

@@ -115,30 +115,25 @@ $tablet-s-width: 768px;
   }
 }
 
-::ng-deep .album-scrollbar {
+.albumlist-content {
-  .ps {
+  display: flex;
-    .ps-content {
+  flex-flow: wrap;
-      display: flex;
+  height: auto;
-      flex-flow: wrap;
+  justify-content: stretch;
-      height: auto;
+  align-content: space-between;
-      justify-content: stretch;
+  width: 100%;
-      align-content: space-between;
+  .img-item {
-      width: 100%;
+    cursor: pointer;
+    margin-bottom: 10px;
+    position: relative;
+    width: 32%;
+    margin-right: 2%;
+    &:nth-child(3n + 0) {
+      margin-right: 0;
     }
   }
 }
 
-.img-item {
-  cursor: pointer;
-  margin-bottom: 10px;
-  position: relative;
-  width: 32%;
-  margin-right: 2%;
-  &:nth-child(3n + 0) {
-    margin-right: 0;
-  }
-}
-
 .preview-image,
 .preview-video {
   max-height: 140px;

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/chat/create-chat.dialog.component.scss

@@ -156,7 +156,7 @@
   }
 }
 
-:ng-deep .dialog-creat-chat {
+/*:ng-deep .dialog-creat-chat {
   & > .mat-tab-body-wrapper {
     .mat-tab-body {
       height: 380px;
@@ -170,3 +170,4 @@
     }
   }
 }
+*/

projects/ucap-webmessenger-app/src/app/layouts/messenger/dialogs/message/message-detail.dialog.component.scss

@@ -23,10 +23,6 @@
   }
 }
 
-::ng-deep .mat-mini-fab .mat-button-wrapper {
-  padding: 0;
-}
-
 .contents {
   height: 380px;
   .message-contents {
@@ -46,7 +42,7 @@
   }
 }
 
-::ng-deep .message-container {
+.message-container {
   background-color: #ffffff !important;
   .message-info {
     /*.profile {

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.html

@@ -27,7 +27,6 @@
       (click)="onClickStickerSelector()"
       matTooltip="{{ 'chat.btnSticker' | translate }}"
     >
-      <!--<mat-icon>sentiment_satisfied_alt</mat-icon>-->
       <i class="mid  mdi-emoticon-happy-outline"></i>
     </button>
 
@@ -37,16 +36,6 @@
       (click)="onClickTranslation()"
       matTooltip="{{ 'chat.btnTranslate' | translate }}"
     >
-      <!--<mat-icon>g_translate</mat-icon>
-      <svg
-        xmlns="http://www.w3.org/2000/svg"
-        viewBox="0 0 20 20"
-        fill="currentColor"
-      >
-        <path
-          d="M7.41 9l2.24 2.24-.83 2L6 10.4l-3.3 3.3-1.4-1.42L4.58 9l-.88-.88c-.53-.53-1-1.3-1.3-2.12h2.2c.15.28.33.53.51.7l.89.9.88-.88C7.48 6.1 8 4.84 8 4H0V2h5V0h2v2h5v2h-2c0 1.37-.74 3.15-1.7 4.12L7.4 9zm3.84 8L10 20H8l5-12h2l5 12h-2l-1.25-3h-5.5zm.83-2h3.84L14 10.4 12.08 15z"
-        />
-      </svg>-->
       <svg
         id="레이어_1"
         data-name="레이어 1"
@@ -112,24 +101,12 @@
     </mat-form-field>
 
     <button
-      class="send-message-button bg-accent-darkest"
+      class="send-message-button icon-button bg-accent-darkest"
       mat-icon-button
       type="submit"
       aria-label="Send message"
     >
-      <svg
+      <i class="mid mid-30 mdi-arrow-up"></i>
-        xmlns="http://www.w3.org/2000/svg"
-        width="20"
-        height="20"
-        viewBox="0 0 24 24"
-        fill="none"
-        stroke="currentColor"
-        stroke-width="2"
-        stroke-linecap="butt"
-        stroke-linejoin="round"
-      >
-        <path d="M12 19V6M5 12l7-7 7 7" />
-      </svg>
     </button>
   </form>
 </div>

projects/ucap-webmessenger-ui-chat/src/lib/components/form.component.scss

@@ -57,23 +57,19 @@ textarea[name='message'] {
   padding-top: 0;
 }
 
-::ng-deep .send-message-button {
+.send-message-button {
   margin-left: 20px;
+  line-height: unset;
   @media screen and (max-width: #{$tablet-l-width}), (max-height: 800px) {
     margin-left: 6px;
   }
-  .mat-button-wrapper {
-    display: flex;
-    justify-content: center;
-    justify-items: center;
-  }
   i {
     display: inline-block;
     width: 40px;
     height: 40px;
     border-radius: 50%;
     line-height: 40px;
-    font-size: 20px;
+    font-size: 24px;
     color: #ffffff;
     &:hover {
       opacity: 0.8;

projects/ucap-webmessenger-ui-settings/src/lib/components/general.component.scss

@@ -1,47 +1,3 @@
-/*::ng-deep .mat-list-base {
-  .theme-select.mat-list-item {
-    position: relative;
-    height: 160px;
-    .mat-list-item-content {
-      flex-direction: column;
-    }
-  }
-}
-
-::ng-deep .theme-list {
-  position: relative;
-  display: flex;
-  flex-flow: row;
-  width: 100%;
-  margin: 10px;
-  height: auto !important;
-  .mat-tab-header {
-    position: relative;
-    width: 100% !important;
-    .mat-tab-labels {
-      position: relative;
-      width: 100%;
-      flex-flow: row !important;
-      .mat-tab-label {
-        width: 140px;
-        height: 120px;
-        .mat-tab-label-content {
-          position: relative;
-          flex-flow: column;
-          width: 100%;
-        }
-      }
-    }
-    .mat-ink-bar {
-      display: none;
-    }
-  }
-  .mat-tab-body-wrapper {
-    border-left: none;
-  }
-}
-
-*/
 .mat-list-item {
   margin-bottom: 10px;
 }