Move down content because we have a fixed navbar that is 50px tall
- Global add-ons
- Top navigation
- Hide default border to remove 1px line.
A card represent an element in a list
body {
padding-top: 50px; }
.sub-header {
padding-bottom: 10px;
border-bottom: 1px solid #eee; }
.navbar-fixed-top {
border: 0; }
.card {
background-color: #F9F9F9;
-webkit-border-radius: 3px;
-moz-border-radius: 3px;
-ms-border-radius: 3px;
border-radius: 3px;
border: 1px solid #d2d6de;
border-left: 5px solid #d2d6de;
padding: 5px;
min-height: 70px;
max-height: 70px;
margin-bottom: 10px;
margin-top: 10px;
/**
* A visual representation of the element
*/ }
.card:hover {
background-color: #E6E9ED; }
.card__icon {
margin-top: -6px;
min-height: 70px;
max-height: 70px;
float: left;
margin-right: 5px; }
.card__notification {
float: right !important;
position: absolute;
top: 7px;
right: 24px; }
.card__information {
position: absolute;
bottom: 5px;
right: 23px;
font-size: 10px;
font-style: italic; }
.card__actions {
display: block;
position: absolute;
bottom: 0px;
right: 15px;
background: #d2d6de;
padding: 5px;
padding-left: 15px;
padding-right: 15px;
border-radius: 5px 0px 0px 0px;
color: #333333; }
@media (min-width: 992px) {
.card {
margin-bottom: 5px;
margin-top: 5px; }
.card__actions {
bottom: 5px; } }
.card__actions a {
color: #000000; }
.card:hover .card__actions {
display: block; }
.card__actions {
display: none; }
.card:hover .card__content {
display: none; }
.card__content {
display: block; }
.card__title {
font-weight: bold; }
.card-user {
background-color: #e5dbcc; }
.card-media {
background-color: #ffffff; }
.card-post {
background-color: #5e68c4; }
div.react-app-sidebar {
margin: 0;
position: fixed;
top: 50px;
bottom: 0;
right: 0;
width: 300px;
z-index: 1000;
display: block;
padding: 20px;
overflow-x: hidden;
overflow-y: auto;
background-color: #222222; }
div.react-app-sidebar.show {
display: block; }
div.react-app-sidebar.hide {
display: none; }
div.react-app-notifications h1 {
margin-top: 0px;
color: #FFFFFF;
font-size: 22px;
margin-bottom: 13px;
text-align: center; }
div.react-app-notifications__element {
color: #E0E0E0;
clear: both;
margin-bottom: 10px; }
div.react-app-notifications__element__title {
font-weight: bold; }
div.react-app-notifications__element a {
color: #9C9C9C; }
div.react-app-status {
position: fixed;
top: 50px;
z-index: 10110;
width: 100%;
margin-left: auto;
margin-right: auto;
left: 0px;
padding-left: 10%;
padding-right: 10%; }
div.react-app-clock {
color: white;
font-weight: bold;
text-align: center;
padding: 5px;
font-size: 22px; }