/* BOLETIA CARDS MAIN STYLES */ .o-boletia-card { background:$white; @include shadow($gray); position: relative; } .u-cards-animate { @include cards-transition(-1rem); } /* BOLETIA LAYOUT CARDS */ .o-layout-card {@extend .o-boletia-card;} .o-layout-card__info { padding: $base-space * 2; } /* BOLETIA BOX CARD */ .o-boletia-box-card { @extend .o-boletia-card; margin-bottom: $base-space * 2; } .o-boletia-box-card__info { padding: $base-space * 1.25 $base-space * 1.5; } .o-boletia-box-card__title { font-family: "proxima-nova-condensed", sans-serif; } .o-boletia-box-card__details { li { padding:0 0 $base-space * 0.25; font-size: 1.3rem; color: $bodytext; } .ss-icon { margin-right: $base-space * 0.5; color:darken($lightgray,25%) } } .o-boletia-box-card__banner { width: 100%; overflow: hidden; border-bottom: 1px solid darken($lightgray,5%); a {display: block;} img { width: 100%; display: block; } } .o-boletia-box-card__banner--placeholder { background-color: lighten($lightgray,3%); background-image: url(/assets/icons/event-placeholder.png); background-image: url(/assets/icons/event-placeholder.svg); background-repeat: no-repeat; background-position: center; background-size: 30%; } .o-boletia-box-card__banner--map { height: auto; } .o-boletia-box-card__actions { padding:$base-space * 0.5 $base-space * 1.5; border-top: 1px dashed $gray; font-size: 1.3rem; li { @extend .u-inline-block-middle; width:50%; margin-right: -2px; a { color: $bodytext; text-decoration: none; &:hover,&:focus { color: $blue; } } &:first-child {text-align: left;} &:last-child {text-align: right;} } .ss-icon { @extend .u-inline-block-middle; @extend .u-icon-size; margin-right: $base-space * 0.25; } } /* BOLETIA BAR CARD */ .o-boletia-bar-card { @extend .o-boletia-card; margin-bottom: $base-space * 1.5; } .o-boletia-bar-card__info { padding: $base-space; color:lighten($black,20%); font-size: 1.4rem; .ss-icon { font-size: 1rem; margin-right: $base-space * 0.5; } .ss-delete {color: $red;} .ss-alert {color: $yellow;} .ss-check {color: $green;} } .o-boletia-bar-card__title { letter-spacing: 0;/* Provisional fixes until main.css becomes unused*/ a { color:lighten($black,20%); &:hover {color:$blue;} } } .o-boletia-bar-card__title, .o-boletia-bar-card__details { margin-left: $base-space * 1.5; .o-boletia-bar-card__details { li { margin: $base-space * 0.25 0; font-size: 1.3rem; } .ss-icon { display: inline-block; margin-right: $base-space * 0.3; font-size: 1.1rem; } } .o-boletia-bar-card__actions { display: table; } .o-boletia-bar-card__actions--booking { height:12.7rem; } .o-boletia-bar-card__actions--team { height:11.9rem; .o-action-card-button {width: 50%} } .o-boletia-bar-card__action-list { li { margin: $base-space * 0.4 0; font-size: 1.3rem; } a { color: $bodytext; display: inline-block; &:hover, &:focus { color: $blue; } } .ss-icon { display: inline-block; margin-right: $base-space * 0.4; font-size: 1rem; } } .o-boletia-bar-card__email { word-break:break-all; line-height: 1.1; padding: $base-space * 0.25 0; } /* BOLETIA EMPTY CARDS */ .o-empty-card { @extend .o-boletia-card;} .o-empty-card__info {padding: $base-space * 3;} /* ACTION CARD BUTTON */ .o-action-card-button { display: table-cell; text-align: center; text-transform: uppercase; vertical-align: middle; font-size: 1.2rem; color: $white; font-weight: 600; line-height: 1.2; @include animate; .ss-icon { display: block; font-size: 150%; margin-bottom: $base-space * 0.5; @include animate; } &:hover { text-decoration:none; color: $white; .ss-icon { -webkit-transform: scale(1.4,1.4); -moz-transform: scale(1.4,1.4); -ms-transform: scale(1.4,1.4); -o-transform: scale(1.4,1.4); transform: scale(1.4,1.4); } } &.is-checkedin { background:$green; &:hover .o-action-card-button__icon { -webkit-transform: none; -moz-transform:none; -ms-transform:none; -o-transform:none; transform:none; } } } /* Empty State Card for Features */ .o-empty-state-card { @extend .o-boletia-card; } .o-empty-state-card__info { padding: $base-space * 2.5 $base-space * 4.5; overflow: hidden; a { display: inline-block; font-weight: bold; font-size: 2.3rem; } p { font-weight: 300; font-size: 1.8rem; margin-bottom: 0; } } .o-empty-state-card__icon { display:block; width: 19.1rem; margin-right: $base-space * 2.5; @extend .u-left; } .o-empty-state-card__title { border:none; letter-spacing: 0; /* OVERRIDE OF MAIN.LESS */ } .o-empty-state-card__list { list-style-type: square; list-style-position: inside; margin-bottom: $base-space * 0.5; li { font-weight: 300; font-size: 1.8rem; margin-bottom: $base-space * 0.5; } li:last-child {margin-bottom: 0;} } .o-empty-state-card__help { padding: $base-space * 1 $base-space * 2; background: lighten($lightgray,3%); display: block; color: $bodytext; text-decoration: none; cursor: pointer; font-style: italic; @include animate; border-top: 1px solid darken($lightgray,5%); a { color: $blue; } &:hover { background: $lightgray; } .is-important { color: $red; font-weight: bold; } } /* BOOKINGS */ .o-purchased-tickets { text-align: right; height:11rem; display: table-cell; vertical-align: middle; padding-right: $base-space; } .o-purchased-tickets__ticket { padding: $base-space * 0.5; background:lighten($darkblue,10%); color:$lightgray; @extend .u-inline-block; margin: $base-space * 0.25; } .o-purchased-tickets__actions { padding-right: $base-space; } /* ACTIVITIES */ .o-boletia-bar-card--activity { border-left: $base-space solid $darkgray; } .o-boletia-bar-card__activity-col { border-right: 1px dashed #CBCCCC; } /* PAYMENT METHODS */ .o-boletia-box-card__info--payment { height: 12rem; }