473 lines
11 KiB
SCSS
473 lines
11 KiB
SCSS
// DEFAULTS
|
|
$shiny-disconnected-bg: #999 !default;
|
|
$shiny-table-na: #909090 !default;
|
|
$shiny-error-color: red !default;
|
|
$shiny-error-validated-color: #888 !default;
|
|
$shiny-progress-text-bg-color: #eef8ff !default; // TODO: what is this actually for?
|
|
$shiny-input-width: 300px !default;
|
|
$shiny-input-panel-bg: #f5f5f5 !default;
|
|
$shiny-input-panel-border: 1px solid #e3e3e3 !default;
|
|
$shiny-input-panel-border-radius: 2px !default;
|
|
$shiny-text-output-border-radius: null !default;
|
|
$notification-bg-color: #e8e8e8 !default;
|
|
$notification-color: #333 !default;
|
|
$notification-border: 1px solid #ccc !default;
|
|
$notification-border-radius: 3px !default;
|
|
$notification-padding: 10px 2rem 10px 10px !default;
|
|
$notification-message-bg: #d9edf7 !default;
|
|
$notification-message-color: #31708f !default;
|
|
$notification-message-border: 1px solid #bce8f1 !default;
|
|
$notification-warning-bg: #fcf8e3 !default;
|
|
$notification-warning-color: #8a6d3b !default;
|
|
$notification-warning-border: 1px solid #faebcc !default;
|
|
$notification-error-bg: #f2dede !default;
|
|
$notification-error-color: #a94442 !default;
|
|
$notification-error-border: 1px solid #ebccd1 !default;
|
|
$notification-close-color: #444 !default;
|
|
$notification-close-hover-color: #000 !default;
|
|
$notification-content-action-color: #337ab7 !default;
|
|
$datepicker-disabled-color: #aaa !default;
|
|
$shiny-file-active-shadow: inset 0 1px 1px rgba(black, .075), 0 0 8px rgba(102, 175, 233, .6) !default;
|
|
$shiny-file-over-shadow: inset 0 1px 1px rgba(black, .075), 0 0 8px rgba(76, 174, 76, .6) !default;
|
|
|
|
// DECLARATIONS
|
|
@mixin table-padding($top: null, $right: null, $bottom: null, $left: null) {
|
|
> thead, > tbody, > tfoot {
|
|
> tr {
|
|
> th, > td {
|
|
padding-top: $top;
|
|
padding-right: $right;
|
|
padding-bottom: $bottom;
|
|
padding-left: $left;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
|
|
// Both BS3 and BS4 define a border radius mixin, but just in case
|
|
// we're trying to compile this without bootstrapSass
|
|
@mixin border-radius-shim($radius) {
|
|
@if mixin-exists("border-radius") {
|
|
@include border-radius($radius);
|
|
} @else {
|
|
border-radius: $radius;
|
|
}
|
|
}
|
|
|
|
|
|
// RULES
|
|
|
|
/* This is necessary so that an empty verbatimTextOutput slot
|
|
is the same height as a non-empty one (only important when
|
|
* placeholder = TRUE) */
|
|
pre.shiny-text-output:empty::before {
|
|
content: " ";
|
|
}
|
|
|
|
pre.shiny-text-output.noplaceholder:empty {
|
|
margin: 0;
|
|
padding: 0;
|
|
border-width: 0;
|
|
height: 0;
|
|
}
|
|
|
|
/* Some browsers (like Safari) will wrap text in <pre> tags with Bootstrap's
|
|
CSS. This changes the behavior to not wrap.
|
|
*/
|
|
pre.shiny-text-output {
|
|
word-wrap: normal;
|
|
@include border-radius-shim($shiny-text-output-border-radius);
|
|
}
|
|
|
|
.shiny-image-output, .shiny-plot-output {
|
|
img.shiny-scalable {
|
|
max-width: 100%;
|
|
max-height: 100%;
|
|
}
|
|
}
|
|
|
|
#shiny-disconnected-overlay {
|
|
position: fixed;
|
|
inset: 0;
|
|
background-color: $shiny-disconnected-bg;
|
|
opacity: 0.5;
|
|
overflow: hidden;
|
|
z-index: 99998;
|
|
pointer-events: none;
|
|
}
|
|
|
|
html.autoreload-enabled #shiny-disconnected-overlay.reloading {
|
|
opacity: 0;
|
|
animation: fadeIn 250ms forwards;
|
|
animation-delay: 1s;
|
|
}
|
|
@keyframes fadeIn {
|
|
to {
|
|
opacity: 0.1;
|
|
}
|
|
}
|
|
|
|
.table.shiny-table {
|
|
@include table-padding($left: 12px, $right: 12px);
|
|
}
|
|
|
|
.shiny-table {
|
|
&.spacing {
|
|
&-xs {
|
|
@include table-padding($top: 3px, $bottom: 3px);
|
|
}
|
|
&-s {
|
|
@include table-padding($top: 5px, $bottom: 5px);
|
|
}
|
|
&-m {
|
|
@include table-padding($top: 8px, $bottom: 8px);
|
|
}
|
|
&-l {
|
|
@include table-padding($top: 10px, $bottom: 10px);
|
|
}
|
|
}
|
|
.NA {
|
|
color: $shiny-table-na;
|
|
}
|
|
}
|
|
|
|
.shiny-output-error {
|
|
color: $shiny-error-color;
|
|
white-space: pre-wrap;
|
|
&:before {
|
|
content: 'Error: ';
|
|
font-weight: bold;
|
|
}
|
|
&-validation {
|
|
color: $shiny-error-validated-color;
|
|
}
|
|
&-validation:before {
|
|
content: '';
|
|
font-weight: inherit;
|
|
}
|
|
}
|
|
|
|
|
|
/* Work around MS Edge transition bug (issue #1637) */
|
|
@supports (-ms-ime-align:auto) {
|
|
.shiny-bound-output {
|
|
transition: 0;
|
|
}
|
|
}
|
|
|
|
.recalculating {
|
|
--_shiny-fade-opacity: var(--shiny-fade-opacity, 0.3);
|
|
opacity: var(--_shiny-fade-opacity);
|
|
transition: opacity 250ms ease 500ms;
|
|
}
|
|
|
|
.slider-animate-container {
|
|
text-align: right;
|
|
margin-top: -9px;
|
|
}
|
|
.slider-animate-button {
|
|
/* Ensure controls above slider line touch target */
|
|
position: relative;
|
|
z-index: 1;
|
|
opacity: 0.5;
|
|
.pause {
|
|
display: none;
|
|
}
|
|
&.playing .pause {
|
|
display: inline;
|
|
}
|
|
.play {
|
|
display: inline;
|
|
}
|
|
&.playing .play {
|
|
display: none;
|
|
}
|
|
}
|
|
|
|
.progress {
|
|
&.shiny-file-input-progress {
|
|
visibility: hidden;
|
|
.progress-bar.bar-danger {
|
|
transition: none;
|
|
}
|
|
}
|
|
}
|
|
|
|
// fileInput()'s button should never have a top-right or bottom-right border-radius
|
|
.btn-file {
|
|
border-top-right-radius: 0 !important;
|
|
border-bottom-right-radius: 0 !important;
|
|
}
|
|
|
|
/* Make sure the filename doesn't extend past the bounds of the container */
|
|
.shiny-input-container input[type=file] {
|
|
overflow: hidden;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Old-style progress */
|
|
.shiny-progress-container {
|
|
position: fixed;
|
|
top: 0px;
|
|
width: 100%;
|
|
/* Make sure it draws above all Bootstrap components */
|
|
z-index: 2000;
|
|
}
|
|
|
|
// TODO: should respect more Bootstrap Sass vars?
|
|
.shiny-progress {
|
|
.progress {
|
|
position: absolute;
|
|
width: 100%;
|
|
top: 0px;
|
|
height: 3px;
|
|
margin: 0px;
|
|
}
|
|
.bar {
|
|
opacity: 0.6;
|
|
transition-duration: 250ms;
|
|
}
|
|
.progress-text {
|
|
position: absolute;
|
|
right: 10px;
|
|
width: 240px;
|
|
background-color: $shiny-progress-text-bg-color;
|
|
margin: 0px;
|
|
padding: 2px 3px;
|
|
opacity: 0.85;
|
|
.progress-message {
|
|
padding: 0px 3px;
|
|
font-weight: bold;
|
|
font-size: 90%;
|
|
}
|
|
.progress-detail {
|
|
padding: 0px 3px;
|
|
font-size: 80%;
|
|
}
|
|
}
|
|
}
|
|
|
|
/* New-style progress (uses notifications API) */
|
|
.shiny-progress-notification {
|
|
.progress {
|
|
margin-bottom: 5px;
|
|
height: 10px;
|
|
}
|
|
.progress-text {
|
|
.progress-message {
|
|
font-weight: bold;
|
|
font-size: 90%;
|
|
}
|
|
.progress-detail {
|
|
font-size: 80%;
|
|
}
|
|
}
|
|
}
|
|
|
|
.shiny-label-null {
|
|
display: none;
|
|
}
|
|
|
|
.crosshair {
|
|
cursor: crosshair;
|
|
}
|
|
|
|
.grabbable {
|
|
cursor: grab;
|
|
cursor: -moz-grab;
|
|
cursor: -webkit-grab;
|
|
}
|
|
|
|
.grabbing {
|
|
cursor: grabbing;
|
|
cursor: -moz-grabbing;
|
|
cursor: -webkit-grabbing;
|
|
}
|
|
|
|
.ns-resize {
|
|
cursor: ns-resize;
|
|
}
|
|
|
|
.ew-resize {
|
|
cursor: ew-resize;
|
|
}
|
|
|
|
.nesw-resize {
|
|
cursor: nesw-resize;
|
|
}
|
|
|
|
.nwse-resize {
|
|
cursor: nwse-resize;
|
|
}
|
|
|
|
|
|
/* Workaround for Qt, which doesn't use font fallbacks */
|
|
.qt pre, .qt code {
|
|
font-family: monospace !important;
|
|
}
|
|
|
|
/* Workaround for Qt 5, which draws its own margins around checks and radios;
|
|
overrides the top margin on these elements set by Bootstrap */
|
|
.qt5 .radio input[type="radio"],
|
|
.qt5 .checkbox input[type="checkbox"] {
|
|
margin-top: 0px;
|
|
}
|
|
|
|
/* Workaround for radio buttons and checkboxes not showing on Qt on Mac.
|
|
This occurs in the RStudio IDE on macOS 11.5.
|
|
https://github.com/rstudio/shiny/issues/3484
|
|
*/
|
|
.qtmac input[type="radio"],
|
|
.qtmac input[type="checkbox"] {
|
|
zoom: 1.0000001;
|
|
}
|
|
|
|
.shiny-frame {
|
|
border: none;
|
|
}
|
|
|
|
.shiny-flow-layout {
|
|
> div {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
padding-right: 12px;
|
|
width: 220px;
|
|
}
|
|
}
|
|
.shiny-split-layout {
|
|
width: 100%;
|
|
white-space: nowrap;
|
|
> div {
|
|
display: inline-block;
|
|
vertical-align: top;
|
|
box-sizing: border-box;
|
|
overflow: auto;
|
|
}
|
|
}
|
|
|
|
.shiny-input-panel {
|
|
padding: 6px 8px;
|
|
margin-top: 6px;
|
|
margin-bottom: 6px;
|
|
background-color: $shiny-input-panel-bg;
|
|
border: $shiny-input-panel-border;
|
|
@include border-radius-shim($shiny-input-panel-border-radius);
|
|
}
|
|
|
|
/* For checkbox groups and radio buttons, bring the options closer to label,
|
|
if label is present. */
|
|
.shiny-input-checkboxgroup label ~ .shiny-options-group,
|
|
.shiny-input-radiogroup label ~ .shiny-options-group {
|
|
margin-top: -10px;
|
|
}
|
|
|
|
/* Checkbox groups and radios that are inline need less negative margin to
|
|
separate from label. */
|
|
.shiny-input-checkboxgroup.shiny-input-container-inline label ~ .shiny-options-group,
|
|
.shiny-input-radiogroup.shiny-input-container-inline label ~ .shiny-options-group {
|
|
margin-top: -1px;
|
|
}
|
|
|
|
/* Limit the width of inputs in the general case. */
|
|
.shiny-input-container:not(.shiny-input-container-inline) {
|
|
width: $shiny-input-width;
|
|
max-width: 100%;
|
|
}
|
|
|
|
/* Don't limit the width of inputs in a sidebar. */
|
|
.well .shiny-input-container {
|
|
width: auto;
|
|
}
|
|
|
|
/* Width of non-selectize select inputs */
|
|
.shiny-input-container > div > select:not(.selectized) {
|
|
width: 100%;
|
|
}
|
|
|
|
|
|
#shiny-notification-panel {
|
|
position: fixed;
|
|
bottom: 0;
|
|
right: 0;
|
|
background-color: rgba(0,0,0,0);
|
|
padding: 2px;
|
|
width: 300px;
|
|
max-width: 100%;
|
|
z-index: 99999;
|
|
}
|
|
|
|
.shiny-notification {
|
|
position: relative;
|
|
background-color: $notification-bg-color;
|
|
color: $notification-color;
|
|
border: $notification-border;
|
|
@include border-radius-shim($notification-border-radius);
|
|
opacity: 0.85;
|
|
padding: $notification-padding;
|
|
margin: 5px;
|
|
&-message {
|
|
color: $notification-message-color;
|
|
background-color: $notification-message-bg;
|
|
border: $notification-message-border;
|
|
}
|
|
&-warning {
|
|
color: $notification-warning-color;
|
|
background-color: $notification-warning-bg;
|
|
border: $notification-warning-border;
|
|
}
|
|
&-error {
|
|
color: $notification-error-color;
|
|
background-color: $notification-error-bg;
|
|
border: $notification-error-border;
|
|
}
|
|
&-close {
|
|
position: absolute;
|
|
width: 2rem;
|
|
height: 2rem;
|
|
top: 0;
|
|
right: 0;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
font-weight: normal;
|
|
font-size: 1.125em;
|
|
padding: 0.25rem;
|
|
color: $notification-close-color;
|
|
cursor: pointer;
|
|
}
|
|
&-close:hover {
|
|
color: $notification-close-hover-color;
|
|
font-weight: bold;
|
|
}
|
|
&-content-action a {
|
|
color: $notification-content-action-color;
|
|
text-decoration: underline;
|
|
font-weight: bold;
|
|
}
|
|
}
|
|
|
|
.shiny-file-input {
|
|
&-active {
|
|
box-shadow: $shiny-file-active-shadow;
|
|
}
|
|
&-over {
|
|
box-shadow: $shiny-file-over-shadow;
|
|
}
|
|
}
|
|
|
|
/* Overrides bootstrap-datepicker3.css styling for invalid date ranges.
|
|
See https://github.com/rstudio/shiny/issues/2042 for details. */
|
|
.datepicker table tbody tr td.disabled,
|
|
.datepicker table tbody tr td.disabled:hover,
|
|
.datepicker table tbody tr td span.disabled,
|
|
.datepicker table tbody tr td span.disabled:hover {
|
|
color: $datepicker-disabled-color;
|
|
cursor: not-allowed;
|
|
}
|
|
|
|
/* Hidden tabPanels */
|
|
.nav-hidden {
|
|
/* override anything bootstrap sets for `.nav` */
|
|
display: none !important;
|
|
}
|