_L3-rhythm.scss

$desired-body-font-size: 18px !default;
$body-line-height-factor: 1.5 !default;
$min-line-height-factor: 1.2 !default;

$input-border-width: 1px !default;
$fieldset-border-width: 1px !default;

@import "modules/converters";

$body-leading: round(font-size-px($desired-body-font-size)*$body-line-height-factor)/font-size-px(1)*1rem !default;
$vertical-rhythm-base: $body-leading;
$spacing-base: $vertical-rhythm-base;

@import "modules/flow-rhythm";

$font-sizes: flow-font-size(1, $body-line-height-factor),
flow-font-size(1, ($min-line-height-factor + $body-line-height-factor)/2),
flow-font-size(1, $min-line-height-factor),
flow-font-size(2, $min-line-height-factor),
flow-font-size(3, $min-line-height-factor),
flow-font-size(4, $min-line-height-factor) !default;

$body-font-size: nth($font-sizes, 1);

$line-heights: ();
@each $font-size in $font-sizes {
  $line-heights: append($line-heights, flow-line-height($font-size));
}

@import "L2-sizing";

/* Kingdom CSS Level 3 - Vertical Rhythm */

@for $i from 1 through length($font-sizes) {
  /* %text-#{$i}-tight for vertical rhythm */
  %text-#{$i}-tight {
    @include length-relative(line-height, flow-lines(nth($font-sizes, $i)));
  }
}

hr {
  @extend %h-1;
  $background-image: linear-gradient(get-color(border), get-color(border));
  @supports (background-image: $background-image) {
    border: 0;
    background-image: $background-image;
  }
  background-size: 1px 1px;
  background-repeat: repeat-x;
  background-position: center;
}

input, button, select {
  @include border-preserving-line-height($vertical-rhythm-base, $input-border-width);
  outline-offset: -2px; //Same focus ring size for same border in Safari
}

[type="checkbox"], [type="radio"] {
  border: initial;
  @include baseline-align;
  height: auto;
  @include size-text(inherit, inherit);
}

select {
  &[multiple], &[size] {
    vertical-align: bottom;
    // Multiple and sized selects may span several lines...
    height: auto;
    max-height: 100%;
    //...but not in mobile Safari/Chrome where the select will be a button
    @media (pointer: coarse) { //Target modern mobile browsers...
      @supports not (-moz-appearance: none) { //except Firefox
        height: var(--line-height, spacing-base-var());
        -webkit-appearance: menulist-button;
      }
    }

    @media (pointer: fine) { //Target modern desktop browsers
      // Fit four options into three lines of the vertical rhythm
      // This is a bit of a hack, attempting to guess the "medium" line-height
      // It's only relevant for desktop Safari where the last option is hidden if it doesn't fit entirely in the select
      $line-height: 1.2;
      font-size: calc((3 * #{spacing-base-var()} - 2 * #{$input-border-width}) / 4 / #{$line-height});
    }
  }

  &[multiple]:not([size]) {
    @include length-relative(max-height, 3);

    @media (pointer: fine) { //Target modern desktop browsers
      @include length-relative(height, 3);
    }
  }

  &:not([multiple]):not([size]) {
    /* Force dropdown selects out of Safari default menulist styling, to fit on one line */
    -webkit-appearance: menulist-button;
    /* menulist-button has no arrows in Firefox so return it to normal */
    -moz-appearance: menulist;
  }
}

textarea {
  @include border-for-auto-height($width: $input-border-width);
  padding-top: 0;
  padding-bottom: 0;
  @include length-relative(min-height, 2);
}

fieldset {
  @include border-for-auto-height($width: $fieldset-border-width);
}

legend {
  // Keep legend centered on the line when the fieldset is moved up because of border
  padding-top: var(--border-top-width, #{$fieldset-border-width});
}

.visualize-vertical-rhythm {
  $grid-color: transparentize(transform-hue(get-color(primary), red), 0.85);
  // This doesn't work very well when $vertical-rhythm-base doesn't correspond to a whole pixel value
  background-image: linear-gradient($grid-color, $grid-color 1px, transparent 1px);
  background-size: 1px spacing-base-var();
}