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

   1 /*\r
   2   Cards\r
   3 \r
   4   Structure:\r
   5 \r
   6   titles\r
   7   lists\r
   8 */\r
   9 \r
  10 /// @Foundation.settings\r
  11 // Card\r
  12 $card-background: #fff !default;\r
  13 $card-color: isitlight($card-background) !default;\r
  14 $card-border: 1px solid smartscale($card-background, 7%) !default;\r
  15 $card-radius: $global-radius !default;\r
  16 $card-shadow: 0 1px 2px rgba(#000, 0.2) !default;\r
  17 $card-padding: $global-padding !default;\r
  18 $card-margin: 0.5rem !default;\r
  19 \r
  20 $card-divider-background: smartscale($card-background, 7%) !default;\r
  21 ///\r
  22 \r
  23 @mixin card-container(\r
  24   $background: $card-background,\r
  25   $color: $card-color,\r
  26   $border: $card-border,\r
  27   $radius: $card-radius,\r
  28   $shadow: $card-shadow,\r
  29   $padding: $card-padding,\r
  30   $margin: $card-margin\r
  31 ) {\r
  32   border: $border;\r
  33   margin-bottom: $margin;\r
  34   background: $background;\r
  35   color: $color;\r
  36   border-radius: $radius;\r
  37   box-shadow: $shadow;\r
  38   overflow: hidden;\r
  39 \r
  40   h1, h2, h3, h4, h5, h6 {\r
  41     color: inherit;\r
  42   }\r
  43 \r
  44   ul {\r
  45     margin-bottom: 0;\r
  46   }\r
  47 \r
  48   img {\r
  49     width: 100%;\r
  50   }\r
  51 }\r
  52 \r
  53 @mixin card-divider(\r
  54   $background: $card-divider-background,\r
  55   $padding: $card-padding\r
  56 ) {\r
  57   background: $background;\r
  58   padding: $padding;\r
  59 }\r
  60 \r
  61 @mixin card-section(\r
  62   $padding: $card-padding\r
  63 ) {\r
  64   padding: $padding;\r
  65 }\r
  66 \r
  67 @include exports(card) {\r
  68   .card {\r
  69     @include card-container;\r
  70 \r
  71     @each $color in map-keys($foundation-colors) {\r
  72       &.#{$color} {\r
  73         $color-value: map-get($foundation-colors, $color);\r
  74         @include card-container(\r
  75           $background: $color-value,\r
  76           $color: isitlight($color-value),\r
  77           $border: 0\r
  78         );\r
  79         .card-divider {\r
  80           @include card-divider(\r
  81             $background: smartscale($color-value, 7%)\r
  82           );\r
  83         }\r
  84       }\r
  85     }\r
  86   }\r
  87     .card-divider {\r
  88       @include card-divider;\r
  89     }\r
  90     .card-section {\r
  91       @include card-section;\r
  92     }\r
  93 }\r