summaryrefslogtreecommitdiffstats
path: root/afm-client/bower_components/foundation-apps/scss/components/_extras.scss
blob: 1e2443a3f144595bb62b24a2b774835ef09bcfa9 (plain)
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
48
49
50
51
52
53
54
/*
  Odds and ends.
*/

/// @Foundation.settings
// Extras
$closebutton-position: (top right) !default;
$closebutton-size: 2em !default;
$closebutton-lineheight: 0.5 !default;
$closebutton-color: #999 !default;
$closebutton-color-hover: #333 !default;

$thumbnail-padding: 0.5rem !default;
$thumbnail-shadow: 0 3px 15px rgba(black, 0.25) !default;
///

// A basic close button. They pin to the corner of the thing they're inside.
%close-button {
  $x: nth($closebutton-position, 1);
  $y: nth($closebutton-position, 2);

  position: absolute;
  color: $closebutton-color;
  #{$x}: $global-padding;
  #{$y}: $global-padding;
  font-size: $closebutton-size;
  line-height: $closebutton-lineheight;
  cursor: pointer;

  &:hover {
    color: $closebutton-color-hover;
  }
}

// Make your images fancy-like.
%thumbnail {
  padding: $thumbnail-padding;
  box-shadow: $thumbnail-shadow;
}

@include exports(extras) {
  .close-button {
    @extend %close-button;
  }
  .thumbnail {
    @extend %thumbnail;
  }
  ul.thumbnails > li {
    margin-bottom: 1rem;
    
    a { display: block; }
    img { @extend %thumbnail; }
  }
}