assets/stylesheets/bootstrap/_thumbnails.scss
author ymh <ymh.work@gmail.com>
Thu, 15 Jun 2017 12:17:09 +0200
changeset 114 af15590802a4
permissions -rw-r--r--
add a lot of files
Ignore whitespace changes - Everywhere: Within whitespace: At end of lines:
114
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     1
//
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     2
// Thumbnails
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     3
// --------------------------------------------------
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     4
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     5
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     6
// Mixin and adjust the regular image class
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     7
.thumbnail {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     8
  display: block;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
     9
  padding: $thumbnail-padding;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    10
  margin-bottom: $line-height-computed;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    11
  line-height: $line-height-base;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    12
  background-color: $thumbnail-bg;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    13
  border: 1px solid $thumbnail-border;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    14
  border-radius: $thumbnail-border-radius;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    15
  @include transition(border .2s ease-in-out);
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    16
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    17
  > img,
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    18
  a > img {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    19
    @include img-responsive;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    20
    margin-left: auto;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    21
    margin-right: auto;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    22
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    23
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    24
  // [converter] extracted a&:hover, a&:focus, a&.active to a.thumbnail:hover, a.thumbnail:focus, a.thumbnail.active
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    25
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    26
  // Image captions
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    27
  .caption {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    28
    padding: $thumbnail-caption-padding;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    29
    color: $thumbnail-caption-color;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    30
  }
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    31
}
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    32
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    33
// Add a hover state for linked versions only
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    34
a.thumbnail:hover,
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    35
a.thumbnail:focus,
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    36
a.thumbnail.active {
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    37
  border-color: $link-color;
af15590802a4 add a lot of files
ymh <ymh.work@gmail.com>
parents:
diff changeset
    38
}