Skip to content

Instantly share code, notes, and snippets.

@leonawicz
Created June 29, 2017 15:39
Show Gist options
  • Save leonawicz/24ed656f63d4a889ad7043bc5436a641 to your computer and use it in GitHub Desktop.
Save leonawicz/24ed656f63d4a889ad7043bc5436a641 to your computer and use it in GitHub Desktop.
Common styling for Shiny apps
.img-local {
}
.small-box .img-local {
position: absolute;
top: auto;
bottom: 5px;
right: 5px;
z-index: 0;
font-size: 70px;
color: rgba(0, 0, 0, 0.15);
}
#plot-container {
position: relative;
}
#loading-spinner {
position: absolute;
left: 50%;
top: 50%;
z-index: 0;
margin-top: -33px; /* half of the spinner's height */
margin-left: -33px; /* half of the spinner's width */
}
#Map.recalculating {
z-index: -2;
}
#toast-container.toast-top-center > div {
width: 50%;
height: 200px;
}
.toast-top-center {
top: 400px;
margin: 0 auto;
left: 115px;
}
.btn-go {
color: #ffffff;
background-color: #3C8DBC;
border-color: #3C8DBC;
}
.btn-go:hover,
.btn-go:focus,
.btn-go:active,
.btn-go.active,
.open .dropdown-toggle.btn-go {
color: #ffffff;
background-color: #357CA5;
border-color: #3C8DBC;
}
.btn-go:active,
.btn-go.active,
.open .dropdown-toggle.btn-go {
background-image: none;
}
.btn-go.disabled,
.btn-go[disabled],
fieldset[disabled] .btn-go,
.btn-go.disabled:hover,
.btn-go[disabled]:hover,
fieldset[disabled] .btn-go:hover,
.btn-go.disabled:focus,
.btn-go[disabled]:focus,
fieldset[disabled] .btn-go:focus,
.btn-go.disabled:active,
.btn-go[disabled]:active,
fieldset[disabled] .btn-go:active,
.btn-go.disabled.active,
.btn-go[disabled].active,
fieldset[disabled] .btn-go.active {
background-color: #3C8DBC;
border-color: #3C8DBC;
}
.btn-go .badge {
color: #3C8DBC;
background-color: #ffffff;
}
/* image links with text on hover */
.img_app {
border-radius: 5px;
border-style: solid;
border-width: 3px;
border-color: #3C8DBC;
}
.img_link_wrap {
position: relative;
height: 100%;
width: 100%;
}
.img_hover_layer {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
background: rgba(60, 141, 188, 0.6);
color: #fff;
visibility: hidden;
opacity: 0;
display: flex;
align-items: center;
justify-content: center;
transition: opacity .5s, visibility .5s;
}
.img_link_wrap:hover .img_hover_layer {
visibility: visible;
opacity: 1;
}
.img_hover {
transition: .5s;
transform: translateY(1em);
}
.img_link_wrap:hover .img_hover {
transform: translateY(0);
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment