.navbar-fixed-top .navbar-brand { font-family: Verdana, sans-serif; font-weight: bold; font-size: 160%; } // Don't wrap text inside pre pre { overflow: auto; word-wrap: normal; white-space: pre; } .alert { word-wrap: break-word; } .btn.hover { $btn: hover(); } // Allow text in buttons to wrap .btn { white-space: normal; } .btn-secondary { border: $border-default; } .popover .popover-body { font-size: $font-size-base; } .dropdown-menu { .dropdown-item { text-decoration: none; .fa, .svg-inline--fa { @extend .fa-fw; @extend .mr-2; } } } .dropdown-item, .dropdown-header { color: $text-color; } // Input fields input[type="checkbox"], input[type="radio"] { margin-left: 0.5ex; margin-right: 0.5ex; float: left; } select { padding: 2px; font-size: $font-size-base; line-height: $line-height-base; } select, input, textarea { font: inherit; } textarea, input[type="text"], input[type="password"] { font-size: $font-size-base; line-height: $line-height-base; } // Always style buttons and submits as bootstrap buttons input[type="submit"], button { @extend .btn; @extend .btn-secondary; &.btn-primary { @extend .btn-primary; } } // Modal -- wider by default, scroll like Trello .modal-dialog { width: 690px; max-width: 900px; // BS4 sets this to 500px now, so width not respected. } // Scroll modal body. .modal-body { overflow: auto; } .modal-title { word-break: break-all; } // Tabs -- border color is hardcoded in navs.scss, change to $btnBorder here .nav-tabs { @extend .mb-2; } .tabbable { .nav-tabs { .nav-item { cursor: pointer; } } } // Don't make blockquotes very large since they're often used in the toolform // and this does not look nice to have a quoted portion of a tool's help // documentation be rendered 150% larger. div.ui-form-help { blockquote { p { font-size: inherit; font-weight: inherit; line-height: inherit; } } } // pre styling pre.code { white-space: pre-wrap; background: #1d1f21; color: white; margin-top: 0.5rem; margin-bottom: 0.5rem; } pre.code.preview { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } table.info_data_table { table-layout: fixed; word-break: break-word; } table.info_data_table td:nth-child(1) { width: 25%; } table.info_data_table th:nth-child(1) { width: 25%; } table thead.thead-dark tr th[role="columnheader"] { position: sticky; top: 0; } // increase visibility of links within alert boxes .alert-info, .alert-danger, .alert-warning, .alert-success { a { font-weight: bold; } border-color: transparent; } .alert-info { background: $state-info-bg !important; } // increase visibility of dropdown menu section headers .dropdown-header { font-size: 1rem; color: $brand-dark; padding: 0.5rem 1.5rem 0.5rem 1rem; font-weight: bold; } // progress bar .progress-bar.bg-success { background: $state-success-bg !important; } .progress-bar.bg-danger { background: $state-danger-bg !important; } .progress-bar.bg-warning { background: $state-warning-bg !important; } // add disabled variant of bootstrap vue button link .btn.btn-link.disabled { pointer-events: unset; background-color: unset; border: none; } .btn.disabled { pointer-events: unset !important; } // enable titles on disabled dropdown items .dropdown-menu { .dropdown-item.disabled { pointer-events: unset; cursor: default; // differentiate disabled items more color: lighten($text-color, 50%); } .dropdown-item.active { background-color: unset; color: $brand-primary; font-weight: 600; } } // show sticky elements behind dropdown-menus .sticky-top { z-index: 100; } // remove margin for labels with for attribute label[for] { margin-bottom: 0; }