UNPKG

2.23 kBSCSSView Raw
1// Foundation for Sites by ZURB
2// foundation.zurb.com
3// Licensed under MIT Open Source
4
5////
6/// @group prototype-font-styling
7////
8
9/// Responsive breakpoints for font styling types
10/// @type Boolean
11$prototype-font-breakpoints: $global-prototype-breakpoints !default;
12
13/// Letter spacing for `.font-wide`
14/// @type Number
15$prototype-wide-letter-spacing: rem-calc(4) !default;
16
17/// Default weight for `.font-normal`, defaulted to `global-weight-normal`
18/// @type Number
19$prototype-font-normal: $global-weight-normal !default;
20
21/// Default weight for `.font-bold`, defaulted to `global-weight-bold`
22/// @type Number
23$prototype-font-bold: $global-weight-bold !default;
24
25/// Font wide letter spacing!
26/// @param {Number} $letter-spacing [$prototype-wide-letter-spacing] Wide letter spacing for the font
27@mixin font-wide(
28 $letter-spacing: $prototype-wide-letter-spacing
29) {
30 letter-spacing: $letter-spacing;
31}
32
33/// Font Weight Normal, default value coming through `global-weight-normal`
34/// @param {Number} $weight [$prototype-font-normal] Weight of the font (normal)
35@mixin font-normal(
36 $weight: $prototype-font-normal
37) {
38 font-weight: $weight;
39}
40
41/// Font Weight Bold, default value coming through `global-weight-bold`
42/// @param {Number} $weight [$prototype-font-bold] Weight of the font (bold)
43@mixin font-bold(
44 $weight: $prototype-font-bold
45) {
46 font-weight: $weight;
47}
48
49/// Font Style Italic
50@mixin font-italic {
51 font-style: italic !important;
52}
53
54@mixin foundation-prototype-font-styling {
55 .font-wide{
56 @include font-wide;
57 }
58
59 .font-normal {
60 @include font-normal;
61 }
62
63 .font-bold {
64 @include font-bold;
65 }
66
67 .font-italic {
68 @include font-italic;
69 }
70
71 @if ($prototype-font-breakpoints) {
72 // Loop through Responsive Breakpoints
73 @each $size in $breakpoint-classes {
74 @include breakpoint($size) {
75 @if $size != $-zf-zero-breakpoint {
76 .#{$size}-font-wide{
77 @include font-wide;
78 }
79
80 .#{$size}-font-normal {
81 @include font-normal;
82 }
83
84 .#{$size}-font-bold {
85 @include font-bold;
86 }
87
88 .#{$size}-font-italic {
89 @include font-italic;
90 }
91 }
92 }
93 }
94 }
95}