@charset "UTF-8";

// NPM CSS Imports
@import "~ChuckCSS/chuckcss/front";
@import "~vue-flatpickr/theme/material_blue.css";
@import '~dropzone/dist/dropzone.css';

// External libraries
@import "//maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css";
@import "//code.ionicframework.com/ionicons/2.0.1/css/ionicons.min.css";
@import "//cdnjs.cloudflare.com/ajax/libs/animate.css/3.5.2/animate.min.css";
@import "//fonts.googleapis.com/css?family=Droid+Sans:400,700";

// App Pages
@import "login";
@import "header";
@import "nav";
@import "tooltips";
@import "forms";
@import "dashboard";

// Pages with data tables : i.e. users, cms, admins, news...
@import "datatables-pages";
@import "animations";


._droid() {
    font-family: 'Droid Sans', sans-serif;
}

@gray: #8f939e;
@black: #23272d;
@bg-body: #eff3f8;
@dark: #444d58;
@badges-br : 3;

// VueJS hide during loading app
[v-cloak] {
    display:none;
}

// Center app in screen
.cc-inside {
    ._inside(90%)
}


// Admin app
body {
    background-color: @bg-body;
    ._droid;

    main {
        padding-bottom: 30px;
    }

    // COMMON ELEMENTS
    // Boxed elements
    .boxed {
        padding: 1em;
        margin: 1em 0;
        background-color: white;
        border-radius: 2px;
        box-shadow: 1px 1px 2px 0px rgba(0,0,0,0.2);
        &.cc-ma-0 {
            margin: 0;
        }

        &.columns {
            &> * {
                padding: 0
            }
        }
    }
    // Top of pages, containing <h1> title
    .top-page {
        background-color:white;
        padding: 20px 0;
        margin-bottom: 30px;

        .columns > * {
            ._reset;
        }

        h1 {
            color:#697882;
            font-size: 2.2rem;
        }
    }
}
