wcc-styles 0.1.0

data/lib/assets/stylesheets/wcc/styles/snippets/_tables.scss

@@ -0,0 +1,268 @@
+/*===========================================
+  Table Styles
+============================================*/
+
+table { max-width: 100%; background-color: transparent; }
+
+thead { background-color: #777777; color: white; font-size: 12px; font-weight: 400; }
+
+th { text-align: left; }
+
+td { padding: 10px; vertical-align: center; }
+
+.table { width: 100%; margin-bottom: 20px; }
+
+.table > thead > tr > th,
+.table > tbody > tr > th,
+.table > tfoot > tr > th,
+.table > thead > tr > td,
+.table > tbody > tr > td,
+.table > tfoot > tr > td {
+  padding: 8px 15px;
+  line-height: 1.42857143;
+}
+.table > thead > tr > th {
+  text-transform: uppercase;
+  letter-spacing: 0.2em;
+  font-size: 10px;
+  font-weight: 400;
+}
+.table > caption + thead > tr:first-child > th,
+.table > colgroup + thead > tr:first-child > th,
+.table > thead:first-child > tr:first-child > th,
+.table > caption + thead > tr:first-child > td,
+.table > colgroup + thead > tr:first-child > td,
+.table > thead:first-child > tr:first-child > td {
+  border-top: 0;
+}
+.table > tbody + tbody {
+  border-top: 2px solid $neutral5;
+}
+.table .table {
+  background-color: #ffffff;
+}
+
+.table {
+
+  &.condensed > thead > tr > th,
+  &.condensed > tbody > tr > th,
+  &.condensed > tfoot > tr > th,
+  &.condensed > thead > tr > td,
+  &.condensed > tbody > tr > td,
+  &.condensed > tfoot > tr > td {
+    padding: 5px;
+  }
+
+  &.bordered {
+    border: 1px solid $neutral5;
+  }
+
+  &.bordered > thead > tr > th,
+  &.bordered > tbody > tr > th,
+  &.bordered > tfoot > tr > th,
+  &.bordered > thead > tr > td,
+  &.bordered > tbody > tr > td,
+  &.bordered > tfoot > tr > td {
+    border: 1px solid $neutral5;
+  }
+  &.bordered > thead > tr > th,
+  &.bordered > thead > tr > td {
+    border-bottom-width: 2px;
+  }
+
+  &.striped > tbody > tr:nth-child(odd) > td,
+  &.striped > tbody > tr:nth-child(odd) > th {
+    background-color: $neutral1;
+  }
+
+}
+
+.table-condensed > thead > tr > th,
+.table-condensed > tbody > tr > th,
+.table-condensed > tfoot > tr > th,
+.table-condensed > thead > tr > td,
+.table-condensed > tbody > tr > td,
+.table-condensed > tfoot > tr > td {
+  padding: 5px;
+}
+.table-bordered {
+  border: 1px solid $neutral5;
+}
+.table-bordered > thead > tr > th,
+.table-bordered > tbody > tr > th,
+.table-bordered > tfoot > tr > th,
+.table-bordered > thead > tr > td,
+.table-bordered > tbody > tr > td,
+.table-bordered > tfoot > tr > td {
+  border: 1px solid $neutral5;
+}
+.table-bordered > thead > tr > th,
+.table-bordered > thead > tr > td {
+  border-bottom-width: 2px;
+}
+.table-striped > tbody > tr:nth-child(odd) > td,
+.table-striped > tbody > tr:nth-child(odd) > th {
+  background-color: $neutral1;
+}
+.table-hover > tbody > tr:hover > td,
+.table-hover > tbody > tr:hover > th {
+  background-color: #f5f5f5;
+}
+table col[class*="col-"] {
+  position: static;
+  float: none;
+  display: table-column;
+}
+table td[class*="col-"],
+table th[class*="col-"] {
+  position: static;
+  float: none;
+  display: table-cell;
+}
+.table > thead > tr > td.active,
+.table > tbody > tr > td.active,
+.table > tfoot > tr > td.active,
+.table > thead > tr > th.active,
+.table > tbody > tr > th.active,
+.table > tfoot > tr > th.active,
+.table > thead > tr.active > td,
+.table > tbody > tr.active > td,
+.table > tfoot > tr.active > td,
+.table > thead > tr.active > th,
+.table > tbody > tr.active > th,
+.table > tfoot > tr.active > th {
+  background-color: #f5f5f5;
+}
+.table-hover > tbody > tr > td.active:hover,
+.table-hover > tbody > tr > th.active:hover,
+.table-hover > tbody > tr.active:hover > td,
+.table-hover > tbody > tr.active:hover > th {
+  background-color: #e8e8e8;
+}
+.table > thead > tr > td.success,
+.table > tbody > tr > td.success,
+.table > tfoot > tr > td.success,
+.table > thead > tr > th.success,
+.table > tbody > tr > th.success,
+.table > tfoot > tr > th.success,
+.table > thead > tr.success > td,
+.table > tbody > tr.success > td,
+.table > tfoot > tr.success > td,
+.table > thead > tr.success > th,
+.table > tbody > tr.success > th,
+.table > tfoot > tr.success > th {
+  background-color: #dff0d8;
+}
+.table-hover > tbody > tr > td.success:hover,
+.table-hover > tbody > tr > th.success:hover,
+.table-hover > tbody > tr.success:hover > td,
+.table-hover > tbody > tr.success:hover > th {
+  background-color: #d0e9c6;
+}
+.table > thead > tr > td.info,
+.table > tbody > tr > td.info,
+.table > tfoot > tr > td.info,
+.table > thead > tr > th.info,
+.table > tbody > tr > th.info,
+.table > tfoot > tr > th.info,
+.table > thead > tr.info > td,
+.table > tbody > tr.info > td,
+.table > tfoot > tr.info > td,
+.table > thead > tr.info > th,
+.table > tbody > tr.info > th,
+.table > tfoot > tr.info > th {
+  background-color: #d9edf7;
+}
+.table-hover > tbody > tr > td.info:hover,
+.table-hover > tbody > tr > th.info:hover,
+.table-hover > tbody > tr.info:hover > td,
+.table-hover > tbody > tr.info:hover > th {
+  background-color: #c4e3f3;
+}
+.table > thead > tr > td.warning,
+.table > tbody > tr > td.warning,
+.table > tfoot > tr > td.warning,
+.table > thead > tr > th.warning,
+.table > tbody > tr > th.warning,
+.table > tfoot > tr > th.warning,
+.table > thead > tr.warning > td,
+.table > tbody > tr.warning > td,
+.table > tfoot > tr.warning > td,
+.table > thead > tr.warning > th,
+.table > tbody > tr.warning > th,
+.table > tfoot > tr.warning > th {
+  background-color: #fcf8e3;
+}
+.table-hover > tbody > tr > td.warning:hover,
+.table-hover > tbody > tr > th.warning:hover,
+.table-hover > tbody > tr.warning:hover > td,
+.table-hover > tbody > tr.warning:hover > th {
+  background-color: #faf2cc;
+}
+.table > thead > tr > td.danger,
+.table > tbody > tr > td.danger,
+.table > tfoot > tr > td.danger,
+.table > thead > tr > th.danger,
+.table > tbody > tr > th.danger,
+.table > tfoot > tr > th.danger,
+.table > thead > tr.danger > td,
+.table > tbody > tr.danger > td,
+.table > tfoot > tr.danger > td,
+.table > thead > tr.danger > th,
+.table > tbody > tr.danger > th,
+.table > tfoot > tr.danger > th {
+  background-color: #f2dede;
+}
+.table-hover > tbody > tr > td.danger:hover,
+.table-hover > tbody > tr > th.danger:hover,
+.table-hover > tbody > tr.danger:hover > td,
+.table-hover > tbody > tr.danger:hover > th {
+  background-color: #ebcccc;
+}
+@media (max-width: 767px) {
+  .table-responsive {
+    width: 100%;
+    margin-bottom: 15px;
+    overflow-y: hidden;
+    overflow-x: scroll;
+    -ms-overflow-style: -ms-autohiding-scrollbar;
+    border: 1px solid $neutral5;
+    -webkit-overflow-scrolling: touch;
+  }
+  .table-responsive > .table {
+    margin-bottom: 0;
+  }
+  .table-responsive > .table > thead > tr > th,
+  .table-responsive > .table > tbody > tr > th,
+  .table-responsive > .table > tfoot > tr > th,
+  .table-responsive > .table > thead > tr > td,
+  .table-responsive > .table > tbody > tr > td,
+  .table-responsive > .table > tfoot > tr > td {
+    white-space: nowrap;
+  }
+  .table-responsive > .table-bordered {
+    border: 0;
+  }
+  .table-responsive > .table-bordered > thead > tr > th:first-child,
+  .table-responsive > .table-bordered > tbody > tr > th:first-child,
+  .table-responsive > .table-bordered > tfoot > tr > th:first-child,
+  .table-responsive > .table-bordered > thead > tr > td:first-child,
+  .table-responsive > .table-bordered > tbody > tr > td:first-child,
+  .table-responsive > .table-bordered > tfoot > tr > td:first-child {
+    border-left: 0;
+  }
+  .table-responsive > .table-bordered > thead > tr > th:last-child,
+  .table-responsive > .table-bordered > tbody > tr > th:last-child,
+  .table-responsive > .table-bordered > tfoot > tr > th:last-child,
+  .table-responsive > .table-bordered > thead > tr > td:last-child,
+  .table-responsive > .table-bordered > tbody > tr > td:last-child,
+  .table-responsive > .table-bordered > tfoot > tr > td:last-child {
+    border-right: 0;
+  }
+  .table-responsive > .table-bordered > tbody > tr:last-child > th,
+  .table-responsive > .table-bordered > tfoot > tr:last-child > th,
+  .table-responsive > .table-bordered > tbody > tr:last-child > td,
+  .table-responsive > .table-bordered > tfoot > tr:last-child > td {
+    border-bottom: 0;
+  }
+}

data/lib/assets/stylesheets/wcc/styles/snippets/_top_nav.scss

@@ -0,0 +1,278 @@
+/*===========================================
+  Header Styles
+============================================*/
+
+header {
+  width: 100%;
+  background-color: white;
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+  position: relative;
+  min-height: 70px;
+  font-weight: 300;
+  padding: 0px 30px;
+  z-index: 1000;
+
+  .logo-holder {
+    display: inline-block;
+    float: left;
+    height: 70px;
+
+    h1.wm-logo-title {
+      background: image-url("wcc/styles/logo-dark.png") no-repeat;
+      background-image: image-url("wcc/styles/logo-dark.svg"), none;
+      background-size: 30px 30px;
+      background-position: 0 50%;
+      font-size: 14px;
+      font-weight: 600;
+      letter-spacing: .3em;
+      padding: 25px 45px;
+      text-transform: uppercase;
+
+      a {
+        color: $text;
+
+        &:visited { color: $text; }
+      }
+    }
+
+    h1.logo {
+      width: 200px;
+      height: 70px;
+      margin: 15px 0 0 0;
+      background: image-url("wcc/styles/logo-dark.png") no-repeat;
+      background-image: image-url("wcc/styles/logo-dark.svg"), none;
+      background-size: 100%;
+      background-repeat: no-repeat;
+      font: 0/0 a;
+      text-shadow: none;
+      color: transparent;
+
+      a {
+        width: 100%;
+        height: 70px;
+        float: left;
+        color: $text;
+        display: inline;
+        cursor: pointer;
+      }
+    }
+
+  }
+
+  .account-block {
+    line-height: 70px;
+    float: right;
+    display: inline;
+  }
+
+  &.dark-bar {
+    background-color: #393939;
+    color: white;
+    margin: 0;
+
+    h1.wm-logo-title {
+      background: image-url("wcc/styles/logo.png") no-repeat;
+      background-image: image-url("wcc/styles/logo.svg"), none;
+      background-size: 30px 30px;
+      background-position: 0 50%;
+      font-weight: 600;
+
+
+      a {
+        color: white;
+
+        &:visited { color: white; }
+      }
+    }
+
+    nav {
+      background-color: #393939;
+      color: white;
+
+      ul li {
+        border-right: 1px solid rgba(255,255,255,0.1);
+        color: white;
+
+        a {
+          color: white;
+        }
+      }
+
+      li a:hover {
+        background-color: black;
+      }
+
+      li:last-of-type {
+        border-right: 1px solid rgba(0, 0, 0, 0);
+      }
+    }
+  }
+
+  nav {
+    height: 70px;
+    display: inline-block;
+
+    ul {
+      margin: 0;
+      padding: 0;
+      font-size: .825em;
+      list-style: none;
+      line-height: 70px;
+      color: $text;
+      float: left;
+      display: inline-block;
+
+      li {
+        border-right: 1px solid rgba(0,0,0,0.1);
+        margin: 0;
+        height: 70px;
+        display: inline-block;
+        float: left;
+
+        a {
+          width: 100%;
+          height: 70px;
+          line-height: 70px;
+          color: $text;
+          font-size: 1.25em;
+          font-weight: 400;
+          padding: 0 30px;
+          float: left;
+
+          &:hover {
+            background-color: $neutral2;
+          }
+        }
+
+        &:hover ul {
+          position: absolute;
+          width: 200px;
+          margin: 0;
+          margin-top: 70px;
+          background-color: $green;
+          display: list-item !important;
+        }
+
+        ul {
+          display:none;
+
+          li {
+            width: 200px;
+
+            a {
+              width: 200px;
+              float: left;
+
+              &:hover {
+                background-color: darken($green, 15%);
+              }
+            }
+          }
+        }
+      }
+
+      &.main {
+        float: left;
+        margin: 0;
+      }
+
+    }
+  }
+
+  .search {
+    float: right;
+    position: relative;
+
+    i {
+      position: absolute;
+      top: 17px;
+      left: 15px;
+      z-index: 10;
+    }
+
+    input[type="search"] {
+      width: 100%;
+      height: 40px;
+      margin: 5px 0;
+      padding: 0px 15px 0 35px;
+      font-size: 1em;
+      border: none;
+      position: absolute;
+      top: 0;
+      right: 0;
+      z-index: 5;
+    }
+  }
+}
+
+@media (max-width: 480px) {
+  header {
+    padding: 0 10px;
+
+    nav {
+      height: auto;
+      width: 100%;
+
+      ul {
+        width: 100%;
+        height: auto;
+        line-height: inherit;
+
+        li,
+        li a {
+          height: 30px;
+          line-height: 30px;
+        }
+      }
+    }
+
+    .account-block .welcome {
+      display: none;
+    }
+
+    nav ul li {
+      width: 100%;
+      border-right: 0;
+      border-bottom: 1px solid rgba(0,0,0,0.1);
+
+      &:last-child {
+        border: 0;
+      }
+
+      a {
+        width: 100%;
+      }
+    }
+
+    &.dark-bar nav ul li {
+      border-right: 0;
+      border-bottom: 1px solid rgba(255,255,255,0.1);
+
+      &:last-child {
+        border: 0;
+      }
+    }
+  }
+}
+.page-header {
+  margin-top: 30px;
+
+  &.border-bottom {
+    border-bottom: 2px solid $neutral2;
+    padding-bottom: 10px;
+    margin-bottom: 30px;
+  }
+
+  form.search {
+    display: inline-block;
+    margin: 2px 10px;
+
+    input[type="search"] {
+      @extend input[type="text"];
+      padding: 10px;
+      margin: 0;
+      vertical-align: middle;
+    }
+  }
+
+}