Omnimaga
/
bugs



1234567891011121314151617181920212223242526272829303132333435363738394041424344454647484950515253545556575859606162636465666768697071727374757677787980818283848586878889909192939495969798
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Switches</title>
  <meta name="description" content="Activates/Deactivates a given item. It's also used to select an element within a list">
  <link rel="stylesheet" href="../switches.css">
  <!--
    - This <style> element is only used for the example code;
    - it is not required for the real use case.
    -->
  <style type="text/css">
    html, body {
      margin: 0;
      padding: 0;
      font-size: 10px;
      background-color: #fff;
    }
    body {
      background: none;
    }
    h2.bb-docs {
      font-size: 1.8rem;
      font-weight: lighter;
      color: #666;
      margin: -1px 0 0;
      background-color: #f5f5f5;
      padding: 0.4rem 0.4rem 0.4rem 3rem;
      border: solid 1px #e8e8e8;
    }
    label {
      margin-left: 2rem;
    }
  </style>
</head>
<body role="application">
  <p dir="ltr">
    <label>
      <input type="checkbox"
        onchange="document.documentElement.dir = this.checked ? 'rtl' : 'ltr'">
      RTL mode
    </label>
  </p>

  <h2 class="bb-docs">Checkbox, commonly used in edit mode</h2>
  <label class="pack-checkbox">
    <input type="checkbox" checked>
    <span></span>
  </label>

  <label class="pack-checkbox">
    <input type="checkbox">
    <span></span>
  </label>

  <label class="pack-checkbox danger">
    <input type="checkbox" checked>
    <span></span>
  </label>

  <label class="pack-checkbox danger">
    <input type="checkbox">
    <span></span>
  </label>

  <h2 class="bb-docs">Radio, commonly used in settings</h2>
  <label class="pack-radio">
    <input type="radio" name="example" checked>
    <span></span>
  </label>

  <label class="pack-radio">
    <input type="radio" name="example">
    <span></span>
  </label>

  <label class="pack-radio danger">
    <input type="radio" name="example2" checked>
    <span></span>
  </label>

  <label class="pack-radio danger">
    <input type="radio" name="example2">
    <span></span>
  </label>

  <h2 class="bb-docs">Switch, commonly used in settings</h2>
  <label class="pack-switch">
    <input type="checkbox" checked>
    <span></span>
  </label>
  
  <label class="pack-switch">
    <input type="checkbox">
    <span></span>
  </label>
</body>
</html>