68 lines
1.3 KiB
SCSS
68 lines
1.3 KiB
SCSS
// Foundation for Sites by ZURB
|
|
// foundation.zurb.com
|
|
// Licensed under MIT Open Source
|
|
|
|
////
|
|
/// @group thumbnail
|
|
////
|
|
|
|
/// Border around thumbnail images.
|
|
/// @type Border
|
|
$thumbnail-border: 4px solid $white !default;
|
|
|
|
/// Bottom margin for thumbnail images.
|
|
/// @type Length
|
|
$thumbnail-margin-bottom: $global-margin !default;
|
|
|
|
/// Box shadow under thumbnail images.
|
|
/// @type Shadow
|
|
$thumbnail-shadow: 0 0 0 1px rgba($black, 0.2) !default;
|
|
|
|
/// Box shadow under thumbnail images.
|
|
/// @type Shadow
|
|
$thumbnail-shadow-hover: 0 0 6px 1px rgba($primary-color, 0.5) !default;
|
|
|
|
/// Transition proprties for thumbnail images.
|
|
/// @type Transition
|
|
$thumbnail-transition: box-shadow 200ms ease-out !default;
|
|
|
|
/// Default radius for thumbnail images.
|
|
/// @type Number
|
|
$thumbnail-radius: $global-radius !default;
|
|
|
|
/// Adds thumbnail styles to an element.
|
|
@mixin thumbnail {
|
|
display: inline-block;
|
|
max-width: 100%;
|
|
margin-bottom: $thumbnail-margin-bottom;
|
|
|
|
border: $thumbnail-border;
|
|
border-radius: $thumbnail-radius;
|
|
box-shadow: $thumbnail-shadow;
|
|
|
|
line-height: 0;
|
|
}
|
|
|
|
@mixin thumbnail-link {
|
|
transition: $thumbnail-transition;
|
|
|
|
&:hover,
|
|
&:focus {
|
|
box-shadow: $thumbnail-shadow-hover;
|
|
}
|
|
|
|
image {
|
|
box-shadow: none;
|
|
}
|
|
}
|
|
|
|
@mixin foundation-thumbnail {
|
|
.thumbnail {
|
|
@include thumbnail;
|
|
}
|
|
|
|
a.thumbnail {
|
|
@include thumbnail-link;
|
|
}
|
|
}
|