Skip to content

Instantly share code, notes, and snippets.

@iamnewton
Created January 24, 2020 00:36
Show Gist options
  • Save iamnewton/536afce1a7a37b3b29537e8eba5c9862 to your computer and use it in GitHub Desktop.
Save iamnewton/536afce1a7a37b3b29537e8eba5c9862 to your computer and use it in GitHub Desktop.
Some SCSS helpers
/// Rounded corners on images
/// @author Newton Koumantzelis
/// @since 1.0.0 - The Sith
/// @example html
/// <img src="" class="img-broken" alt="Generic image">
.img-broken {
position: relative;
min-height: 3rem;
&::before,
&::after {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
}
&::before {
border: map-deep-get($theme, border, width, md) dotted map-deep-get($theme, border, color, light);
border-radius: map-deep-get($theme, border, radius, md);
background-color: map-deep-get($theme, colors, gray, dark);
content: " ";
}
&::after {
color: map-deep-get($theme, general, colors, muted);
font-style: normal;
line-height: 3rem; // stylelint-disable-line sh-waqar/declaration-use-variable
text-align: center;
content: "Broken image of '" attr(alt) "'";
}
}
/// Rounded corners on images
/// @author Newton Koumantzelis
/// @since 1.0.0 - The Sith
/// @example html
/// <img src="" class="img-placeholder" alt="Generic image">
.img-placeholder {
/* stylelint-disable scss/at-function-named-arguments */
$bg-image: str-replace("data:image/svg+xml;charset=utf8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='#{map-deep-get($theme, colors, gray, lighter)}' viewBox='0 0 20 20'%3E%3Cpath d='M18 3H2a1 1 0 0 0-1 1v12a1 1 0 0 0 1 1h16a1 1 0 0 0 1-1V4a1 1 0 0 0-1-1zm-4.75 3.5a1.25 1.25 0 1 1 0 2.5 1.25 1.25 0 0 1 0-2.5zM4 14l3.314-7.62 3.77 6.103 3.23-1.605L16 14H4z'/%3E%3C/svg%3E", "#", "%23");
/* stylelint-enable */
position: relative;
min-height: 4rem;
&::before {
display: block;
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background-color: map-deep-get($theme, general, bg, body);
background-image: url($bg-image);
background-repeat: no-repeat;
background-size: 100% 100%;
content: " ";
}
}
/// Image thumbnails
/// @author Mark Otto
/// @since 0.1.0 - The O.G.
/// @example html
/// <img src="https://unsplash.it/200/200?random" class="img-thumbnail" alt="Generic image">
.img-thumbnail {
display: inline-block;
max-width: 100%;
height: auto;
border: map-deep-get($theme, border, width, md) solid map-deep-get($theme, border, color, light);
@include border-radius(map-deep-get($theme, border, radius, md));
padding: map-deep-get($theme, spacers, qtr);
background-color: transparent;
line-height: map-deep-get($theme, typography, "line-height", md);
}
/// Rounded corners on images
/// @author Mark Otto
/// @since 0.1.0 - The O.G.
/// @example html
/// <img src="https://unsplash.it/150/150?random" class="img-rounded" alt="Generic image">
.img-rounded {
@include border-radius(map-deep-get($theme, border, radius, lg), true);
}
/// Perfect circle on images
/// @author Newton Koumantzelis
/// @since 2.0.0 - The Jedi
/// @example html
/// <img src="https://unsplash.it/100/100?random" class="img-circle" alt="Generic image">
.img-circle {
@include border-radius(50%, true);
}
/// Image cover
/// @since 0.1.0 - The O.G.
/// @example scss - usage
/// .img-cover {
/// @include img-cover();
/// }
.img-cover {
height: auto;
@supports (object-fit: cover) {
width: 100%;
height: 100%;
object-fit: cover;
}
}
/// Image contain
/// @since 0.1.0 - The O.G.
/// @example scss - usage
/// .img-contain {
/// @include img-contain();
/// }
.img-contain {
height: auto;
@supports (object-fit: contain) {
width: 100%;
height: 100%;
object-fit: contain;
}
}
/// Rules are directly applied to `<iframe>`, <`embed>`, `<video>`, and `<object>` elements; optionally use an explicit descendant class `.embed-responsive-item` when you want to match the styling for other attributes.
///
/// **Pro-Tip!** You don’t need to include `frameborder="0"` in your `<iframe>`s as we override that for you.
/// @link http://nicolasgallagher.com/ - Nicolas Gallagher
/// @link https://suitcss.github.io/ - SUIT CSS
/// @since 0.1.0 - The O.G.
/// @example html
/// <div class="embed-responsive embed-responsive-16by9">
/// <iframe class="embed-responsive-item" src="https://www.youtube.com/embed/zpOULjyy-n8?rel=0" allowfullscreen></iframe>
/// </div>
@mixin embed() {
.embed-responsive {
display: block;
position: relative;
height: 0;
overflow: hidden;
padding: 0;
.embed-responsive-item,
iframe,
embed,
object,
video {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 100%;
height: 100%;
border: 0;
}
}
/// Aspect ratios can be customized with modifier classes.
/// @name .embed-responsive-21by9, .embed-responsive-16by9, .embed-responsive-4by3, .embed-responsive-1by1
/// @since 0.1.0 - The O.G.
.embed-responsive-21by9 {
padding-bottom: percentage(9 / 21) !important;
}
.embed-responsive-16by9 {
padding-bottom: percentage(9 / 16) !important;
}
.embed-responsive-4by3 {
padding-bottom: percentage(3 / 4) !important;
}
.embed-responsive-1by1 {
padding-bottom: percentage(1 / 1) !important;
}
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment