sass snippets

variables.sass

@use 'sass:math'

$dd-width: 375px
$ratio: math.div(1, 10)

@function strip-unit($number)
  @if type-of($number) == 'number' and not unitless($number)
    @return math.div($number, ($number * 0 + 1))
  @return $number

@function measure($size)
  @return #{math.div(strip-unit($size), strip-unit($dd-width)) * ( math.div(1 ,$ratio))}rem

@function relative-to-font($target-size, $font-size)
  @return #{math.div($target-size, $font-size)}em

// Font family - start
$font-family: Roboto,Helvetica neue,Avenir,Arial
$font-family-codeblock: Menlo,Roboto,Helvetica neue
// Font family - end

// Font weight - start
$font-weight-bold: 700 // aka bold
$font-weight-medium: 500
$font-weight-regular: 400 // aka normal
// Font weight - end

// Color - start
$color-background: #2a3b42
$color-dullgrey: #435761
$color-black: #182429
// Color - end

@mixin media-desktop
  @media only screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 1)
    @content
  @media screen and (min-device-width: 1200px) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)
    @content

@mixin responsive-dimension($name, $size)
  #{$name}: measure($size)
  @include media-desktop
    #{$name}: $size

@mixin responsive-padding($top, $right: $top, $bottom: $top, $left: $right)
  padding: measure($top) measure($right) measure($bottom) measure($left)
  @include media-desktop
    padding: $top $right $bottom $left

@mixin responsive-margin($top, $right: $top, $bottom: $top, $left: $right)
  margin: measure($top) measure($right) measure($bottom) measure($left)
  @include media-desktop
    margin: $top $right $bottom $left

$margin-top: 26px
$margin-bottom: $margin-top
$headline-margin-top: 40px
$headline-margin-bottom: $margin-bottom

// Font properties for elements in an article - start

// margin for h1 - h7, codeblock, images(svgs)
@mixin headline-margin
  @include responsive-margin($headline-margin-top, 0, $headline-margin-bottom)

// margin for normal paragraph, blockquoto
@mixin normal-margin
  @include responsive-margin($margin-top, 0, $margin-bottom)

@mixin responsive-font($font-size, $line-height)
  @include responsive-dimension('font-size', $font-size)
  line-height: #{math.div($line-height, $font-size)}

@mixin headline($font-size, $line-height)
  @include responsive-font($font-size, $line-height)
  font-family: $font-family

@mixin font-h1
  @include headline(36px, 45px)
  font-weight: $font-weight-bold
  color: $color-background

@mixin font-h2
  @include headline(26px, 32px)
  font-weight: $font-weight-bold
  color: $color-background

@mixin font-h3
  @include headline(20px, 28px)
  font-weight: $font-weight-medium
  color: $color-dullgrey

@mixin font-h4
  @include headline(18px, 26px)
  font-weight: $font-weight-medium
  color: $color-black

@mixin font-h5
  @include headline(16px, 24px)
  font-weight: $font-weight-regular
  color: $color-background

@mixin font-h6
  @include headline(14px, 22px)
  font-weight: $font-weight-regular
  color: $color-background

@mixin font-title-general
  @include headline(16px, 26px)
  font-weight: $font-weight-medium
  color: $color-black

@mixin font-table-title
  @include headline(14px, 26px)
  font-weight: $font-weight-bold
  color: $color-black

@mixin font-body-article
  @include headline(16px, 26px)
  font-weight: $font-weight-regular
  color: $color-background

@mixin font-body-general
  @include headline(14px, 22px)
  font-weight: $font-weight-regular
  color: $color-background

@mixin font-body-codeblock
  @include responsive-font(14px, 22px)
  font-family: $font-family-codeblock

// Font properties for headline (h1 - h6) in an article - end

$blue: #61a4f5
$color-primary: #282828 // app bar, bottom bar background color
$color-accent: #028AFF
$color-text: #435761
$color-link: #7AB3E7
$color-warning: #ED5E2D
$color-tips: #FFDB47
$color-divider: #E5EAF0
$color-whitespace: #E9EAEC

$appbar-height: 54px

// width of desktop side nav
$side-nav-width: 250px

// width of desktop article
$article-width: 971px
$article-width-exclude-toc: 720px
$article-toc-width: $article-width - $article-width-exclude-toc - 60px

@mixin media-desktop
  @media only screen and (min-device-width: $article-width-exclude-toc + $side-nav-width) and (-webkit-min-device-pixel-ratio: 1)
    @content
  @media screen and (min-device-width: $article-width-exclude-toc + $side-nav-width) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)
    @content
@mixin media-desktop-large
  @media only screen and (min-device-width: $article-width + $side-nav-width) and (-webkit-min-device-pixel-ratio: 1)
    @content
  @media screen and (min-device-width: $article-width + $side-nav-width) and (-webkit-min-device-pixel-ratio: 2) and (min-resolution: 192dpi)
    @content

@mixin clear-float
  &::after
    content: ''
    display: block
    clear: both

$nav-fontsize: measure(16px)
$nav-bottom-fontsize: measure(13px)

// zindex options
$index-nav: 1000
$index-popup: 999
$index-overlay: 995
$index-sidenav: 990