github/shiny
1
1
Fork 0
mirror of https://github.com/rstudio/shiny.git synced 2026-01-10 07:28:01 -05:00
Code Issues Packages Projects Releases Wiki Activity

feat: Improve notification styles (#3913)

Browse Source 
Co-authored-by: gadenbuie <gadenbuie@users.noreply.github.com>
Co-authored-by: Carson <cpsievert1@gmail.com>
Co-authored-by: cpsievert <cpsievert@users.noreply.github.com>
This commit is contained in:
Garrick Aden-Buie
2023-10-20 11:55:23 -04:00
committed by GitHub
parent ce78d0dcf1
commit c4ef42337b
3 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
NEWS.md
View File

@@ -4,9 +4,9 @@
* Updated `selectizeInput()`'s selectize.js dependency from v0.12.4 to v0.15.2. In addition to many bug fixes and improvements, this update also adds several new [plugin options](https://selectize.dev/docs/demos/plugins). (#3875)
* Shiny's CSS styling for things like `showNotification()`, `withProgress()`, `inputPanel()`, etc., now looks better with `{bslib}`'s upcoming CSS-only dark mode. (#3882)
* Shiny's CSS styling (for things like `showNotification()`, `withProgress()`, `inputPanel()`, etc.), has been updated with `{bslib}`'s upcoming CSS-only dark mode feature in mind. (#3882, #3914)
* Shiny's Sass variables are now set specifically for major versions of Bootstrap. Bootstrap versions 3 and 4 are unaffected by this change, and the Bootstrap 5 variables now target Bootstrap 5.3 to take advantage of Bootstrap's dark mode and client-side theming via CSS variables. (#3914)
* Default styles for `showNotification()` were tweaked slightly to improve accessibility, sizing, and padding. (#3913)
## Bug fixes

2
inst/www/shared/shiny.min.css vendored
View File

File diff suppressed because one or more lines are too long

27
inst/www/shared/shiny_scss/shiny.scss
View File

@@ -13,7 +13,7 @@ $notification-bg-color: #e8e8e8 !default;
$notification-color: #333 !default;
$notification-border: 1px solid #ccc !default;
$notification-border-radius: 3px !default;
$notification-padding: 10px 8px 10px 10px !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;
@@ -390,18 +390,19 @@ html.autoreload-enabled #shiny-disconnected-overlay.reloading {
right: 0;
background-color: rgba(0,0,0,0);
padding: 2px;
width: 250px;
width: 300px;
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: 2px;
margin: 5px;
&-message {
color: $notification-message-color;
background-color: $notification-message-bg;
@@ -418,17 +419,23 @@ html.autoreload-enabled #shiny-disconnected-overlay.reloading {
border: $notification-error-border;
}
&-close {
float: right;
font-weight: bold;
font-size: 18px;
bottom: 9px;
position: relative;
padding-left: 4px;
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: default;
cursor: pointer;
}
&-close:hover {
color: $notification-close-hover-color;
font-weight: bold;
}
&-content-action a {
color: $notification-content-action-color;