backend/app/assets/stylesheets/comable/admin/_flow.scss
// Variables
$comable-flow-border: #eee;
$comable-badge-size: 50px;
$comable-badge-default-color: $gray;
$comable-badge-default-bg: #fff;
$comable-badge-default-border: $btn-default-border;
$comable-badge-disable-color: #fff;
$comable-badge-disable-bg: #ddd;
$comable-badge-disable-border: $btn-default-border;
$comable-badge-primary-color: $btn-primary-color;
$comable-badge-primary-bg: $btn-primary-bg;
$comable-badge-primary-border: $btn-primary-border;
$comable-badge-success-color: $btn-success-color;
$comable-badge-success-bg: $btn-success-bg;
$comable-badge-success-border: $btn-success-border;
$comable-badge-warning-color: $btn-warning-color;
$comable-badge-warning-bg: $btn-warning-bg;
$comable-badge-warning-border: $btn-warning-border;
$comable-badge-danger-color: $btn-danger-color;
$comable-badge-danger-bg: $btn-danger-bg;
$comable-badge-danger-border: $btn-danger-border;
// Mixins
@mixin comable-badge($color, $background-color, $border-color) {
color: $color;
background-color: $background-color;
border-color: $border-color;
&:hover, &:focus {
color: $color;
}
@at-root a#{&}:hover, a#{&}:focus {
background-color: darken($background-color, 10%);
border-color: darken($border-color, 10%);
}
}
// Rules
.comable-flow {
list-style: none;
margin-bottom: 20px;
padding: 20px 0;
position: relative;
&:before {
content: ' ';
margin-top: -1.5px;
height: 3px;
background-color: $comable-flow-border;
position: absolute;
top: 50%;
left: 0;
right: 0;
}
li {
@include inline-block;
margin-right: $comable-badge-size + 50px;
position: relative;
}
}
.comable-badge {
@include border-radius(50%);
margin-top: -($comable-badge-size / 2);
height: $comable-badge-size;
width: $comable-badge-size;
line-height: $comable-badge-size;
font-size: 1.4em;
text-align: center;
position: absolute;
left: 16px;
top: 50%;
z-index: 100;
border: 1px solid transparent;
&[disabled] {
@include opacity(0.65);
@include box-shadow(none);
cursor: not-allowed;
pointer-events: none;
}
}
.comable-badge-default {
@include comable-badge(
$color: $comable-badge-default-color,
$background-color: $comable-badge-default-bg,
$border-color: $comable-badge-default-border
);
}
.comable-badge-disable {
@include comable-badge(
$color: $comable-badge-disable-color,
$background-color: $comable-badge-disable-bg,
$border-color: $comable-badge-default-border
);
}
.comable-badge-primary {
@include comable-badge(
$color: $comable-badge-primary-color,
$background-color: $comable-badge-primary-bg,
$border-color: $comable-badge-primary-border
);
}
.comable-badge-success {
@include comable-badge(
$color: $comable-badge-success-color,
$background-color: $comable-badge-success-bg,
$border-color: $comable-badge-success-border
);
}
.comable-badge-danger {
@include comable-badge(
$color: $comable-badge-danger-color,
$background-color: $comable-badge-danger-bg,
$border-color: $comable-badge-danger-border
);
}
.comable-badge-warning {
@include comable-badge(
$color: $comable-badge-warning-color,
$background-color: $comable-badge-warning-bg,
$border-color: $comable-badge-warning-border
);
}
.comable-flow-label {
display: table;
height: $comable-badge-size + 5px;
margin: 0 0 0 auto;
text-align: right;
}
.comable-flow-label-container {
display: table-cell;
vertical-align: middle;
*:last-child {
margin-bottom: 0;
padding-bottom: 0;
}
}