Bootstrap - overriding + animations

Overriding bootstrap styles (mostly color, dropdshadows, borders etc.) by duplicating their base selectors into our custom css file.

HTML

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/js/bootstrap.min.js"></script>
<nav class="navbar navbar-default" role="navigation">
    <div class="container-fluid">
        <!-- Brand and toggle get grouped for better mobile display -->
        <div class="navbar-header">
            <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1"> <span class="sr-only">Toggle navigation</span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>
 <span class="icon-bar"></span>

            </button> <a class="navbar-brand" href="#">Brand</a>

        </div>
        <!-- Collect the nav links, forms, and other content for toggling -->
        <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
            <ul class="nav navbar-nav">
                <li class="active"><a href="#">Link</a>

                </li>
                <li><a href="#">Link</a>

                </li>
                <li class="dropdown"> <a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <span class="caret"></span></a>

                    <ul class="dropdown-menu" role="menu">
                        <li><a href="#">Action</a>

                        </li>
                        <li><a href="#">Another action</a>

                        </li>
                        <li><a href="#">Something else here</a>

                        </li>
                        <li class="divider"></li>
                        <li><a href="#">Separated link</a>

                        </li>
                        <li class="divider"></li>
                        <li><a href="#">One more...

CSS

.dropdown-menu {
    border-radius: 0px;
    -webkit-box-shadow: none;
    box-shadow: none;
    border: 2px solid #6daedf;
}
.dropdown-menu:after {
    content:' ';
    position: absolute;
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 0 6px 6px 6px;
    border-color: transparent transparent #6daedf transparent;
    content:' ';
    position: absolute;
    top: -6px;
}
@media (min-width: 768px) {
    .navbar-right .dropdown-menu:after {
        right: 2px;
    }
     .dropdown-menu{
        padding: 0;
    }
    .dropdown-menu .divider {
        background-color: #6daedf;
        margin: 0;
    }
    .dropdown-menu>li>a{
        padding: 7px 20px;
    }
    .dropdown-menu>li>a:hover, .dropdown-menu>li>a:focus {
        background: #6daedf;
        color: #ffffff;
    }
    .prodile-dropdown {
        padding-left: 119px;        
    }
    .dropdown-profile-pic{
        position: absolute;
        overflow: hidden;
        top: 0px;
        left: 0px;
    }
    .dropdown-profile-pic .dropdown-profile-pic-btn{
        position: absolute;
        padding: 7px 15px 7px 14px !important;
        background: #6daedf;
        color: #ffffff !important;
        bottom: -34px;
       -webkit-transform: translate3d(0,0,0);
        -webkit-transition: bottom 100ms linear;
    -moz-transition: bottom 100ms linear;
    -o-transition: bottom 100ms linear;
    transition: bottom 100ms linear;
    }
    .dropdown-profile-pic:hover .dropdown-profile-pic-btn{
        bottom: 0px;
    }
    .dropdown-profile-pic img {
        width: 119px;
    }
}
@media (max-width: 768px) {
   
    .dropdown-menu:after {
        display: none;
    }
    .navbar-right .dropdown-menu:after {
        display: none;
    }
    .dropdown-profile-pic {
        display: none;
    }
}