From 7e68c9ab5e445c271eff018642215837e441cb98 Mon Sep 17 00:00:00 2001 From: khk Date: Thu, 16 Jan 2020 17:58:11 +0900 Subject: [PATCH] =?UTF-8?q?=EB=AA=A9=EB=A1=9D=20=EB=86=92=EC=9D=B4=20?= =?UTF-8?q?=EA=B0=92,=20=EC=A0=84=EC=B2=B4=20=ED=94=84=EB=A0=88=EC=9E=84?= =?UTF-8?q?=20=EB=B3=80=EC=88=98=EA=B0=92=EC=9C=BC=EB=A1=9C=20=EB=B3=80?= =?UTF-8?q?=EA=B2=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../components/left-side.component.scss | 2 - .../left-sidenav/chat.component.html | 2 +- .../left-sidenav/chat.component.scss | 52 +------- .../left-sidenav/group.component.scss | 2 +- .../left-sidenav/message.component.html | 2 +- .../left-sidenav/message.component.scss | 51 +------- .../left-sidenav/organization.component.scss | 11 +- .../native/components/top-bar.component.scss | 4 - .../components/main.page.component.scss | 1 - .../src/assets/scss/global/_default.scss | 9 +- .../components/expansion-panel.component.scss | 2 - .../lib/components/list-item.component.html | 2 +- .../lib/components/list-item.component.scss | 20 ++-- .../components/tenant-search.component.html | 15 +-- .../components/tenant-search.component.scss | 52 -------- .../components/user-list-item.component.html | 10 +- .../components/user-list-item.component.scss | 37 ++---- .../lib/components/list-item.component.html | 17 ++- .../lib/components/list-item.component.scss | 46 +------ .../src/assets/scss/_ucap-ui.scss | 2 + .../src/assets/scss/partials/_list-item.scss | 74 +++++++++--- .../src/assets/scss/partials/_main-frame.scss | 50 ++++++++ .../assets/scss/partials/_search-frame.scss | 112 ++++++++++++++++++ 23 files changed, 272 insertions(+), 303 deletions(-) create mode 100644 projects/ucap-webmessenger-ui/src/assets/scss/partials/_main-frame.scss create mode 100644 projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss index d3b3afe7..0d0b4c8e 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-side.component.scss +++ b/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; } diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html index bd45ec4f..9e0e6e7d 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.html @@ -10,7 +10,7 @@ --> -
+
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss index 072b92a2..5faa6186 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/chat.component.scss +++ b/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; } diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss index c0f9275a..311224ed 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/group.component.scss +++ b/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; diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html index a287f565..ea4bcd20 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html +++ b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.html @@ -10,7 +10,7 @@ -->
-
+
diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss index 6a204472..b0b1ee0c 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/message.component.scss +++ b/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%; diff --git a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss index 967c232c..255eea05 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/messenger/components/left-sidenav/organization.component.scss +++ b/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 { diff --git a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss b/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss index 60a4e45c..a538efa8 100644 --- a/projects/ucap-webmessenger-app/src/app/layouts/native/components/top-bar.component.scss +++ b/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; diff --git a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss b/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss index 9c47bec8..0f109d7c 100644 --- a/projects/ucap-webmessenger-app/src/app/pages/messenger/components/main.page.component.scss +++ b/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; diff --git a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss b/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss index f253b662..b24375c3 100644 --- a/projects/ucap-webmessenger-app/src/assets/scss/global/_default.scss +++ b/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; diff --git a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss b/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss index 63e297ae..bc53a784 100644 --- a/projects/ucap-webmessenger-ui-group/src/lib/components/expansion-panel.component.scss +++ b/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%; diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html index e5c30f93..b5ef9545 100644 --- a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.html +++ b/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 - {{ message.title }} + {{ message.title }}
diff --git a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss b/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss index c0f4215d..df254f8e 100644 --- a/projects/ucap-webmessenger-ui-message/src/lib/components/list-item.component.scss +++ b/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; - white-space: nowrap; - word-wrap: normal; - text-overflow: ellipsis; - display: block; + display: flex; width: 100%; position: relative; - overflow: hidden; - font-size: 0.9em; + justify-items: center; + .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%; diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html index 37a1412e..8a027b6d 100644 --- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html +++ b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.html @@ -1,4 +1,4 @@ -
+
@@ -30,16 +30,3 @@
- diff --git a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss b/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss index e10fef3b..072ebef6 100644 --- a/projects/ucap-webmessenger-ui-organization/src/lib/components/tenant-search.component.scss +++ b/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; -} diff --git a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html index 1a7af7cb..ab01006e 100644 --- a/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html +++ b/projects/ucap-webmessenger-ui-profile/src/lib/components/user-list-item.component.html @@ -16,22 +16,22 @@
phone_android
-
-
-
-
+
+
@@ -57,7 +57,7 @@
{{ roomInfo.joinUserCount }}{{ 'common.units.persons' | translate }} @@ -66,7 +66,7 @@ notifications_off
-
+
{{ finalEventMessage }}
@@ -86,14 +86,13 @@
-
-
+ >
diff --git a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss b/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss index c0f1e8e8..050af097 100644 --- a/projects/ucap-webmessenger-ui-room/src/lib/components/list-item.component.scss +++ b/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 { - font-size: 0.9em; + .member { flex: none; margin-left: 6px; border-radius: 3px; @@ -114,10 +112,8 @@ $thumbnail-msize: 40px; color: #ffffff; } } - .room-msg { - font-size: 12px; + .final-message { 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; - } -} diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss b/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss index 67e1bfa4..35905a7a 100644 --- a/projects/ucap-webmessenger-ui/src/assets/scss/_ucap-ui.scss +++ b/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'; diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss index 01e6a649..204c4065 100644 --- a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_list-item.scss +++ b/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; - white-space: nowrap; - word-wrap: normal; -} -.ellipsis2 { - overflow: hidden; - text-overflow: ellipsis; - -webkit-line-clamp: 2; - -webkit-box-orient: vertical; - word-wrap: break-word; + @if $row == 1 { + white-space: nowrap; + word-wrap: normal; + } @else if $row >= 2 { + display: -webkit-box; + -webkit-line-clamp: $row; + -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); + } } diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_main-frame.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_main-frame.scss new file mode 100644 index 00000000..9b0de731 --- /dev/null +++ b/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}); + } +} diff --git a/projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss b/projects/ucap-webmessenger-ui/src/assets/scss/partials/_search-frame.scss new file mode 100644 index 00000000..f7bc43d4 --- /dev/null +++ b/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; + } + } +}