glimmer-dsl-web-hello-modal-greeting-modal.rb

class GreetingModal
  include Glimmer::Web::Component

  attribute :greeting_target, default: 'World'

  markup {
    div(class: 'modal-outer') {
      div(class: 'modal-inner') {
        h2 { 'Greeting' }

        h3 { "Hello, #{greeting_target}!" }

        div {
          button('Close') {
            onclick do
              markup_root.remove
            end
          }
        }
      }
    }
  }

  style {
    r('.modal-outer') {
      display 'flex'
      position 'fixed'
      left 0
      top 0
      width 100.vw
      height 100.vh
      background 'rgba(200, 200, 200, 0.8)'
      margin 0
      padding 0
      justify_content 'center'
      align_items 'center'
    }

    r('div.modal-inner') {
      display 'flex'
      flex_direction 'column'
      width 300
      height 160
      justify_content 'center'
      align_items 'center'
      box_shadow '0 10px 30px rgba(0, 0, 0, 0.5)'
      background :white
      border_radius 15
      padding 15
    }

    r('div.modal-inner button') {
      width 135
      margin 5
      border_radius 5
      padding 5
      background :white
    }

    r('div.modal-inner button:hover') {
      background :black
      color :white
    }


    r('div.modal-inner h2') {
      margin_top 10
    }
  }
end