@csdsesystems/central-styles 0.1.0 → 1.0.2

package/styleguide-dep/code_example_templates/jsx_example_template.html.erb

@@ -0,0 +1,7 @@
+<script type='text/jsx'><%= rendered_example %></script>
+<div class="codeBlock jsExample">
+  <div class="highlight">
+    <pre><%= code_example %></pre>
+  </div>
+</div>
+

package/styleguide-dep/code_example_templates/markup_example_template.html.erb

@@ -0,0 +1,10 @@
+<div class="codeExample">
+  <div class="exampleOutput clear">
+    <%= rendered_example %>
+  </div>
+  <div class="codeBlock">
+    <div class="highlight">
+      <pre><%= code_example %></pre>
+    </div>
+  </div>
+</div>

package/styleguide-dep/code_example_templates/markup_table_template.html.erb

@@ -0,0 +1,23 @@
+<div class="codeTable">
+  <table>
+    <tbody>
+      <% examples.each do |example| %>
+        <tr>
+          <th>
+            <div class="exampleOutput">
+              <%= example.rendered_example %>
+            </div>
+          </th>
+          <td>
+            <div class="codeBlock">
+              <div class="highlight">
+                <pre><%= example.code_example %></pre>
+              </div>
+            </div>
+          </td>
+        </tr>
+      <% end %>
+    </tbody>
+  </table>
+</div>
+

package/styleguide-dep/css/custom-icheckbox.css

@@ -0,0 +1,121 @@
+/* iCheck plugin Square skin, steelblue
+----------------------------------- */
+.icheckbox_square-steelblue,
+.iradio_square-steelblue {
+    display: inline-block;
+    *display: inline;
+    vertical-align: middle;
+    margin: 0;
+    padding: 0;
+    width: 22px;
+    height: 22px;
+    background: url(steelblue.png) no-repeat;
+    border: none;
+    cursor: pointer;
+}
+
+.icheckbox_square-steelblue {
+    background-position: 0 0;
+}
+.icheckbox_square-steelblue.hover {
+    background-position: -24px 0;
+}
+.icheckbox_square-steelblue.checked {
+    background-position: -48px 0;
+}
+.icheckbox_square-steelblue.disabled {
+    background-position: -72px 0;
+    cursor: default;
+}
+.icheckbox_square-steelblue.checked.disabled {
+    background-position: -96px 0;
+}
+
+.iradio_square-steelblue {
+    background-position: -120px 0;
+}
+.iradio_square-steelblue.hover {
+    background-position: -144px 0;
+}
+.iradio_square-steelblue.checked {
+    background-position: -168px 0;
+}
+.iradio_square-steelblue.disabled {
+    background-position: -192px 0;
+    cursor: default;
+}
+.iradio_square-steelblue.checked.disabled {
+    background-position: -216px 0;
+}
+
+/* HiDPI support */
+@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
+    .icheckbox_square-steelblue,
+    .iradio_square-steelblue {
+        background-image: url(steelblue@2x.png);
+        -webkit-background-size: 240px 24px;
+        background-size: 240px 24px;
+    }
+}
+
+
+/* iCheck plugin Square skin, red
+----------------------------------- */
+.icheckbox_square-red,
+.iradio_square-red {
+    display: inline-block;
+    *display: inline;
+    vertical-align: middle;
+    margin: 0;
+    padding: 0;
+    width: 22px;
+    height: 22px;
+    background: url(red.png) no-repeat;
+    border: none;
+    cursor: pointer;
+}
+
+.icheckbox_square-red {
+    background-position: 0 0;
+}
+.icheckbox_square-red.hover {
+    background-position: -24px 0;
+}
+.icheckbox_square-red.checked {
+    background-position: -48px 0;
+}
+.icheckbox_square-red.disabled {
+    background-position: -72px 0;
+    cursor: default;
+}
+.icheckbox_square-red.checked.disabled {
+    background-position: -96px 0;
+}
+
+.iradio_square-red {
+    background-position: -120px 0;
+}
+.iradio_square-red.hover {
+    background-position: -144px 0;
+}
+.iradio_square-red.checked {
+    background-position: -168px 0;
+}
+.iradio_square-red.disabled {
+    background-position: -192px 0;
+    cursor: default;
+}
+.iradio_square-red.checked.disabled {
+    background-position: -216px 0;
+}
+
+/* HiDPI support */
+@media (-o-min-device-pixel-ratio: 5/4), (-webkit-min-device-pixel-ratio: 1.25), (min-resolution: 120dpi) {
+    .icheckbox_square-red,
+    .iradio_square-red {
+        background-image: url(red@2x.png);
+        -webkit-background-size: 240px 24px;
+        background-size: 240px 24px;
+    }
+}
+

package/styleguide-dep/css/doc.css

@@ -0,0 +1,165 @@
+body {
+  font-family: "Roboto", "Segoe UI", "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", sans-serif !important;
+}
+
+.hgt-content .styleguide,
+.hgt-content .codeExample:before,
+.hgt-content .jsExample:before,
+.hgt-pagehead,
+.hgt-menu,
+.hgt-content .styleguide,
+.hgt-content > h1,
+.hgt-content > h2,
+.hgt-content > h3,
+.hgt-content > h4,
+.hgt-content > h5,
+.hgt-content > h6,
+.hgt-footer {
+  font-family: "Roboto", "Segoe UI", "Fira Sans", "Droid Sans", "Helvetica Neue", "Arial", sans-serif !important;
+}
+
+.hgt-content h1.styleguide {
+  color: #002039 !important;
+  margin-top: 100px;
+}
+
+a:hover {
+  color: #333 !important;
+}
+
+.hgt-pagehead a:hover {
+  color: #f7e741 !important;
+}
+
+.hgt-pagehead {
+    padding-top: 1rem;
+    padding-bottom: 1rem;
+    margin-bottom: 1.5rem;
+    text-align: center;
+    background-color: #4078c0;
+    color: #FFF;
+}
+
+.hgt-pagehead a,
+.hgt-pagehead a.selected {
+  color: #FFF;
+}
+
+.hgt-pagehead h1 {
+  text-align: left;
+}
+
+td {
+  padding: 5px;
+}
+
+pre.inline {
+    display: inline !important;
+}
+
+.swatch {
+    float: left;
+    height: 40px;
+    width: 40px;
+    margin-right: 20px;
+    display: inline-block;
+    border-radius: 4px;
+    border: 1px solid transparent;
+}
+
+table td {
+  line-height: 40px !important;
+}
+
+table.color-table td:first-child {
+    width: 250px;
+}
+
+.swatch-lg {
+  height: 6.5rem;
+}
+
+.box {
+  height: 8rem;
+  border-radius: 0;
+  text-align: center;
+  padding: 2rem 0 2rem 0!important;
+  margin-bottom: 20px;
+}
+
+.boxed {
+  border: 1px solid #e7eaec;
+}
+
+.alert {
+  margin-bottom: 0 !important;
+}
+
+.codeExample {
+  margin-bottom: 20px !important;
+}
+
+.codeBlock {
+  border-radius: 5px;
+}
+
+.codeBlock pre {
+  background-color: #002039 !important;
+  color: #F7F7F7;
+}
+
+.codeBlock pre span.nt { color: #dd2e44 !important; }
+.codeBlock pre span.s { color: #f7e741 !important; }
+.codeBlock pre span.na { color: #73A771 !important; }
+
+.widget {
+  margin-top: 0 !important;
+  margin-bottom: 0 !important;
+}
+
+
+.bs-glyphicons {
+  display: block;
+}
+
+.bs-glyphicons-list {
+  padding-left: 0;
+  list-style: none;
+}
+
+.bs-glyphicons li {
+  width: 20%;
+  float: left;
+  height: 80px;
+  padding: 10px;
+  line-height: 1.4;
+  text-align: center;
+  background-color: #F9F9F9;
+  border: 1px solid #FFF;
+}
+
+.bs-glyphicons li:hover {
+  color: #FFF;
+  background-color: #563D7C;
+}
+
+.bs-glyphicons li:hover code {
+  color: #FFF;
+  background-color: transparent;
+}
+
+.i-checks2 label {
+  padding-left: 0 !important;
+}
+
+.radio.i-checks2 {
+  margin: 0 !important;
+}
+
+.radio.i-checks2 label {
+  margin: 5px 0 !important;
+}
+
+table td, table th {
+  padding: 5px;
+}

package/styleguide-dep/js/checkbox.js

@@ -0,0 +1,6 @@
+  $(document).ready(function () {
+      $('.i-checks2').iCheck({
+          checkboxClass: 'icheckbox_square-steelblue',
+          radioClass: 'iradio_square-steelblue',
+      });
+  });