Multiple stylesheets

[stefanvermaas]

Hi @colinta,

I'm struggling with the following problem: I can't add or use multiple stylesheets. I've got a global style, called base.rb and I've got controller specific stylesheets, like sessions.rb.

Thereby I've got several class names that are the same through the whole app, like :form_input and :form_row etc. But I'm not able to use both the stylesheets in the controller.

Is there something I'm doing wrong? Or isn't this just possible?

This is my code base:

# login.rb
class LoginScreen < PM::Screen

  # - Styling code ------------------------------------------------------------ #
  stylesheet :sessions
  ...

# form.rb
Teacup::Stylesheet.new :form do
  import :base

  # Form styling
  style [:form, :form_row],
    backgroundColor: '#000000'.uicolor,
    constraints: [
      :full_width,
      constrain_height(150),
      constrain(:top).equals(:form_row, :bottom).plus(10)
    ]
    ...

# login.rb
Teacup::Stylesheet.new :sessions do
  import :base
  import :form

  # - Login screen ------------------------------------------------------------ #
  style :login_screen,
    backgroundColor: '#ffffff'.uicolor

  style :login_form,
    constraints: [
      :center_x,
      :center_y,
      constrain_size(500, 450)
    ]
    ...

Cheers.

[stefanvermaas]

Hmm my mistake. I've did something wrong. Had to include the styles in the sessions.rb like this:

style :form, :form_row, :form_label, :form_input

But I've got an other question. I want to stack the form rows, but I can't find a way to stack them. My idea was this:

  style :form_row,
    constraints: [:full_width, constrain_below(:form_row, 10) ]

But it seems it doesn't work. Any idea how to fix this?
Cheers.

[colinta]

Hmm, that's interesting... The constraint DSL was built with the assumption that the names would be unique. There's no easy way to accomplish what you're trying here right now.

[stefanvermaas]

Thought so. So I've found myself an "nasty" way of doing this:

  15.times do |index|
    if index != 0
      before = "form_row_#{index}"
      side = :bottom
    else
      before = "form"
      side = :top
    end

    style "form_row_#{index + 1}".to_sym, extends: :form_row,
      constraints: [
        :full_width,
        constrain_height(75),
        constrain(:top).equals( before.to_sym, side ).plus(10)
      ]
  end

Though this is a really horrible solution..