_assets/stylesheets/_redbat/_objects.scss
// -------------------------------
// OBJECTS
// -------------------------------
.container {
@extend %clearfix;
margin: 0 auto;
position: relative;
width: 100%;
@media #{$medium-up} {
max-width: 768px;
}
@media #{$large-up} {
max-width: 1000px;
}
}
svg {
width: 100%;
}
iframe {
margin: 1rem 0;
width: 100%;
}
// Responsive iFrame -------------
.iframe-container {
height: 0;
margin-bottom: 3rem;
padding-bottom: 56.25%;
padding-top: 30px;
position: relative;
}
.iframe-container iframe,
.iframe-container object,
.iframe-container embed {
height: 100%;
left: 0;
position: absolute;
top: 0;
width: 100%;
}
// Card --------------------------
// Basically a reusable panel that
// sits behind anything.
// -------------------------------
.card {
padding: 2rem 1.5rem;
@media #{$medium-up} {
border-radius: $global-radius;
}
h2 {
margin-top: 0;
width: 100%;
}
}
.card--large {
margin: 2rem auto;
@media #{$large-up} {
width: 85%;
}
}
.card--light {
background-color: $border-color;
color: darken($border-color, 40%);
h2 {
color: darken($border-color, 40%);
}
}
.card--dark {
background-color: $slate;
color: lighten($slate, 40%);
h2 {
color: white;
}
}
.card--jazz {
background-color: $jazz-color;
color: lighten($jazz-color, 20%);
h2 {
color: white;
}
.button--primary {
background: $brand-color;
&:focus,
&:hover {
background: lighten($brand-color, 10%);
}
}
}
// Post List ---------------------
// Componenet to show a list of
// posts wherever.
// -------------------------------
.post-list {
list-style: none;
li {
margin-bottom: .3rem;
margin-left: 0;
&:last-child {
padding: 0;
}
}
}
.post-list--mini {
li {
font-size: .9rem;
}
}
.post-list--inline {
display: flex;
flex-direction: column;
@media #{$medium-up} {
flex-direction: row;
li {
padding-right: 1rem;
&:last-child {
padding-right: 0;
}
}
}
}
.post-list--grid-thirds {
li {
flex: 0 1 33.333333333%;
}
}
// Popover -----------------------
// Component that looks like a
// tooltip, but has more info in
// it.
// -------------------------------
.popover {
background-color: white;
border: 1px solid rgba(black, .13);
border-radius: 3px;
box-shadow: 0 0 3px rgba(black, .1);
opacity: 0;
padding: .8rem 1.2rem;
position: absolute;
right: 0;
top: 65px;
transform: scale(0);
transform-origin: top;
transition: transform .15s ease, opacity .15s ease;
z-index: 100;
.header-search__title,
h3 {
width: 100%;
}
&.is-open {
opacity: 1;
transform: scale(1);
}
}
.popover--medium {
width: 300px;
}
.popover--search {
min-height: 180px;
}
.popover--top {
&:before {
background: white;
border-left: 1px solid rgba(black, .13);
border-top: 1px solid rgba(black, .13);
content: '';
display: block;
height: 1.3em;
position: absolute;
right: 40px;
top: -13px;
transform: rotate(45deg);
width: 1.3em;
}
}