pipicar/resources/assets/sass/app.scss

// Fonts
@import url('https://fonts.googleapis.com/css2?family=Inter:ital,opsz,wght@0,14..32,100..900;1,14..32,100..900&family=Nunito+Sans:ital,opsz,wght@0,6..12,200..1000;1,6..12,200..1000&display=swap');

// Variables
@import 'variables';

// Bootstrap
@import '~bootstrap/scss/bootstrap';
@import "~bootstrap-icons/font/bootstrap-icons";
@import "~select2";

@import 'mixins';
@import 'components/navbar';
@import 'components/sidebar';
@import 'components/table';
@import 'components/ajax-loader';
@import 'components/history';
@import 'components/global-actions';
@import 'components/buttons';
@import 'components/form-control';
@import 'components/card';
@import 'components/log-reg-container';
@import 'components/global-alert';
@import "components/grid";


body {
    background-color: #fff;
    font-family: 'Nunito Sans', sans-serif;
    font-size: 16px;
    line-height: 1.5;
    font-weight: 400;
    margin: 0;
    padding: 0;
}

.main-container {
    margin: 107px 50px 50px;
}

//.menu-open{
//    .main-container{
//        margin-left: 250px;
//    }
//}

.global-line{
    margin: 0 0 10px 0;
    color: $border-color;
    opacity: 1;
}


.select2-container .select2-selection--single {
    min-height: 38px;
    border: 1px solid #ced4da;
}

.select2-container .select2-selection--multiple {
    min-height: 38px;
    border: 1px solid #ced4da;
}


.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 38px;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 38px;
}

.select2-container--default.select2-container--focus .select2-selection--multiple{
    border: 1px solid #ced4da;
    background-color: #eef1f8;
}

.waves-effect {
    position: relative;
    overflow: hidden;
}


.filter-trigger {
    span{
        height: 100%;
        border-right: 1px solid $border-color;
        line-height: 30px;
        font-weight: 700;
        padding: 0 20px 0 0;
    }
    i {
        height: 100%;
        line-height: 30px;
        transition: 0.15s all ease;
        &.bi-funnel-fill{
            padding: 0 10px;
        }
        &.bi-chevron-down{
            padding: 0 10px;
            color: #7C9DB3;
        }
    }

    &.active {
        i {
            &.bi-funnel-fill{
                color: $primary-color;
            }
            &.bi-chevron-down{
                transform: rotate(180deg);
            }
        }
    }
}

.filter-container {
    padding: 20px;
    background-color: #fff;
    width: 100%;
    margin-bottom: 20px;
    border-radius: 6px;
    border: 1px solid $border-color;
    .filter-block {
        margin-bottom: 15px;
        label {
            margin-bottom: 2px;
            color: $gray-color;
        }

        .select2-container .select2-selection--multiple{
            min-height: 30px;
        }
        .select2-container--default .select2-selection--multiple{
            padding-bottom: 0;
            padding-right: 0;
        }
        .select2-container .select2-search--inline .select2-search__field{
            margin-top: 3px;
        }
        .select2-container--default .select2-selection--multiple .select2-selection__choice{
            margin-top: 3px;
        }
    }
}

.img-profile-edit{
    height: 135px;
    border-radius: 10px;
    overflow: hidden;
    cursor: pointer;
    position: relative;
    &:before{
        content: '';
        position: absolute;
        top: 0;
        left: 0;
        background-color: #333;
        width: 100%;
        height: 100%;
        border-radius: 10px;
        opacity: 0.4;
        z-index: 1;
        transition: 0.15s all ease;
    }
    &:after{
        content: 'нажмите, чтобы загрузить фото';
        position: absolute;
        top: 0;
        left: 0;
        width: 100%;
        padding: 20px;
        height: 100%;
        z-index: 7;
        color: #ffffff;
        display: flex;
        align-items: center;
        justify-content: center;
    }
    i{
        position: absolute;
        top: calc(50% - 20px);
        left: 50%;
        transform: translate(-50%, -50%);
        font-size: 20px;
        color: #fff;
        z-index: 3;
        transition: 0.15s all ease;
    }
    &:hover{
        &:before {
            opacity: 0.8;
        }
        i{
            transform: translate(-50%, -50%) scale(1.3);
        }
    }
    img{
        width: 100%;
        height: 100%;
        object-fit: cover;
    }
}

.profile-img {
    height: 192px;
    width: 200px;
    border-radius: 10px;
    overflow: auto;
    img {
        height: 100%;
        width: 100%;
        object-fit: cover;
    }
}

.form-group {
    margin-bottom: 15px;
    label{
        color: $gray-color;
        margin-bottom: 2px;
    }
}

.badge-outline{
    padding: 2px 7px;
    border-radius: 50px;
    font-size: 12px;
    font-weight: 500;
    &.success{
        color: #01AC50;
        background-color: rgba(1,172,80,0.2);
    }
    &.danger{
        color: #C0504C;
        background-color: rgba(192,80,76,0.2);
    }
}

.table-actions{
    display: flex;
    align-items: center;
    .btn{
        border-radius: 50%;
        width: 30px;
        height: 30px;
        padding: 0;
        display: inline-flex!important;
        align-items: center;
        justify-content: center;
        margin-left: 5px;
        &:first-child{
            margin-left: 0;
        }
        i{
            margin: 0;
        }
    }
}

.fkey{
    background-color: white !important;
}

.main-page {
    .main-page-header {
        .top-title {
            margin: 0;
            line-height: 1;
            text-transform: uppercase;
            font-size: 12px;
            color: #a8a8a8;
            font-weight: 600;
        }
        .title {
            font-weight: 800;
            font-size: 36px;
            margin-bottom: 40px;
            text-transform: uppercase;
            position: relative;
        }

        .subtitle {
            font-size: 20px;
            color: #5d5d5d;
            margin: 0 0 50px 0;
        }
        .with-line.line-center:before {
            left: 50%;
            transform: translate(-50%);
        }

        .with-line:before {
            content: "";
            position: absolute;
            bottom: -20px;
            width: 45px;
            height: 4px;
            background-color: #01b0e8;
        }
    }
}

.bi::before {
    line-height: 1.4;
}