_panels.scss 2.9 KB

123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107
  1. // Foundation by ZURB
  2. // foundation.zurb.com
  3. // Licensed under MIT Open Source
  4. @import 'global';
  5. //
  6. // @variables
  7. //
  8. $include-html-panel-classes: $include-html-classes !default;
  9. // We use these to control the background and border styles
  10. $panel-bg: scale-color($white, $lightness: -5%) !default;
  11. $panel-border-style: solid !default;
  12. $panel-border-size: 1px !default;
  13. $callout-panel-bg: scale-color($primary-color, $lightness: 94%) !default;
  14. // We use this % to control how much we darken things on hover
  15. $panel-border-color: scale-color($panel-bg, $lightness: -11%) !default;
  16. // We use these to set default inner padding and bottom margin
  17. $panel-margin-bottom: rem-calc(20) !default;
  18. $panel-padding: rem-calc(20) !default;
  19. // We use these to set default font colors
  20. $panel-font-color: $oil !default;
  21. $panel-font-color-alt: $white !default;
  22. $panel-header-adjust: true !default;
  23. $callout-panel-link-color: $primary-color !default;
  24. $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%) !default;
  25. //
  26. // @mixins
  27. //
  28. // We use this mixin to create panels.
  29. // $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $lightness: -5%) !default
  30. // $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20)
  31. // $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true
  32. @mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust, $border:true) {
  33. @if $bg {
  34. $bg-lightness: lightness($bg);
  35. @if $border {
  36. border-style: $panel-border-style;
  37. border-width: $panel-border-size;
  38. border-color: $panel-border-color;
  39. } @else {
  40. border-style: none;
  41. border-width: 0;
  42. }
  43. margin-bottom: $panel-margin-bottom;
  44. padding: $padding;
  45. background: $bg;
  46. @if $bg-lightness >= 50% { color: $panel-font-color; }
  47. @else { color: $panel-font-color-alt; }
  48. // Respect the padding, fool.
  49. > :first-child { margin-top: 0; }
  50. > :last-child { margin-bottom: 0; }
  51. @if $adjust {
  52. // We set the font color based on the darkness of the bg.
  53. @if $bg-lightness >= 50% {
  54. h1, h2, h3, h4, h5, h6, p, li, dl { color: $panel-font-color; }
  55. }
  56. @else {
  57. h1, h2, h3, h4, h5, h6, p, li, dl { color: $panel-font-color-alt; }
  58. }
  59. // reset header line-heights for panels
  60. h1, h2, h3, h4, h5, h6 {
  61. line-height: 1; margin-bottom: rem-calc(20) / 2;
  62. &.subheader { line-height: 1.4; }
  63. }
  64. }
  65. }
  66. }
  67. @include exports("panel") {
  68. @if $include-html-panel-classes {
  69. /* Panels */
  70. .panel { @include panel;
  71. &.callout {
  72. @include panel($callout-panel-bg);
  73. a:not(.button) {
  74. color: $callout-panel-link-color;
  75. &:hover,
  76. &:focus {
  77. color: $callout-panel-link-color-hover;
  78. }
  79. }
  80. }
  81. &.radius {
  82. @include radius;
  83. }
  84. }
  85. }
  86. }