overleaf/services/web/public/recurly/recurly.styl

// Base grid system dimensions
grid_width = 480px
grid_columns = 12
outer_margin = 20px
column_space = 20px
column_width = grid_width / grid_columns - column_space
base_font_size = round(grid_width * 0.033333)
vertical_space = 20px

input_border = 1px
input_padding = 5px
input_height = base_font_size + 6px
field_height = input_height + (input_padding + input_border)*2

columns(n)
  (column_width * n + column_space * (-1+n))

// Some CSS3 property mixins
user-select()
  -webkit-user-select  arguments
  -khtml-user-select  arguments
  -moz-user-select  arguments
  -o-user-select  arguments
  user-select  arguments

linear-gradient(start, stops...)
  prop = current-property[0]
  stops = unquote(join(', ', stops))
  add-property(prop, '-webkit-linear-gradient(%s, %s)' % (start stops) )
  add-property(prop, '-moz-linear-gradient(%s, %s)' % (start stops) )
  add-property(prop, '-o-linear-gradient(%s, %s)' % (start stops) )
  'linear-gradient(%s, %s)' % (start stops)

image-linear-gradient(image, start, stops...)
  prop = current-property[0]
  stops = unquote(join(', ', stops))
  add-property(prop, '%s, -webkit-linear-gradient(%s, %s)' % (image start stops) )
  add-property(prop, '%s, -moz-linear-gradient(%s, %s)' % (image start stops) )
  add-property(prop, '%s, -o-linear-gradient(%s, %s)' % (image start stops) )
  '%s linear-gradient(%s, %s)' % (image start stops)

transition()
  -webkit-transition arguments
  -moz-transition arguments

// For IE6/7 support we use this for all inputs,
// in lieu of border-box sizing 100%
field-width(v)
  width v

  // Fit the input by subtracting padding and border from box
  & input[type=text]
    width v - (input_border+input_padding)*2

// Horizontally stack a field on the preceeding field
hstack(cols)
  field-width columns(cols)
  add-property(margin-left, column_space)
  add-property(clear, none)

// Subscription form
.recurly
  display block
  position relative
  width columns(grid_columns) + (outer_margin*2)

  .cost, .discount
    font-size base_font_size
    text-align right

  .subscription
    border-radius 9px 9px 0 0
    text-shadow 0 1px 0 white
    padding-top 20px
    overflow hidden

  .plan
    color #333
    overflow hidden
    position relative
    zoom 1 // IE6

    .name
      float left
      font-size base_font_size*2
      min-width columns(6) - column_space
      padding-left outer_margin
      padding-right (column_space*2)

    .quantity.field
      clear none
      field-width columns(2)
      margin 4px 0

      &:before
        content "\d7"
        height 48px
        line-height 30px
        position absolute
        right 100%
        width column_space * 2
        font-size 20px
        text-align center
        vertical-align middle
        z-index 1337
        color #666

    .recurring_cost
      float right
      text-align right
      padding-right outer_margin

      .cost
        font-size base_font_size*2

      .interval
        font-size round(base_font_size*0.75)
        padding-bottom vertical_space

  .free_trial
    clear left
    float left
    font-size 13px
    height 22px
    margin 0
    position absolute
    top 35px
    left outer_margin
    font-style italic


  .setup_fee
    clear both
    background url(images/dash.png) repeat-x 1px top
    overflow hidden
    padding-top vertical_space

    .title
      float left
      padding-left outer_margin
      font-weight bold
      font-size base_font_size
    .cost
      float right
      padding-right outer_margin

  .vat
    height 24px
    padding column_space outer_margin
    display none
    background url(images/dash.png) repeat-x 1px top

    &.applicable
      display block

    .title
      font-size base_font_size
      font-weight normal
      float left

    .cost
      float right
      font-size 18px

  .add_ons
    clear both

    &.any
      margin vertical_space (outer_margin/2)

    .add_on
      background #ecedee
      background linear-gradient(top, #ecedee, #e5e6e7)
      margin 0
      height 43px
      line-height 42px
      vertical-align middle
      position relative
      clear both
      overflow hidden
      border-top 1px solid #ccc
      border-left 1px solid #ccc
      border-right 1px solid #ccc
      text-shadow 0 1px 0 white
      color #999
      font-weight 300
      font-size 16px
      zoom 1 // IE6
      cursor default

      &.first
        border-top-left-radius 10px
        border-top-right-radius 10px

      &.last
        border-bottom 1px solid #ccc
        border-bottom-left-radius 10px
        border-bottom-right-radius 10px

      .name
        font-size inherit
        font-weight inherit
        font-style italic
        color inherit
        width columns(6) - outer_margin
        margin-left (outer_margin/2) - 1
        margin-right column_space
        position absolute
        left 0
        top 0

      .quantity.field
        position absolute
        top 4px
        left columns(6) + (outer_margin/2) + column_space - 1px
        field-width columns(2)
        display none

        &:before
          content "\d7"
          height 48px
          line-height 30px
          position absolute
          right 100%
          width column_space * 2
          font-size 20px
          text-align center
          vertical-align middle
          z-index 1337
          color #666

      .cost
        font-size inherit
        line-height inherit
        vertical-align middle
        position absolute
        right (outer_margin/2)

      &:hover
        background linear-gradient(top, '#f0f0f0 0%', '#dfdfdf 50%', '#d5d5d5 50%', '#e0e0e0 100%')
        box-shadow inset 0 1px 0 #fff
        text-shadow none
        color #111

      &:active
      &.selected
        color #111
        background linear-gradient(top, #f0f0f0, #fff)
        width auto
        box-shadow inset 0 1px 4px 0 rgba(0,0,0,0.075)
        text-shadow none

      &.selected
        background #fff url(images/check.png) no-repeat (outer_margin/2) center

        .name
          padding-left 24px

        &:hover
          background #fcf5f0 url(images/uncheck.png) no-repeat (outer_margin/2) center

      &.selected .quantity
          display block

  .coupon
    clear both
    overflow hidden
    height field_height
    color #333
    padding column_space outer_margin
    position relative
    background url(images/dash.png) repeat-x 1px top

    .check
      width 26px
      height 26px
      float left
      border-radius 15px 15px 15px 15px
      background #70CCF8
      border 1px solid #0090C9
      margin 3px 0 1px 10px
      box-shadow inset 0 1px 0 0 rgba(255,255,255,.35), 0 1px 1px 0 rgba(0,0,0,0.1)
      background #43BEF9 url(images/coupon_check.png) no-repeat center center
      background image-linear-gradient(url(images/coupon_check.png) no-repeat center center, top, '#71CDFA 0%', '#43BEF9 50%', '#00B1F6 50%', '#71CEFB 100%')

      &:hover
        background image-linear-gradient(url(images/coupon_check.png) no-repeat center center, top, '#71CDFA 0%', '#43BEF9 50%', '#00B1F6 50%', '#71CEFB 100%')
        box-shadow inset 0 1px 0 0 rgba(255,255,255,.75), 0 1px 1px 0 rgba(0,0,0,0.1)

      &:active
        background image-linear-gradient(url(images/coupon_check.png) no-repeat center center, top, #f0f0f0, #fff)
        box-shadow inset 0 3px 3px 0 rgba(0,0,0,0.025)
        border 1px solid #999

    &.checking .check
      background #f0f0f0 url(images/coupon_checking.gif) no-repeat center center
      box-shadow inset 0 3px 3px 0 rgba(0,0,0,0.025)
      border 1px solid #999

    &.invalid .coupon_code
      border-color #a55
      background #fee
      color #311

    .coupon_code .error
      left columns(8)



    .description
      float left
      margin-left column_space
      height field_height
      line-height field_height
      vertical-align middle
      font-size base_font_size * 0.9

    .discount
      float right
      height field_height
      line-height field_height
      vertical-align middle

  .error
    padding input_padding
    line-height input_height
    vertical-align middle
    color black
    text-shadow 0 1px 0 #fec
    background #ffc
    border 1px solid #ba1
    box-shadow 3px 5px 5px 0 rgba(0,0,0,0.1)
    border-radius 5px
    font-size 13px


  .server_errors
    color #fff
    text-shadow 0 1px 0 black
    margin 0 outer_margin

    .error
      padding-left 26px
      background rgba(240,250,0,0.5) url(images/error.png) no-repeat 5px (input_padding + 4px)

    opacity 0
    &.any
      opacity 1.0
      transition opacity 0.5s linear
      margin column_space outer_margin
      margin-bottom 0


  .contact_info
  .billing_info
  .accept_tos
    position relative
    padding vertical_space outer_margin
    overflow hidden
    zoom 1 // IE6

  .title
    font-size base_font_size
    height base_font_size + 4px
    font-weight bold
    padding-bottom 20px
    color #404041
    text-shadow 0 1px 0 white
    float left

  .credit_card
  .paypal
    clear both

  .payment_method
    margin-bottom vertical_space
    width columns(8)

    .payment_option
      float right
      input[type=radio]
        margin-right 10px
        display none

    &.multiple
      height field_height
      clear both

      // line-height field_height

      input[type=radio]
        display block
        float left
        height field_height - 5px

      .card_option
        float left

      .paypal_option
        float right

      .logo, .accepted_cards
        opacity 0.5

      .payment_option
        &:hover, &.selected
          .logo, .accepted_cards
            cursor pointer
            opacity 1

    .payment_option
      line-height field_height - 2px
      display block
      height field_height - 2px
      line-height field_height


      .title
        margin 0
        font-size 12px

      .icon
        float left
        width 24px
        height field_height
        margin 0 5px

      &.card_option
        border-radius 5px 0 0 5px
        border-right none

        .icon
          width 42px
          background url(images/credit_cards/generic.png) no-repeat 0 center

      &.paypal_option
        border-radius 0 5px 5px 0
        float right

        .logo
          height 24px
          width 90px
          display inline-block
          vertical-align middle
          background url(images/paypal_logo.png) no-repeat 0 center

  .paypal_message
    width columns(8)
    font-style italic
    margin-bottom 10px

  .contact_info
    background url(images/dash.png) repeat-x 1px bottom

  .accept_tos
    background url(images/dash.png) repeat-x 1px top
    overflow visible

    input[type=checkbox]
      display inline
      line-height field_height
      vertical-align middle

    label
      margin 0 0 0 5px
      display inline
      line-height field_height
      vertical-align middle

    .field .error
      display block
      position static

  .field
    display inline // IE margin bug hack
    float left
    clear left
    field-width columns(8) // Default field is full width
    height field_height
    margin-bottom vertical_space
    position relative

    &.company_name
      margin-bottom 0 //IE not accounting for margins, so using other methods

    .error
      min-width columns(4) - (input_padding+1)*2
      white-space nowrap
      position absolute
      top 0
      left 100%
      margin-left column_space
      z-index 1337

    .placeholder
      position absolute
      top 0
      left 0
      right 0
      bottom 0
      padding-left input_padding + 4px
      font-size base_font_size
      font-weight normal
      line-height field_height
      vertical-align middle
      color #999
      cursor text
      overflow hidden
      white-space nowrap
      user-select none
      font-weight 300

    &.focus .placeholder
      color #ccc

    &.invalid .placeholder
      color #a77

    // Special field sizes
    &.coupon_code
      field-width columns(4)

    &.first_name
      clear left
      field-width columns(4)

      .error
        left columns(8)

    &.last_name
      hstack(4)

    &.card_number
      field-width columns(6)

      .error
        left columns(8)

    &.cvv
      hstack(2)

    &.expires
      field-width columns(8)

      .title
        float left
        font-size round(base_font_size*0.8)
        line-height 24px
        vertical-align middle
        width columns(2) - 1px

      .month
        float left
        field-width columns(3) + column_width
        margin-left 0

      .year
        float left
        margin-left 1px
        field-width columns(2)


    &.state
      field-width columns(5)
      .error
        left columns(8)

    &.zip
      hstack(3)

    &.vat_number
      field-width columns(4)
      display none
      &.applicable
        display block

  // Special limited address cases for zip
  .only_zipstreet .zip.field
  .only_zip .zip.field
    margin-left 0
    clear left

  .accepted_cards
    display inline-block
    height field_height
    overflow hidden

   .card
      background-position right top
      background-repeat no-repeat
      text-indent -3000px
      width 32px
      height 32px
      margin 0
      padding 0
      display inline-block

      &.mastercard
        background-image url(images/credit_cards/mastercard.png)
      &.american_express
        background-image url(images/credit_cards/american_express.png)
      &.visa
        background-image url(images/credit_cards/visa.png)
      &.discover
        background-image url(images/credit_cards/discover.png)
      &.jcb
        background-image url(images/credit_cards/jcb.png)
      &.laser
        background-image url(images/credit_cards/laser.png)
      &.diners_club
        background-image url(images/credit_cards/diners_club.png)
      &.maestro
        background-image url(images/credit_cards/maestro.png)

      &.match
        // nothing

      &.no_match
        opacity 0.5


  // General
  input[type=text],
  select
    vertical-align middle
    color #000000

    &.invalid
      border-color #a55
      background #fee
      color #311

  input[type=text]
    display block
    background white
    border input_border solid #a0a0a5
    box-shadow inset 0 2px 3px rgba(0,0,0,0.1)
    font-size base_font_size
    font-family inherit
    padding input_padding
    height input_height


    &[disabled]
      background #eee

  input[type=checkbox]
    color red

  select
    color inherit
    font-family inherit
    width 100%

    > option
      color inherit

   // DUE NOW BAR
  .due_now
    background url(images/due_now.png) no-repeat top left
    clear both
    color #2a3a3c
    height 70px
    line-height 67px
    vertical-align middle
    // overflow hidden
    padding 0 outer_margin + 5px
    width columns(12)
    position relative
    left -5px
    text-shadow 0 1px 0 rgba(255,255,255,0.5)

    .title
      float left
      font-size 29px
      position relative

    .cost
      color #fff
      float right
      font-size 33px
      font-weight bold
      letter-spacing  1px
      margin 0
      position relative
      text-shadow  0px 1px 1px rgba(0,0,0,0.9)

  .footer
    border-radius 0px 0px 9px 9px
    margin 0px
    padding outer_margin

  &.submitting .footer
    background url(images/submitting.gif) no-repeat columns(5) 28px

  button.submit
    height 46px
    max-width 600px
    font-size 18px
    font-weight 700
    color  #302106
    text-align center
    margin-left 0px
    border 1px solid #767674
    background #e7a500
    border-radius 10px
    outline none
    box-shadow inset rgba(255, 255, 255, 0.7) 0px 1px 0px, rgba(0,0,0, 0.5) 0px 1px 3px
    background-image -webkit-gradient(linear, 0% 20%, 0% 100%, from(#FECD00), to(#CE7B00))
    background -moz-linear-gradient(top, #fecd00, #ce7b00)
    text-shadow rgba(255,255,255, .5) 0 1px 0
    padding 10px 20px

    &:hover
      color #451

    &:active
      top 2px
      color #302106
      text-shadow  rgba(255,255,255, .5694) 0 -1px 0
      outline  none
      background-image  -webkit-gradient(linear, 0% 0%, 0% 100%, from(#CE7B00), to(#FECD00))
      background  -moz-linear-gradient(top, #ce7b00, #fecd00)
      box-shadow rgba(255, 255, 255, 0.69) 0px -1px 0px inset, rgba(0,0,0, 0.26) 0px 2px 3px

    &[disabled]
      position relative
      height  46px
      max-width  600px
      padding  0 10px
      font-weight  700
      color  #555
      text-shadow  rgba(255,255,255, .5694) 0 1px 0
      text-align  center

      opacity  .75
      border  1px solid #767674
      background  #e7a500

      -moz-border-radius  10px
      -webkit-border-radius  10px
      border-radius  10px
      -webkit-user-select  none
      -moz-user-select  -moz-none
      outline  none
      background-image -webkit-gradient(linear, 0% 0%, 0% 100%, from(#DBD9D2), to(#999))
      background  -moz-linear-gradient(top, #DBD9D2, #999999)
      -webkit-background-clip  padding-box
      -webkit-box-shadow  rgba(255, 255, 255, 0.69) 0px 1px 0px inset, rgba(0,0,0, 0.26) 0px 2px 3px
      box-shadow  rgba(255, 255, 255, 0.699219) 0px 1px 0px inset, rgba(0,0,0, 0.269219) 0px 2px 3px
.iefail
  background #666
  padding 10px
  position absolute
  top -1%
  left -1%
  height 102%
  width 102%
  z-index 9999
  .chromeframe
    background #fff
    border 1px solid #ccc
    padding 10px

    p
      text-align center
      &.blast
        font-size 1.3em
        font-weight bold
      a
        color #4183C4
        text-transform capitalize