-
Notifications
You must be signed in to change notification settings - Fork 0
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Showing
7 changed files
with
183 additions
and
377 deletions.
There are no files selected for viewing
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| Original file line number | Diff line number | Diff line change |
|---|---|---|
| @@ -1,189 +1,2 @@ | ||
| @use 'sass:math'; | ||
|
|
||
| @mixin fluidType( | ||
| $minFontSize: $baseMinFontSize, | ||
| $maxFontSize: $baseMaxFontSize, | ||
| $minWidth: $minContentWidth, | ||
| $maxWidth: $maxContentWidth, | ||
| $minBreakpoint: true, | ||
| $midBreakpoint: true, | ||
| $maxBreakpoint: true | ||
| ) { | ||
| @if $midBreakpoint { | ||
| font-size: calc( | ||
| #{rem($minFontSize)} + | ||
| (#{$maxFontSize} - #{$minFontSize}) * | ||
| ((100vw - #{$minWidth}px) / (#{$maxWidth} - #{$minWidth})) | ||
| ); | ||
| } | ||
|
|
||
| @if $minBreakpoint { | ||
| @media (max-width: #{$minWidth}px) { | ||
| font-size: rem($minFontSize); | ||
| } | ||
| } | ||
|
|
||
| @if $maxBreakpoint { | ||
| @media (min-width: #{$maxWidth}px) { | ||
| font-size: rem($maxFontSize); | ||
| } | ||
| } | ||
| } | ||
|
|
||
| @mixin setType($fontSize--mobile, $fontSize--desktop, $minClamp: false) { | ||
| $fontSize--mobile-small: math.div( | ||
| ($fontSize--mobile * $siteMin), | ||
| $siteBasis--mobile | ||
| ); | ||
| $fontSize--mobile-large: math.div( | ||
| ($fontSize--mobile * $siteMax--mobile), | ||
| $siteBasis--mobile | ||
| ); | ||
| $fontSize--desktop-small: math.div( | ||
| ($fontSize--desktop * $siteMin--desktop), | ||
| $siteBasis--desktop | ||
| ); | ||
| $fontSize--desktop-large: math.div( | ||
| ($fontSize--desktop * $siteMax--desktop), | ||
| $siteBasis--desktop | ||
| ); | ||
| $minMobileClamp: $fontSize--mobile-small; | ||
| $minDesktopClamp: $fontSize--desktop-small; | ||
|
|
||
| @if $minClamp { | ||
| $minMobileClamp: $fontSize--mobile * math.div($minClamp, 100%); | ||
| $minDesktopClamp: $fontSize--desktop * math.div($minClamp, 100%); | ||
| } | ||
|
|
||
| // $siteMin to $siteMax--mobile | ||
| @include fluidType( | ||
| $minFontSize: $fontSize--mobile-small, | ||
| $maxFontSize: $fontSize--mobile-large, | ||
| $minWidth: $siteMin, | ||
| $maxWidth: $siteMax--mobile, | ||
| $maxBreakpoint: false | ||
| ); | ||
|
|
||
| // below $siteMin | ||
| @media (min-width: 1px) and (max-width: #{($siteMin)}px) { | ||
| font-size: rem($minMobileClamp); | ||
| } | ||
|
|
||
| // minClamp rules | ||
| @if $minClamp { | ||
| font-size: rem($minMobileClamp); | ||
|
|
||
| @media (min-width: #{$siteBasis--mobile + 1}px) and (max-width: #{($siteMax--mobile - 1)}px) { | ||
| @include fluidType( | ||
| $minFontSize: $minMobileClamp, | ||
| $maxFontSize: $fontSize--mobile-large, | ||
| $minWidth: $siteBasis--mobile, | ||
| $maxWidth: $siteMax--mobile, | ||
| $maxBreakpoint: false | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| // lock size at $siteMax--mobile (tablet) until $siteMin--desktop | ||
| @media (min-width: #{$siteMax--mobile}px) { | ||
| font-size: rem($minDesktopClamp); | ||
| } | ||
|
|
||
| // $siteMin--desktop to $siteMax--desktop | ||
| @media (min-width: #{$siteMin--desktop}px) { | ||
| @include fluidType( | ||
| $minFontSize: $fontSize--desktop-small, | ||
| $maxFontSize: $fontSize--desktop-large, | ||
| $minWidth: $siteMin--desktop, | ||
| $maxWidth: $siteMax--desktop, | ||
| $minBreakpoint: false, | ||
| $maxBreakpoint: false | ||
| ); | ||
| } | ||
|
|
||
| // Desktop minClamp rules | ||
| @if $minClamp { | ||
| // $siteMin--desktop to $siteBasis--desktop | ||
| @media (min-width: #{$siteMin--desktop}px) and (max-width: #{$siteBasis--desktop - 1}px) { | ||
| @include fluidType( | ||
| $minFontSize: $minDesktopClamp, | ||
| $maxFontSize: $fontSize--desktop, | ||
| $minWidth: $siteMin--desktop, | ||
| $maxWidth: $siteBasis--desktop, | ||
| $minBreakpoint: false, | ||
| $maxBreakpoint: false | ||
| ); | ||
| } | ||
| } | ||
|
|
||
| // $siteMax--desktop and above | ||
| @include fluidType( | ||
| $minFontSize: $minDesktopClamp, | ||
| $maxFontSize: $fontSize--desktop-large, | ||
| $minWidth: $siteMin--desktop, | ||
| $maxWidth: $siteMax--desktop, | ||
| $minBreakpoint: false, | ||
| $midBreakpoint: false | ||
| ); | ||
| } | ||
|
|
||
| @mixin h { | ||
| font-family: $headingFontStack; | ||
| font-weight: $headingFont-bold; | ||
| color: $black; | ||
| line-height: 1.1em; | ||
| } | ||
|
|
||
| @mixin h1 { | ||
| @include setType(32, 48); | ||
| } | ||
|
|
||
| @mixin h2 { | ||
| @include setType(26, 40); | ||
| } | ||
|
|
||
| @mixin h3 { | ||
| @include setType(22, 33); | ||
| } | ||
|
|
||
| @mixin h4 { | ||
| @include setType(20, 27); | ||
| } | ||
|
|
||
| @mixin h5 { | ||
| @include setType(18, 23); | ||
| } | ||
|
|
||
| @mixin h6 { | ||
| @include setType(16, 20); | ||
| } | ||
|
|
||
| @mixin p--xxs { | ||
| @include setType(10, 10, 100%); | ||
| } | ||
|
|
||
| @mixin p--xs { | ||
| @include setType(10, 12, 100%); | ||
| } | ||
|
|
||
| @mixin p--sm { | ||
| @include setType(12, 14, 100%); | ||
| } | ||
|
|
||
| @mixin p { | ||
| color: $gray-200; | ||
| line-height: 1.4; | ||
| @include setType(14, 16, 95%); | ||
| } | ||
|
|
||
| @mixin p--lg { | ||
| @include setType(16, 18, 100%); | ||
| } | ||
|
|
||
| @mixin p--xl { | ||
| @include setType(18, 20, 100%); | ||
| } | ||
|
|
||
| @mixin p--xxl { | ||
| @include setType(20, 22, 100%); | ||
| } | ||
| // nothing to see here. | ||
| // Fluid Type and setType are now deprecated. See 02-base/type |
Oops, something went wrong.