Css Zero Showcase

Previews

No matching results.

Pages

No matching results.

x
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
<form action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="mvH_0yuieLIUtIy3Kva1uPERKFAQ9-EFYo42Z67eru5Eh36jPgSC86ESJ281haZknP_i70t3TxFnFxif4BWosA" autocomplete="off" />
  <fieldset class="card flex flex-col gap">
    <legend class="font-semibold leading-none">Create project</legend>
    <div class="flex flex-col gap mbe-2">
      <div class="flex flex-col gap-half">
        <label class="text-sm font-medium leading-none" for="name">Name</label>
        <input placeholder="Name of your project" class="input" type="text" name="name" id="name" />
      </div>
      <div class="flex flex-col gap-half">
        <label class="text-sm font-medium leading-none" for="framework">Framework</label>
        <select class="input" name="framework" id="framework"><option value="ruby">Ruby on Rails</option>
          <option value="laravel">Laravel</option>
          <option value="next">Next</option></select>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <button type="reset" class="btn">Reset</button>
      <input type="submit" name="commit" value="Destroy" class="btn btn--primary" data-disable-with="Destroy" />
    </div>
  </fieldset>
</form>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<%= form_with url: nil, contents: true do |form| %>
  <fieldset class="card flex flex-col gap">
    <legend class="font-semibold leading-none">Create project</legend>
    <div class="flex flex-col gap mbe-2">
      <div class="flex flex-col gap-half">
        <%= form.label :name, class: "text-sm font-medium leading-none" %>
        <%= form.text_field :name, placeholder: "Name of your project", class: "input" %>
      </div>
      <div class="flex flex-col gap-half">
        <%= form.label :framework, class: "text-sm font-medium leading-none" %>
        <%= form.select :framework, [["Ruby on Rails", "ruby"], ["Laravel", "laravel"], ["Next", "next"]], {}, class: "input" %>
      </div>
    </div>
    <div class="flex items-center justify-between">
      <button type="reset" class="btn">Reset</button>
      <%= form.submit "Destroy", class: "btn btn--primary" %>
    </div>
  </fieldset>
<% end %>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
.card {
  background-color: var(--color-bg);
  border-radius: var(--rounded-xl);
  border-width: var(--border);
  box-shadow: var(--shadow-sm);
  padding: var(--size-6);
  position: relative;
  &[aria-disabled="true"] {
    pointer-events: none;
  }
  &[aria-disabled="true"]::after {
    background-color: rgba(0, 0, 0, .3);
    border-radius: inherit;
    content: "";
    inset: 0;
    position: absolute;
  }
}
.card--selectable:has(:checked) {
  background-color: rgb(from var(--color-border-light) r g b / .5);
  border-color: var(--color-border-dark);
}
Java Script is not required or multiple files are needed, check the notes.

No notes provided.