codeclimate-styles 0.1.0

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

@@ -0,0 +1,820 @@
+/*doc
+---
+title: Avatar
+name: avatar
+category: misc
+---
+
+- `.small` - A small (25x25) avatar
+
+```slim_example
+img.avatar src="https://avatars.githubusercontent.com/u/1634280?v=3&u=f4d261ab0738ab0f0fdc86aa9546f0cfbb3d23f0&s=75"
+img.avatar.small src="https://avatars.githubusercontent.com/u/1634280?v=3&u=f4d261ab0738ab0f0fdc86aa9546f0cfbb3d23f0&s=75"
+```
+*/
+
+.avatar {
+  border-radius: 38px;
+  height: 75px;
+  width: 75px;
+
+  &.small {
+    border-radius: 13px;
+    height: 25px;
+    width: 25px;
+  }
+}
+
+/*doc
+---
+title: Badge
+name: badge
+category: misc
+---
+
+```slim_example
+span.badge 10
+```
+*/
+
+.badge {
+  background-color: $velvet;
+  border-radius: 15px;
+  box-sizing: border-box;
+  color: $white;
+  display: inline-block;
+  font-size: 14px;
+  height: 30px;
+  line-height: 1;
+  padding: 8px 0;
+  text-align: center;
+  white-space: nowrap;
+  width: 30px;
+}
+
+/*doc
+---
+title: Score
+name: score
+category: misc
+---
+
+- .green - A green score indicates a positive movement.
+
+```slim_example
+div.score
+  span Coverage
+  span +2%
+div.score.green
+  span Coverage
+  span +2%
+```
+*/
+
+.score {
+  > span {
+    background-color: $white;
+    color: $grayscale-slate;
+    display: inline-block;
+    font-size: 11px;
+    letter-spacing: .8px;
+    line-height: 1;
+    margin-left: 3px;
+    padding: 9px 12px;
+    text-transform: uppercase;
+    vertical-align: top;
+
+    &:first-child {
+      border-bottom-left-radius: 4px;
+      border-top-left-radius: 4px;
+      margin-left: 0;
+    }
+
+    &:last-child {
+      border-bottom-right-radius: 4px;
+      border-top-right-radius: 4px;
+      font-size: 14px;
+      padding-bottom: 8px;
+      padding-top: 7px;
+    }
+  }
+
+  &.green {
+    span:last-child {
+      color: $green;
+    }
+  }
+
+}
+
+/*doc
+---
+title: Grade
+name: grade
+category: misc
+---
+
+```slim_example
+label.grade.grade--d D
+```
+*/
+
+.grade {
+  background-color: rgba($grayscale-pearl, .45);
+  border: 2px dashed rgba($box-border-color, .45);
+  border-radius: 3px;
+  box-sizing: border-box;
+  color: $white;
+  content: "";
+  display: inline-block;
+  font-size: 16px;
+  font-weight: 700;
+  height: 27px;
+  line-height: 1;
+  position: relative;
+  text-align: center;
+  vertical-align: middle;
+  width: 27px;
+
+  .tooltip {
+    bottom: 100%;
+    left: 50%;
+    margin-left: -100px;
+    width: 200px;
+  }
+}
+
+@each $grade, $color-map in $grade-colors {
+  .grade--#{$grade} {
+    background-color: #{map-get($color-map, color)};
+    border: 0;
+    padding-top: 7px;
+  }
+}
+
+.grade--empty {
+  @include ff-mask-image(none);
+  background: transparent;
+  border: 2px dashed $box-border-color;
+}
+
+/*doc
+---
+title: Hotspot
+name: hotspot
+category: misc
+---
+
+```slim_example
+div.hotspot
+  .grade.grade--d D
+  .grade.grade--f F
+  a href="#" source/stylesheeets/syntax/_vim.scss
+```
+*/
+
+$hotspot-arrow-color: #231f20;
+
+.hotspot {
+  font-size: 15px;
+  line-height: 1;
+  white-space: nowrap;
+
+  > .grade {
+    vertical-align: top;
+
+    &:first-child::after {
+      color: $hotspot-arrow-color;
+      content: "\2192";
+      left: 30px;
+      position: absolute;
+      text-align: center;
+      width: 27px;
+    }
+
+    + .grade {
+      margin-left: 27px;
+      margin-right: 12px;
+    }
+  }
+
+  > a {
+    display: inline-block;
+    padding: 11px 0;
+    text-decoration: none;
+    vertical-align: top;
+  }
+}
+
+/*doc
+---
+title: Tooltip
+name: tooltip
+category: misc
+---
+
+```slim_example
+div
+  .tooltip I am a tooltip with content
+  | hover here to see a tooltip
+```
+*/
+
+$tooltip-background-color: rgba(4, 4, 4, .8);
+
+.tooltip {
+  background-color: $tooltip-background-color;
+  border-radius: 4px;
+  color: $white;
+  font-size: 12px;
+  line-height: 18px;
+  max-width: 200px;
+  opacity: 0;
+  padding: 4px 16px;
+  position: absolute;
+  text-align: center;
+
+  a {
+    color: $green;
+  }
+
+  a:hover {
+    color: $white;
+  }
+
+  &::before {
+    border: 6px solid transparent;
+    border-top-color: $tooltip-background-color;
+    bottom: -12px;
+    content: "";
+    height: 0;
+    left: 50%;
+    margin-left: -6px;
+    position: absolute;
+    width: 0;
+  }
+}
+
+*:hover > .tooltip,
+*:hover + .tooltip {
+  opacity: 1;
+}
+
+/*doc
+---
+title: Loading spinner
+name: loading-spinner
+category: misc
+---
+
+- `.loading-spinner--inline` - a variant to display the spinner inline with
+other content.
+
+```slim_example
+div.loading-spinner
+```
+*/
+
+$loading-spinner-border-color: #d9d9d9;
+
+.loading-spinner {
+  animation: loading-spinner 450ms infinite linear;
+  border: 2px solid $loading-spinner-border-color;
+  border-left: 2px solid $green;
+  border-radius: 50%;
+  font-size: 0;
+  height: 30px;
+  text-indent: -9999em;
+  width: 30px;
+
+  &::after {
+    border-radius: 50%;
+    height: 30px;
+    width: 30px;
+  }
+}
+
+.loading-spinner--inline {
+  display: inline-block;
+  vertical-align: middle;
+}
+
+@keyframes loading-spinner {
+  0% {
+    -webkit-transform: rotate(0deg);
+    transform: rotate(0deg);
+  }
+
+  100% {
+    -webkit-transform: rotate(360deg);
+    transform: rotate(360deg);
+  }
+}
+
+/*doc
+---
+title: Dropdown
+name: dropdown
+category: misc
+---
+
+```slim_example
+div.dropdown
+  label Latest Activity
+```
+*/
+
+.dropdown {
+  position: relative;
+
+  &:hover {
+    .dropdown__menu {
+      opacity: 1;
+      visibility: visible;
+    }
+  }
+
+}
+
+.dropdown__menu {
+  background: $white;
+  border-radius: 4px;
+  box-shadow: 0 3px 5px $box-shadow-color;
+  left: 0;
+  opacity: 0;
+  overflow: hidden;
+  position: absolute;
+  top: 100%;
+  visibility: hidden;
+  width: 100%;
+
+  a {
+    color: $grayscale-smoke;
+    display: block;
+    font-size: 14px;
+    font-weight: normal;
+    padding: 12px 22px 12px 42px;
+    position: relative;
+
+    &:hover {
+      background-color: $green;
+      color: $white;
+    }
+  }
+
+  li {
+    &.active a {
+      color: $green;
+    }
+
+    &.active a:hover {
+      color: $white;
+    }
+
+    &.active a::before {
+      @include ff-mask-image(image-url("cc/styles/icons/checkmark.svg"));
+      background-color: $green;
+      content: "";
+      height: 10px;
+      left: 22px;
+      margin-top: -5px;
+      mask-position: bottom right;
+      mask-repeat: no-repeat;
+      mask-size: 100% auto;
+      position: absolute;
+      top: 50%;
+      width: 12px;
+    }
+
+    &.active a:hover::before {
+      background-color: $white;
+    }
+  }
+
+}
+
+.dropdown__menu--no-icons {
+  a {
+    padding-left: 22px;
+  }
+}
+
+/*doc
+---
+title: Well
+name: well
+category: misc
+---
+
+```slim_example
+.well Hello!
+.well.well--info A well that is slightly more prominent with a background.
+```
+*/
+
+.well {
+  border: 1px solid $box-border-color;
+  border-radius: 7px;
+  margin-bottom: 20px;
+  padding: 24px;
+  position: relative;
+}
+
+.well--info {
+  background: $grayscale-pearl;
+}
+
+/*doc
+---
+title: Pagination
+name: pagination
+category: misc
+---
+
+```slim_example
+ul.pagination
+  li: a.pagination__arrow href="#" ‹
+  li: a href="#" 1
+  li: span.pagination__page--gap …
+  li: a href="#" 4
+  li: a href="#" 5
+  li.active: a href="#" 6
+  li: a href="#" 7
+  li: a href="#" 8
+  li: span.pagination__page--gap …
+  li: a href="#" 42
+  li: a.pagination__arrow href="#" ›
+
+ul.pagination
+  li: span.pagination__arrow.pagination__page--disabled ‹
+  li.active: a href="#" 1
+  li: a href="#" 2
+  li: a href="#" 3
+  li: a.pagination__arrow href="#" ›
+```
+*/
+
+.pagination {
+  margin-bottom: 48px;
+  text-align: center;
+  white-space: nowrap;
+
+  li {
+    display: inline-block;
+    font-size: 14px;
+    line-height: 1;
+    margin-left: 6px;
+
+    &:first-child {
+      margin-left: 0;
+    }
+
+    &.active a {
+      border-color: $green;
+    }
+  }
+
+  a,
+  .pagination__page--disabled,
+  .pagination__page--gap {
+    border: 1px solid $box-border-color;
+    border-radius: 4px;
+    box-shadow: 0 1px 3px $box-shadow-color;
+    color: $grayscale-console;
+    display: block;
+    padding: 8px 14px;
+    transition: border-color .25s ease, color .25s ease;
+  }
+
+  .pagination__page--disabled {
+    background-color: $grayscale-pearl;
+    color: $grayscale-slate;
+  }
+
+  a:hover {
+    border-color: $green;
+    color: $green-dark;
+  }
+
+  .pagination__arrow {
+    padding: 8px 20px;
+  }
+}
+
+/*doc
+---
+title: Breakdown
+name: breakdown
+category: misc
+---
+
+Breakdowns are bars used to show how parts compose a whole, e.g. the ratings of u
+files within a repository, or test coverage.
+
+```slim_example
+.breakdown
+  .breakdown__rect.breakdown__rect--grade-a style="width: 20%"
+  .breakdown__rect.breakdown__rect--grade-b style="width: 20%"
+  .breakdown__rect.breakdown__rect--grade-c style="width: 20%"
+  .breakdown__rect.breakdown__rect--grade-d style="width: 20%"
+  .breakdown__rect.breakdown__rect--grade-f style="width: 20%"
+.breakdown
+  .breakdown__rect.breakdown__rect--grade-a style="width: 20%"
+    a href="#"
+  .breakdown__rect.breakdown__rect--grade-b style="width: 20%"
+    a href="#"
+  .breakdown__rect.breakdown__rect--grade-c style="width: 20%"
+    a href="#"
+  .breakdown__rect.breakdown__rect--grade-d style="width: 20%"
+    a href="#"
+  .breakdown__rect.breakdown__rect--grade-f style="width: 20%"
+    a href="#"
+.breakdown.breakdown--small
+  .breakdown__rect.breakdown__rect--coverage style="width: 77%;"
+.breakdown.breakdown--small
+  .breakdown__rect.breakdown__rect--issues style="width: 100%;"
+.breakdown.breakdown--small
+  .breakdown__rect.breakdown__rect--critical-issues style="width: 100%;"
+```
+*/
+
+.breakdown {
+  background-color: $grayscale-pearl;
+  display: inline-block;
+  height: 10px;
+  width: 100%;
+
+  &.breakdown--small {
+    height: 2px;
+  }
+}
+
+.breakdown__rect {
+  float: left;
+  height: 100%;
+  position: relative;
+
+  a {
+    bottom: 0;
+    display: block;
+    left: 0;
+    position: absolute;
+    right: 0;
+    text-indent: -9999px;
+    top: 0;
+    white-space: nowrap;
+  }
+
+}
+
+@each $grade, $color-map in $grade-colors {
+  .breakdown__rect--grade-#{$grade} {
+    background-color: #{map-get($color-map, color)};
+
+    a:hover {
+      background-color: #{map-get($color-map, hover-color)};
+    }
+
+  }
+
+}
+
+.breakdown__rect--coverage {
+  background-color: $sky;
+
+  a:hover {
+    background-color: $sky-light;
+  }
+
+}
+
+.breakdown__rect--critical-issues {
+  background-color: $magenta;
+}
+
+.breakdown__rect--issues {
+  background-color: $nectar-dark;
+}
+
+/*doc
+---
+title: Arrowed Link
+name: arrowed
+category: misc
+---
+
+```slim_example
+a.link--arrowed(href="#") link text
+```
+*/
+
+.link--arrowed {
+  position: relative;
+
+  &::after {
+    @include ff-mask-image(image-url("cc/styles/icons/link_arrow.svg"));
+    background-color: $grayscale-aluminium;
+    bottom: 0;
+    content: "";
+    margin-top: -7px;
+    mask-position: center left;
+    mask-repeat: no-repeat;
+    mask-size: 11px 11px;
+    position: absolute;
+    right: -15px;
+    top: 50%;
+    width: 11px;
+  }
+
+  &:hover::after {
+    background-color: $green;
+  }
+}
+
+/*doc
+---
+title: Sticker
+name: sticker
+category: misc
+---
+
+```slim_example
+.sticker.sticker Better
+
+.sticker.sticker--fixed Fixed
+
+.sticker.sticker--new New
+
+.sticker.sticker--worse Worse
+```
+*/
+
+.sticker {
+  border: 1px solid $box-border-color;
+  border-radius: 5px;
+  color: $grayscale-aluminium;
+  display: inline-block;
+  font-size: 10px;
+  line-height: 1;
+  padding: 7px 10px;
+  text-transform: uppercase;
+  vertical-align: middle;
+
+  &.sticker--fixed {
+    border: 1px solid $green-light;
+    color: $green;
+  }
+
+  &.sticker--new {
+    border: 1px solid $velvet-light;
+    color: $velvet;
+  }
+
+  &.sticker--worse {
+    border: 1px solid $nectar;
+    color: $nectar-dark;
+  }
+}
+
+/*doc
+---
+title: Message
+name: message
+category: misc
+---
+
+A message indicating a current state.
+
+```slim_example
+.message
+  h3 No analysis results present
+```
+*/
+
+.message {
+  border: 1px solid $box-border-color;
+  border-radius: 4px;
+  color: $grayscale-slate;
+  padding: 150px 50px;
+  text-align: center;
+}
+
+.message__align-l {
+  text-align: left;
+}
+
+/*doc
+---
+title: Bullet Lists
+name: bullet-lists
+category: misc
+
+```slim_example
+ul
+  li Item 1
+  li Item 2
+```
+*/
+.ul__bullets {
+  list-style: disc;
+  margin: 16px;
+}
+
+/*doc
+---
+title: Dialog
+name: dialog
+category: misc
+---
+
+A notice of an event, with a call to action.
+
+```slim_example
+.dialog
+  .dialog__header An engine timed out
+  .dialog__content
+    p Please consult our documentation
+```
+*/
+
+$dialog-border-radius: 4px;
+
+.dialog {
+  border: 1px solid $box-border-color;
+  border-radius: $dialog-border-radius;
+}
+
+.dialog__header {
+  background: $grayscale-pearl;
+  border-bottom: 1px solid $box-border-color;
+  border-top-left-radius: $dialog-border-radius;
+  border-top-right-radius: $dialog-border-radius;
+  font-family: $sans-serif-semibold;
+  font-size: 15px;
+  padding: 18px 24px;
+  position: relative;
+}
+
+.dialog__content {
+  padding: 24px;
+}
+
+.dialog__footer {
+  padding: 0 24px 24px;
+}
+
+/*doc
+---
+title: Severity indicator
+name: severity-indicator
+category: misc
+---
+
+Dots to indicate the severity of an issue.
+
+```slim_example
+.severity-indicator
+  .severity-indicator__dot.severity-indicator__dot--active
+  .severity-indicator__dot.severity-indicator__dot--active
+  .severity-indicator__dot
+```
+*/
+
+$severity-indicator-dot-size: 5px;
+$severity-indicator-dot-margin: 3px;
+
+.severity-indicator {
+  display: inline-block;
+  font-size: 0;
+  height: $severity-indicator-dot-size;
+  line-height: 0;
+  margin-right: 9px;
+  position: relative;
+  vertical-align: middle;
+
+  .tooltip {
+    bottom: 100%;
+    left: 50%;
+    margin-bottom: $severity-indicator-dot-size;
+    margin-left: -75px;
+    width: 150px;
+  }
+
+}
+
+.severity-indicator__dot {
+  background: $grayscale-aluminium;
+  border-radius: $severity-indicator-dot-size / 2;
+  display: inline-block;
+  height: $severity-indicator-dot-size;
+  margin-left: $severity-indicator-dot-margin;
+  width: $severity-indicator-dot-size;
+
+  &:first-child {
+    margin-left: 0;
+  }
+}
+
+.severity-indicator__dot--active {
+  background: $velvet;
+}