<template>
    <div class="page-title">
        <div class="small-header transition animated fadeInDown">
            <div class="hpanel hnavyblue">
                <div class="panel-body">
                    <h2 class="font-light m-b-xs mb-1">
                        <i v-if="icon" :class="icon"/>
                        {{ title }}
                    </h2>

                    <small>
                        {{ description }}
                    </small>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: "JarchPageTitle",
    props: {
        title: {type: String, required: true},
        description: {type: String, required: false},
        icon: {type: String, required: false}
    },
}
</script>

<style lang="scss">

.page-title {
    font-size: 13px;
    .transition {
        transition: all 0.5s;
    }

    .small-header {
        padding: 0 !important;
    }

    .fadeInDown {
        -webkit-animation-name: fadeInDown;
        animation-name: fadeInDown;
    }

    .animated {
        -webkit-animation-duration: 1s;
        animation-duration: 1s;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
    }

    .small-header .hpanel {
        margin-bottom: 0;
    }

    .hpanel {
        background-color: none;
        border: none;
        box-shadow: none;
        /* margin-bottom: 25px; */
        /* margin-top: 20px; */
    }

    .hpanel.hnavyblue .panel-body {
        border-top: 2px solid #34495e;
    }

    .hpanel .panel-body {
        background: #fff;
        border: 1px solid #e4e5e7;
        border-radius: 2px;
        padding: 20px;
        position: relative;
    }

    .small-header .panel-body {
        padding: 15px 25px;
        border-right: none;
        border-left: none;
        border-top: none;
        border-radius: 0;
    }

    .small-header .panel-body h2 {
        font-size: 14px;
        font-weight: 600;
        text-transform: uppercase;
        margin: 0 0 0 0;
    }
}
</style>
