oiahoon/jtb

/* variables */
$vgrid: 30px;
$gutter: 30px;
$pgcolor: #FFF;
$textcolor: #777;
$hovercolor: #2690d8;
$basefontsize: 16px;
$statusBarWidth: 10px;
$sprintcolor: #9e9e9e;

/* loading */
.loader {
  border-radius: 50%;
  width: 2.5em;
  height: 2.5em;
  -webkit-animation-fill-mode: both;
  animation-fill-mode: both;
  -webkit-animation: load7 1.8s infinite ease-in-out;
  animation: load7 1.8s infinite ease-in-out;
  &:before, &:after {
    border-radius: 50%;
    width: 2.5em;
    height: 2.5em;
    -webkit-animation-fill-mode: both;
    animation-fill-mode: both;
    -webkit-animation: load7 1.8s infinite ease-in-out;
    animation: load7 1.8s infinite ease-in-out;
  }
  color: #42b8dd;
  font-size: 10px;
  margin: 1em auto 4em auto;
  position: relative;
  text-indent: -9999em;
  -webkit-transform: translateZ(0);
  -ms-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-animation-delay: -0.16s;
  animation-delay: -0.16s;
  &:before, &:after {
    content: '';
    position: absolute;
    top: 0;
  }
  &:before {
    left: -3.5em;
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }
  &:after {
    left: 3.5em;
  }
}

@-webkit-keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow: 0 2.5em 0 0;
  }
}


@keyframes load7 {
  0%,
  80%,
  100% {
    box-shadow: 0 2.5em 0 -1.3em;
  }

  40% {
    box-shadow: 0 2.5em 0 0;
  }
}

/* layout */
.layout {
  padding-left: 1em;
  left: 0;
}
#workaround-4296411 {
  display: none;
  height: 1px;
  width: 1px;
}
label.seperator {
  padding-left: 0.5em;
}
.button-success,
.button-error,
.button-warning,
.button-secondary {
    color: white;
    border-radius: 4px;
    text-shadow: 0 1px 1px rgba(0, 0, 0, 0.2);
}
.button-success {
    background: rgb(28, 184, 65); /* this is a green */
}

.button-error {
    background: rgb(202, 60, 60); /* this is a maroon */
}

.button-warning {
    background: rgb(223, 117, 20); /* this is an orange */
}

.button-secondary {
    background: rgb(66, 184, 221); /* this is a light blue */
}

.badget {
  margin: 0 0.1em;
  padding: 0.3em 1em;
  color: #fff;
  background: #BDC3C7;
  font-size: 80%;
  font-style: normal;
}
.badget-sprint { background: #34495E; }
.badget-assignee { background: #7F8C8D; }
.badget-open { background: #27AE60; }
.badget-close { background: #7F8C8D; }

nav.archive-links {
  background-color: $pgcolor;
  box-sizing: content-box;
  padding: 1em 0 0.5em 0;
  margin: auto;
  /* Ordered list with custom counter */
  ol {
    counter-reset: li;
    overflow: hidden;
    border: 2px solid darken($pgcolor, 15%);
    border-radius: 4px;
    margin: 0;
    padding: 0px;
  }

  ol li {
    float: left;
    clear: left;
    width: 100%;
    margin: 0;
    list-style: none;
  }

  ol,
  ol li,
  ol li a { display: block; }

  ol li a {
    font-size: ($basefontsize * 0.6875);
    height: ($vgrid * 2 - 1);
    position: relative;
    text-decoration: none;
    span.link-title {
      overflow : hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      -webkit-box-orient: vertical;
    }
  }

  ol li .main-image:after,
  ol li .no-main-image:after {
    color: lighten($textcolor, 25%);
    content: counter(li, decimal-leading-zero);
    counter-increment: li;
    font-size: $vgrid;
    line-height: ($vgrid * 2 - 1);
    height: ($vgrid * 2 - 1);
    width: ($gutter * 2);
    position: absolute;
    top: 0;
    right: 0;
    text-align: center;
    font-weight: 300;
    letter-spacing: 1px;
  }

  li .main-image,
  li .no-main-image {
    float: left;
    margin-right: 1.5em;
    width: $statusBarWidth;
    height: ($vgrid * 2);
    background: darken($pgcolor, 10%);
  }

  li .main-image {
    // background-image: url('http://placekitten.com/g/200/200');
    background-size: cover;
    background-position: center center;
  }
  li {
    .bug { background: #D35400; }
    .story { background: #34495E; }
    .enhancement { background: #2980D9; }
    .esi { background: #C0392D; }
  }

  a:link,
  a:visited,
  a:hover,
  a:active { color: darken($textcolor, 50%); }

  ol li a:hover .main-image:after,
  ol li a:hover .no-main-image:after { color: $hovercolor; }

  ol li a:active .main-image:after,
  ol li a:active .no-main-image:after,
  ol li.active a .main-image:after,
  ol li.active a .no-main-image:after { color: $textcolor; }


  li + li { border-top: 1px solid darken($pgcolor, 15%); }

  li span {
    display: block;
    line-height: 1.5em;
  }

  /* Style the title, date & comments of each entry */
  span.link-title {
    letter-spacing: 1px;
    text-transform: uppercase;
    padding-top: 0.6875em;
    font-size: 1em;
  }

  span.link-excerpt {
    color: lighten($textcolor, 30%);
    em.sprint {
      color: $sprintcolor;
      font-style: normal;
      font-weight: 500;
    }
  }
}