fuse-angular/src/app/main/content/apps/mail/mail.component.scss

@import "src/app/core/scss/fuse";

:host {
    width: 100%;

    .center {

        .header {

            .search-wrapper {
                @include mat-elevation(7);

                .sidenav-toggle {
                    margin: 0;
                    width: 56px;
                    height: 56px;
                    background: #FFF;
                    border-radius: 0;
                    border-right: 1px solid rgba(0, 0, 0, .12);
                }

                .search {
                    width: 100%;
                    height: 56px;
                    line-height: 56px;
                    padding: 18px;

                    input {
                        height: 56px;
                        padding-left: 16px;
                        color: rgba(0, 0, 0, 0.54);
                        border: none;
                        outline: none;
                    }
                }
            }
        }

        .content-card {

            @include media-breakpoint(xs) {

                fuse-mail-list,
                fuse-mail-details {
                    flex: 1 0 100%;
                }

                fuse-mail-details {
                    display: none !important;
                }

                &.current-mail-selected {

                    .content {

                        fuse-mail-list {
                            display: none !important;
                        }

                        fuse-mail-details {
                            display: flex !important;
                        }
                    }
                }
            }
        }
    }
}