| 123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199200201202203204205206207208209210211212213214215216217218219220221222223224225226227228229230231232233234235236237238239240241242243 |
- //
- // Cards
- // --------------------------------------------------
- .card {
- margin: 10px 0 20px 0;
- padding-top: 20px;
- border: 1px solid @navlistBorder;
- // border-bottom-width: 2px;
- // border-top-width: 0;
- background-color: @white;
- .border-radius(@borderRadiusSmall);
- .box-shadow(none);
- .box-sizing(border-box);
- .card-heading {
- padding: 0 20px;
- margin: 0;
- &.simple {
- border-bottom: 1px solid @whiteSmoke;
- color: #777;
- font-size: 20px;
- font-weight: 300;
- }
- &.image {
- img {
- display: inline-block;
- vertical-align: top;
- .border-radius(50%);
- border: 0;
- margin-right: 15px;
- width: 46px;
- height: 46px;
- }
- .card-heading-header {
- display: inline-block;
- vertical-align: top;
- h3 {
- font-size: 14px;
- color: @navbarLinkColorHover;
- line-height: 16px;
- margin: 0;
- }
- span {
- font-size: 12px;
- color: @grayLight;
- }
- }
- }
- }
- .card-body {
- margin-top: 20px;
- padding: 0 20px;
- }
- .card-media {
- padding: 0 20px;
- margin: 0 -14px;
- img {
- max-height: 100%;
- max-width: 100%;
- }
- }
- .card-actions {
- // border-bottom: 1px solid @whiteSmoke;
- min-height: 30px;
- margin: 20px 0 0 0;
- padding: 0 20px 20px 20px;
- }
- .card-comments {
- padding: 20px;
- margin: 0;
- background-color: @cardFooterBackground;
- .comments-collapse-toggle {
- margin: 0 20px 12px 20px;
- padding: 0;
- a,
- span {
- color: #999;
- overflow: hidden;
- text-overflow: ellipsis;
- white-space: nowrap;
- font-size: 12px;
- padding-right: 5px;
- }
- }
- }
- }
- .card-comments .media-heading {
- font-size: 13px;
- font-weight: bold;
- }
- .card {
- &.people {
- position: relative;
- display: inline-block;
- vertical-align: top;
- width: 170px;
- height: 300px;
- padding-top: 0;
- margin-left: 20px;
- overflow: hidden;
- &:first-child {
- margin-left: 0;
- }
- .card-top {
- position: absolute;
- display: inline-block;
- top: 0;
- left: 0;
- background-color: @white;
- width: 170px;
- height: 150px;
- &.green {
- background-color: #53a93f;
- }
- &.blue {
- background-color: @navbarBorder;
- }
- }
- .card-info {
- .box-sizing(border-box);
- position: absolute;
- display: inline-block;
- top: 150px;
- width: 100%;
- height: 101px;
- overflow: hidden;
- background: @white;
- .title {
- display: block;
- font-size: 16px;
- font-weight: bold;
- line-height: 18px;
- margin: 8px 14px 0 14px;
- overflow: hidden;
- color: #404040;
- }
- .desc {
- display: block;
- line-height: 16px;
- margin: 8px 14px 0 14px;
- overflow: hidden;
- font-size: 12px;
- color: @graySemiLight;
- text-overflow: ellipsis;
- }
- }
- .card-bottom {
- .box-sizing(border-box);
- position: absolute;
- bottom: 0;
- left: 0;
- display: inline-block;
- width: 100%;
- padding: 10px 20px;
- line-height: 29px;
- text-align: center;
- }
- }
- }
- .card {
- &.hovercard {
- overflow: hidden;
- position: relative;
- width: 240px;
- padding-top: 0;
- text-align: center;
- background-color: #fff;
- img {
- height: 135px;
- width: 240px;
- }
- .avatar {
- margin-bottom: -40px;
- position: relative;
- top: -40px;
- img {
- width: 80px;
- height: 80px;
- max-width: 80px;
- max-height: 80px;
- .border-radius(50%);
- }
- }
- .info {
- padding: 4px 8px 10px;
- .title {
- color: #262626;
- font-size: 24px;
- line-height: 1;
- vertical-align: middle;
- margin-bottom: 4px;
- }
- .desc {
- color: #737373;
- font-size: 12px;
- line-height: 20px;
- overflow: hidden;
- text-overflow: ellipsis;
- }
- }
- .bottom {
- margin-bottom: 17px;
- padding: 0 20px;
- // .btn {
- // width: 85px;
- // }
- }
- }
- }
|