Generated by SassMeister.com.

SassMeister-input.sass

// ----
// Sass (v3.3.10)
// Compass (v1.0.0.alpha.20)
// ----


=draggable($is-draggable)
  @if $is-draggable
    cursor: move
  @else
    cursor: pointer
  
=base-title
  font-family: Fontin-Sans, Arial, sans-serif !important
  font-size: 12px !important
  font-weight: bold !important
  
=base-primary-icon
  font-family: cyberx-glyph, cyberx-glyph, cyberx-glyph !important
  font-size: 32px !important
  stroke-width: 0 !important
  
=base-state-icon
  font-family: 'Glyphicons Halflings' !important
  font-size: 10px !important
  stroke-width: 0 !important
    
=fill($color)
  fill: $color !important

=logical-stroke($width, $color)
  fill: $color !important
  stroke-dasharray: 2,2 !important
  stroke-width: $width !important
  
=hybrid-stroke($width, $color)
  fill: $color !important
  stroke-dasharray: 15,15 !important
  stroke-width: $width !important
  
=physical-stroke($width, $color)
  fill: $color !important
  stroke-width: $width !important
            
$light-gray: #E4E4E4
$medium-gray: #AEAEAE
$gray: #6B6B6B

$blue: #266DBB
$orange: #F0563D
$green: #F0563D
$dark: #000

.cyberx-graph
  &-spotlight
    .highlight
      &.device
        +draggable(false)
        &-title
          +base-title
          +fill($dark)
        &-primary-icon
          +base-primary-icon
          +fill($green)
        &-state-icon
          &-danger
            +base-state-icon
            +fill($orange)
          &-success
            +base-state-icon
            +fill($green)
      &.connection
        &-logical
          +logical-stroke(2, $orange)
        &-hybrid
          +hybrid-stroke(2, $orange)
        &-physical
          +physical-stroke(2, $orange)
    .normal
      &.device
        +draggable(false)
        &-title
          +base-title
          +fill($light-gray)
        &-primary-icon
          +base-primary-icon
          +fill($light-gray)
        &-state-icon
          &-danger
            +base-state-icon
            +fill($light-gray)
          &-success
            +base-state-icon
            +fill($light-gray)
      &.connection
        &-logical
          +logical-stroke(2, $light-gray)
        &-hybrid
          +hybrid-stroke(2, $light-gray)
        &-physical
          +physical-stroke(2, $light-gray)
    .selected
      &.device
        +draggable(false)
        &-title
          +base-title
          +fill($medium-gray)
        &-primary-icon
          +base-primary-icon
          +fill($medium-gray)
        &-state-icon
          &-danger
            +base-state-icon
            +fill($medium-gray)
          &-success
            +base-state-icon
            +fill($medium-gray)
      &.connection
        &-logical
          +logical-stroke(2, $medium-gray)
        &-hybrid
          +hybrid-stroke(2, $medium-gray)
        &-physical
          +physical-stroke(2, $medium-gray)
    .hover
      &.device
        +draggable(false)
        &-title
          +base-title
          +fill($medium-gray)
        &-primary-icon
          +base-primary-icon
          +fill($medium-gray)
        &-state-icon
          &-danger
            +base-state-icon
            +fill($medium-gray)
          &-success
            +base-state-icon
            +fill($medium-gray)
      &.connection
        &-logical
          +logical-stroke(2, $medium-gray)
        &-hybrid
          +hybrid-stroke(2, $medium-gray)
        &-physical
          +physical-stroke(2, $medium-gray)
  &-logical
    .highlight
      &.device
        +draggable(false)
        &-title
          +base-title
          +fill($dark)
        &-primary-icon
          +base-primary-icon
          +fill($green)
        &-state-icon
          &-danger
            +base-state-icon
            +fill($orange)
          &-success
            +base-state-icon
            +fill($green)
      &.connection
        &-logical
          +logical-stroke(2, $blue)
        &-hybrid
          +hybrid-stroke(2, $blue)
        &-physical
          +physical-stroke(2, $blue)
    .normal
      &.device
        +draggable(false)
        &-title
          +base-title
          +fill($gray)
        &-primary-icon
          +base-primary-icon
          +fill($gray)
        &-state-icon
          &-danger
            +base-state-icon
            +fill($orange)
          &-success
            +base-state-icon
            +fill($green)
      &.connection
        &-logical
          +logical-stroke(2, $medium-gray)
        &-hybrid
          +hybrid-stroke(2, $medium-gray)
        &-physical
          +physical-stroke(2, $medium-gray)
    .selected
      &.device
        +draggable(false)
        &-title
          +base-title
          +fill($blue)
        &-primary-icon
          +base-primary-icon
          +fill($blue)
        &-state-icon
          &-danger
            +base-state-icon
            +fill($orange)
          &-success
            +base-state-icon
            +fill($green)
      &.connection
        &-logical
          +logical-stroke(2, $blue)
        &-hybrid
          +hybrid-stroke(2, $blue)
        &-physical
          +physical-stroke(2, $blue)
    .hover
      &.device
        +draggable(false)
        &-title
          +base-title
          +fill($gray)
        &-primary-icon
          +base-primary-icon
          +fill($gray)
        &-state-icon
          &-danger
            +base-state-icon
            +fill($orange)
          &-success
            +base-state-icon
            +fill($green)
      &.connection
        &-logical
          +logical-stroke(2, $gray)
        &-hybrid
          +hybrid-stroke(2, $gray)
        &-physical
          +physical-stroke(2, $gray)
  &-physical
    .highlight
      &.device
        +draggable(false)
        &-title
          +base-title
          +fill($dark)
        &-primary-icon
          +base-primary-icon
          +fill($green)
        &-state-icon
          &-danger
            +base-state-icon
            +fill($orange)
          &-success
            +base-state-icon
            +fill($green)
      &.connection
        &-logical
          +logical-stroke(2, $blue)
        &-hybrid
          +hybrid-stroke(2, $blue)
        &-physical
          +physical-stroke(2, $blue)
    .normal
      &.device
        +draggable(false)
        &-title
          +base-title
          +fill($gray)
        &-primary-icon
          +base-primary-icon
          +fill($gray)
        &-state-icon
          &-danger
            +base-state-icon
            +fill($orange)
          &-success
            +base-state-icon
            +fill($green)
      &.connection
        &-logical
          +logical-stroke(2, $medium-gray)
        &-hybrid
          +hybrid-stroke(2, $medium-gray)
        &-physical
          +physical-stroke(2, $medium-gray)
    .selected
      &.device
        +draggable(false)
        &-title
          +base-title
          +fill($blue)
        &-primary-icon
          +base-primary-icon
          +fill($blue)
        &-state-icon
          &-danger
            +base-state-icon
            +fill($orange)
          &-success
            +base-state-icon
            +fill($green)
      &.connection
        &-logical
          +logical-stroke(2, $blue)
        &-hybrid
          +hybrid-stroke(2, $blue)
        &-physical
          +physical-stroke(2, $blue)
    .hover
      &.device
        +draggable(false)
        &-title
          +base-title
          +fill($gray)
        &-primary-icon
          +base-primary-icon
          +fill($gray)
        &-state-icon
          &-danger
            +base-state-icon
            +fill($orange)
          &-success
            +base-state-icon
            +fill($green)
      &.connection
        &-logical
          +logical-stroke(2, $gray)
        &-hybrid
          +hybrid-stroke(2, $gray)
        &-physical
          +physical-stroke(2, $gray)

SassMeister-output.css

.cyberx-graph-spotlight .highlight.device {
  cursor: pointer;
}
.cyberx-graph-spotlight .highlight.device-title {
  font-family: Fontin-Sans, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  fill: black !important;
}
.cyberx-graph-spotlight .highlight.device-primary-icon {
  font-family: cyberx-glyph, cyberx-glyph, cyberx-glyph !important;
  font-size: 32px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-spotlight .highlight.device-state-icon-danger {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-spotlight .highlight.device-state-icon-success {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-spotlight .highlight.connection-logical {
  fill: #f0563d !important;
  stroke-dasharray: 2, 2 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-spotlight .highlight.connection-hybrid {
  fill: #f0563d !important;
  stroke-dasharray: 15, 15 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-spotlight .highlight.connection-physical {
  fill: #f0563d !important;
  stroke-width: 2 !important;
}
.cyberx-graph-spotlight .normal.device {
  cursor: pointer;
}
.cyberx-graph-spotlight .normal.device-title {
  font-family: Fontin-Sans, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  fill: #e4e4e4 !important;
}
.cyberx-graph-spotlight .normal.device-primary-icon {
  font-family: cyberx-glyph, cyberx-glyph, cyberx-glyph !important;
  font-size: 32px !important;
  stroke-width: 0 !important;
  fill: #e4e4e4 !important;
}
.cyberx-graph-spotlight .normal.device-state-icon-danger {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #e4e4e4 !important;
}
.cyberx-graph-spotlight .normal.device-state-icon-success {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #e4e4e4 !important;
}
.cyberx-graph-spotlight .normal.connection-logical {
  fill: #e4e4e4 !important;
  stroke-dasharray: 2, 2 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-spotlight .normal.connection-hybrid {
  fill: #e4e4e4 !important;
  stroke-dasharray: 15, 15 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-spotlight .normal.connection-physical {
  fill: #e4e4e4 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-spotlight .selected.device {
  cursor: pointer;
}
.cyberx-graph-spotlight .selected.device-title {
  font-family: Fontin-Sans, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  fill: #aeaeae !important;
}
.cyberx-graph-spotlight .selected.device-primary-icon {
  font-family: cyberx-glyph, cyberx-glyph, cyberx-glyph !important;
  font-size: 32px !important;
  stroke-width: 0 !important;
  fill: #aeaeae !important;
}
.cyberx-graph-spotlight .selected.device-state-icon-danger {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #aeaeae !important;
}
.cyberx-graph-spotlight .selected.device-state-icon-success {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #aeaeae !important;
}
.cyberx-graph-spotlight .selected.connection-logical {
  fill: #aeaeae !important;
  stroke-dasharray: 2, 2 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-spotlight .selected.connection-hybrid {
  fill: #aeaeae !important;
  stroke-dasharray: 15, 15 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-spotlight .selected.connection-physical {
  fill: #aeaeae !important;
  stroke-width: 2 !important;
}
.cyberx-graph-spotlight .hover.device {
  cursor: pointer;
}
.cyberx-graph-spotlight .hover.device-title {
  font-family: Fontin-Sans, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  fill: #aeaeae !important;
}
.cyberx-graph-spotlight .hover.device-primary-icon {
  font-family: cyberx-glyph, cyberx-glyph, cyberx-glyph !important;
  font-size: 32px !important;
  stroke-width: 0 !important;
  fill: #aeaeae !important;
}
.cyberx-graph-spotlight .hover.device-state-icon-danger {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #aeaeae !important;
}
.cyberx-graph-spotlight .hover.device-state-icon-success {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #aeaeae !important;
}
.cyberx-graph-spotlight .hover.connection-logical {
  fill: #aeaeae !important;
  stroke-dasharray: 2, 2 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-spotlight .hover.connection-hybrid {
  fill: #aeaeae !important;
  stroke-dasharray: 15, 15 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-spotlight .hover.connection-physical {
  fill: #aeaeae !important;
  stroke-width: 2 !important;
}
.cyberx-graph-logical .highlight.device {
  cursor: pointer;
}
.cyberx-graph-logical .highlight.device-title {
  font-family: Fontin-Sans, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  fill: black !important;
}
.cyberx-graph-logical .highlight.device-primary-icon {
  font-family: cyberx-glyph, cyberx-glyph, cyberx-glyph !important;
  font-size: 32px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-logical .highlight.device-state-icon-danger {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-logical .highlight.device-state-icon-success {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-logical .highlight.connection-logical {
  fill: #266dbb !important;
  stroke-dasharray: 2, 2 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-logical .highlight.connection-hybrid {
  fill: #266dbb !important;
  stroke-dasharray: 15, 15 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-logical .highlight.connection-physical {
  fill: #266dbb !important;
  stroke-width: 2 !important;
}
.cyberx-graph-logical .normal.device {
  cursor: pointer;
}
.cyberx-graph-logical .normal.device-title {
  font-family: Fontin-Sans, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  fill: #6b6b6b !important;
}
.cyberx-graph-logical .normal.device-primary-icon {
  font-family: cyberx-glyph, cyberx-glyph, cyberx-glyph !important;
  font-size: 32px !important;
  stroke-width: 0 !important;
  fill: #6b6b6b !important;
}
.cyberx-graph-logical .normal.device-state-icon-danger {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-logical .normal.device-state-icon-success {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-logical .normal.connection-logical {
  fill: #aeaeae !important;
  stroke-dasharray: 2, 2 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-logical .normal.connection-hybrid {
  fill: #aeaeae !important;
  stroke-dasharray: 15, 15 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-logical .normal.connection-physical {
  fill: #aeaeae !important;
  stroke-width: 2 !important;
}
.cyberx-graph-logical .selected.device {
  cursor: pointer;
}
.cyberx-graph-logical .selected.device-title {
  font-family: Fontin-Sans, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  fill: #266dbb !important;
}
.cyberx-graph-logical .selected.device-primary-icon {
  font-family: cyberx-glyph, cyberx-glyph, cyberx-glyph !important;
  font-size: 32px !important;
  stroke-width: 0 !important;
  fill: #266dbb !important;
}
.cyberx-graph-logical .selected.device-state-icon-danger {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-logical .selected.device-state-icon-success {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-logical .selected.connection-logical {
  fill: #266dbb !important;
  stroke-dasharray: 2, 2 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-logical .selected.connection-hybrid {
  fill: #266dbb !important;
  stroke-dasharray: 15, 15 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-logical .selected.connection-physical {
  fill: #266dbb !important;
  stroke-width: 2 !important;
}
.cyberx-graph-logical .hover.device {
  cursor: pointer;
}
.cyberx-graph-logical .hover.device-title {
  font-family: Fontin-Sans, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  fill: #6b6b6b !important;
}
.cyberx-graph-logical .hover.device-primary-icon {
  font-family: cyberx-glyph, cyberx-glyph, cyberx-glyph !important;
  font-size: 32px !important;
  stroke-width: 0 !important;
  fill: #6b6b6b !important;
}
.cyberx-graph-logical .hover.device-state-icon-danger {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-logical .hover.device-state-icon-success {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-logical .hover.connection-logical {
  fill: #6b6b6b !important;
  stroke-dasharray: 2, 2 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-logical .hover.connection-hybrid {
  fill: #6b6b6b !important;
  stroke-dasharray: 15, 15 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-logical .hover.connection-physical {
  fill: #6b6b6b !important;
  stroke-width: 2 !important;
}
.cyberx-graph-physical .highlight.device {
  cursor: pointer;
}
.cyberx-graph-physical .highlight.device-title {
  font-family: Fontin-Sans, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  fill: black !important;
}
.cyberx-graph-physical .highlight.device-primary-icon {
  font-family: cyberx-glyph, cyberx-glyph, cyberx-glyph !important;
  font-size: 32px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-physical .highlight.device-state-icon-danger {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-physical .highlight.device-state-icon-success {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-physical .highlight.connection-logical {
  fill: #266dbb !important;
  stroke-dasharray: 2, 2 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-physical .highlight.connection-hybrid {
  fill: #266dbb !important;
  stroke-dasharray: 15, 15 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-physical .highlight.connection-physical {
  fill: #266dbb !important;
  stroke-width: 2 !important;
}
.cyberx-graph-physical .normal.device {
  cursor: pointer;
}
.cyberx-graph-physical .normal.device-title {
  font-family: Fontin-Sans, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  fill: #6b6b6b !important;
}
.cyberx-graph-physical .normal.device-primary-icon {
  font-family: cyberx-glyph, cyberx-glyph, cyberx-glyph !important;
  font-size: 32px !important;
  stroke-width: 0 !important;
  fill: #6b6b6b !important;
}
.cyberx-graph-physical .normal.device-state-icon-danger {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-physical .normal.device-state-icon-success {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-physical .normal.connection-logical {
  fill: #aeaeae !important;
  stroke-dasharray: 2, 2 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-physical .normal.connection-hybrid {
  fill: #aeaeae !important;
  stroke-dasharray: 15, 15 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-physical .normal.connection-physical {
  fill: #aeaeae !important;
  stroke-width: 2 !important;
}
.cyberx-graph-physical .selected.device {
  cursor: pointer;
}
.cyberx-graph-physical .selected.device-title {
  font-family: Fontin-Sans, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  fill: #266dbb !important;
}
.cyberx-graph-physical .selected.device-primary-icon {
  font-family: cyberx-glyph, cyberx-glyph, cyberx-glyph !important;
  font-size: 32px !important;
  stroke-width: 0 !important;
  fill: #266dbb !important;
}
.cyberx-graph-physical .selected.device-state-icon-danger {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-physical .selected.device-state-icon-success {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-physical .selected.connection-logical {
  fill: #266dbb !important;
  stroke-dasharray: 2, 2 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-physical .selected.connection-hybrid {
  fill: #266dbb !important;
  stroke-dasharray: 15, 15 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-physical .selected.connection-physical {
  fill: #266dbb !important;
  stroke-width: 2 !important;
}
.cyberx-graph-physical .hover.device {
  cursor: pointer;
}
.cyberx-graph-physical .hover.device-title {
  font-family: Fontin-Sans, Arial, sans-serif !important;
  font-size: 12px !important;
  font-weight: bold !important;
  fill: #6b6b6b !important;
}
.cyberx-graph-physical .hover.device-primary-icon {
  font-family: cyberx-glyph, cyberx-glyph, cyberx-glyph !important;
  font-size: 32px !important;
  stroke-width: 0 !important;
  fill: #6b6b6b !important;
}
.cyberx-graph-physical .hover.device-state-icon-danger {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-physical .hover.device-state-icon-success {
  font-family: "Glyphicons Halflings" !important;
  font-size: 10px !important;
  stroke-width: 0 !important;
  fill: #f0563d !important;
}
.cyberx-graph-physical .hover.connection-logical {
  fill: #6b6b6b !important;
  stroke-dasharray: 2, 2 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-physical .hover.connection-hybrid {
  fill: #6b6b6b !important;
  stroke-dasharray: 15, 15 !important;
  stroke-width: 2 !important;
}
.cyberx-graph-physical .hover.connection-physical {
  fill: #6b6b6b !important;
  stroke-width: 2 !important;
}