daily pastebin goal
20%
SHARE
TWEET

Untitled

a guest Feb 13th, 2018 50 Never
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
  1. // $type-scale: (
  2. //   // 4: 2.074em,
  3. //   3: 1.728em,
  4. //   2: 1.44em,
  5. //   1: 1.2em,
  6. //   0: 1em,
  7. //   -1: 0.833em,
  8. //   // -2: 0.694em,
  9. // );
  10.  
  11.  
  12.  
  13. // @function type-scale($level) {
  14. //   @return map-get($type-scale, $level);
  15. // }
  16.  
  17. // $base-font-size: 15px;
  18. // $base-line-height: $base-font-size * 1.2;
  19.  
  20. // $line-heights: (
  21. //   -1: $base-line-height,
  22. //   0: $base-line-height,
  23. //   1: $base-line-height * 2,
  24. //   2: $base-line-height * 2
  25. // );
  26.  
  27. // // Again, we can make a helper function:
  28. // @function line-height($level) {
  29. //   @return map-get($line-heights, $level);
  30. // }
  31.  
  32. // @mixin type-setting($level: 0) {
  33. //   font-size: type-scale($level);
  34. //   line-height: line-height($level);
  35. // }
  36.  
  37.  
  38.  
  39. // The main heading
  40. // .heading-1 { @include type-setting(2); }
  41.  
  42. // // The smaller top heading
  43. // .heading-2 { @include type-setting(-1); }
  44.  
  45. // .paragraph { @include type-setting(0); }
  46.  
  47. // .recipe-value { @include type-setting(1); }
  48.  
  49. // .recipe-text { @include type-setting(-1); }
  50.  
  51. // .recipe-button { @include type-setting(-1); }
  52.  
  53.  
  54. // $type-scale: (
  55. //   // 4: 2.074em,
  56. //   3: 1.728em,
  57. //   2: 1.44em,
  58. //   1: 1.2em,
  59. //   0: 1em,
  60. //   -1: 0.833em,
  61. //   // -2: 0.694em,
  62. // );
  63.  
  64.  
  65.  
  66. // @function type-scale($level) {
  67. //   @return map-get($type-scale, $level);
  68. // }
  69.  
  70. // $base-font-size: 15px;
  71. // $base-line-height: $base-font-size * 1.2;
  72.  
  73. // $line-heights: (
  74. //   -1: $base-line-height,
  75. //   0: $base-line-height,
  76. //   1: $base-line-height * 2,
  77. //   2: $base-line-height * 2
  78. // );
  79.  
  80. // // Again, we can make a helper function:
  81. // @function line-height($level) {
  82. //   @return map-get($line-heights, $level);
  83. // }
  84.  
  85. // @mixin type-setting($level: 0) {
  86. //   font-size: type-scale($level);
  87. //   line-height: line-height($level);
  88. // }
  89.  
  90.  
  91. // The main heading
  92. .heading-1 { @include type-setting(2); }
  93.  
  94. // The smaller top heading
  95. .heading-2 { @include type-setting(-1); }
  96.  
  97. .paragraph { @include type-setting(0); }
  98.  
  99. .recipe-value { @include type-setting(1); }
  100.  
  101. .recipe-text { @include type-setting(-1); }
  102.  
  103. .recipe-button { @include type-setting(-1); }
RAW Paste Data
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy. OK, I Understand
 
Top