afm-client/bower_components/foundation-apps/scss/components/_extras.scss

   1 /*
   2   Odds and ends.
   3 */
   4
   5 /// @Foundation.settings
   6 // Extras
   7 $closebutton-position: (top right) !default;
   8 $closebutton-size: 2em !default;
   9 $closebutton-lineheight: 0.5 !default;
  10 $closebutton-color: #999 !default;
  11 $closebutton-color-hover: #333 !default;
  12
  13 $thumbnail-padding: 0.5rem !default;
  14 $thumbnail-shadow: 0 3px 15px rgba(black, 0.25) !default;
  15 ///
  16
  17 // A basic close button. They pin to the corner of the thing they're inside.
  18 %close-button {
  19   $x: nth($closebutton-position, 1);
  20   $y: nth($closebutton-position, 2);
  21
  22   position: absolute;
  23   color: $closebutton-color;
  24   #{$x}: $global-padding;
  25   #{$y}: $global-padding;
  26   font-size: $closebutton-size;
  27   line-height: $closebutton-lineheight;
  28   cursor: pointer;
  29
  30   &:hover {
  31     color: $closebutton-color-hover;
  32   }
  33 }
  34
  35 // Make your images fancy-like.
  36 %thumbnail {
  37   padding: $thumbnail-padding;
  38   box-shadow: $thumbnail-shadow;
  39 }
  40
  41 @include exports(extras) {
  42   .close-button {
  43     @extend %close-button;
  44   }
  45   .thumbnail {
  46     @extend %thumbnail;
  47   }
  48   ul.thumbnails > li {
  49     margin-bottom: 1rem;
  50
  51     a { display: block; }
  52     img { @extend %thumbnail; }
  53   }
  54 }