cssAudio - Activefile-genericCSS - ActiveGeneric - ActiveHTML - ActiveImage - ActiveJS - ActiveSVG - ActiveText - Activefile-genericVideo - ActiveLovehtmlicon-new-collectionicon-personicon-teamlog-outoctocatpop-outspinnerstartv

Pen Settings

CSS Base

Vendor Prefixing

Add External CSS

These stylesheets will be added in this order and before the code you write in the CSS editor. You can also add another Pen here, and it will pull the CSS from it. Try typing "font" or "ribbon" below.

Quick-add: + add another resource

Add External JavaScript

These scripts will run in this order and before the code in the JavaScript editor. You can also link to another Pen here, and it will run the JavaScript from it. Also try typing the name of any popular library.

Quick-add: + add another resource

Code Indentation

     

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

            
              %section.content
  - # IMPORTANT: this replaces all of 'section.reports-header.reports-module'
  %section.session-header--wrapper 
    %section.session-header
      .life-cycle--wrapper
        .life-cycle-steps
          -# when data-state for '.step-heading--*' changes data-state for  '.step-info--*' must match it
          .step-heading--startup{"data-state" => "completed"}
            .step-title--startup{"data-status" => "success"} Startup
              
          .step-heading--prepare{"data-state" => "started"}
            .step-title--prepare{"data-status" => "started"} Prepare
              
          .step-heading--run{"data-state" => "pending"}
            .step-title--run{"data-status" => ""} Run
              
          .step-heading--finish{"data-state" => "pending"}
            .step-title--finish{"data-status" => ""} Finish
              
        .life-cycle-steps
          
          -# You can use 'data-help-msg' to toggle on visiblity of the help panel with JS; all 'data-help-msg' values must start with 'help-' for it to become visible (see the stylesheet). See the JS panel for a rough idea of using data-attributes to control the messages from help icons in associated list-items...
          .step-info--help{"data-help-msg" => ""}
            .step-info-help--close-icon
              Close 
              %i.fa.fa-times{"aria-hidden" => "true"}
            .step-info-help--content 
              Placeholder text for help message for 
              %a{:href => "javascript:void(0)"} Post Set Hooks
         
          -# If 'data-session' is "init", "static", or "squashed" the early-session panel appears; if data-session is "", it does not. Use 'data-session' to inject content for each state.
          .step-info--early-session{"data-session" => ""}
            Placeholder text for an Early Session
          
          .step-info--startup{"data-state" => "completed"}
            %ul.step-info-list--startup
              %li.step-info-list--item.startup--test-count 98 Tests Started via CI
              %li.step-info-list--item.startup--timeago 5 minutes ago
              %li.step-info-list--item.startup--initiator by user@domain.com
              %li.step-info-list--item.startup--commit Commit a1b2c3d
              %li.step-info-list--item.startup--build-slots Waiting for Build Slots
              %li.step-info-list--item.step--time 00:05:00
          

          
          .step-info--prepare{"data-state" => "started"}
            %ul.step-info-list--prepare
              %li.step-info-list--item.prepare--workers{"data-status" => "success"} 6 Workers Prepared
              %li.step-info-list--item.prepare--setup-hooks{"data-status" => "started"} Running Setup Hooks
              %li.step-info-list--item.prepare--worker-hooks{"data-status" => "error"} 
                %a{:href => "javascript:void(0)"} Worker Hooks
              %li.step-info-list--item.prepare--postsetup-hooks{"data-status" => "failed", "data-help-msg" => "help-postsetup-hooks"} Post Setup Hooks 
              %li.step-info-list--item 
              %li.step-info-list--item.step--time 00:00:00
          .step-info--run{"data-state" => "pending"}
            %ul.step-info-list--run
              -# if ready count === 0, set data-state to "" - reverts to default icon in base color
              %li.step-info-list--item.run--tests-ready{"data-status" => "started"} 90 Tests Ready
              -# if skipped/failed/passed count === 0, set data-state to "success"
              %li.step-info-list--item.run--tests-skipped{"data-status" => "skipped"} 01 Tests Skipped
              %li.step-info-list--item.run--tests-failed{"data-status" => "failed"} 03 Tests Failed
                  
              %li.step-info-list--item.run--tests-passed{"data-status" => "success"} 04 Test Passed
              %li.step-info-list--item 
              %li.step-info-list--item.step--time 00:00:00
          .step-info--finish{"data-state" => "pending"}
            %ul.step-info-list--finish
              %li.step-info-list--item.finish--postworkers-hooks{"data-status" => "failed"} Post Worker Hooks
              %li.step-info-list--item.finish--postbuild-hooks{"data-status" => "error"} Post Build Hooks
              %li.step-info-list--item.finish--build-artifacts{"data-status" => "started"} Collecting Logs
              %li.step-info-list--item.finish--warnings{"data-status" => "success"} 0 Warnings
              %li.step-info-list--item 
              %li.step-info-list--item.step--time 00:00:00
      
      .status-summary--wrapper
        
        %button.session-status--badge{"data-status" => "passed"} 
          -# links to Test Results - attach click action to button, don't insert and 'a href' in here
          Build Status
          
        .session-status--details
        
          .session-detail--time
            %span.session-details--label Total Time  
            %span.session-status--time 00:00:00
            
          .session-detail--cpu 
            %span.session-details--label CPU Time
            %span.session-status--cpu 00:00:00
             
          .session-detail--coverage
            %span.session-details--label Code Coverage 
            %span.session-coverage--percent 75 
            %span.session-coverage--delta 5
            -# commented lines for DEMO only:
            %span.session-coverage--delta-symbol.up
            -# %span.session-coverage--delta-symbol.down
            -# %span.session-coverage--delta-symbol -
            %span.session-coverage--ratchet 70
            -# %span.session-coverage--ratchet.unset 
              %a{:href => "javascript:void(0)"} ?
          
          
          
        .session-status--actions
        
          .session-build--button-group
            %button.build-button--action Build Now
            %button.build-button--dropdown
              %span
              .session-build--dropdown-menu
                .dropdown-menu--item 
                  %a{:href => "javascript:void(0)"} Build Action
                .dropdown-menu--item 
                  %a{:href => "javascript:void(0)"} Build Action
                .dropdown-menu--item 
                  %a{:href => "javascript:void(0)"} Build Action
                .dropdown-menu--item 
                  %a{:href => "javascript:void(0)"} Build Action
              
          
          .session-link--wrapper
            .session-debug--link  
              %a{:href => "javascript:void(0)"} Debug Console
            .session-support--link 
              %a{:href => "javascript:void(0)"} Support


  -# DEMO only
  %section.demo-next-block 
    tabs section here
            
          
!
            
              // Begin DO NOT COPY
//
// Demo only - do not copy to app
.content { width: 1165px; margin: 2em auto; }
// Variables - do not copy to app, they exist there already
$georgia: Georgia, Cambria, "Times New Roman", Times, serif;
$helvetica: "Helvetica Neue", Helvetica, Arial, sans-serif;
$lucida-grande: "Lucida Grande", Tahoma, Verdana, Arial, sans-serif;
$monospace: "Bitstream Vera Sans Mono", Consolas, Courier, monospace;
$serif: "Tinos", $georgia;
$sans-serif: "Open Sans", $helvetica;
$sans-serif-secondary: $lucida-grande;
$icons: "FontAwesome";
$solano-ui-green:     #59be49;
$solano-ui-blue:      #0063e0;                            
$solano-ui-purple:    #6852b3;
$solano-ui-orange:    #ff8f00; 
$solano-ui-gold:      #ffd200;
$solano-ui-red:       #b22c2f;
$solano-ui-gray:      #999999;
$solano-ui-black:     #0b0b0b;   
$red:               $solano-ui-red;
$green:             $solano-ui-green;
$blue:              $solano-ui-blue;
$yellow:            $solano-ui-gold;
$gray:              $solano-ui-gray;
$black:             $solano-ui-black;
$status-passed:   $solano-ui-green;
$status-started:  adjust-hue(tint($solano-ui-blue, 30), -10); 
$status-queued:   $solano-ui-purple;
$status-skipped:  $solano-ui-orange;
$status-pending:  $status-skipped;
$status-error:    $solano-ui-gold;
$status-failed:   $solano-ui-red;
$status-not-run:  $solano-ui-gray;
$status-passed-border:   shade($status-passed, 15);
$status-started-border:  shade($status-started, 15);
$status-queued-border:   shade($status-queued, 15);
$status-skipped-border:  shade($status-skipped, 10);
$status-pending-border:  shade($status-pending, 10);
$status-error-border:    shade($status-error, 10);
$status-failed-border:   shade($status-failed, 15);
$status-not-run-border:  shade($status-not-run, 15);
$light-red:         saturate(tint($red, 40), 15);        
$light-green:       desaturate(tint($green, 40), 10);    
$light-blue:        tint($blue, 87);                     
$light-yellow:      tint($yellow, 90);
$light-gray:        tint($gray, 30);                     
$verylight-gray:    tint($gray, 75);
$ultralight-gray:   tint($gray, 90);
$solano-link-dark:             tint($blue, 25);
$solano-link-dark-hover:       tint($blue, 10);
$solano-action-button:         $solano-link-dark;
$solano-action-button-border:  $solano-link-dark-hover;
$solano-action-button-hover:   $solano-link-dark-hover;
$solano-link-light:            $ultralight-gray;   
$solano-link-light-hover:      $verylight-gray;
$base-font-color:         shade($gray, 60);
$medium-base-font-color:  shade($gray, 45);
$lighter-base-font-color: $gray;
$darker-base-font-color:  $black;
// dropdown-arrow mixin already exists in app
@mixin dropdown-arrow($size_tb: 6px, $size_lr: 4px, $direction: down, $top: 4px, $color: #333, $left: 0px) {
  border-width: $size_tb $size_lr $size_tb $size_lr;
  border-style: solid;
  border-color: transparent;
  display: inline-block;
  height: 0;
  position: relative;
  top: $top;
  left: $left;
  width: 0;
  @if $direction == down {
    border-top-color: $color;
  } @else if $direction == up {
    border-bottom-color: $color;
  }
}

.demo-next-block {
  width: 1165px;
  background-color: $verylight-gray;
  border-radius: 6px;
  text-align: center;
  font-size: 1em;
  color: $light-gray;
  font-family: $sans-serif;
  padding: 2em 0;
}

//
// End DO NOT COPY

// Start MIXINS
//
// Base Icon Mixin
@mixin icon-base() {
  font-family: $icons;
  font-style: normal;
  font-weight: normal;
  font-variant: normal;
  text-decoration: inherit;
  text-transform: none;
  font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  -webkit-font-smoothing: antialiased;
  -webkit-backface-visibility: hidden;
          backface-visibility: hidden;
  background: none !important;
  display: inline-block;
  text-align: center;
}
// Icon Spin Mixin
 @mixin icon-spin($speed) {
  -webkit-animation: spin $speed infinite linear;
          animation: spin $speed infinite linear;
  @-webkit-keyframes spin {
  0%   { -webkit-transform: rotate(0deg);
                 transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg);
                 transform: rotate(360deg); } 
  }
  @keyframes spin {
  0%   { -webkit-transform: rotate(0deg);
                 transform: rotate(0deg); }
  100% { -webkit-transform: rotate(360deg);
                 transform: rotate(360deg); } 
  }
  -webkit-transform-origin: 50% calc(50% - .5px);
  transform-origin: 50% calc(50% - .5px); 
}
// Set global small icon spin speed
$small-icon-spin-speed: 2s;
$large-icon-spin-speed: 4s;
//
// End MIXINS

// Start SHARED STYLES
//
// Icons - Global Data States -> Colors
div[class^='step-title--'],
.step-info-list--item {
  &[data-status='started']:before { color: $status-started }
  &[data-status='success']:before { color: $status-passed }
  &[data-status='error']:before   { color: $status-error }
  &[data-status='failed']:before  { color: $status-failed }
  &[data-status='skipped']:before { color: $solano-ui-gray }
  &[data-status='']:before { color: $light-gray }
}
// Buttons
button {
  font-family: $sans-serif;
}
// End SHARED STYLES


// 
// Session View Header Component v2
// 

.session-header--wrapper {
  // Essential normalizing
  box-sizing: border-box; 
  & * , & *:before , & *:after { box-sizing: inherit; }
  font-size: 100%;
}

.session-header { 
  background-color: none;
  border-radius: 3px;
  display: block;
  font-family: $sans-serif;
  margin: 0 0 3em 0;
  overflow: visible;
	width: 100%;
  &:after { // isolated clearfix - keep here
    visibility: hidden;
	  display: block;
	  font-size: 0;
	  content: " ";
	  clear: both;
	  height: 0;
  }
}

.life-cycle--wrapper {
  float: left;
  width: 78.5%;
}

.status-summary--wrapper {
  float: right;
  width: 20%;
}

// Steps (Base for both Heading & Lists)
.life-cycle-steps {
  display: -webkit-inline-box;
  display: -webkit-inline-flex;
  display: -ms-inline-flexbox;
  display: inline-flex;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  -webkit-box-align: stretch;
  -webkit-align-items: stretch;
      -ms-flex-align: stretch;
          align-items: stretch;
  //margin: 1em 0em;
  background: '';
  box-shadow: none;
  line-height: 1.125em;
  //border-radius: 0.25rem;
  border: 1px solid gray;
  width: 100%;
  position: relative;
}
.life-cycle-steps:first-child {
  border-radius: 0.25rem 0.25rem 0em 0em;
  margin-top: 0em;
}
.life-cycle-steps:last-child {
  border-radius: 0em 0em 0.25rem 0.25rem ;
  margin-bottom: 0em;
  border-top: none;
}

//
// Step Headings
//
div[class^="step-heading--"] {
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  vertical-align: middle;
  -webkit-box-align: center;
  -webkit-align-items: center;
      -ms-flex-align: center;
          align-items: center;
  -webkit-box-pack: center;
  -webkit-justify-content: center;
      -ms-flex-pack: center;
          justify-content: center;
  margin: 0em 0em;
  padding: 1.125em 2em;
  background: #FFFFFF;
  color: rgba(100, 100, 100, 0.87);
  box-shadow: none;
  border-radius: 0em;
  border: none;
  border-right: 1px solid rgba(34, 36, 38, 0.15);
  -webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
          transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
  width: 25%;
  pointer-events: none;
  cursor: auto;

  &:after {
  display: none;
  position: absolute;
  z-index: 2;
  content: '';
  top: 50%;
  right: 0%;
  border: medium none;
  background-color: #FFFFFF;
  width: 1.125em;
  height: 1.125em;
  border-style: solid;
  border-color: rgba(34, 36, 38, 0.15);
  border-width: 0px 1px 1px 0px;
  -webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
          transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
  -webkit-transform: translateY(-50%) translateX(50%) rotate(-45deg);
      -ms-transform: translateY(-50%) translateX(50%) rotate(-45deg);
          transform: translateY(-50%) translateX(50%) rotate(-45deg);
}
  &:first-child {
    padding-left: 2em;
    border-radius: 0.25rem 0em 0em 0.25rem;
  }
  &:last-child {
    border-radius: 0em 0.25rem 0.25rem 0em;
  }
  &:last-child {
    border-right: none;
    margin-right: 0em;
  }
  &:only-child {
    border-radius: 0.25rem;
  }
  // Step Heading - Active
  &[data-state="active"] {
    background: tint($verylight-gray, 20);
    & div[class*="step-title--"] { color: $base-font-color; }
    &:after { background: inherit; }
  }
  // Step Heading - Completed
  &[data-state="completed"] {
    & div[class*="step-title--"] { color: inherit; }
    &:after { background: inherit; }
  }
  // Step Heading - Pending
  &[data-state="pending"] {
    & div[class*="step-title--"] { color: tint($light-gray, 20); }
    & div[class*="step-title--"]:before { color: tint($light-gray, 20); }
    &:after { background: inherit; }
  }  
  // Step Heading - Step Arrows
  &:after { display: block; }
  &:last-child:after { display: none; }
}

// Icons - Steps Heading (Base)

div[class^='step-title--'] {
  font-family: $sans-serif;
  font-size: 1.125em;
  font-weight: bold;
  & ~ .step-description { // may not need
    margin-top: 0.25em;
  }
}
.step-description { // may not need
  font-weight: normal;
  font-size: 0.9375em;
  color: $black;
}

div[class^='step-title--']:before {
  @include icon-base;
  color: $light-gray;
  font-size: 20px; // must be even px
  width: 20px;
  margin-right: 1rem;
} 

div[class^='step-title--'] {
  &[data-status='started']:before { content: "\f013"; color: inherit; 
  @include icon-spin($large-icon-spin-speed) }
  &[data-status='success']:before { content: "\f00c"; }
  &[data-status='error']:before   { content: "\f071"; } 
  &[data-status='failed']:before  { content: "\f00d"; }
  &[data-status='skipped']:before { content: "\f10c"; }
  &:before { content: "\f10c"; } }

//
// Step Info Lists
//

// Step Lists (Base)

div[class^="step-info--"]
// .step-info--startup,
// .step-info--prepare,
// .step-info--run,
// .step-info--finish 
{
  position: relative;
  display: -webkit-box;
  display: -webkit-flex;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-flex: 1;
  -webkit-flex: 1 0 auto;
      -ms-flex: 1 0 auto;
          flex: 1 0 auto;
  -webkit-flex-wrap: nowrap;
      -ms-flex-wrap: nowrap;
          flex-wrap: nowrap;
  -webkit-box-orient: horizontal;
  -webkit-box-direction: normal;
  -webkit-flex-direction: row;
      -ms-flex-direction: row;
          flex-direction: row;
  vertical-align: top; //
  -webkit-box-align: top; //
  -webkit-align-items: top; //
      -ms-flex-align: top; //
          align-items: top; //
  -webkit-box-pack: left; // ?
  -webkit-justify-content: left; //
      -ms-flex-pack: left; //
          justify-content: left; //
  margin: 0em 0em;
  padding: 1.125em 1em; //
  background: #FFFFFF;
  color: rgba(100, 100, 100, 0.87);
  box-shadow: none;
  border-radius: 0em;
  border: none;
  border-right: 1px solid rgba(34, 36, 38, 0.15);
  -webkit-transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
          transition: background-color 0.1s ease, opacity 0.1s ease, color 0.1s ease, box-shadow 0.1s ease;
  width: 25%;
  &:first-child {
    padding-left: 1em;
    border-radius: 0.25rem 0em 0em 0.25rem;
  }
  &:last-child {
    border-radius: 0em 0.25rem 0.25rem 0em;
  }
  &:last-child {
    border-right: none;
    margin-right: 0em;
  }
  &:only-child {
    border-radius: 0.25rem;
  }
  // Pending Step List Effect
  &[data-state="pending"] { & > * { opacity: .5; } } 
  &[data-state="completed"],
  &[data-state="active"],
  &[data-state=""] { & > * { opacity: 1; } } 
}

// Help panel
div.step-info--help {
  background-color: tint($light-blue, 50);
  border: none !important;
  border-radius: 0px 0px 0.25rem 0.25rem !important;
  color: $base-font-color;
  height: 100%;
  left: 0;
  position: absolute;
  visibility: hidden;
  width: 100%;
  z-index: 100;
  // data-session to toggle visibility
  &[data-help-msg^="help-"] {
    visibility: visible;
  }
}

.step-info-help--close-icon {
  color: $gray;
  cursor: pointer;
  font-size: 0.825rem;
  letter-spacing: 1px;
  position: absolute;
  right: 3%;
  text-transform: uppercase;
  & i {
    font-size: 1.125rem;
    vertical-align: -0.5px;
  }
}
.step-info-help--content {
  font-size: .875rem;
  padding: 1.5em;
  a {
    color: $solano-link-dark;
    text-decoration: none;
    &:hover {
      color: $solano-link-dark-hover;
      text-decoration: underline;
    }
  }
}


// Early Session panel
div.step-info--early-session {
  background-color: tint($light-green, 70);
  border: none !important;
  border-radius: 0 0 0.25rem 0 !important;
  color: $base-font-color;
  height: 100%;
  left: 25%;
  position: absolute;
  visibility: hidden;
  width: 75%;
  z-index: 100;
  // data-session to toggle visibility
  &[data-session="init"],
  &[data-session="squashed"],
  &[data-session="static"] {
    visibility: visible;
  }
}

div.step-info--startup { // fix border due to hidden panel sequence 
  border-radius: 0 0 0 0.25rem !important;
}


ul[class^='step-info-list'] {
  font-size: 0.8rem;
  margin: 0;
  padding: 0;
  width: 100%;
} 

.step-info-list--item {
  list-style: none;
  margin: 0 0 0.6rem 0;
  width: 100%;
  a {
    display: inline;
    margin: 0 0 0 -3px; // hack to fix mysterious alignment issue
    text-align: left;
    color: inherit;
    &:hover {
      color: $solano-link-dark-hover;
    }
  }
  &:empty { height: 1.1rem; }
  &[data-status='started'] { font-weight: 600; }
}

// Icons - Step Lists (Base)

li[class^='step-info-list--item']:before,
li[class^='step-info-list--item']:after {
  @include icon-base;
  color: $light-gray;
  width: 20px;
} 
li[class^='step-info-list--item']:before {
  margin-right: 0.5rem;
}
li[class^='step-info-list--item']:after {
  float: right;
}

// Icons - Step Lists

// Startup List Icons
li.startup--test-count       { &:before { content: "\f061"; } }
li.startup--timeago          { &:before { content: "\f01d"; } }
li.startup--initiator        { &:before { content: "\f003"; } }
li.startup--commit           { &:before { content: "\f121"; } }
li.startup--build-slots      { &:before { content: "\f24d"; } }

// Prepare List Icons
li[class*='prepare--'] {
  &[data-status='started']:before { content: "\f013";
  @include icon-spin($small-icon-spin-speed) } 
  &[data-status='success']:before { content: "\f00c"; }
  &[data-status='error']:before   { content: "\f071"; } 
  &[data-status='failed']:before  { content: "\f00d"; } 
  &:before { content: "\f085"; } }
li.prepare--workers          { &:before { content: "\f085"; } }
li.prepare--setup-hooks      { &:before { content: "\f085"; } }
li.prepare--worker-hooks     { &:before { content: "\f085"; } }
li.prepare--postsetup-hooks  { &:before { content: "\f085"; } }

// Run List Icons
li[class*='run--'] {
  &[data-status='started']:before { content: "\f013"; 
  @include icon-spin($small-icon-spin-speed) }
  &[data-status='success']:before { content: "\f00c"; }
  &[data-status='error']:before   { content: "\f071"; } 
  &[data-status='failed']:before  { content: "\f00d"; }
  &[data-status='skipped']:before { content: "\f10c"; }
  &:before { content: "\f085"; } 
}
li.run--tests-ready      { &:before { content: "\f085"; } }
li.run--tests-skipped    { &:before { content: "\f085"; } }
li.run--tests-failed     { &:before { content: "\f085"; } }
li.run--tests-passed     { &:before { content: "\f085"; } }

// Finish List Icons

li[class*='finish--'] {
  &[data-status='started']:before { content: "\f013"; 
  @include icon-spin($small-icon-spin-speed) }
  &[data-status='success']:before { content: "\f00c"; }
  &[data-status='error']:before   { content: "\f071"; } 
  &[data-status='failed']:before  { content: "\f00d"; }
  &[data-status='skipped']:before { content: "\f10c"; }
  &:before { content: "\f085"; } }
li.finish--postworkers-hooks  { &:before { content: "\f085"; } }
li.finish--postbuild-hooks    { &:before { content: "\f085"; } }
li.finish--build-artifacts    { &:before { content: "\f085"; } }
li.finish--warnings           { &:before { content: "\f085"; } }

// Step - Time
li.step--time { 
  margin: 1.125rem 0 0 0;
  font-weight: 600;
  &:before {
    content: "\f017";
  }
}

// Help Icons
li[class^='step-info-list--item'] {
  &[data-help-msg^='help-']:after { 
    content: "\f29c"; 
    color: $gray;
    cursor: pointer; 
    font-size: 0.875rem;
  }
}















//
// Status Summary Column (Right)
//

//
// Status Badge (== Button)
//
.session-status--badge {
  display: inline-block;
  line-height: 1.8;
  vertical-align: middle;
  margin: 0em 0em;
  background-color: $light-gray;
  background-image: none;
  padding: 0.5em 0.75em;
  color: white;
  text-transform: none;
  font-weight: 600;
  border: 0px solid transparent;
  border-radius: 0.25rem;
  -webkit-transition: background 0.1s ease;
          transition: background 0.1s ease;
  width: 100%;
  text-align: center;
  height: 58px;
  font-size: 1.25em;
  cursor: pointer;
  &:active, &:focus {
    background-image: none !important;
    box-shadow: none !important;
    outline: 0;
  }
  
  // Badge Icon (Base)
  &:before {
    @include icon-base;
    font-size: 32px; // must be even px
    width: 32px;
    margin-right: 0.5rem;
    vertical-align: top;
    line-height: 1.1;
  } 
  
  &[data-status='started'] {
    background-color: $status-not-run;
    border: 1px solid $status-not-run-border;
    &:before { content: "\f10c"; }
  }
  &[data-status='passed'] {
    background-color: $status-passed;
    border: 1px solid $status-passed-border;
    &:before { content: "\f00c"; }
  }
  &[data-status='error'] {
    background-color: shade($status-error, 10);
    border: 1px solid shade($status-error-border, 10);
    //content: "Build Errors";
    &:before { content: "\f071"; }
  }
  &[data-status='failed'] {
    background-color: $status-failed;
    border: 1px solid $status-failed-border;
    &:before { content: "\f00d"; }
  }
  
}


// Session Status Details
.session-status--details {
  text-align: center;
  margin: 1.5em 0 1em;
}

.session-status--actions {
  text-align: center;
  margin: 1.25em 0 0;
}

div[class^="session-detail--"],
.session-detail--cpu,
.session-detail--coverage
{
  font-size: 0.875rem;
  margin-bottom: 0.5em;
}
.session-details--label {
  font-weight: 400;
  margin-right: 0.25rem;
  //color: $gray;
}
.session-status--time, .session-status--cpu {
    font-weight: 600;
    margin-left: 0.125em;
    vertical-align: 0.5px;
}

// Session Coverage
.session-detail--coverage {
  font-weight: 600;
}
  .session-coverage--percent {
    color: $medium-base-font-color;
    font-weight: 600;
    margin-right: 2px;
  }
  .session-coverage--delta {
    color: $gray;
    font-weight: 600;
  }
  .session-coverage--delta-symbol {
    color: $light-gray;
    margin: 0 4px 0 -1px;
    &.up {
      @include dropdown-arrow(5px, 3px, up, -3px, $lighter-base-font-color);
    }
    &.down {
      @include dropdown-arrow(5px, 3px, down, 2px, $lighter-base-font-color);
    }
  }
  .session-coverage--ratchet {
    $ratchet-color: $gray;
    border: 1px solid $ratchet-color;
    color: $ratchet-color;
    border-radius: 3px;
    display: inline-block;
    font-size: 0.75rem;
    line-height: 1;
    padding: 1px 1px 0;
    text-align: center;
    min-width: 16px;
    vertical-align: 1px;
    &.unset {
      background-color: $solano-action-button;
      border-color: $solano-action-button;
      color: white;
      font-size: 11px;
      font-weight: 400;
      padding: 1px 1px;
      text-decoration: none;
      & > a {
        color: white;
        text-decoration: none;
      }
    }
  }
  
// Session Status Actions

// Build Now Button
.session-build--button-group {
  display: inline-block;
  postion: relative;
  margin: 1rem 0 0.5rem;
  text-align: center;
  
}
button[class^="build-button--"] {
  color: white;
  font-size: 1em;
  margin: 0;
  position: relative;
  float: left;
  border: 1px solid $solano-action-button-border;
  background-color: $solano-action-button;
  box-shadow: none;
  cursor: pointer;
  &:hover {
    background-color: $solano-action-button-hover;
  }
  &:active, &:focus {
    background-image: none !important;
    box-shadow: none !important;
    outline: 0;
  }
}

button.build-button--action  {
  border-radius: 3px 0 0 3px;
  border-right: none;
  padding: 0.5em 1.5em 0.5em;
}

button.build-button--dropdown {
  border-radius: 0 3px 3px 0;
  padding: 0.5em 1em;
  & span {
    @include dropdown-arrow(5px, 3px, down, 3px, white);
  }
}
button.build-button--dropdown .session-build--dropdown-menu:before,
button.build-button--dropdown .session-build--dropdown-menu:after {
    display: none;
}

button.build-button--dropdown .session-build--dropdown-menu {
  $dropdown-border-color: $light-gray;
  position: absolute;
  display: block;
  overflow: hidden;
  top: -9999px !important;
  padding: 0.5rem;
  margin-right: -1px;
  margin-top: 1rem;
  opacity: 0;
  width: 0;
  height: 0;
  -webkit-transition: opacity 0.2s ease;
          transition: opacity 0.2s ease;
  background-color: white;
  border: 1px solid $dropdown-border-color;
  box-shadow: 0px 2px 3px 0px rgba($gray, 0.15);
  border-radius: 0.25rem;
  -webkit-transition: opacity 0.1s ease;
          transition: opacity 0.1s ease;
  z-index: 11;
  will-change: transform, opacity;
  & > * {
    white-space: nowrap;
  }
  &:before {
    display: block;
    position: absolute;
    pointer-events: none;
    content: '';
    visibility: visible;
    transform: rotate(45deg);
    width: 1em;
    height: 1em;
    border-top: 1px solid $dropdown-border-color;
    border-left: 1px solid $dropdown-border-color;
    background: #FFFFFF;
    //z-index: 2;
    top: -0.533em;
    left: 50%;
    margin: 0em 0em 0em -0.25em;
  }
}

button.build-button--dropdown:focus > .session-build--dropdown-menu {
  overflow: visible;
  width: 166px; // must manually match to width of button-group
  height: auto;
  top: 100% !important;
  right: 0 !important;
  min-width: -webkit-max-content;
  min-width: -moz-max-content;
  min-width: max-content;
  opacity: 1;
  z-index: 1000;
}

.session-build--dropdown-menu > .dropdown-menu--item {
  position: relative;
  cursor: pointer;
  display: block;
  border: none;
  height: auto;
  text-align: left;
  border-top: none;
  line-height: 1em;
  color: rgba(100, 100, 100, 0.87);
  padding: 0.6875rem 1.125rem !important;
  border-radius: 3px;
  font-size: .875rem;
  text-transform: none;
  font-weight: normal;
  box-shadow: none;
  -webkit-touch-callout: none;
  z-index: 2;
  > a {
    color: $solano-link-dark;
    text-decoration: none;
  }
  &:hover {
    background-color: $solano-link-dark;
  }
  &:hover > a {
    color: white;
  }
}
.session-build--dropdown-menu > .dropdown-menu--item:first-child {
  border-top-width: 0px;
}


  
 




// Links
.session-link--wrapper { }
.session-debug--link, .session-support--link {
  display: inline-block;
  font-size: 0.75rem;
  & a {
    color: $solano-link-dark;
    text-decoration: none;
  }
  & a:hover {
    color: $solano-link-dark-hover;
    text-decoration: underline;
  }
}
.session-debug--link {
  &:after {
    content: "|";
    color: $light-gray;
    //font-size: 0.75em;
    margin-left: 0.25rem;
    vertical-alignment: baseline;
  }
}
            
          
!
            
              $(document).ready(function() {
  // Help Panel Close Icon
  $("div.step-info-help--close-icon").click(function() {
  $("div.step-info--help" ).attr("data-help-msg", "");
  });
  // Help Icon for Help Msg Panel
  $("li.step-info-list--item").click(function() {
  var helpmsg = $(this).attr("data-help-msg");
  $("div.step-info--help" ).attr("data-help-msg", helpmsg);
  });
  
});

            
          
!
999px
Loading ..................

Console