// Social section // Feed .mdb-feed { .news { display: flex; .label { display: block; flex: 0 0 auto; align-self: stretch; width: 2.5rem; img { width: 100%; height: auto; } } .excerpt { display: block; flex: 1 1 auto; align-self: stretch; word-wrap: break-word; margin: 0 0 1.2rem 1.2rem; .brief { padding-bottom: 0.5rem; font-weight: 500; a { color: $primary-color; } .name { display: inline-block; vertical-align: baseline; } .date { display: inline-block; float: none; padding-left: 0.7rem; font-weight: 300; font-size: 0.86rem; color: $grey-base; } } .added-images { margin-bottom: 0.6rem; img { display: inline-block; margin-right: 0.3rem; width: 7rem; } } .added-text { margin-bottom: 0.6rem; max-width: 450px; } .feed-footer { .like { font-weight: 300; font-size: 0.86rem; color: $grey-base; &:hover { .fa { color: $red-base; transition: 0.4s; } span { color: $black-base; transition: 0.4s; } } .fa { padding-right: 0.5rem; } } span a { padding-right: 0.3rem; color: $primary-color; cursor: default; } .thumbs { .fa { color: $grey-base; transition: 0.4s; &:hover { color: $grey-darken-1; } } .fa-thumbs-up { padding-right: 0.3rem; } } .comment { color: $grey-base; } } } } } // Personal card .card-personal { .card-body { .card-title { font-weight: 400; &.title-one { transition: 0.4s; &:hover { color: $primary-color; } } } .card-title { margin-bottom: 0.3rem; } .card-meta { font-weight: 300; font-size: 0.86rem; color: $grey-darken-1; .fa { padding-right: 0.5rem; } } span { transition: 0.5s; &:hover { color: $primary-color; } } } } // News card .news-card { .content { .right-side-meta { float: right; font-weight: 300; color: $grey-base; margin-top: 0.3rem; } .avatar-img { width: 2rem; margin-right: 1rem; } img { border-radius: 50%; display: inline-block; vertical-align: middle; max-width: 100%; } } .social-meta { .fa { padding-right: 0.6rem; } .fa-heart-o { cursor: pointer; color: rgba($black-base, .4); transition: 0.53s; &:hover { color: $red-base; } } span { float: right; } } .md-form { margin-top: 1.3rem; margin-bottom: 0.3rem; .prefix { font-size: 1.5rem; margin-left: 0.2rem; color: rgba($black-base, .4); ~input, .md-form .prefix~textarea { width: calc(100% - 4rem); } } .prefix.active { color: rgba($black-base, .4); } .form-control { padding-top: 0; padding-bottom: 0.5rem; margin-left: 3rem; margin-bottom: 0; height: 1.3rem; border-bottom: 1px solid rgba($black-base, .1); } } }