Advertisement
Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- //
- // Pages » Event Card White
- //
- // -----------------------------------------
- //
- // Table of Contents:
- //
- // - Event Card Anchor Wrapper
- // - Events Card White
- // - Events Card White - Date
- // - Events Card White - Image
- // - Events Card White - Details
- // - Events Card White - Registration
- //
- // -----------------------------------------
- .event-card__anchor-wrapper {
- color: #000;
- &:hover {
- color: #000;
- }
- }
- // - Event Card White
- //
- // ---------
- .event-card--white {
- text-align: center;
- margin-bottom: 20px;
- max-width: 95%;
- .flex-display();
- .flex-direction(column);
- @media (min-width: @tablet) {
- text-align: left;
- .flex-direction(row);
- }
- @media (min-width: @laptop) {
- max-width: 100%;
- }
- // - Event Card Date
- //
- // ---------
- .event-card__date {
- text-align: center;
- background: @baseGray;
- color: darken(@baseGray, 70%);
- padding: 16px 0;
- .flex-direction(row);
- .justify-content(center);
- .flex-wrap(wrap);
- }
- .event-card__day,
- .event-card__month {
- font-weight: bold;
- }
- .event-card__day,
- .event-card__weekday,
- .event-card__month {
- margin: 0 5px;
- }
- @media (min-width: @tablet) {
- .event-card__date {
- padding: 20px 10px;
- .flex-basis(15%);
- }
- .event-card__day {
- .font-size(50);
- }
- .event-card__day,
- .event-card__weekday,
- .event-card__month {
- width: 100%;
- }
- }
- @media (min-width: @laptop) {
- .event-card__date {
- padding: 30px 10px;
- .flex-basis(12%);
- }
- }
- // - Event Card Image
- //
- // ---------
- .event-card__image-container {
- overflow: hidden;
- width: 100%;
- height: 175px;
- position: relative;
- }
- .event-card__image {
- min-width: 120%;
- position: absolute;
- left:50%;
- margin-left: -60%;
- }
- @media (min-width: @tablet) {
- .event-card__image-container {
- height: 165px;
- width: auto;
- .flex-basis(25%);
- }
- .event-card__image {
- height: 100%;
- min-width: auto;
- width: auto;
- left: 0;
- margin-left: 0;
- }
- }
- // - Event Card Description
- //
- // ---------
- .event-card__description {
- padding: @leading 16px;
- border-bottom: 1px solid @baseGray;
- margin-bottom: 0;
- .event-card__title {
- margin-bottom: 24px;
- .font-size(19);
- }
- .event-card__location {
- margin-top: 10px;
- margin-bottom: 15px;
- text-align: center;
- text-transform: uppercase;
- font-weight: bold;
- letter-spacing: 3px;
- &--blue {
- color: @hrBlue;
- }
- &--orange {
- color: @hrOrange;
- }
- &--claret {
- color: @hrClaret;
- }
- &--gold {
- color: @hrGold;
- }
- }
- .event-card__time {
- &:before {
- content: "";
- width: 16px;
- height: 16px;
- position: absolute;
- left: -25px;
- bottom: 3px;
- background-image: url('/assets/images/icons/clock.png');
- background-repeat: no-repeat;
- background-size: contain;
- .inline-block()
- }
- }
- @media (min-width: @tablet) {
- position: relative;
- padding: 10px @leading;
- border-bottom: none;
- border-right: 1px solid @baseGray;
- .flex-basis(60%);
- .event-card__location {
- margin-bottom: 0;
- letter-spacing: 1px;
- text-align: left;
- }
- .event-card__time {
- position: absolute;
- bottom: 15px;
- left: 50px;
- }
- .event-card__title {
- .line-height(28);
- }
- }
- @media (min-width: @laptop) {
- .event-card__location {
- margin-top: 16px;
- }
- }
- }
- // - Event Card White Registration
- //
- // ---------
- .event-card__registration {
- .flex-display();
- .flex-direction(column);
- .justify-content(flex-start);
- @media (min-width: @tablet) {
- padding: 20px 36px;
- }
- @media (min-width: @laptop) {
- padding: 30px 36px;
- }
- }
- .event-card__cost {
- margin: 0 0 15px 0;
- text-transform: uppercase;
- color: @hrBlue;
- font-weight: bold;
- }
- .event-card__cta {
- font-weight: bold;
- color: @hrGold;
- &:hover {
- color: lighten(@hrGold, 10%)
- }
- }
- }
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement