liberty-prettydiff
Version:
Language aware code comparison tool for several web based languages. It also beautifies, minifies, and a few other things.
843 lines (803 loc) • 23 kB
Plain Text
/*prettydiff.com noleadzero:true*/
@carrier-logo-height: 33px;
@carrier-logo-width: 44px;
.itemResultsCard() {
@arrow-size: 10px;
@font-size-xxs: 10px;
@line-height-xxs: 12px;
.itemResultsCard {
border: 1px solid @color-neutral-md-light;
.clearfix();
color: @color-black;
// Card Layout Sections
.itemSummary {
.display-inline-block();
float: left;
width: 70%;
}
.itemcost {
.display-inline-block();
float: right;
width: 30%;
}
.itemDetails {
clear: both;
max-height: 0;
overflow: hidden;
.transition(all .2s ease);
&.is-open {
max-height: 999em;
// TODO: Fix known issue with Android browser on 4.4.2. Does not respect overflow: visible, yet we need microcontent to be available.
// overflow: visible;
}
}
// Card Utility Classes
.itemportCodeDiffer,
.alert span {
background-color: lighten(@color-error, 20%);
color: @color-black;
}
.contactitemlineToBuyText {
// invisible by default, we only show for @breakpoint-s
display: none;
}
.buyFromitemline {
font-size: @font-size-xs;
}
// item Summary
.slice {
.clearfix();
margin-bottom: @offset-vertical-sm;
}
.lastSlice {
margin-bottom: 0;
}
.sliceGroup {
.display-inline-block();
float: left;
padding-right: @offset-horizontal-lg;
width: auto;
&:last-child {
padding-right: 0;
}
}
.sliceGroup-logo {
max-width: @carrier-logo-width + @offset-horizontal-md;
padding-right: @offset-horizontal-md;
width: @carrier-logo-width + @offset-horizontal-md;
}
.sliceGroup-time {
width: 40%;
}
.sliceGroup-duration {
width: 21%;
}
.sliceGroup-stopover {
width: 23%;
}
.thingTimes {
.clearfix();
background: url("/image/global/icon-thing-legs.png") repeat-x 0 -14px;
font-weight: bold;
text-transform: lowercase;
width: 100%;
.info {
.display-inline-block();
float: left;
white-space: nowrap;
width: auto;
span {
background-color: @color-white-space;
padding: 0 1px 0 0;
}
}
.arrivalTime {
float: right;
text-align: right;
span {
background: @color-white-space url("/image/global/icon-thing-legs.png") no-repeat 2px 4px;
display: block;
padding: 0 12px 0 18px;
position: relative;
}
}
.overNightthingIndicator {
border: none;
color: @color-attention;
cursor: default;
font-size: @font-size-xxs;
font-weight: normal;
line-height: @line-height-xxs;
position: absolute;
right: 0;
top: -0.5em;
}
}
.thingCarrier,
.thingLabelMultiCity,
.thingOnd,
.thingStopsDuration,
.thingTier,
.sliceSummaryOperatedBy,
.sliceSummaryMessages {
color: @color-neutral-md;
font-size: @font-size-xs;
line-height: @line-height-sm;
}
.sliceSummaryOperatedBy,
.sliceSummaryMessages,
.itemResultDetailsToggle {
clear: both;
padding-left: @carrier-logo-width + @offset-horizontal-md; // match width of logo column to align with thing times
padding-top: @offset-vertical-xs;
}
.itemResultDetailsToggle {
font-size: @font-size-xs;
.progressIndicator {
.display-inline-block();
margin-left: @offset-horizontal-sm;
}
}
.sliceSummaryOperatedBy {
font-size: @font-size-xxs;
line-height: @line-height-xxs;
}
// Styled hovers of additional descriptive content
// IE7 users will still get <abbr> titles
[data-tooltip] {
position: relative;
}
[data-tooltip]:hover:before {
background: @color-brand-3;
border-radius: @border-radius-md;
border: @button-border-width solid @color-neutral-md-light;
color: @color-white-space;
content: attr(data-tooltip);
font-weight: bold;
left: 50%;
margin-top: (@button-border-width - @arrow-size);
padding: @offset-vertical-sm @offset-horizontal-sm;
pointer-events: none;
position: absolute;
top: 0;
.translate(-50%, -100%);
white-space: nowrap;
width: auto;
z-index: 1;
.lt-ie9 & {
// IE8 requires dimensions to be set to center tooltip
margin-left: -110px;
margin-top: -41px;
min-width: 200px; // titles that are longer than this will expand to fit but not be centered;
text-align: center;
}
}
[data-tooltip]:hover:after {
border: @arrow-size solid transparent;
border-top-color: @color-brand-3;
content: " ";
height: 0;
left: 50%;
margin-left: -@arrow-size;
margin-top: -@arrow-size - 1px;
pointer-events: none;
position: absolute;
top: 0;
width: 0;
z-index: 1;
}
// item cost Container
.costGroup {
.display-inline-block();
float: left;
line-height: 1;
padding-right: @offset-horizontal-sm;
width: 50%; // 2 groups per row per container
text-align: right;
&:first-child {
width: 51%;
}
&:last-child {
padding-right: 0;
width: 49%;
}
.lt-ie9 & {
width: 50%;
}
}
.primarycost {
.money {
display: block;
font-size: 1.8em;
font-weight: bold;
line-height: 0.9;
}
.money-symbol {
font-size: @font-size-base;
vertical-align: text-top;
}
.money-cents {
position: absolute;
left: -2000em;
}
.numNights {
background-color: @color-error;
color: @color-neutral-md;
display: inline-block;
font-size: 0.9em;
line-height: 1;
margin: 0.25em 0 0.5em;
}
.aphIcons {
span.i {
text-indent: 0;
font-size: @font-size-md;
span, em {
display: inline-block;
text-indent: -2000em;
visibility: hidden;
}
}
span.i-plus {
font-size: 0.5em;
vertical-align: 0.5em;
}
}
.costMetric {
color: @color-neutral-md;
font-size: 0.85em;
}
}
.discountPricing {
font-size: @font-size-xxs;
line-height: @line-height-xxs;
padding-bottom: @offset-vertical-xs;
.microTrigger {
cursor: pointer;
}
}
.showPaymentDiscountContent {
font-size: @font-size-xs;
line-height: @line-height-sm;
padding: @offset-vertical-sm @offset-horizontal-sm;
text-align: left;
width: 200px;
}
.paymentDiscountHeader {
font-weight: bold;
}
.loyaltyEarnAmount {
color: @color-loyalty;
font-size: @font-size-xs;
line-height: @line-height-xxs;
}
.itemCard-button .button-primary {
overflow: hidden;
// Copied from buttons.less to inline here
// Workaround for GOF-704 IE9/IE10 mixed inline/external media query bug
@ie7-offset-horizontal-top: 5px;
@ie7-offset-horizontal-bottom: 2px;
@button-line-height: (@font-size-xl + 3); // make everything work like firefox
@vertical-padding: (@input-height - (2 * @button-border-width) - @button-line-height) / 2;
@ie7-height: @input-height - @ie7-offset-horizontal-top - @ie7-offset-horizontal-bottom - @button-border-width;
@ie-height: @input-height - (2 * @vertical-padding) - (2 * @button-border-width);
background-color: @color-button;
.background-image(linear-gradient(to bottom, lighten(@color-button, 10%) 0%,@color-button 100%));
border-radius: @border-radius-md;
border: @button-border-width solid @color-button;
.box-shadow(1px 1px 0 rgba(255, 255, 255, .2) inset);
.box-sizing(border-box);
color: @color-white-space;
.display-inline-block(bottom);
font-size: @font-size-xl;
font-weight: bold;
line-height: @button-line-height;
max-width: 100%;
min-height: @input-height;
padding: @vertical-padding @offset-horizontal-sm;
text-align: center;
text-decoration: none;
white-space: normal;
&:visited {
color: @color-white-space;
text-decoration: none;
}
&:focus,
&:hover {
background-color: darken(@color-button, 5%);
text-shadow: 1px 1px 2px darken(@color-button, 15%);
color: @color-white-space;
}
&:active {
background-color: lighten(@color-button, 10%);
.background-image(linear-gradient(to top, lighten(@color-button, 10%) 0%,@color-button 100%));
.box-shadow(inset 0 0 6px 4px @color-button);
}
.lt-ie8 & {
outline: 0;
padding-top: @ie7-offset-horizontal-top; /* adjust padding to account for difference in presentation in IE7 */
padding-bottom: @ie7-offset-horizontal-bottom;
height: @ie7-height;
line-height: @ie7-height;
}
.lt-ie9 & {
min-height: @ie-height;
line-height: @ie-height;
}
}
.lsaAlert {
color: @color-attention;
font-size: @font-size-xxs;
line-height: @line-height-xxs;
}
.catchAllContainer {
clear: both;
padding: @offset-vertical-sm 0;
}
.catchAll {
background: @color-neutral-x-light;
.border-radius(@border-radius-md);
padding: 5px 10px;
& > p {
margin: @offset-vertical-xs 0;
}
// Uniform icon styles
i {
font-size: @font-size-md;
margin-right: 3px;
}
}
.loyaltyEarn {
color: @color-loyalty;
}
.pricing .itemFreeCancel {
color: @color-promo;
font-size: @font-size-xs;
}
.itemFreeCancel {
i, strong {
color: @color-promo;
}
}
.i-baggage {
color: @color-neutral-md-dark;
}
.i-baggage-x {
color: @color-attention;
}
}
// Timeline view of details
.itemSliceDetails {
color: @color-neutral-md-dark;
font-size: @font-size-xs;
line-height: @line-height-sm;
}
.timeline-container {
display: table;
table-layout: fixed;
width: 100%;
}
.timeline-group {
display: table-row;
}
.timeline-item {
display: table-cell;
padding: 0 0 @offset-vertical @offset-horizontal-sm;
&.timeline-date {
text-align: right;
width: 22%;
}
&.timeline-time {
background: url("/image/global/vertical-dash.png") repeat-y 100% @offset-vertical-sm;
padding-right: @offset-horizontal-md;
position: relative;
text-align: right;
text-transform: lowercase;
width: 14%;
}
&.timeline-info {
padding-left: @offset-horizontal-md;
width: 64%;
}
}
.itemSliceDetails:last-child .timeline-group.last-child .timeline-item {
padding-bottom: 0;
}
.timeline-marker {
background: @color-white-space;
border-radius: 100%;
border: 2px solid @color-brand-2;
height: 11px;
position: absolute;
right: -5px;
top: 5px;
width: 11px;
}
.timeline-label {
font-size: @font-size-sm;
line-height: @line-height-md;
}
.soloLeg .timeline-group:first-child,
.firstLeg .timeline-group:first-child,
.soloLeg .timeline-group.last-child,
.lastLeg .timeline-group.last-child {
.timeline-label {
color: @color-black;
}
.timeline-marker {
background: @color-brand-2;
}
}
.soloLeg .timeline-group:first-child .timeline-marker:before,
.firstLeg .timeline-group:first-child .timeline-marker:before {
border-top: 5px solid @color-white-space;
content: "";
height: 0;
left: 0;
position: absolute;
top: -7px;
width: 100%;
}
.soloLeg .timeline-group.last-child .timeline-marker:before,
.lastLeg .timeline-group.last-child .timeline-marker:before {
background: url("/image/global/vertical-dash.png") repeat-y 50% 0;
content: "";
height: 5px;
left: 0;
position: absolute;
top: -7px;
width: 100%;
}
.soloLeg .timeline-group.last-child .timeline-time,
.lastLeg .timeline-group.last-child .timeline-time {
background: none;
}
.timeline-thingInfo {
padding-top: @offset-vertical-sm;
.list-piped {
overflow: visible;
}
}
.timeline-messages {
padding-top: @offset-vertical-xs;
}
.fareFamily {
.display-inline-block();
.microContent {
padding: @offset-vertical-sm @offset-horizontal-sm;
width: 240px;
}
}
.lt-ie8 & {
// Let's not make IE7 work too hard, give it stacked details secions
.timeline-group {
display: block;
position: relative;
}
.timeline-item {
display: block;
padding: 0 0 @offset-vertical @offset-horizontal-md;
width: 100%;
&.timeline-date {
background: url("/image/global/vertical-dash.png") repeat-y 5px @offset-vertical-sm;
display: inline-block;
float: left;
padding: 0 @offset-horizontal-sm 0 @offset-horizontal-md;
text-align: left;
width: auto;
}
&.timeline-time {
background: url("/image/global/vertical-dash.png") repeat-y 5px @offset-vertical-sm;
padding: 0 0 0 @offset-horizontal-md;
position: static;
text-align: left;
width: 100%;
}
&.timeline-info {
background: url("/image/global/vertical-dash.png") repeat-y 5px @offset-vertical-sm;
clear: left;
margin-left: 0;
padding: 0 0 @offset-vertical @offset-horizontal-md;
width: 100%;
}
.timeline-marker {
left: 0;
margin-left: 0;
}
}
.soloLeg .timeline-group.last-child .timeline-item,
.lastLeg .timeline-group.last-child .timeline-item {
background: none;
}
}
}
// item-responsify mixin
// targetClass - the class of the module container
.item-responsify(@targetClass) {
@lg: {
.@{targetClass} {
.itemResultsCard {
.sliceGroup-duration {
padding-right: @offset-horizontal-md;
}
}
}
.itemResultsMod {
// space for intrastitial to live before results load
min-height: 450px;
}
};
@md: {
.@{targetClass} {
.itemResultsCard {
.itemSummary {
width: 69%;
}
.itemcost {
width: 31%;
}
.sliceGroup {
padding-right: @offset-horizontal-sm;
&:last-child {
padding-right: 0;
}
}
}
.itemSliceDetails {
.timeline-item {
padding: 0 0 @offset-vertical @offset-horizontal-sm;
&.timeline-date {
width: 29%;
}
&.timeline-time {
width: 16%;
padding-right: 15px;
}
&.timeline-info {
width: 55%;
padding-left: 15px;
}
}
}
}
};
@sm: {
.@{targetClass} {
.itemResultsCard {
position: relative;
.itemSummary {
width: 100%;
}
.itemcost {
margin-bottom: (0 - @carrier-logo-height); // bring primary container up minus the height of carrier logo
width: 100%;
}
.contactitemlineToBuyText {
display: block;
margin-bottom: @offset-vertical-sm;
}
.costGroup {
padding-left: @carrier-logo-width + @offset-horizontal-sm; // width of carrier logo plus offset
width: 100%;
}
.pricing {
padding-right: 0;
position: relative;
z-index: 1;
}
.itemCard-button .buyFromitemline {
// We show text only with no popup link on small screens
display: none;
}
.itemCard-button .button-primary {
&,
&:visited,
&:focus,
&:hover,
&:active {
// convert to an invisible button that covers the entire card at smallest breakpoints
background-color: transparent;
background-image: none;
border: none;
.box-shadow(none);
color: transparent;
display: block;
height: 100%;
left: 0;
position: absolute;
text-decoration: none;
text-shadow: none;
top: 0;
width: 100%;
z-index: 1;
}
}
.sliceGroup {
padding-right: 3px;
&:last-child {
padding-right: 0;
}
}
.sliceGroup-logo {
display: block;
float: none;
padding-right: 0;
}
.sliceGroup-time {
width: 49%;
}
.sliceGroup-duration {
width: 23%;
}
.sliceGroup-stopover {
width: 28%;
}
.sliceSummaryOperatedBy,
.sliceSummaryMessages {
padding-left: 0;
}
[data-tooltip]:hover:before,
[data-tooltip]:hover:after {
content: " ";
display: none;
}
.lsaAlert {
display: none;
}
.itemResultDetailsToggle {
display: none;
}
.itemDetails {
// details is not supported in smallest view as its trigger is hidden, collapse/hide regardless of .is-open
max-height: 0;
overflow: hidden;
.transition(all 0s linear);
}
.thingTier .microTrigger {
color: @color-neutral-md;
font-weight: normal;
}
}
.itemSliceDetails {
// label and date stack above the thing time
.timeline-group {
.clearfix();
display: block;
position: relative;
}
.timeline-item {
.display-inline-block();
&.timeline-date {
.display-inline-block();
background: url("/image/global/vertical-dash.png") repeat-y 100% @offset-vertical-sm;
float: left;
padding-bottom: 0;
padding-right: 15px;
width: 38%;
}
&.timeline-time {
.display-inline-block();
clear: left;
float: left;
position: static;
width: 38%;
}
&.timeline-info {
.display-inline-block();
background: url("/image/global/vertical-dash.png") repeat-y 0 @offset-vertical-sm;
float: none;
margin-left: -1px;
padding-left: 15px;
width: 62%;
}
.timeline-marker {
left: 38%;
margin-left: -6px;
right: auto;
}
}
}
.soloLeg .timeline-group.last-child .timeline-item,
.lastLeg .timeline-group.last-child .timeline-item {
background: none;
}
.itemcost .i-baggage-x {
display: none;
}
}
.placeDetailsitemMod {
.itemResultsCard .detailsContainer .itemResultDetailsToggle {
display: block;
padding-left: 0;
}
}
};
@xxs: {
.@{targetClass} {
.itemResultsCard {
font-size: @font-size-xs + 1px; // 13px
.sliceGroup {
padding-right: 1px;
&:last-child {
padding-right: 0;
}
}
.sliceGroup-stopover {
text-align: right;
}
.thingTimes {
.arrivalTime {
span {
// remove itemplane icon and maximize space available
background-image: none;
padding: 0 12px 0 1px;
}
}
}
.itemSliceDetails {
// stack details secions and have markers to the left
.timeline-group {
display: block;
position: relative;
}
.timeline-item {
display: block;
padding: 0 0 @offset-vertical @offset-horizontal-md;
width: 100%;
&.timeline-date {
background: url("/image/global/vertical-dash.png") repeat-y 5px @offset-vertical-sm;
display: inline-block;
float: left;
padding: 0 @offset-horizontal-sm 0 @offset-horizontal-md;
text-align: left;
width: auto;
}
&.timeline-time {
background: url("/image/global/vertical-dash.png") repeat-y 5px @offset-vertical-sm;
padding: 0 0 0 @offset-horizontal-md;
position: static;
text-align: left;
width: 100%;
}
&.timeline-info {
background: url("/image/global/vertical-dash.png") repeat-y 5px @offset-vertical-sm;
clear: left;
margin-left: 0;
padding: 0 0 @offset-vertical @offset-horizontal-md;
width: 100%;
}
.timeline-marker {
left: 0;
margin-left: 0;
}
}
.timeline-label {
font-size: @font-size-xs + 1px; // 13px
}
}
.soloLeg .timeline-group.last-child .timeline-item,
.lastLeg .timeline-group.last-child .timeline-item {
background: none;
}
}
}
};
.responsify(@lg, @md, @sm, {}, @xxs);
}
.action,
.file-actions .fileaction,
.library-actions .libraryaction,
.nav .fileaction {
@include border-radius(0.3em);
background-image: url('../images/page_white.png');
background-position: 2px 2px;
background-repeat: no-repeat;
color: #666;
display: block;
float: right;
height: 18px;
margin-right: 5px;
padding: 1px 5px;
text-decoration: none;
width: 10px;
}