<commit_before>// Cards
//
//
// .card
//
// Styleguide 1.3

// -----------------------------------------------------------------------------
// Base card object and sizing variables
//
// - Width of a Card defaults to single - override when necessary
// -----------------------------------------------------------------------------

$card-grid-height: 380px

$double-card-width: 394px

$card-image-height: 185px
$stack-card-image-height: 275px

$card-content-padding: 15px
$card-hotel-content-padding: 13px

// -----------------------------------------------------------------------------
// Card
// -----------------------------------------------------------------------------

.card
  @extend %standard-shadow
  background: #fff
  margin-bottom: 10px

.card__anchor
  text-decoration: none
  color: $new-header-grey
  &:hover
    text-decoration: none

.card--list
  cursor: pointer
  .btn--bookable
    height: 32px
    line-height: 32px
    padding: 0
    width: 100%

  &:hover
    .btn--bookable
      background: $bookable-hover

.card--list.has-image
  &:after
    @extend %empty-abs-generated-content
    height:  20px
    +background-gradient($startColor: rgba(255,255,255,0), $endColor: rgba(255,255,255,1.0))
    bottom: $card-content-padding
    left: 0
    right: 0
  &:hover
    .card__content
      height: $card-grid-height - 60px - $card-content-padding

// cards that are the result of a search have a definite height and default width


.results
  .card
    @extend %relative
    +transition(opacity, 0.5, ease)
    height: $card-grid-height

    &:hover
      +box-shadow(2, 2, 8, 0, rgba(3, 46, 92, 0.15))

      img
        +filter(brightness(-15%))


// -----------------------------------------------------------------------------
// Card Image
// -----------------------------------------------------------------------------

.card__hero
  @extend %relative
  overflow: hidden
  width: 100%

  .card--list.has-image &
    height: $card-image-height

  // hotel card
  .card--hotel.has-image &
    height: $card-image-height

  // single stack cards have taller images
  .card--stack &
    height: $stack-card-image-height

  // double stack cards have full height images
  .card--stack.card--double &
    height: $card-grid-height

  // Refactor to use landscape/portrait classes when rowlf imaging catches up
  > .card__image
    @extend %absolute-bottom
    max-width: none
    height: 100%


// -----------------------------------------------------------------------------
// Card 'content' section
// -----------------------------------------------------------------------------

.card__content
  @extend %absolute
  @extend %transition--base
  bottom: 0
  color: $new-header-grey
  height: ($card-grid-height - 60px - $card-content-padding)
  left: 0
  overflow: hidden
  padding: $card-content-padding
  right: 0

  .card--stack &
    height: ($card-grid-height - $stack-card-image-height - (2 * $card-content-padding) )

  .card--stack.card--double &
    +background-gradient($startColor: rgba(0,0,0,0), $endColor: rgba(0,0,0,1.0))
    color: #fff
    height: auto

  .card--list.has-image &
    background: #fff
    bottom: $card-content-padding
    height: ($card-grid-height - $card-image-height - (2 * $card-content-padding) )
    padding: $card-content-padding $card-content-padding 0 $card-content-padding

  .card--hotel &
    padding: $card-hotel-content-padding

  .card--hotel.has-image &
    height: ($card-grid-height - $card-image-height - (2 * $card-hotel-content-padding) )


// -----------------------------------------------------------------------------
// Card details
// -----------------------------------------------------------------------------

.card__property-type,
.card__context
  @extend %small-type
  display: block
  margin-bottom: 2px

.card__name
  @extend %large-type
  +word-break()
  font-weight: bold
  line-height: 17px
  margin-bottom: 12px

  .card--info &
    @include font-size(19)
    line-height: 20px

  .card--stack &
    @include font-size(19)
    line-height: 20px
    margin-bottom: 0

  .card--list--tour &
    margin-bottom: 5px

.card__locale
  @extend %serif
  @extend %small-type
  color: $body-copy
  font-style: italic
  line-height: 14px
  margin-bottom: 12px

.card__description
  @extend %irregular-type
  @extend %smooth-text
  color: $body-copy
  line-height: 14px

// -----------------------------------------------------------------------------
// Card Footer
// -----------------------------------------------------------------------------

.card__footer
  @extend %absolute
  @extend %small-type
  background: #fff
  bottom: 0
  color: $body-copy
  left: 0
  padding: 8px
  right: 0
  z-index: 1

  .card--list--lodging &
    padding: 8px

  // fade to white at the top of the footer - needed when footer obscures content fadeout
  &:after
    @extend %empty-abs-generated-content
    +background-gradient($startColor: rgba(255,255,255,0), $endColor: rgba(255,255,255,1.0))
    height: 20px
    left: 0
    right: 0
    top: -20px


// -----------------------------------------------------------------------------
// Differences for hotel cards
// -----------------------------------------------------------------------------

.card--hotel
  &.has-no-image
    border-bottom: 2px solid $hotels-poi

  .card__footer
    bottom: 8px
    left: 8px
    right: 8px

    // remove top fadeout
    &:after
      content: none

  .btn--bookable
    @extend %irregular-type
    @extend %absolute
    bottom: 0
    line-height: inherit
    padding: 10px 12px
    right: 0
    width: auto

  .badge--lp-reviewed
    left: 0
    bottom: 0
    height: 23px

  .badge--top-choice
    height: 24px
    left: 30px
    bottom: 0


// -----------------------------------------------------------------------------
// Card POI icons
// -----------------------------------------------------------------------------

.card__poi-icon
  @extend %absolute
  @extend %benton-regular
  @extend %no-line-height
  color: $hotels-poi
  font-size: 69px
  left: 10px
  top: 20px
  .ie7 &
    line-height: 1
    top: -10px

.card--list
  &:before
    @extend %benton-regular
    @extend %no-line-height
    font-size: 69px
    left: 10px
    position: absolute
    top: 20px
    z-index: 5

  //&.has-no-image
  //  &:after
  //    background: #b2b1b1
  //    border-radius: 10px/5px
  //    content: ''
  //    height: 4px
  //    left: 26px
  //    position: absolute
  //    top: 46px
  //    width: 9px

  &.has-image
    &:before
      color: #fff
      font-size: 40px
      text-shadow: 0 0 5px rgba(0,0,0,0.75)

.card--lodging
  @extend %icon-poi-hotel-before
  color: $hotels-poi
  &.has-image
    @extend %icon-image-poi-hotel-before

.card--sight
  @extend %icon-poi-sight-before
  color: $sight-poi
  &.has-image
    @extend %icon-image-poi-sight-before

.card--activity
  @extend %icon-poi-activity-before
  color: $activity-poi
  &.has-image
    @extend %icon-image-poi-activity-before

.card--tour
  @extend %icon-poi-tour-before
  color: $tour-poi
  &.has-image
    @extend %icon-image-poi-tour-before

.card--shopping
  @extend %icon-poi-shopping-before
  color: $shopping-poi
  &.has-image
    @extend %icon-image-poi-shopping-before

.card--entertainment
  @extend %icon-poi-entertainment-before
  color: $entertainment-poi
  &.has-image
    @extend %icon-image-poi-entertainment-before

.card--restaurant
  @extend %icon-poi-restaurant-before
  color: $restaurant-poi
  &.has-image
    @extend %icon-image-poi-restaurant-before

.card--article
  @extend %icon-poi-article-before
  color: $restaurant-poi
  &.has-image
    @extend %icon-image-poi-article-before

.card--info
  @extend %icon-poi-info-before
  color: #d9d9d9
  &.has-image
    @extend %icon-image-poi-info-before


// -----------------------------------------------------------------------------
// Text sections with left hand icons
// -----------------------------------------------------------------------------

%left-icon-text
  @extend %extra-small-type
  color: $body-copy
  line-height: 8px
  &:before
    @extend %benton-regular
    color: $body-background
    font-size: 30px
    line-height: 20px
    vertical-align: bottom

.card__tour-duration
  @extend %left-icon-text
  @extend %tour-duration-before
  margin-bottom: 14px
  &:before
    color: #9fd815
    line-height: 15px

.card__feedback__approval
  @extend %approval-before
  @extend %left-icon-text

.card__feedback__comments
  @extend %comments-before
  @extend %left-icon-text
<commit_msg>redefine card--anchor style<commit_after>// Cards
//
//
// .card
//
// Styleguide 1.3

// -----------------------------------------------------------------------------
// Base card object and sizing variables
//
// - Width of a Card defaults to single - override when necessary
// -----------------------------------------------------------------------------

$card-grid-height: 380px

$double-card-width: 394px

$card-image-height: 185px
$stack-card-image-height: 275px

$card-content-padding: 15px
$card-hotel-content-padding: 13px

// -----------------------------------------------------------------------------
// Card
// -----------------------------------------------------------------------------

.card
  @extend %standard-shadow
  background: #fff
  margin-bottom: 10px

.card--anchor
  cursor: pointer

.card__title--anchor
  text-decoration: none
  color: $new-header-grey
  &:hover
    text-decoration: none

.card--list
  .btn--bookable
    height: 32px
    line-height: 32px
    padding: 0
    width: 100%

  &:hover
    .btn--bookable
      background: $bookable-hover

.card--list.has-image
  &:after
    @extend %empty-abs-generated-content
    height:  20px
    +background-gradient($startColor: rgba(255,255,255,0), $endColor: rgba(255,255,255,1.0))
    bottom: $card-content-padding
    left: 0
    right: 0
  &:hover
    .card__content
      height: $card-grid-height - 60px - $card-content-padding

// cards that are the result of a search have a definite height and default width


.results
  .card
    @extend %relative
    +transition(opacity, 0.5, ease)
    height: $card-grid-height

    &:hover
      +box-shadow(2, 2, 8, 0, rgba(3, 46, 92, 0.15))

      img
        +filter(brightness(-15%))


// -----------------------------------------------------------------------------
// Card Image
// -----------------------------------------------------------------------------

.card__hero
  @extend %relative
  overflow: hidden
  width: 100%

  .card--list.has-image &
    height: $card-image-height

  // hotel card
  .card--hotel.has-image &
    height: $card-image-height

  // single stack cards have taller images
  .card--stack &
    height: $stack-card-image-height

  // double stack cards have full height images
  .card--stack.card--double &
    height: $card-grid-height

  // Refactor to use landscape/portrait classes when rowlf imaging catches up
  > .card__image
    @extend %absolute-bottom
    max-width: none
    height: 100%


// -----------------------------------------------------------------------------
// Card 'content' section
// -----------------------------------------------------------------------------

.card__content
  @extend %absolute
  @extend %transition--base
  bottom: 0
  color: $new-header-grey
  height: ($card-grid-height - 60px - $card-content-padding)
  left: 0
  overflow: hidden
  padding: $card-content-padding
  right: 0

  .card--stack &
    height: ($card-grid-height - $stack-card-image-height - (2 * $card-content-padding) )

  .card--stack.card--double &
    +background-gradient($startColor: rgba(0,0,0,0), $endColor: rgba(0,0,0,1.0))
    color: #fff
    height: auto

  .card--list.has-image &
    background: #fff
    bottom: $card-content-padding
    height: ($card-grid-height - $card-image-height - (2 * $card-content-padding) )
    padding: $card-content-padding $card-content-padding 0 $card-content-padding

  .card--hotel &
    padding: $card-hotel-content-padding

  .card--hotel.has-image &
    height: ($card-grid-height - $card-image-height - (2 * $card-hotel-content-padding) )


// -----------------------------------------------------------------------------
// Card details
// -----------------------------------------------------------------------------

.card__property-type,
.card__context
  @extend %small-type
  display: block
  margin-bottom: 2px

.card__name
  @extend %large-type
  +word-break()
  font-weight: bold
  line-height: 17px
  margin-bottom: 12px

  .card--info &
    @include font-size(19)
    line-height: 20px

  .card--stack &
    @include font-size(19)
    line-height: 20px
    margin-bottom: 0

  .card--list--tour &
    margin-bottom: 5px

.card__locale
  @extend %serif
  @extend %small-type
  color: $body-copy
  font-style: italic
  line-height: 14px
  margin-bottom: 12px

.card__description
  @extend %irregular-type
  @extend %smooth-text
  color: $body-copy
  line-height: 14px

// -----------------------------------------------------------------------------
// Card Footer
// -----------------------------------------------------------------------------

.card__footer
  @extend %absolute
  @extend %small-type
  background: #fff
  bottom: 0
  color: $body-copy
  left: 0
  padding: 8px
  right: 0
  z-index: 1

  .card--list--lodging &
    padding: 8px

  // fade to white at the top of the footer - needed when footer obscures content fadeout
  &:after
    @extend %empty-abs-generated-content
    +background-gradient($startColor: rgba(255,255,255,0), $endColor: rgba(255,255,255,1.0))
    height: 20px
    left: 0
    right: 0
    top: -20px


// -----------------------------------------------------------------------------
// Differences for hotel cards
// -----------------------------------------------------------------------------

.card--hotel
  &.has-no-image
    border-bottom: 2px solid $hotels-poi

  .card__footer
    bottom: 8px
    left: 8px
    right: 8px

    // remove top fadeout
    &:after
      content: none

  .btn--bookable
    @extend %irregular-type
    @extend %absolute
    bottom: 0
    line-height: inherit
    padding: 10px 12px
    right: 0
    width: auto

  .badge--lp-reviewed
    left: 0
    bottom: 0
    height: 23px

  .badge--top-choice
    height: 24px
    left: 30px
    bottom: 0


// -----------------------------------------------------------------------------
// Card POI icons
// -----------------------------------------------------------------------------

.card__poi-icon
  @extend %absolute
  @extend %benton-regular
  @extend %no-line-height
  color: $hotels-poi
  font-size: 69px
  left: 10px
  top: 20px
  .ie7 &
    line-height: 1
    top: -10px

.card--list
  &:before
    @extend %benton-regular
    @extend %no-line-height
    font-size: 69px
    left: 10px
    position: absolute
    top: 20px
    z-index: 5

  //&.has-no-image
  //  &:after
  //    background: #b2b1b1
  //    border-radius: 10px/5px
  //    content: ''
  //    height: 4px
  //    left: 26px
  //    position: absolute
  //    top: 46px
  //    width: 9px

  &.has-image
    &:before
      color: #fff
      font-size: 40px
      text-shadow: 0 0 5px rgba(0,0,0,0.75)

.card--lodging
  @extend %icon-poi-hotel-before
  color: $hotels-poi
  &.has-image
    @extend %icon-image-poi-hotel-before

.card--sight
  @extend %icon-poi-sight-before
  color: $sight-poi
  &.has-image
    @extend %icon-image-poi-sight-before

.card--activity
  @extend %icon-poi-activity-before
  color: $activity-poi
  &.has-image
    @extend %icon-image-poi-activity-before

.card--tour
  @extend %icon-poi-tour-before
  color: $tour-poi
  &.has-image
    @extend %icon-image-poi-tour-before

.card--shopping
  @extend %icon-poi-shopping-before
  color: $shopping-poi
  &.has-image
    @extend %icon-image-poi-shopping-before

.card--entertainment
  @extend %icon-poi-entertainment-before
  color: $entertainment-poi
  &.has-image
    @extend %icon-image-poi-entertainment-before

.card--restaurant
  @extend %icon-poi-restaurant-before
  color: $restaurant-poi
  &.has-image
    @extend %icon-image-poi-restaurant-before

.card--article
  @extend %icon-poi-article-before
  color: $restaurant-poi
  &.has-image
    @extend %icon-image-poi-article-before

.card--info
  @extend %icon-poi-info-before
  color: #d9d9d9
  &.has-image
    @extend %icon-image-poi-info-before


// -----------------------------------------------------------------------------
// Text sections with left hand icons
// -----------------------------------------------------------------------------

%left-icon-text
  @extend %extra-small-type
  color: $body-copy
  line-height: 8px
  &:before
    @extend %benton-regular
    color: $body-background
    font-size: 30px
    line-height: 20px
    vertical-align: bottom

.card__tour-duration
  @extend %left-icon-text
  @extend %tour-duration-before
  margin-bottom: 14px
  &:before
    color: #9fd815
    line-height: 15px

.card__feedback__approval
  @extend %approval-before
  @extend %left-icon-text

.card__feedback__comments
  @extend %comments-before
  @extend %left-icon-text

{'fraction_non_alphanumeric': 0.2776996130847696, 'fraction_numerical': 0.026263336850744518, 'mean_word_length': 1.5094145336863785, 'pattern_counts': {'":': 0, '<': 3, '<?xml version=': 0, '>': 5, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '924609', 'n_tokens_mistral': 5766, 'n_tokens_neox': 5252, 'n_words': 1177}