123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107 |
- // Foundation by ZURB
- // foundation.zurb.com
- // Licensed under MIT Open Source
- @import 'global';
- //
- // @variables
- //
- $include-html-panel-classes: $include-html-classes !default;
- // We use these to control the background and border styles
- $panel-bg: scale-color($white, $lightness: -5%) !default;
- $panel-border-style: solid !default;
- $panel-border-size: 1px !default;
- $callout-panel-bg: scale-color($primary-color, $lightness: 94%) !default;
- // We use this % to control how much we darken things on hover
- $panel-border-color: scale-color($panel-bg, $lightness: -11%) !default;
- // We use these to set default inner padding and bottom margin
- $panel-margin-bottom: rem-calc(20) !default;
- $panel-padding: rem-calc(20) !default;
- // We use these to set default font colors
- $panel-font-color: $oil !default;
- $panel-font-color-alt: $white !default;
- $panel-header-adjust: true !default;
- $callout-panel-link-color: $primary-color !default;
- $callout-panel-link-color-hover: scale-color($callout-panel-link-color, $lightness: -14%) !default;
- //
- // @mixins
- //
- // We use this mixin to create panels.
- // $bg - Sets the panel background color. Default: $panel-pg || scale-color($white, $lightness: -5%) !default
- // $padding - Sets the panel padding amount. Default: $panel-padding || rem-calc(20)
- // $adjust - Sets the font color based on the darkness of the bg & resets header line-heights for panels. Default: $panel-header-adjust || true
- @mixin panel($bg:$panel-bg, $padding:$panel-padding, $adjust:$panel-header-adjust, $border:true) {
- @if $bg {
- $bg-lightness: lightness($bg);
- @if $border {
- border-style: $panel-border-style;
- border-width: $panel-border-size;
- border-color: $panel-border-color;
- } @else {
- border-style: none;
- border-width: 0;
- }
- margin-bottom: $panel-margin-bottom;
- padding: $padding;
- background: $bg;
- @if $bg-lightness >= 50% { color: $panel-font-color; }
- @else { color: $panel-font-color-alt; }
- // Respect the padding, fool.
- > :first-child { margin-top: 0; }
- > :last-child { margin-bottom: 0; }
- @if $adjust {
- // We set the font color based on the darkness of the bg.
- @if $bg-lightness >= 50% {
- h1, h2, h3, h4, h5, h6, p, li, dl { color: $panel-font-color; }
- }
- @else {
- h1, h2, h3, h4, h5, h6, p, li, dl { color: $panel-font-color-alt; }
- }
- // reset header line-heights for panels
- h1, h2, h3, h4, h5, h6 {
- line-height: 1; margin-bottom: rem-calc(20) / 2;
- &.subheader { line-height: 1.4; }
- }
- }
- }
- }
- @include exports("panel") {
- @if $include-html-panel-classes {
- /* Panels */
- .panel { @include panel;
- &.callout {
- @include panel($callout-panel-bg);
- a:not(.button) {
- color: $callout-panel-link-color;
- &:hover,
- &:focus {
- color: $callout-panel-link-color-hover;
- }
- }
- }
- &.radius {
- @include radius;
- }
- }
- }
- }
|