FM / layouts

/home/techb158/immovalet.com/platform/core/media/resources/assets/sass/layouts/

/home/techb158/immovalet.com/platform/core/media/resources/assets/sass/layouts

Name	Size	Mode	Actions
_content.scss	4220	0644	edit dl rm
_footer.scss	111	0644	edit dl rm
_header.scss	1771	0644	edit dl rm
_layouts.scss	96	0644	edit dl rm
_media-list.scss	5808	0644	edit dl rm
_sidebar.scss	2096	0644	edit dl rm

Edit: /home/techb158/immovalet.com/platform/core/media/resources/assets/sass/layouts/_content.scss (4220B)

#rv_media_body {
    display: flex;
    flex-direction: column;
}

.navbar .dropdown-menu-right {
    right: 0;
    left: auto;
}

.rv-media-container {
    width: 100%;
    min-height: 100%;
    height: 100%;
    font-size: 13px;
    overflow: auto;
    display: flex;
    flex-grow: 1;
    flex-direction: column;

* {
        font-size: 13px;
    }

.form-add-folder {
        .input-group-prepend {
            padding: 0;
        }
    }

.rv-media-wrapper {
        display: flex;
        width: 100%;
        height: 100%;
        overflow: hidden;
        position: relative;
        min-width: 750px;
        flex-grow: 1;

.rv-media-aside,
        .rv-media-main-wrapper {
            @include lib-css(align-items, stretch);
        }

.rv-media-main-wrapper {
            @include lib-css(flex-grow, 1);
            display: flex;
            @include lib-css(flex-direction, column);

.rv-media-main {
                @include lib-css(flex-grow, 1);
                @include lib-css(flex-direction, row);
                display: flex;
                height: 200px;
            }

.rv-dropdown-actions {
                .dropdown-toggle:after {
                    display: none;
                }
            }
        }
    }

.rv-btn-add-folder {
        width: 55px;
    }

.rv-media-items,
    .rv-media-details {
        @include lib-css(align-items, stretch);
        display: flex;
        overflow: auto;
        position: relative;
    }

.rv-media-items {
        @include lib-css(flex-grow, 1);
        @include lib-css(flex-direction, column);
        @include lib-css(user-select, none);

.rv-media-item {
            overflow: hidden;
            background-color: rgba($color-lighter-black, 0.3);
        }
    }

.rv-media-details {
        width: 250px;
        min-width: 250px;
        border-left: 1px solid $color-lighter-black;
        @include lib-css(flex-direction, column);
        @include lib-css(transition, all 0.3s ease-in-out);
        overflow: hidden;
        overflow-y: auto;

.rv-media-thumbnail,
        .rv-media-description {
            width: 250px;
            min-width: 250px;
        }

.rv-media-thumbnail {
            border-bottom: 1px solid $color-lighter-black;
            overflow: visible;

i {
                font-size: 70px;

&.fa.fa-picture-o {
                    opacity: 0.5;
                }
            }

img {
                max-width: 90%;
            }
        }

.rv-media-description {
            padding: 10px;
            position: relative;

.rv-media-name {
                > p {
                    font-weight: 700;
                    margin: 0;
                }

+ .rv-media-name {
                    margin-top: 5px;
                }

> span {
                    display: block;
                    white-space: nowrap;
                    overflow: hidden;
                    text-overflow: ellipsis;
                }

.btn {
                    background: #e5e5e5;
                }
            }
        }
    }

#media_details_collapse:checked ~ .rv-media-main-wrapper .rv-media-details {
        width: 0;
        min-width: 0;
        border: 0 none;
    }

#media_details_collapse:checked ~ .rv-media-main-wrapper .rv-media-tools .collapse-panel {
        i {
            @include lib-css(transform, rotate(-180deg));
        }
    }

@media (max-width: $screen-md-max) {
        .rv-media-details {
            width: 220px;
            min-width: 220px;

.rv-media-thumbnail,
            .rv-media-description {
                width: 220px;
                min-width: 220px;
            }
        }
    }

@media (max-width: $screen-sm-max) {
        .rv-media-wrapper .rv-media-main-wrapper {
            width: 100%;
        }
        .rv-media-details {
            width: 200px;
            min-width: 200px;

.rv-media-thumbnail,
            .rv-media-description {
                width: 200px;
                min-width: 200px;
            }
        }
    }
}

cmd: