styleguide/lib/thumbnails/index.styl at new-header · csseditor/styleguide · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
//
// Thumbnails
// --------------------------------------------------

//** Padding around the thumbnail image
$thumbnail-padding ?=         4px
//** Thumbnail background color
$thumbnail-bg ?=              $body-bg
//** Thumbnail border color
$thumbnail-border ?=          #ddd
//** Thumbnail border radius
$thumbnail-border-radius ?=   $border-radius-base

//** Custom text color for thumbnail captions
$thumbnail-caption-color ?=   $text-color
//** Padding around the thumbnail caption
$thumbnail-caption-padding ?= 9px


// Mixin and adjust the regular image class
.thumbnail
  display block
  padding $thumbnail-padding
  margin-bottom $line-height-computed
  line-height $line-height-base
  background-color $thumbnail-bg
  border 1px solid $thumbnail-border
  border-radius $thumbnail-border-radius
  transition border .2s ease-in-out

  > img,
  a > img
    @extend .img-responsive
    margin-left auto
    margin-right auto

  // Add a hover state for linked versions only
  a&:hover,
  a&:focus,
  a&.active
    border-color $link-color

  // Image captions
  .caption
    padding $thumbnail-caption-padding
    color $thumbnail-caption-color