wcc-styles 0.1.0

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

@@ -0,0 +1,117 @@
+// Styles for Labels - Managed in /theme/sass/snippets/_labels.scss
+
+.label {
+  background-color: $light-grey;
+  display: inline;
+  padding: .2em .6em .3em;
+  font-size: 75%;
+  font-weight: bold;
+  line-height: 1;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  border-radius: .25em;
+
+  &.primary {
+    background-color: $orange;
+  }
+
+  &.success {
+    background-color: $green;
+  }
+
+  &.warning {
+    background-color: $yellow;
+  }
+
+  &.info {
+    background-color: $blue;
+  }
+
+  &.danger {
+    background-color: $red;
+  }
+}
+
+.label-info {
+  background-color: $blue;
+}
+
+.label[href]:hover,
+.label[href]:focus {
+  background-color: $light-grey;
+}
+
+.primary[href]:hover,
+.primary[href]:focus {
+  background-color: $orange;
+}
+
+.success[href]:hover,
+.success[href]:focus {
+  background-color: $green;
+}
+
+.warning[href]:hover,
+.warning[href]:focus {
+  background-color: #e8c941;
+}
+
+.danger[href]:hover,
+.danger[href]:focus {
+  background-color: #c9302c;
+}
+
+a.label:hover,
+a.label:focus {
+  color: #fff;
+  text-decoration: none;
+  cursor: pointer;
+}
+
+.label:empty {
+  display: none;
+}
+
+.btn .label {
+  position: relative;
+  top: -1px;
+}
+
+.badge {
+  display: inline-block;
+  min-width: 10px;
+  padding: 3px 7px;
+  font-size: 12px;
+  font-weight: bold;
+  line-height: 1;
+  color: #fff;
+  text-align: center;
+  white-space: nowrap;
+  vertical-align: baseline;
+  background-color: #777;
+  border-radius: 10px;
+}
+
+.badge:empty {
+  display: none;
+}
+
+.btn .badge {
+  position: relative;
+  top: -1px;
+}
+
+.btn-xs .badge,
+.btn-group-xs > .btn .badge {
+  top: 0;
+  padding: 1px 5px;
+}
+
+a.badge:hover,
+a.badge:focus {
+  color: #fff;
+  text-decoration: none;
+  cursor: pointer;
+}

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

@@ -0,0 +1,146 @@
+ul.nav {
+  display: inline-block;
+}
+
+.nav {
+  padding-left: 0;
+  margin-bottom: 0;
+  list-style: none;
+
+  > li {
+    position: relative;
+    display: block;
+
+    > a:not(.button) {
+      position: relative;
+      display: block;
+      padding: 10px 15px;
+
+      &:hover,
+      &:focus {
+        text-decoration: none;
+        background-color: #eee;
+      }
+    }
+  }
+
+  > li.disabled {
+    > a:not(.button) {
+      color: #777;
+    }
+  }
+
+  // Tabs
+  &.tabs,
+  &.nav-tabs {
+    border-bottom: 1px solid #ddd;
+
+    > li {
+      float: left;
+      margin-bottom: -1px;
+
+      > a:not(.button) {
+        margin-right: 2px;
+        line-height: 1.42857143;
+        border: 1px solid transparent;
+        border-radius: 4px 4px 0 0;
+
+        &:hover {
+          border-color: #eee #eee #ddd;
+        }
+      }
+
+      &.active > a:not(.button) {
+        &,
+        &:hover,
+        &:focus {
+          color: #555;
+          cursor: default;
+          background-color: #fff;
+          border: 1px solid #ddd;
+          border-bottom-color: transparent;
+        }
+      }
+    }
+
+    // Justified Tabs
+    &.justified,
+    &.nav-justified {
+      width: 100%;
+      border-bottom: 0;
+
+      > li {
+        float: none;
+
+        @media (min-width: 768px) {
+          display: table-cell;
+          width: 1%;
+        }
+
+        > a {
+          margin-bottom: 5px;
+          text-align: center;
+          margin-right: 0;
+          border-radius: 4px;
+
+          @media (min-width: 768px) {
+            margin-bottom: 0;
+            border-bottom: 1px solid #ddd;
+            border-radius: 4px 4px 0 0;
+          }
+        }
+
+        &.active > a,
+        &.active > a:hover,
+        &.active > a:focus {
+          border: 1px solid #ddd;
+
+          @media (min-width: 768px) {
+            border-bottom-color: #fff;
+          }
+        }
+      }
+
+      > .dropdown .dropdown-menu {
+        top: auto;
+        left: auto;
+      }
+    }
+  }
+
+  // Pills
+  &.pills,
+  &.nav-pills {
+    > li {
+      float: left;
+
+      > a {
+        border-radius: 4px;
+      }
+
+      & + li {
+        margin-left: 2px;
+      }
+
+      &.active > a,
+      &.active > a:hover,
+      &.active > a:focus {
+        color: #fff;
+        background-color: $orange;
+      }
+    }
+  }
+
+  // Veritcal
+  &.vertical,
+  &.nav-vertical {
+    width: 100%;
+
+    li.active a,
+    li.active a:hover,
+    li.active a:focus {
+      color: #fff;
+      background-color: $orange;
+    }
+  }
+}

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

@@ -0,0 +1,99 @@
+/*! normalize.css v3.0.1 | MIT License | git.io/normalize */
+html {
+  font-family: sans-serif;
+  -ms-text-size-adjust: 100%;
+  -webkit-text-size-adjust: 100%;
+}
+body {
+  margin: 0;
+}
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+main,
+nav,
+section,
+summary {
+  display: block;
+}
+audio,
+canvas,
+progress,
+video {
+  display: inline-block;
+  vertical-align: baseline;
+}
+audio:not([controls]) {
+  display: none;
+  height: 0;
+}
+[hidden],
+template {
+  display: none;
+}
+a {
+  background: transparent;
+}
+a:active,
+a:hover {
+  outline: 0;
+}
+abbr[title] {
+  border-bottom: 1px dotted;
+}
+b,
+strong {
+  font-weight: bold;
+}
+dfn {
+  font-style: italic;
+}
+mark {
+  background: #ff0;
+  color: #000;
+}
+small {
+  font-size: 80%;
+}
+sub,
+sup {
+  font-size: 75%;
+  line-height: 0;
+  position: relative;
+  vertical-align: baseline;
+}
+sup {
+  top: -0.5em;
+}
+sub {
+  bottom: -0.25em;
+}
+img {
+  border: 0;
+}
+svg:not(:root) {
+  overflow: hidden;
+}
+figure {
+  margin: 1em 40px;
+}
+hr {
+  -moz-box-sizing: content-box;
+  box-sizing: content-box;
+  height: 0;
+}
+pre {
+  overflow: auto;
+}
+code,
+kbd,
+pre,
+samp {
+  font-family: monospace, monospace;
+  font-size: 1em;
+}

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

@@ -0,0 +1,135 @@
+/*===========================================
+  Pagination Styles
+============================================*/
+
+.pagination {
+  display: inline-block;
+  padding-left: 0;
+  margin: 20px 0;
+  border-radius: 4px;
+}
+.pagination > li {
+  display: inline;
+}
+.pagination > li > a,
+.pagination > li > span {
+  position: relative;
+  float: left;
+  padding: 6px 12px;
+  line-height: 1.42857143;
+  text-decoration: none;
+  color: $orange;
+  background-color: #ffffff;
+  border: 1px solid $neutral5;
+  margin-left: -1px;
+}
+.pagination > li:first-child > a,
+.pagination > li:first-child > span {
+  margin-left: 0;
+  border-bottom-left-radius: 4px;
+  border-top-left-radius: 4px;
+}
+.pagination > li:last-child > a,
+.pagination > li:last-child > span {
+  border-bottom-right-radius: 4px;
+  border-top-right-radius: 4px;
+}
+.pagination > li > a:hover,
+.pagination > li > span:hover,
+.pagination > li > a:focus,
+.pagination > li > span:focus {
+  color: $orange;
+  background-color: #eeeeee;
+  border-color: $neutral5;
+}
+.pagination > .active > a,
+.pagination > .active > span,
+.pagination > .active > a:hover,
+.pagination > .active > span:hover,
+.pagination > .active > a:focus,
+.pagination > .active > span:focus {
+  z-index: 2;
+  color: #ffffff;
+  background-color: $orange;
+  border-color: $orange;
+  cursor: default;
+}
+.pagination > .disabled > span,
+.pagination > .disabled > span:hover,
+.pagination > .disabled > span:focus,
+.pagination > .disabled > a,
+.pagination > .disabled > a:hover,
+.pagination > .disabled > a:focus {
+  color: #999999;
+  background-color: #ffffff;
+  border-color: $neutral5;
+  cursor: not-allowed;
+}
+.pagination-lg > li > a,
+.pagination-lg > li > span {
+  padding: 10px 16px;
+  font-size: 18px;
+}
+.pagination-lg > li:first-child > a,
+.pagination-lg > li:first-child > span {
+  border-bottom-left-radius: 6px;
+  border-top-left-radius: 6px;
+}
+.pagination-lg > li:last-child > a,
+.pagination-lg > li:last-child > span {
+  border-bottom-right-radius: 6px;
+  border-top-right-radius: 6px;
+}
+.pagination-sm > li > a,
+.pagination-sm > li > span {
+  padding: 5px 10px;
+  font-size: 12px;
+}
+.pagination-sm > li:first-child > a,
+.pagination-sm > li:first-child > span {
+  border-bottom-left-radius: 3px;
+  border-top-left-radius: 3px;
+}
+.pagination-sm > li:last-child > a,
+.pagination-sm > li:last-child > span {
+  border-bottom-right-radius: 3px;
+  border-top-right-radius: 3px;
+}
+.pager {
+  padding-left: 0;
+  margin: 20px 0;
+  list-style: none;
+  text-align: center;
+}
+.pager li {
+  display: inline;
+}
+.pager li > a,
+.pager li > span {
+  display: inline-block;
+  padding: 5px 14px;
+  background-color: #ffffff;
+  border: 1px solid $neutral5;
+  border-radius: 15px;
+}
+.pager li > a:hover,
+.pager li > a:focus {
+  text-decoration: none;
+  background-color: #eeeeee;
+}
+.pager .next > a,
+.pager .next > span {
+  float: right;
+}
+.pager .previous > a,
+.pager .previous > span {
+  float: left;
+}
+.pager .disabled > a,
+.pager .disabled > a:hover,
+.pager .disabled > a:focus,
+.pager .disabled > span {
+  color: #999999;
+  background-color: #ffffff;
+  cursor: not-allowed;
+}