*/
.dropdown-item.unchecked:before,
.dropdown-item.checked:before {
font-family: "Font Awesome 5 Pro";
font-weight: 400;
text-align: center;
width: 20px;
display: inline-block;
margin-right: 2px;
content: "";
}
.dropdown-item.checked:before {
content: "\f00c";
}
.dropdown-item-danger, .dropdown-item-danger > a {
transition: background-color 0.5s;
}
.dropdown-item-danger:hover, .dropdown-item-danger:hover > a {
background-color: var(--danger) !important;
}
.dropdown-item-danger:hover, .dropdown-item-danger:hover > a {
color: var(--white) !important;
}
.dropdown-menu li > a > i,
.dropdown-menu .dropdown-item > i {
margin-right: 5px;
/* Same as .fa-fw */
text-align: center;
width: 1.25em;
}
/* Display arrow in correct location when showing dropdown to left */
.dropdown-item.dropdown-toggle.dropleft::after {
float: left;
margin: 0 8px 0 2px;
/* Swap stupid Bootstrap border chevron hack for Fontawsome icon */
border: none;
font-family: "Font Awesome 5 Pro";
font-weight: 900;
content: "\f053";
}
/* Style which forces an icon to display as a block but doesn't render anything */
.fa-invisible {
width: 37px;
height: 30px;
}
/* Fixed width icons within buttons */
.btn.fa-fw {
display: inline-block;
text-align: center;
vertical-align: middle;
width: 2.4em;
height: 2.4em;
padding: 7px 5px 5px;
}
/* Better spacing for icons */
.list-group .list-group-item > i {
margin-right: 5px;
}
.font-sm {
font-size: 10px;
}
.font-md {
font-size: 13px;
}
.font-lg {
font-size: 16px;
}
.font-xl {
font-size: 18px;
}
/* Input group of button + input or input + button shouldn't have two borders {{{ */
.input-group > .input-group-addon + input.form-control {
border-left: none;
}
.input-group > input.form-control + .input-group-addon {
border-left: none;
}
/* }}} */
input.input-outline-primary {
border: 1px solid var(--primary);
}
input.input-outline-primary:focus {
border: 2px solid var(--primary);
}
/* Disable all interaction with read-only inputs */
input[readonly].form-control {
pointer-events: none;
cursor: default;
background-color: #f2f2f2;
}
/* Add hover effect */
.list-group .list-group-item:hover {
background-color: #bbdefb;
}
/* Foreground should be white even when not a link */
.list-group .list-group-item.active {
color: #FFF;
}
/* More pronounced rounding */
.list-group .list-group-item:first-child {
border-top-left-radius: 0.5rem;
border-top-right-radius: 0.5rem;
}
.list-group .list-group-item:last-child {
border-bottom-left-radius: 0.5rem;
border-bottom-right-radius: 0.5rem;
}
/* Remove rounding when a card-body item */
.card > .list-group .list-group-item {
border-radius: 0;
}
/* Add a small shadow behind modals to make them stand out */
.modal .modal-content {
box-shadow: 5px 5px 15px 0px rgba(50, 50, 50, 0.75);
}
.modal .modal-dialog.modal-md {
max-width: 50%;
}
@media (min-width: 992px) {
.modal-md {
max-width: 800px;
}
}
.no-click {
cursor: default;
}
.opacity-0 {
opacity: 0;
}
.opacity-10 {
opacity: 0.1;
}
.opacity-20 {
opacity: 0.2;
}
.opacity-30 {
opacity: 0.3;
}
.opacity-40 {
opacity: 0.4;
}
.opacity-50 {
opacity: 0.5;
}
.opacity-60 {
opacity: 0.6;
}
.opacity-70 {
opacity: 0.7;
}
.opacity-80 {
opacity: 0.8;
}
.opacity-90 {
opacity: 0.9;
}
.opacity-100 {
opacity: 1;
}
.opacity-hover-100:hover {
opacity: 1;
}
/* Round the corners of pre elements */
pre {
border: 1px solid #555;
border-radius: 5px;
padding: 10px;
font-family: "Ubuntu Mono", SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
}
/* Add a bit of padding when a pre tag appears in an alert */
.alert > pre {
margin-top: 15px;
}
/* Add a smaller varient of the pre tag */
pre.pre-sm {
tab-size: 2;
font-size: 9px;
}
/**
* Force all links with td elements to display as block so the entire cell is clickable
*/
table.table td > a:not(.btn) {
display: block;
}
/**
* Force links within a table to display using dark font
*/
table.table td a, table.table th a {
color: var(--dark);
}
/* Disable top border on first child items in thead */
table.table thead > tr:first-child > th {
border-top: none;
}
table.table td > a {
color: #333;
}
/* .table-fixed - Evenly space all table columns */
.table-fixed {
table-layout: fixed;
}
/**
* Display a simple icon column in a table
* @example
*
*
*
*/
td.td-status {
width: 16px;
text-align: center;
}
.text-no-wrap {
whitespace: nowrap;
}
.text-strike {
text-decoration: line-through;
}
/**
* Hide a child element unless its parent is hovered
*
* @example Show a list of verbs within a table row only if the row has hover
*
*
Name
*
Verbs!
*
*
* @example Show a button only if the parent div has a hover state (remove from DOM)
*
s in .tree
// Remembering that .tree itself is also a
.
*/
.tree,
.tree ul {
list-style: none;
padding-left: 0;
}
.tree li {
/*
// Using flex element so the inner elements: .tree-label and (if there
// is one)
will render in a row - side by side flex items.
*/
display: flex;
/*
// Creating a new stacking context, applied transform doesn't
// actually 'change' anything on
s.
*/
transform: scale(1);
}
.tree li + li {
margin-top: var(--tree-row-spacing);
}
.tree-label {
border: 1px solid gray;
height: var(--tree-label-height);
line-height: var(--tree-label-height);
/* Make space for the connecting lines */
margin-left: var(--tree-line-width);
/* Prevent tree-label (now a flex item) from getting smaller */
min-width: 300px;
padding: 0 9px;
position: relative;
/* Definately room to improve sizing - responsiveness */
width: 300px;
}
.tree-label .btn {
display: none;
}
.tree-label:hover .btn {
display: block;
}
/*
// Horizontal connecting lines.
*/
.tree-label::after {
border-top: var(--tree-line-thickness) solid;
/* Positioned relative to the .tree-label */
position: absolute;
right: 100%;
top: calc(var(--tree-label-height) / 2);
/* Just long enough initially to connect the vertical line to the (right) label */
width: calc(var(--tree-line-width) / 2 + var(--tree-line-thickness));
}
/* Widen very first connector to span label to label */
li:first-of-type > .tree-label::after {
width: calc(var(--tree-line-width) + var(--tree-line-thickness));
}
/*
// Vertical connecting lines.
// Drawing line downwards to connect with item below
*/
.tree-label::before {
border-right: var(--tree-line-thickness) solid;
left: calc(var(--tree-line-width) / 2);
/* Positioned relative to the