Vite App

Button

- + +

+ + +

<button class="cs-btn">Button</button>
+<button disabled class="cs-btn">Disabled</button>

Hr

+ +

+ + +

<hr class="cs-hr" />

Checkbox

- Custom Checkbox + Checkbox +

+ +

+ + +

<div class="cs-checkbox">
+  <input id="checkbox" type="checkbox" />
+  <label class="cs-checkbox__label" for="checkbox">Checkbox</label>
+</div>

Input

- Custom Checkbox + First name

+ +

+ + +

<input class="cs-input" id="input" type="input" />
+<label class="cs-input__label" for="input">First name</label>
+
+<br />
+<br />
+
+<input type="text" value="John Doe" class="cs-input" />
+<input type="text" disabled value="disabled" class="cs-input" />

Select

Choose a car: + +

+ + +

<label class="cs-select__label" for="cars">Choose a car:</label>
+<select class="cs-select" name="cars" id="cars">
+  <option value="volvo">Volvo</option>
+  <option value="saab">Saab</option>
+  <option value="opel">Opel</option>
+  <option value="audi">Audi</option>
+</select>

Radio Group

What is your favorite wild animal? @@ -74,9 +176,37 @@ Giraffe

+ +

+ + +

<fieldset class="cs-fieldset">
+  <legend>What is your favorite wild animal?</legend>
+  <div class="radio-wrapper">
+    <input type="radio" name="animal" id="elephant" />
+    <label for="elephant">Elephant</label>
+  </div>
+  <div class="radio-wrapper">
+    <input type="radio" name="animal" id="monkey" />
+    <label for="monkey">Monkey</label>
+  </div>
+  <div class="radio-wrapper">
+    <input type="radio" name="animal" id="cheetah" />
+    <label for="cheetah">Cheetah</label>
+  </div>
+  <div class="radio-wrapper">
+    <input type="radio" name="animal" id="giraffe" />
+    <label for="giraffe">Giraffe</label>
+  </div>
+</fieldset>

Slider

@@ -85,11 +215,29 @@

- Elephant + Brightness +

+ + +

<div class="cs-slider">
+  <div class="value">
+    <p>Dark</p>
+    <p>Light</p>
+  </div>
+  <div class="ruler"></div>
+  <input id="range" type="range" min="1" max="100" value="50" />
+  <label for="range">Brightness</label>
+</div>

Dialog

+ + +

<section>
+  <button
+    type="button"
+    class="cs-btn"
+    onclick="document.querySelector('.cs-dialog').showModal();"
+  >
+    Open dialog
+  </button>
+  <dialog class="cs-dialog">
+    <form method="dialog">
+      <div class="heading">
+        <div class="wrapper">
+          <div class="icon"></div>
+          <p class="text">Options</p>
+        </div>
+        <button class="cs-btn close"></button>
+      </div>
+      <div class="content">
+        Lorem ipsum dolor sit amet consectetur adipisicing elit.
+        Distinctio ad suscipit aut asperiores laudantium error amet
+        sapiente et tempora numquam voluptates, velit sint quos
+        exercitationem unde obcaecati deleniti maiores officia natus
+        ipsa rem fuga commodi esse. Sunt repellendus ipsa illo a
+        accusantium consequuntur nihil dicta necessitatibus porro,
+        saepe, sed repudiandae!
+      </div>
+      <menu class="footer-btns">
+        <button class="cs-btn">OK</button>
+        <button class="cs-btn">Cancel</button>
+        <button class="cs-btn">Apply</button>
+      </menu>
+    </form>
+  </dialog>
+</section>

Tooltip

+ + +

<div class="cs-tooltip">
+  Right
+  <span style="left: 125%" class="text">Tooltip text</span>
+</div>
+<br />
+<div class="cs-tooltip">
+  Left
+  <span style="right: 125%" class="text">Tooltip text</span>
+</div>
+<br />
+<div class="cs-tooltip">
+  Top
+  <span
+    style="bottom: 100%; width: 100px; left: 50%; margin-left: -50px"
+    class="text"
+    >Tooltip text</span
+  >
+  <!-- set some width, and then set margin-left to be half of the width -->
+</div>
+<br />
+<div class="cs-tooltip">
+  Bottom
+  <span
+    style="top: 100%; width: 100px; left: 50%; margin-left: -50px"
+    class="text"
+    >Tooltip text</span
+  >
+  <!-- set some width, and then set margin-left to be half of the width -->
+</div>

cs16.css

Installation

Button

Button

Hr

Hr

Checkbox

Checkbox

Input

Input

Select

Select

Radio Group

Radio Group

Slider

Slider

Dialog

Dialog

Tooltip

Tooltip

Progress Bar

Progress Bar

Tabs

Tabs