codeclimate-styles 0.1.0

data/assets/stylesheets/cc/styles/modules/_buttons.scss

@@ -0,0 +1,186 @@
+/*doc
+---
+title: Button
+name: button
+category: buttons
+---
+
+Buttons can be `a`, `button`, or `input` tags.
+
+- `:hover` - Slighly elevates and thicker shadow on hover.
+- `:active` - Depressed and darker green on active state.
+- `:disabled` - Becomes monochromatic on disabled state.
+- `.btn--primary` - Indicates button is primary action.
+
+```slim_example
+button.btn Submit
+button.btn.btn--disabled Submit
+button.btn.btn--primary Submit
+button.btn.btn--primary.btn--disabled Submit
+```
+*/
+
+/*doc
+---
+title: Large button
+name: large-button
+category: buttons
+---
+
+Large buttons should be used sparigingly, e.g. for "hero" CTAs.
+
+```slim_example
+button.btn.btn--large Submit
+button.btn.btn--large.btn--primary Submit
+```
+*/
+
+.btn {
+  background-color: $white;
+  border: 1px solid $box-border-color;
+  border-radius: 4px;
+  box-shadow: 0 1px 3px $box-shadow-color;
+  color: $grayscale-smoke;
+  cursor: pointer;
+  display: inline-block;
+  font-size: 16px;
+  line-height: 1;
+  outline: none;
+  padding: 6px 22px;
+  transform: translateY(0);
+  transition: box-shadow .25s ease, background-color .25s ease, transform .25s ease;
+
+  &:hover,
+  &:focus {
+    border-color: $green-dark;
+    box-shadow: 0 5px 7px $box-shadow-color;
+    color: $green-dark;
+    transform: translateY(-2px);
+  }
+
+  &:active {
+    border-color: $green-dark;
+    box-shadow: 0 1px 3px $box-shadow-color;
+    transform: translateY(0);
+  }
+
+  &:disabled,
+  &.btn--disabled {
+    background-color: $grayscale-pearl;
+    box-shadow: 0 1px 3px $box-shadow-color-disabled;
+    color: $grayscale-slate;
+    cursor: auto;
+    transform: translateY(0);
+
+    &:hover,
+    &:focus,
+    &:active,
+    &.btn--disabled {
+      border-color: $box-border-color;
+      color: $grayscale-slate;
+    }
+  }
+
+  &.btn--primary {
+    background-color: $green;
+    border: 1px solid $green;
+    color: $white;
+
+    &:active {
+      background-color: $green-dark;
+      border: 1px solid $green-dark;
+    }
+
+    &:disabled,
+    &.btn--disabled {
+      background-color: lighten($green, 20%);
+      border: 1px solid lighten($green, 20%);
+      color: $grayscale-pearl;
+    }
+  }
+
+  &.btn--large {
+    font-family: $sans-serif-semibold;
+    font-size: 18px;
+    padding: 15px 30px;
+  }
+
+  &.btn--octicon {
+    line-height: 100%;
+
+    .octicon {
+      margin-right: .4rem;
+    }
+  }
+
+}
+
+/*doc
+---
+title: Add Button
+name: add-button
+category: buttons
+---
+
+- `:hover` - Normal green on hover state.
+- `:active` - Darker green on active state.
+- `:disabled` - Less opaque in disabled state.
+
+```slim_example
+button.add-btn Submit
+```
+*/
+
+$add-btn-background-color: #d8d8d8;
+$add-btn-disabled-background-color: #e9e9e9;
+
+.add-btn {
+  background-color: $add-btn-background-color;
+  border: 0;
+  border-radius: 13px;
+  cursor: pointer;
+  height: 25px;
+  margin: 0;
+  outline: none;
+  padding: 0;
+  position: relative;
+  text-indent: -99999px;
+  transition: background-color .25s ease;
+  white-space: nowrap;
+  width: 25px;
+
+  &:hover {
+    background-color: $green;
+  }
+
+  &::before,
+  &::after {
+    background-color: $white;
+    content: "";
+    position: absolute;
+  }
+
+  &::before {
+    height: 10px;
+    left: 12px;
+    top: 7px;
+    width: 1px;
+  }
+
+  &::after {
+    height: 1px;
+    left: 7px;
+    top: 12px;
+    width: 10px;
+  }
+
+  &:active {
+    background-color: $green-dark;
+  }
+
+  &:disabled,
+  &.disabled {
+    background-color: $add-btn-disabled-background-color;
+    cursor: auto;
+  }
+}

data/assets/stylesheets/cc/styles/modules/_code.scss

@@ -0,0 +1,221 @@
+// scss-lint:disable all
+
+/*doc
+---
+title: Pre
+name: pre
+category: typography
+---
+
+```slim_example
+pre Hello
+```
+*/
+
+pre {
+  font-size: 13px;
+  line-height: 16px;
+  border-radius: 3px;
+  overflow: hidden;
+  font-family: $monospace;
+}
+
+/*doc
+---
+title: Code
+name: code
+category: typography
+---
+
+```slim_example
+div wfleming wants to merge <code>foo</code> into <code>master</code>
+```
+*/
+
+code {
+  background: $grayscale-pearl;
+  color: $grayscale-console;
+
+  .token.comment,
+  .token.prolog,
+  .token.doctype,
+  .token.cdata {
+    color: slategray;
+  }
+
+  .token.punctuation {
+    color: #999;
+  }
+
+  .namespace {
+    opacity: .7;
+  }
+
+  .token.property,
+  .token.tag,
+  .token.boolean,
+  .token.number,
+  .token.constant,
+  .token.symbol,
+  .token.deleted {
+    color: #905;
+  }
+
+  .token.selector,
+  .token.attr-name,
+  .token.string,
+  .token.char,
+  .token.builtin,
+  .token.inserted {
+    color: #690;
+  }
+
+  .token.operator,
+  .token.entity,
+  .token.url,
+  .language-css .token.string,
+  .style .token.string {
+    color: #a67f59;
+    background: hsla(0, 0%, 100%, .5);
+  }
+
+  .token.atrule,
+  .token.attr-value,
+  .token.keyword {
+    color: #07a;
+  }
+
+  .token.function {
+    color: #DD4A68;
+  }
+
+  .token.regex,
+  .token.important,
+  .token.variable {
+    color: #e90;
+  }
+
+  .token.important,
+  .token.bold {
+    font-weight: bold;
+  }
+  .token.italic {
+    font-style: italic;
+  }
+
+  .token.entity {
+    cursor: help;
+  }
+}
+
+:not(pre) > code {
+  font-size: 90%;
+  border-radius: 4px;
+  padding: 2px 4px;
+  font-family: $monospace;
+}
+
+pre > code {
+  display: block;
+  padding: 12px;
+}
+
+$line-number-width: 57px;
+$annotation-background-color: rgb(255, 227, 160);
+$annotation-before-border-color: rgb(227, 196, 121);
+$covered-background-color: rgba(#85e485, 0.2);
+$not-covered-background-color: rgba(#ff4e1f, 0.2);
+
+pre > code[class*="language-"] {
+  padding: 0;
+  border: 1px solid $box-border-color;
+  background: $white;
+  overflow: hidden;
+
+  > div {
+    position: relative;
+    padding: 4px 13px 4px 70px;
+
+    &::before {
+      box-sizing: border-box;
+      content: attr(data-line-number);
+      color: $grayscale-storm;
+      position: absolute;
+      top: 0;
+      left: 0;
+      bottom: 0;
+      width: $line-number-width;
+      text-align: right;
+      padding: 4px 13px;
+      border-right: 1px solid $box-border-color;
+    }
+  }
+
+  > .annotation {
+    display: none;
+  }
+}
+
+.prism-toggle pre {
+  border-top-left-radius: 0;
+  border-top-right-radius: 0;
+}
+
+.prism-toggle__checkboxes {
+  background: $grayscale-pearl;
+  padding: 18px 24px;
+  border: 1px solid $box-border-color;
+  border-bottom: 0;
+  border-top-left-radius: 3px;
+  border-top-right-radius: 3px;
+
+  .checkbox {
+    color: $grayscale-storm;
+    font-size: 14px;
+    font-family: $sans-serif-semibold;
+    margin-right: 24px;
+  }
+}
+
+:not(.prism-toggle) > pre > code > .annotation,
+.prism-toggle--show-annotations > pre > code > .annotation {
+  background: $annotation-background-color;
+  font-family: $sans-serif-semibold;
+  color: $grayscale-console;
+  font-size: 14px;
+  line-height: 1.3em;
+  padding-top: 12px;
+  padding-bottom: 12px;
+  display: block;
+
+  &::before {
+    background-color: $annotation-background-color;
+    background-image: image-url("cc/styles/icons/alert_solid.svg");
+    background-repeat: no-repeat;
+    background-position: ($line-number-width - 28px) center;
+    background-size: 15px auto;
+    border-right-color: $annotation-before-border-color;
+  }
+
+  &::after {
+    content: "";
+    position: absolute;
+    width: 0;
+    height: 0;
+    bottom: -10px;
+    left: 0;
+    border-bottom: 10px solid transparent;
+    border-left: 10px solid $annotation-background-color;
+    z-index: 1;
+  }
+}
+
+:not(.prism-toggle) > pre > code > .covered,
+.prism-toggle--show-coverage > pre > code > .covered {
+  background: $covered-background-color;
+}
+
+:not(.prism-toggle) > pre > code > .not-covered,
+.prism-toggle--show-coverage > pre > code > .not-covered {
+  background: $not-covered-background-color;
+}

data/assets/stylesheets/cc/styles/modules/_forms.scss

@@ -0,0 +1,246 @@
+/*doc
+---
+title: Forms
+name: form elements
+category: forms
+---
+
+```slim_example
+form.form
+  .control-group
+    label for="field" Field Name
+    .controls
+      input.input type="text" id="field"
+      p.help-block Explain what the field means
+  .control-group.error
+    label for="other_field" Other field
+    .controls
+      input.input type="text" id="other_field"
+      span.help-inline inline errors and the like
+      p.help-block Explain what the other field means
+```
+*/
+
+// scss-lint:disable SelectorFormat, QualifyingElement
+// classes here are straight from simple_form, not under our control
+.form {
+  abbr[title=required] {
+    display: none;
+  }
+
+  label {
+    display: inline-block;
+    font-size: 75%;
+    letter-spacing: .05rem;
+    margin-bottom: .3rem;
+    text-transform: uppercase;
+  }
+
+  .control-group {
+    margin: .8rem 0;
+  }
+
+  .error input {
+    border: 1px solid $velvet-dark;
+  }
+
+  .help-inline {
+    margin-left: .5rem;
+  }
+
+  .help-block {
+    margin-top: .3rem;
+  }
+
+  .help-block,
+  .help-inline {
+    color: $grayscale-storm;
+    font-size: 75%;
+    line-height: 15px;
+  }
+}
+// scss-lint:enable SelectorFormat, QualifyingElement
+
+.form--search {
+  &::before {
+    @include ff-mask-image(image-url("cc/styles/icons/search_solid.svg"));
+    background: $grayscale-slate;
+    content: " ";
+    height: 39px;
+    left: 11px;
+    mask-position: center;
+    mask-repeat: no-repeat;
+    mask-size: 100% auto;
+    position: absolute;
+    width: 15px;
+
+    // Afer 01-05-2017 this can be removed & replaced with simply `mask-image`.
+    @-moz-document url-prefix() {
+      background-position: center 11px;
+    }
+  }
+
+  // scss-lint:disable QualifyingElement
+  input[type=search] {
+    padding-left: 30px;
+    width: 230px;
+
+    &:focus,
+    &:not(:placeholder-shown) {
+      width: 320px;
+    }
+  }
+  // scss-lint:enable QualifyingElement
+}
+
+// scss-lint:disable SelectorFormat, QualifyingElement
+// simple_form applies these classes to wrapper elements
+/*doc
+---
+title: Input
+name: input
+category: forms
+---
+
+```slim_example
+input.input type="text" placeholder="Search for a repo..."
+```
+*/
+
+input.input,
+textarea.input {
+  -webkit-appearance: none;
+  background-color: $white;
+  border: 1px solid $box-border-color;
+  border-radius: 6px;
+  color: $grayscale-console;
+  display: inline-block;
+  font-size: 14px;
+  line-height: 1;
+  outline: none;
+  padding: 11px 14px 9px;
+  transition: background-color .25s ease, border-color .25s ease;
+
+  &:focus {
+    border-color: $green;
+    box-shadow: inset 0 1px 3px darken($grayscale-pearl, 3%);
+  }
+
+  &:disabled {
+    opacity: .5;
+  }
+
+  &::-webkit-search-cancel-button {
+    display: none;
+  }
+}
+
+/*doc
+---
+title: Checkbox
+name: checkbox
+category: forms
+---
+
+```slim_example
+.checkbox
+  input type="checkbox" id="issues"
+  label(for="issues") Issues
+```
+*/
+
+$checkbox-size: 15px;
+
+.checkbox {
+  display: inline-block;
+  position: relative;
+
+  input {
+    display: none;
+  }
+
+  input:checked + label::before {
+    background-color: $green;
+
+    // Afer 01-05-2017 this can be removed
+    @-moz-document url-prefix() {
+      background-color: $grayscale-aluminium;
+    }
+  }
+
+  input:checked + label::after {
+    background-color: $white;
+
+    // Afer 01-05-2017 this can be removed
+    @-moz-document url-prefix() {
+      background: image-url("cc/styles/icons/checkmark.svg") 1px 3px no-repeat transparent;
+    }
+  }
+
+  label {
+    cursor: pointer;
+    padding-left: $checkbox-size + 10px;
+    user-select: none;
+
+    &::before,
+    &::after {
+      content: "";
+      height: $checkbox-size;
+      left: 0;
+      margin-top: -($checkbox-size / 2);
+      position: absolute;
+      top: 50%;
+      width: $checkbox-size;
+    }
+
+    &::before {
+      background: $grayscale-aluminium;
+      border-radius: 2px;
+    }
+
+    &::after {
+      background-color: transparent;
+      mask-image: image-url("cc/styles/icons/checkmark.svg");
+      mask-position: center;
+      mask-repeat: no-repeat;
+      mask-size: 50% auto;
+    }
+  }
+
+}
+
+/*doc
+---
+title: Select
+name: select
+category: forms
+---
+
+```slim_example
+select.select
+  option selected=true Complexity
+  option Duplication
+```
+*/
+
+$select-border-color: #e6e6e6;
+$select-box-shadow-color: rgba(0, 0, 0, .06);
+
+select.select {
+  -webkit-appearance: none;
+  background: $white;
+  background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iVVRGLTgiPz4KPHN2ZyB3aWR0aD0iMTBweCIgaGVpZ2h0PSI2cHgiIHZpZXdCb3g9IjAgMCAxMCA2IiB2ZXJzaW9uPSIxLjEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiPgogICAgPCEtLSBHZW5lcmF0b3I6IFNrZXRjaCA0MC4yICgzMzgyNikgLSBodHRwOi8vd3d3LmJvaGVtaWFuY29kaW5nLmNvbS9za2V0Y2ggLS0+CiAgICA8dGl0bGU+R3JvdXAgMjwvdGl0bGU+CiAgICA8ZGVzYz5DcmVhdGVkIHdpdGggU2tldGNoLjwvZGVzYz4KICAgIDxkZWZzPjwvZGVmcz4KICAgIDxnIGlkPSItIiBzdHJva2U9Im5vbmUiIHN0cm9rZS13aWR0aD0iMSIgZmlsbD0ibm9uZSIgZmlsbC1ydWxlPSJldmVub2RkIiBzdHJva2UtbGluZWNhcD0icm91bmQiPgogICAgICAgIDxnIGlkPSJJc3N1ZXMiIHRyYW5zZm9ybT0idHJhbnNsYXRlKC0xMjQxLjAwMDAwMCwgLTQzNi4wMDAwMDApIiBzdHJva2Utd2lkdGg9IjIiIHN0cm9rZT0iIzlCOUI5QiI+CiAgICAgICAgICAgIDxnIGlkPSJHcm91cC0yIiB0cmFuc2Zvcm09InRyYW5zbGF0ZSgxMjQyLjAwMDAwMCwgNDM3LjAwMDAwMCkiPgogICAgICAgICAgICAgICAgPGcgaWQ9Ikdyb3VwIj4KICAgICAgICAgICAgICAgICAgICA8cGF0aCBkPSJNMy41MzU1MzM5MSwzLjUzNTUzMzkxIEwwLDAiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgICAgICA8L2c+CiAgICAgICAgICAgICAgICA8cGF0aCBkPSJNNCwzLjUzNTUzMzkxIEw3LjUzNTUzMzkxLDAiIGlkPSJMaW5lIj48L3BhdGg+CiAgICAgICAgICAgIDwvZz4KICAgICAgICA8L2c+CiAgICA8L2c+Cjwvc3ZnPg==);
+  background-position: right 10px center;
+  background-repeat: no-repeat;
+  background-size: 12px auto;
+  border: 1px solid $select-border-color;
+  box-shadow: 0 1px 3px $select-box-shadow-color;
+  color: $grayscale-deep;
+  cursor: pointer;
+  font-size: 12px;
+  line-height: 1;
+  outline: none;
+  padding: 10px 12px;
+  width: 100%;
+}
+// scss-lint:enable SelectorFormat, QualifyingElement