registry-status-pagelet/css.styl

Pagelet with visual status overview of npm registries

$base = #444
$blue = #2980b9
$highlight = #f4f4f4

.map
.charts
  border-left: 5px solid $highlight

.registries
  font-size: 16px
  width: 17.25% !important // Add margin right to registries

  ul
    padding-left: 0
    margin: 10px 0

  li
    font-weight: bold
    list-style: none
    height: 38px
    padding: 0 .5em
    cursor: pointer

    &:hover
      background-color: $base

      a
        color: white

    &.highlight:not(:hover)
      background-color: $highlight

    div
      height: 1em

  a
    display: block
    color: $base

    &:hover
      text-decoration: none

  .registry-details
    font-size: 12px
    color: #AAA

  .icon
    text-align: right

.charts
  .axis
    line
    path
      fill: transparent
      stroke: $base
      stroke-width: 1.25

  text
    font-size: 14px

  .value
    font-size: 40px
    font-weight: bold
    fill: $blue

  .unit
  .title
    font-size: 14px
    font-weight: bold
    text-transform: uppercase
    fill: #999

.registry
  display: none

  &.show
    display: block

.row
  color: #444
  font-family: "proxima-nova-1", "proxima-nova-2", sans-serif;
  position: relative

.countries
  fill: $blue

.heatmap
  stroke: $highlight
  stroke-width: 2

  for i in 0..10
    &.hecta-{i}
      fill: lighten($blue, (10 - i) * 10%)

.registries
  path
    fill: $base
    stroke: $highlight
    stroke-width: 2

    &.highlight
      fill: #ffb800

.line
  fill: transparent
  stroke: $base
  stroke-width: 2

.stack
  &.success
    fill: $blue

  &.failure
    fill: #ffb800

.grid
  stroke: #CCC
  stroke-width: .5

.north-america
  fill: #a7cf37

.south-america
  fill: #bdce36

.asia
  fill: #c77f33

.europe
  fill: #c46833

.africa
  fill: #ccb033

.oceania
  fill: #bf3d33

//
// Full complement from
// "npm color"
//
// @color1: #bf3d33;
// @color2: #c15233;
// @color3: #c46833;
// @color4: #c77f33;
// @color5: #c99733;
// @color6: #ccb033;
// @color7: #cdc834;
// @color8: #bdce36;
// @color9: #a7cf37;
// @color10: #91d039;
//
// Alternate 1 -- other color scheme
//
// 'north-america': '#bf3d33',
// 'south-america': '#c15233',
// 'asia':          '#c46833',
// 'europe':        '#c77f33',
// 'africa':        '#c99733',
// 'oceania':       '#ccb033'
//