better styles for tasks

better styles for tasks

/*
 * Copyright 2014 Netflix, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import "app/bower_components/bootstrap/less/mixins.less";
@import "app/bower_components/bootstrap/less/variables.less";
@import "app/styles/colors.less";

/* Space out content a bit */
body {
  font-family: 'Source Sans Pro', sans-serif;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
  background-color: #f8f8f8;
  padding-top: 40px;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-left: 15px;
  padding-right: 15px;
}

/* Custom page header */
.header {
  border-bottom: 1px solid #e5e5e5;
}

/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
  padding-bottom: 19px;
}

/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid @mid_grey;
}

.no-padding {
  padding: 0;
}

.inactive-sort-key {
  .glyphicon {
    opacity: 0.5;
  }
}

.secondary-panel {
  .nav, .nav-content {
    min-height: 600px;
  }
  .nav {
    padding: 0 0 0 10px;
    background-color: #f1f1f1;
    border: 1px solid @mid_light_grey;
    border-radius: 5px;

    .list-group-item {
      &.active {
        font-weight: 700;
      }
    }

    h4 {
      font-weight: 700;
    }

    .sub-nav {
      margin-left: 10px;

      .sub-nav-item {
        border-bottom: 1px solid #c4c4c4;

        &:last-child {
          border-bottom-width: 0;
        }

        &:first-child {
          padding-top: 0;
        }
      }
    }

    .sub-nav-item, .show-all {
      margin-left: 10px;
      padding: 10px 0;

      a {
        display: block;
        padding: 5px 10px;
        color: #6a6a6a;
        &:hover, &:focus, &.active {
          text-decoration: none;
          border-radius: 5px 0 0 5px;
          background-color: @mid_grey;
          color: @light_grey;
        }
      }
    }
  }
  .nav-content {

    .header {
      padding: 20px 15px 0 0;
      h3 {
        display: inline-block;
        margin-right: 20px;
      }
      .actions {
        display: inline-block;
      }
    }
    .sort-filter {
      label {
        margin-left: 10px;
        font-weight: normal;
        font-size: 80%;
      }
      input, select {
        margin-left: 10px;
      }
      .form-inline {
        padding: 10px;
      }
    }
    .content {
      padding: 10px 25px;
    }
  }
}

.secondary-panel, .details-panel {
  .close-button {
    float: right;
    margin-top: -15px;
    margin-right: -10px;
    a {
      padding: 0;
      font-size: 125%;
      color: #a4a4a4;
    }
  }
}

.glyphicon-up-triangle {
  &:before {
    content: "\25B2";
  }
}

.glyphicon-down-triangle {
  &:before {
    content: "\25BC";
  }
}

dl {
  word-break: break-word;
}

.details-panel {
  border: 1px solid #aaaaaa;
  background-color: #ffffff;
  min-height: 500px;
  padding: 0;
  margin-left: 20px;

  .header {
    text-align: center;
    padding: 20px 15px 0 15px;

    h3 {
      font-weight: 700;
      .glyphicon {
        color: @healthy_green;
        display: block;
        font-size: 200%;
        &.unhealthy {
          color: @unhealthy_red;
        }
      }
    }
  }

  .content {
    .content-section {
      h4 {
        font-weight: 700;
      }
      padding: 0 15px;
      border-bottom: 1px solid #c4c4c4;

      &:last-child {
        border-bottom-width: 0;
      }

      &:first-child {
        padding-top: 0;
      }
    }
  }
}

.dl-horizontal {
  &.dl-narrow {
    dt {
      width: 80px;
    }
    dd {
      margin-left: 100px;
    }
  }
}

.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}

.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}

/* Supporting marketing content */
.marketing {
  margin: 40px 0;
}

.marketing p + h4 {
  margin-top: 28px;
}

.no-highlight{
  color: black;

  &:hover, &:focus {
    text-decoration: none;
    color: black;
  }
}

.nav-tabs a {
  color: #000;
}

.nav-tabs li {
  cursor: pointer;
}

.nav-tabs a:hover
{
  color: #666;
}

.navbar-inverse {
  background-color: #5b5b5b;
  border: none;

  .navbar-brand {
    color: #fff;
    text-shadow: 0px 1px 1px #333;
    font-weight: 200;
  }

  .navbar-nav > li > a {
    border-top: 4px solid transparent;
    color: #fff;
    font-weight: 200;
  }

  .navbar-nav>.active>a,
  .navbar-nav>.active>a:focus,
  .navbar-nav>.active>a:hover
  {
    border-top: 4px solid #ffffff;
    background-color: transparent;
    font-weight: 200;
  }
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
  border-top: 4px solid transparent;
  background-color: #666666;
  color: #fff;
}

.sm-label, .sm-label-left {
  line-height: 30px;
  font-weight: bold;
  text-align: right;

  &.table-offset {
    margin-top: 31px;
  }

  .help-text {
    font-size: 90%;
    font-weight: normal;
    color: #777777;
    line-height: normal;
    margin-bottom: 0;
  }
}

.sm-label-left {
  text-align: left;
}

.form-inline {
  .form-control {
    &.inline-number {
      width: 60px;
    }
  }
  .with-space-before {
    margin-left: 4px;
  }
}

.modal-content {
  overflow-x: hidden;
}

.modal-pages {
  width:1200px;
  .modal-page {
    position: relative;
    width: 600px;
    float:left;
  }
}

.page-flow-panel {
  overflow-x: hidden;
}

.panel-footer {
  .pager {
    margin-bottom: 0;
    margin-top: 0;
  }
}

.forward {
  .modal-page {
    &.ng-leave, &.ng-enter {
      left: 0;
      .transition(left .25s ease-in);
    }
    &.ng-leave.ng-leave-active, &.ng-enter.ng-enter-active {
      left: -600px;
    }
  }
}

.back {
  .modal-page {
    &.ng-leave, &.ng-enter {
      left: -600px;
      .transition(left .25s ease-in);
    }
    &.ng-leave.ng-leave-active, &.ng-enter.ng-enter-active {
      left: 0;
    }
  }
}

.full-width {
  display: block;
  width: 100%;
}

.action-button {
  padding: 0;
}

.add-new {
  border: 1px dashed #a5a5a5;
  color: #a5a5a5;
  padding: 8px;
  margin: 4px;
  cursor: pointer;
  margin-bottom: 20px;
  background-color: transparent;

  &:hover, &:focus, &:active {
    border-color: #000;
    color: #000;
  }
}

.notification-center {
  position: fixed;
  top: @navbar-height;
  right: 0;
  width: 400px;
  padding: 10px;
  z-index: @zindex-navbar-fixed;

  .alert {
    position: relative;
    opacity: .95;
    right: 0;
    box-shadow: 0px 0px 8px 2px #BBBBBB;
    border-radius: 8px;
    &.ng-enter.ng-enter-active, &.ng-leave {
      opacity: .95;
      right: 0;
      transition: all .15s ease-in;
    }
    &.ng-leave.ng-leave-active, &.ng-enter {
        opacity: 0;
        right: -400px;
        transition: all .15s ease-in;
    }
  }
}

tfoot .add-new {
  margin-bottom: 0;
}

.form-control {
  &.ng-invalid {
    &.ng-dirty {
      border-color: @state-danger-text;
      .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075)); // Redeclare so transitions work
      &:focus {
        border-color: darken(@state-danger-text, 10%);
        @shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@state-danger-text, 20%);
        .box-shadow(@shadow);
      }
    }
  }
}

.table {
  &.packed {
    margin-bottom: 0;
  }
}

.config-table {
  td {
    background-color: #ffffff;
  }
  thead th, tfoot td {
    background-color: transparent
  }
}

.build-stage {
  font-size: 90%;
}

.form-group {
  margin-bottom: 5px;
}

.row {
  &.config-description {
    margin-bottom: 30px;
  }
}

.flat-list {
  li {
    list-style-type: none;
    label {
      font-weight: normal;
    }
  }
  ul {
    padding-left: 0;
    margin-bottom: 0;
  }
}

.advanced-settings {
  &.ng-enter {
    transition: 0.2s all ease-in;
    opacity: 0;
    max-height: 0;
    &.ng-enter-active, .ng-leave {
      opacity: 1;
      max-height: 1000px;
    }
    &.ng-leave-active {
      opacity: 0;
      max-height: 0;
    }
  }
}

server-error-flag {
  .server-error-flag {
    color: @state-danger-text;
    text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff, 0 0 6px #ffffff;
    margin-left: 6px;

  }
  .tooltip-inner {
    .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
    box-shadow: 0px 0px 8px 2px #BBBBBB;
  }
  .tooltip {
    font-weight: normal;
    white-space: normal;
    width: 200px;
    &.top {
      .tooltip-arrow {
        border-top-color: @alert-danger-border;
      }
    }
  }
}

.error-message {
  text-align: left;
  display: block;
  font-weight: bold;
  color: @state-danger-text;
}

.application-list {
  a {
    color: @link-color;
  }
}

.spinner {
  width: 14px;
  height: 14px;
  top: 8px;
  left: 5px;
  position: relative;
  display: inline-block;
}

.loading {
  text-align: center;
  padding-top: 160px;
  background: url('/images/loading-large.gif') center 20px no-repeat;
}

.notifications {
  margin-right: 10px;

  div {
    display: inline;
  }

  .unread {

    display: inline-block;
    width: 15px;

    div {
      width: 1.3em;
      display: inline;
      background-color: #a6a6a6;
      border-radius: 3px;
      color: white;
      padding-left: .5em;
      padding-right: .5em;
    }
  }

  ul {
    background-color: #5b5b5b;
    color: #999;
    padding: 5px;
    min-width: 400px;

    li span {
      margin-right: 10px;

      span {
        margin-right: 10px;
      }

      span.glyphicon {
        font-size: .8em;
        margin-right: 5px;
        cursor: pointer;
      }

    }
  }

  .progress {
    height: 5px;
    margin: 0px;
    border: none;
    border-radius: 0px;
  }
}

.notifications.open {
  .dropdown-toggle {
    background-color: #999 !important;
  }
}

.dropdown {
  .dropdown-header {
    margin-top: 15px;

    &:first-child {
      margin-top: 0;
    }
  }
}

.panel {
  background-color: #ffffff;
  border: 1px solid #aaaaaa;
}

.task {
  .progress {
    border-radius: 0px;
    .progress-bar {
      box-shadow: none !important;
      span {
        border-right: 1px solid #aaa;
        border-top: 1px solid #aaa;
        height: 100%;
        width: 100%;
        display: inline-block;
        overflow-x: hidden;
      }
    }
  }
  .progress-status {
    height: 30px;
    border-right: none;
    border-bottom: none;
    border-top: none;
    border-left: 1px solid #aaa;
    margin-bottom: 0px;
    background: none;
    .progress-bar.progress-bar-non-terminal {
      background-color: #ccc;
      background: linear-gradient(#ccc, darken(#ccc, 10%));
    }
    .progress-bar.progress-bar-success {
      background-color: @healthy_green;
      background: linear-gradient(@healthy_green, @healthy_green_border);
    }
    .progress-bar.progress-bar-errored {
      background-color: @unhealthy_red;
      background: linear-gradient(@unhealthy_red, @unhealthy_red_border);
    }
  }
  .progress-labels {
    border-right: none;
    border-bottom: none;
    border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;
    margin-bottom: 0px;
    .progress-bar {
      background-color: rgb(248,248,248);
      color: #aaa;
      text-align: left;
      overflow-x: hidden;
    }
  }
}

.task-row {
  border-left: 3px solid #ccc;
  margin-bottom: 20px;
  color: #aaa;
  cursor: pointer;
  strong {
    color: #5b5b5b;
  }
  ul {
    font-size: 0.8em;
    padding: 0px;
    li {
      list-style-type: none;
    }
  }
}

.details-row {
  width: 99%;
  padding: 10px;
  table {
    color: #5b5b5b;
  }
}

.padding {
  padding: 10px;
}

/*
 * Copyright 2014 Netflix, Inc.
 *
 * Licensed under the Apache License, Version 2.0 (the "License");
 * you may not use this file except in compliance with the License.
 * You may obtain a copy of the License at
 *
 *     http://www.apache.org/licenses/LICENSE-2.0
 *
 * Unless required by applicable law or agreed to in writing, software
 * distributed under the License is distributed on an "AS IS" BASIS,
 * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 * See the License for the specific language governing permissions and
 * limitations under the License.
 */

@import "app/bower_components/bootstrap/less/mixins.less";
@import "app/bower_components/bootstrap/less/variables.less";
@import "app/styles/colors.less";

/* Space out content a bit */
body {
  font-family: 'Source Sans Pro', sans-serif;
  padding-left: 10px;
  padding-right: 10px;
  padding-bottom: 20px;
  background-color: #f8f8f8;
  padding-top: 40px;
}

/* Everything but the jumbotron gets side spacing for mobile first views */
.header,
.marketing,
.footer {
  padding-left: 15px;
  padding-right: 15px;
}

/* Custom page header */
.header {
  border-bottom: 1px solid #e5e5e5;
}

/* Make the masthead heading the same height as the navigation */
.header h3 {
  margin-top: 0;
  margin-bottom: 0;
  line-height: 40px;
  padding-bottom: 19px;
}

/* Custom page footer */
.footer {
  padding-top: 19px;
  color: #777;
  border-top: 1px solid @mid_grey;
}

.no-padding {
  padding: 0;
}

.inactive-sort-key {
  .glyphicon {
    opacity: 0.5;
  }
}

.secondary-panel {
  .nav, .nav-content {
    min-height: 600px;
  }
  .nav {
    padding: 0 0 0 10px;
    background-color: #f1f1f1;
    border: 1px solid @mid_light_grey;
    border-radius: 5px;

    .list-group-item {
      &.active {
        font-weight: 700;
      }
    }

    h4 {
      font-weight: 700;
    }

    .sub-nav {
      margin-left: 10px;

      .sub-nav-item {
        border-bottom: 1px solid #c4c4c4;

        &:last-child {
          border-bottom-width: 0;
        }

        &:first-child {
          padding-top: 0;
        }
      }
    }

    .sub-nav-item, .show-all {
      margin-left: 10px;
      padding: 10px 0;

      a {
        display: block;
        padding: 5px 10px;
        color: #6a6a6a;
        &:hover, &:focus, &.active {
          text-decoration: none;
          border-radius: 5px 0 0 5px;
          background-color: @mid_grey;
          color: @light_grey;
        }
      }
    }
  }
  .nav-content {

    .header {
      padding: 20px 15px 0 0;
      h3 {
        display: inline-block;
        margin-right: 20px;
      }
      .actions {
        display: inline-block;
      }
    }
    .sort-filter {
      label {
        margin-left: 10px;
        font-weight: normal;
        font-size: 80%;
      }
      input, select {
        margin-left: 10px;
      }
      .form-inline {
        padding: 10px;
      }
    }
    .content {
      padding: 10px 25px;
    }
  }
}

.secondary-panel, .details-panel {
  .close-button {
    float: right;
    margin-top: -15px;
    margin-right: -10px;
    a {
      padding: 0;
      font-size: 125%;
      color: #a4a4a4;
    }
  }
}

.glyphicon-up-triangle {
  &:before {
    content: "\25B2";
  }
}

.glyphicon-down-triangle {
  &:before {
    content: "\25BC";
  }
}

dl {
  word-break: break-word;
}

.details-panel {
  border: 1px solid #aaaaaa;
  background-color: #ffffff;
  min-height: 500px;
  padding: 0;
  margin-left: 20px;

  .header {
    text-align: center;
    padding: 20px 15px 0 15px;

    h3 {
      font-weight: 700;
      .glyphicon {
        color: @healthy_green;
        display: block;
        font-size: 200%;
        &.unhealthy {
          color: @unhealthy_red;
        }
      }
    }
  }

  .content {
    .content-section {
      h4 {
        font-weight: 700;
      }
      padding: 0 15px;
      border-bottom: 1px solid #c4c4c4;

      &:last-child {
        border-bottom-width: 0;
      }

      &:first-child {
        padding-top: 0;
      }
    }
  }
}

.dl-horizontal {
  &.dl-narrow {
    dt {
      width: 80px;
    }
    dd {
      margin-left: 100px;
    }
  }
}

.container-narrow > hr {
  margin: 30px 0;
}

/* Main marketing message and sign up button */
.jumbotron {
  text-align: center;
  border-bottom: 1px solid #e5e5e5;
}

.jumbotron .btn {
  font-size: 21px;
  padding: 14px 24px;
}

/* Supporting marketing content */
.marketing {
  margin: 40px 0;
}

.marketing p + h4 {
  margin-top: 28px;
}

.no-highlight{
  color: black;

  &:hover, &:focus {
    text-decoration: none;
    color: black;
  }
}

.nav-tabs a {
  color: #000;
}

.nav-tabs li {
  cursor: pointer;
}

.nav-tabs a:hover
{
  color: #666;
}

.navbar-inverse {
  background-color: #5b5b5b;
  border: none;

  .navbar-brand {
    color: #fff;
    text-shadow: 0px 1px 1px #333;
    font-weight: 200;
  }

  .navbar-nav > li > a {
    border-top: 4px solid transparent;
    color: #fff;
    font-weight: 200;
  }

  .navbar-nav>.active>a,
  .navbar-nav>.active>a:focus,
  .navbar-nav>.active>a:hover
  {
    border-top: 4px solid #ffffff;
    background-color: transparent;
    font-weight: 200;
  }
}

.nav-tabs>li.active>a, .nav-tabs>li.active>a:focus, .nav-tabs>li.active>a:hover {
  border-top: 4px solid transparent;
  background-color: #666666;
  color: #fff;
}

.sm-label, .sm-label-left {
  line-height: 30px;
  font-weight: bold;
  text-align: right;

  &.table-offset {
    margin-top: 31px;
  }

  .help-text {
    font-size: 90%;
    font-weight: normal;
    color: #777777;
    line-height: normal;
    margin-bottom: 0;
  }
}

.sm-label-left {
  text-align: left;
}

.form-inline {
  .form-control {
    &.inline-number {
      width: 60px;
    }
  }
  .with-space-before {
    margin-left: 4px;
  }
}

.modal-content {
  overflow-x: hidden;
}

.modal-pages {
  width:1200px;
  .modal-page {
    position: relative;
    width: 600px;
    float:left;
  }
}

.page-flow-panel {
  overflow-x: hidden;
}

.panel-footer {
  .pager {
    margin-bottom: 0;
    margin-top: 0;
  }
}

.forward {
  .modal-page {
    &.ng-leave, &.ng-enter {
      left: 0;
      .transition(left .25s ease-in);
    }
    &.ng-leave.ng-leave-active, &.ng-enter.ng-enter-active {
      left: -600px;
    }
  }
}

.back {
  .modal-page {
    &.ng-leave, &.ng-enter {
      left: -600px;
      .transition(left .25s ease-in);
    }
    &.ng-leave.ng-leave-active, &.ng-enter.ng-enter-active {
      left: 0;
    }
  }
}

.full-width {
  display: block;
  width: 100%;
}

.action-button {
  padding: 0;
}

.add-new {
  border: 1px dashed #a5a5a5;
  color: #a5a5a5;
  padding: 8px;
  margin: 4px;
  cursor: pointer;
  margin-bottom: 20px;
  background-color: transparent;

  &:hover, &:focus, &:active {
    border-color: #000;
    color: #000;
  }
}

.notification-center {
  position: fixed;
  top: @navbar-height;
  right: 0;
  width: 400px;
  padding: 10px;
  z-index: @zindex-navbar-fixed;

  .alert {
    position: relative;
    opacity: .95;
    right: 0;
    box-shadow: 0px 0px 8px 2px #BBBBBB;
    border-radius: 8px;
    &.ng-enter.ng-enter-active, &.ng-leave {
      opacity: .95;
      right: 0;
      transition: all .15s ease-in;
    }
    &.ng-leave.ng-leave-active, &.ng-enter {
        opacity: 0;
        right: -400px;
        transition: all .15s ease-in;
    }
  }
}

tfoot .add-new {
  margin-bottom: 0;
}

.form-control {
  &.ng-invalid {
    &.ng-dirty {
      border-color: @state-danger-text;
      .box-shadow(inset 0 1px 1px rgba(0, 0, 0, .075)); // Redeclare so transitions work
      &:focus {
        border-color: darken(@state-danger-text, 10%);
        @shadow: inset 0 1px 1px rgba(0, 0, 0, .075), 0 0 6px lighten(@state-danger-text, 20%);
        .box-shadow(@shadow);
      }
    }
  }
}

.table {
  &.packed {
    margin-bottom: 0;
  }
}

.config-table {
  td {
    background-color: #ffffff;
  }
  thead th, tfoot td {
    background-color: transparent
  }
}

.build-stage {
  font-size: 90%;
}

.form-group {
  margin-bottom: 5px;
}

.row {
  &.config-description {
    margin-bottom: 30px;
  }
}

.flat-list {
  li {
    list-style-type: none;
    label {
      font-weight: normal;
    }
  }
  ul {
    padding-left: 0;
    margin-bottom: 0;
  }
}

.advanced-settings {
  &.ng-enter {
    transition: 0.2s all ease-in;
    opacity: 0;
    max-height: 0;
    &.ng-enter-active, .ng-leave {
      opacity: 1;
      max-height: 1000px;
    }
    &.ng-leave-active {
      opacity: 0;
      max-height: 0;
    }
  }
}

server-error-flag {
  .server-error-flag {
    color: @state-danger-text;
    text-shadow: 0 0 2px #ffffff, 0 0 4px #ffffff, 0 0 6px #ffffff;
    margin-left: 6px;

  }
  .tooltip-inner {
    .alert-variant(@alert-danger-bg; @alert-danger-border; @alert-danger-text);
    box-shadow: 0px 0px 8px 2px #BBBBBB;
  }
  .tooltip {
    font-weight: normal;
    white-space: normal;
    width: 200px;
    &.top {
      .tooltip-arrow {
        border-top-color: @alert-danger-border;
      }
    }
  }
}

.error-message {
  text-align: left;
  display: block;
  font-weight: bold;
  color: @state-danger-text;
}

.application-list {
  a {
    color: @link-color;
  }
}

.spinner {
  width: 14px;
  height: 14px;
  top: 8px;
  left: 5px;
  position: relative;
  display: inline-block;
}

.loading {
  text-align: center;
  padding-top: 160px;
  background: url('/images/loading-large.gif') center 20px no-repeat;
}

.notifications {
  margin-right: 10px;

  div {
    display: inline;
  }

  .unread {

    display: inline-block;
    width: 15px;

    div {
      width: 1.3em;
      display: inline;
      background-color: #a6a6a6;
      border-radius: 3px;
      color: white;
      padding-left: .5em;
      padding-right: .5em;
    }
  }

  ul {
    background-color: #5b5b5b;
    color: #999;
    padding: 5px;
    min-width: 400px;

    li span {
      margin-right: 10px;

      span {
        margin-right: 10px;
      }

      span.glyphicon {
        font-size: .8em;
        margin-right: 5px;
        cursor: pointer;
      }

    }
  }

  .progress {
    height: 5px;
    margin: 0px;
    border: none;
    border-radius: 0px;
  }
}

.notifications.open {
  .dropdown-toggle {
    background-color: #999 !important;
  }
}

.dropdown {
  .dropdown-header {
    margin-top: 15px;

    &:first-child {
      margin-top: 0;
    }
  }
}

.panel {
  background-color: #ffffff;
  border: 1px solid #aaaaaa;
}

.task {
  .progress {
    border-radius: 0px;
    .progress-bar {
      box-shadow: none !important;
      span {
        border-right: 1px solid #aaa;
        border-top: 1px solid #aaa;
        height: 100%;
        width: 100%;
        display: inline-block;
        overflow-x: hidden;
      }
    }
  }
  .progress-status {
    height: 40px;
    border-right: none;
    border-bottom: none;
    border-top: none;
    border-left: 1px solid #aaa;
    margin-bottom: 0px;
    background: none;
    .progress-bar.progress-bar-non-terminal {
      background-color: #ccc;
      background: linear-gradient(#ccc, darken(#ccc, 10%));
    }
    .progress-bar.progress-bar-success {
      background-color: @healthy_green;
      background: linear-gradient(@healthy_green, @healthy_green_border);
    }
    .progress-bar.progress-bar-errored {
      background-color: @unhealthy_red;
      background: linear-gradient(@unhealthy_red, @unhealthy_red_border);
    }
  }
  .progress-labels {
    border-right: none;
    border-bottom: none;
    border-top: 1px solid #aaa;
    border-left: 1px solid #aaa;
    margin-bottom: 0px;
    .progress-bar {
      background-color: rgb(248,248,248);
      color: #aaa;
      text-align: left;
      overflow-x: hidden;
    }
  }
}

.task-row {
  border-left: 3px solid #ccc;
  margin-bottom: 20px;
  color: #aaa;
  strong {
    color: #5b5b5b;
  }
  ul {
    font-size: 0.8em;
    padding: 0px;
    li {
      list-style-type: none;
    }
  }
}

.padding {
  padding: 10px;
}


Delete animated.less

Delete animated.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/micklosm/ConstellationGallery-.git/'


fixed lookup tool layout issue

fixed lookup tool layout issue

@import 'lib';

@border-lookup: #D7D2C3;

h1 {
    font-size: 30px;
    padding: 20px 0;
    a {
        color: @white;
        small {
            display: block;
            font-weight: bold;
            font-size: 14px;
            line-height: 18px;
        }
        &:hover {
            text-decoration: none;
        }
    }
}

.lookup-search-form {
    position: relative;
    label, input {
        color: @text;
    }
    label {
        display: inline-block;
        width: 200px;
    }
    input {
        margin: 0 10px 0 0;
        height: 25px;
        width: 500px;
        .border-radius(5px);
        border: 1px solid @border-lookup;
        font-size: 12px;
        padding: 0 4px;
    }
    .search-suggestions {
        display: none;
        position: absolute;
        left: 203px;
        top: 25px;
        width: 508px;
        background: @white;
        z-index: 5;
        border: 1px solid @border-lookup;
        .border-radius(0 0 5px 5px);
        .box-shadow(0 2px 2px #ddd);
        border-top: 0;
        li {
            line-height: 20px;
            &:nth-child(2n) {
                background-color: #eee;
            }
            &:last-child {
                .border-radius(0 0 5px 5px);
                a {
                    .border-radius(0 0 5px 5px);
                }
            }
            a {
                display: block;
                padding: 4px 10px 5px;
                &:hover, &.sel {
                    background-color: fadeOut(@link, 70%);
                    color: darken(@link, 20%);
                    text-decoration: none;
                }
                b {
                    color: #444;
                }
            }
            span {
                display: inline-block;
                padding: 0 5px;
                margin: 0 5px 0 0;
                font-size: 11px;
                .border-radius(5px);
                border: 1px solid @light-gray;
            }
            .email {
                float: right;
            }
        }
        &.visible {
            display: block;
        }
    }
}

#page h1 {
    font-size: 24px;
    padding: 0;
    a {
        font-weight: bold;
        text-decoration: underline;
        color: #d16b00;
    }
}

.avatar {
    border: 5px solid @white;
    .box-shadow(1px 1px 3px #B2C8E0);
}
#avatar, #prose, #payment-info {
    float: left;
    width: 212px;
    margin: 0;
    border-bottom: 0;
}
#prose, #payment-info {
    padding-left: 20px;
    width: 300px;
}
#purchases {
    float: left;
    width: 680px;
    #sorter {
        h3 {
            color: @medium-gray;
        }
    }
    .item {
        position: relative;
        color: @medium-gray;
        .actions {
            position: absolute;
            right: 10px;
            top: 27px;
            .checkmark.purchased {
                color: @green;
            }
        }
        h3 {
            margin-right: 110px;
            word-wrap: break-word;
        }
        &:hover {
            background-color: transparent;
        }
        &:nth-child(2n) {
            background-color: lighten(#eee, 4%);
        }
        .vitals.contributions {
            margin-top: 10px;
            .border-radius(5px);
            .box-shadow(0 1px 1px rgba(0,0,0,0.4));
            li {
                padding: 5px;
                &:first-child {
                    .border-radius(5px 5px 0 0);
                }
                &:last-child {
                    .border-radius(0 0 5px 5px);
                }
                &:nth-child(2n) {
                    background-color: lighten(@link, 47%);
                }
                &:nth-child(2n+1) {
                    background-color: @white;
                }
            }
        }
    }
}
#developer-info {
    float: right;
    width: 668px;
}
#activity-info {
    float: left;
    width: 686px;
}

.simple-log {
    li {
        padding: 5px 5px 7px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
}

.island {
    .column-a, .column-b, .column-c {
        margin: 0;
        float: left;
        border-bottom: 0;
    }
    .column-a {
        width: 128px;
        text-align: center;
    }
    .column-b {
        width: 400px;
    }
    .column-c {
        width: 315px;
    }
    .pretty-list div {
        margin: 2px 0;
        padding: 4px 5px 6px;
        .border-radius(5px);
        .box-shadow(0 0 2px 0 rgba(0, 0, 0, 0.4) inset);
    }
    .info-box {
        p {
            margin: 5px 0;
        }
    }
}

.product-lookup-list {
    padding-top: 6px;
    div, li {
        border: 1px solid @light-gray;
        border-bottom: 0;
        border-top: 0;
        padding: 10px;
        word-wrap: break-word;
        &:first-child {
            border-top: 1px solid @light-gray;
            .border-radius(5px 5px 0 0);
        }
        &:last-child {
            border-bottom: 1px solid @light-gray;
            .border-radius(0 0 5px 5px);
        }
        &:nth-child(2n) {
            background-color: #eee;
        }
    }
}

.shortcuts {
    li {
        margin: 20px 0;
        text-align: left;
    }
    a:hover, .sel {
        color: darken(@link, 10%);
        text-decoration: underline;
    }
}

.paginator .rel a.button {
    line-height: 32px;
}

@import 'lib';

@border-lookup: #D7D2C3;

h1 {
    font-size: 30px;
    padding: 20px 0;
    a {
        color: @white;
        small {
            display: block;
            font-weight: bold;
            font-size: 14px;
            line-height: 18px;
        }
        &:hover {
            text-decoration: none;
        }
    }
}

.lookup-search-form {
    position: relative;
    label, input {
        color: @text;
    }
    label {
        display: inline-block;
        width: 200px;
    }
    input {
        margin: 0 10px 0 0;
        height: 25px;
        width: 500px;
        .border-radius(5px);
        border: 1px solid @border-lookup;
        font-size: 12px;
        padding: 0 4px;
    }
    .search-suggestions {
        display: none;
        position: absolute;
        left: 203px;
        top: 25px;
        width: 508px;
        background: @white;
        z-index: 5;
        border: 1px solid @border-lookup;
        .border-radius(0 0 5px 5px);
        .box-shadow(0 2px 2px #ddd);
        border-top: 0;
        li {
            line-height: 20px;
            &:nth-child(2n) {
                background-color: #eee;
            }
            &:last-child {
                .border-radius(0 0 5px 5px);
                a {
                    .border-radius(0 0 5px 5px);
                }
            }
            a {
                display: block;
                padding: 4px 10px 5px;
                &:hover, &.sel {
                    background-color: fadeOut(@link, 70%);
                    color: darken(@link, 20%);
                    text-decoration: none;
                }
                b {
                    color: #444;
                }
            }
            span {
                display: inline-block;
                padding: 0 5px;
                margin: 0 5px 0 0;
                font-size: 11px;
                .border-radius(5px);
                border: 1px solid @light-gray;
            }
            .email {
                float: right;
            }
        }
        &.visible {
            display: block;
        }
    }
}

#page h1 {
    font-size: 24px;
    padding: 0;
    a {
        font-weight: bold;
        text-decoration: underline;
        color: #d16b00;
    }
}

.avatar {
    border: 5px solid @white;
    .box-shadow(1px 1px 3px #B2C8E0);
}
#avatar, #prose, #payment-info {
    float: left;
    width: 212px;
    margin: 0;
    border-bottom: 0;
}
#prose, #payment-info {
    padding-left: 20px;
    width: 300px;
}
#purchases {
    float: left;
    width: 680px;
    #sorter {
        h3 {
            color: @medium-gray;
        }
    }
    .item {
        position: relative;
        color: @medium-gray;
        .actions {
            position: absolute;
            right: 10px;
            top: 27px;
            .checkmark.purchased {
                color: @green;
            }
        }
        h3 {
            margin-right: 110px;
            word-wrap: break-word;
        }
        &:hover {
            background-color: transparent;
        }
        &:nth-child(2n) {
            background-color: lighten(#eee, 4%);
        }
        .vitals.contributions {
            margin-top: 10px;
            .border-radius(5px);
            .box-shadow(0 1px 1px rgba(0,0,0,0.4));
            li {
                padding: 5px;
                &:first-child {
                    .border-radius(5px 5px 0 0);
                }
                &:last-child {
                    .border-radius(0 0 5px 5px);
                }
                &:nth-child(2n) {
                    background-color: lighten(@link, 47%);
                }
                &:nth-child(2n+1) {
                    background-color: @white;
                }
            }
        }
    }
}
#developer-info {
    float: right;
    width: 668px;
}
#activity-info {
    float: left;
    width: 686px;
}

.simple-log {
    li {
        padding: 5px 5px 7px;
        border-bottom: 1px solid rgba(0,0,0,0.1);
    }
}

.island {
    .column-a, .column-b, .column-c {
        margin: 0;
        float: left;
        border-bottom: 0;
    }
    .column-a {
        width: 128px;
        text-align: center;
    }
    .column-b {
        width: 400px;
    }
    .column-c {
        width: 315px;
    }
    .pretty-list div {
        margin: 2px 0;
        padding: 4px 5px 6px;
        .border-radius(5px);
        .box-shadow(0 0 2px 0 rgba(0, 0, 0, 0.4) inset);
    }
    .info-box {
        p {
            margin: 5px 0;
        }
    }
}

.product-lookup-list {
    padding-top: 6px;
    div, li {
        border: 1px solid @light-gray;
        border-bottom: 0;
        border-top: 0;
        padding: 10px;
        word-wrap: break-word;
        &:first-child {
            border-top: 1px solid @light-gray;
            .border-radius(5px 5px 0 0);
        }
        &:last-child {
            border-bottom: 1px solid @light-gray;
            .border-radius(0 0 5px 5px);
        }
        &:nth-child(2n) {
            background-color: #eee;
        }
    }
}

.shortcuts {
    float: left;
    li {
        margin: 20px 0;
        text-align: left;
    }
    a:hover, .sel {
        color: darken(@link, 10%);
        text-decoration: underline;
    }
}

.paginator .rel a.button {
    line-height: 32px;
}


add elements.less for styling elements ingredient

error: pathspec 'app/styles/elements.less' did not match any file(s) known to git


Hide horizontal overflow

Hide horizontal overflow

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/CRGTMobile/18f-agile-bpa.git/'


Adds atom styles

Adds atom styles

fatal: unable to access 'https://github.com/hyleung/dotfiles.git/': The requested URL returned error: 403


ny style

ny style

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Det-Kongelige-Bibliotek/rex.git/'


feat(listItem): fix stylelint error on Badge.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/seekinternational/seek-asia-style-guide.git/'


Fix margin left of checkbox/radio without label

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/sonatra/sonatra-theme-gluon.git/'


Categories Headers

Categories Headers

- Reduced categories headers font size

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/mxabierto/dgm.git/'


OR-732 improve user notification display

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/heroandtn3/openpaas-esn.git/'


add button.less

add button.less

@charset "utf-8";
/* CSS Document */
/*mixin*/
.base(){
   text-decoration:none;
   border:solid 1px;
   text-align:center;
   cursor:pointer;
}
.interactive(@background;@border;@color;){
	background:@background;
	border-color:@border;
	color:@color;
}
.size(@padding;@font;@radius;@height;@block;@line;){
	padding:@padding;
	font-size:@font;
	border-radius:@radius;
	height:@height;
	display:@block;
	line-height:@line;
}
input[type="button"]::-moz-focus-inner {
	border: 0;
	padding: 0;
}
/*style*/
.btn{
    .base();
	.size(0 11px;12px;3px;28px;inline-block;28px;);
    .interactive(#fff;#e6e6e6;#333;);
	&:hover{
	    .interactive(#0f69dc;#0f69dc;#fff;);
	}
	&.btn-primary{
	    .interactive(#0f69dc;#0f69dc;#fff;);
		&:hover{
		    .interactive(#0059d6;#0059d6;#fff;);
		}
	}
	&.btn-info{
	    .interactive(#3abfe7;#3abfe7;#fff;);
		&:hover{
		    .interactive(#1da9d3;#1da9d3;#fff;);
		}
	}
	&.btn-success{
	    .interactive(#66bb00;#66bb00;#fff;);
		&:hover{
		    .interactive(#5dab00;#5dab00;#fff;);
		}
	}
	&.btn-warning{
	    .interactive(#ffb30f;#ffb30f;#fff;);
		&:hover{
		    .interactive(#f9aa00;#f9aa00;#fff;);
		}
	}
	&.btn-danger{
	    .interactive(#e60000;#e60000;#fff;);
		&:hover{
		    .interactive(#d20000;#d20000;#fff;);
		}
	}
	&.btn-inverse{
	    .interactive(#333333;#333333;#fff;);
		&:hover{
		    .interactive(#000000;#000000;#fff;);
		}
	}
	&.btn-package{
	    .interactive(#87a5db;#87a5db;#fff;);
		&:hover{
		    .interactive(#749add;#749add;#fff;);
		}
	}
	&.btn-gray{
	    .interactive(#F3F3F3;#e6e6e6;#333;);
		&:hover{
		    .interactive(#247EF2;#247EF2;#fff;);
		}
	}
	&.btn-link{
	    .interactive(none;none;#0f69dc;);
		border:none;
		&:hover{
		    .interactive(none;none;#0059d6;);
			text-decoration:underline;
		}
	}
	&.disabled{
	    .interactive(#f3f3f3;#e6e6e6;#b2b2b2;);
		cursor:default;
		&:hover{
		    .interactive(#f3f3f3;#e6e6e6;#b2b2b2;);
		}
	}
	&.btn-round{
		.size(0 20px;12px;26px;28px;inline-block;28px;);
		&.btn-default{
	    .size(0 26px;14px;26px;34px;inline-block;34px;);
	}
		&.btn-large{
	    .size(0 40px;16px;26px;38px;inline-block;38px;);
	}
		&.btn-small{
	    .size(0 22px;12px;26px;24px;inline-block;24px;);
	}
		&.btn-mini{
	    .size(0 6px;12px;26px;22px;inline-block;22px;);
	}
	}
	&.btn-straight{
	    .size(0 11px;12px;0px;28px;inline-block;28px;);
	}
	&.btn-default{
	    .size(0 10px;14px;3px;34px;inline-block;34px;);
	}
	&.btn-large{
	    .size(0 16px;16px;3px;38px;inline-block;38px;);
	}
	&.btn-small{
	    .size(0 10px;12px;3px;24px;inline-block;24px;);
	}
	&.btn-mini{
	    .size(0 6px;12px;3px;22px;inline-block;22px;);
	}
	&.primary{
	    .interactive(#fff;#0f69dc;#0f69dc;);
		&:hover{
		    .interactive(#0f69dc;#0f69dc;#fff;);
		}
	}
	&.info{
	    .interactive(#fff;#3abfe7;#3abfe7;);
		&:hover{
		    .interactive(#3abfe7;#3abfe7;#fff;);
		}
	}
	&.success{
	    .interactive(#fff;#66bb00;#66bb00;);
		&:hover{
		    .interactive(#66bb00;#66bb00;#fff;);
		}
	}
	&.warning{
	    .interactive(#fff;#ffb30f;#ffb30f;);
		&:hover{
		    .interactive(#ffb30f;#ffb30f;#fff;);
		}
	}
	&.danger{
	    .interactive(#fff;#e60000;#e60000;);
		&:hover{
		    .interactive(#e60000;#e60000;#fff;);
		}
	}
	&.inverse{
	    .interactive(#fff;#333333;#333333;);
		&:hover{
		    .interactive(#333333;#333333;#fff;);
		}
	}
	&.package{
	    .interactive(rgba(0,0,0,0);#87a5db;#87a5db;);
		&:hover{
		    .interactive(#87a5db;#87a5db;#fff;);
		}
	}
}
input[type="button"],button{
    &.btn{
		.size(0 11px;12px;3px;30px;inline-block;28px;);
		&.btn-default{
	        .size(0 10px;14px;3px;36px;inline-block;34px;);
		}
		&.btn-large{
			.size(0 16px;16px;4px;40px;inline-block;38px;);
		}
		&.btn-small{
			.size(0 10px;12px;3px;26px;inline-block;24px;);
		}
		&.btn-mini{
			.size(0 6px;12px;3px;24px;inline-block;22px;);
		}
		&.btn-round{
			.size(0 20px;12px;26px;30px;inline-block;28px;);
			&.btn-default{
			    .size(0 26px;14px;26px;36px;inline-block;34px;);
		    }
			&.btn-large{
			    .size(0 40px;16px;26px;40px;inline-block;38px;);
		    }
			&.btn-small{
			    .size(0 22px;12px;26px;26px;inline-block;24px;);
		    }
			&.btn-mini{
			    .size(0 6px;12px;26px;24px;inline-block;22px;);
		    }
		}
		&.btn-straight{
			.size(0 11px;12px;0px;30px;inline-block;28px;);
		}
	}
}

error: pathspec 'less/button.less' did not match any file(s) known to git


Add modals.less

Add modals.less

fatal: unable to access 'https://github.com/shakrmedia/petal.git/': The requested URL returned error: 403


Missed the themes.less file.

Missed the themes.less file.

// Copyright (c) 2014 Extesla Digital, LLC.
//
// Licensed under the MIT License (http://opensource.org/licenses/MIT)
//
// Permission is hereby granted, free of charge, to any
// person obtaining a copy of this software and associated
// documentation files (the "Software"), to deal in the
// Software without restriction, including without limitation
// the rights to use, copy, modify, merge, publish,
// distribute, sublicense, and/or sell copies of the Software,
// and to permit persons to whom the Software is furnished
// to do so, subject to the following conditions:
//
// The above copyright notice and this permission notice
// shall be included in all copies or substantial portions of
// the Software.
//
// THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY
// KIND, EXPRESS OR IMPLIED, INCLUDING BUT NOT LIMITED TO THE
// WARRANTIES OF MERCHANTABILITY, FITNESS FOR A PARTICULAR
// PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE AUTHORS
// OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR
// OTHER LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT
// OR OTHERWISE, ARISING FROM, OUT OF OR IN CONNECTION WITH THE
// SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.

.offcanvas-default {
  .offcanvas-variant(@offcanvas-default-color; @offcanvas-default-bg; @offcanvas-default-border);
}

.offcanvas-inverse {
  .offcanvas-variant(@offcanvas-inverse-color; @offcanvas-inverse-bg; @offcanvas-inverse-border);
}

.offcanvas-slate {
  .offcanvas-variant(@offcanvas-slate-color; @offcanvas-slate-bg; @offcanvas-slate-border);
}

.offcanvas-cloud {
  .offcanvas-variant(@offcanvas-cloud-color; @offcanvas-cloud-bg; @offcanvas-cloud-border);
}

.offcanvas-cobalt {
  .offcanvas-variant(@offcanvas-cobalt-color; @offcanvas-cobalt-bg; @offcanvas-cobalt-border);
}

error: pathspec 'less/themes.less' did not match any file(s) known to git


feat(style): update alternative title font size

fatal: unable to access 'https://github.com/dindi-jekyll/almace-scaffolding.git/': The requested URL returned error: 403


set max-width for product column

set max-width for product column

@import 'lib';

.detail {
    .reviews {
        margin-bottom: 15px;
        > div {
            float: left;
            width: 50%;
        }
    }
    #submit-review {
        bottom: 15px;
    }
}

.listing {
    header img {
        float: left;
        margin-right: 10px;
    }
    .reviews {
        margin-bottom: 5px;
        figure,
        figure + div {
            float: left;
        }
        figure {
            width: 40%;
            + div {
                width: 25%;
            }
        }
        #submit-review {
            bottom: 20px;
        }
    }
    #review-list + .paginator {
        margin-top: 15px;
    }
}

.reviews {
    position: relative;
    #reviews-info {
        margin-top: 20px;
        position: relative;
    }
    ul {
        padding: 0;
        margin: 0;
    }
    > div {
        .border-box;
    }
    figure {
        display: block;
        background: fade(#fff, 50%);
        margin-right: @spacing;
        padding: @spacing;
        margin-bottom: 2em;
    }
    figcaption {
        margin-bottom: 10px;
        font-size: 22px;
    }
    canvas {
        margin-top: 10px;
        width: 100%;
        height: 72px;
    }
    a[data-review-filter] {
        display: block;
        color: @medium-gray;
        padding: 5px 0;
        &:hover {
            background: fade(#fff, 25%);
            text-decoration: none;
        }
        &.selected {
            background: fade(#fff, 50%);
            pointer-events: none;
        }
    }
    #review-list {
        background: @bg-lite;
        border-top: 1px solid darken(@light-gray, 2%);
        border-bottom: 1px solid lighten(@faint-gray, 4%);
    }
    .review {
        border: 1px solid darken(@light-gray, 2%);
        border-width: 0 1px;
        border-bottom: 1px solid darken(@light-gray, 2%);
        list-style-type: none;
        padding: 10px;
        + .review {
            border-top: 1px solid @white;
        }
        &:nth-child(2n) {
            background: lighten(@bg, 5%);
        }
        .byline, .timestamp {
            font-size: 12px;
        }
        .byline {
            color: @medium-gray;
        }
        .timestamp {
            color: @note-gray;
            float: right;
            &:hover {
                color: @gray;
            }
        }
        .body {
            margin: 10px 0;
        }
        ul {
            float: left;
            list-style: none;
            li {
                display: inline-block;
                + li:before {
                    color: @note-gray;
                    content: "\00a0\2022\00a0\00a0";
                }
            }
        }
    }
    #submit-review {
        position: absolute;
        margin: 10px 0;
    }
    .more-reviews {
        .fat-button;
        margin: 20px 0 15px;
    }
}

header.product {
    margin-bottom: 15px;
    position: relative;
    .visual {
        margin-right: 15px;
        height: 64px;
        width: 64px;
        + div {
            float: left;
            max-width: 206px;
        }
    }
    h1 {
        color: @navy-gray;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.2;
        &.multi {
            font-size: 22px;
            small, span {
                .ellipsis;
                display: block;
                margin-bottom: -8px;
                padding-bottom: 6px;
            }
            small {
                color: lighten(@navy-gray, 10%);
                display: block;
                font-size: 14px;
                font-weight: 600;
            }
        }
    }
    p {
        font-size: 14px;
        line-height: 1;
    }
}

#submit-review {
    header.product .simple-field,
    &.friendly header .errorlist {
        margin: 5px 0 0;
    }
    h2 {
        font-size: 18px;
        font-weight: 400;
    }
    .req,
    label[for=id_rating] {
        display: none;
    }
}

.stars {
    background: url(../../img/mkt/stars/sprite-16.png) no-repeat;
    display: inline-block;
    height: 18px;
    margin-right: 4px;
    text-indent: -9999px;
    vertical-align: middle;
    width: 89px;
    &.stars-4 { background-position: -18px 0; }
    &.stars-3 { background-position: -36px 0; }
    &.stars-2 { background-position: -54px 0; }
    &.stars-1 { background-position: -72px 0; }
    &.stars-0 { background-position: -90px 0; }
    &.ratingwidget {
        background: url(../../img/mkt/stars/32.png) repeat-x;
        background-repeat: repeat-x 5px 0;
        height: 32px;
        width: 200px;
        // Yeah, maybe I should just set a class in JS. I thought I was being clever.
        &.stars-1 label[data-stars="1"], &.stars-2 label[data-stars="1"], &.stars-2 label[data-stars="2"],
        &.stars-3 label[data-stars="1"], &.stars-3 label[data-stars="2"], &.stars-3 label[data-stars="3"],
        &.stars-4 label[data-stars="1"], &.stars-4 label[data-stars="2"], &.stars-4 label[data-stars="3"], &.stars-4 label[data-stars="4"],
        &.stars-5 label[data-stars="1"], &.stars-5 label[data-stars="2"], &.stars-5 label[data-stars="3"], &.stars-5 label[data-stars="4"], &.stars-5 label[data-stars="5"] {
            background: url(../../img/mkt/stars/32.png) 100% 100%;
        }
        label {
            height: 32px;
            width: 40px;
        }
    }
}

.html-rtl .stars {
    margin: 0 0 0 4px;
}

.no-rating strong {
    font-size: 12px;
    font-weight: 700;
}

.average-rating {
    strong {
        display: none;
    }
    span {
        color: @green;
        vertical-align: middle;
    }
    &:hover span {
        text-decoration: none;
    }
}

.simple-field.rating {
    .border-radius(4px);
    .box-shadow(inset 0 1px 4px rgba(0,0,0,.25),
                inset 0 1px 0 fade(@white, 80%),
                0 1px 0 fade(@white, 80%));
    background: rgba(200,200,200,.2);
    margin-bottom: 15px;
    padding: 20px 10px;
    .ratingwidget {
        margin: 0 auto;
    }
    .errorlist {
        margin-top: 10px;
        text-align: center;
    }
}

.ratingwidget {
    display: block;
    float: none;
    width: 65px;
    input {
        display: none;
    }
    label {
        cursor: pointer;
        display: block;
        float: left;
        margin: 0;
        text-indent: -9999px;
        width: 13px;
    }
}

@media (max-width: @4col) {
    #submit-review p.reminder {
        display: none;
    }
    #review-list {
        margin: 0 -10px;
        .review {
            border-left: 0;
            border-right: 0;
            .byline, .timestamp {
                font-size: 12px;
            }
            .body {
                font-size: 14px;
                line-height: 1.2;
            }
        }
    }
}

@import 'lib';

.detail {
    .reviews {
        margin-bottom: 15px;
        > div {
            float: left;
            width: 50%;
        }
    }
    #submit-review {
        bottom: 15px;
    }
}

.listing {
    header img {
        float: left;
        margin-right: 10px;
    }
    .reviews {
        margin-bottom: 5px;
        figure,
        figure + div {
            float: left;
        }
        figure {
            width: 40%;
            + div {
                width: 25%;
            }
        }
        #submit-review {
            bottom: 20px;
        }
    }
    #review-list + .paginator {
        margin-top: 15px;
    }
}

.reviews {
    position: relative;
    #reviews-info {
        margin-top: 20px;
        position: relative;
    }
    ul {
        padding: 0;
        margin: 0;
    }
    > div {
        .border-box;
    }
    figure {
        display: block;
        background: fade(#fff, 50%);
        margin-right: @spacing;
        padding: @spacing;
        margin-bottom: 2em;
    }
    figcaption {
        margin-bottom: 10px;
        font-size: 22px;
    }
    canvas {
        margin-top: 10px;
        width: 100%;
        height: 72px;
    }
    a[data-review-filter] {
        display: block;
        color: @medium-gray;
        padding: 5px 0;
        &:hover {
            background: fade(#fff, 25%);
            text-decoration: none;
        }
        &.selected {
            background: fade(#fff, 50%);
            pointer-events: none;
        }
    }
    #review-list {
        background: @bg-lite;
        border-top: 1px solid darken(@light-gray, 2%);
        border-bottom: 1px solid lighten(@faint-gray, 4%);
    }
    .review {
        border: 1px solid darken(@light-gray, 2%);
        border-width: 0 1px;
        border-bottom: 1px solid darken(@light-gray, 2%);
        list-style-type: none;
        padding: 10px;
        + .review {
            border-top: 1px solid @white;
        }
        &:nth-child(2n) {
            background: lighten(@bg, 5%);
        }
        .byline, .timestamp {
            font-size: 12px;
        }
        .byline {
            color: @medium-gray;
        }
        .timestamp {
            color: @note-gray;
            float: right;
            &:hover {
                color: @gray;
            }
        }
        .body {
            margin: 10px 0;
        }
        ul {
            float: left;
            list-style: none;
            li {
                display: inline-block;
                + li:before {
                    color: @note-gray;
                    content: "\00a0\2022\00a0\00a0";
                }
            }
        }
    }
    #submit-review {
        position: absolute;
        margin: 10px 0;
    }
    .more-reviews {
        .fat-button;
        margin: 20px 0 15px;
    }
}

header.product {
    margin-bottom: 15px;
    position: relative;
    .visual {
        margin-right: 15px;
        height: 64px;
        width: 64px;
        + div {
            float: left;
        }
    }
    h1 {
        color: @navy-gray;
        font-size: 22px;
        font-weight: 400;
        line-height: 1.2;
        max-width: 206px;
        &.multi {
            font-size: 22px;
            small, span {
                .ellipsis;
                display: block;
                margin-bottom: -8px;
                padding-bottom: 6px;
            }
            small {
                color: lighten(@navy-gray, 10%);
                display: block;
                font-size: 14px;
                font-weight: 600;
            }
        }
    }
    p {
        font-size: 14px;
        line-height: 1;
    }
}

#submit-review {
    header.product .simple-field,
    &.friendly header .errorlist {
        margin: 5px 0 0;
    }
    h2 {
        font-size: 18px;
        font-weight: 400;
    }
    .req,
    label[for=id_rating] {
        display: none;
    }
}

.stars {
    background: url(../../img/mkt/stars/sprite-16.png) no-repeat;
    display: inline-block;
    height: 18px;
    margin-right: 4px;
    text-indent: -9999px;
    vertical-align: middle;
    width: 89px;
    &.stars-4 { background-position: -18px 0; }
    &.stars-3 { background-position: -36px 0; }
    &.stars-2 { background-position: -54px 0; }
    &.stars-1 { background-position: -72px 0; }
    &.stars-0 { background-position: -90px 0; }
    &.ratingwidget {
        background: url(../../img/mkt/stars/32.png) repeat-x;
        background-repeat: repeat-x 5px 0;
        height: 32px;
        width: 200px;
        // Yeah, maybe I should just set a class in JS. I thought I was being clever.
        &.stars-1 label[data-stars="1"], &.stars-2 label[data-stars="1"], &.stars-2 label[data-stars="2"],
        &.stars-3 label[data-stars="1"], &.stars-3 label[data-stars="2"], &.stars-3 label[data-stars="3"],
        &.stars-4 label[data-stars="1"], &.stars-4 label[data-stars="2"], &.stars-4 label[data-stars="3"], &.stars-4 label[data-stars="4"],
        &.stars-5 label[data-stars="1"], &.stars-5 label[data-stars="2"], &.stars-5 label[data-stars="3"], &.stars-5 label[data-stars="4"], &.stars-5 label[data-stars="5"] {
            background: url(../../img/mkt/stars/32.png) 100% 100%;
        }
        label {
            height: 32px;
            width: 40px;
        }
    }
}

.html-rtl .stars {
    margin: 0 0 0 4px;
}

.no-rating strong {
    font-size: 12px;
    font-weight: 700;
}

.average-rating {
    strong {
        display: none;
    }
    span {
        color: @green;
        vertical-align: middle;
    }
    &:hover span {
        text-decoration: none;
    }
}

.simple-field.rating {
    .border-radius(4px);
    .box-shadow(inset 0 1px 4px rgba(0,0,0,.25),
                inset 0 1px 0 fade(@white, 80%),
                0 1px 0 fade(@white, 80%));
    background: rgba(200,200,200,.2);
    margin-bottom: 15px;
    padding: 20px 10px;
    .ratingwidget {
        margin: 0 auto;
    }
    .errorlist {
        margin-top: 10px;
        text-align: center;
    }
}

.ratingwidget {
    display: block;
    float: none;
    width: 65px;
    input {
        display: none;
    }
    label {
        cursor: pointer;
        display: block;
        float: left;
        margin: 0;
        text-indent: -9999px;
        width: 13px;
    }
}

@media (max-width: @4col) {
    #submit-review p.reminder {
        display: none;
    }
    #review-list {
        margin: 0 -10px;
        .review {
            border-left: 0;
            border-right: 0;
            .byline, .timestamp {
                font-size: 12px;
            }
            .body {
                font-size: 14px;
                line-height: 1.2;
            }
        }
    }
}


More transition-b-gone

More transition-b-gone

psssssssssssssssss

that's the sound of me removing transitions

@import '../mkt/lib';

@devhub-box-shadow: #bbb 0 2px 3px;
@text-indent-white: #fff 0 1px 1px;

.border-wrapper {
    background-color: @white;
    border-radius: 3px;
    box-shadow: @light-gray 0 2px 2px;
}

.nav-arrow {
    background: url(~'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAALCAYAAACK9ybzAAABNklEQVR42rWTv2uDQBTHU9tAhg5SSOlQWi+xiWJpLKFQ4u4SF8kgUYhOgoPgpIuLmiGL/4T4H+i/4b/gmMnFURzs3VAoSX8kSofPHe+977vH3XvXa5rm3+nhOI5B+i3ATi4yn88Hw+GQAwAsSJJ8/wukg/oFyju1CFqu0jSlOY57lSSJ0jRt8hMojnRJklAo75wiiEEURYwgCIzjOCPP88Ahtm2Pl8vlcxzHDNKf05OvxjU8bLZarWjXdUfb7Zb4BNmiKNJhGL4g3bmNP3TcmKbJbjabaRAExG63I3zfB4qiTC3LYmEcbzNdR46yLO9kWWYNw3iCtwC6rk9UVWWrqrptO8LfOS/2+/0DfLbZer2mYLPZoijukb9bkWOwLMvGPM+/5XkOkN3lM/4W7Nd1/Qj3y64//gM055yHK3WPawAAAABJRU5ErkJggg==') no-repeat 100% 50%;
}

* {
    text-rendering: optimizeLegibility;
}

a[rel="external"]:after, a.external:after {
    content: url(../../img/ecosystem/link-external.png);
    padding: 0 16px 0 4px;
}

.doc-wrapper, .upper-header {
    margin: 0 auto;
    width: 960px;
}

#wrap {
    padding-top: 30px;
}

#site-header {
    border-bottom: 5px solid @white;
    box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);
    position: relative;

    .logo {
        width: 400px;
    }

    .header-button.icon.browserid {
        display: none;
    }
}

.header-button.browserid {
    position: relative;
    width: auto;
}

.devhub-links {
    position: absolute;
    right: 0;
    text-align: right;
    top: 30px;
    width: 630px;
    z-index: 13;

    &.logged {
        right: 45px;
    }

    a {
        color: @white;
        font-size: 13px;
        line-height: 20px;
        padding: 5px 7px;
    }
}

#document-navigation {
    .transition(opacity 0.4s ease-in-out);
    background-color: #e0e3e5;
    border: 1px solid @light-gray;
    box-shadow: @light-gray 0 1px 2px;
    float: left;
    margin-right: 10px;
    opacity: .7;
    width: 190px;

    &:hover {
        opacity: 1;
    }

    ul {
        margin: 0;
        padding: 0;

        h2.title {
            background-color: @faint-gray;
            border-bottom: 1px solid #d2d6d9;
            cursor: pointer;
            font-size: 19px;
            font-weight: 100;
            line-height: 1.5em;
            margin: 0;
            padding: 5px 30px 5px 10px;
            text-shadow: @text-indent-white;
            text-transform: none;

            &:hover {
                .nav-arrow;
            }
        }
    }

    ol {
        display: none;
        margin: 0;
        padding: 0;

        li, li h2 {
            font-size: 13px;
            line-height: 1.5em;
        }

        li.has-children h2.subtitle {
            cursor: pointer;

            > a {
                padding: 0;
            }

            &:hover {
                .nav-arrow;
            }
        }

        a, li h2 {
            color: @dark-gray;
            display: block;
            font-weight: 400;
            margin-bottom: 1px;
            overflow: hidden;
            padding: 4px 20px;
            position: relative;
            text-overflow: ellipsis;

            &:hover {
                text-decoration: underline;
            }

            &.selected {
                background: url(~'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAPCAYAAADZCo4zAAAAwklEQVR42nWQPQ9EQBCG/RO7i/tyyf0O1RLRKBQKhUQhEQkirK8Q8ZudkZBzVvFUz8y8MyPM83yJpmnqpTQM4xWGocyVtm0/4jgmeZ6Tk3Rd95amKSnLEgMH6fu+Al2MMbyxyyVPgo66rg+sMkkS0jQNbtsW/SMEQSBXVYW7rkM8YMJatExAfd+f2HfwPE+BzGEY0C+HKxzHuUPcOI7ixukPlmU9i6LA0zSJAPeTuq6rWZaRywKAUvqOokjiyR3TND9fMT8MR5ncz/AAAAAASUVORK5CYII=') no-repeat 100% 50%;
                font-weight: normal;
            }
        }
    }

    .section.active {
        ol {
            .transition(background-color 0.4s ease-in-out);
            background-color: #f1f1f1;
            display: block;
        }

        li.has-children {
            > ol {
                background-color: @white;
                display: none;
                padding-left: 20px;
            }

            &.active {
                h2.subtitle {
                    .nav-arrow;
                }

                > ol {
                    display: block;
                }
            }
        }

        h2.title {
            .nav-arrow;
        }
    }
}

#page article {
    background-color: #fff;
    box-shadow: @devhub-box-shadow;
    color: @dark-gray;
    float: left;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
    padding: 30px;
    width: 685px;

    td {
        padding: 10px;
        vertical-align: top;
    }

    ol, ul {
        list-style-type: disc;
        padding: 0 20px;
    }

    h1 {
        color: @orange;
        font-weight: 100;
    }

    h2 {
        clear: both;
        font-size: 22px;
        font-weight: 500;
    }

    h3 {
        clear: both;
        font-size: 19px;
        font-weight: 300;
    }

    h2, h3, dt {
        margin: 20px 0 10px;
    }

    h3 {
        margin: 0 0 10px;
    }

    dt {
        font-size: 14px;
    }

    h2 a, h3 a {
        border-bottom: 1px solid #ddd;
        &:hover {
            border-bottom: 1px solid #484848;
            text-decoration: none;
        }
    }

    a:visited {
        color: #6d598b;
    }

    p {
        margin: 0.75em 0;

        .button-mdn {
            color: @white;
        }
    }

    pre {
        background-color: @faint-gray;
        color: @dark-gray;
        margin: 0.75em 0;
        overflow: auto;
        padding: 15px;
    }

    .button {
        &:visited {
            color: @white;
        }
    }

    .video-embed-list ul {
        list-style-type: none;
        margin: 0 auto;
        padding: 0;
        width: 640px;

        li {
            margin-bottom: 5px;
        }
    }

    .app-generator-detail > li {
        clear: both;
        display: none;
        float: left;

        &.on {
            display: block;
        }
    }

    .app-generator-preview, .app-generator-detail {
        clear: both;
        float: left;
        list-style-type: none;
        margin: 0;
    }

    .app-generator-detail {
        min-height: 300px;
        width: 645px;

        > li {
            width: 100%;
        }
    }

    .app-generator-preview > li {
        float: left;
        margin: 10px 40px 0;
        text-align: center;
        width: 125px;
    }

    .app-generator-preview > li > a {
        background: url(../../img/ecosystem/app-generator-layout-icons.png) no-repeat;
        display: block;
        height: 53px;
        margin: 0 auto;
        outline: none;
        padding-top: 70px;
        width: 100px;

        &.generator-app-stub {
            background-position: -23px -31px;
        }

        &.generator-list-detail-view {
            background-position: -169px -31px;
        }

        &.generator-game-stub {
            background-position: -315px -31px;
        }
    }

    .layout-preview {
        float: left;
        padding-top: 20px;
        width: 200px;
    }

    .layout-detail {
        float: right;
        width: 400px;
    }

    .features {
        margin-bottom: 40px;
    }
}

.firefox-simulator > article {
    #app-preview {
        float: left;
        margin-bottom: 40px;
        width: 300px;
    }

    #app-details {
        float: right;
        width: 360px;

        .button {
            font-size: 18px;
            margin: 20px 10px 0 0;
            padding: 5px 20px;
        }
    }
}

#site-map-footer {
    box-shadow: 0 1px 0 #e6e9eb inset;
    background: #d5d9dc @grain-src;
    border-top: 1px solid #c7c9cc;
    float: left;
    padding: 10px 0;
    width: 100%;

    .pad {
        width: 960px;

        > ul {
            padding: 0;
        }
    }

    ul > li {
        float: left;
        margin-right: 25px;
        padding: 0;
        width: 303px;

        &:last-child {
            margin-right: 0;
        }

        h2 {
            box-shadow: 0 -1px 0 rgba(0,0,0,.1) inset;
            color: @medium-gray;
            font-size: 20px;
            line-height: 25px;
            padding-bottom: 5px;
        }

        ol {
            padding: 0;

            li {
                overflow: hidden;
                margin: 0;
                padding: 0;
                text-overflow: ellipsis;
            }

            a {
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
            }
        }
    }
}

#page .reference-apps article {
    ol, ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    #app-preview {
        display: block;
        float: left;
        margin-top: 10px;
        width: 200px;

        .current-screenshot {
            .border-wrapper;
            padding: 5px;
        }

        #screenshots {
            margin: 0;
            padding: 0;

            li {
                cursor: pointer;
                float: left;
                list-style-type: none;
                padding: 5px;
                width: 54px;

                img {
                    width: 54px;
                }
            }
        }
    }

    #app-details {
        float: right;
        margin-bottom: 20px;
        min-height: 550px;
        width: 470px;

        h2 {
            margin: 0 0 20px;
        }

        h3 {
            color: #000;
            font-size: 20px;
            line-height: 24px;
        }

        section {
            border-bottom: 2px dashed @light-gray;
            clear: both;
            float: left;
            margin-bottom: 15px;
            padding-bottom: 20px;
            width: 100%;

            &:last-child {
                border: 0;
            }
        }
    }

    #view-code {
        border-top: 2px dashed @light-gray;
        float: left;
        padding-top: 20px;
        width: 100%;
    }

    .walkthrough {
        display: block;
        margin-top: 10px;
        text-align: center;
    }
}

a.app-source, .app-generator-detail #download-link {
    .gradient-two-color(#00a33b, #008739);
    color: @white;
    font-size: 18px;
    line-height: 22px;
    width: 200px;

    &:visited {
        color: @white;
    }
}

.app-generator-detail #download-link {
    display: block;
    clear: both;
    margin: 0 auto;
}

a.app-source {
    display: block;

    &:first-child {
        float: left;
    }

    &:last-child {
        float: right;
    }
}

#page .app-summary {
    background-color: @faint-gray;
    border: 1px solid #ccc;
    float: left;
    margin: 5px;
    padding: 8px;
    width: 165px;

    .summary {
        border-bottom: 2px dashed @light-gray;
        padding: 10px 0 5px;

        &:last-child {
            border: 0;
        }

        ol {
            margin: 0 0 5px;
        }
    }

    h4 {
        color: @orange;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;

        span {
            color: @medium-gray;
        }
    }
}

@import '../mkt/lib';

@devhub-box-shadow: #bbb 0 2px 3px;
@text-indent-white: #fff 0 1px 1px;

.border-wrapper {
    background-color: @white;
    border-radius: 3px;
    box-shadow: @light-gray 0 2px 2px;
}

.nav-arrow {
    background: url(~'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABkAAAALCAYAAACK9ybzAAABNklEQVR42rWTv2uDQBTHU9tAhg5SSOlQWi+xiWJpLKFQ4u4SF8kgUYhOgoPgpIuLmiGL/4T4H+i/4b/gmMnFURzs3VAoSX8kSofPHe+977vH3XvXa5rm3+nhOI5B+i3ATi4yn88Hw+GQAwAsSJJ8/wukg/oFyju1CFqu0jSlOY57lSSJ0jRt8hMojnRJklAo75wiiEEURYwgCIzjOCPP88Ahtm2Pl8vlcxzHDNKf05OvxjU8bLZarWjXdUfb7Zb4BNmiKNJhGL4g3bmNP3TcmKbJbjabaRAExG63I3zfB4qiTC3LYmEcbzNdR46yLO9kWWYNw3iCtwC6rk9UVWWrqrptO8LfOS/2+/0DfLbZer2mYLPZoijukb9bkWOwLMvGPM+/5XkOkN3lM/4W7Nd1/Qj3y64//gM055yHK3WPawAAAABJRU5ErkJggg==') no-repeat 100% 50%;
}

* {
    text-rendering: optimizeLegibility;
}

a[rel="external"]:after, a.external:after {
    content: url(../../img/ecosystem/link-external.png);
    padding: 0 16px 0 4px;
}

.doc-wrapper, .upper-header {
    margin: 0 auto;
    width: 960px;
}

#wrap {
    padding-top: 30px;
}

#site-header {
    border-bottom: 5px solid @white;
    box-shadow: 0 1px 3px -1px rgba(0, 0, 0, 0.6);
    position: relative;

    .logo {
        width: 400px;
    }

    .header-button.icon.browserid {
        display: none;
    }
}

.header-button.browserid {
    position: relative;
    width: auto;
}

.devhub-links {
    position: absolute;
    right: 0;
    text-align: right;
    top: 30px;
    width: 630px;
    z-index: 13;

    &.logged {
        right: 45px;
    }

    a {
        color: @white;
        font-size: 13px;
        line-height: 20px;
        padding: 5px 7px;
    }
}

#document-navigation {
    .transition(opacity 0.4s ease-in-out);
    background-color: #e0e3e5;
    border: 1px solid @light-gray;
    box-shadow: @light-gray 0 1px 2px;
    float: left;
    margin-right: 10px;
    opacity: .7;
    width: 190px;

    &:hover {
        opacity: 1;
    }

    ul {
        margin: 0;
        padding: 0;

        h2.title {
            background-color: @faint-gray;
            border-bottom: 1px solid #d2d6d9;
            cursor: pointer;
            font-size: 19px;
            font-weight: 100;
            line-height: 1.5em;
            margin: 0;
            padding: 5px 30px 5px 10px;
            text-shadow: @text-indent-white;
            text-transform: none;

            &:hover {
                .nav-arrow;
            }
        }
    }

    ol {
        display: none;
        margin: 0;
        padding: 0;

        li, li h2 {
            font-size: 13px;
            line-height: 1.5em;
        }

        li.has-children h2.subtitle {
            cursor: pointer;

            > a {
                padding: 0;
            }

            &:hover {
                .nav-arrow;
            }
        }

        a, li h2 {
            color: @dark-gray;
            display: block;
            font-weight: 400;
            margin-bottom: 1px;
            overflow: hidden;
            padding: 4px 20px;
            position: relative;
            text-overflow: ellipsis;

            &:hover {
                text-decoration: underline;
            }

            &.selected {
                background: url(~'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAgAAAAPCAYAAADZCo4zAAAAwklEQVR42nWQPQ9EQBCG/RO7i/tyyf0O1RLRKBQKhUQhEQkirK8Q8ZudkZBzVvFUz8y8MyPM83yJpmnqpTQM4xWGocyVtm0/4jgmeZ6Tk3Rd95amKSnLEgMH6fu+Al2MMbyxyyVPgo66rg+sMkkS0jQNbtsW/SMEQSBXVYW7rkM8YMJatExAfd+f2HfwPE+BzGEY0C+HKxzHuUPcOI7ixukPlmU9i6LA0zSJAPeTuq6rWZaRywKAUvqOokjiyR3TND9fMT8MR5ncz/AAAAAASUVORK5CYII=') no-repeat 100% 50%;
                font-weight: normal;
            }
        }
    }

    .section.active {
        ol {
            .transition(all 0.4s ease-in-out);
            background-color: #f1f1f1;
            display: block;
        }

        li.has-children {
            > ol {
                background-color: @white;
                display: none;
                padding-left: 20px;
            }

            &.active {
                h2.subtitle {
                    .nav-arrow;
                }

                > ol {
                    display: block;
                }
            }
        }

        h2.title {
            .nav-arrow;
        }
    }
}

#page article {
    background-color: #fff;
    box-shadow: @devhub-box-shadow;
    color: @dark-gray;
    float: left;
    font-size: 14px;
    font-weight: 400;
    line-height: 1.5em;
    padding: 30px;
    width: 685px;

    td {
        padding: 10px;
        vertical-align: top;
    }

    ol, ul {
        list-style-type: disc;
        padding: 0 20px;
    }

    h1 {
        color: @orange;
        font-weight: 100;
    }

    h2 {
        clear: both;
        font-size: 22px;
        font-weight: 500;
    }

    h3 {
        clear: both;
        font-size: 19px;
        font-weight: 300;
    }

    h2, h3, dt {
        margin: 20px 0 10px;
    }

    h3 {
        margin: 0 0 10px;
    }

    dt {
        font-size: 14px;
    }

    h2 a, h3 a {
        border-bottom: 1px solid #ddd;
        &:hover {
            border-bottom: 1px solid #484848;
            text-decoration: none;
        }
    }

    a:visited {
        color: #6d598b;
    }

    p {
        margin: 0.75em 0;

        .button-mdn {
            color: @white;
        }
    }

    pre {
        background-color: @faint-gray;
        color: @dark-gray;
        margin: 0.75em 0;
        overflow: auto;
        padding: 15px;
    }

    .button {
        &:visited {
            color: @white;
        }
    }

    .video-embed-list ul {
        list-style-type: none;
        margin: 0 auto;
        padding: 0;
        width: 640px;

        li {
            margin-bottom: 5px;
        }
    }

    .app-generator-detail > li {
        clear: both;
        display: none;
        float: left;

        &.on {
            display: block;
        }
    }

    .app-generator-preview, .app-generator-detail {
        clear: both;
        float: left;
        list-style-type: none;
        margin: 0;
    }

    .app-generator-detail {
        min-height: 300px;
        width: 645px;

        > li {
            width: 100%;
        }
    }

    .app-generator-preview > li {
        float: left;
        margin: 10px 40px 0;
        text-align: center;
        width: 125px;
    }

    .app-generator-preview > li > a {
        background: url(../../img/ecosystem/app-generator-layout-icons.png) no-repeat;
        display: block;
        height: 53px;
        margin: 0 auto;
        outline: none;
        padding-top: 70px;
        width: 100px;

        &.generator-app-stub {
            background-position: -23px -31px;
        }

        &.generator-list-detail-view {
            background-position: -169px -31px;
        }

        &.generator-game-stub {
            background-position: -315px -31px;
        }
    }

    .layout-preview {
        float: left;
        padding-top: 20px;
        width: 200px;
    }

    .layout-detail {
        float: right;
        width: 400px;
    }

    .features {
        margin-bottom: 40px;
    }
}

.firefox-simulator > article {
    #app-preview {
        float: left;
        margin-bottom: 40px;
        width: 300px;
    }

    #app-details {
        float: right;
        width: 360px;

        .button {
            font-size: 18px;
            margin: 20px 10px 0 0;
            padding: 5px 20px;
        }
    }
}

#site-map-footer {
    box-shadow: 0 1px 0 #e6e9eb inset;
    background: #d5d9dc @grain-src;
    border-top: 1px solid #c7c9cc;
    float: left;
    padding: 10px 0;
    width: 100%;

    .pad {
        width: 960px;

        > ul {
            padding: 0;
        }
    }

    ul > li {
        float: left;
        margin-right: 25px;
        padding: 0;
        width: 303px;

        &:last-child {
            margin-right: 0;
        }

        h2 {
            box-shadow: 0 -1px 0 rgba(0,0,0,.1) inset;
            color: @medium-gray;
            font-size: 20px;
            line-height: 25px;
            padding-bottom: 5px;
        }

        ol {
            padding: 0;

            li {
                overflow: hidden;
                margin: 0;
                padding: 0;
                text-overflow: ellipsis;
            }

            a {
                font-size: 14px;
                font-weight: 400;
                line-height: 20px;
            }
        }
    }
}

#page .reference-apps article {
    ol, ul {
        list-style-type: none;
        margin: 0;
        padding: 0;
    }

    #app-preview {
        display: block;
        float: left;
        margin-top: 10px;
        width: 200px;

        .current-screenshot {
            .border-wrapper;
            padding: 5px;
        }

        #screenshots {
            margin: 0;
            padding: 0;

            li {
                cursor: pointer;
                float: left;
                list-style-type: none;
                padding: 5px;
                width: 54px;

                img {
                    width: 54px;
                }
            }
        }
    }

    #app-details {
        float: right;
        margin-bottom: 20px;
        min-height: 550px;
        width: 470px;

        h2 {
            margin: 0 0 20px;
        }

        h3 {
            color: #000;
            font-size: 20px;
            line-height: 24px;
        }

        section {
            border-bottom: 2px dashed @light-gray;
            clear: both;
            float: left;
            margin-bottom: 15px;
            padding-bottom: 20px;
            width: 100%;

            &:last-child {
                border: 0;
            }
        }
    }

    #view-code {
        border-top: 2px dashed @light-gray;
        float: left;
        padding-top: 20px;
        width: 100%;
    }

    .walkthrough {
        display: block;
        margin-top: 10px;
        text-align: center;
    }
}

a.app-source, .app-generator-detail #download-link {
    .gradient-two-color(#00a33b, #008739);
    color: @white;
    font-size: 18px;
    line-height: 22px;
    width: 200px;

    &:visited {
        color: @white;
    }
}

.app-generator-detail #download-link {
    display: block;
    clear: both;
    margin: 0 auto;
}

a.app-source {
    display: block;

    &:first-child {
        float: left;
    }

    &:last-child {
        float: right;
    }
}

#page .app-summary {
    background-color: @faint-gray;
    border: 1px solid #ccc;
    float: left;
    margin: 5px;
    padding: 8px;
    width: 165px;

    .summary {
        border-bottom: 2px dashed @light-gray;
        padding: 10px 0 5px;

        &:last-child {
            border: 0;
        }

        ol {
            margin: 0 0 5px;
        }
    }

    h4 {
        color: @orange;
        font-size: 14px;
        font-weight: 400;
        line-height: 16px;

        span {
            color: @medium-gray;
        }
    }
}


position of the button

position of the button

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/Digipalvelutehdas/APIKA.git/'


Update crud.less

Update crud.less

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/hevnly/asset-bazaar.git/'


re-inserted disappeared CSS code

re-inserted disappeared CSS code

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/TIIUNDER/flatmate.git/'


fixed margin

fixed margin


Lessified css file, for folks who use LESS

If you're using gulp or other task automation and you're including stylesheets inside a main stylesheet you'll probably find this useful.

/*
 *contextMenu.js v 1.4.0
 *Author: Sudhanshu Yadav
 *s-yadav.github.com
 *Copyright (c) 2013 Sudhanshu Yadav.
 *Dual licensed under the MIT and GPL licenses
 *Lessified using http://css2less.co/
 */
// Color variables (appears count calculates by raw css)
@color0: #333333; // Appears 2 times
@color1: #ffffff; // Appears 2 times
@color2: #003366; // Appears 1 time
@color3: #f2f2f2; // Appears 1 time
@color4: #cccccc; // Appears 1 time
@color5: #f4f4f4; // Appears 1 time
@color6: #e6e6e6; // Appears 1 time

.iw-contextMenu {
	-moz-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	-webkit-box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	border: 1px solid @color6;
	box-shadow: 1px 1px 2px rgba(0, 0, 0, 0.2);
	display: none;
	z-index: 1000;
	li.iw-mDisable {
		opacity: .3;
	}
}
.iw-cm-menu {
	background: @color5;
	color: @color0;
	margin: 0px;
	padding: 0px;
	li {
		border-bottom: 1px solid @color4;
		cursor: pointer;
		list-style: none;
		padding-left: 30px;
		padding-right: 20px;
		padding: 3px;
		position: relative;
	}
}
.iw-mOverlay {
	background: @color1;
	height: 100%;
	left: 0px;
	opacity: .5;
	position: absolute;
	top: 0px;
	width: 100%;
}
.iw-mSelected {
	background-color: @color2;
	color: @color3;
}
.iw-cm-arrow-right {
	border-bottom: 5px solid transparent;
	border-left: 5px solid @color0;
	border-top: 5px solid transparent;
	height: 0;
	margin-top: -3px;
	position: absolute;
	right: 3px;
	top: 50%;
	width: 0;
}
.iw-mSelected>.iw-cm-arrow-right {
	border-left: 5px solid @color1;
}
.iw-mIcon {
	height: 20px;
	left: 0px;
	position: absolute;
	top: 3px;
	width: 20px;
}

error: pathspec 'contextMenu.less' did not match any file(s) known to git


add responsive.less file

add responsive.less file

/* Responsive.less
 * For phone and tablet devices
 * ------------------------------------------------------------- */

@media (max-width: 480px) {
  // Remove width from containers
  .container {
    width: auto;
    padding: 0 10px;
  }
  // Make all columns even
  [class*="span"] {
    float: none;
    display: block;
    width: auto;
  }
}

@media (min-width: 480px) and (max-width: 768px) {
  // Remove width from containers
  .container {
    width: auto;
    padding: 0 10px;
  }
  // Make all columns even
  [class*="span"] {
    float: none;
    display: block;
    width: auto;
    margin: 0;
  }
}

// TABLET TO MEDIUM DESKTOP
// ------------------------

@media (min-width: 768px) and (max-width: 940px) {

  // Reset grid variables
  @gridColumns:       16;
  @gridColumnWidth:   28px;
  @gridGutterWidth:   20px;
  @siteWidth:         748px;
  @extraSpace:        (@gridGutterWidth * 2);

  // Bring grid mixins to recalculate widths
  .columns(@columnSpan: 1) {
    width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
  }
  .offset(@columnOffset: 1) {
    margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @extraSpace;
  }

  // 16cols at 30px wide with 16px gutters
  .container {
    width: @siteWidth;
  }

  // Default columns
  .span1     { .columns(1); }
  .span2     { .columns(2); }
  .span3     { .columns(3); }
  .span4     { .columns(4); }
  .span5     { .columns(5); }
  .span6     { .columns(6); }
  .span7     { .columns(7); }
  .span8     { .columns(8); }
  .span9     { .columns(9); }
  .span10    { .columns(10); }
  .span11    { .columns(11); }
  .span12    { .columns(12); }

  // Offset column options
  .offset1   { .offset(1); }
  .offset2   { .offset(2); }
  .offset3   { .offset(3); }
  .offset4   { .offset(4); }
  .offset5   { .offset(5); }
  .offset6   { .offset(6); }
  .offset7   { .offset(7); }
  .offset8   { .offset(8); }
  .offset9   { .offset(9); }
  .offset10  { .offset(10); }
  .offset11  { .offset(11); }
  .offset12  { .offset(12); }

}

// LARGE DESKTOP
// -------------

@media (min-width: 1170px) {

  // Reset grid variables
  @gridColumns:       12;
  @gridColumnWidth:   70px;
  @gridGutterWidth:   30px;
  @siteWidth:         1170px;

  // Bring grid mixins to recalculate widths
  .columns(@columnSpan: 1) {
    width: (@gridColumnWidth * @columnSpan) + (@gridGutterWidth * (@columnSpan - 1));
  }
  .offset(@columnOffset: 1) {
    margin-left: (@gridColumnWidth * @columnOffset) + (@gridGutterWidth * (@columnOffset - 1)) + @gridGutterWidth;
  }

  .container {
    width: @siteWidth;
  }
  [class*="span"] {
    margin-left: @gridGutterWidth;
  }

  // Default columns
  .span1     { .columns(1); }
  .span2     { .columns(2); }
  .span3     { .columns(3); }
  .span4     { .columns(4); }
  .span5     { .columns(5); }
  .span6     { .columns(6); }
  .span7     { .columns(7); }
  .span8     { .columns(8); }
  .span9     { .columns(9); }
  .span10    { .columns(10); }
  .span11    { .columns(11); }
  .span12    { .columns(12); }

  // Offset column options
  .offset1   { .offset(1); }
  .offset2   { .offset(2); }
  .offset3   { .offset(3); }
  .offset4   { .offset(4); }
  .offset5   { .offset(5); }
  .offset6   { .offset(6); }
  .offset7   { .offset(7); }
  .offset8   { .offset(8); }
  .offset9   { .offset(9); }
  .offset10  { .offset(10); }
  .offset11  { .offset(11); }
  .offset12  { .offset(12); }

}

error: pathspec 'lib/responsive.less' did not match any file(s) known to git


Fix responsive navbar scroll dropdown

Fix responsive navbar scroll dropdown

remote: Support for password authentication was removed on August 13, 2021.
remote: Please see https://docs.github.com/en/get-started/getting-started-with-git/about-remote-repositories#cloning-with-https-urls for information on currently recommended modes of authentication.
fatal: Authentication failed for 'https://github.com/sonatra/sonatra-bootstrap-nav-scroll.git/'


Only make controls slidable on phones. Fixed flarum/core#178

.Slidable-underneath {
  display: none;
}
@media @phone {
  .Slidable {
    position: relative;

    .DiscussionListItem-controls {
      display: block;
      position: static;
    }
    .Slidable-underneath {
      display: none;
      background: @secondary-color !important;
      position: absolute;
      right: 0;
      top: 0;
      bottom: 0;
      left: 0;
      width: auto;
      height: auto;
      z-index: 0;
      color: #fff !important;
      border: 0;
      border-radius: 0;
      .box-shadow(none);
      padding: 20px 0;
      text-align: right;

      .icon {
        width: 50px;
        text-align: center;
        font-size: 20px;
      }
    }
    .Slideable-underneath--left {
      text-align: left;
    }
    .Slidable-content {
      .transition(~"box-shadow 0.2s, border-radius 0.2s");

      .sliding& {
        position: relative;
        background: #fff;
        z-index: 2;
        border-radius: 2px;
        .box-shadow(0 2px 6px @shadow-color);
      }
    }
  }
}

.Slidable-underneath {
  display: none;
}
.Slidable {
  position: relative;

  .DiscussionListItem-controls {
    display: block;
    position: static;
  }
  .Slidable-underneath {
    display: none;
    background: @secondary-color !important;
    position: absolute;
    right: 0;
    top: 0;
    bottom: 0;
    left: 0;
    width: auto;
    height: auto;
    z-index: 0;
    color: #fff !important;
    border: 0;
    border-radius: 0;
    .box-shadow(none);
    padding: 20px 0;
    text-align: right;

    .icon {
      width: 50px;
      text-align: center;
      font-size: 20px;
    }
  }
  .Slideable-underneath--left {
    text-align: left;
  }
  .Slidable-content {
    .transition(~"box-shadow 0.2s, border-radius 0.2s");

    .sliding& {
      position: relative;
      background: #fff;
      z-index: 2;
      border-radius: 2px;
      .box-shadow(0 2px 6px @shadow-color);
    }
  }
}