$fa-font-path: '~font-awesome/fonts/';
$icon-font-path: '~bootstrap-sass/assets/fonts/bootstrap/';

@import '~font-awesome/scss/font-awesome';
@import '~bootstrap-sass/assets/stylesheets/bootstrap';

@import '~nprogress/nprogress.css';
@import '~humane-js/themes/flatty.css';
@import '~textangular/src/textAngular.css';
@import '~codemirror/lib/codemirror.css';
@import '~codemirror/addon/lint/lint.css';
@import '~ui-select/dist/select.css';
@import './sb-admin.scss';

#nprogress div.spinner {
    width: 18px;
    margin-left: -9px;
    left: 50%;
}

#wrapper .navbar-static-top {
    margin-bottom: 0;
    .navbar-right {
        margin-right: 15px;
    }
}

pre.ascii {
    border: none;
    background: none;
}

menu {
    margin: 0;
    padding: 0;
}

ul.collapsible.collapsed {
    max-height: 0;
    transition: max-height 0.15s ease-out;
}

ul.collapsible {
    max-height: 500px;
    transition: max-height 0.25s ease-in;
    overflow-y: hidden;
}

[ng-click],
[data-ng-click],
[x-ng-click] {
    cursor: pointer;
}

/**
* Dashboard
*/
.dashboard-starter {
    margin-bottom: 30px;
}

.dashboard-content {
    .panel {
        table {
            margin-bottom: 0;
        }
    }

    .panel-default {
        .panel-heading {
            color: #333;
            background-color: #f5f5f5;
            border-color: #ddd;
        }
    }

    .panel-red a, .panel-green a, .panel-yellow a {
        color: #337AB7;
    }

    .panel-red a.btn-default, .panel-green a.btn-default, .panel-yellow a.btn-default {
        color: #333;
    }

    .panel-red, .panel-green, .panel-yellow {
        .panel-heading a {
            color: #fff;
        }
    }

    .grid {
        border: none;
    }
}

.dashboard-invite {
    margin: 3em;
    padding: 1em;
    text-align: center;
    background-color: #DFF0D8;
    p {
        padding: .5em;
        margin: 0;
    }
}

/**
* Grid
*/

#page-wrapper .page-header {
    margin: 10px 0 15px;
    .lead {
        margin-bottom: 0;
    }
}

ma-view-actions {
    margin: 3px 0 0 0;
    float: right;
}

.list-header {
    .filters {
        .filter {
            .remove_filter {
                @media (min-width: 768px) {
                    padding-top: 8px
                }
            }
        }

        .datepicker {
            .form-control {
                border-top-left-radius: 0;
                border-bottom-left-radius: 0;
            }

            .btn-default {
                height: 34px;
            }
        }

        .input-reference {
            .form-control { // fix ui-select display
                float: none;
                .ui-select-match-text, .ui-select-placeholder {
                    padding-right: 20px;
                }
            }
        }
    }
}

.grid {

    .ng-admin-type-number, .ng-admin-type-float {
        text-align: right;
        padding-right: 1em;
    }

    background-color: #fff;

    .label {
        margin-right: 5px;
        font-weight: normal;
        font-size: 12px;
        padding-top: 4px;
        text-decoration: none;
    }

    td {
        a.multiple:hover {
            text-decoration: none;
        }
    }

    thead {
        tr {
            .glyphicon {
                font-size: 13px;
                color: #aaa;
            }
        }
    }
}

div.bottom-loader {
    margin-top: 40px;
    position: inherit;
    width: auto;
    height: auto;

    &:after {
        position: relative;
        display: inherit;
        margin: 0 auto;
    }

    &:before {
        display: none;
    }
}

.pagination-bar {
    text-align: right;
    margin: 20px 0;
    .pagination {
        margin: 0 0 0 20px;
    }
    .total {
        display: inline-block;
        padding: 5px;
    }
}

/**
* Edition form
*/
.form-horizontal {

    .has-feedback .form-control.ui-select-toggle {
        padding-right: 12px;
    }

    .has-feedback .datepicker .form-control {
        padding-right: 12px;
    }

    textarea {
        height: 150px;
    }

    input[type="checkbox"], input[type="radio"] {
        max-width: 16px;
        box-shadow: none;
        cursor: pointer;
        margin: 0;
    }

    .border-around {
        margin-top: 2px;
        background-color: #FFF;
        background-image: none;
        border: 1px solid #CCC;
        border-radius: 4px;
        -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.075);
        -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        -o-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s;
        width: 100%;
    }

    .date_widget {
        width: 10em;
        @media (max-width: 768px) {
            width: 100%
        }
    }

    .datetime_widget {
        width: 15em;
        @media (max-width: 768px) {
            width: 100%
        }
    }

    .remove_button_container {
        position: absolute;
        right: -7em;
        z-index: 2;
        @media (max-width: 992px) {
            position: relative;
            right: 0;
            display: block;
            text-align: right;
        }
    }

    .ta-toolbar button {
        font-size: 12px;
        padding: 5px 8px;

        &.active {
            z-index: 1;
        }
    }

    .ng-admin-type-embedded_list .ng-admin-type-boolean ma-choice-field {
        min-width: 12em;
    }

    &#show-view {
        .label-default {
            margin-right: 5px;
            font-weight: normal;
            font-size: 12px;
            padding-top: 4px;
        }

        .control-label {
            padding-top: 0;
        }

        .show-value {
            .table {
                margin: 0;

                td {
                    border-top: 0;
                }
            }
        }

        .ng-admin-type-embedded_list, .ng-admin-type-referenced_list {
            .table-condensed > thead > tr > th {
                padding-top: 0;
            }
        }
    }

    .CodeMirror {
        border: 1px solid #CCC;
        border-radius: 4px;
    }

    .ui-select-multiple {
        &.ui-select-bootstrap {
            input.ui-select-search {
                height: 29px;
                box-shadow: none;
                padding: 0 6px 2px 10px;
                margin-bottom: 0;
            }
        }
    }
}